@timmo001/groundwork-ui 0.9.25 → 0.9.27

package/custom-elements.json

@@ -1485,7 +1485,7 @@
       "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, 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.",
+          "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.\nWith no nav links there's no menu button, so a bar of only a brand and\nactions keeps its layout at every width.",
           "name": "GwAppBar",
           "cssParts": [
             {
@@ -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; } /* 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; } `, ]",
+              "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, unless there's no nav to fold */ :host([collapsed]) .bar:not(.no-nav) .menu { display: inline-grid; } .no-nav .nav { display: none; } :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"
@@ -1630,6 +1630,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#navSlot",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#nav",
@@ -1639,6 +1645,12 @@
               },
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#bar",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#observer",
@@ -3118,7 +3130,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ variant: { reflect: true }, appearance: { reflect: true }, size: { reflect: true }, type: {}, href: {}, label: {}, disabled: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, icon: {}, swatch: {}, labels: { reflect: true }, }",
+              "default": "{ variant: { reflect: true }, appearance: { reflect: true }, size: { reflect: true }, type: {}, href: {}, label: {}, disabled: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, icon: {}, swatch: {}, labels: { reflect: true }, toggle: { type: \"boolean\", reflect: true }, pressed: { type: \"boolean\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3145,7 +3157,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, controlSizes(\"button\"), css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; } :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-size: var(--gw-button-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1.125rem * var(--gw-scale)); position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; justify-content: center; min-height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-size)); 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; } /* The icon slot is display: contents, so its slotted icon is a grid item of its own and needs the shared cell too */ .lead > *, ::slotted([slot=\"icon\"]) { grid-area: 1 / 1; } /* A color dot in the icon's place */ .swatch { width: calc(var(--gw-icon-size) * 0.6); height: calc(var(--gw-icon-size) * 0.6); border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .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; } /* The icon stays for --gw-motion-delay, so a quick action never flashes the ring, then they crossfade; ending is immediate */ :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; transition-delay: var(--gw-motion-delay, 500ms); } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; transition-delay: var(--gw-motion-delay, 500ms); } .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, controlSizes(\"button\"), css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; } :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-size: var(--gw-button-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1.125rem * var(--gw-scale)); position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; justify-content: center; min-height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-size)); 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, :host([toggle][pressed]:is([appearance=\"plain\"], [appearance=\"outlined\"])) .button { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([toggle][pressed][appearance=\"filled\"]) .button, :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; } /* The icon slot is display: contents, so its slotted icon is a grid item of its own and needs the shared cell too */ .lead > *, ::slotted([slot=\"icon\"]) { grid-area: 1 / 1; } /* A color dot in the icon's place */ .swatch { width: calc(var(--gw-icon-size) * 0.6); height: calc(var(--gw-icon-size) * 0.6); border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .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; } /* The icon stays for --gw-motion-delay, so a quick action never flashes the ring, then they crossfade; ending is immediate */ :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; transition-delay: var(--gw-motion-delay, 500ms); } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; transition-delay: var(--gw-motion-delay, 500ms); } .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"
@@ -3243,6 +3255,24 @@
               "description": "Whether the text shows beside an icon: always, never, or not on narrow screens.",
               "default": "\"show\""
             },
+            {
+              "kind": "field",
+              "name": "toggle",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Makes it a toggle button, announced as pressed or not.",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "pressed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether a toggle button is on.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "#icon",
@@ -3679,6 +3709,20 @@
               },
               "description": "Whether the text shows beside an icon: always, never, or not on narrow screens. Defaults to `show`.",
               "name": "labels"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Makes it a toggle button, which assistive technology announces as pressed or not.",
