@timmo001/groundwork-ui 0.9.23 → 0.9.25

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); } /* 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; } 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-control { position: relative; display: block; } 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; 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."
         },
         {
@@ -9837,7 +9837,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A labeled native `<input>`, with an optional hint and error. Enter submits\nits form when the form's submit button is a `gw-button`, as it would with a\nnative one.",
+          "description": "A labeled native `<input>`, or a `<textarea>` with `multiline`, with an\noptional hint and error. Enter submits its form when the form's submit\nbutton is a `gw-button`, as it would with a native one.",
           "name": "GwInput",
           "cssProperties": [
             {
@@ -9857,7 +9857,7 @@
                 "text": "Properties"
               },
               "static": 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 }, }",
+              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, hideLabel: { type: \"boolean\", attribute: \"hide-label\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -9911,6 +9911,42 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "inputmode",
+              "type": {
+                "text": "string"
+              },
+              "description": "The native inputmode hint, which picks the on-screen keyboard.",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string"
+              },
+              "description": "The lowest value of a number, date or time field.",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string"
+              },
+              "description": "The highest value of a number, date or time field.",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "string"
+              },
+              "description": "The step between values of a number, date or time field.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "hint",
@@ -9944,6 +9980,15 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Adds \"(optional)\" after the label.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -9952,6 +9997,42 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "multiline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Uses a `<textarea>` instead of an `<input>`.",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "description": "The textarea's starting height in lines.",
+              "default": "3"
+            },
+            {
+              "kind": "field",
+              "name": "monospace",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Sets the text in the monospace font and turns off spellcheck.",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "reveal",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "On a password field, adds a button to show and hide what's typed.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -10009,6 +10090,39 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#textarea",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#optional",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#revealIcon",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#reveal",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#revealed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "#hint",
@@ -10021,6 +10135,13 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#control",
+              "privacy": "private",
+              "description": "The native control in use: the textarea when multiline, else the input.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "create",
@@ -10389,6 +10510,34 @@
               "description": "The native autocomplete hint.",
               "name": "autocomplete"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The native inputmode hint, such as `numeric` for a port, which picks the on-screen keyboard.",
+              "name": "inputmode"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The lowest value of a `number`, date or time field.",
+              "name": "min"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The highest value of a `number`, date or time field.",
+              "name": "max"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The step between values of a `number`, date or time field, or `any`.",
+              "name": "step"
+            },
             {
               "type": {
                 "text": "string"
@@ -10407,7 +10556,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "An error under the field, which marks it invalid.",
+              "description": "An error under the field, which marks it invalid and is announced.",
               "name": "error"
             },
             {
@@ -10417,6 +10566,13 @@
               "description": "Requires a value.",
               "name": "required"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Adds \"(optional)\" after the label, for the few optional fields in a form that mostly requires them.",
+              "name": "optional"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -10424,6 +10580,34 @@
               "description": "Disables the field.",
               "name": "disabled"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Uses a `<textarea>` that grows by dragging its corner, for text that runs over lines.",
+              "name": "multiline"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The textarea's starting height in lines. Defaults to 3.",
+              "name": "rows"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Sets the text in the monospace font, for paths, commands, tokens and other machine text. It also turns off spellcheck.",
+              "name": "monospace"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "On a password field, adds a button at the end to show and hide what's typed.",
+              "name": "reveal"
+            },
             {
               "type": {
                 "text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
@@ -12865,7 +13049,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: flex; flex-direction: column; min-height: 0; } .search { display: flex; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-1) var(--gw-space-3); color: var(--gw-color-text-secondary); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } :host(:not([search])) .search { display: none; } input { flex: 1; min-width: 0; height: 2.5rem; padding: 0; font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: none; border: 0; outline: none; } /* The search field is always focused while the list is open, so the row's divider marks it rather than a ring */ input:focus-visible { outline: none; } input::placeholder { color: var(--gw-color-text-secondary); } [role=\"listbox\"] { position: relative; max-height: var(--gw-option-list-height, 20rem); overflow-y: auto; overscroll-behavior: contain; outline: none; } .spacer { position: relative; } .row { position: absolute; inset-inline: ${listPadding}px; box-sizing: border-box; display: flex; gap: var(--gw-space-3); align-items: center; padding: 0 var(--gw-space-2); } .group { align-items: flex-end; padding-block-end: var(--gw-space-1); font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); } [role=\"option\"] { font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); cursor: pointer; border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } /* Mixed from the text color, so the active row stands out on any surface the list sits on, overlays included */ [role=\"option\"][data-active] { background: color-mix( in oklab, transparent, var(--gw-color-text-primary) 12% ); } [role=\"option\"][aria-selected=\"true\"] { color: var(--gw-color-text-strong); } [role=\"option\"] > .icon { flex: none; color: var(--gw-color-text-primary); } [role=\"option\"] > .check { color: var(--gw-color-accent); } .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } .swatches { display: flex; flex: none; } .swatches span, .swatch { width: 0.875rem; height: 0.875rem; margin-inline-start: -0.25rem; border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .swatch { flex: none; width: 0.625rem; height: 0.625rem; margin-inline: 0.125rem; } .none { padding: var(--gw-space-4); font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); text-align: center; } .none[hidden] { display: none; } `, ]",
+              "default": "[ base, css` :host { display: flex; flex-direction: column; min-height: 0; } .search { display: flex; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-1) var(--gw-space-3); color: var(--gw-color-text-secondary); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } :host(:not([search])) .search { display: none; } input { flex: 1; min-width: 0; height: 2.5rem; padding: 0; font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: none; border: 0; outline: none; } /* The search field is always focused while the list is open, so the row's divider marks it rather than a ring */ input:focus-visible { outline: none; } input::placeholder { color: var(--gw-color-text-secondary); } [role=\"listbox\"] { position: relative; max-height: var(--gw-option-list-height, 20rem); overflow-y: auto; overscroll-behavior: contain; outline: none; } .spacer { position: relative; } .row { position: absolute; inset-inline: ${listPadding}px; box-sizing: border-box; display: flex; gap: var(--gw-space-3); align-items: center; padding: 0 var(--gw-space-2); } .group { align-items: flex-end; padding-block-end: var(--gw-space-1); font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); } [role=\"option\"] { font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); cursor: pointer; border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } /* Mixed from the text color, so the active row stands out on any surface the list sits on, overlays included */ [role=\"option\"][data-active] { background: color-mix( in oklab, transparent, var(--gw-color-text-primary) 12% ); } [role=\"option\"][aria-selected=\"true\"] { color: var(--gw-color-text-strong); } /* A disabled option can still be reached, so its reason is read, but reads as unavailable and can't be picked */ [role=\"option\"][aria-disabled=\"true\"] { color: var(--gw-color-text-disabled); cursor: not-allowed; } [role=\"option\"] > .icon { flex: none; color: var(--gw-color-text-primary); } [role=\"option\"] > .check { color: var(--gw-color-accent); } .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } .swatches { display: flex; flex: none; } .swatches span, .swatch { width: 0.875rem; height: 0.875rem; margin-inline-start: -0.25rem; border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .swatch { flex: none; width: 0.625rem; height: 0.625rem; margin-inline: 0.125rem; } .none { padding: var(--gw-space-4); font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); text-align: center; } .none[hidden] { display: none; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -14614,7 +14798,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, name: {}, value: { type: \"number\" }, min: { type: \"number\" }, max: { type: \"number\" }, step: { type: \"number\" }, unit: {}, hint: {}, disabled: { type: \"boolean\" }, }",
+              "default": "{ label: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, name: {}, value: { type: \"number\" }, min: { type: \"number\" }, max: { type: \"number\" }, step: { type: \"number\" }, unit: {}, readout: { type: \"boolean\" }, hint: {}, disabled: { type: \"boolean\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -14686,6 +14870,15 @@
               "description": "Shown after the value, such as `%`.",
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "readout",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows the value beside the track.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "hint",
@@ -14726,6 +14919,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#readout",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#hint",
@@ -15140,9 +15339,16 @@
               "type": {
                 "text": "string"
               },
-              "description": "Shown after the value in the bubble and for assistive technology, such as `%`. Empty for a plain number.",
+              "description": "Shown after the value in the bubble, the readout and for assistive technology, such as `%`. Empty for a plain number.",
               "name": "unit"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows the value beside the track, kept up to date while it's dragged.",
+              "name": "readout"
+            },
             {
               "type": {
                 "text": "string"

package/package.json

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

package/src/fields.ts

@@ -88,7 +88,7 @@ export const fieldStyles = css`
     --gw-field-scale: 1.4;
   }
 
-  :where(gw-input, gw-select) :where(input, .gw-select-trigger) {
+  :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)
@@ -136,6 +136,79 @@ export const fieldStyles = css`
     );
   }
 
