@timmo001/groundwork-ui 0.9.28 → 0.9.30

package/custom-elements.json

@@ -77,12 +77,43 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#question",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#view",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "text",
+              "parameters": [
+                {
+                  "name": "question",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "keep",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "discard",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets the question and its buttons' text, for an app in another language."
+            },
             {
               "kind": "field",
               "name": "asking",
@@ -629,7 +660,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, textarea, .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) ); } /* A textarea keeps the field's padding on every side and grows by its corner, never sideways out of the layout */ gw-input textarea { display: block; padding-block: calc(var(--gw-space-2) * var(--gw-field-size)); line-height: 1.5; resize: vertical; } gw-input[monospace] :where(input, textarea) { font-family: var(--gw-font-mono); } gw-input .gw-optional { font-weight: var(--gw-font-weight-regular); color: var(--gw-color-text-secondary); } gw-input .gw-optional[hidden] { display: none; } /* The show and hide button sits inside the end of a password field, with the text kept clear of it */ gw-input .gw-reveal { position: absolute; inset-inline-end: calc(var(--gw-space-1) * var(--gw-field-scale, 1)); display: grid; place-items: center; width: calc(2rem * var(--gw-field-scale, 1)); height: calc(2rem * var(--gw-field-scale, 1)); padding: 0; color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-control); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-input .gw-reveal:hover:not(:disabled) { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-input .gw-reveal:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-input .gw-reveal:disabled { cursor: not-allowed; opacity: 0.5; } gw-input .gw-reveal[hidden] { display: none; } gw-input .gw-reveal > .icon { width: calc(1.125rem * var(--gw-field-scale, 1)); height: calc(1.125rem * var(--gw-field-scale, 1)); fill: currentColor; } gw-input .gw-input-control:has(> .gw-reveal:not([hidden])) > input { padding-inline-end: calc( (var(--gw-space-1) + 2rem + var(--gw-space-1)) * 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, textarea, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, textarea, .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; } gw-range { display: flex; flex-direction: column; gap: var(--gw-space-2); min-width: 0; font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } gw-range > label { font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } gw-range .gw-range-row { display: flex; gap: var(--gw-space-3); align-items: center; } gw-range .gw-range-control { position: relative; display: block; flex: 1; min-width: 0; } /* The value beside the track, with readout */ gw-range .gw-range-readout { min-width: 5ch; font-size: var(--gw-font-size-s); font-variant-numeric: tabular-nums; color: var(--gw-color-text-secondary); text-align: end; white-space: nowrap; } gw-range .gw-range-readout[hidden] { display: none; } gw-range input { display: block; width: 100%; margin: 0; accent-color: var(--gw-color-fill-accent-resting); cursor: pointer; } gw-range input:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } gw-range input:disabled { cursor: not-allowed; opacity: 0.5; } /* The value above the thumb while it's held */ gw-range .gw-range-bubble { position: absolute; bottom: calc(100% + var(--gw-space-1)); padding: var(--gw-space-1) var(--gw-space-2); font-size: var(--gw-font-size-xs); font-variant-numeric: tabular-nums; color: var(--gw-color-on-accent); white-space: nowrap; pointer-events: none; background: var(--gw-color-fill-accent-resting); border-radius: var(--gw-radius-control); box-shadow: var(--gw-shadow-s); translate: -50% 0; } gw-range .gw-range-bubble[hidden] { display: none; } gw-range .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } gw-range .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } `",
+          "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, textarea, .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) ); } /* A textarea keeps the field's padding on every side and grows by its corner, never sideways out of the layout */ gw-input textarea { display: block; /* Pill-shaped controls would make a tall box a stadium, so it rounds no more than a panel */ border-radius: min(var(--gw-radius-control), var(--gw-radius-panel)); padding-block: calc(var(--gw-space-2) * var(--gw-field-size)); line-height: 1.5; resize: vertical; } gw-input[monospace] :where(input, textarea) { font-family: var(--gw-font-mono); } gw-input .gw-optional { font-weight: var(--gw-font-weight-regular); color: var(--gw-color-text-secondary); } gw-input .gw-optional[hidden] { display: none; } /* The show and hide button sits inside the end of a password field, with the text kept clear of it */ gw-input .gw-reveal { position: absolute; inset-inline-end: calc(var(--gw-space-1) * var(--gw-field-scale, 1)); display: grid; place-items: center; width: calc(2rem * var(--gw-field-scale, 1)); height: calc(2rem * var(--gw-field-scale, 1)); padding: 0; color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-control); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-input .gw-reveal:hover:not(:disabled) { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-input .gw-reveal:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-input .gw-reveal:disabled { cursor: not-allowed; opacity: 0.5; } gw-input .gw-reveal[hidden] { display: none; } gw-input .gw-reveal > .icon { width: calc(1.125rem * var(--gw-field-scale, 1)); height: calc(1.125rem * var(--gw-field-scale, 1)); fill: currentColor; } gw-input .gw-input-control:has(> .gw-reveal:not([hidden])) > input { padding-inline-end: calc( (var(--gw-space-1) + 2rem + var(--gw-space-1)) * 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, textarea, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, textarea, .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; } gw-range { display: flex; flex-direction: column; gap: var(--gw-space-2); min-width: 0; font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } gw-range > label { font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } gw-range .gw-range-row { display: flex; gap: var(--gw-space-3); align-items: center; } gw-range .gw-range-control { position: relative; display: block; flex: 1; min-width: 0; } /* The value beside the track, with readout */ gw-range .gw-range-readout { min-width: 5ch; font-size: var(--gw-font-size-s); font-variant-numeric: tabular-nums; color: var(--gw-color-text-secondary); text-align: end; white-space: nowrap; } gw-range .gw-range-readout[hidden] { display: none; } gw-range input { display: block; width: 100%; margin: 0; accent-color: var(--gw-color-fill-accent-resting); cursor: pointer; } gw-range input:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } gw-range input:disabled { cursor: not-allowed; opacity: 0.5; } /* The value above the thumb while it's held */ gw-range .gw-range-bubble { position: absolute; bottom: calc(100% + var(--gw-space-1)); padding: var(--gw-space-1) var(--gw-space-2); font-size: var(--gw-font-size-xs); font-variant-numeric: tabular-nums; color: var(--gw-color-on-accent); white-space: nowrap; pointer-events: none; background: var(--gw-color-fill-accent-resting); border-radius: var(--gw-radius-control); box-shadow: var(--gw-shadow-s); translate: -50% 0; } gw-range .gw-range-bubble[hidden] { display: none; } gw-range .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } gw-range .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } `",
           "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."
         },
         {
@@ -1076,7 +1107,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .alert { display: flex; gap: var(--gw-space-2); align-items: flex-start; padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); background: var(--gw-tone-fill, var(--gw-color-fill-info-quiet)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-info)); border-inline-start-width: calc(var(--gw-border-width) * 4); border-radius: var(--gw-radius-control); } ::slotted(p) { margin: 0; } ::slotted([slot=\"actions\"]) { align-self: center; } ::slotted([slot=\"icon\"]), .icon { flex: none; color: var(--gw-tone, var(--gw-color-info)); } .body { flex: 1; min-width: 0; } strong { display: block; font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } `, ]",
+              "default": "[ base, css` :host { display: block; } .alert { display: flex; gap: var(--gw-space-2); align-items: flex-start; padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); background: var(--gw-tone-fill, var(--gw-color-fill-info-quiet)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-info)); border-inline-start-width: calc(var(--gw-border-width) * 4); border-radius: min(var(--gw-radius-control), var(--gw-radius-panel)); } ::slotted(p) { margin: 0; } ::slotted([slot=\"actions\"]) { align-self: center; } ::slotted([slot=\"icon\"]), .icon { flex: none; color: var(--gw-tone, var(--gw-color-info)); } .body { flex: 1; min-width: 0; } strong { display: block; font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3805,7 +3836,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, description: {}, icon: {}, level: { type: \"number\" }, href: {}, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
+              "default": "{ heading: {}, description: {}, icon: {}, level: { type: \"number\" }, href: {}, titleLink: { attribute: \"title-link\", type: \"boolean\", reflect: true }, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3818,7 +3849,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } header { display: flex; gap: var(--gw-space-2); align-items: center; } header > .icon { flex-shrink: 0; margin-inline-end: var(--gw-space-1); color: var(--gw-color-accent); } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } .title { margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } /* The divider runs to the card's edges */ footer:not([hidden]) { display: flex; flex-direction: column; gap: inherit; margin-inline: calc(-1 * var(--gw-space-4)); padding: var(--gw-space-3) var(--gw-space-4) 0; border-top: var(--gw-border-width) solid var(--gw-color-border-normal); } :host([flush]) footer:not([hidden]) { margin-inline: 0; padding-bottom: var(--gw-space-3); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
+              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } /* With title-link, only the heading is the link */ .title a { color: inherit; text-decoration: none; border-radius: var(--gw-radius-chip); } .title a[href]:hover, :host([title-link]) ::slotted(a[slot=\"heading\"]:hover) { color: var(--gw-color-accent); text-decoration: underline; } .title a[href]:focus-visible, :host([title-link]) ::slotted(a[slot=\"heading\"]:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } header { display: flex; gap: var(--gw-space-2); align-items: center; } header > .icon { flex-shrink: 0; margin-inline-end: var(--gw-space-1); color: var(--gw-color-accent); } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } .title { margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } /* The divider runs to the card's edges */ footer:not([hidden]) { display: flex; flex-direction: column; gap: inherit; margin-inline: calc(-1 * var(--gw-space-4)); padding: var(--gw-space-3) var(--gw-space-4) 0; border-top: var(--gw-border-width) solid var(--gw-color-border-normal); } :host([flush]) footer:not([hidden]) { margin-inline: 0; padding-bottom: var(--gw-space-3); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3866,6 +3897,15 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "titleLink",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Makes only the heading the link, rather than the whole card.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "flush",
@@ -3897,6 +3937,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#titleAnchor",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#titleSkeleton",
@@ -4366,6 +4412,13 @@
               "description": "Makes the whole card a link to this address.",
               "name": "href"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Makes only the heading the link, from `href` or an `<a>` in the `heading` slot, so the rest of the card stays plain.",
+              "name": "title-link"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -6037,7 +6090,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ options: { type: \"json\" }, label: {}, placeholder: {}, shortcut: {}, open: { type: \"boolean\", reflect: true }, }",
+              "default": "{ options: { type: \"json\" }, value: {}, label: {}, placeholder: {}, shortcut: {}, open: { type: \"boolean\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -6064,6 +6117,15 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current command, marked and selected when the menu opens.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "label",
@@ -6455,6 +6517,13 @@
               "description": "The commands, as JSON.",
               "name": "options"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The current command, such as the page you're on. It's marked, and selected and scrolled into view each time the menu opens.",
+              "name": "value"
+            },
             {
               "type": {
                 "text": "string"
@@ -6552,7 +6621,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, closeLabel: { attribute: \"close-label\" }, }",
+              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, closeLabel: { attribute: \"close-label\" }, discardQuestion: { attribute: \"discard-question\" }, keepLabel: { attribute: \"keep-label\" }, discardLabel: { attribute: \"discard-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -6596,6 +6665,30 @@
               "description": "The close button's name, for an app in another language.",
               "default": "\"Close\""
             },
+            {
+              "kind": "field",
+              "name": "discardQuestion",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard your changes?\""
+            },
+            {
+              "kind": "field",
+              "name": "keepLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Keep editing\""
+            },
+            {
+              "kind": "field",
+              "name": "discardLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -7021,6 +7114,27 @@
               },
               "description": "The close button's name, for an app in another language. Defaults to `Close`.",
               "name": "close-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.",
+              "name": "discard-question"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that goes back to editing. Defaults to `Keep editing`.",
+              "name": "keep-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that throws the edits away. Defaults to `Discard`.",
+              "name": "discard-label"
             }
           ],
           "superclass": {
@@ -9944,7 +10058,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\", reflect: true }, }",
+              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, maxlength: { type: \"number\" }, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10034,6 +10148,15 @@
               "description": "The step between values of a number, date or time field.",
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The most characters it takes, or 0 for no limit.",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "hint",
@@ -10625,6 +10748,13 @@
               "description": "The step between values of a `number`, date or time field, or `any`.",
               "name": "step"
             },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The most characters it takes.",
+              "name": "maxlength"
+            },
             {
               "type": {
                 "text": "string"
@@ -12609,7 +12739,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, icon: {}, tone: { reflect: true }, time: {}, unread: { type: \"boolean\", reflect: true }, }",
+              "default": "{ heading: {}, icon: {}, tone: { reflect: true }, time: {}, unread: { type: \"boolean\", reflect: true }, dismissLabel: { attribute: \"dismiss-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -12622,7 +12752,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gw-space-1) var(--gw-space-2); align-items: start; padding: var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-quiet); border-radius: var(--gw-radius-control); } /* An inset stripe, so unread and read cards line up */ :host([unread]) .card { box-shadow: inset calc(var(--gw-border-width) * 4) 0 0 var(--gw-tone, var(--gw-color-accent)); } :host([unread]:dir(rtl)) .card { box-shadow: inset calc(var(--gw-border-width) * -4) 0 0 var(--gw-tone, var(--gw-color-accent)); } .card > .icon { margin-block-start: 0.1em; color: var(--gw-tone, var(--gw-color-text-secondary)); } .card > .icon[hidden] { display: none; } .body { display: grid; gap: var(--gw-space-1); min-width: 0; } strong { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } time { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } time:empty { display: none; } ::slotted(p) { margin: 0; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-1); margin-block-start: var(--gw-space-1); } .close { margin: calc(var(--gw-space-1) * -1); } `, ]",
+              "default": "[ base, css` :host { display: block; } .card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gw-space-1) var(--gw-space-2); align-items: start; padding: var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-quiet); border-radius: min(var(--gw-radius-control), var(--gw-radius-panel)); } /* An inset stripe, so unread and read cards line up */ :host([unread]) .card { box-shadow: inset calc(var(--gw-border-width) * 4) 0 0 var(--gw-tone, var(--gw-color-accent)); } :host([unread]:dir(rtl)) .card { box-shadow: inset calc(var(--gw-border-width) * -4) 0 0 var(--gw-tone, var(--gw-color-accent)); } .card > .icon { margin-block-start: 0.1em; color: var(--gw-tone, var(--gw-color-text-secondary)); } .card > .icon[hidden] { display: none; } .body { display: grid; gap: var(--gw-space-1); min-width: 0; } strong { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } time { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } time:empty { display: none; } ::slotted(p) { margin: 0; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-1); margin-block-start: var(--gw-space-1); } .close { margin: calc(var(--gw-space-1) * -1); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -12668,6 +12798,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "dismissLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Dismiss\""
+            },
             {
               "kind": "field",
               "name": "#icon",
@@ -13053,6 +13191,13 @@
               },
               "description": "Marks it with a stripe until it's seen.",
               "name": "unread"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language. Defaults to `Dismiss`.",
+              "name": "dismiss-label"
             }
           ],
           "superclass": {
@@ -14358,7 +14503,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, confirm: { type: \"boolean\" }, closeLabel: { attribute: \"close-label\" }, }",
+              "default": "{ heading: {}, confirm: { type: \"boolean\" }, closeLabel: { attribute: \"close-label\" }, discardQuestion: { attribute: \"discard-question\" }, keepLabel: { attribute: \"keep-label\" }, discardLabel: { attribute: \"discard-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -14402,6 +14547,30 @@
               "description": "The close button's name, for an app in another language.",
               "default": "\"Close\""
             },
+            {
+              "kind": "field",
+              "name": "discardQuestion",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard your changes?\""
+            },
+            {
+              "kind": "field",
+              "name": "keepLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Keep editing\""
+            },
+            {
+              "kind": "field",
+              "name": "discardLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -14859,6 +15028,27 @@
               },
               "description": "The close button's name, for an app in another language. Defaults to `Close`.",
               "name": "close-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.",
+              "name": "discard-question"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that goes back to editing. Defaults to `Keep editing`.",
+              "name": "keep-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that throws the edits away. Defaults to `Discard`.",
+              "name": "discard-label"
             }
           ],
           "superclass": {
@@ -16473,7 +16663,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, value: {}, multiple: { type: \"boolean\", reflect: true }, values: { type: \"json\" }, hint: {}, info: {}, placeholder: {}, search: {}, disabled: { type: \"boolean\" }, open: { type: \"boolean\", reflect: true }, options: { type: \"json\" }, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, inlineLabel: { type: \"boolean\", attribute: \"inline-label\", reflect: true }, size: { reflect: true }, }",
+              "default": "{ label: {}, name: {}, value: {}, multiple: { type: \"boolean\", reflect: true }, values: { type: \"json\" }, hint: {}, info: {}, placeholder: {}, search: {}, disabled: { type: \"boolean\" }, open: { type: \"boolean\", reflect: true }, options: { type: \"json\" }, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, inlineLabel: { type: \"boolean\", attribute: \"inline-label\", reflect: true }, size: { reflect: true }, clearLabel: { attribute: \"clear-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16601,6 +16791,14 @@
               },
               "default": "\"medium\""
             },
+            {
+              "kind": "field",
+              "name": "clearLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Clear\""
+            },
             {
               "kind": "field",
               "name": "#id",
@@ -17170,6 +17368,13 @@
               },
               "description": "The field's size, 40px tall at medium. Defaults to `medium`.",
               "name": "size"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that clears a multiple choice, for an app in another language. Defaults to `Clear`.",
+              "name": "clear-label"
             }
           ],
           "superclass": {
@@ -21462,7 +21667,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { position: fixed; inset: auto var(--gw-space-4) var(--gw-space-4) auto; width: min(22rem, calc(100vw - 2 * var(--gw-space-4))); padding: 0; margin: 0; overflow: visible; color: inherit; pointer-events: none; user-select: none; background: none; border: 0; } :host(:dir(rtl)) { inset: auto auto var(--gw-space-4) var(--gw-space-4); } :host(:not(:popover-open)) { display: none; } .list { display: flex; flex-direction: column; gap: var(--gw-space-1); align-items: flex-end; } .toast { max-width: 100%; padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: var(--gw-color-surface-overlay); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-inline-start: calc(var(--gw-border-width) * 4) solid var(--gw-toast-tone); border-radius: var(--gw-radius-control); box-shadow: var(--gw-shadow-m); } `, ]",
+              "default": "[ base, css` :host { position: fixed; inset: auto var(--gw-space-4) var(--gw-space-4) auto; width: min(22rem, calc(100vw - 2 * var(--gw-space-4))); padding: 0; margin: 0; overflow: visible; color: inherit; pointer-events: none; user-select: none; background: none; border: 0; } :host(:dir(rtl)) { inset: auto auto var(--gw-space-4) var(--gw-space-4); } :host(:not(:popover-open)) { display: none; } .list { display: flex; flex-direction: column; gap: var(--gw-space-1); align-items: flex-end; } .toast { max-width: 100%; padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: var(--gw-color-surface-overlay); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-inline-start: calc(var(--gw-border-width) * 4) solid var(--gw-toast-tone); border-radius: min(var(--gw-radius-control), var(--gw-radius-panel)); box-shadow: var(--gw-shadow-m); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"

package/package.json

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

package/src/dismiss.ts

@@ -74,10 +74,12 @@ export class Dismissal {
     "Discard",
   );
 
+  readonly #question = h("p", {}, "Discard your changes?");
+
   readonly #view = h(
     "div",
     { class: "discard", role: "alert" },
-    h("p", {}, "Discard your changes?"),
+    this.#question,
     h("footer", {}, this.#keep, this.#discard),
   );
 
@@ -107,6 +109,13 @@ export class Dismissal {
     });
   }
 
+  /** Sets the question and its buttons' text, for an app in another language. */
+  text(question: string, keep: string, discard: string) {
+    this.#question.textContent = question;
+    this.#keep.textContent = keep;
+    this.#discard.textContent = discard;
+  }
+
   /** Whether it's showing the question rather than the content. */
   get asking() {
     return this.#surface.dataset.view === "discard";

package/src/fields.ts

@@ -140,6 +140,9 @@ export const fieldStyles = css`
      corner, never sideways out of the layout */
   gw-input textarea {
     display: block;
+    /* Pill-shaped controls would make a tall box a stadium, so it rounds no
+       more than a panel */
+    border-radius: min(var(--gw-radius-control), var(--gw-radius-panel));
     padding-block: calc(var(--gw-space-2) * var(--gw-field-size));
     line-height: 1.5;
     resize: vertical;

package/src/gw-alert.ts

@@ -70,7 +70,7 @@ export class GwAlert extends GwElement {
         border: var(--gw-border-width) solid
           var(--gw-tone-border, var(--gw-color-border-info));
         border-inline-start-width: calc(var(--gw-border-width) * 4);
-        border-radius: var(--gw-radius-control);
+        border-radius: min(var(--gw-radius-control), var(--gw-radius-panel));
       }
 
       ::slotted(p) {

package/src/gw-card.ts

@@ -29,6 +29,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} icon - SVG path data for an icon before the heading, such as on a card that links to a section.
  * @attr {number} level - The heading's level for assistive tech, 2 by default. Use 3 for a card under a section heading.
  * @attr {string} href - Makes the whole card a link to this address.
+ * @attr {boolean} title-link - Makes only the heading the link, from `href` or an `<a>` in the `heading` slot, so the rest of the card stays plain.
  * @attr {boolean} flush - Drops the padding, for content that runs to the edges.
  * @attr {boolean} loading - Shows skeleton lines for the content and any unknown heading.
  * @attr {number} lines - How many skeleton lines while loading. Defaults to 3.
@@ -52,6 +53,7 @@ export class GwCard extends GwElement {
     icon: {},
     level: { type: "number" },
     href: {},
+    titleLink: { attribute: "title-link", type: "boolean", reflect: true },
     flush: { type: "boolean", reflect: true },
     loading: { type: "boolean", reflect: true },
     lines: { type: "number" },
@@ -113,6 +115,25 @@ export class GwCard extends GwElement {
         outline: none;
       }
 
+      /* With title-link, only the heading is the link */
+      .title a {
+        color: inherit;
+        text-decoration: none;
+        border-radius: var(--gw-radius-chip);
+      }
+
+      .title a[href]:hover,
+      :host([title-link]) ::slotted(a[slot="heading"]:hover) {
+        color: var(--gw-color-accent);
+        text-decoration: underline;
+      }
+
+      .title a[href]:focus-visible,
+      :host([title-link]) ::slotted(a[slot="heading"]:focus-visible) {
+        outline: var(--gw-focus-width) solid var(--gw-color-focus);
+        outline-offset: var(--gw-focus-offset);
+      }
+
       header {
         display: flex;
         gap: var(--gw-space-2);
@@ -175,6 +196,8 @@ export class GwCard extends GwElement {
   /** The heading's level for assistive tech. */
   declare level: number;
   declare href: string;
+  /** Makes only the heading the link, rather than the whole card. */
+  declare titleLink: boolean;
   declare flush: boolean;
   declare loading: boolean;
   /** How many lines of skeleton stand in for the content while loading. */
@@ -182,6 +205,9 @@ export class GwCard extends GwElement {
 
   readonly #title = h("span");
 
+  // A link only with title-link and href; without an href it's plain text
+  readonly #titleAnchor = h("a", {}, this.#title);
+
   readonly #titleSkeleton = h("gw-skeleton-text");
 
   readonly #headingSlot = h("slot", { name: "heading" });
@@ -189,7 +215,7 @@ export class GwCard extends GwElement {
   readonly #heading = h(
     "div",
     { class: "title", part: "heading", role: "heading", "aria-level": "2" },
-    this.#title,
+    this.#titleAnchor,
     this.#headingSlot,
     this.#titleSkeleton,
   );
@@ -242,6 +268,7 @@ export class GwCard extends GwElement {
     this.icon = "";
     this.level = 2;
     this.href = "";
+    this.titleLink = false;
     this.flush = false;
     this.loading = false;
     this.lines = 3;
@@ -251,7 +278,7 @@ export class GwCard extends GwElement {
     this.addEventListener("click", (event) => {
       const link = this.#link();
 
-      if (link === null || this.loading) return;
+      if (link === null || this.loading || this.titleLink) return;
 
       const path = event.composedPath();
       const own = path.slice(0, path.indexOf(this));
@@ -277,7 +304,7 @@ export class GwCard extends GwElement {
     const focus = () => {
       this.#card.classList.toggle(
         "focused",
-        this.#link()?.matches(":focus-visible") === true,
+        !this.titleLink && this.#link()?.matches(":focus-visible") === true,
       );
     };
 
@@ -327,11 +354,13 @@ export class GwCard extends GwElement {
 
     const before = animate ? this.offsetHeight : 0;
 
+    const cardLink = Boolean(this.href) && !this.titleLink;
+
     if (
-      changed.has("href") &&
-      (this.#card.tagName === "A") !== Boolean(this.href)
+      (changed.has("href") || changed.has("titleLink")) &&
+      (this.#card.tagName === "A") !== cardLink
     ) {
-      const next = this.href
+      const next = cardLink
         ? h("a", { class: "card", part: "card" })
         : h("section", { class: "card", part: "card" });
 
@@ -342,11 +371,20 @@ export class GwCard extends GwElement {
 
     if (this.#card instanceof HTMLAnchorElement) this.#card.href = this.href;
 
+    setAttribute(
+      this.#titleAnchor,
+      "href",
+      this.titleLink && this.href ? this.href : null,
+    );
+
     setAttribute(this.#card, "aria-busy", this.loading ? "true" : null);
 
     const slotted = this.querySelector(":scope > [slot='heading']") !== null;
 
-    this.#card.classList.toggle("linked", this.#link() !== null && !this.href);
+    this.#card.classList.toggle(
+      "linked",
+      this.#link() !== null && !this.href && !this.titleLink,
+    );
     this.#title.textContent = this.heading;
     this.#heading.setAttribute("aria-level", String(this.level || 2));
     this.#description.textContent = this.description;

package/src/gw-command-menu.ts

@@ -23,6 +23,7 @@ const sheetBelow = 600;
  * @summary A searchable list of commands on Cmd+K or Ctrl+K.
  *
  * @attr {OptionItem[]} options - The commands, as JSON.
+ * @attr {string} value - The current command, such as the page you're on. It's marked, and selected and scrolled into view each time the menu opens.
  * @attr {string} label - The accessible name. Defaults to `Commands`.
  * @attr {string} placeholder - The search placeholder. Defaults to `Search commands`.
  * @attr {string} shortcut - The key that opens it with Cmd or Ctrl, such as `mod+k`, or `none`. Defaults to `mod+k`.
@@ -37,6 +38,7 @@ const sheetBelow = 600;
 export class GwCommandMenu extends GwElement {
   static override properties = {
     options: { type: "json" },
+    value: {},
     label: {},
     placeholder: {},
     shortcut: {},
@@ -154,6 +156,8 @@ export class GwCommandMenu extends GwElement {
   ];
 
   declare options: readonly OptionItem[];
+  /** The current command, marked and selected when the menu opens. */
+  declare value: string;
   declare label: string;
   declare placeholder: string;
   /** `mod+k` (the default) opens it on Cmd+K or Ctrl+K; `none` turns that off. */
@@ -178,6 +182,7 @@ export class GwCommandMenu extends GwElement {
   constructor() {
     super();
     this.options = [];
+    this.value = "";
     this.label = "Commands";
     this.placeholder = "Search commands";
     this.shortcut = "mod+k";
@@ -268,6 +273,7 @@ export class GwCommandMenu extends GwElement {
     const dialog = this.#dialog;
 
     list.options = Array.isArray(this.options) ? this.options : [];
+    list.value = this.value;
     list.label = this.label;
     list.placeholder = this.placeholder;
     dialog.setAttribute("aria-label", this.label);

package/src/gw-dialog.ts

@@ -25,6 +25,9 @@ const closeIcon =
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} open - Whether it shows.
  * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
+ * @attr {string} discard-question - The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.
+ * @attr {string} keep-label - The button that goes back to editing. Defaults to `Keep editing`.
+ * @attr {string} discard-label - The button that throws the edits away. Defaults to `Discard`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -42,6 +45,9 @@ export class GwDialog extends GwElement {
     heading: {},
     open: { type: "boolean", reflect: true },
     closeLabel: { attribute: "close-label" },
+    discardQuestion: { attribute: "discard-question" },
+    keepLabel: { attribute: "keep-label" },
+    discardLabel: { attribute: "discard-label" },
   } as const;
 
   static override styles = [
@@ -148,6 +154,9 @@ export class GwDialog extends GwElement {
   declare open: boolean;
   /** The close button's name, for an app in another language. */
   declare closeLabel: string;
+  declare discardQuestion: string;
+  declare keepLabel: string;
+  declare discardLabel: string;
 
   /** The value of the action that closed the dialog, or "" for Esc. */
   returnValue = "";
@@ -157,6 +166,9 @@ export class GwDialog extends GwElement {
     this.heading = "";
     this.open = false;
     this.closeLabel = "Close";
+    this.discardQuestion = "Discard your changes?";
+    this.keepLabel = "Keep editing";
+    this.discardLabel = "Discard";
   }
 
   readonly #heading = h("h2", { id: "heading", part: "heading" });
@@ -251,6 +263,11 @@ export class GwDialog extends GwElement {
 
     this.#heading.textContent = this.heading;
     this.#closeButton.textContent = this.closeLabel;
+    this.#dismissal.text(
+      this.discardQuestion,
+      this.keepLabel,
+      this.discardLabel,
+    );
 
     if (this.open && !dialog.open) {
       dialog.showModal();

package/src/gw-input.ts

@@ -34,6 +34,7 @@ const hideIcon =
  * @attr {string} min - The lowest value of a `number`, date or time field.
  * @attr {string} max - The highest value of a `number`, date or time field.
  * @attr {string} step - The step between values of a `number`, date or time field, or `any`.
+ * @attr {number} maxlength - The most characters it takes.
  * @attr {string} hint - One line of help under the field.
  * @attr {string} info - Longer help, opened from an (i) button by the label.
  * @attr {string} error - An error under the field, which marks it invalid and is announced.
@@ -63,6 +64,7 @@ export class GwInput extends LightElement {
     min: {},
     max: {},
     step: {},
+    maxlength: { type: "number" },
     hint: {},
     info: {},
     error: {},
@@ -92,6 +94,8 @@ export class GwInput extends LightElement {
   declare max: string;
   /** The step between values of a number, date or time field. */
   declare step: string;
+  /** The most characters it takes, or 0 for no limit. */
+  declare maxlength: number;
   declare hint: string;
   /** Longer help, opened from an (i) button by the label. */
   declare info: string;
@@ -172,6 +176,7 @@ export class GwInput extends LightElement {
     this.min = "";
     this.max = "";
     this.step = "";
+    this.maxlength = 0;
     this.hint = "";
     this.info = "";
     this.error = "";
@@ -271,6 +276,11 @@ export class GwInput extends LightElement {
     setAttribute(this.#input, "min", this.min || null);
     setAttribute(this.#input, "max", this.max || null);
     setAttribute(this.#input, "step", this.step || null);
+    setAttribute(
+      control,
+      "maxlength",
+      this.maxlength > 0 ? String(this.maxlength) : null,
+    );
     setAttribute(control, "spellcheck", this.monospace ? "false" : null);
     setAttribute(control, "aria-invalid", this.error ? "true" : null);
     setAttribute(control, "aria-describedby", described || null);

package/src/gw-notification.ts

@@ -28,6 +28,7 @@ const closeIcon =
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The icon's color. Defaults to `neutral`.
  * @attr {string} time - When it happened, as shown, such as `2 min ago`.
  * @attr {boolean} unread - Marks it with a stripe until it's seen.
+ * @attr {string} dismiss-label - The close button's name, for an app in another language. Defaults to `Dismiss`.
  *
  * @slot - A line of text.
  * @slot actions - Up to two buttons.
@@ -45,6 +46,7 @@ export class GwNotification extends GwElement {
     tone: { reflect: true },
     time: {},
     unread: { type: "boolean", reflect: true },
+    dismissLabel: { attribute: "dismiss-label" },
   } as const;
 
   static override styles = [
@@ -64,7 +66,7 @@ export class GwNotification extends GwElement {
         color: var(--gw-color-text-primary);
         background: var(--gw-color-surface-raised);
         border: var(--gw-border-width) solid var(--gw-color-border-quiet);
-        border-radius: var(--gw-radius-control);
+        border-radius: min(var(--gw-radius-control), var(--gw-radius-panel));
       }
 
       /* An inset stripe, so unread and read cards line up */
@@ -129,6 +131,7 @@ export class GwNotification extends GwElement {
   declare tone: Tone;
   declare time: string;
   declare unread: boolean;
+  declare dismissLabel: string;
 
   readonly #icon = createIcon("");
 
@@ -156,6 +159,7 @@ export class GwNotification extends GwElement {
     this.tone = "neutral";
     this.time = "";
     this.unread = false;
+    this.dismissLabel = "Dismiss";
   }
 
   /** Fires `dismiss`, then folds away and removes itself unless that's cancelled. */
@@ -212,6 +216,7 @@ export class GwNotification extends GwElement {
     this.#heading.textContent = this.heading;
     this.#heading.hidden = !this.heading;
     this.#time.textContent = this.time;
+    this.#close.textContent = this.dismissLabel;
   }
 }
 

package/src/gw-option-list.ts

@@ -557,8 +557,10 @@ export class GwOptionList extends GwElement {
       const headed =
         previous?.kind === "group" ? (this.#tops[position - 1] ?? top) : top;
 
+      // A third of the way down, so what's above it shows too without
+      // the option sitting at either edge
       if (center) {
-        listbox.scrollTop = Math.max(0, top - listbox.clientHeight / 2);
+        listbox.scrollTop = Math.max(0, top - listbox.clientHeight / 3);
       } else if (headed - listPadding < listbox.scrollTop) {
         listbox.scrollTop = Math.max(0, headed - listPadding);
       } else if (

package/src/gw-popover.ts

@@ -35,6 +35,9 @@ const sheetBelow = 600;
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} confirm - Makes it an `alertdialog`, for a question that needs an answer.
  * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
+ * @attr {string} discard-question - The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.
+ * @attr {string} keep-label - The button that goes back to editing. Defaults to `Keep editing`.
+ * @attr {string} discard-label - The button that throws the edits away. Defaults to `Discard`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -53,6 +56,9 @@ export class GwPopover extends GwElement {
     heading: {},
     confirm: { type: "boolean" },
     closeLabel: { attribute: "close-label" },
+    discardQuestion: { attribute: "discard-question" },
+    keepLabel: { attribute: "keep-label" },
+    discardLabel: { attribute: "discard-label" },
   } as const;
 
   static override styles = [
@@ -197,6 +203,9 @@ export class GwPopover extends GwElement {
   declare confirm: boolean;
   /** The close button's name, for an app in another language. */
   declare closeLabel: string;
+  declare discardQuestion: string;
+  declare keepLabel: string;
+  declare discardLabel: string;
 
   /** The value of the action that closed it, or "" for Esc or a click outside. */
   returnValue = "";
@@ -252,6 +261,9 @@ export class GwPopover extends GwElement {
     this.heading = "";
     this.confirm = false;
     this.closeLabel = "Close";
+    this.discardQuestion = "Discard your changes?";
+    this.keepLabel = "Keep editing";
+    this.discardLabel = "Discard";
   }
 
   /** Whether its content has changed since it opened, so closing it asks first. */
@@ -399,6 +411,11 @@ export class GwPopover extends GwElement {
     this.#heading.textContent = this.heading;
     this.#heading.hidden = !this.heading;
     this.#closeButton.textContent = this.closeLabel;
+    this.#dismissal.text(
+      this.discardQuestion,
+      this.keepLabel,
+      this.discardLabel,
+    );
   }
 }
 

package/src/gw-select.ts

@@ -63,6 +63,7 @@ const chevronIcon =
  * @attr {boolean} label-hidden - Hides the label but keeps it for assistive technology.
  * @attr {boolean} inline-label - Shows the label inside the trigger, before the value, for toolbars and filters.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The field's size, 40px tall at medium. Defaults to `medium`.
+ * @attr {string} clear-label - The button that clears a multiple choice, for an app in another language. Defaults to `Clear`.
  *
  * @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.
@@ -86,6 +87,7 @@ export class GwSelect extends LightElement {
     labelHidden: { type: "boolean", attribute: "label-hidden" },
     inlineLabel: { type: "boolean", attribute: "inline-label", reflect: true },
     size: { reflect: true },
+    clearLabel: { attribute: "clear-label" },
   } as const;
 
   declare label: string;
@@ -105,6 +107,7 @@ export class GwSelect extends LightElement {
   declare labelHidden: boolean;
   declare inlineLabel: boolean;
   declare size: "xs" | "small" | "medium" | "large" | "xl";
+  declare clearLabel: string;
 
   readonly #id = fieldId();
 
@@ -179,6 +182,7 @@ export class GwSelect extends LightElement {
     this.labelHidden = false;
     this.inlineLabel = false;
     this.size = "medium";
+    this.clearLabel = "Clear";
   }
 
   /** Opens the list, such as from a keyboard shortcut. */
@@ -439,6 +443,7 @@ export class GwSelect extends LightElement {
         : []),
     );
     this.#clear.hidden = !this.multiple || values.length === 0;
+    this.#clear.textContent = this.clearLabel;
 
     const list = this.#list;
 

package/src/gw-theme-picker.ts

@@ -472,6 +472,15 @@ export class GwThemePicker extends GwElement {
     this.#button.addEventListener("click", () => {
       this.show();
     });
+
+    // A theme or mode applies at once, so it isn't an edit for the popover
+    // to ask about discarding, and a click outside still closes it
+    for (const type of ["input", "change"]) {
+      this.#controls.addEventListener(type, (event) => {
+        if (event.target !== this.#controls) event.stopPropagation();
+      });
+    }
+
     this.#mode.addEventListener("change", (event) => {
       event.stopPropagation();
       this.mode = this.#mode.value;

package/src/gw-toast.ts

@@ -71,7 +71,7 @@ export class GwToaster extends GwElement {
         border: var(--gw-border-width) solid var(--gw-color-border-normal);
         border-inline-start: calc(var(--gw-border-width) * 4) solid
           var(--gw-toast-tone);
-        border-radius: var(--gw-radius-control);
+        border-radius: min(var(--gw-radius-control), var(--gw-radius-panel));
         box-shadow: var(--gw-shadow-m);
       }
     `,