+              "name": "toggle"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether a toggle button is on. It shows the same tint as a current link.",
+              "name": "pressed"
             }
           ],
           "superclass": {
@@ -3761,7 +3805,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, description: {}, level: { type: \"number\" }, href: {}, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
+              "default": "{ heading: {}, description: {}, icon: {}, level: { type: \"number\" }, href: {}, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3774,7 +3818,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } header { display: flex; gap: var(--gw-space-2); align-items: center; } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } .title { margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } /* The divider runs to the card's edges */ footer:not([hidden]) { display: flex; flex-direction: column; gap: inherit; margin-inline: calc(-1 * var(--gw-space-4)); padding: var(--gw-space-3) var(--gw-space-4) 0; border-top: var(--gw-border-width) solid var(--gw-color-border-normal); } :host([flush]) footer:not([hidden]) { margin-inline: 0; padding-bottom: var(--gw-space-3); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
+              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } header { display: flex; gap: var(--gw-space-2); align-items: center; } header > .icon { flex-shrink: 0; margin-inline-end: var(--gw-space-1); color: var(--gw-color-accent); } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } .title { margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } /* The divider runs to the card's edges */ footer:not([hidden]) { display: flex; flex-direction: column; gap: inherit; margin-inline: calc(-1 * var(--gw-space-4)); padding: var(--gw-space-3) var(--gw-space-4) 0; border-top: var(--gw-border-width) solid var(--gw-color-border-normal); } :host([flush]) footer:not([hidden]) { margin-inline: 0; padding-bottom: var(--gw-space-3); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3796,6 +3840,15 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "description": "SVG path data for an icon before the heading.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "level",
@@ -3868,6 +3921,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#icon",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#header",
@@ -3898,6 +3957,21 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#bodySlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#empty",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "#body",
@@ -4271,6 +4345,13 @@
               "description": "A line under the heading.",
               "name": "description"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "SVG path data for an icon before the heading, such as on a card that links to a section.",
+              "name": "icon"
+            },
             {
               "type": {
                 "text": "number"
@@ -8319,6 +8400,12 @@
               "name": "value"
             }
           ],