+  /* 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 {
@@ -308,12 +381,13 @@ export const fieldStyles = css`
     color: var(--gw-color-text-strong);
   }
 
-  :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover {
+  :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, .gw-select-trigger):focus-visible {
+    :where(input, textarea, .gw-select-trigger):focus-visible {
     outline: var(--gw-focus-width) solid var(--gw-color-focus);
     outline-offset: var(--gw-focus-offset);
   }
@@ -422,9 +496,31 @@ export const fieldStyles = css`
     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 {

package/src/gw-input.ts

@@ -9,10 +9,17 @@ import { createIcon, setIconPath } from "./styles.js";
 import { FieldInfo } from "./field-info.js";
 import { LightElement, fieldId } from "./fields.js";
 
+// MDI's eye-outline and eye-off-outline
+const showIcon =
+  "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z";
+
+const hideIcon =
+  "M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z";
+
 /**
- * A labeled native `<input>`, with an optional hint and error. Enter submits
- * its form when the form's submit button is a `gw-button`, as it would with a
- * native one.
+ * A labeled native `<input>`, or a `<textarea>` with `multiline`, with an
+ * optional hint and error. Enter submits its form when the form's submit
+ * button is a `gw-button`, as it would with a native one.
  *
  * @element gw-input
  * @summary A labeled text field in light DOM, so forms and autofill see it.
@@ -23,11 +30,20 @@ import { LightElement, fieldId } from "./fields.js";
  * @attr {string} value - The value.
  * @attr {string} placeholder - Placeholder text.
  * @attr {string} autocomplete - The native autocomplete hint.
+ * @attr {string} inputmode - The native inputmode hint, such as `numeric` for a port, which picks the on-screen keyboard.
+ * @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 {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.
+ * @attr {string} error - An error under the field, which marks it invalid and is announced.
  * @attr {boolean} required - Requires a value.
+ * @attr {boolean} optional - Adds "(optional)" after the label, for the few optional fields in a form that mostly requires them.
  * @attr {boolean} disabled - Disables the field.
+ * @attr {boolean} multiline - Uses a `<textarea>` that grows by dragging its corner, for text that runs over lines.
+ * @attr {number} rows - The textarea's starting height in lines. Defaults to 3.
+ * @attr {boolean} monospace - Sets the text in the monospace font, for paths, commands, tokens and other machine text. It also turns off spellcheck.
+ * @attr {boolean} reveal - On a password field, adds a button at the end to show and hide what's typed.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The field's size, 40px tall at medium. Defaults to `medium`.
  * @attr {string} icon - SVG path data for an icon inside the field, before the text, such as a magnifier on a search.
  * @attr {boolean} hide-label - Keeps the label as the field's accessible name but doesn't show it, for a field in a toolbar whose icon and placeholder say what it's for.
@@ -43,11 +59,20 @@ export class GwInput extends LightElement {
     value: {},
     placeholder: {},
     autocomplete: {},
+    inputmode: {},
+    min: {},
+    max: {},
+    step: {},
     hint: {},
     info: {},
     error: {},
     required: { type: "boolean" },
+    optional: { type: "boolean" },
     disabled: { type: "boolean" },
+    multiline: { type: "boolean", reflect: true },
+    rows: { type: "number" },
+    monospace: { type: "boolean", reflect: true },
+    reveal: { type: "boolean" },
     size: { reflect: true },
     icon: {},
     hideLabel: { type: "boolean", attribute: "hide-label", reflect: true },
@@ -59,12 +84,30 @@ export class GwInput extends LightElement {
   declare value: string;
   declare placeholder: string;
   declare autocomplete: string;
+  /** The native inputmode hint, which picks the on-screen keyboard. */
+  declare inputmode: string;
+  /** The lowest value of a number, date or time field. */
+  declare min: string;
+  /** The highest value of a number, date or time field. */
+  declare max: string;
+  /** The step between values of a number, date or time field. */
+  declare step: string;
   declare hint: string;
   /** Longer help, opened from an (i) button by the label. */
   declare info: string;
   declare error: string;
   declare required: boolean;
