@timmo001/groundwork-ui 0.9.11 → 0.9.13

package/custom-elements.json

@@ -1540,7 +1540,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); } /* 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; } `, ]",
+              "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; } /* The nav keeps its room; the actions take the rest, which a theme picker fills or gives up by moving its controls into its popover */ .nav { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: 1 1 auto; gap: var(--gw-space-1); align-items: center; justify-content: flex-end; } .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"
@@ -13353,7 +13353,7 @@
       "declarations": [
         {
           "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.",
+          "description": "A page's title, with an optional icon tile and description, a back button\nor similar in the `start` slot, and its controls at the top right in the\n`actions` slot.",
           "name": "GwPageHeader",
           "cssParts": [
             {
@@ -13370,6 +13370,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "Before the icon tile, such as a back button.",
+              "name": "start"
+            },
             {
               "description": "The page's controls.",
               "name": "actions"
@@ -13396,7 +13400,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: flex; gap: var(--gw-space-3); align-items: flex-start; } .tile { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; color: var(--gw-color-accent); background: var(--gw-color-fill-accent-quiet); border-radius: var(--gw-radius-l); --gw-icon-size: 1.625rem; } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } h1 { margin: 0; font-size: var(--gw-font-size-2xl); font-weight: var(--gw-font-weight-strong); line-height: 1.2; color: var(--gw-color-text-strong); } p { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } `, ]",
+              "default": "[ base, css` :host { display: flex; gap: var(--gw-space-3); align-items: flex-start; } .start { display: flex; flex: none; align-items: center; min-height: 3rem; } .start[hidden] { display: none; } .tile { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; color: var(--gw-color-accent); background: var(--gw-color-fill-accent-quiet); border-radius: var(--gw-radius-l); --gw-icon-size: 1.625rem; } .titles { display: flex; flex: 0 1 auto; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } h1 { margin: 0; font-size: var(--gw-font-size-2xl); font-weight: var(--gw-font-weight-strong); line-height: 1.2; color: var(--gw-color-text-strong); } p { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } /* Takes the room the titles leave, and gives it up before them, down to its items' smallest */ .actions { display: flex; flex: 1 1000 auto; gap: var(--gw-space-1); align-items: center; justify-content: flex-end; } /* Centered on the tile when there is one */ .tile:not([hidden]) ~ .actions { min-height: 3rem; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -13432,6 +13436,18 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#startSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#start",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#tile",
@@ -19599,7 +19615,7 @@
       "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.",
+          "description": "The page's mode, theme and import, in place where there's room and in a\npopover where there isn't. Offers the mode (auto, light, dark or Darker),\nthe theme, and buttons to import a theme file (a Groundwork theme's `.json`\nor 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. `auto`, the default, lays the mode out as icons\nand the theme as a select in place while they fit the room it's given,\nthen moves them into the popover, the theme first, as the room runs out.\nReset, Import, the gallery and `status` stay in the popover, opened from a\npalette button, or from a more button once the mode and theme are out.\nIn a flex row, such as `gw-page-header`'s actions, it gives up room before\nthe title does. `popover` keeps everything behind the palette button. `cycle` is one button\nshowing the mode in use, which steps to the next mode on each press, for an\napp bar. `inline` lays every control out in place, in one wrapping row with\nReset and Import, for a footer or a settings page; set `justify-content` on\nit to align the row. `modes` picks which modes it offers, such as\n`light dark` without Auto.",
           "name": "GwThemePicker",
           "cssParts": [
             {
@@ -19636,7 +19652,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); } /* 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; } `, ]",
+              "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; } /* Asks for the room to have all of it in place, but gives it up down to the button before a flex row's other items shrink */ :host([layout=\"auto\"]) { display: flex; flex: 0 1000 var(--gw-theme-picker-fit, auto); gap: var(--gw-space-1); align-items: center; min-width: 2.5rem; contain: inline-size; } :host([layout=\"auto\"]) > * { flex: none; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -19694,10 +19710,10 @@
               "kind": "field",
               "name": "layout",
               "type": {
-                "text": "\"popover\" | \"cycle\" | \"inline\""
+                "text": "\"auto\" | \"popover\" | \"cycle\" | \"inline\""
               },
-              "description": "How it shows: a button and popover, a button cycling the modes, or the controls in place.",
-              "default": "\"popover\""
+              "description": "How it shows: in place while it fits then in a popover, a button and popover, a button cycling the modes, or every control in place.",
+              "default": "\"auto\""
             },
             {
               "kind": "field",
@@ -19799,6 +19815,60 @@
               ],
               "description": "Puts the controls and their buttons in the popover, or in place for `inline`."
             },
+            {
+              "kind": "method",
+              "name": "#arrange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                }
+              ],
+              "description": "With `auto`, moves the mode and theme in place or back into the popover, as `#fits` says."
+            },
+            {
+              "kind": "method",
+              "name": "#fit",
+              "privacy": "private",
+              "description": "With `auto`, measures the mode and theme in place, sizes the host to fit\nthem all, then keeps in place what the room it gets allows, the mode\nfirst. The rest go into the popover."
+            },
+            {
+              "kind": "field",
+              "name": "#fits",
+              "privacy": "private",
+              "type": {
+                "text": "object"
+              },
+              "default": "{ mode: false, theme: false }"
+            },
+            {
+              "kind": "field",
+              "name": "#fitting",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "#measuring",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#resize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ResizeObserver(() => { void this.#fit(); })"
+            },
             {
               "kind": "method",
               "name": "#detail",
@@ -20163,9 +20233,9 @@
           "attributes": [
             {
               "type": {
-                "text": "\"popover\"|\"cycle\"|\"inline\""
+                "text": "\"auto\"|\"popover\"|\"cycle\"|\"inline\""
               },
-              "description": "How it shows: a button and popover, a button cycling the modes, or the controls in place. Defaults to `popover`.",
+              "description": "How it shows: in place while it fits then in a popover, a button and popover, a button cycling the modes, or every control in place. Defaults to `auto`.",
               "name": "layout"
             },
             {
@@ -20224,7 +20294,7 @@
           },
           "tagName": "gw-theme-picker",
           "customElement": true,
-          "summary": "A button opening the page's mode, theme and import."
+          "summary": "The page's mode, theme and import, in place or in a popover."
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.11",
+  "version": "0.9.13",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",

package/src/gw-app-bar.ts

@@ -141,9 +141,11 @@ export class GwAppBar extends GwElement {
           visibility var(--gw-motion-slow) allow-discrete;
       }
 
+      /* The nav keeps its room; the actions take the rest, which a theme
+         picker fills or gives up by moving its controls into its popover */
       .nav {
         display: flex;
-        flex: 1;
+        flex: none;
         gap: var(--gw-space-1);
         align-items: center;
         min-width: 0;
@@ -151,10 +153,10 @@ export class GwAppBar extends GwElement {
 
       .actions {
         display: flex;
-        flex: none;
+        flex: 1 1 auto;
         gap: var(--gw-space-1);
         align-items: center;
-        margin-inline-start: auto;
+        justify-content: flex-end;
       }
 
       .menu {

package/src/gw-page-header.ts

@@ -8,8 +8,9 @@ import { GwElement, css, h } from "./element.js";
 import { base, createIcon, setIconPath } from "./styles.js";
 
 /**
- * A page's title, with an optional icon tile and description, and its
- * controls at the top right in the `actions` slot.
+ * A page's title, with an optional icon tile and description, a back button
+ * or similar in the `start` slot, and its controls at the top right in the
+ * `actions` slot.
  *
  * @element gw-page-header
  * @summary A page's title, icon, description and actions.
@@ -18,6 +19,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} description - A line under the title.
  * @attr {string} icon - SVG path data for the icon tile.
  *
+ * @slot start - Before the icon tile, such as a back button.
  * @slot actions - The page's controls.
  *
  * @csspart tile - The icon tile.
@@ -40,6 +42,17 @@ export class GwPageHeader extends GwElement {
         align-items: flex-start;
       }
 
+      .start {
+        display: flex;
+        flex: none;
+        align-items: center;
+        min-height: 3rem;
+      }
+
+      .start[hidden] {
+        display: none;
+      }
+
       .tile {
         display: grid;
         flex: none;
@@ -54,7 +67,7 @@ export class GwPageHeader extends GwElement {
 
       .titles {
         display: flex;
-        flex: 1;
+        flex: 0 1 auto;
         flex-direction: column;
         gap: var(--gw-space-0-5);
         min-width: 0;
@@ -74,12 +87,19 @@ export class GwPageHeader extends GwElement {
         color: var(--gw-color-text-secondary);
       }
 
+      /* Takes the room the titles leave, and gives it up before them, down
+         to its items' smallest */
       .actions {
         display: flex;
-        flex: none;
+        flex: 1 1000 auto;
         gap: var(--gw-space-1);
         align-items: center;
-        margin-inline-start: auto;
+        justify-content: flex-end;
+      }
+
+      /* Centered on the tile when there is one */
+      .tile:not([hidden]) ~ .actions {
+        min-height: 3rem;
       }
     `,
   ];
@@ -90,6 +110,11 @@ export class GwPageHeader extends GwElement {
 
   readonly #icon = createIcon("");
 
+  readonly #startSlot = h("slot", { name: "start" });
+
+  // Centered on the tile's height, and out of the row while it's empty
+  readonly #start = h("div", { class: "start", hidden: true }, this.#startSlot);
+
   readonly #tile = h("span", { class: "tile", part: "tile" }, this.#icon);
 
   readonly #heading = h("h1", { part: "heading" });
@@ -104,7 +129,11 @@ export class GwPageHeader extends GwElement {
   }
 
   protected override create(root: ShadowRoot) {
+    this.#startSlot.addEventListener("slotchange", () => {
+      this.#start.hidden = this.#startSlot.assignedElements().length === 0;
+    });
     root.append(
+      this.#start,
       this.#tile,
       h("div", { class: "titles" }, this.#heading, this.#description),
       h("div", { class: "actions" }, h("slot", { name: "actions" })),

package/src/gw-segmented.ts

@@ -12,6 +12,8 @@ export interface Segment {
   readonly label: string;
   /** SVG path data for an icon beside, or instead of, the label. */
   readonly icon?: string;
+  /** A longer description, shown as the option's tooltip. */
+  readonly hint?: string;
 }
 
 /**
@@ -297,7 +299,8 @@ export class GwSegmented extends GwElement {
       setAttribute(
         label,
         "title",
-        option.icon && this.labels !== "show" ? option.label : null,
+        option.hint ??
+          (option.icon && this.labels !== "show" ? option.label : null),
       );
     }
 

package/src/gw-theme-picker.ts

@@ -1,5 +1,5 @@
 /**
- * `gw-theme-picker`: a button opening the page's mode, theme and import.
+ * `gw-theme-picker`: the page's mode, theme and import, in place or in a popover.
  * Docs: https://groundwork.timmo.dev/components/actions/#theme-picker
  *
  * @module
@@ -17,10 +17,10 @@ import { base } from "./styles.js";
 const paletteIcon =
   "M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z";
 
-// MDI's sunny, moon and night (a moon with stars), for cycle's button. Auto
-// keeps the palette
+// MDI's theme-light-dark, sunny, moon and night (a moon with stars). Cycle's
+// button keeps the palette for auto
 const modeIcons = {
-  auto: paletteIcon,
+  auto: "M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z",
   light:
     "M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z",
   dark: "M2 12A10 10 0 0 0 15 21.54A10 10 0 0 1 15 2.46A10 10 0 0 0 2 12Z",
@@ -35,10 +35,15 @@ const allModes = [
   { value: "darker", label: "Darker", icon: modeIcons.darker },
 ] as const;
 
+// MDI's dots-vertical, for the overflow once the mode and theme are in place
+const moreIcon =
+  "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z";
+
 /**
- * A palette button for a page's look. It opens a popover with the mode
- * (auto, light, dark or Darker), the theme, and buttons to import a theme
- * file (a Groundwork theme's `.json` or an Omarchy `colors.toml`) or reset.
+ * The page's mode, theme and import, in place where there's room and in a
+ * popover where there isn't. Offers the mode (auto, light, dark or Darker),
+ * the theme, and buttons to import a theme file (a Groundwork theme's `.json`
+ * or an Omarchy `colors.toml`) or reset.
  *
  * It only asks: it fires `mode`, `theme`, `import` and `reset`, and the page
  * applies them and sets `mode`, `theme` and `themes` back. `pageTheme` from
@@ -48,17 +53,23 @@ const allModes = [
  * `gallery` swaps the theme select for `gw-theme-gallery`'s cards, which
  * preview each theme in the chosen mode.
  *
- * `layout` sets how it shows. `popover`, the default, is the palette button
- * and its popover. `cycle` is one button showing the mode in use, which steps
- * to the next mode on each press, for an app bar. `inline` lays the controls
- * out in place, in one wrapping row with Reset and Import, for a footer or a
- * settings page; set `justify-content` on it to align the row. `modes` picks which modes it offers, such as `light dark` without
- * Auto.
+ * `layout` sets how it shows. `auto`, the default, lays the mode out as icons
+ * and the theme as a select in place while they fit the room it's given,
+ * then moves them into the popover, the theme first, as the room runs out.
+ * Reset, Import, the gallery and `status` stay in the popover, opened from a
+ * palette button, or from a more button once the mode and theme are out.
+ * In a flex row, such as `gw-page-header`'s actions, it gives up room before
+ * the title does. `popover` keeps everything behind the palette button. `cycle` is one button
+ * showing the mode in use, which steps to the next mode on each press, for an
+ * app bar. `inline` lays every control out in place, in one wrapping row with
+ * Reset and Import, for a footer or a settings page; set `justify-content` on
+ * it to align the row. `modes` picks which modes it offers, such as
+ * `light dark` without Auto.
  *
  * @element gw-theme-picker
- * @summary A button opening the page's mode, theme and import.
+ * @summary The page's mode, theme and import, in place or in a popover.
  *
- * @attr {"popover"|"cycle"|"inline"} layout - How it shows: a button and popover, a button cycling the modes, or the controls in place. Defaults to `popover`.
+ * @attr {"auto"|"popover"|"cycle"|"inline"} layout - How it shows: in place while it fits then in a popover, a button and popover, a button cycling the modes, or every control in place. Defaults to `auto`.
  * @attr {string} modes - The modes to offer, in order and separated by spaces. Defaults to `auto light dark darker`.
  * @attr {"auto"|"light"|"dark"|"darker"} mode - The mode in use. Defaults to `auto`.
  * @attr {string} theme - The theme in use, by id.
@@ -141,6 +152,21 @@ export class GwThemePicker extends GwElement {
         gap: var(--gw-space-2);
         align-items: center;
       }
+
+      /* Asks for the room to have all of it in place, but gives it up down
+         to the button before a flex row's other items shrink */
+      :host([layout="auto"]) {
+        display: flex;
+        flex: 0 1000 var(--gw-theme-picker-fit, auto);
+        gap: var(--gw-space-1);
+        align-items: center;
+        min-width: 2.5rem;
+        contain: inline-size;
+      }
+
+      :host([layout="auto"]) > * {
+        flex: none;
+      }
     `,
   ];
 
@@ -150,8 +176,8 @@ export class GwThemePicker extends GwElement {
   declare gallery: boolean;
   declare status: string;
   declare label: string;
-  /** How it shows: a button and popover, a button cycling the modes, or the controls in place. */
-  declare layout: "popover" | "cycle" | "inline";
+  /** How it shows: in place while it fits then in a popover, a button and popover, a button cycling the modes, or every control in place. */
+  declare layout: "auto" | "popover" | "cycle" | "inline";
   /** The modes to offer, in order and separated by spaces. */
   declare modes: string;
 
@@ -208,7 +234,7 @@ export class GwThemePicker extends GwElement {
     this.gallery = false;
     this.status = "";
     this.label = "Theme";
-    this.layout = "popover";
+    this.layout = "auto";
     this.modes = "auto light dark darker";
   }
 
@@ -251,15 +277,143 @@ export class GwThemePicker extends GwElement {
     this.#import.slot = inline ? "" : "actions";
 
     if (inline) {
+      this.#controls.replaceChildren(
+        this.#mode,
+        this.#theme,
+        this.#gallery,
+        this.#status,
+      );
       this.#actions.append(this.#reset, this.#import);
       root.append(this.#controls, this.#actions);
       this.#button.remove();
       this.#popover.remove();
     } else {
-      this.#popover.append(this.#controls, this.#reset, this.#import);
-      root.prepend(this.#button, this.#popover);
+      if (this.#controls.parentNode !== this.#popover) {
+        this.#popover.append(this.#controls, this.#reset, this.#import);
+      }
+
+      if (this.#button.parentNode !== root) {
+        root.prepend(this.#button, this.#popover);
+      }
+
       this.#actions.remove();
     }
+
+    this.#arrange(root);
+  }
+
+  /** With `auto`, moves the mode and theme in place or back into the popover, as `#fits` says. */
+  #arrange(root: ShadowRoot) {
+    // #fit has them in place to measure
+    if (this.#measuring) return;
+
+    const auto = this.layout === "auto";
+    const mode = auto && this.#fits.mode;
+    const theme = mode && this.#fits.theme;
+
+    if (mode && this.#mode.parentNode !== root) {
+      root.insertBefore(this.#mode, this.#button);
+    } else if (!mode && this.#mode.parentNode !== this.#controls) {
+      this.#controls.prepend(this.#mode);
+    }
+
+    if (theme && this.#theme.parentNode !== root) {
+      root.insertBefore(this.#theme, this.#button);
+    } else if (!theme && this.#theme.parentNode !== this.#controls) {
+      this.#controls.insertBefore(this.#theme, this.#gallery);
+    }
+
+    this.#mode.labels = mode ? "hide" : "show";
+    this.#theme.inlineLabel = theme;
+    // The popover's heading names it once the mode is out of it
+    this.#theme.labelHidden = mode && !theme;
+    // The palette while the popover holds the theme; the overflow dots
+    // once only Reset and Import are left in it
+    this.#button.icon =
+      this.layout === "cycle"
+        ? this.#button.icon
+        : theme || (mode && this.#theme.hidden && !this.gallery)
+          ? moreIcon
+          : paletteIcon;
+  }
+
+  /**
+   * With `auto`, measures the mode and theme in place, sizes the host to fit
+   * them all, then keeps in place what the room it gets allows, the mode
+   * first. The rest go into the popover.
+   */
+  async #fit() {
+    const root = this.shadowRoot;
+
+    if (this.layout !== "auto" || root === null || !this.isConnected) return;
+
+    const run = ++this.#fitting;
+    const theme = !this.#theme.hidden;
+
+    this.#measuring = true;
+
+    if (this.#mode.parentNode !== root) {
+      this.#mode.labels = "hide";
+      root.insertBefore(this.#mode, this.#button);
+    }
+
+    if (theme && this.#theme.parentNode !== root) {
+      this.#theme.inlineLabel = true;
+      this.#theme.labelHidden = false;
+      root.insertBefore(this.#theme, this.#button);
+    }
+
+    // Drawn in place before measuring, still before the next paint
+    await Promise.all([this.#mode.updateComplete, this.#theme.updateComplete]);
+
+    if (run !== this.#fitting) return;
+
+    this.#measuring = false;
+
+    if (this.layout !== "auto") {
+      this.#arrange(root);
+
+      return;
+    }
+
+    const gap = Number.parseFloat(getComputedStyle(this).columnGap) || 0;
+    const button = this.#button.getBoundingClientRect().width;
+    const mode = this.#mode.getBoundingClientRect().width + gap;
+    const select = theme ? this.#theme.getBoundingClientRect().width + gap : 0;
+
+    this.style.setProperty(
+      "--gw-theme-picker-fit",
+      `${Math.ceil(button + mode + select)}px`,
+    );
+
+    const room = this.getBoundingClientRect().width + 0.5;
+
+    this.#fits = {
+      mode: room >= button + mode,
+      theme: theme && room >= button + mode + select,
+    };
+    this.#arrange(root);
+  }
+
+  #fits = { mode: false, theme: false };
+
+  #fitting = 0;
+
+  #measuring = false;
+
+  readonly #resize = new ResizeObserver(() => {
+    void this.#fit();
+  });
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.#resize.observe(this);
+    void document.fonts.ready.then(() => this.#fit());
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#resize.disconnect();
   }
 
   #detail<Detail>(type: string, detail: Detail) {
@@ -320,16 +474,22 @@ export class GwThemePicker extends GwElement {
 
       this.#button.label = name;
       this.#button.textContent = name;
-      this.#button.icon = current?.icon ?? paletteIcon;
+      this.#button.icon =
+        current === undefined || current.value === "auto"
+          ? paletteIcon
+          : current.icon;
     } else {
       this.#button.label = this.label;
       this.#button.textContent = this.label;
-      this.#button.icon = paletteIcon;
     }
 
     this.#popover.heading = this.label;
     this.#mode.label = "Mode";
-    this.#mode.options = offered.map(({ value, label }) => ({ value, label }));
+    this.#mode.options = offered.map(({ value, label, icon }) => ({
+      value,
+      label,
+      icon,
+    }));
     this.#mode.value = this.mode;
     this.#theme.options = Array.isArray(this.themes) ? this.themes : [];
     this.#theme.value = this.theme;
@@ -341,6 +501,19 @@ export class GwThemePicker extends GwElement {
     this.#gallery.mode = this.mode === "auto" ? "" : this.mode;
     this.#status.textContent = this.status;
     this.#status.hidden = !this.status;
+
+    if (root === null) return;
+
+    this.#arrange(root);
+
+    // Measures again for the select's new value or the new set of controls
+    if (
+      ["layout", "modes", "theme", "themes", "gallery"].some((name) =>
+        changed.has(name),
+      )
+    ) {
+      void this.#fit();
+    }
   }
 }