@timmo001/groundwork-ui 0.7.0 → 0.9.0

package/custom-elements.json

@@ -3103,7 +3103,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: {}, 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 }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3130,7 +3130,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; } .lead > * { grid-area: 1 / 1; } .lead > *, .text, .ring { transition: opacity var(--gw-motion-normal) cubic-bezier(0.4, 0, 0.2, 1); } /* Sized to the icon's drawn area, which is inset in its 24px box */ .ring { width: calc(var(--gw-icon-size) * 0.8); height: calc(var(--gw-icon-size) * 0.8); border: calc(2px * var(--gw-scale)) solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Without an icon, the ring sits over the hidden text */ .ring.over { position: absolute; inset: 0; margin: auto; } :host([loading]) .button { cursor: progress; } :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; } .button:not(.has-icon) > .lead { display: none; } /* Icon only, to save space: square, with the text kept for assistive technology. auto does this on narrow screens */ :host([labels=\"hide\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"auto\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } `, ]",
+              "default": "[ base, 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; } :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; } .button:not(.has-icon) > .lead { display: none; } /* Icon only, to save space: square, with the text kept for assistive technology. auto does this on narrow screens */ :host([labels=\"hide\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"auto\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3210,6 +3210,15 @@
               "description": "SVG path data for an icon before the text.",
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "swatch",
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS color, drawn as a small round dot in the icon's place.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "labels",
@@ -3231,6 +3240,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#swatch",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#lead",
@@ -3630,6 +3645,13 @@
               "description": "SVG path data for an icon before the text.",
               "name": "icon"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS color, drawn as a small round dot in the icon's place, such as a tag's own color.",
+              "name": "swatch"
+            },
             {
               "type": {
                 "text": "\"show\"|\"hide\"|\"auto\""
@@ -5344,7 +5366,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ tone: { reflect: true }, icon: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
+              "default": "{ tone: { reflect: true }, icon: {}, swatch: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -5357,7 +5379,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, controlSizes(\"chip\"), css` :host { display: inline-flex; } /* 32px at medium, with 12px padding */ .chip { --gw-size: var(--gw-chip-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1rem * var(--gw-scale)); display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-3) * var(--gw-size)); font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-xs) * var(--gw-size)) ); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); background: var(--gw-tone-fill, var(--gw-color-fill-neutral-resting)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-quiet)); border-radius: var(--gw-radius-chip); } .content { display: inline-flex; gap: inherit; align-items: center; } `, ]",
+              "default": "[ base, controlSizes(\"chip\"), css` :host { display: inline-flex; } /* 32px at medium, with 12px padding */ .chip { --gw-size: var(--gw-chip-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1rem * var(--gw-scale)); display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-3) * var(--gw-size)); font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-xs) * var(--gw-size)) ); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); background: var(--gw-tone-fill, var(--gw-color-fill-neutral-resting)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-quiet)); border-radius: var(--gw-radius-chip); } .content { display: inline-flex; gap: inherit; align-items: center; } /* A color dot in the icon's place */ .swatch { flex: none; 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%; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -5380,6 +5402,15 @@
               "description": "SVG path data for an icon before the text, instead of the `icon` slot.",
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "swatch",
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS color, drawn as a small round dot in the icon's place.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "loading",
@@ -5402,6 +5433,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#swatch",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#chip",
@@ -5747,6 +5784,13 @@
               "description": "SVG path data for an icon before the text.",
               "name": "icon"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS color, drawn as a small round dot in the icon's place, such as a tag's own color.",
+              "name": "swatch"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -20249,7 +20293,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .page { display: flex; flex-direction: column; gap: var(--gw-space-6); width: 100%; max-width: var(--gw-content-width); margin-inline: auto; } :host([narrow]) .page { max-width: var(--gw-content-width-narrow); } `, ]",
+              "default": "[ base, css` :host { display: block; } .page { display: flex; flex-direction: column; gap: var(--gw-space-6); /* The same box as gw-app-bar's content, so the two line up */ width: min(100% - 2 * var(--gw-space-3), var(--gw-content-width)); margin-inline: auto; } :host([narrow]) .page { width: min( 100% - 2 * var(--gw-space-3), var(--gw-content-width-narrow) ); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -21345,13 +21389,17 @@
         },
         {
           "kind": "class",
-          "description": "Fills as many columns as fit, each at least `--gw-grid-min` wide.",
+          "description": "Fills as many columns as fit, each at least `--gw-grid-min` wide, and at\nmost `max` of them when it's set.",
           "name": "GwGrid",
           "cssProperties": [
             {
               "description": "The narrowest a column gets. Defaults to `18rem`.",
               "name": "--gw-grid-min"
             },
+            {
+              "description": "The most columns it shows, as a number. Unset by default, so as many fit as the width allows.",
+              "name": "--gw-grid-max"
+            },
             {
               "description": "The gap. Defaults to `--gw-space-3`.",
               "name": "--gw-gap"
@@ -21371,7 +21419,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, gaps, css` :host { display: grid; grid-template-columns: repeat( auto-fill, minmax(min(100%, var(--gw-grid-min, 18rem)), 1fr) ); gap: var(--gw-gap, var(--gw-space-3)); } `, ]",
+              "default": "[ base, gaps, css` :host { /* A column's width at the cap. Invalid while --gw-grid-max is unset, so the var() below falls back to 0px and the cap does nothing */ --_gw-grid-cap: calc( (100% - (var(--gw-grid-max) - 1) * var(--gw-gap, var(--gw-space-3))) / var(--gw-grid-max) ); display: grid; grid-template-columns: repeat( auto-fill, minmax( min(100%, max(var(--gw-grid-min, 18rem), var(--_gw-grid-cap, 0px))), 1fr ) ); gap: var(--gw-gap, var(--gw-space-3)); } :host([max=\"2\"]) { --gw-grid-max: 2; } :host([max=\"3\"]) { --gw-grid-max: 3; } :host([max=\"4\"]) { --gw-grid-max: 4; } :host([max=\"5\"]) { --gw-grid-max: 5; } :host([max=\"6\"]) { --gw-grid-max: 6; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -21709,6 +21757,13 @@
               },
               "description": "A smaller or larger gap.",
               "name": "gap"
+            },
+            {
+              "type": {
+                "text": "\"2\"|\"3\"|\"4\"|\"5\"|\"6\""
+              },
+              "description": "The most columns it shows. Sets `--gw-grid-max`.",
+              "name": "max"
             }
           ],
           "superclass": {
@@ -21988,7 +22043,7 @@
         {
           "kind": "variable",
           "name": "base",
-          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
+          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } :host([hidden]), [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
           "description": "What every component shares: box sizing, the focus ring, icons and the\ntones that set `--gw-tone` from a `tone` attribute."
         },
         {

package/package.json

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

package/src/gw-button.ts

@@ -38,6 +38,7 @@ import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
  * @attr {boolean} disabled - Disables the button.
  * @attr {boolean} loading - Shows a spinning ring in the icon's place and ignores clicks.
  * @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`.
  *
  * @slot - The text, or an `<a>` holding it, in place of `href`.
@@ -61,6 +62,7 @@ export class GwButton extends GwElement {
     disabled: { type: "boolean", reflect: true },
     loading: { type: "boolean", reflect: true },
     icon: {},
+    swatch: {},
     labels: { reflect: true },
   } as const;
 
@@ -242,10 +244,22 @@ export class GwButton extends GwElement {
         place-items: center;
       }
 
-      .lead > * {
+      /* 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 {
@@ -341,6 +355,8 @@ export class GwButton extends GwElement {
   declare loading: boolean;
   /** SVG path data for an icon before the text. */
   declare icon: string;
+  /** A CSS color, drawn as a small round dot in the icon's place. */
+  declare swatch: string;
   /** Whether the text shows beside an icon: always, never, or not on narrow screens. */
   declare labels: "show" | "hide" | "auto";
 
@@ -348,10 +364,13 @@ export class GwButton extends GwElement {
 
   readonly #iconSlot = h("slot", { name: "icon" });
 
+  readonly #swatch = h("span", { class: "swatch", "aria-hidden": "true" });
+
   readonly #lead = h(
     "span",
     { class: "lead" },
     this.#icon,
+    this.#swatch,
     this.#iconSlot,
     h("span", { class: "ring" }),
   );
@@ -376,6 +395,7 @@ export class GwButton extends GwElement {
   constructor() {
     super();
     this.icon = "";
+    this.swatch = "";
     this.labels = "show";
     this.variant = "brand";
     this.appearance = "accent";
@@ -456,7 +476,9 @@ export class GwButton extends GwElement {
     const control = this.#control;
 
     const hasIcon =
-      this.icon !== "" || this.querySelector("[slot='icon']") !== null;
+      this.icon !== "" ||
+      this.swatch !== "" ||
+      this.querySelector("[slot='icon']") !== null;
 
     control.classList.toggle("has-icon", hasIcon);
     control.classList.toggle(
@@ -466,6 +488,8 @@ export class GwButton extends GwElement {
     );
     setIconPath(this.#icon, this.icon);
     this.#icon.style.display = this.icon ? "" : "none";
+    this.#swatch.style.background = this.swatch;
+    this.#swatch.hidden = this.swatch === "" || this.icon !== "";
     setAttribute(
       control,
       "title",

package/src/gw-chip.ts

@@ -24,6 +24,7 @@ import {
  *
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The tint. Defaults to `neutral`.
  * @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 {boolean} loading - Shows a skeleton for the text.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, around 32px tall at medium. Defaults to `medium`.
  *
@@ -41,6 +42,7 @@ export class GwChip extends GwElement {
   static override properties = {
     tone: { reflect: true },
     icon: {},
+    swatch: {},
     loading: { type: "boolean", reflect: true },
     size: { reflect: true },
   } as const;
@@ -82,17 +84,31 @@ export class GwChip extends GwElement {
         gap: inherit;
         align-items: center;
       }
+
+      /* A color dot in the icon's place */
+      .swatch {
+        flex: none;
+        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%;
+      }
     `,
   ];
 
   declare tone: Tone;
   /** SVG path data for an icon before the text, instead of the `icon` slot. */
   declare icon: string;
+  /** A CSS color, drawn as a small round dot in the icon's place. */
+  declare swatch: string;
   declare loading: boolean;
   declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #icon = createIcon("");
 
+  readonly #swatch = h("span", { class: "swatch", "aria-hidden": "true" });
+
   readonly #chip = h("span", { class: "chip", part: "chip" });
 
   readonly #skeleton = h("gw-skeleton-text", {
@@ -102,7 +118,7 @@ export class GwChip extends GwElement {
   readonly #content = h(
     "span",
     { class: "content" },
-    h("slot", { name: "icon" }, this.#icon),
+    h("slot", { name: "icon" }, this.#icon, this.#swatch),
     h("slot"),
   );
 
@@ -110,6 +126,7 @@ export class GwChip extends GwElement {
     super();
     this.tone = "neutral";
     this.icon = "";
+    this.swatch = "";
     this.loading = false;
     this.size = "medium";
   }
@@ -124,6 +141,8 @@ export class GwChip extends GwElement {
 
     setIconPath(this.#icon, this.icon);
     this.#icon.toggleAttribute("hidden", !this.icon);
+    this.#swatch.style.background = this.swatch;
+    this.#swatch.hidden = this.swatch === "" || this.icon !== "";
 
     setAttribute(this.#chip, "aria-busy", this.loading ? "true" : null);
     this.#skeleton.hidden = !this.loading;

package/src/layout.ts

@@ -36,13 +36,16 @@ export class GwPage extends GwElement {
         display: flex;
         flex-direction: column;
         gap: var(--gw-space-6);
-        width: 100%;
-        max-width: var(--gw-content-width);
+        /* The same box as gw-app-bar's content, so the two line up */
+        width: min(100% - 2 * var(--gw-space-3), var(--gw-content-width));
         margin-inline: auto;
       }
 
       :host([narrow]) .page {
-        max-width: var(--gw-content-width-narrow);
+        width: min(
+          100% - 2 * var(--gw-space-3),
+          var(--gw-content-width-narrow)
+        );
       }
     `,
   ];
@@ -135,16 +138,19 @@ export class GwRow extends GwSlotted {
 }
 
 /**
- * Fills as many columns as fit, each at least `--gw-grid-min` wide.
+ * Fills as many columns as fit, each at least `--gw-grid-min` wide, and at
+ * most `max` of them when it's set.
  *
  * @element gw-grid
  * @summary Children in responsive columns.
  *
  * @attr {"s"|"l"} gap - A smaller or larger gap.
+ * @attr {"2"|"3"|"4"|"5"|"6"} max - The most columns it shows. Sets `--gw-grid-max`.
  *
  * @slot - The children.
  *
  * @cssprop --gw-grid-min - The narrowest a column gets. Defaults to `18rem`.
+ * @cssprop --gw-grid-max - The most columns it shows, as a number. Unset by default, so as many fit as the width allows.
  * @cssprop --gw-gap - The gap. Defaults to `--gw-space-3`.
  */
 export class GwGrid extends GwSlotted {
@@ -153,13 +159,42 @@ export class GwGrid extends GwSlotted {
     gaps,
     css`
       :host {
+        /* A column's width at the cap. Invalid while --gw-grid-max is unset,
+           so the var() below falls back to 0px and the cap does nothing */
+        --_gw-grid-cap: calc(
+          (100% - (var(--gw-grid-max) - 1) * var(--gw-gap, var(--gw-space-3))) /
+            var(--gw-grid-max)
+        );
         display: grid;
         grid-template-columns: repeat(
           auto-fill,
-          minmax(min(100%, var(--gw-grid-min, 18rem)), 1fr)
+          minmax(
+            min(100%, max(var(--gw-grid-min, 18rem), var(--_gw-grid-cap, 0px))),
+            1fr
+          )
         );
         gap: var(--gw-gap, var(--gw-space-3));
       }
+
+      :host([max="2"]) {
+        --gw-grid-max: 2;
+      }
+
+      :host([max="3"]) {
+        --gw-grid-max: 3;
+      }
+
+      :host([max="4"]) {
+        --gw-grid-max: 4;
+      }
+
+      :host([max="5"]) {
+        --gw-grid-max: 5;
+      }
+
+      :host([max="6"]) {
+        --gw-grid-max: 6;
+      }
     `,
   ];
 }

package/src/styles.ts

@@ -48,6 +48,7 @@ export const base = css`
     box-sizing: border-box;
   }
 
+  :host([hidden]),
   [hidden] {
     display: none !important;
   }