@timmo001/groundwork-ui 0.9.8 → 0.9.10

package/custom-elements.json

@@ -629,7 +629,7 @@
         {
           "kind": "variable",
           "name": "fieldStyles",
-          "default": "css` :where(gw-input, gw-select, gw-switch, gw-checkbox) { display: flex; flex-direction: column; gap: var(--gw-space-2); font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } :where(gw-input, gw-select) .gw-field-heading { display: flex; gap: var(--gw-space-1); align-items: center; } :where(gw-input, gw-select) .gw-field-heading > label { font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } /* The (i) button by the label that opens a field's longer help */ :where(gw-input, gw-select) .gw-info { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } :where(gw-input, gw-select) .gw-info:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } :where(gw-input, gw-select) .gw-info:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) .gw-info[hidden] { display: none; } :where(gw-input, gw-select) .gw-info > .icon { width: 1rem; height: 1rem; fill: currentColor; } /* Sizes run xs to xl through --gw-field-scale, around 1 for medium, and the control's height follows the theme's density too */ :where(gw-input, gw-select)[size=\"xs\"] { --gw-field-scale: 0.6; } :where(gw-input, gw-select)[size=\"small\"] { --gw-field-scale: 0.8; } :where(gw-input, gw-select)[size=\"large\"] { --gw-field-scale: 1.2; } :where(gw-input, gw-select)[size=\"xl\"] { --gw-field-scale: 1.4; } :where(gw-input, gw-select) :where(input, .gw-select-trigger) { --gw-field-size: var(--gw-field-scale, 1); --gw-icon-size: calc( 1.25rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); width: 100%; min-height: calc( 2.5rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); padding: 0 calc(var(--gw-space-3) * var(--gw-field-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-field-size)); color: var(--gw-color-text-strong); background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } /* The trigger shows the chosen option, with its icon, and a chevron with room around it that turns over while the list is open */ gw-select .gw-select-trigger { display: flex; gap: calc(var(--gw-space-2) * var(--gw-field-size)); align-items: center; padding-inline-end: calc(var(--gw-space-3) * var(--gw-field-size)); text-align: start; cursor: pointer; } gw-select .gw-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* With an inline label the select sits among toolbar controls, so it's a pill that fits its content, like the toggles and buttons beside it */ gw-select[inline-label] { display: inline-flex; } gw-select[inline-label] .gw-select-trigger { width: auto; padding-inline: calc(var(--gw-space-4) * var(--gw-field-size)) calc(var(--gw-space-3) * var(--gw-field-size)); border-radius: var(--gw-radius-pill); } /* An inline label reads as a quiet prefix to the value */ gw-select .gw-select-inline-label { flex: none; color: var(--gw-color-text-secondary); } gw-select .gw-select-inline-label[hidden] { display: none; } gw-select .gw-select-value[data-placeholder] { color: var(--gw-color-text-secondary); } gw-select .gw-select-trigger > .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } gw-select .gw-select-trigger > .icon:last-child { color: var(--gw-color-text-secondary); transition: rotate var(--gw-motion-normal) var(--gw-motion-easing); } gw-select[open] .gw-select-trigger > .icon:last-child { rotate: 180deg; } gw-select .gw-select-trigger > .icon[hidden] { display: none; } /* The list opens under the trigger, growing from it, or as a bottom sheet sliding up on phones */ gw-select .gw-select-popup { position: fixed; inset: unset; box-sizing: border-box; max-width: calc(100vw - 12px); padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 1 0.96; transform-origin: top; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } gw-select .gw-select-popup[data-placement=\"above\"] { transform-origin: bottom; } gw-select .gw-select-popup:popover-open { opacity: 1; scale: 1; } @starting-style { gw-select .gw-select-popup:popover-open { opacity: 0; scale: 1 0.96; } } gw-select .gw-select-popup[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } gw-select .gw-select-popup[data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } /* With multiple, a full-width Clear under the list empties the choice */ gw-select .gw-select-clear { display: block; width: 100%; min-height: 2.5rem; padding: 0 var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-select .gw-select-clear:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-select .gw-select-clear:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-select .gw-select-clear[hidden] { display: none; } :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, .gw-select-trigger):focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) [aria-invalid=\"true\"] { border-color: var(--gw-color-border-danger); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-error { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-danger); } :where(gw-switch, gw-checkbox) > label { display: inline-flex; gap: var(--gw-space-3); align-items: center; font-size: var(--gw-font-size-s); cursor: pointer; } :where(gw-switch, gw-checkbox, gw-select) .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } gw-checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--gw-color-fill-accent-resting); } gw-switch input { position: relative; flex: none; width: 2.5rem; height: 1.5rem; margin: 0; cursor: pointer; appearance: none; background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-loud); border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input::after { position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; width: 1rem; height: 1rem; content: \"\"; background: var(--gw-color-text-secondary); border-radius: 50%; transition: translate var(--gw-motion-normal) var(--gw-motion-easing), background-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input:checked { background: var(--gw-color-fill-accent-resting); border-color: transparent; } gw-switch input:checked::after { translate: 1rem 0; background: var(--gw-color-on-accent); } gw-switch input:disabled { opacity: 0.5; } `",
+          "default": "css` :where(gw-input, gw-select, gw-switch, gw-checkbox) { display: flex; flex-direction: column; gap: var(--gw-space-2); font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } :where(gw-input, gw-select) .gw-field-heading { display: flex; gap: var(--gw-space-1); align-items: center; } :where(gw-input, gw-select) .gw-field-heading > label { font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } /* The (i) button by the label that opens a field's longer help */ :where(gw-input, gw-select) .gw-info { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } :where(gw-input, gw-select) .gw-info:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } :where(gw-input, gw-select) .gw-info:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) .gw-info[hidden] { display: none; } :where(gw-input, gw-select) .gw-info > .icon { width: 1rem; height: 1rem; fill: currentColor; } /* Sizes run xs to xl through --gw-field-scale, around 1 for medium, and the control's height follows the theme's density too */ :where(gw-input, gw-select)[size=\"xs\"] { --gw-field-scale: 0.6; } :where(gw-input, gw-select)[size=\"small\"] { --gw-field-scale: 0.8; } :where(gw-input, gw-select)[size=\"large\"] { --gw-field-scale: 1.2; } :where(gw-input, gw-select)[size=\"xl\"] { --gw-field-scale: 1.4; } :where(gw-input, gw-select) :where(input, .gw-select-trigger) { --gw-field-size: var(--gw-field-scale, 1); --gw-icon-size: calc( 1.25rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); width: 100%; min-height: calc( 2.5rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); padding: 0 calc(var(--gw-space-3) * var(--gw-field-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-field-size)); color: var(--gw-color-text-strong); background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } /* An icon inside the field, before the text, with the text moved clear of it */ gw-input .gw-input-control { position: relative; display: flex; align-items: center; } gw-input .gw-input-control > .icon { position: absolute; inset-inline-start: calc(var(--gw-space-3) * var(--gw-field-scale, 1)); width: calc(1.125rem * var(--gw-field-scale, 1)); height: calc(1.125rem * var(--gw-field-scale, 1)); color: var(--gw-color-text-secondary); pointer-events: none; fill: currentColor; } gw-input .gw-input-control > .icon[hidden] { display: none; } gw-input .gw-input-control > .icon:not([hidden]) + input { padding-inline-start: calc( (var(--gw-space-3) * 2 + 1.125rem) * var(--gw-field-scale, 1) ); } /* The trigger shows the chosen option, with its icon, and a chevron with room around it that turns over while the list is open */ gw-select .gw-select-trigger { display: flex; gap: calc(var(--gw-space-2) * var(--gw-field-size)); align-items: center; padding-inline-end: calc(var(--gw-space-3) * var(--gw-field-size)); text-align: start; cursor: pointer; } gw-select .gw-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* With an inline label the select sits among toolbar controls, so it's a pill that fits its content, like the toggles and buttons beside it */ gw-select[inline-label] { display: inline-flex; } gw-select[inline-label] .gw-select-trigger { width: auto; padding-inline: calc(var(--gw-space-4) * var(--gw-field-size)) calc(var(--gw-space-3) * var(--gw-field-size)); border-radius: var(--gw-radius-pill); } /* An inline label reads as a quiet prefix to the value */ gw-select .gw-select-inline-label { flex: none; color: var(--gw-color-text-secondary); } gw-select .gw-select-inline-label[hidden] { display: none; } gw-select .gw-select-value[data-placeholder] { color: var(--gw-color-text-secondary); } gw-select .gw-select-trigger > .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } gw-select .gw-select-trigger > .icon:last-child { color: var(--gw-color-text-secondary); transition: rotate var(--gw-motion-normal) var(--gw-motion-easing); } gw-select[open] .gw-select-trigger > .icon:last-child { rotate: 180deg; } gw-select .gw-select-trigger > .icon[hidden] { display: none; } /* The list opens under the trigger, growing from it, or as a bottom sheet sliding up on phones */ gw-select .gw-select-popup { position: fixed; inset: unset; box-sizing: border-box; max-width: calc(100vw - 12px); padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 1 0.96; transform-origin: top; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } gw-select .gw-select-popup[data-placement=\"above\"] { transform-origin: bottom; } gw-select .gw-select-popup:popover-open { opacity: 1; scale: 1; } @starting-style { gw-select .gw-select-popup:popover-open { opacity: 0; scale: 1 0.96; } } gw-select .gw-select-popup[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } gw-select .gw-select-popup[data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } /* With multiple, a full-width Clear under the list empties the choice */ gw-select .gw-select-clear { display: block; width: 100%; min-height: 2.5rem; padding: 0 var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-select .gw-select-clear:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-select .gw-select-clear:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-select .gw-select-clear[hidden] { display: none; } :where(gw-input) .gw-input-control:focus-within > .icon { color: var(--gw-color-text-strong); } :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, .gw-select-trigger):focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) [aria-invalid=\"true\"] { border-color: var(--gw-color-border-danger); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-error { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-danger); } :where(gw-switch, gw-checkbox) > label { display: inline-flex; gap: var(--gw-space-3); align-items: center; font-size: var(--gw-font-size-s); cursor: pointer; } :where(gw-input, gw-switch, gw-checkbox, gw-select) .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } gw-checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--gw-color-fill-accent-resting); } gw-switch input { position: relative; flex: none; width: 2.5rem; height: 1.5rem; margin: 0; cursor: pointer; appearance: none; background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-loud); border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input::after { position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; width: 1rem; height: 1rem; content: \"\"; background: var(--gw-color-text-secondary); border-radius: 50%; transition: translate var(--gw-motion-normal) var(--gw-motion-easing), background-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input:checked { background: var(--gw-color-fill-accent-resting); border-color: transparent; } gw-switch input:checked::after { translate: 1rem 0; background: var(--gw-color-on-accent); } gw-switch input:disabled { opacity: 0.5; } `",
           "description": "Field components render their native control in light DOM, never in a\nshadow root: password managers and `<label for>` can't reach across one,\nand a form only submits controls it can see. Their styles are adopted into\nwhichever document or shadow root they sit in."
         },
         {
@@ -9771,7 +9771,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, disabled: { type: \"boolean\" }, size: { reflect: true }, }",
+              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, disabled: { type: \"boolean\" }, size: { reflect: true }, icon: {}, hideLabel: { type: \"boolean\", attribute: \"hide-label\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -9874,12 +9874,36 @@
               },
               "default": "\"medium\""
             },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "description": "SVG path data for an icon inside the field, before the text.",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Keeps the label as the accessible name without showing it.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "#id",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#icon",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#label",
@@ -10320,6 +10344,20 @@
               },
               "description": "The field's size, 40px tall at medium. Defaults to `medium`.",
               "name": "size"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "SVG path data for an icon inside the field, before the text, such as a magnifier on a search.",