+  /** Adds "(optional)" after the label. */
+  declare optional: boolean;
   declare disabled: boolean;
+  /** Uses a `<textarea>` instead of an `<input>`. */
+  declare multiline: boolean;
+  /** The textarea's starting height in lines. */
+  declare rows: number;
+  /** Sets the text in the monospace font and turns off spellcheck. */
+  declare monospace: boolean;
+  /** On a password field, adds a button to show and hide what's typed. */
+  declare reveal: boolean;
   declare size: "xs" | "small" | "medium" | "large" | "xl";
   /** SVG path data for an icon inside the field, before the text. */
   declare icon: string;
@@ -81,9 +124,41 @@ export class GwInput extends LightElement {
 
   readonly #input = h("input", { id: this.#id });
 
+  readonly #textarea = h("textarea", { id: this.#id });
+
+  readonly #optional = h(
+    "span",
+    { class: "gw-optional", hidden: true },
+    " (optional)",
+  );
+
+  readonly #revealIcon = createIcon(showIcon);
+
+  readonly #reveal = h(
+    "button",
+    {
+      type: "button",
+      class: "gw-reveal",
+      hidden: true,
+      "aria-pressed": "false",
+    },
+    this.#revealIcon,
+  );
+
+  #revealed = false;
+
   readonly #hint = h("p", { class: "gw-hint", id: `${this.#id}-hint` });
 
