@timmo001/groundwork-ui 0.4.1 → 0.6.0

package/custom-elements.json

@@ -1021,6 +1021,20 @@
           "kind": "class",
           "description": "A message in the flow of the page. `urgent` announces it at once, for\nerrors that need attention; otherwise it's announced politely.",
           "name": "GwAlert",
+          "cssProperties": [
+            {
+              "description": "The icon color, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone"
+            },
+            {
+              "description": "The background. `tone` sets it.",
+              "name": "--gw-tone-fill"
+            },
+            {
+              "description": "The border. `tone` sets it.",
+              "name": "--gw-tone-border"
+            }
+          ],
           "cssParts": [
             {
               "description": "The alert.",
@@ -1465,16 +1479,24 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden until then, so a large logo in the\nhero hands over to the small one in the bar.\n\n`overlay` lays it over the top of the page rather than taking room, for a\npage that opens with a hero. Below 600px wide the nav moves into a menu\nopened from a button, which closes on Esc, a click outside or a link.",
+          "description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden, taking no room, until then, so a\nlarge logo in the hero hands over to the small one in the bar. The nav\nslides over as it opens.\n\n`overlay` lays it over the top of the page rather than taking room, for a\npage that opens with a hero. Below `menu-below`, 600px wide by default,\nthe nav moves into a menu opened from a button, which closes on Esc, a\nclick outside or a link. Raise it when the nav and actions need more room.",
           "name": "GwAppBar",
           "cssParts": [
             {
               "description": "The bar.",
               "name": "bar"
             },
+            {
+              "description": "The brand's container.",
+              "name": "brand"
+            },
             {
               "description": "The nav links' container, the menu panel on narrow screens.",
               "name": "nav"
+            },
+            {
+              "description": "The actions' container.",
+              "name": "actions"
             }
           ],
           "slots": [
@@ -1499,7 +1521,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ revealAfter: { attribute: \"reveal-after\" }, overlay: { type: \"boolean\", reflect: true }, floating: { type: \"boolean\", reflect: true }, menuOpen: { type: \"boolean\", attribute: \"menu-open\", reflect: true }, menuLabel: { attribute: \"menu-label\" }, }",
+              "default": "{ revealAfter: { attribute: \"reveal-after\" }, overlay: { type: \"boolean\", reflect: true }, floating: { type: \"boolean\", reflect: true }, menuOpen: { type: \"boolean\", attribute: \"menu-open\", reflect: true }, menuLabel: { attribute: \"menu-label\" }, menuBelow: { type: \"number\", attribute: \"menu-below\" }, collapsed: { type: \"boolean\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -1512,7 +1534,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } .brand { display: flex; flex: none; align-items: center; transition: opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } :host([reveal-after]:not([floating])) .brand { pointer-events: none; visibility: hidden; opacity: 0; translate: 0 -0.25rem; transition: opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } .nav { display: flex; flex: 1; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } .menu { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gw-color-text-strong); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } .menu:hover { background: var(--gw-color-fill-neutral-hovered); } @media (max-width: ${menuBelow - 0.02}px) { .menu { display: inline-grid; } .nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: var(--gw-space-0-5); align-items: stretch; padding: var(--gw-space-2) var(--gw-space-3); visibility: hidden; background: var(--gw-color-surface-default); border-block-end: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.5rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } :host([menu-open]) .nav { visibility: visible; opacity: 1; translate: 0 0; } } `, ]",
+              "default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } /* A one-column grid, so a hidden brand can fold its width to nothing and the nav slides over as it opens, rather than leaving a gap */ .brand { display: grid; flex: none; grid-template-columns: 1fr; align-items: center; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .brand > slot { display: flex; align-items: center; min-width: 0; overflow: clip; overflow-clip-margin: calc( var(--gw-focus-width) + var(--gw-focus-offset) ); } :host([reveal-after]:not([floating])) .brand { grid-template-columns: 0fr; margin-inline-end: calc(var(--gw-space-3) * -1); pointer-events: none; visibility: hidden; opacity: 0; translate: 0 -0.25rem; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-slow) allow-discrete; } .nav { display: flex; flex: 1; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } .menu { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gw-color-text-strong); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } .menu:hover { background: var(--gw-color-fill-neutral-hovered); } /* Below menu-below, which sets collapsed, the nav folds into a menu */ :host([collapsed]) .menu { display: inline-grid; } :host([collapsed]) .nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: var(--gw-space-0-5); align-items: stretch; padding: var(--gw-space-2) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); visibility: hidden; background: var(--gw-color-surface-default); border-block-end: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.5rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } :host([collapsed][menu-open]) .nav { visibility: visible; opacity: 1; translate: 0 0; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -1558,6 +1580,38 @@
               },
               "default": "\"Menu\""
             },
+            {
+              "kind": "field",
+              "name": "menuBelow",
+              "type": {
+                "text": "number"
+              },
+              "description": "The viewport width in pixels below which the nav moves into a menu.",
+              "default": "600"
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the nav is in the menu. Set by the bar from `menuBelow`.",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#narrow",
+              "privacy": "private",
+              "type": {
+                "text": "MediaQueryList | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#onNarrow",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#menuIcon",
@@ -1593,6 +1647,12 @@
               },
               "default": "0"
             },
+            {
+              "kind": "method",
+              "name": "#watchWidth",
+              "privacy": "private",
+              "description": "Follows the viewport across `menuBelow`, setting `collapsed`."
+            },
             {
               "kind": "method",
               "name": "toggleMenu",
@@ -1976,6 +2036,20 @@
               "description": "Whether it floats. Set by the bar as the page scrolls.",
               "name": "floating"
             },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The viewport width in pixels below which the nav moves into a menu. Defaults to `600`.",
+              "name": "menu-below"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the nav is in the menu. Set by the bar from `menu-below`.",
+              "name": "collapsed"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -2019,10 +2093,24 @@
           "kind": "class",
           "description": "A pill with an icon, a value and an optional small label above it. The\nicon takes the `tone`'s color. While `loading`, a skeleton stands in for\nthe value, and for the icon if it has none yet, and the value fades in\nonce it's loaded.",
           "name": "GwBadge",
+          "cssProperties": [
+            {
+              "description": "The icon's color, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone"
+            }
+          ],
           "cssParts": [
             {
               "description": "The badge.",
               "name": "badge"
+            },
+            {
+              "description": "The label above the value.",
+              "name": "label"
+            },
+            {
+              "description": "The value.",
+              "name": "value"
             }
           ],
           "slots": [
@@ -2511,6 +2599,20 @@
           "kind": "class",
           "description": "A slim bar across the top of the app for app-wide state the person can\nwork through: a restart is needed, the connection is lost, or a new\nversion is ready. Put it above the app's content, not over it. Its height\nopens and closes smoothly, so the page below moves with it rather than\njumping. Put one action in the `actions` slot, which opens what it's\nabout. `urgent` announces it at once.",
           "name": "GwBanner",
+          "cssProperties": [
+            {
+              "description": "The text and icon color, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone"
+            },
+            {
+              "description": "The background. `tone` sets it.",
+              "name": "--gw-tone-fill"
+            },
+            {
+              "description": "The border. `tone` sets it.",
+              "name": "--gw-tone-border"
+            }
+          ],
           "cssParts": [
             {
               "description": "The bar.",
@@ -2949,7 +3051,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A native button styled through `--gw-*` variables, so it follows the\ntheme and mode around it. With `href` it renders a link that looks the\nsame. Put an icon in the `icon` slot.\n\n`variant` picks the color and `appearance` how it's applied, from most to\nleast important: `accent` (a solid fill), `filled` (a soft tint),\n`outlined` (a stroke) or `plain` (text only). Every button is a pill.\nSizes run `xs` to `xl`, and `--gw-button-scale` sets any size in between.\n\nWhile `loading`, a spinning ring takes the icon's place, or the text's\nwhen there's no icon, so the button keeps its size, and clicks are\nignored. The icon fades back once it's done.",
+          "description": "A native button styled through `--gw-*` variables, so it follows the\ntheme and mode around it. With `href` it renders a link that looks the\nsame. Put an icon in the `icon` slot.\n\nFor a link the page's HTML has to carry, such as one with `rel=\"me\"`, a\n`target` or `aria-current=\"page\"`, put a plain `<a>` inside instead of\n`href`. The button styles it, a click anywhere on the pill follows it, and\n`aria-current` on it gets a current style.\n\n`variant` picks the color and `appearance` how it's applied, from most to\nleast important: `accent` (a solid fill), `filled` (a soft tint),\n`outlined` (a stroke) or `plain` (text only). Every button is a pill.\nSizes run `xs` to `xl`, and `--gw-button-scale` sets any size in between.\n\nWhile `loading`, a spinning ring takes the icon's place, or the text's\nwhen there's no icon, so the button keeps its size, and clicks are\nignored. The icon fades back once it's done.",
           "name": "GwButton",
           "cssProperties": [
             {
@@ -2967,13 +3069,13 @@
           ],
           "cssParts": [
             {
-              "description": "The native button or link.",
+              "description": "The native button or link, or the pill around a slotted link.",
               "name": "button"
             }
           ],
           "slots": [
             {
-              "description": "The text.",
+              "description": "The text, or an `<a>` holding it, in place of `href`.",
               "name": ""
             },
             {
@@ -3016,7 +3118,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; } /* Everything scales from --gw-button-scale, around a 40px medium button: the presets give 24, 32, 48 and 56px, and an app can set any value for a size between or beyond them */ :host([size=\"xs\"]) { --gw-button-scale: 0.6; } :host([size=\"small\"]) { --gw-button-scale: 0.8; } :host([size=\"large\"]) { --gw-button-scale: 1.2; } :host([size=\"xl\"]) { --gw-button-scale: 1.4; } :host([variant=\"neutral\"]) { --gw-button-tone: var(--gw-color-text-secondary); --gw-button-ink: var(--gw-color-text-strong); } :host([variant=\"info\"]) { --gw-button-tone: var(--gw-color-info); } :host([variant=\"success\"]) { --gw-button-tone: var(--gw-color-success); } :host([variant=\"warning\"]) { --gw-button-tone: var(--gw-color-warning); } :host([variant=\"danger\"]) { --gw-button-tone: var(--gw-color-danger); } .button { --gw-scale: var(--gw-button-scale, 1); --gw-icon-size: calc(1.125rem * var(--gw-scale)); position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-scale)); align-items: center; justify-content: center; min-height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-scale)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-scale)); font-weight: var(--gw-font-weight-strong); line-height: 1; color: var(--gw-button-ink, var(--gw-button-tone)); text-decoration: none; text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); white-space: nowrap; cursor: pointer; background: transparent; border: max(var(--gw-border-width), 1px) solid transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), border-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-fast) var(--gw-motion-easing); } /* A slight press, so a click feels physical */ .button:active { scale: 0.97; } .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } .button:active { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } /* A solid fill, with text that flips between black and white by the fill's lightness so it reads on every theme's colors */ :host([appearance=\"accent\"]) .button { color: oklch( from var(--gw-button-tone) clamp(0, (0.66 - l) * 1000, 1) 0 0 ); background: var(--gw-button-tone); } :host([appearance=\"accent\"]) .button:hover { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.2) c h ); } :host([appearance=\"accent\"]) .button:active { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.35) c h ); } /* The tint lowers the tone's contrast, so the text leans toward the strongest text color to stay readable on it */ :host([appearance=\"filled\"]) .button { color: var( --gw-button-ink, color-mix( in oklch, var(--gw-button-tone) 70%, var(--gw-color-text-strong) ) ); background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([appearance=\"filled\"]) .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } :host([appearance=\"filled\"]) .button:active { background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent); } :host([appearance=\"outlined\"]) .button { border-color: var(--gw-button-tone); } .button:disabled, .button[aria-disabled=\"true\"] { color: var(--gw-color-text-disabled); pointer-events: none; cursor: not-allowed; background: var(--gw-color-fill-neutral-disabled); border-color: transparent; } :host([appearance=\"plain\"]) .button:disabled, :host([appearance=\"plain\"]) .button[aria-disabled=\"true\"] { background: transparent; } ::slotted([slot=\"icon\"]), .icon { flex: none; width: var(--gw-icon-size); height: var(--gw-icon-size); fill: currentColor; } /* The icon and the ring share one cell and crossfade */ .lead { display: grid; place-items: center; } .lead > * { grid-area: 1 / 1; } .lead > *, .text, .ring { transition: opacity var(--gw-motion-normal) cubic-bezier(0.4, 0, 0.2, 1); } /* Sized to the icon's drawn area, which is inset in its 24px box */ .ring { width: calc(var(--gw-icon-size) * 0.8); height: calc(var(--gw-icon-size) * 0.8); border: calc(2px * var(--gw-scale)) solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Without an icon, the ring sits over the hidden text */ .ring.over { position: absolute; inset: 0; margin: auto; } :host([loading]) .button { cursor: progress; } :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; } .button:not(.has-icon) > .lead { display: none; } /* Icon only, to save space: square, with the text kept for assistive technology. auto does this on narrow screens */ :host([labels=\"hide\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"auto\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } `, ]",
+              "default": "[ base, css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; } /* Everything scales from --gw-button-scale, around a 40px medium button: the presets give 24, 32, 48 and 56px, and an app can set any value for a size between or beyond them */ :host([size=\"xs\"]) { --gw-button-scale: 0.6; } :host([size=\"small\"]) { --gw-button-scale: 0.8; } :host([size=\"large\"]) { --gw-button-scale: 1.2; } :host([size=\"xl\"]) { --gw-button-scale: 1.4; } :host([variant=\"neutral\"]) { --gw-button-tone: var(--gw-color-text-secondary); --gw-button-ink: var(--gw-color-text-strong); } :host([variant=\"info\"]) { --gw-button-tone: var(--gw-color-info); } :host([variant=\"success\"]) { --gw-button-tone: var(--gw-color-success); } :host([variant=\"warning\"]) { --gw-button-tone: var(--gw-color-warning); } :host([variant=\"danger\"]) { --gw-button-tone: var(--gw-color-danger); } .button { --gw-scale: var(--gw-button-scale, 1); --gw-icon-size: calc(1.125rem * var(--gw-scale)); position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-scale)); align-items: center; justify-content: center; min-height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-scale)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-scale)); font-weight: var(--gw-font-weight-strong); line-height: 1; color: var(--gw-button-ink, var(--gw-button-tone)); text-decoration: none; text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); white-space: nowrap; cursor: pointer; background: transparent; border: max(var(--gw-border-width), 1px) solid transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), border-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-fast) var(--gw-motion-easing); } /* A slight press, so a click feels physical */ .button:active { scale: 0.97; } .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } .button:active { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } /* A solid fill, with text that flips between black and white by the fill's lightness so it reads on every theme's colors */ :host([appearance=\"accent\"]) .button { color: oklch( from var(--gw-button-tone) clamp(0, (0.66 - l) * 1000, 1) 0 0 ); background: var(--gw-button-tone); } :host([appearance=\"accent\"]) .button:hover { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.2) c h ); } :host([appearance=\"accent\"]) .button:active { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.35) c h ); } /* The tint lowers the tone's contrast, so the text leans toward the strongest text color to stay readable on it */ :host([appearance=\"filled\"]) .button { color: var( --gw-button-ink, color-mix( in oklch, var(--gw-button-tone) 70%, var(--gw-color-text-strong) ) ); background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([appearance=\"filled\"]) .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } :host([appearance=\"filled\"]) .button:active { background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent); } :host([appearance=\"outlined\"]) .button { border-color: var(--gw-button-tone); } /* A slotted link carries the text; the pill draws its focus ring */ ::slotted(a) { color: inherit; text-decoration: none; outline: none; } .button.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :host([appearance=\"plain\"]) .button.current, :host([appearance=\"outlined\"]) .button.current { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([appearance=\"filled\"]) .button.current { background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent); } .button:disabled, .button[aria-disabled=\"true\"] { color: var(--gw-color-text-disabled); pointer-events: none; cursor: not-allowed; background: var(--gw-color-fill-neutral-disabled); border-color: transparent; } :host([appearance=\"plain\"]) .button:disabled, :host([appearance=\"plain\"]) .button[aria-disabled=\"true\"] { background: transparent; } ::slotted([slot=\"icon\"]), .icon { flex: none; width: var(--gw-icon-size); height: var(--gw-icon-size); fill: currentColor; } /* The icon and the ring share one cell and crossfade */ .lead { display: grid; place-items: center; } .lead > * { grid-area: 1 / 1; } .lead > *, .text, .ring { transition: opacity var(--gw-motion-normal) cubic-bezier(0.4, 0, 0.2, 1); } /* Sized to the icon's drawn area, which is inset in its 24px box */ .ring { width: calc(var(--gw-icon-size) * 0.8); height: calc(var(--gw-icon-size) * 0.8); border: calc(2px * var(--gw-scale)) solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Without an icon, the ring sits over the hidden text */ .ring.over { position: absolute; inset: 0; margin: auto; } :host([loading]) .button { cursor: progress; } :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; } .button:not(.has-icon) > .lead { display: none; } /* Icon only, to save space: square, with the text kept for assistive technology. auto does this on narrow screens */ :host([labels=\"hide\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"auto\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3140,9 +3242,20 @@
               "name": "#control",
               "privacy": "private",
               "type": {
-                "text": "HTMLButtonElement | HTMLAnchorElement"
+                "text": "HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement"
               }
             },
+            {
+              "kind": "method",
+              "name": "#link",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLAnchorElement | null"
+                }
+              },
+              "description": "A plain `<a>` the page put inside, which the button wraps instead of `href`."
+            },
             {
               "kind": "method",
               "name": "create",
@@ -3545,6 +3658,18 @@
             {
               "description": "The card's surface.",
               "name": "card"
+            },
+            {
+              "description": "The row with the heading and actions.",
+              "name": "header"
+            },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The content.",
+              "name": "body"
             }
           ],
           "slots": [
@@ -5144,6 +5269,16 @@
           "kind": "class",
           "description": "A short status or category, tinted by its `tone`. While `loading`, a\nskeleton stands in for its text, and the text fades in once it's loaded.",
           "name": "GwChip",
+          "cssProperties": [
+            {
+              "description": "The tint, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone-fill"
+            },
+            {
+              "description": "The border. `tone` sets it.",
+              "name": "--gw-tone-border"
+            }
+          ],
           "cssParts": [
             {
               "description": "The chip.",
@@ -5599,6 +5734,20 @@
           "kind": "class",
           "description": "A command menu on Cmd+K or Ctrl+K: a searchable list of commands in a\nmodal near the top of the page, or a bottom sheet on phones. Picking one\ncloses the menu and fires `pick` with its value. Esc or a click outside\ncloses it. It won't open over another dialog, so only one overlay shows at\na time. Set `shortcut=\"none\"` to open it only with `show()`.",
           "name": "GwCommandMenu",
+          "cssParts": [
+            {
+              "description": "The menu's surface.",
+              "name": "dialog"
+            },
+            {
+              "description": "The `gw-option-list` of commands.",
+              "name": "list"
+            },
+            {
+              "description": "The row of key hints.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -6079,6 +6228,28 @@
           "kind": "class",
           "description": "A modal on the native `<dialog>`, so focus is trapped and returned, Esc\ncloses it and the page behind is inert. Open it with `show()`. Put buttons\nin the `actions` slot; a click on one with a `value` closes the dialog with\nthat value, and fires `close`.",
           "name": "GwDialog",
+          "cssParts": [
+            {
+              "description": "The dialog's surface.",
+              "name": "dialog"
+            },
+            {
+              "description": "The row with the heading and close button.",
+              "name": "header"
+            },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The content.",
+              "name": "body"
+            },
+            {
+              "description": "The actions row.",
+              "name": "footer"
+            }
+          ],
           "slots": [
             {
               "description": "The content.",
@@ -6580,6 +6751,12 @@
           "kind": "class",
           "description": "A small status dot. Give it a `label`, such as \"Online\", unless text\nbeside it already says the same.",
           "name": "GwDot",
+          "cssProperties": [
+            {
+              "description": "The color, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7436,6 +7613,14 @@
               "description": "The summary row.",
               "name": "summary"
             },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The line under the heading.",
+              "name": "description"
+            },
             {
               "description": "The content's wrapper.",
               "name": "content"
@@ -7898,6 +8083,20 @@
           "kind": "class",
           "description": "Label and value pairs, as a description list. While `loading`, `rows`\nskeleton pairs stand in for them, keeping any labels already known. The\nlist glides to its new height and the values fade in once they've loaded.",
           "name": "GwFacts",
+          "cssParts": [
+            {
+              "description": "The description list.",
+              "name": "list"
+            },
+            {
+              "description": "Each label.",
+              "name": "label"
+            },
+            {
+              "description": "Each value.",
+              "name": "value"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -8789,6 +8988,28 @@
               "name": "--gw-gauge-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The dial, with the arc and the reading.",
+              "name": "dial"
+            },
+            {
+              "description": "The reading's number.",
+              "name": "value"
+            },
+            {
+              "description": "The unit after it.",
+              "name": "unit"
+            },
+            {
+              "description": "What it measures.",
+              "name": "label"
+            },
+            {
+              "description": "The line under the label.",
+              "name": "caption"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -10516,6 +10737,24 @@
           "kind": "class",
           "description": "A labeled bar for a value in a range, such as disk use. Past `high` it\nturns warning, and past `critical` danger, unless a `tone` is set. While\n`loading`, the track pulses and a skeleton stands in for the value.",
           "name": "GwMeter",
+          "cssParts": [
+            {
+              "description": "The row with the label and value.",
+              "name": "top"
+            },
+            {
+              "description": "The value as shown.",
+              "name": "value"
+            },
+            {
+              "description": "The bar's track.",
+              "name": "track"
+            },
+            {
+              "description": "The filled part of the bar.",
+              "name": "fill"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -11083,6 +11322,20 @@
           "kind": "class",
           "description": "Where notifications wait until they're dealt with: a list of\n`gw-notification` cards with Clear all, and an empty state once nothing's\nleft. Put it in a page, a panel or a popover from a bell button. Each\ncard folds away when dismissed, and the list closes up smoothly. It fires\n`clear` when Clear all is pressed.",
           "name": "GwNotificationCenter",
+          "cssParts": [
+            {
+              "description": "The row with the heading and Clear all.",
+              "name": "header"
+            },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The list of cards.",
+              "name": "list"
+            }
+          ],
           "slots": [
             {
               "description": "The `gw-notification` cards.",
@@ -11536,6 +11789,12 @@
           "kind": "class",
           "description": "Something new the person needs to decide or know, kept in a\n`gw-notification-center` until it's dealt with. It has an icon, a heading,\na line of text, when it happened and up to two actions. Its close button\ndismisses it: it fires `dismiss`, then folds away and removes itself,\nunless the event is cancelled.",
           "name": "GwNotification",
+          "cssProperties": [
+            {
+              "description": "The icon's color, for a tone of your own. `tone` sets it.",
+              "name": "--gw-tone"
+            }
+          ],
           "cssParts": [
             {
               "description": "The card.",
@@ -12040,6 +12299,32 @@
               "name": "--gw-option-list-height"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The search field's row.",
+              "name": "search"
+            },
+            {
+              "description": "The scrolling list.",
+              "name": "listbox"
+            },
+            {
+              "description": "Each option.",
+              "name": "option"
+            },
+            {
+              "description": "Each group heading.",
+              "name": "group"
+            },
+            {
+              "description": "An option's second line.",
+              "name": "description"
+            },
+            {
+              "description": "The no matches line.",
+              "name": "none"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12749,6 +13034,20 @@
           "kind": "class",
           "description": "A page's title, with an optional icon tile and description, and its\ncontrols at the top right in the `actions` slot.",
           "name": "GwPageHeader",
+          "cssParts": [
+            {
+              "description": "The icon tile.",
+              "name": "tile"
+            },
+            {
+              "description": "The title.",
+              "name": "heading"
+            },
+            {
+              "description": "The line under the title.",
+              "name": "description"
+            }
+          ],
           "slots": [
             {
               "description": "The page's controls.",
@@ -13193,6 +13492,30 @@
           "kind": "class",
           "description": "A confirmation, rename or small form that opens next to the button that\nasked for it, rather than as a dialog in the middle of the screen. On\nnarrow screens it's a bottom sheet. Opened without a button, such as after\na save, it sits in the middle like a dialog.\n\nIt's on the Popover API, in the top layer, and closes on Esc or a click\noutside. Open it with `show(anchor)`. Put buttons in the `actions` slot: a\nclick on one with a `value` closes it with that value, and fires `close`.\n`confirm` makes it an `alertdialog`, for a question that needs an answer.",
           "name": "GwPopover",
+          "cssProperties": [
+            {
+              "description": "Its width beside a button. Defaults to `20rem`.",
+              "name": "--gw-popover-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The popover's surface.",
+              "name": "surface"
+            },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The content.",
+              "name": "body"
+            },
+            {
+              "description": "The actions row.",
+              "name": "footer"
+            }
+          ],
           "slots": [
             {
               "description": "The content.",
@@ -13224,7 +13547,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, dismissalStyles, css` [popover] { position: fixed; inset: unset; box-sizing: border-box; width: min(20rem, calc(100vw - 2 * ${gap}px)); padding: var(--gw-space-4); margin: 0; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 0.96; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { opacity: 1; scale: 1; } @starting-style { [popover]:popover-open { opacity: 0; scale: 0.96; } } /* Grows from the corner nearest the button */ [data-placement=\"below\"] { transform-origin: top right; } [data-placement=\"above\"] { transform-origin: bottom right; } [data-placement=\"below\"][data-side=\"start\"] { transform-origin: top left; } [data-placement=\"above\"][data-side=\"start\"] { transform-origin: bottom left; } [data-placement=\"center\"] { inset: 0; margin: auto; height: fit-content; } [data-placement=\"center\"]::backdrop { background: rgb(0 0 0 / 40%); } /* A bottom sheet on narrow screens, sliding up from the edge */ [data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: calc( var(--gw-space-4) + env(safe-area-inset-bottom) ); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; } [data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { [data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } [data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } header { display: flex; gap: var(--gw-space-2); align-items: flex-start; margin: calc(var(--gw-space-2) * -1) calc(var(--gw-space-2) * -1) var(--gw-space-2) 0; } header .content { flex: 1; min-width: 0; padding-block-start: var(--gw-space-2); } h2 { margin: 0 0 var(--gw-space-2); font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { font-size: var(--gw-font-size-s); } ::slotted(p) { margin: 0; } footer { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); justify-content: flex-end; margin-block-start: var(--gw-space-4); } `, ]",
+              "default": "[ base, dismissalStyles, css` [popover] { position: fixed; inset: unset; box-sizing: border-box; width: min(var(--gw-popover-width, 20rem), calc(100vw - 2 * ${gap}px)); padding: var(--gw-space-4); margin: 0; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 0.96; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { opacity: 1; scale: 1; } @starting-style { [popover]:popover-open { opacity: 0; scale: 0.96; } } /* Grows from the corner nearest the button */ [data-placement=\"below\"] { transform-origin: top right; } [data-placement=\"above\"] { transform-origin: bottom right; } [data-placement=\"below\"][data-side=\"start\"] { transform-origin: top left; } [data-placement=\"above\"][data-side=\"start\"] { transform-origin: bottom left; } [data-placement=\"center\"] { inset: 0; margin: auto; height: fit-content; } [data-placement=\"center\"]::backdrop { background: rgb(0 0 0 / 40%); } /* A bottom sheet on narrow screens, sliding up from the edge */ [data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: calc( var(--gw-space-4) + env(safe-area-inset-bottom) ); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; } [data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { [data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } [data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } header { display: flex; gap: var(--gw-space-2); align-items: flex-start; margin: calc(var(--gw-space-2) * -1) calc(var(--gw-space-2) * -1) var(--gw-space-2) 0; } header .content { flex: 1; min-width: 0; padding-block-start: var(--gw-space-2); } h2 { margin: 0 0 var(--gw-space-2); font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { font-size: var(--gw-font-size-s); } ::slotted(p) { margin: 0; } footer { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); justify-content: flex-end; margin-block-start: var(--gw-space-4); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -13726,6 +14049,12 @@
           "kind": "class",
           "description": "A small heading between groups on a page, as an `<h2>` unless `level` says otherwise.",
           "name": "GwSectionTitle",
+          "cssParts": [
+            {
+              "description": "The heading.",
+              "name": "heading"
+            }
+          ],
           "slots": [
             {
               "description": "The heading text.",
@@ -14127,6 +14456,10 @@
           "description": "Picks one of a few options, as a row of native radio buttons, so arrow\nkeys move between them and a form submits the choice. Fires `change`.\n\nOptions can carry icons, as Home Assistant's toggles do. `labels` decides\nwhether their text shows: `show` (the default), `hide` (icons only, with\nthe text as a tooltip and accessible name) or `auto`, which shows the text\non wide screens and only the icons on narrow ones.",
           "name": "GwSegmented",
           "cssParts": [
+            {
+              "description": "Each option.",
+              "name": "option"
+            },
             {
               "description": "The pill that slides to the chosen option.",
               "name": "indicator"
@@ -16589,6 +16922,12 @@
           "kind": "class",
           "description": "Several lines of text, as a paragraph, with a shorter last line so it\ndoesn't read as a solid block.",
           "name": "GwSkeletonLines",
+          "cssParts": [
+            {
+              "description": "Each line.",
+              "name": "line"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -17376,6 +17715,12 @@
               "name": "--gw-spinner-size"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The spinning ring.",
+              "name": "ring"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -17760,12 +18105,36 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/gw-theme-picker.ts",
+      "path": "src/gw-theme-gallery.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A palette button for a page's look. It opens a popover with the mode\n(auto, light, dark or Darker), the theme, and buttons to import a theme\nfile (a Groundwork theme's `.json` or an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.",
-          "name": "GwThemePicker",
+          "description": "Picks a theme from a grid of cards, each a small picture of an app in that\ntheme's colors: a rail, a panel and the status tones. For a settings page,\nor inside `gw-theme-picker` with `gallery`.\n\nThemes with a `group` sit together under its name, and lone ones under\n\"Other\", so a family's light and dark variants line up. Previews draw in\n`mode`, or the mode of the page or themed container it sits in, from the\ntheme CSS already on the page, including a custom theme `pageTheme`\nimported. Call `refresh()` after that CSS changes.\n\nIt's a `<fieldset>` of native radio buttons, so arrow keys move the choice.\nIt fires `theme`.",
+          "name": "GwThemeGallery",
+          "cssProperties": [
+            {
+              "description": "The narrowest a card gets. Defaults to `9rem`.",
+              "name": "--gw-theme-gallery-min"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Each theme's card.",
+              "name": "card"
+            },
+            {
+              "description": "The picture of an app in the theme.",
+              "name": "preview"
+            },
+            {
+              "description": "The theme's name under it.",
+              "name": "name"
+            },
+            {
+              "description": "Each group's heading.",
+              "name": "group"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -17774,7 +18143,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ mode: { reflect: true }, theme: { reflect: true }, themes: { type: \"json\" }, status: {}, label: {}, }",
+              "default": "{ label: {}, theme: { reflect: true }, themes: { type: \"json\" }, mode: { reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -17787,7 +18156,536 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: inline-block; } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } `, ]",
+              "default": "[ base, css` :host { display: block; } fieldset { display: flex; flex-direction: column; gap: var(--gw-space-4); min-width: 0; padding: 0; margin: 0; border: 0; } legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .group { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--gw-theme-gallery-min, 9rem), 1fr) ); gap: var(--gw-space-3); } .group-name { grid-column: 1 / -1; margin: 0; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); } label { position: relative; display: flex; flex-direction: column; gap: var(--gw-space-2); padding: var(--gw-space-2); cursor: pointer; background: var(--gw-color-surface-raised); border: 2px solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } label:hover { border-color: var(--gw-color-border-accent); } label:has(input:checked) { background: var(--gw-color-fill-accent-quiet); border-color: var(--gw-color-accent); } label:has(input:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; } /* A small app in the theme's own colors */ .preview { display: grid; grid-template-columns: 22% 1fr; gap: 6px; height: 5.5rem; padding: 6px; background: var(--p-bg); border-radius: calc(var(--gw-radius-panel) - 2px); } .rail { display: flex; flex-direction: column; gap: 4px; padding: 4px; } .rail i { height: 5px; background: var(--p-muted); border-radius: 3px; opacity: 0.5; } .rail i:first-child { background: var(--p-accent); opacity: 1; } .panel { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: min(var(--p-radius), 6px); } .line { width: 60%; height: 5px; background: var(--p-text); border-radius: 3px; } .line.short { width: 40%; background: var(--p-muted); } .bars { display: flex; flex: 1; gap: 3px; align-items: flex-end; } .bars i { flex: 1; border-radius: 2px 2px 0 0; } .name { display: flex; flex-direction: column; padding: 0 var(--gw-space-1) var(--gw-space-1); font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .name small { font-size: var(--gw-font-size-xs); font-weight: normal; color: var(--gw-color-text-secondary); } label:has(input:checked) .name { color: var(--gw-color-accent); } .check { position: absolute; inset-block-start: var(--gw-space-3); inset-inline-end: var(--gw-space-3); display: none; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--gw-color-on-accent); background: var(--gw-color-fill-accent-resting); border-radius: 50%; --gw-icon-size: 1rem; } label:has(input:checked) .check { display: grid; } `, ]",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Theme\""
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "themes",
+              "type": {
+                "text": "readonly OptionItem[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "#legend",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#fieldset",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#name",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`gw-theme-gallery-${Math.random().toString(36).slice(2)}`"
+            },
+            {
+              "kind": "field",
+              "name": "#cards",
+              "privacy": "private",
+              "type": {
+                "text": "{\n    input: HTMLInputElement;\n    preview: HTMLElement;\n    id: string;\n  }[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "#scheme",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#onScheme",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#modeRoot",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(() => { if (!this.mode) this.refresh(); })"
+            },
+            {
+              "kind": "method",
+              "name": "#mode",
+              "privacy": "private",
+              "description": "`mode`, or the mode of the page or themed container around it."
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "description": "Redraws the previews from the page's theme CSS, such as after an import."
+            },
+            {
+              "kind": "method",
+              "name": "#card",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "OptionItem"
+                  }
+                },
+                {
+                  "name": "inOther",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                }
+              ],
+              "description": "Builds the shadow root's content once, on first connection.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "update",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "changed",
+                  "type": {
+                    "text": "ReadonlySet<string>"
+                  }
+                }
+              ],
+              "description": "Sets what the changed properties affect.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadow",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Whether to attach a shadow root. Light DOM elements set this false.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ mode: \"open\" }",
+              "description": "How the shadow root is attached.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Adds the property accessors, then defines the element.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#values",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<string, PropertyValue>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#defaults",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<string, PropertyValue>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#changed",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#unreflected",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#created",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#queued",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#pending",
+              "privacy": "private",
+              "type": {
+                "text": "Promise<void> | undefined"
+              },
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#reflecting",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#resolveUpdated",
+              "privacy": "private",
+              "type": {
+                "text": "() => void"
+              },
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#updated",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Promise<void>((resolve) => { this.#resolveUpdated = resolve; })",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderRoot",
+              "type": {
+                "text": "ShadowRoot | HTMLElement"
+              },
+              "readonly": true,
+              "description": "The shadow root, or the element itself for a light DOM element.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#own",
+              "privacy": "private",
+              "type": {
+                "text": "typeof GwElement"
+              },
+              "readonly": true,
+              "description": "The element's own class, for its static properties and styles.",
+              "default": "new.target",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "updateComplete",
+              "description": "Resolves once the pending update has run, or the first one before it connects.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "defaultOf",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The value a property returns to when its attribute is removed. Defaults\nto the value it was given in the constructor.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "requestUpdate",
+              "parameters": [
+                {
+                  "name": "names",
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                }
+              ],
+              "description": "Asks for an update with the given properties marked as changed.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#flush",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#setProperty",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "PropertyOptions"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "PropertyValue"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "CustomEvent<{ id: string }>"
+              },
+              "description": "When a theme is picked."
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The group's accessible name. Defaults to `Theme`.",
+              "name": "label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The chosen theme, by id.",
+              "name": "theme"
+            },
+            {
+              "type": {
+                "text": "OptionItem[]"
+              },
+              "description": "The themes, as JSON: `value` is the id, `label` the name, and `group` the family.",
+              "name": "themes"
+            },
+            {
+              "type": {
+                "text": "\"auto\"|\"light\"|\"dark\"|\"darker\""
+              },
+              "description": "The mode the previews show. Defaults to the mode it sits in.",
+              "name": "mode"
+            }
+          ],
+          "superclass": {
+            "name": "GwElement",
+            "module": "/src/element.js"
+          },
+          "tagName": "gw-theme-gallery",
+          "customElement": true,
+          "summary": "Picks a theme from cards that preview each one."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GwThemeGallery",
+          "declaration": {
+            "name": "GwThemeGallery",
+            "module": "src/gw-theme-gallery.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/gw-theme-picker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A palette button for a page's look. It opens a popover with the mode\n(auto, light, dark or Darker), the theme, and buttons to import a theme\nfile (a Groundwork theme's `.json` or an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.\n\n`gallery` swaps the theme select for `gw-theme-gallery`'s cards, which\npreview each theme in the chosen mode.\n\n`layout` sets how it shows. `popover`, the default, is the palette button\nand its popover. `cycle` is one button showing the mode in use, which steps\nto the next mode on each press, for an app bar. `inline` lays the controls\nout in place, in one wrapping row with Reset and Import, for a footer or a\nsettings page; set `justify-content` on it to align the row. `modes` picks which modes it offers, such as `light dark` without\nAuto.",
+          "name": "GwThemePicker",
+          "cssParts": [
+            {
+              "description": "The theme gallery, with `gallery`.",
+              "name": "gallery"
+            },
+            {
+              "description": "The mode, theme and status.",
+              "name": "controls"
+            },
+            {
+              "description": "Reset and Import, with `inline`.",
+              "name": "actions"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "Properties"
+              },
+              "static": true,
+              "default": "{ mode: { reflect: true }, theme: { reflect: true }, themes: { type: \"json\" }, gallery: { type: \"boolean\", reflect: true }, status: {}, label: {}, layout: { reflect: true }, modes: {}, }",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "readonly CSSStyleSheet[]"
+              },
+              "static": true,
+              "default": "[ base, css` :host { display: inline-block; } :host([gallery]) gw-popover { --gw-popover-width: 34rem; } .gallery { max-height: min(24rem, 50vh); overflow: auto; /* Room for the cards' focus rings */ padding: var(--gw-space-1); margin: calc(var(--gw-space-1) * -1); } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } /* One wrapping row: the controls, then Reset and Import. The host is the flex container, so a page can set its justify-content */ :host([layout=\"inline\"]) { display: flex; flex-wrap: wrap; gap: var(--gw-space-4); align-items: center; } :host([layout=\"inline\"]) .controls { flex-flow: row wrap; align-items: center; margin-block-start: 0; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); align-items: center; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -17817,6 +18715,14 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "gallery",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "status",
@@ -17833,6 +18739,24 @@
               },
               "default": "\"Theme\""
             },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "\"popover\" | \"cycle\" | \"inline\""
+              },
+              "description": "How it shows: a button and popover, a button cycling the modes, or the controls in place.",
+              "default": "\"popover\""
+            },
+            {
+              "kind": "field",
+              "name": "modes",
+              "type": {
+                "text": "string"
+              },
+              "description": "The modes to offer, in order and separated by spaces.",
+              "default": "\"auto light dark darker\""
+            },
             {
               "kind": "field",
               "name": "#button",
@@ -17851,6 +18775,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#gallery",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#status",
@@ -17863,16 +18793,60 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#controls",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#reset",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#import",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#popover",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#actions",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#offered",
+              "privacy": "private",
+              "description": "The modes on offer, in the order `modes` gives them."
+            },
             {
               "kind": "method",
               "name": "show",
-              "description": "Opens the popover under the button."
+              "description": "Opens the popover under the button, or with `cycle`, steps to the next mode."
+            },
+            {
+              "kind": "method",
+              "name": "#place",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                }
+              ],
+              "description": "Puts the controls and their buttons in the popover, or in place for `inline`."
             },
             {
               "kind": "method",
@@ -17917,7 +18891,7 @@
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "_changed",
+                  "name": "changed",
                   "type": {
                     "text": "ReadonlySet<string>"
                   }
@@ -18236,6 +19210,20 @@
             }
           ],
           "attributes": [
+            {
+              "type": {
+                "text": "\"popover\"|\"cycle\"|\"inline\""
+              },
+              "description": "How it shows: a button and popover, a button cycling the modes, or the controls in place. Defaults to `popover`.",
+              "name": "layout"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The modes to offer, in order and separated by spaces. Defaults to `auto light dark darker`.",
+              "name": "modes"
+            },
             {
               "type": {
                 "text": "\"auto\"|\"light\"|\"dark\"|\"darker\""
@@ -18254,9 +19242,16 @@
               "type": {
                 "text": "OptionItem[]"
               },
-              "description": "The themes to offer, as JSON.",
+              "description": "The themes to offer, as JSON. The select hides with fewer than two. With `gallery`, a `group` gathers a family's themes.",
               "name": "themes"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows the themes as preview cards rather than a select.",
+              "name": "gallery"
+            },
             {
               "type": {
                 "text": "string"
@@ -18268,7 +19263,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The button's accessible name and the popover's heading. Defaults to `Theme`.",
+              "description": "The button's accessible name and the popover's heading. Defaults to `Theme`. With `cycle`, the button's name also gives the mode in use.",
               "name": "label"
             }
           ],
@@ -18300,6 +19295,12 @@
           "kind": "class",
           "description": "Where toasts appear: the bottom corner on the end side, away from what\npeople click. Call `show(message, tone)`; each toast is announced politely\nand fades out after `duration` milliseconds.\n\nA toast only tells; it has no actions and lets every click through, since\nit may sit over something interactive and leaves before it can be used.\nIt's in the top layer and rises above any dialog each time one shows. It's\na last resort: show an outcome where it happened instead.",
           "name": "GwToaster",
+          "cssParts": [
+            {
+              "description": "Each toast.",
+              "name": "toast"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -19006,6 +20007,14 @@
             "module": "src/gw-spinner.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/gw-theme-gallery.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",