+              "name": "icon"
+            },
+            {
+              "type": {
+                "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"
             }
           ],
           "superclass": {
@@ -16524,23 +16562,64 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/gw-skeleton.ts",
+      "path": "src/gw-sheet.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A placeholder for what's loading, sized by its container or by `width`\nand `height` in CSS. The shapes below extend it, and components with a\n`loading` attribute draw their own from them, so a spinner is only needed\nfor an action in progress. It's hidden from assistive technology, so mark\nthe region it sits in `aria-busy`.",
-          "name": "GwSkeleton",
+          "description": "A panel of filters, settings or details that slides in from an edge of the\nscreen over the page, rather than taking a place in its layout. With\n`side=\"auto\"` it comes from the start edge, full height, and from the\nbottom on narrow screens.\n\nIt's on the Popover API, in the top layer, and closes on Esc, a click\noutside or its close button, whose chevron points the way it leaves. Open\nit with `show()`, or `toggle()` from the button that opens it. Its content\nscrolls under a header with the heading and an `actions` slot, such as a\nClear button.",
+          "name": "GwSheet",
           "cssProperties": [
             {
-              "description": "The fill. Defaults to the neutral fill.",
-              "name": "--gw-skeleton-color"
+              "description": "Its width from the start or end edge. Defaults to `20rem`.",
+              "name": "--gw-sheet-width"
             },
             {
-              "description": "The corners. Defaults to the control radius.",
-              "name": "--gw-skeleton-radius"
+              "description": "Its greatest height from the bottom. Defaults to `85vh`.",
+              "name": "--gw-sheet-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The sheet's surface.",
+              "name": "surface"
+            },
+            {
+              "description": "The row with the close button, heading and actions.",
+              "name": "header"
+            },
+            {
+              "description": "The heading.",
+              "name": "heading"
+            },
+            {
+              "description": "The content.",
+              "name": "body"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The content, which scrolls.",
+              "name": ""
+            },
+            {
+              "description": "Buttons in the header, after the heading.",
+              "name": "actions"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "Properties"
+              },
+              "static": true,
+              "default": "{ heading: {}, side: { reflect: true }, }",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "styles",
@@ -16548,7 +16627,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; min-height: 1rem; background: var( --gw-skeleton-color, var(--gw-color-fill-neutral-resting) ); border-radius: var(--gw-skeleton-radius, var(--gw-radius-control)); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.45; } } @media (forced-colors: active) { :host { background: GrayText; } } `, ]",
+              "default": "[ base, css` [popover] { position: fixed; box-sizing: border-box; flex-direction: column; padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: 0 solid var(--gw-color-border-normal); box-shadow: var(--gw-shadow-l); transition: translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { display: flex; translate: 0 0; } [popover]::backdrop { background: rgb(0 0 0 / 40%); } /* Full height from the start or end edge */ [data-side=\"start\"], [data-side=\"end\"] { inset: 0 auto; width: min(var(--gw-sheet-width, 20rem), 100vw); height: 100%; max-height: none; } [data-side=\"start\"] { inset-inline-start: 0; border-inline-end-width: max(var(--gw-border-width), 1px); translate: -100% 0; } [data-side=\"end\"] { inset-inline-end: 0; border-inline-start-width: max(var(--gw-border-width), 1px); translate: 100% 0; } :host(:dir(rtl)) [data-side=\"start\"] { translate: 100% 0; } :host(:dir(rtl)) [data-side=\"end\"] { translate: -100% 0; } /* Up from the bottom, with room for the phone's home bar */ [data-side=\"bottom\"] { inset: auto 0 0; width: 100%; max-width: none; max-height: var(--gw-sheet-height, 85vh); padding-block-end: env(safe-area-inset-bottom); border-block-start-width: max(var(--gw-border-width), 1px); border-start-start-radius: var(--gw-radius-panel); border-start-end-radius: var(--gw-radius-panel); translate: 0 100%; } @starting-style { [data-side=\"start\"]:popover-open { translate: -100% 0; } [data-side=\"end\"]:popover-open { translate: 100% 0; } [data-side=\"bottom\"]:popover-open { translate: 0 100%; } } header { display: flex; flex: none; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-2) var(--gw-space-3); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-3); min-height: 0; padding: var(--gw-space-4); /* It scrolls down only, so content reaching into its padding never makes it scroll sideways */ overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16556,12 +16635,128 @@
             },
             {
               "kind": "field",
-              "name": "properties",
+              "name": "heading",
               "type": {
-                "text": "Properties"
+                "text": "string"
               },
-              "static": true,
-              "default": "{}",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "side",
+              "type": {
+                "text": "\"auto\" | Side"
+              },
+              "default": "\"auto\""
+            },
+            {
+              "kind": "field",
+              "name": "#heading",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#closeButton",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#surface",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#narrow",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#returnFocus",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "description": "Whether it's open.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "show"
+            },
+            {
+              "kind": "method",
+              "name": "close"
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "description": "Opens it, or closes it if it's open, as the button that opens it would."
+            },
+            {
+              "kind": "method",
+              "name": "#edge",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Side"
+                }
+              },
+              "description": "The edge it comes from now, with `auto` settled by the screen's width."
+            },
+            {
+              "kind": "field",
+              "name": "#place",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#onToggle",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                }
+              ],
+              "description": "Builds the shadow root's content once, on first connection.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "update",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_changed",
+                  "type": {
+                    "text": "ReadonlySet<string>"
+                  }
+                }
+              ],
+              "description": "Sets what the changed properties affect.",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16804,42 +16999,6 @@
                 "module": "src/element.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "create",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_root",