+          "slots": [
+            {
+              "description": "`<dt>` and `<dd>` pairs, in place of `items`, for values with markup such as chips or code.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -8340,7 +8427,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--gw-space-1) var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); } dt { color: var(--gw-color-text-secondary); } dd { min-width: 0; margin: 0; font-variant-numeric: var(--gw-font-figures); color: var(--gw-color-text-strong); overflow-wrap: anywhere; } `, ]",
+              "default": "[ base, css` :host { display: block; } dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--gw-space-1) var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); } dt, ::slotted(dt) { color: var(--gw-color-text-secondary); } dd, ::slotted(dd) { min-width: 0; margin: 0; font-variant-numeric: var(--gw-font-figures); color: var(--gw-color-text-strong); overflow-wrap: anywhere; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -9857,7 +9944,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, hideLabel: { type: \"boolean\", attribute: \"hide-label\", reflect: true }, }",
+              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10052,7 +10139,7 @@
             },
             {
               "kind": "field",
-              "name": "hideLabel",
+              "name": "labelHidden",
               "type": {
                 "text": "boolean"
               },
@@ -10627,7 +10714,7 @@
                 "text": "boolean"
               },
               "description": "Keeps the label as the field's accessible name but doesn't show it, for a field in a toolbar whose icon and placeholder say what it's for.",
-              "name": "hide-label"
+              "name": "label-hidden"
             }
           ],
           "superclass": {
@@ -13769,7 +13856,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, description: {}, icon: {}, }",
+              "default": "{ heading: {}, description: {}, icon: {}, level: { type: \"number\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -13782,7 +13869,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "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; } `, ]",
+              "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; } :host(:not([level=\"1\"])) .tile { width: 2.5rem; height: 2.5rem; border-radius: var(--gw-radius-m); --gw-icon-size: 1.375rem; } :host(:not([level=\"1\"])) .heading { font-size: var(--gw-font-size-l); } :host(:not([level=\"1\"])) .tile:not([hidden]) ~ .actions { min-height: 2.5rem; } .heading { 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"
@@ -13812,6 +13899,15 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The heading level, 1 to 6.",
+              "default": "1"
+            },
             {
               "kind": "field",
               "name": "#icon",
@@ -13840,7 +13936,9 @@
               "kind": "field",
               "name": "#heading",
               "privacy": "private",
-              "readonly": true
+              "type": {
+                "text": "HTMLHeadingElement"
+              }
             },
             {
               "kind": "field",
@@ -14181,6 +14279,13 @@
               },
               "description": "SVG path data for the icon tile.",
               "name": "icon"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The heading level, 1 to 6. Defaults to 1. From 2 the header is smaller, for a section of a page that reads like a page of its own.",
+              "name": "level"
             }
           ],
           "superclass": {

package/package.json

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

package/src/gw-app-bar.ts

@@ -27,6 +27,8 @@ const closeIcon =
  * page that opens with a hero. Below `menu-below`, 600px wide by default,
  * the nav moves into a menu opened from a button, which closes on Esc, a
  * click outside or a link. Raise it when the nav and actions need more room.
+ * With no nav links there's no menu button, so a bar of only a brand and
+ * actions keeps its layout at every width.
  *
  * @element gw-app-bar
  * @summary A header pinned to the top, floating once the page scrolls.
@@ -178,11 +180,16 @@ export class GwAppBar extends GwElement {
         background: var(--gw-color-fill-neutral-hovered);
       }
 
-      /* Below menu-below, which sets collapsed, the nav folds into a menu */
-      :host([collapsed]) .menu {
+      /* Below menu-below, which sets collapsed, the nav folds into a menu,
+         unless there's no nav to fold */
+      :host([collapsed]) .bar:not(.no-nav) .menu {
         display: inline-grid;
       }
 
+      .no-nav .nav {
+        display: none;
+      }
+
       :host([collapsed]) .nav {
         position: absolute;
         inset-block-start: 100%;
@@ -239,12 +246,16 @@ export class GwAppBar extends GwElement {
     this.#menuIcon,
   );
 
+  readonly #navSlot = h("slot");
+
   readonly #nav: HTMLDivElement = h(
     "div",
     { class: "nav", part: "nav" },
-    h("slot"),
+    this.#navSlot,
   );
 
+  readonly #bar = h("div", { class: "bar no-nav", part: "bar" });
+
   #observer: IntersectionObserver | undefined;
 
   #frame = 0;
@@ -263,8 +274,10 @@ export class GwAppBar extends GwElement {
   /** Follows the viewport across `menuBelow`, setting `collapsed`. */
   #watchWidth() {
     this.#narrow?.removeEventListener("change", this.#onNarrow);
+    const below = Number(this.menuBelow);
+
     this.#narrow = window.matchMedia(
-      `(max-width: ${(Number(this.menuBelow) || 600) - 0.02}px)`,
+      `(max-width: ${(Number.isFinite(below) ? below : 600) - 0.02}px)`,
     );
     this.#narrow.addEventListener("change", this.#onNarrow);
     this.#onNarrow();
@@ -370,25 +383,32 @@ export class GwAppBar extends GwElement {
       }
     });
 
-    root.append(
+    // Without nav links there's nothing to fold, so no menu button
+    this.#navSlot.addEventListener("slotchange", () => {
+      this.#bar.classList.toggle(
+        "no-nav",
+        this.#navSlot
+          .assignedNodes()
+          .every(
+            (node) =>
+              node.nodeType === Node.TEXT_NODE &&
+              node.textContent?.trim() === "",
+          ),
+      );
+    });
+
+    this.#bar.append(
+      // The menu button leads, so a revealed brand opens beside it
+      this.#menu,
+      h("div", { class: "brand", part: "brand" }, h("slot", { name: "brand" })),
+      this.#nav,
       h(
         "div",
-        { class: "bar", part: "bar" },
-        // The menu button leads, so a revealed brand opens beside it
-        this.#menu,
-        h(
-          "div",
-          { class: "brand", part: "brand" },
-          h("slot", { name: "brand" }),
-        ),
-        this.#nav,
-        h(
-          "div",
-          { class: "actions", part: "actions" },
-          h("slot", { name: "actions" }),
-        ),
+        { class: "actions", part: "actions" },
+        h("slot", { name: "actions" }),
       ),
     );
+    root.append(this.#bar);
   }
 
   protected override update(changed: ReadonlySet<string>) {

package/src/gw-button.ts

@@ -40,6 +40,8 @@ import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
  * @attr {string} icon - SVG path data for an icon before the text.
  * @attr {string} swatch - A CSS color, drawn as a small round dot in the icon's place, such as a tag's own color.
  * @attr {"show"|"hide"|"auto"} labels - Whether the text shows beside an icon: always, never, or not on narrow screens. Defaults to `show`.
+ * @attr {boolean} toggle - Makes it a toggle button, which assistive technology announces as pressed or not.
+ * @attr {boolean} pressed - Whether a toggle button is on. It shows the same tint as a current link.
  *
  * @slot - The text, or an `<a>` holding it, in place of `href`.
  * @slot icon - An icon before the text, in place of `icon`.
@@ -64,6 +66,8 @@ export class GwButton extends GwElement {
     icon: {},
     swatch: {},
     labels: { reflect: true },
+    toggle: { type: "boolean", reflect: true },
+    pressed: { type: "boolean", reflect: true },
   } as const;
 
   /** Focusing the element focuses its native button, such as from a dialog opening. */
@@ -208,10 +212,13 @@ export class GwButton extends GwElement {
       }
 
       :host([appearance="plain"]) .button.current,
-      :host([appearance="outlined"]) .button.current {
+      :host([appearance="outlined"]) .button.current,
+      :host([toggle][pressed]:is([appearance="plain"], [appearance="outlined"]))
+        .button {
         background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent);
       }
 
+      :host([toggle][pressed][appearance="filled"]) .button,
       :host([appearance="filled"]) .button.current {
         background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent);
       }
@@ -363,6 +370,10 @@ export class GwButton extends GwElement {
   declare swatch: string;
   /** Whether the text shows beside an icon: always, never, or not on narrow screens. */
   declare labels: "show" | "hide" | "auto";
+  /** Makes it a toggle button, announced as pressed or not. */
+  declare toggle: boolean;
+  /** Whether a toggle button is on. */
+  declare pressed: boolean;
 
   readonly #icon = createIcon("");
 
@@ -403,6 +414,8 @@ export class GwButton extends GwElement {
     this.icon = "";
     this.swatch = "";
     this.labels = "show";
+    this.toggle = false;
+    this.pressed = false;
     this.variant = "brand";
     this.appearance = "accent";
     this.size = "medium";
@@ -537,6 +550,11 @@ export class GwButton extends GwElement {
     } else if (control instanceof HTMLButtonElement) {
       control.type = this.type;
       control.disabled = this.disabled;
+      setAttribute(
+        control,
+        "aria-pressed",
+        this.toggle ? String(this.pressed) : null,
+      );
     }
   }
 }

package/src/gw-card.ts

@@ -7,7 +7,7 @@
 import { GwElement, css, h, setAttribute } from "./element.js";
 import "./gw-skeleton.js";
 import { animateHeight, fadeIn } from "./motion.js";
-import { base } from "./styles.js";
+import { base, createIcon, setIconPath } from "./styles.js";
 
 /**
  * A surface for one group of content, with an optional heading and actions.
@@ -26,6 +26,7 @@ import { base } from "./styles.js";
  *
  * @attr {string} heading - The card's heading.
  * @attr {string} description - A line under the heading.
+ * @attr {string} icon - SVG path data for an icon before the heading, such as on a card that links to a section.
  * @attr {number} level - The heading's level for assistive tech, 2 by default. Use 3 for a card under a section heading.
  * @attr {string} href - Makes the whole card a link to this address.
  * @attr {boolean} flush - Drops the padding, for content that runs to the edges.
@@ -48,6 +49,7 @@ export class GwCard extends GwElement {
   static override properties = {
     heading: {},
     description: {},
+    icon: {},
     level: { type: "number" },
     href: {},
     flush: { type: "boolean", reflect: true },
@@ -117,6 +119,12 @@ export class GwCard extends GwElement {
         align-items: center;
       }
 
+      header > .icon {
+        flex-shrink: 0;
+        margin-inline-end: var(--gw-space-1);
+        color: var(--gw-color-accent);
+      }
+
       .titles {
         display: flex;
         flex: 1;
@@ -162,6 +170,8 @@ export class GwCard extends GwElement {
 
   declare heading: string;
   declare description: string;
+  /** SVG path data for an icon before the heading. */
+  declare icon: string;
   /** The heading's level for assistive tech. */
   declare level: number;
   declare href: string;
@@ -189,9 +199,12 @@ export class GwCard extends GwElement {
     part: "description",
   });
 
+  readonly #icon = createIcon("");
+
   readonly #header: HTMLElement = h(
     "header",
     { part: "header" },
+    this.#icon,
     h("div", { class: "titles" }, this.#heading, this.#description),
     h("slot", { name: "actions" }),
   );
@@ -206,10 +219,14 @@ export class GwCard extends GwElement {
 
   readonly #skeleton = h("gw-skeleton-lines");
 
+  readonly #bodySlot = h("slot");
+
+  #empty = true;
+
   readonly #body: HTMLDivElement = h(
     "div",
     { class: "body", part: "body" },
-    h("slot"),
+    this.#bodySlot,
   );
 
   #card: HTMLElement = h("section", { class: "card", part: "card" });
@@ -222,6 +239,7 @@ export class GwCard extends GwElement {
     super();
     this.heading = "";
     this.description = "";
+    this.icon = "";
     this.level = 2;
     this.href = "";
     this.flush = false;
@@ -274,6 +292,17 @@ export class GwCard extends GwElement {
       this.#footer.hidden =
         this.#footerSlot.assignedNodes({ flatten: true }).length === 0;
     });
+
+    // A card with only a header, such as a link to a section, has no body gap
+    this.#bodySlot.addEventListener("slotchange", () => {
+      this.#empty = this.#bodySlot
+        .assignedNodes({ flatten: true })
+        .every(
+          (node) =>
+            node.nodeType === Node.TEXT_NODE && !node.textContent?.trim(),
+        );
+      this.requestUpdate("loading");
+    });
   }
 
   /** The `<a>` in the heading slot, or holding it, when there is one. */
@@ -322,14 +351,20 @@ export class GwCard extends GwElement {
     this.#heading.setAttribute("aria-level", String(this.level || 2));
     this.#description.textContent = this.description;
     this.#description.hidden = !this.description;
+    setIconPath(this.#icon, this.icon);
+    this.#icon.toggleAttribute("hidden", !this.icon);
     this.#titleSkeleton.hidden =
       this.heading !== "" || slotted || !this.loading;
     this.#header.hidden =
-      !this.heading && !this.description && !slotted && !this.loading;
+      !this.heading &&
+      !this.description &&
+      !this.icon &&
+      !slotted &&
+      !this.loading;
     this.#heading.hidden = !this.heading && !slotted && !this.loading;
     this.#skeleton.lines = this.lines;
     this.#skeleton.hidden = !this.loading;
-    this.#body.hidden = this.loading;
+    this.#body.hidden = this.loading || this.#empty;
 
     if (animate) {
       animateHeight(this, before);

package/src/gw-facts.ts

@@ -29,6 +29,8 @@ const skeletonWidths = ["60%", "40%", "75%", "50%", "65%"];
  * @attr {boolean} loading - Shows skeleton pairs, keeping any labels already known.
  * @attr {number} rows - How many skeleton pairs while loading. Defaults to 4.
  *
+ * @slot - `<dt>` and `<dd>` pairs, in place of `items`, for values with markup such as chips or code.
+ *
  * @csspart list - The description list.
  * @csspart label - Each label.
  * @csspart value - Each value.
@@ -55,11 +57,13 @@ export class GwFacts extends GwElement {
         font-size: var(--gw-font-size-s);
       }
 
-      dt {
+      dt,
+      ::slotted(dt) {
         color: var(--gw-color-text-secondary);
       }
 
-      dd {
+      dd,
+      ::slotted(dd) {
         min-width: 0;
         margin: 0;
         font-variant-numeric: var(--gw-font-figures);
@@ -117,6 +121,8 @@ export class GwFacts extends GwElement {
     } else {
       this.#list.removeAttribute("aria-busy");
       this.#list.replaceChildren(
+        // The slot is display: contents, so slotted pairs join the grid
+        h("slot"),
         ...items.flatMap((item) => [
           h("dt", { part: "label" }, item.label),
           h(

package/src/gw-input.ts

@@ -46,7 +46,7 @@ const hideIcon =
  * @attr {boolean} reveal - On a password field, adds a button at the end to show and hide what's typed.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The field's size, 40px tall at medium. Defaults to `medium`.
  * @attr {string} icon - SVG path data for an icon inside the field, before the text, such as a magnifier on a search.
- * @attr {boolean} hide-label - Keeps the label as the field's accessible name but doesn't show it, for a field in a toolbar whose icon and placeholder say what it's for.
+ * @attr {boolean} label-hidden - Keeps the label as the field's accessible name but doesn't show it, for a field in a toolbar whose icon and placeholder say what it's for.
  *
  * @cssprop --gw-field-scale - Scales the field, around 1 for medium.
  * @cssprop --gw-control-scale - Scales its height with the theme's density. The theme sets it.
@@ -75,7 +75,7 @@ export class GwInput extends LightElement {
     reveal: { type: "boolean" },
     size: { reflect: true },
     icon: {},
-    hideLabel: { type: "boolean", attribute: "hide-label", reflect: true },
+    labelHidden: { type: "boolean", attribute: "label-hidden", reflect: true },
   } as const;
 
   declare label: string;
@@ -112,7 +112,7 @@ export class GwInput extends LightElement {
   /** SVG path data for an icon inside the field, before the text. */
   declare icon: string;
   /** Keeps the label as the accessible name without showing it. */
-  declare hideLabel: boolean;
+  declare labelHidden: boolean;
 
   readonly #id = fieldId();
 
@@ -184,7 +184,7 @@ export class GwInput extends LightElement {
     this.reveal = false;
     this.size = "medium";
     this.icon = "";
-    this.hideLabel = false;
+    this.labelHidden = false;
   }
 
   protected override create(root: HTMLElement) {
@@ -259,7 +259,7 @@ export class GwInput extends LightElement {
     this.#label.replaceChildren(this.label, this.#optional);
     this.#optional.hidden = !this.optional;
     this.#info.update(this.label, this.info);
-    this.#info.heading.classList.toggle("gw-visually-hidden", this.hideLabel);
+    this.#info.heading.classList.toggle("gw-visually-hidden", this.labelHidden);
     setIconPath(this.#icon, this.icon);
     this.#icon.toggleAttribute("hidden", !this.icon);
     this.#input.type = reveal && this.#revealed ? "text" : this.type;

package/src/gw-page-header.ts

@@ -7,6 +7,8 @@
 import { GwElement, css, h } from "./element.js";
 import { base, createIcon, setIconPath } from "./styles.js";
 
+const headingTags = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+
 /**
  * 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
@@ -18,6 +20,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} heading - The page's title.
  * @attr {string} description - A line under the title.
  * @attr {string} icon - SVG path data for the icon tile.
+ * @attr {number} level - The heading level, 1 to 6. Defaults to 1. From 2 the header is smaller, for a section of a page that reads like a page of its own.
  *
  * @slot start - Before the icon tile, such as a back button.
  * @slot actions - The page's controls.
@@ -31,6 +34,7 @@ export class GwPageHeader extends GwElement {
     heading: {},
     description: {},
     icon: {},
+    level: { type: "number", reflect: true },
   } as const;
 
   static override styles = [
@@ -73,7 +77,22 @@ export class GwPageHeader extends GwElement {
         min-width: 0;
       }
 
-      h1 {
+      :host(:not([level="1"])) .tile {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: var(--gw-radius-m);
+        --gw-icon-size: 1.375rem;
+      }
+
+      :host(:not([level="1"])) .heading {
+        font-size: var(--gw-font-size-l);
+      }
+
+      :host(:not([level="1"])) .tile:not([hidden]) ~ .actions {
+        min-height: 2.5rem;
+      }
+
+      .heading {
         margin: 0;
         font-size: var(--gw-font-size-2xl);
         font-weight: var(--gw-font-weight-strong);
@@ -107,6 +126,8 @@ export class GwPageHeader extends GwElement {
   declare heading: string;
   declare description: string;
   declare icon: string;
+  /** The heading level, 1 to 6. */
+  declare level: number;
 
   readonly #icon = createIcon("");
 
@@ -117,7 +138,7 @@ export class GwPageHeader extends GwElement {
 
   readonly #tile = h("span", { class: "tile", part: "tile" }, this.#icon);
 
-  readonly #heading = h("h1", { part: "heading" });
+  #heading: HTMLHeadingElement = h("h1", { class: "heading", part: "heading" });
 
   readonly #description = h("p", { part: "description" });
 
@@ -126,6 +147,7 @@ export class GwPageHeader extends GwElement {
     this.heading = "";
     this.description = "";
     this.icon = "";
+    this.level = 1;
   }
 
   protected override create(root: ShadowRoot) {
@@ -141,6 +163,19 @@ export class GwPageHeader extends GwElement {
   }
 
   protected override update() {
+    const level = Math.min(6, Math.max(1, Math.round(this.level) || 1));
+    const tag = headingTags[level - 1] ?? "h1";
+
+    if (this.#heading.localName !== tag) {
+      const next = h(tag, {
+        class: "heading",
+        part: "heading",
+      });
+
+      this.#heading.replaceWith(next);
+      this.#heading = next;
+    }
+
     setIconPath(this.#icon, this.icon);
     this.#tile.hidden = !this.icon;
     this.#heading.textContent = this.heading;