From b36f0f36baf61986258202d68348b1b64602f02d Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 29 May 2026 14:03:36 +0200 Subject: [PATCH 1/7] Add missing closure --- components/src/SwrHeader/SwrHeader.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/src/SwrHeader/SwrHeader.svelte b/components/src/SwrHeader/SwrHeader.svelte index bf0176b0..dbcb4c8d 100644 --- a/components/src/SwrHeader/SwrHeader.svelte +++ b/components/src/SwrHeader/SwrHeader.svelte @@ -30,7 +30,9 @@ showTextShadow = false }: SwrHeaderProps = $props(); - const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null; + const updated_on = $derived( + updated ? (updated instanceof Date ? updated : new Date(updated)) : null + );
From cebfeb9e3f72bfbd9edce8c4a6c9171f6d8d96d1 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Fri, 29 May 2026 14:32:07 +0200 Subject: [PATCH 2/7] Block out change --- components/src/DesignTokens/Tokens.ts | 2 +- .../src/Switcher/Switcher.stories.svelte | 31 ++++++++--- components/src/Switcher/Switcher.svelte | 51 +++++++------------ 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts index 173aef18..78705ed5 100644 --- a/components/src/DesignTokens/Tokens.ts +++ b/components/src/DesignTokens/Tokens.ts @@ -190,7 +190,7 @@ const semantics: ColourMap = { light: '#ffffff' }, surfaceBorder: { - dark: 'rgba(255,255,255,.15)', + dark: shades.gray.dark2, light: shades.gray.light3 }, pageFill: { diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte index c7a6a7ae..a66f9160 100644 --- a/components/src/Switcher/Switcher.stories.svelte +++ b/components/src/Switcher/Switcher.stories.svelte @@ -6,7 +6,10 @@ const { Story } = defineMeta({ title: 'Form/Switcher', - component: Switcher + component: Switcher, + parameters: { + layout: 'fullscreen' + } }); const onChangeSpy = fn(); @@ -14,7 +17,9 @@ - +
+ +
@@ -48,12 +53,14 @@ }} > - +
+ +
@@ -123,3 +130,11 @@ /> + + diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index e114fced..33e214da 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -94,17 +94,12 @@ } ul { - width: 100%; - display: flex; + display: inline-flex; flex-direction: column; - overflow-x: auto; padding: 0; margin: 0; - border-top: 1px solid var(--color-textSecondary); - border-left: 1px solid var(--color-textSecondary); color: var(--color-textPrimary); - background: var(--color-surfaceFill); - border-radius: var(--br-small); + gap: 0; @media (min-width: base.$bp-s) { flex-flow: row; @@ -118,22 +113,12 @@ } li { display: contents; - &:last-child label { - border-bottom-right-radius: var(--br-small); - } - &:first-child label { - border-top-left-radius: var(--br-small); - } } input { position: absolute; left: -9999px; } - .small label { - font-size: var(--fs-small-1); - height: 2em; - padding: 0 0.65em; - } + label { font-size: var(--fs-base); line-height: 1; @@ -146,12 +131,10 @@ align-items: center; color: currentColor; position: relative; - transition: var(--fast); - text-underline-offset: 0.1em; - height: 2.25em; - border-right: 1px solid var(--color-textSecondary); - border-bottom: 1px solid var(--color-textSecondary); - flex-grow: 1; + user-select: none; + height: 2.15em; + margin-right: -1px; + border: 1px solid var(--color-surfaceBorder); @media (min-width: base.$bp-s) { flex-basis: 0; @@ -163,17 +146,19 @@ flex-basis: auto; } .is-selected & { - background: var(--color-surfaceHover); + background: var(--color-surfaceFill); + transform: scale(1.1); + border: 1px solid var(--color-textSecondary); + box-shadow: 0 0 5px 1px rgba(black, 0.85); + z-index: 100; font-weight: 700; - - @media (prefers-color-scheme: dark) { - background: var(--gray-dark-2); - } + border-radius: 2px; } - &:hover, - &:focus-visible { - text-decoration: underline; - text-decoration-color: var(--color-textSecondary); + .small & { + font-size: var(--fs-small-1); + letter-spacing: 0.01em; + height: 2em; + padding: 0 0.7em; } } From 3069e623751236b47217f62b051b40c0a8c2e439 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Sat, 30 May 2026 09:28:03 +0200 Subject: [PATCH 3/7] Bump playwright from 1.58.1 to 1.60.0 See: https://github.com/actions/runner-images/issues/14173\#issuecomment-4577584513 --- components/package.json | 2 +- package-lock.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/package.json b/components/package.json index 70a87334..1da04504 100644 --- a/components/package.json +++ b/components/package.json @@ -64,7 +64,7 @@ "layercake": "^10.0.2", "mdx-mermaid": "2.0.3", "nodemon": "^3.1.11", - "playwright": "1.58.1", + "playwright": "1.60.0", "publint": "0.3.17", "sass": "1.93.2", "sass-embedded": "1.97.3", diff --git a/package-lock.json b/package-lock.json index 98672fb2..6e932c7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "layercake": "^10.0.2", "mdx-mermaid": "2.0.3", "nodemon": "^3.1.11", - "playwright": "1.58.1", + "playwright": "1.60.0", "publint": "0.3.17", "sass": "1.93.2", "sass-embedded": "1.97.3", @@ -19978,13 +19978,13 @@ } }, "node_modules/playwright": { - "version": "1.58.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.1.tgz", - "integrity": "sha512-+2uTZHxSCcxjvGc5C891LrS1/NlxglGxzrC4seZiVjcYVQfUa87wBL6rTDqzGjuoWNjnBzRqKmF6zRYGMvQUaQ==", + "version": "1.60.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz", + "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.58.1" + "playwright-core": "1.60.0" }, "bin": { "playwright": "cli.js" @@ -19997,9 +19997,9 @@ } }, "node_modules/playwright-core": { - "version": "1.58.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.1.tgz", - "integrity": "sha512-bcWzOaTxcW+VOOGBCQgnaKToLJ65d6AqfLVKEWvexyS3AS6rbXl+xdpYRMGSRBClPvyj44njOWoxjNdL/H9UNg==", + "version": "1.60.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz", + "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==", "dev": true, "license": "Apache-2.0", "bin": { From b85ba5fda887cc70b0c1a75ba06f42071bd16edb Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Sat, 30 May 2026 09:36:53 +0200 Subject: [PATCH 4/7] pin node to 24.15.0 See: https://github.com/actions/runner-images/issues/14173 --- .github/workflows/e2e.yml | 2 +- .github/workflows/test-storybook.yml | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index d9f9719f..99e97e92 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -21,7 +21,7 @@ jobs: - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0 with: - node-version: 24 + node-version: 24.15.0 - run: npm ci --workspace=components --include=dev - run: npm run sync --workspace=components - run: npm ci --workspace=mock-sveltekit diff --git a/.github/workflows/test-storybook.yml b/.github/workflows/test-storybook.yml index 5e500bf1..93110406 100644 --- a/.github/workflows/test-storybook.yml +++ b/.github/workflows/test-storybook.yml @@ -14,14 +14,15 @@ on: jobs: run-tests: runs-on: ubuntu-latest + timeout-minutes: 10 defaults: run: working-directory: ./components steps: - - uses: actions/checkout@v6 - - uses: actions/setup-node@v6 + - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 + - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0 with: - node-version: 24 + node-version: 24.15.0 - run: npm ci - run: npx playwright install --with-deps - run: npm run sync From 99e40451d3c7a825ca9f278ca6d5175111d5d0fe Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 1 Jun 2026 17:21:44 +0200 Subject: [PATCH 5/7] Iterate layout --- .../src/DesignTokens/DesignTokens.svelte | 2 + components/src/DesignTokens/Tokens.ts | 8 +-- .../src/Switcher/Switcher.stories.svelte | 61 +++++++++++-------- components/src/Switcher/Switcher.svelte | 28 ++++++--- 4 files changed, 60 insertions(+), 39 deletions(-) diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte index d8f32d23..69ba4ac9 100644 --- a/components/src/DesignTokens/DesignTokens.svelte +++ b/components/src/DesignTokens/DesignTokens.svelte @@ -62,6 +62,7 @@ --color-pageFill: var(--pageFill-light); --color-surfaceFill: var(--surfaceFill-light); --color-surfaceHover: var(--surfaceHover-light); + --color-raisedSurfaceFill: var(--raisedSurfaceFill-light); --color-surfaceBorder: var(--surfaceBorder-light); --color-dropShadow: var(--dropShadow-light); @@ -70,6 +71,7 @@ --color-logoFillHover: var(--logoFillHover-dark); --color-pageFill: var(--pageFill-dark); --color-surfaceFill: var(--surfaceFill-dark); + --color-raisedSurfaceFill: var(--raisedSurfaceFill-dark); --color-surfaceBorder: var(--surfaceBorder-dark); --color-surfaceHover: var(--surfaceHover-dark); --color-textPrimary: var(--textPrimary-dark); diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts index 78705ed5..5024943e 100644 --- a/components/src/DesignTokens/Tokens.ts +++ b/components/src/DesignTokens/Tokens.ts @@ -179,11 +179,11 @@ const semantics: ColourMap = { }, surfaceFill: { dark: '#222325', - light: '#ffffff' + light: '#fbfbfb' }, surfaceHover: { - dark: '#121212', - light: '#eee' + dark: '#272830', + light: '#fdfdfd' }, raisedSurfaceFill: { dark: '#393a3b', @@ -191,7 +191,7 @@ const semantics: ColourMap = { }, surfaceBorder: { dark: shades.gray.dark2, - light: shades.gray.light3 + light: shades.gray.light2 }, pageFill: { dark: '#0C0C0C', diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte index a66f9160..f52e4325 100644 --- a/components/src/Switcher/Switcher.stories.svelte +++ b/components/src/Switcher/Switcher.stories.svelte @@ -25,13 +25,15 @@ - +
+ +
@@ -76,12 +78,14 @@ }} > - +
+ +
@@ -97,12 +101,14 @@ }} > - +
+ +
- +
+ +
@@ -135,6 +143,5 @@ .container { background: var(--color-pageFill); padding: 5%; - min-height: 500px; } diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index 33e214da..99c9ecd7 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -96,8 +96,7 @@ ul { display: inline-flex; flex-direction: column; - padding: 0; - margin: 0; + margin-top: 0.25em; color: var(--color-textPrimary); gap: 0; @@ -123,7 +122,7 @@ font-size: var(--fs-base); line-height: 1; white-space: nowrap; - padding: 0 1em; + padding: 0 0.75em; margin: 0; cursor: pointer; display: flex; @@ -133,25 +132,34 @@ position: relative; user-select: none; height: 2.15em; - margin-right: -1px; border: 1px solid var(--color-surfaceBorder); + background: var(--color-surfaceFill); + margin-bottom: -1px; @media (min-width: base.$bp-s) { flex-basis: 0; + margin-bottom: 0; + margin-right: -1px; + } + &:hover, + &:focus-visible { + background: var(--color-surfaceHover); } .layout-row & { flex-basis: 0; } .layout-column & { flex-basis: auto; + margin-right: 0; + margin-bottom: -1px; } .is-selected & { - background: var(--color-surfaceFill); - transform: scale(1.1); + transform: scale(1.125); border: 1px solid var(--color-textSecondary); - box-shadow: 0 0 5px 1px rgba(black, 0.85); + box-shadow: 0 0 5px 1px var(--color-dropShadow); + background: var(--color-raisedSurfaceFill); z-index: 100; - font-weight: 700; + font-weight: 600; border-radius: 2px; } .small & { @@ -159,6 +167,10 @@ letter-spacing: 0.01em; height: 2em; padding: 0 0.7em; + padding-bottom: 0.025em; + .is-selected & { + transform: scale(1.1); + } } } From c37668eb8201a1af11177b3ef6a1673ae1a47d88 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 1 Jun 2026 17:48:22 +0200 Subject: [PATCH 6/7] Add align prop --- .../src/Switcher/Switcher.stories.svelte | 55 +++++++++++++++++++ components/src/Switcher/Switcher.svelte | 27 +++++---- 2 files changed, 72 insertions(+), 10 deletions(-) diff --git a/components/src/Switcher/Switcher.stories.svelte b/components/src/Switcher/Switcher.stories.svelte index f52e4325..58b19a2e 100644 --- a/components/src/Switcher/Switcher.stories.svelte +++ b/components/src/Switcher/Switcher.stories.svelte @@ -13,6 +13,8 @@ }); const onChangeSpy = fn(); + const dwIds = ['GjkbO', 'R5jey']; + let selectedDw = $state(dwIds[0]); @@ -23,6 +25,20 @@ + + +
+ +
+ + +
@@ -139,9 +155,48 @@ + + +
+
+ + {#each dwIds as id} +
+ +
+ {/each} +
+
+ + + diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index 99c9ecd7..52067487 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -26,6 +26,7 @@ * The currently-selected option (bindable) */ value: string | null; + align?: 'left' | 'center'; /** * Fired when the selected value changes (Prefer `value` if possible) */ @@ -38,6 +39,7 @@ size = 'default', hideLabel = false, layout = 'auto', + align = 'left', value = $bindable(null), onchange }: SwitcherProps = $props(); @@ -50,27 +52,22 @@ } -
-
+
+
{label}
-
    +
      {#each options as o (o)}
      • @@ -84,6 +81,15 @@ fieldset { border: 0; font-family: var(--swr-sans); + display: flex; + flex-flow: column; + + &.left { + align-items: flex-start; + } + &.center { + align-items: center; + } } .legend { @@ -159,8 +165,9 @@ box-shadow: 0 0 5px 1px var(--color-dropShadow); background: var(--color-raisedSurfaceFill); z-index: 100; - font-weight: 600; + font-weight: 700; border-radius: 2px; + color: var(--violet-dark-5); } .small & { font-size: var(--fs-small-1); From 689cd46d81d2e288d71e6b5e6f60757b7999fcf9 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 1 Jun 2026 17:54:41 +0200 Subject: [PATCH 7/7] Revert colour change --- components/src/Switcher/Switcher.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index 52067487..3073b8fd 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/src/Switcher/Switcher.svelte @@ -167,7 +167,6 @@ z-index: 100; font-weight: 700; border-radius: 2px; - color: var(--violet-dark-5); } .small & { font-size: var(--fs-small-1);