-                  "type": {
-                    "text": "ShadowRoot | HTMLElement"
-                  }
-                }
-              ],
-              "description": "Builds the shadow root's content once, on first connection.",
-              "inheritedFrom": {
-                "name": "GwElement",
-                "module": "src/element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "update",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_changed",
-                  "type": {
-                    "text": "ReadonlySet<string>"
-                  }
-                }
-              ],
-              "description": "Sets what the changed properties affect.",
-              "inheritedFrom": {
-                "name": "GwElement",
-                "module": "src/element.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "#flush",
@@ -16879,17 +17038,419 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "When it closes.",
+              "name": "close"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The heading beside the close button.",
+              "name": "heading"
+            },
+            {
+              "type": {
+                "text": "\"auto\"|\"start\"|\"end\"|\"bottom\""
+              },
+              "description": "The edge it slides in from. `auto` is the start edge, or the bottom on narrow screens. Defaults to `auto`.",
+              "name": "side"
+            }
+          ],
           "superclass": {
             "name": "GwElement",
             "module": "/src/element.js"
           },
-          "tagName": "gw-skeleton",
+          "tagName": "gw-sheet",
           "customElement": true,
-          "summary": "A pulsing placeholder for what's loading."
-        },
+          "summary": "A panel that slides in from an edge of the screen."
+        }
+      ],
+      "exports": [
         {
-          "kind": "class",
-          "description": "A line of text. Its height follows the font size around it, so it lines up\nwith the text it stands in for.",
+          "kind": "js",
+          "name": "GwSheet",
+          "declaration": {
+            "name": "GwSheet",
+            "module": "src/gw-sheet.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/gw-skeleton.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A placeholder for what's loading, sized by its container or by `width`\nand `height` in CSS. The shapes below extend it, and components with a\n`loading` attribute draw their own from them, so a spinner is only needed\nfor an action in progress. It's hidden from assistive technology, so mark\nthe region it sits in `aria-busy`.",
+          "name": "GwSkeleton",
+          "cssProperties": [
+            {
+              "description": "The fill. Defaults to the neutral fill.",
+              "name": "--gw-skeleton-color"
+            },
+            {
+              "description": "The corners. Defaults to the control radius.",
+              "name": "--gw-skeleton-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "readonly CSSStyleSheet[]"
+              },
+              "static": true,
+              "default": "[ base, css` :host { display: block; min-height: 1rem; background: var( --gw-skeleton-color, var(--gw-color-fill-neutral-resting) ); border-radius: var(--gw-skeleton-radius, var(--gw-radius-control)); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.45; } } @media (forced-colors: active) { :host { background: GrayText; } } `, ]",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "properties",
+              "type": {
+                "text": "Properties"
+              },
+              "static": true,
+              "default": "{}",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadow",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true",
+              "description": "Whether to attach a shadow root. Light DOM elements set this false.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ mode: \"open\" }",
+              "description": "How the shadow root is attached.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Adds the property accessors, then defines the element.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#values",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<string, PropertyValue>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#defaults",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<string, PropertyValue>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#changed",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#unreflected",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#created",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#queued",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#pending",
+              "privacy": "private",
+              "type": {
+                "text": "Promise<void> | undefined"
+              },
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#reflecting",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#resolveUpdated",
+              "privacy": "private",
+              "type": {
+                "text": "() => void"
+              },
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#updated",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Promise<void>((resolve) => { this.#resolveUpdated = resolve; })",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderRoot",
+              "type": {
+                "text": "ShadowRoot | HTMLElement"
+              },
+              "readonly": true,
+              "description": "The shadow root, or the element itself for a light DOM element.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#own",
+              "privacy": "private",
+              "type": {
+                "text": "typeof GwElement"
+              },
+              "readonly": true,
+              "description": "The element's own class, for its static properties and styles.",
+              "default": "new.target",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "updateComplete",
+              "description": "Resolves once the pending update has run, or the first one before it connects.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "defaultOf",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The value a property returns to when its attribute is removed. Defaults\nto the value it was given in the constructor.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "requestUpdate",
+              "parameters": [
+                {
+                  "name": "names",
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                }
+              ],
+              "description": "Asks for an update with the given properties marked as changed.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_root",
+                  "type": {
+                    "text": "ShadowRoot | HTMLElement"
+                  }
+                }
+              ],
+              "description": "Builds the shadow root's content once, on first connection.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "update",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_changed",
+                  "type": {
+                    "text": "ReadonlySet<string>"
+                  }
+                }
+              ],
+              "description": "Sets what the changed properties affect.",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#flush",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#setProperty",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "PropertyOptions"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "PropertyValue"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "GwElement",
+                "module": "src/element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "GwElement",
+            "module": "/src/element.js"
+          },
+          "tagName": "gw-skeleton",
+          "customElement": true,
+          "summary": "A pulsing placeholder for what's loading."
+        },
+        {
+          "kind": "class",
+          "description": "A line of text. Its height follows the font size around it, so it lines up\nwith the text it stands in for.",
           "name": "GwSkeletonText",
           "cssProperties": [
             {
@@ -20333,6 +20894,14 @@
             "module": "src/gw-setting-row.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/gw-sheet.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",

package/package.json

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

package/src/events.ts

@@ -35,6 +35,9 @@ export interface GwEventMap {
   "gw-select": {
     change: Event;
   };
+  "gw-sheet": {
+    close: Event;
+  };
   "gw-theme-gallery": {
     theme: CustomEvent<{ id: string }>;
   };

package/src/fields.ts

@@ -108,6 +108,34 @@ export const fieldStyles = css`
     transition: border-color var(--gw-motion-fast) var(--gw-motion-easing);
   }
 
+  /* An icon inside the field, before the text, with the text moved clear of
+     it */
+  gw-input .gw-input-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  gw-input .gw-input-control > .icon {
+    position: absolute;
+    inset-inline-start: calc(var(--gw-space-3) * var(--gw-field-scale, 1));
+    width: calc(1.125rem * var(--gw-field-scale, 1));
+    height: calc(1.125rem * var(--gw-field-scale, 1));
+    color: var(--gw-color-text-secondary);
+    pointer-events: none;
+    fill: currentColor;
+  }
+
+  gw-input .gw-input-control > .icon[hidden] {
+    display: none;
+  }
+
+  gw-input .gw-input-control > .icon:not([hidden]) + input {
+    padding-inline-start: calc(
+      (var(--gw-space-3) * 2 + 1.125rem) * var(--gw-field-scale, 1)
+    );
+  }
+
   /* The trigger shows the chosen option, with its icon, and a chevron with
      room around it that turns over while the list is open */
   gw-select .gw-select-trigger {
@@ -276,6 +304,10 @@ export const fieldStyles = css`
     display: none;
   }
 
+  :where(gw-input) .gw-input-control:focus-within > .icon {
+    color: var(--gw-color-text-strong);
+  }
+
   :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover {
     border-color: var(--gw-color-border-loud);
   }
@@ -315,7 +347,7 @@ export const fieldStyles = css`
     cursor: pointer;
   }
 
-  :where(gw-switch, gw-checkbox, gw-select) .gw-visually-hidden {
+  :where(gw-input, gw-switch, gw-checkbox, gw-select) .gw-visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;

package/src/gw-input.ts

@@ -5,6 +5,7 @@
  * @module
  */
 import { h, setAttribute } from "./element.js";
+import { createIcon, setIconPath } from "./styles.js";
 import { FieldInfo } from "./field-info.js";
 import { LightElement, fieldId } from "./fields.js";
 
@@ -26,6 +27,8 @@ import { LightElement, fieldId } from "./fields.js";
  * @attr {boolean} required - Requires a value.
  * @attr {boolean} disabled - Disables the field.
  * @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.
  *
  * @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.
@@ -44,6 +47,8 @@ export class GwInput extends LightElement {
     required: { type: "boolean" },
     disabled: { type: "boolean" },
     size: { reflect: true },
+    icon: {},
+    hideLabel: { type: "boolean", attribute: "hide-label", reflect: true },
   } as const;
 
   declare label: string;
@@ -59,9 +64,15 @@ export class GwInput extends LightElement {
   declare required: boolean;
   declare disabled: boolean;
   declare size: "xs" | "small" | "medium" | "large" | "xl";
+  /** 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;
 
   readonly #id = fieldId();
 
+  readonly #icon = createIcon("");
+
   readonly #label = h("label", { for: this.#id });
 
   readonly #info = new FieldInfo(this.#label);
@@ -86,13 +97,20 @@ export class GwInput extends LightElement {
     this.required = false;
     this.disabled = false;
     this.size = "medium";
+    this.icon = "";
+    this.hideLabel = false;
   }
 
   protected override create(root: HTMLElement) {
     this.#input.addEventListener("input", () => {
       this.value = this.#input.value;
     });
-    root.append(this.#info.heading, this.#input, this.#hint, this.#error);
+    root.append(
+      this.#info.heading,
+      h("span", { class: "gw-input-control" }, this.#icon, this.#input),
+      this.#hint,
+      this.#error,
+    );
   }
 
   protected override update() {
@@ -107,6 +125,9 @@ export class GwInput extends LightElement {
 
     this.#label.textContent = this.label;
     this.#info.update(this.label, this.info);
+    this.#info.heading.classList.toggle("gw-visually-hidden", this.hideLabel);
+    setIconPath(this.#icon, this.icon);
+    this.#icon.toggleAttribute("hidden", !this.icon);
     input.type = this.type;
     setAttribute(input, "name", this.name || null);
     setAttribute(input, "placeholder", this.placeholder || null);

package/src/gw-sheet.ts

@@ -0,0 +1,307 @@
+/**
+ * `gw-sheet`: a panel that slides in from an edge of the screen.
+ * Docs: https://groundwork.timmo.dev/components/overlays/#sheet
+ *
+ * @module
+ */
+import { GwElement, css, h, setAttribute } from "./element.js";
+import "./gw-button.js";
+import { base } from "./styles.js";
+
+// MDI's chevrons, pointing the way the sheet leaves when it closes
+const chevrons = {
+  start: "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z",
+  end: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
+  bottom: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
+} as const;
+
+type Side = keyof typeof chevrons;
+
+/** Below this width, `side="auto"` slides up from the bottom. */
+const narrow = "(width < 40rem)";
+
+/**
+ * A panel of filters, settings or details that slides in from an edge of the
+ * screen over the page, rather than taking a place in its layout. With
+ * `side="auto"` it comes from the start edge, full height, and from the
+ * bottom on narrow screens.
+ *
+ * It's on the Popover API, in the top layer, and closes on Esc, a click
+ * outside or its close button, whose chevron points the way it leaves. Open
+ * it with `show()`, or `toggle()` from the button that opens it. Its content
+ * scrolls under a header with the heading and an `actions` slot, such as a
+ * Clear button.
+ *
+ * @element gw-sheet
+ * @summary A panel that slides in from an edge of the screen.
+ *
+ * @attr {string} heading - The heading beside the close button.
+ * @attr {"auto"|"start"|"end"|"bottom"} side - The edge it slides in from. `auto` is the start edge, or the bottom on narrow screens. Defaults to `auto`.
+ *
+ * @slot - The content, which scrolls.
+ * @slot actions - Buttons in the header, after the heading.
+ *
+ * @csspart surface - The sheet's surface.
+ * @csspart header - The row with the close button, heading and actions.
+ * @csspart heading - The heading.
+ * @csspart body - The content.
+ *
+ * @cssprop --gw-sheet-width - Its width from the start or end edge. Defaults to `20rem`.
+ * @cssprop --gw-sheet-height - Its greatest height from the bottom. Defaults to `85vh`.
+ *
+ * @fires {Event} close - When it closes.
+ */
+export class GwSheet extends GwElement {
+  static override properties = {
+    heading: {},
+    side: { reflect: true },
+  } as const;
+
+  static override styles = [
+    base,
+    css`
+      [popover] {
+        position: fixed;
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        color: var(--gw-color-text-primary);
+        background: var(--gw-color-surface-overlay);
+        border: 0 solid var(--gw-color-border-normal);
+        box-shadow: var(--gw-shadow-l);
+        transition:
+          translate var(--gw-motion-normal) var(--gw-motion-easing),
+          display var(--gw-motion-normal) allow-discrete,
+          overlay var(--gw-motion-normal) allow-discrete;
+      }
+
+      [popover]:popover-open {
+        display: flex;
+        translate: 0 0;
+      }
+
+      [popover]::backdrop {
+        background: rgb(0 0 0 / 40%);
+      }
+
+      /* Full height from the start or end edge */
+      [data-side="start"],
+      [data-side="end"] {
+        inset: 0 auto;
+        width: min(var(--gw-sheet-width, 20rem), 100vw);
+        height: 100%;
+        max-height: none;
+      }
+
+      [data-side="start"] {
+        inset-inline-start: 0;
+        border-inline-end-width: max(var(--gw-border-width), 1px);
+        translate: -100% 0;
+      }
+
+      [data-side="end"] {
+        inset-inline-end: 0;
+        border-inline-start-width: max(var(--gw-border-width), 1px);
+        translate: 100% 0;
+      }
+
+      :host(:dir(rtl)) [data-side="start"] {
+        translate: 100% 0;
+      }
+
+      :host(:dir(rtl)) [data-side="end"] {
+        translate: -100% 0;
+      }
+
+      /* Up from the bottom, with room for the phone's home bar */
+      [data-side="bottom"] {
+        inset: auto 0 0;
+        width: 100%;
+        max-width: none;
+        max-height: var(--gw-sheet-height, 85vh);
+        padding-block-end: env(safe-area-inset-bottom);
+        border-block-start-width: max(var(--gw-border-width), 1px);
+        border-start-start-radius: var(--gw-radius-panel);
+        border-start-end-radius: var(--gw-radius-panel);
+        translate: 0 100%;
+      }
+
+      @starting-style {
+        [data-side="start"]:popover-open {
+          translate: -100% 0;
+        }
+
+        [data-side="end"]:popover-open {
+          translate: 100% 0;
+        }
+
+        [data-side="bottom"]:popover-open {
+          translate: 0 100%;
+        }
+      }
+
+      header {
+        display: flex;
+        flex: none;
+        gap: var(--gw-space-2);
+        align-items: center;
+        padding: var(--gw-space-2) var(--gw-space-3);
+        border-block-end: var(--gw-border-width) solid
+          var(--gw-color-border-quiet);
+      }
+
+      h2 {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        font-size: var(--gw-font-size-m);
+        font-weight: var(--gw-font-weight-strong);
+        color: var(--gw-color-text-strong);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--gw-space-3);
+        min-height: 0;
+        padding: var(--gw-space-4);
+        /* It scrolls down only, so content reaching into its padding never
+           makes it scroll sideways */
+        overflow: hidden auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+      }
+    `,
+  ];
+
+  declare heading: string;
+  declare side: "auto" | Side;
+
+  readonly #heading = h("h2", { id: "heading", part: "heading" });
+
+  readonly #closeButton = h(
+    "gw-button",
+    {
+      variant: "neutral",
+      appearance: "plain",
+      size: "small",
+      labels: "hide",
+    },
+    "Close",
+  );
+
+  readonly #surface: HTMLDivElement = h(
+    "div",
+    {
+      popover: "auto",
+      role: "dialog",
+      tabindex: "-1",
+      part: "surface",
+    },
+    h(
+      "header",
+      { part: "header" },
+      this.#closeButton,
+      this.#heading,
+      h("slot", { name: "actions" }),
+    ),
+    h("div", { class: "body", part: "body" }, h("slot")),
+  );
+
+  readonly #narrow = window.matchMedia(narrow);
+
+  // Where focus was before it opened, to go back to when it closes
+  #returnFocus: HTMLElement | undefined;
+
+  constructor() {
+    super();
+    this.heading = "";
+    this.side = "auto";
+  }
+
+  /** Whether it's open. */
+  get open() {
+    return this.#surface.matches(":popover-open");
+  }
+
+  show() {
+    if (this.open) return;
+
+    const active = document.activeElement;
+
+    this.#returnFocus = active instanceof HTMLElement ? active : undefined;
+    this.#place();
+    this.#surface.showPopover();
+  }
+
+  close() {
+    if (this.open) this.#surface.hidePopover();
+  }
+
+  /** Opens it, or closes it if it's open, as the button that opens it would. */
+  toggle() {
+    if (this.open) this.close();
+    else this.show();
+  }
+
+  /** The edge it comes from now, with `auto` settled by the screen's width. */
+  #edge(): Side {
+    if (this.side !== "auto") return this.side;
+
+    return this.#narrow.matches ? "bottom" : "start";
+  }
+
+  readonly #place = () => {
+    const edge = this.#edge();
+
+    this.#surface.dataset.side = edge;
+    this.#closeButton.icon = chevrons[edge];
+  };
+
+  readonly #onToggle = (event: ToggleEvent) => {
+    if (event.newState === "open") {
+      this.#narrow.addEventListener("change", this.#place);
+      this.#closeButton.focus();
+
+      return;
+    }
+
+    this.#narrow.removeEventListener("change", this.#place);
+    this.#returnFocus?.focus();
+    this.#returnFocus = undefined;
+    this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+  };
+
+  override disconnectedCallback() {
+    this.#narrow.removeEventListener("change", this.#place);
+    super.disconnectedCallback();
+  }
+
+  protected override create(root: ShadowRoot) {
+    this.#surface.addEventListener("toggle", this.#onToggle);
+    this.#closeButton.addEventListener("click", () => this.close());
+    root.append(this.#surface);
+  }
+
+  protected override update() {
+    this.#heading.textContent = this.heading;
+    setAttribute(
+      this.#surface,
+      "aria-labelledby",
+      this.heading ? "heading" : null,
+    );
+    this.#heading.hidden = !this.heading;
+    this.#place();
+  }
+}
+
+GwSheet.define("gw-sheet");
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "gw-sheet": GwSheet;
+  }
+}

package/src/index.ts

@@ -73,6 +73,8 @@ export * from "./gw-select.js";
 
 export * from "./gw-setting-row.js";
 
+export * from "./gw-sheet.js";
+
 export * from "./gw-skeleton.js";
 
 export * from "./gw-spinner.js";