@timmo001/groundwork-ui 0.5.0 → 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.",
@@ -3556,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": [
@@ -5155,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.",
@@ -5610,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",
@@ -6090,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.",
@@ -6591,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",
@@ -7447,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"
@@ -7909,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",
@@ -8800,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",
@@ -10527,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",
@@ -11094,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.",
@@ -11547,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.",
@@ -12051,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",
@@ -12760,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.",
@@ -13210,6 +13498,24 @@
               "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.",
@@ -13743,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.",
@@ -14144,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"
@@ -16606,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",
@@ -17393,6 +17715,12 @@
               "name": "--gw-spinner-size"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The spinning ring.",
+              "name": "ring"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -18320,12 +18648,20 @@
       "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.",
+          "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": [
@@ -18336,7 +18672,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ mode: { reflect: true }, theme: { reflect: true }, themes: { type: \"json\" }, gallery: { type: \"boolean\", reflect: true }, status: {}, label: {}, }",
+              "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"
@@ -18349,7 +18685,7 @@
                 "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); } `, ]",
+              "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"
@@ -18403,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",
@@ -18439,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",
@@ -18493,7 +18891,7 @@
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "_changed",
+                  "name": "changed",
                   "type": {
                     "text": "ReadonlySet<string>"
                   }
@@ -18812,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\""
@@ -18851,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"
             }
           ],
@@ -18883,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",