-  readonly #error = h("p", { class: "gw-error", id: `${this.#id}-error` });
+  readonly #error = h("p", {
+    class: "gw-error",
+    id: `${this.#id}-error`,
+    role: "alert",
+  });
+
+  /** The native control in use: the textarea when multiline, else the input. */
+  get #control() {
+    return this.multiline ? this.#textarea : this.#input;
+  }
 
   constructor() {
     super();
@@ -93,20 +168,32 @@ export class GwInput extends LightElement {
     this.value = "";
     this.placeholder = "";
     this.autocomplete = "";
+    this.inputmode = "";
+    this.min = "";
+    this.max = "";
+    this.step = "";
     this.hint = "";
     this.info = "";
     this.error = "";
     this.required = false;
+    this.optional = false;
     this.disabled = false;
+    this.multiline = false;
+    this.rows = 3;
+    this.monospace = false;
+    this.reveal = false;
     this.size = "medium";
     this.icon = "";
     this.hideLabel = false;
   }
 
   protected override create(root: HTMLElement) {
-    this.#input.addEventListener("input", () => {
-      this.value = this.#input.value;
-    });
+    for (const control of [this.#input, this.#textarea]) {
+      control.addEventListener("input", () => {
+        this.value = control.value;
+      });
+    }
+
     // A gw-button's native button is in its shadow root, out of the form's
     // reach, so Enter only submits on its own with a single field. Submit
     // here instead, as a native submit button would
@@ -131,16 +218,31 @@ export class GwInput extends LightElement {
       event.preventDefault();
       form.requestSubmit();
     });
+    this.#reveal.addEventListener("click", () => {
+      this.#revealed = !this.#revealed;
+      this.requestUpdate("reveal");
+    });
     root.append(
       this.#info.heading,
-      h("span", { class: "gw-input-control" }, this.#icon, this.#input),
+      h(
+        "span",
+        { class: "gw-input-control" },
+        this.#icon,
+        this.#control,
+        this.#reveal,
+      ),
       this.#hint,
       this.#error,
     );
   }
 
   protected override update() {
-    const input = this.#input;
+    const control = this.#control;
+    const other = this.multiline ? this.#input : this.#textarea;
+
+    // Only the control in use is in the field, so the label and the form
+    // see just the one
+    if (!control.isConnected && other.isConnected) other.replaceWith(control);
 
     const described = [
       this.hint ? this.#hint.id : "",
@@ -149,22 +251,43 @@ export class GwInput extends LightElement {
       .join(" ")
       .trim();
 
-    this.#label.textContent = this.label;
+    const password = this.type === "password" && !this.multiline;
+    const reveal = password && this.reveal;
+
+    if (!reveal) this.#revealed = false;
+
+    this.#label.replaceChildren(this.label, this.#optional);
+    this.#optional.hidden = !this.optional;
     this.#info.update(this.label, this.info);
     this.#info.heading.classList.toggle("gw-visually-hidden", this.hideLabel);
     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);
-    setAttribute(input, "autocomplete", this.autocomplete || null);
-    setAttribute(input, "aria-invalid", this.error ? "true" : null);
-    setAttribute(input, "aria-describedby", described || null);
-    input.required = this.required;
-    input.disabled = this.disabled;
+    this.#input.type = reveal && this.#revealed ? "text" : this.type;
+    this.#textarea.rows = this.rows;
+    setAttribute(control, "name", this.name || null);
+    setAttribute(control, "placeholder", this.placeholder || null);
+    setAttribute(control, "autocomplete", this.autocomplete || null);
+    setAttribute(control, "inputmode", this.inputmode || null);
+    setAttribute(this.#input, "min", this.min || null);
+    setAttribute(this.#input, "max", this.max || null);
+    setAttribute(this.#input, "step", this.step || null);
+    setAttribute(control, "spellcheck", this.monospace ? "false" : null);
+    setAttribute(control, "aria-invalid", this.error ? "true" : null);
+    setAttribute(control, "aria-describedby", described || null);
+    control.required = this.required;
+    control.disabled = this.disabled;
 
-    if (input.value !== this.value) input.value = this.value;
+    if (control.value !== this.value) control.value = this.value;
 
+    this.#reveal.hidden = !reveal;
+    this.#reveal.disabled = this.disabled;
+    setAttribute(
+      this.#reveal,
+      "aria-label",
+      this.#revealed ? `Hide ${this.label}` : `Show ${this.label}`,
+    );
+    setAttribute(this.#reveal, "aria-pressed", String(this.#revealed));
+    setIconPath(this.#revealIcon, this.#revealed ? hideIcon : showIcon);
     this.#hint.textContent = this.hint;
     this.#hint.hidden = !this.hint;
     this.#error.textContent = this.error;

package/src/gw-option-list.ts

@@ -24,6 +24,11 @@ export interface OptionItem {
   readonly swatches?: readonly string[];
   /** One color shown as a dot before the label, such as a tag's color. */
   readonly swatch?: string;
+  /**
+   * Shows the option but stops it being picked, such as one that isn't
+   * available here. Say why in its `description`.
+   */
+  readonly disabled?: boolean;
 }
 
 // MDI's magnify and check
@@ -202,6 +207,13 @@ export class GwOptionList extends GwElement {
         color: var(--gw-color-text-strong);
       }
 
+      /* A disabled option can still be reached, so its reason is read, but
+         reads as unavailable and can't be picked */
+      [role="option"][aria-disabled="true"] {
+        color: var(--gw-color-text-disabled);
+        cursor: not-allowed;
+      }
+
       [role="option"] > .icon {
         flex: none;
         color: var(--gw-color-text-primary);
@@ -366,7 +378,7 @@ export class GwOptionList extends GwElement {
   }
 
   #pick(option: OptionItem | undefined) {
-    if (option === undefined) return;
+    if (option === undefined || option.disabled === true) return;
 
     this.dispatchEvent(
       new CustomEvent("pick", {
@@ -630,6 +642,7 @@ export class GwOptionList extends GwElement {
         id: `${this.#id}-${index}`,
         "data-index": index,
         "aria-selected": selected ? "true" : "false",
+        "aria-disabled": option.disabled === true ? "true" : null,
         "aria-setsize": this.#filtered.length,
         "aria-posinset": index + 1,
         "data-active": index === this.#active,

package/src/gw-range.ts

@@ -23,7 +23,8 @@ import { LightElement, fieldId } from "./fields.js";
  * @attr {number} min - The lowest value. Defaults to 0.
  * @attr {number} max - The highest value. Defaults to 100.
  * @attr {number} step - The step between values. Defaults to 1.
- * @attr {string} unit - Shown after the value in the bubble and for assistive technology, such as `%`. Empty for a plain number.
+ * @attr {string} unit - Shown after the value in the bubble, the readout and for assistive technology, such as `%`. Empty for a plain number.
+ * @attr {boolean} readout - Shows the value beside the track, kept up to date while it's dragged.
  * @attr {string} hint - One line of help under it.
  * @attr {boolean} disabled - Disables it.
  *
@@ -39,6 +40,7 @@ export class GwRange extends LightElement {
     max: { type: "number" },
     step: { type: "number" },
     unit: {},
+    readout: { type: "boolean" },
     hint: {},
     disabled: { type: "boolean" },
   } as const;
@@ -53,6 +55,8 @@ export class GwRange extends LightElement {
   declare step: number;
   /** Shown after the value, such as `%`. */
   declare unit: string;
+  /** Shows the value beside the track. */
+  declare readout: boolean;
   declare hint: string;
   declare disabled: boolean;
 
@@ -68,6 +72,12 @@ export class GwRange extends LightElement {
     hidden: "",
   });
 
+  readonly #readout = h("output", {
+    class: "gw-range-readout",
+    for: this.#id,
+    "aria-hidden": "true",
+  });
+
   readonly #hint = h("p", { class: "gw-hint", id: `${this.#id}-hint` });
 
   constructor() {
@@ -80,6 +90,7 @@ export class GwRange extends LightElement {
     this.max = 100;
     this.step = 1;
     this.unit = "";
+    this.readout = false;
     this.hint = "";
     this.disabled = false;
   }
@@ -118,10 +129,16 @@ export class GwRange extends LightElement {
     this.#input.addEventListener("input", () => {
       this.value = this.#input.valueAsNumber;
       this.#placeBubble();
+      this.#readout.textContent = this.#text(this.value);
     });
     root.append(
       this.#label,
-      h("span", { class: "gw-range-control" }, this.#input, this.#bubble),
+      h(
+        "span",
+        { class: "gw-range-row" },
+        h("span", { class: "gw-range-control" }, this.#input, this.#bubble),
+        this.#readout,
+      ),
       this.#hint,
     );
   }
@@ -150,6 +167,8 @@ export class GwRange extends LightElement {
       this.unit ? this.#text(this.value) : null,
     );
     setAttribute(input, "aria-describedby", this.hint ? this.#hint.id : null);
+    this.#readout.textContent = this.#text(this.value);
+    this.#readout.hidden = !this.readout;
     this.#hint.textContent = this.hint;
     this.#hint.hidden = !this.hint;
   }

package/src/gw-select.ts

@@ -216,6 +216,8 @@ export class GwSelect extends LightElement {
           item.description = option.dataset.description;
         }
 
+        if (option.disabled) item.disabled = true;
+
         if (group instanceof HTMLOptGroupElement) item.group = group.label;
 
         return item;