@timmo001/groundwork-ui 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +214 -18
- package/package.json +1 -1
- package/src/fields.ts +32 -6
- package/src/gw-badge.ts +29 -18
- package/src/gw-button.ts +8 -24
- package/src/gw-card.ts +97 -4
- package/src/gw-chip.ts +26 -7
- package/src/gw-input.ts +7 -0
- package/src/gw-menu-button.ts +17 -5
- package/src/gw-segmented.ts +19 -7
- package/src/gw-select.ts +7 -0
- package/src/gw-setting-row.ts +21 -5
- package/src/styles.ts +25 -0
package/custom-elements.json
CHANGED
|
@@ -629,7 +629,7 @@
|
|
|
629
629
|
{
|
|
630
630
|
"kind": "variable",
|
|
631
631
|
"name": "fieldStyles",
|
|
632
|
-
"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; } :where(gw-input, gw-select) :where(input, .gw-select-trigger) { width: 100%; min-height: 2.5rem; padding: 0 var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } /* The trigger shows the chosen option, with its icon, and a chevron with room around it that turns over while the list is open */ gw-select .gw-select-trigger { display: flex; gap: var(--gw-space-2); align-items: center; padding-inline-end: var(--gw-space-3); 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: var(--gw-space-4) var(--gw-space-3); border-radius: var(--gw-radius-pill); } /* An inline label reads as a quiet prefix to the value */ gw-select .gw-select-inline-label { flex: none; color: var(--gw-color-text-secondary); } gw-select .gw-select-inline-label[hidden] { display: none; } gw-select .gw-select-value[data-placeholder] { color: var(--gw-color-text-secondary); } gw-select .gw-select-trigger > .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } gw-select .gw-select-trigger > .icon:last-child { color: var(--gw-color-text-secondary); transition: rotate var(--gw-motion-normal) var(--gw-motion-easing); } gw-select[open] .gw-select-trigger > .icon:last-child { rotate: 180deg; } gw-select .gw-select-trigger > .icon[hidden] { display: none; } /* The list opens under the trigger, growing from it, or as a bottom sheet sliding up on phones */ gw-select .gw-select-popup { position: fixed; inset: unset; box-sizing: border-box; max-width: calc(100vw - 12px); padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 1 0.96; transform-origin: top; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } gw-select .gw-select-popup[data-placement=\"above\"] { transform-origin: bottom; } gw-select .gw-select-popup:popover-open { opacity: 1; scale: 1; } @starting-style { gw-select .gw-select-popup:popover-open { opacity: 0; scale: 1 0.96; } } gw-select .gw-select-popup[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } gw-select .gw-select-popup[data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } /* With multiple, a full-width Clear under the list empties the choice */ gw-select .gw-select-clear { display: block; width: 100%; min-height: 2.5rem; padding: 0 var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-select .gw-select-clear:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-select .gw-select-clear:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-select .gw-select-clear[hidden] { display: none; } :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, .gw-select-trigger):focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) [aria-invalid=\"true\"] { border-color: var(--gw-color-border-danger); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-error { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-danger); } :where(gw-switch, gw-checkbox) > label { display: inline-flex; gap: var(--gw-space-3); align-items: center; font-size: var(--gw-font-size-s); cursor: pointer; } :where(gw-switch, gw-checkbox, gw-select) .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } gw-checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--gw-color-fill-accent-resting); } gw-switch input { position: relative; flex: none; width: 2.5rem; height: 1.5rem; margin: 0; cursor: pointer; appearance: none; background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-loud); border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input::after { position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; width: 1rem; height: 1rem; content: \"\"; background: var(--gw-color-text-secondary); border-radius: 50%; transition: translate var(--gw-motion-normal) var(--gw-motion-easing), background-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input:checked { background: var(--gw-color-fill-accent-resting); border-color: transparent; } gw-switch input:checked::after { translate: 1rem 0; background: var(--gw-color-on-accent); } gw-switch input:disabled { opacity: 0.5; } `",
|
|
632
|
+
"default": "css` :where(gw-input, gw-select, gw-switch, gw-checkbox) { display: flex; flex-direction: column; gap: var(--gw-space-2); font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } :where(gw-input, gw-select) .gw-field-heading { display: flex; gap: var(--gw-space-1); align-items: center; } :where(gw-input, gw-select) .gw-field-heading > label { font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } /* The (i) button by the label that opens a field's longer help */ :where(gw-input, gw-select) .gw-info { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } :where(gw-input, gw-select) .gw-info:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } :where(gw-input, gw-select) .gw-info:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) .gw-info[hidden] { display: none; } :where(gw-input, gw-select) .gw-info > .icon { width: 1rem; height: 1rem; fill: currentColor; } /* Sizes run xs to xl through --gw-field-scale, around 1 for medium, and the control's height follows the theme's density too */ :where(gw-input, gw-select)[size=\"xs\"] { --gw-field-scale: 0.6; } :where(gw-input, gw-select)[size=\"small\"] { --gw-field-scale: 0.8; } :where(gw-input, gw-select)[size=\"large\"] { --gw-field-scale: 1.2; } :where(gw-input, gw-select)[size=\"xl\"] { --gw-field-scale: 1.4; } :where(gw-input, gw-select) :where(input, .gw-select-trigger) { --gw-field-size: var(--gw-field-scale, 1); --gw-icon-size: calc( 1.25rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); width: 100%; min-height: calc( 2.5rem * var(--gw-field-size) * var(--gw-control-scale, 1) ); padding: 0 calc(var(--gw-space-3) * var(--gw-field-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-field-size)); color: var(--gw-color-text-strong); background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } /* The trigger shows the chosen option, with its icon, and a chevron with room around it that turns over while the list is open */ gw-select .gw-select-trigger { display: flex; gap: calc(var(--gw-space-2) * var(--gw-field-size)); align-items: center; padding-inline-end: calc(var(--gw-space-3) * var(--gw-field-size)); text-align: start; cursor: pointer; } gw-select .gw-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* With an inline label the select sits among toolbar controls, so it's a pill that fits its content, like the toggles and buttons beside it */ gw-select[inline-label] { display: inline-flex; } gw-select[inline-label] .gw-select-trigger { width: auto; padding-inline: calc(var(--gw-space-4) * var(--gw-field-size)) calc(var(--gw-space-3) * var(--gw-field-size)); border-radius: var(--gw-radius-pill); } /* An inline label reads as a quiet prefix to the value */ gw-select .gw-select-inline-label { flex: none; color: var(--gw-color-text-secondary); } gw-select .gw-select-inline-label[hidden] { display: none; } gw-select .gw-select-value[data-placeholder] { color: var(--gw-color-text-secondary); } gw-select .gw-select-trigger > .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } gw-select .gw-select-trigger > .icon:last-child { color: var(--gw-color-text-secondary); transition: rotate var(--gw-motion-normal) var(--gw-motion-easing); } gw-select[open] .gw-select-trigger > .icon:last-child { rotate: 180deg; } gw-select .gw-select-trigger > .icon[hidden] { display: none; } /* The list opens under the trigger, growing from it, or as a bottom sheet sliding up on phones */ gw-select .gw-select-popup { position: fixed; inset: unset; box-sizing: border-box; max-width: calc(100vw - 12px); padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); opacity: 0; scale: 1 0.96; transform-origin: top; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } gw-select .gw-select-popup[data-placement=\"above\"] { transform-origin: bottom; } gw-select .gw-select-popup:popover-open { opacity: 1; scale: 1; } @starting-style { gw-select .gw-select-popup:popover-open { opacity: 0; scale: 1 0.96; } } gw-select .gw-select-popup[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 0; } @starting-style { gw-select .gw-select-popup[data-placement=\"sheet\"]:popover-open { translate: 0 100%; } } gw-select .gw-select-popup[data-placement=\"sheet\"]::backdrop { background: rgb(0 0 0 / 40%); } /* With multiple, a full-width Clear under the list empties the choice */ gw-select .gw-select-clear { display: block; width: 100%; min-height: 2.5rem; padding: 0 var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); cursor: pointer; background: none; border: 0; border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); transition: color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } gw-select .gw-select-clear:hover { color: var(--gw-color-text-strong); background: var(--gw-color-fill-neutral-hovered); } gw-select .gw-select-clear:focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: calc(var(--gw-focus-width) * -1); } gw-select .gw-select-clear[hidden] { display: none; } :where(gw-input, gw-select) :where(input, .gw-select-trigger):hover { border-color: var(--gw-color-border-loud); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :where(input, .gw-select-trigger):focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :where(gw-input, gw-select) [aria-invalid=\"true\"] { border-color: var(--gw-color-border-danger); } :where(gw-input, gw-select, gw-switch, gw-checkbox) :disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-hint { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } :where(gw-input, gw-select, gw-switch, gw-checkbox) .gw-error { margin: 0; font-size: var(--gw-font-size-xs); color: var(--gw-color-danger); } :where(gw-switch, gw-checkbox) > label { display: inline-flex; gap: var(--gw-space-3); align-items: center; font-size: var(--gw-font-size-s); cursor: pointer; } :where(gw-switch, gw-checkbox, gw-select) .gw-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } gw-checkbox input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--gw-color-fill-accent-resting); } gw-switch input { position: relative; flex: none; width: 2.5rem; height: 1.5rem; margin: 0; cursor: pointer; appearance: none; background: var(--gw-color-surface-lower); border: var(--gw-border-width) solid var(--gw-color-border-loud); border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input::after { position: absolute; inset-block-start: 0.1875rem; inset-inline-start: 0.1875rem; width: 1rem; height: 1rem; content: \"\"; background: var(--gw-color-text-secondary); border-radius: 50%; transition: translate var(--gw-motion-normal) var(--gw-motion-easing), background-color var(--gw-motion-normal) var(--gw-motion-easing); } gw-switch input:checked { background: var(--gw-color-fill-accent-resting); border-color: transparent; } gw-switch input:checked::after { translate: 1rem 0; background: var(--gw-color-on-accent); } gw-switch input:disabled { opacity: 0.5; } `",
|
|
633
633
|
"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."
|
|
634
634
|
},
|
|
635
635
|
{
|
|
@@ -2097,6 +2097,14 @@
|
|
|
2097
2097
|
{
|
|
2098
2098
|
"description": "The icon's color, for a tone of your own. `tone` sets it.",
|
|
2099
2099
|
"name": "--gw-tone"
|
|
2100
|
+
},
|
|
2101
|
+
{
|
|
2102
|
+
"description": "Scales the badge, around 1 for medium.",
|
|
2103
|
+
"name": "--gw-badge-scale"
|
|
2104
|
+
},
|
|
2105
|
+
{
|
|
2106
|
+
"description": "Scales its height and icon with the theme's density. The theme sets it.",
|
|
2107
|
+
"name": "--gw-control-scale"
|
|
2100
2108
|
}
|
|
2101
2109
|
],
|
|
2102
2110
|
"cssParts": [
|
|
@@ -2140,7 +2148,7 @@
|
|
|
2140
2148
|
"text": "readonly CSSStyleSheet[]"
|
|
2141
2149
|
},
|
|
2142
2150
|
"static": true,
|
|
2143
|
-
"default": "[ base, css` :host { display: inline-flex; max-width: 100%; vertical-align: middle; } /* 36px tall, 12px padding, 8px between the 18px icon and the text */ .badge { --gw-icon-size: 1.125rem; display: inline-flex; gap: var(--gw-space-2); align-items: center; box-sizing: border-box; max-width: 100%; height: 2.25rem; padding: 0 var(--gw-space-4) 0 var(--gw-space-3); vertical-align: middle; color: var(--gw-color-text-strong); background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-pill); }
|
|
2151
|
+
"default": "[ base, controlSizes(\"badge\"), css` :host { display: inline-flex; max-width: 100%; vertical-align: middle; } /* 36px tall at medium, 12px padding, 8px between the 18px icon and the text */ .badge { --gw-size: var(--gw-badge-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1.125rem * var(--gw-scale)); display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; max-width: 100%; height: calc(2.25rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-size)) 0 calc(var(--gw-space-3) * var(--gw-size)); vertical-align: middle; color: var(--gw-color-text-strong); background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-pill); } .icon { color: var(--gw-tone, var(--gw-color-accent)); } .info { display: flex; flex-direction: column; min-width: 0; } .label { font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-2xs) * var(--gw-size)) ); line-height: 1.1; color: var(--gw-color-text-secondary); } .content { font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-xs) * var(--gw-size)) ); font-weight: var(--gw-font-weight-strong); line-height: 1.2; white-space: nowrap; } .value { display: inline-block; } `, ]",
|
|
2144
2152
|
"inheritedFrom": {
|
|
2145
2153
|
"name": "GwElement",
|
|
2146
2154
|
"module": "src/element.ts"
|
|
@@ -2174,7 +2182,7 @@
|
|
|
2174
2182
|
"kind": "field",
|
|
2175
2183
|
"name": "size",
|
|
2176
2184
|
"type": {
|
|
2177
|
-
"text": "\"small\" | \"medium\""
|
|
2185
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
2178
2186
|
},
|
|
2179
2187
|
"default": "\"medium\""
|
|
2180
2188
|
},
|
|
@@ -2558,9 +2566,9 @@
|
|
|
2558
2566
|
},
|
|
2559
2567
|
{
|
|
2560
2568
|
"type": {
|
|
2561
|
-
"text": "\"small\"|\"medium\""
|
|
2569
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
2562
2570
|
},
|
|
2563
|
-
"description": "The size. Defaults to `medium`.",
|
|
2571
|
+
"description": "The size, around 36px tall at medium. Defaults to `medium`.",
|
|
2564
2572
|
"name": "size"
|
|
2565
2573
|
},
|
|
2566
2574
|
{
|
|
@@ -3058,6 +3066,10 @@
|
|
|
3058
3066
|
"description": "Scales every dimension, around 1 for medium.",
|
|
3059
3067
|
"name": "--gw-button-scale"
|
|
3060
3068
|
},
|
|
3069
|
+
{
|
|
3070
|
+
"description": "Scales its height and icon with the theme's density. The theme sets it.",
|
|
3071
|
+
"name": "--gw-control-scale"
|
|
3072
|
+
},
|
|
3061
3073
|
{
|
|
3062
3074
|
"description": "The color, set by `variant`.",
|
|
3063
3075
|
"name": "--gw-button-tone"
|
|
@@ -3118,7 +3130,7 @@
|
|
|
3118
3130
|
"text": "readonly CSSStyleSheet[]"
|
|
3119
3131
|
},
|
|
3120
3132
|
"static": true,
|
|
3121
|
-
"default": "[ base, css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; }
|
|
3133
|
+
"default": "[ base, controlSizes(\"button\"), css` :host { --gw-button-tone: var(--gw-color-accent); display: inline-block; } :host([variant=\"neutral\"]) { --gw-button-tone: var(--gw-color-text-secondary); --gw-button-ink: var(--gw-color-text-strong); } :host([variant=\"info\"]) { --gw-button-tone: var(--gw-color-info); } :host([variant=\"success\"]) { --gw-button-tone: var(--gw-color-success); } :host([variant=\"warning\"]) { --gw-button-tone: var(--gw-color-warning); } :host([variant=\"danger\"]) { --gw-button-tone: var(--gw-color-danger); } .button { --gw-size: var(--gw-button-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1.125rem * var(--gw-scale)); position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; justify-content: center; min-height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-size)); font-weight: var(--gw-font-weight-strong); line-height: 1; color: var(--gw-button-ink, var(--gw-button-tone)); text-decoration: none; text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); white-space: nowrap; cursor: pointer; background: transparent; border: max(var(--gw-border-width), 1px) solid transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), border-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-fast) var(--gw-motion-easing), scale var(--gw-motion-fast) var(--gw-motion-easing); } /* A slight press, so a click feels physical */ .button:active { scale: 0.97; } .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } .button:active { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } /* A solid fill, with text that flips between black and white by the fill's lightness so it reads on every theme's colors */ :host([appearance=\"accent\"]) .button { color: oklch( from var(--gw-button-tone) clamp(0, (0.66 - l) * 1000, 1) 0 0 ); background: var(--gw-button-tone); } :host([appearance=\"accent\"]) .button:hover { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.2) c h ); } :host([appearance=\"accent\"]) .button:active { background: oklch( from var(--gw-button-tone) calc(l + (0.6 - l) * 0.35) c h ); } /* The tint lowers the tone's contrast, so the text leans toward the strongest text color to stay readable on it */ :host([appearance=\"filled\"]) .button { color: var( --gw-button-ink, color-mix( in oklch, var(--gw-button-tone) 70%, var(--gw-color-text-strong) ) ); background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([appearance=\"filled\"]) .button:hover { background: color-mix(in oklch, var(--gw-button-tone) 24%, transparent); } :host([appearance=\"filled\"]) .button:active { background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent); } :host([appearance=\"outlined\"]) .button { border-color: var(--gw-button-tone); } /* A slotted link carries the text; the pill draws its focus ring */ ::slotted(a) { color: inherit; text-decoration: none; outline: none; } .button.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } :host([appearance=\"plain\"]) .button.current, :host([appearance=\"outlined\"]) .button.current { background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent); } :host([appearance=\"filled\"]) .button.current { background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent); } .button:disabled, .button[aria-disabled=\"true\"] { color: var(--gw-color-text-disabled); pointer-events: none; cursor: not-allowed; background: var(--gw-color-fill-neutral-disabled); border-color: transparent; } :host([appearance=\"plain\"]) .button:disabled, :host([appearance=\"plain\"]) .button[aria-disabled=\"true\"] { background: transparent; } ::slotted([slot=\"icon\"]), .icon { flex: none; width: var(--gw-icon-size); height: var(--gw-icon-size); fill: currentColor; } /* The icon and the ring share one cell and crossfade */ .lead { display: grid; place-items: center; } .lead > * { grid-area: 1 / 1; } .lead > *, .text, .ring { transition: opacity var(--gw-motion-normal) cubic-bezier(0.4, 0, 0.2, 1); } /* Sized to the icon's drawn area, which is inset in its 24px box */ .ring { width: calc(var(--gw-icon-size) * 0.8); height: calc(var(--gw-icon-size) * 0.8); border: calc(2px * var(--gw-scale)) solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; opacity: 0; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Without an icon, the ring sits over the hidden text */ .ring.over { position: absolute; inset: 0; margin: auto; } :host([loading]) .button { cursor: progress; } :host([loading]) .lead > .ring, :host([loading]) .button:not(.has-icon) > .ring.over { opacity: 1; } :host([loading]) .lead > :not(.ring), :host([loading]) .button:not(.has-icon) > .text { opacity: 0; } .button:not(.has-icon) > .lead { display: none; } /* Icon only, to save space: square, with the text kept for assistive technology. auto does this on narrow screens */ :host([labels=\"hide\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .button.has-icon { min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"auto\"]) .has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } `, ]",
|
|
3122
3134
|
"inheritedFrom": {
|
|
3123
3135
|
"name": "GwElement",
|
|
3124
3136
|
"module": "src/element.ts"
|
|
@@ -3652,7 +3664,7 @@
|
|
|
3652
3664
|
"declarations": [
|
|
3653
3665
|
{
|
|
3654
3666
|
"kind": "class",
|
|
3655
|
-
"description": "A surface for one group of content, with an optional heading and actions.\nWith `href` the whole card is a link. While `loading`, lines of skeleton\nstand in for the content, and for the heading until it's known. The card\nglides to its new height and the content fades in once it's loaded.",
|
|
3667
|
+
"description": "A surface for one group of content, with an optional heading and actions.\nWith `href` the whole card is a link. While `loading`, lines of skeleton\nstand in for the content, and for the heading until it's known. The card\nglides to its new height and the content fades in once it's loaded.\n\nFor a link the page's HTML has to carry, such as one with a `target` or\n`rel`, put an `<a>` in the `heading` slot instead of `href`. A click\nanywhere on the card that isn't on another control follows it, the card\nshows the link's hover and focus, and the link stays a real one in the\npage, so the rest of the card's content stays plain text.",
|
|
3656
3668
|
"name": "GwCard",
|
|
3657
3669
|
"cssParts": [
|
|
3658
3670
|
{
|
|
@@ -3677,6 +3689,10 @@
|
|
|
3677
3689
|
"description": "The content.",
|
|
3678
3690
|
"name": ""
|
|
3679
3691
|
},
|
|
3692
|
+
{
|
|
3693
|
+
"description": "The heading, in place of `heading`. An `<a>` here makes the whole card follow it.",
|
|
3694
|
+
"name": "heading"
|
|
3695
|
+
},
|
|
3680
3696
|
{
|
|
3681
3697
|
"description": "Buttons beside the heading.",
|
|
3682
3698
|
"name": "actions"
|
|
@@ -3703,7 +3719,7 @@
|
|
|
3703
3719
|
"text": "readonly CSSStyleSheet[]"
|
|
3704
3720
|
},
|
|
3705
3721
|
"static": true,
|
|
3706
|
-
"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 { border-color: var(--gw-color-border-accent); } header { display: flex; gap: var(--gw-space-2); align-items: center; } h2 { flex: 1; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
|
|
3722
|
+
"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; } h2 { flex: 1; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
|
|
3707
3723
|
"inheritedFrom": {
|
|
3708
3724
|
"name": "GwElement",
|
|
3709
3725
|
"module": "src/element.ts"
|
|
@@ -3762,6 +3778,12 @@
|
|
|
3762
3778
|
"privacy": "private",
|
|
3763
3779
|
"readonly": true
|
|
3764
3780
|
},
|
|
3781
|
+
{
|
|
3782
|
+
"kind": "field",
|
|
3783
|
+
"name": "#headingSlot",
|
|
3784
|
+
"privacy": "private",
|
|
3785
|
+
"readonly": true
|
|
3786
|
+
},
|
|
3765
3787
|
{
|
|
3766
3788
|
"kind": "field",
|
|
3767
3789
|
"name": "#header",
|
|
@@ -3806,6 +3828,17 @@
|
|
|
3806
3828
|
},
|
|
3807
3829
|
"default": "false"
|
|
3808
3830
|
},
|
|
3831
|
+
{
|
|
3832
|
+
"kind": "method",
|
|
3833
|
+
"name": "#link",
|
|
3834
|
+
"privacy": "private",
|
|
3835
|
+
"return": {
|
|
3836
|
+
"type": {
|
|
3837
|
+
"text": "HTMLAnchorElement | null"
|
|
3838
|
+
}
|
|
3839
|
+
},
|
|
3840
|
+
"description": "The `<a>` in the heading slot, or holding it, when there is one."
|
|
3841
|
+
},
|
|
3809
3842
|
{
|
|
3810
3843
|
"kind": "method",
|
|
3811
3844
|
"name": "create",
|
|
@@ -5277,6 +5310,14 @@
|
|
|
5277
5310
|
{
|
|
5278
5311
|
"description": "The border. `tone` sets it.",
|
|
5279
5312
|
"name": "--gw-tone-border"
|
|
5313
|
+
},
|
|
5314
|
+
{
|
|
5315
|
+
"description": "Scales the chip, around 1 for medium.",
|
|
5316
|
+
"name": "--gw-chip-scale"
|
|
5317
|
+
},
|
|
5318
|
+
{
|
|
5319
|
+
"description": "Scales its height and icon with the theme's density. The theme sets it.",
|
|
5320
|
+
"name": "--gw-control-scale"
|
|
5280
5321
|
}
|
|
5281
5322
|
],
|
|
5282
5323
|
"cssParts": [
|
|
@@ -5303,7 +5344,7 @@
|
|
|
5303
5344
|
"text": "Properties"
|
|
5304
5345
|
},
|
|
5305
5346
|
"static": true,
|
|
5306
|
-
"default": "{ tone: { reflect: true }, icon: {}, loading: { type: \"boolean\", reflect: true }, }",
|
|
5347
|
+
"default": "{ tone: { reflect: true }, icon: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
|
|
5307
5348
|
"inheritedFrom": {
|
|
5308
5349
|
"name": "GwElement",
|
|
5309
5350
|
"module": "src/element.ts"
|
|
@@ -5316,7 +5357,7 @@
|
|
|
5316
5357
|
"text": "readonly CSSStyleSheet[]"
|
|
5317
5358
|
},
|
|
5318
5359
|
"static": true,
|
|
5319
|
-
"default": "[ base, css` :host { display: inline-flex; } /* 32px, with 12px padding */ .chip { display: inline-flex; gap: var(--gw-space-2); align-items: center; box-sizing: border-box; height: 2rem; padding: 0 var(--gw-space-3); font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); background: var(--gw-tone-fill, var(--gw-color-fill-neutral-resting)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-quiet)); border-radius: var(--gw-radius-chip);
|
|
5360
|
+
"default": "[ base, controlSizes(\"chip\"), css` :host { display: inline-flex; } /* 32px at medium, with 12px padding */ .chip { --gw-size: var(--gw-chip-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1rem * var(--gw-scale)); display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-3) * var(--gw-size)); font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-xs) * var(--gw-size)) ); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); background: var(--gw-tone-fill, var(--gw-color-fill-neutral-resting)); border: var(--gw-border-width) solid var(--gw-tone-border, var(--gw-color-border-quiet)); border-radius: var(--gw-radius-chip); } .content { display: inline-flex; gap: inherit; align-items: center; } `, ]",
|
|
5320
5361
|
"inheritedFrom": {
|
|
5321
5362
|
"name": "GwElement",
|
|
5322
5363
|
"module": "src/element.ts"
|
|
@@ -5347,6 +5388,14 @@
|
|
|
5347
5388
|
},
|
|
5348
5389
|
"default": "false"
|
|
5349
5390
|
},
|
|
5391
|
+
{
|
|
5392
|
+
"kind": "field",
|
|
5393
|
+
"name": "size",
|
|
5394
|
+
"type": {
|
|
5395
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
5396
|
+
},
|
|
5397
|
+
"default": "\"medium\""
|
|
5398
|
+
},
|
|
5350
5399
|
{
|
|
5351
5400
|
"kind": "field",
|
|
5352
5401
|
"name": "#icon",
|
|
@@ -5704,6 +5753,13 @@
|
|
|
5704
5753
|
},
|
|
5705
5754
|
"description": "Shows a skeleton for the text.",
|
|
5706
5755
|
"name": "loading"
|
|
5756
|
+
},
|
|
5757
|
+
{
|
|
5758
|
+
"type": {
|
|
5759
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
5760
|
+
},
|
|
5761
|
+
"description": "The size, around 32px tall at medium. Defaults to `medium`.",
|
|
5762
|
+
"name": "size"
|
|
5707
5763
|
}
|
|
5708
5764
|
],
|
|
5709
5765
|
"superclass": {
|
|
@@ -9617,6 +9673,16 @@
|
|
|
9617
9673
|
"kind": "class",
|
|
9618
9674
|
"description": "A labeled native `<input>`, with an optional hint and error.",
|
|
9619
9675
|
"name": "GwInput",
|
|
9676
|
+
"cssProperties": [
|
|
9677
|
+
{
|
|
9678
|
+
"description": "Scales the field, around 1 for medium.",
|
|
9679
|
+
"name": "--gw-field-scale"
|
|
9680
|
+
},
|
|
9681
|
+
{
|
|
9682
|
+
"description": "Scales its height with the theme's density. The theme sets it.",
|
|
9683
|
+
"name": "--gw-control-scale"
|
|
9684
|
+
}
|
|
9685
|
+
],
|
|
9620
9686
|
"members": [
|
|
9621
9687
|
{
|
|
9622
9688
|
"kind": "field",
|
|
@@ -9625,7 +9691,7 @@
|
|
|
9625
9691
|
"text": "Properties"
|
|
9626
9692
|
},
|
|
9627
9693
|
"static": true,
|
|
9628
|
-
"default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, disabled: { type: \"boolean\" }, }",
|
|
9694
|
+
"default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, disabled: { type: \"boolean\" }, size: { reflect: true }, }",
|
|
9629
9695
|
"inheritedFrom": {
|
|
9630
9696
|
"name": "GwElement",
|
|
9631
9697
|
"module": "src/element.ts"
|
|
@@ -9720,6 +9786,14 @@
|
|
|
9720
9786
|
},
|
|
9721
9787
|
"default": "false"
|
|
9722
9788
|
},
|
|
9789
|
+
{
|
|
9790
|
+
"kind": "field",
|
|
9791
|
+
"name": "size",
|
|
9792
|
+
"type": {
|
|
9793
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
9794
|
+
},
|
|
9795
|
+
"default": "\"medium\""
|
|
9796
|
+
},
|
|
9723
9797
|
{
|
|
9724
9798
|
"kind": "field",
|
|
9725
9799
|
"name": "#id",
|
|
@@ -10159,6 +10233,13 @@
|
|
|
10159
10233
|
},
|
|
10160
10234
|
"description": "Disables the field.",
|
|
10161
10235
|
"name": "disabled"
|
|
10236
|
+
},
|
|
10237
|
+
{
|
|
10238
|
+
"type": {
|
|
10239
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
10240
|
+
},
|
|
10241
|
+
"description": "The field's size, 40px tall at medium. Defaults to `medium`.",
|
|
10242
|
+
"name": "size"
|
|
10162
10243
|
}
|
|
10163
10244
|
],
|
|
10164
10245
|
"superclass": {
|
|
@@ -10189,6 +10270,16 @@
|
|
|
10189
10270
|
"kind": "class",
|
|
10190
10271
|
"description": "A button that opens a menu on the Popover API, so it shows in the top\nlayer and closes on Esc or a click outside. Set `items`; arrow keys, Home\nand End move between them, and choosing one fires `select` with its\n`value` and closes the menu.\n\nContextual actions, such as \"Add a schedule\", go in `actions`: they stay\nbelow the items as the list scrolls, so they're found without scrolling to\nthe end, and with no items the menu says `empty` above them.\n\nItems render inside the component, so a page's own button styles can't\nreach them.",
|
|
10191
10272
|
"name": "GwMenuButton",
|
|
10273
|
+
"cssProperties": [
|
|
10274
|
+
{
|
|
10275
|
+
"description": "Scales the trigger, around 1 for medium.",
|
|
10276
|
+
"name": "--gw-menu-button-scale"
|
|
10277
|
+
},
|
|
10278
|
+
{
|
|
10279
|
+
"description": "Scales its height and icon with the theme's density. The theme sets it.",
|
|
10280
|
+
"name": "--gw-control-scale"
|
|
10281
|
+
}
|
|
10282
|
+
],
|
|
10192
10283
|
"cssParts": [
|
|
10193
10284
|
{
|
|
10194
10285
|
"description": "The button that opens the menu.",
|
|
@@ -10203,7 +10294,7 @@
|
|
|
10203
10294
|
"text": "Properties"
|
|
10204
10295
|
},
|
|
10205
10296
|
"static": true,
|
|
10206
|
-
"default": "{ label: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, }",
|
|
10297
|
+
"default": "{ label: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, }",
|
|
10207
10298
|
"inheritedFrom": {
|
|
10208
10299
|
"name": "GwElement",
|
|
10209
10300
|
"module": "src/element.ts"
|
|
@@ -10216,7 +10307,7 @@
|
|
|
10216
10307
|
"text": "readonly CSSStyleSheet[]"
|
|
10217
10308
|
},
|
|
10218
10309
|
"static": true,
|
|
10219
|
-
"default": "[ base, css` :host { position: relative; display: inline-block; anchor-scope: --gw-menu; } .trigger { display: inline-flex; gap: var(--gw-space-2); align-items: center; box-sizing: border-box; height: 2.5rem; padding: 0 var(--gw-space-4); font: inherit; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); cursor: pointer; background: var(--gw-color-fill-neutral-resting); border: var(--gw-border-width) solid var(--gw-border-color); border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); anchor-name: --gw-menu; } .trigger:hover { background: var(--gw-color-fill-neutral-hovered); } .chevron { width: 0.4rem; height: 0.4rem; margin-inline-start: var(--gw-space-1); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.125rem; transition: rotate var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .trigger[aria-expanded=\"true\"] .chevron { rotate: 225deg; translate: 0 0.125rem; } [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-block, flip-inline; inset: auto; top: anchor(bottom); left: anchor(left); box-sizing: border-box; min-width: 15rem; max-height: min(24rem, 60vh); padding: 0; margin: var(--gw-space-1) 0 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-l); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.25rem; transition: opacity var(--gw-motion-fast) 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; } [popover]:popover-open { display: flex; flex-direction: column; opacity: 1; translate: 0 0; } @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -0.25rem; } } /* The items scroll; the actions stay put below them, so \"Add\" is always in reach rather than at the end of a long list */ .items, .actions { display: flex; flex-direction: column; gap: var(--gw-space-0-5); padding: var(--gw-space-1); } .items { flex: 1; min-height: 0; overflow-y: auto; } .actions { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .empty { padding: var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .item { display: flex; gap: var(--gw-space-3); align-items: center; box-sizing: border-box; min-height: 2.5rem; padding: var(--gw-space-2) var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); text-align: start; cursor: pointer; background: transparent; border: 0; border-radius: var(--gw-radius-m); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: 1.125rem; } .item:hover, .item:focus-visible { background: var(--gw-color-fill-neutral-hovered); outline: none; } .item:focus-visible { box-shadow: inset 0 0 0 var(--gw-focus-width) var(--gw-color-focus); } .item:disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; background: transparent; } .action { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-accent); } .text { display: flex; flex-direction: column; gap: var(--gw-space-0-5); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } `, ]",
|
|
10310
|
+
"default": "[ base, controlSizes(\"menu-button\"), css` :host { position: relative; display: inline-block; anchor-scope: --gw-menu; } .trigger { --gw-size: var(--gw-menu-button-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); --gw-icon-size: calc(1.25rem * var(--gw-scale)); display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2.5rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-4) * var(--gw-size)); font: inherit; font-size: calc(var(--gw-font-size-s) * var(--gw-size)); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); cursor: pointer; background: var(--gw-color-fill-neutral-resting); border: var(--gw-border-width) solid var(--gw-border-color); border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); anchor-name: --gw-menu; } .trigger:hover { background: var(--gw-color-fill-neutral-hovered); } .chevron { width: 0.4rem; height: 0.4rem; margin-inline-start: var(--gw-space-1); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.125rem; transition: rotate var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .trigger[aria-expanded=\"true\"] .chevron { rotate: 225deg; translate: 0 0.125rem; } [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-block, flip-inline; inset: auto; top: anchor(bottom); left: anchor(left); box-sizing: border-box; min-width: 15rem; max-height: min(24rem, 60vh); padding: 0; margin: var(--gw-space-1) 0 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-l); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.25rem; transition: opacity var(--gw-motion-fast) 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; } [popover]:popover-open { display: flex; flex-direction: column; opacity: 1; translate: 0 0; } @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -0.25rem; } } /* The items scroll; the actions stay put below them, so \"Add\" is always in reach rather than at the end of a long list */ .items, .actions { display: flex; flex-direction: column; gap: var(--gw-space-0-5); padding: var(--gw-space-1); } .items { flex: 1; min-height: 0; overflow-y: auto; } .actions { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .empty { padding: var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .item { display: flex; gap: var(--gw-space-3); align-items: center; box-sizing: border-box; min-height: 2.5rem; padding: var(--gw-space-2) var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); text-align: start; cursor: pointer; background: transparent; border: 0; border-radius: var(--gw-radius-m); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: 1.125rem; } .item:hover, .item:focus-visible { background: var(--gw-color-fill-neutral-hovered); outline: none; } .item:focus-visible { box-shadow: inset 0 0 0 var(--gw-focus-width) var(--gw-color-focus); } .item:disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; background: transparent; } .action { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-accent); } .text { display: flex; flex-direction: column; gap: var(--gw-space-0-5); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } `, ]",
|
|
10220
10311
|
"inheritedFrom": {
|
|
10221
10312
|
"name": "GwElement",
|
|
10222
10313
|
"module": "src/element.ts"
|
|
@@ -10264,6 +10355,14 @@
|
|
|
10264
10355
|
},
|
|
10265
10356
|
"default": "[]"
|
|
10266
10357
|
},
|
|
10358
|
+
{
|
|
10359
|
+
"kind": "field",
|
|
10360
|
+
"name": "size",
|
|
10361
|
+
"type": {
|
|
10362
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
10363
|
+
},
|
|
10364
|
+
"default": "\"medium\""
|
|
10365
|
+
},
|
|
10267
10366
|
{
|
|
10268
10367
|
"kind": "field",
|
|
10269
10368
|
"name": "#trigger",
|
|
@@ -10707,6 +10806,13 @@
|
|
|
10707
10806
|
},
|
|
10708
10807
|
"description": "Actions pinned under the items, as JSON.",
|
|
10709
10808
|
"name": "actions"
|
|
10809
|
+
},
|
|
10810
|
+
{
|
|
10811
|
+
"type": {
|
|
10812
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
10813
|
+
},
|
|
10814
|
+
"description": "The trigger's size, 24 to 56px tall. Defaults to `medium`.",
|
|
10815
|
+
"name": "size"
|
|
10710
10816
|
}
|
|
10711
10817
|
],
|
|
10712
10818
|
"superclass": {
|
|
@@ -14455,6 +14561,16 @@
|
|
|
14455
14561
|
"kind": "class",
|
|
14456
14562
|
"description": "Picks one of a few options, as a row of native radio buttons, so arrow\nkeys move between them and a form submits the choice. Fires `change`.\n\nOptions can carry icons, as Home Assistant's toggles do. `labels` decides\nwhether their text shows: `show` (the default), `hide` (icons only, with\nthe text as a tooltip and accessible name) or `auto`, which shows the text\non wide screens and only the icons on narrow ones.",
|
|
14457
14563
|
"name": "GwSegmented",
|
|
14564
|
+
"cssProperties": [
|
|
14565
|
+
{
|
|
14566
|
+
"description": "Scales the control, around 1 for medium.",
|
|
14567
|
+
"name": "--gw-segmented-scale"
|
|
14568
|
+
},
|
|
14569
|
+
{
|
|
14570
|
+
"description": "Scales its height and icons with the theme's density. The theme sets it.",
|
|
14571
|
+
"name": "--gw-control-scale"
|
|
14572
|
+
}
|
|
14573
|
+
],
|
|
14458
14574
|
"cssParts": [
|
|
14459
14575
|
{
|
|
14460
14576
|
"description": "Each option.",
|
|
@@ -14473,7 +14589,7 @@
|
|
|
14473
14589
|
"text": "Properties"
|
|
14474
14590
|
},
|
|
14475
14591
|
"static": true,
|
|
14476
|
-
"default": "{ label: {}, name: {}, value: { reflect: true }, labels: { reflect: true }, options: { type: \"json\" }, }",
|
|
14592
|
+
"default": "{ label: {}, name: {}, value: { reflect: true }, labels: { reflect: true }, options: { type: \"json\" }, size: { reflect: true }, }",
|
|
14477
14593
|
"inheritedFrom": {
|
|
14478
14594
|
"name": "GwElement",
|
|
14479
14595
|
"module": "src/element.ts"
|
|
@@ -14486,7 +14602,7 @@
|
|
|
14486
14602
|
"text": "readonly CSSStyleSheet[]"
|
|
14487
14603
|
},
|
|
14488
14604
|
"static": true,
|
|
14489
|
-
"default": "[ base, css` :host { display: inline-block; } /* A pill track with the picked option as a pill inside, as Home Assistant's toggles are */ fieldset { display: inline-flex; gap: 2px; padding: 3px; margin: 0; background: var(--gw-color-surface-lower); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-pill); } legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } label { position: relative; display: inline-flex; gap: var(--gw-space-2); align-items: center; box-sizing: border-box; /* 32px options in a 40px track, matching fields and buttons */ height: 2rem; padding: 0 var(--gw-space-3); font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); cursor: pointer; background: transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: 1.125rem; } :host([labels=\"hide\"]) label.has-icon { padding-inline: var(--gw-space-2); } :host([labels=\"hide\"]) label.has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) label.has-icon { padding-inline: var(--gw-space-2); } :host([labels=\"auto\"]) label.has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } label:hover { background: var(--gw-color-fill-neutral-hovered); } input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; } /* The picked pill is one element that slides between options, under their text, so the choice moves rather than jumps */ fieldset { position: relative; isolation: isolate; } .indicator { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: -1; background: var(--gw-color-fill-accent-resting); border-radius: var(--gw-radius-pill); box-shadow: var(--gw-shadow-s); opacity: 0; } .indicator.placed { opacity: 1; } .indicator.moving { transition: translate var(--gw-motion-normal) var(--gw-motion-easing), width var(--gw-motion-normal) var(--gw-motion-easing), height var(--gw-motion-normal) var(--gw-motion-easing); } label { transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-normal) var(--gw-motion-easing); } label:has(input:checked), label:has(input:checked):hover { color: var(--gw-color-on-accent); background: transparent; } label:has(input:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); /* Inset, so the ring sits inside the track rather than on its border */ outline-offset: calc(var(--gw-focus-width) * -1); } `, ]",
|
|
14605
|
+
"default": "[ base, controlSizes(\"segmented\"), css` :host { --gw-size: var(--gw-segmented-scale, 1); --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1)); display: inline-block; } /* A pill track with the picked option as a pill inside, as Home Assistant's toggles are */ fieldset { display: inline-flex; gap: 2px; padding: 3px; margin: 0; background: var(--gw-color-surface-lower); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-pill); } legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } label { position: relative; display: inline-flex; gap: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; /* 32px options in a 40px track at medium, matching fields and buttons */ height: calc(2rem * var(--gw-scale)); padding: 0 calc(var(--gw-space-3) * var(--gw-size)); font-size: calc(var(--gw-font-size-s) * var(--gw-size)); color: var(--gw-color-text-primary); cursor: pointer; background: transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: calc(1.125rem * var(--gw-scale)); } :host([labels=\"hide\"]) label.has-icon { padding-inline: var(--gw-space-2); } :host([labels=\"hide\"]) label.has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) label.has-icon { padding-inline: var(--gw-space-2); } :host([labels=\"auto\"]) label.has-icon .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } label:hover { background: var(--gw-color-fill-neutral-hovered); } input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; } /* The picked pill is one element that slides between options, under their text, so the choice moves rather than jumps */ fieldset { position: relative; isolation: isolate; } .indicator { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: -1; background: var(--gw-color-fill-accent-resting); border-radius: var(--gw-radius-pill); box-shadow: var(--gw-shadow-s); opacity: 0; } .indicator.placed { opacity: 1; } .indicator.moving { transition: translate var(--gw-motion-normal) var(--gw-motion-easing), width var(--gw-motion-normal) var(--gw-motion-easing), height var(--gw-motion-normal) var(--gw-motion-easing); } label { transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-normal) var(--gw-motion-easing); } label:has(input:checked), label:has(input:checked):hover { color: var(--gw-color-on-accent); background: transparent; } label:has(input:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); /* Inset, so the ring sits inside the track rather than on its border */ outline-offset: calc(var(--gw-focus-width) * -1); } `, ]",
|
|
14490
14606
|
"inheritedFrom": {
|
|
14491
14607
|
"name": "GwElement",
|
|
14492
14608
|
"module": "src/element.ts"
|
|
@@ -14532,6 +14648,14 @@
|
|
|
14532
14648
|
},
|
|
14533
14649
|
"default": "[]"
|
|
14534
14650
|
},
|
|
14651
|
+
{
|
|
14652
|
+
"kind": "field",
|
|
14653
|
+
"name": "size",
|
|
14654
|
+
"type": {
|
|
14655
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
14656
|
+
},
|
|
14657
|
+
"default": "\"medium\""
|
|
14658
|
+
},
|
|
14535
14659
|
{
|
|
14536
14660
|
"kind": "field",
|
|
14537
14661
|
"name": "#legend",
|
|
@@ -14949,6 +15073,13 @@
|
|
|
14949
15073
|
},
|
|
14950
15074
|
"description": "The options, as JSON.",
|
|
14951
15075
|
"name": "options"
|
|
15076
|
+
},
|
|
15077
|
+
{
|
|
15078
|
+
"type": {
|
|
15079
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
15080
|
+
},
|
|
15081
|
+
"description": "The size, 40px tall at medium. Defaults to `medium`.",
|
|
15082
|
+
"name": "size"
|
|
14952
15083
|
}
|
|
14953
15084
|
],
|
|
14954
15085
|
"superclass": {
|
|
@@ -14979,6 +15110,16 @@
|
|
|
14979
15110
|
"kind": "class",
|
|
14980
15111
|
"description": "A labeled select whose list opens under it, after Home Assistant's\npickers. Long lists get a search field, focused as the list opens, and\nonly the options in view are rendered. Move with the arrow keys and pick\nwith Enter. Below 600px wide the list is a bottom sheet.\n\nPass `options`, or write `<option>` children (in `<optgroup>`s for\ngroups, with `data-icon`, `data-swatch` and `data-description`), which it\nreads once when it first connects. A hidden input carries the value in\nforms, and it fires `change` when the value changes.\n\nWith `multiple` it picks several: each pick toggles an option in `values`\nand the list stays open, the trigger shows the first choice and how many\nmore, and a Clear button under the list empties it. A hidden input per\nvalue carries them in forms.",
|
|
14981
15112
|
"name": "GwSelect",
|
|
15113
|
+
"cssProperties": [
|
|
15114
|
+
{
|
|
15115
|
+
"description": "Scales the field, around 1 for medium.",
|
|
15116
|
+
"name": "--gw-field-scale"
|
|
15117
|
+
},
|
|
15118
|
+
{
|
|
15119
|
+
"description": "Scales its height with the theme's density. The theme sets it.",
|
|
15120
|
+
"name": "--gw-control-scale"
|
|
15121
|
+
}
|
|
15122
|
+
],
|
|
14982
15123
|
"members": [
|
|
14983
15124
|
{
|
|
14984
15125
|
"kind": "field",
|
|
@@ -14987,7 +15128,7 @@
|
|
|
14987
15128
|
"text": "Properties"
|
|
14988
15129
|
},
|
|
14989
15130
|
"static": true,
|
|
14990
|
-
"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 }, }",
|
|
15131
|
+
"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 }, }",
|
|
14991
15132
|
"inheritedFrom": {
|
|
14992
15133
|
"name": "GwElement",
|
|
14993
15134
|
"module": "src/element.ts"
|
|
@@ -15107,6 +15248,14 @@
|
|
|
15107
15248
|
},
|
|
15108
15249
|
"default": "false"
|
|
15109
15250
|
},
|
|
15251
|
+
{
|
|
15252
|
+
"kind": "field",
|
|
15253
|
+
"name": "size",
|
|
15254
|
+
"type": {
|
|
15255
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
15256
|
+
},
|
|
15257
|
+
"default": "\"medium\""
|
|
15258
|
+
},
|
|
15110
15259
|
{
|
|
15111
15260
|
"kind": "field",
|
|
15112
15261
|
"name": "#id",
|
|
@@ -15669,6 +15818,13 @@
|
|
|
15669
15818
|
},
|
|
15670
15819
|
"description": "Shows the label inside the trigger, before the value, for toolbars and filters.",
|
|
15671
15820
|
"name": "inline-label"
|
|
15821
|
+
},
|
|
15822
|
+
{
|
|
15823
|
+
"type": {
|
|
15824
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
15825
|
+
},
|
|
15826
|
+
"description": "The field's size, 40px tall at medium. Defaults to `medium`.",
|
|
15827
|
+
"name": "size"
|
|
15672
15828
|
}
|
|
15673
15829
|
],
|
|
15674
15830
|
"superclass": {
|
|
@@ -15703,6 +15859,10 @@
|
|
|
15703
15859
|
{
|
|
15704
15860
|
"description": "The padding above and below. Defaults to `--gw-space-2`.",
|
|
15705
15861
|
"name": "--gw-row-padding"
|
|
15862
|
+
},
|
|
15863
|
+
{
|
|
15864
|
+
"description": "Scales the text and spacing, around 1 for medium.",
|
|
15865
|
+
"name": "--gw-setting-row-scale"
|
|
15706
15866
|
}
|
|
15707
15867
|
],
|
|
15708
15868
|
"cssParts": [
|
|
@@ -15725,7 +15885,7 @@
|
|
|
15725
15885
|
"text": "Properties"
|
|
15726
15886
|
},
|
|
15727
15887
|
"static": true,
|
|
15728
|
-
"default": "{ heading: {}, description: {}, loading: { type: \"boolean\", reflect: true }, }",
|
|
15888
|
+
"default": "{ heading: {}, description: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
|
|
15729
15889
|
"inheritedFrom": {
|
|
15730
15890
|
"name": "GwElement",
|
|
15731
15891
|
"module": "src/element.ts"
|
|
@@ -15738,7 +15898,7 @@
|
|
|
15738
15898
|
"text": "readonly CSSStyleSheet[]"
|
|
15739
15899
|
},
|
|
15740
15900
|
"static": true,
|
|
15741
|
-
"default": "[ base, css` :host { display: block; } .row { display: flex; flex-wrap: wrap; gap: var(--gw-space-1) var(--gw-space-3); align-items: center; justify-content: space-between; padding: var(--gw-row-padding, var(--gw-space-2)) 0; } /* A full line even in themes without borders, since it separates rows */ :host(:not(:first-of-type)) .row { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); } .text { flex: 1 1 12rem; min-width: 0; } .heading { font-size: var(--gw-font-size-s); 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); } .control { max-width: 100%; } .control-skeleton { width: 3.25rem; min-height: 0; height: 2rem; --gw-skeleton-radius: var(--gw-radius-pill); } `, ]",
|
|
15901
|
+
"default": "[ base, controlSizes(\"setting-row\"), css` :host { --gw-size: var(--gw-setting-row-scale, 1); display: block; } .row { display: flex; flex-wrap: wrap; gap: calc(var(--gw-space-1) * var(--gw-size)) calc(var(--gw-space-3) * var(--gw-size)); align-items: center; justify-content: space-between; padding: var(--gw-row-padding, calc(var(--gw-space-2) * var(--gw-size))) 0; } /* A full line even in themes without borders, since it separates rows */ :host(:not(:first-of-type)) .row { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); } .text { flex: 1 1 12rem; min-width: 0; } .heading { font-size: max( var(--gw-font-size-xs), calc(var(--gw-font-size-s) * var(--gw-size)) ); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: max( var(--gw-font-size-2xs), calc(var(--gw-font-size-xs) * var(--gw-size)) ); color: var(--gw-color-text-secondary); } .control { max-width: 100%; } .control-skeleton { width: 3.25rem; min-height: 0; height: 2rem; --gw-skeleton-radius: var(--gw-radius-pill); } `, ]",
|
|
15742
15902
|
"inheritedFrom": {
|
|
15743
15903
|
"name": "GwElement",
|
|
15744
15904
|
"module": "src/element.ts"
|
|
@@ -15768,6 +15928,14 @@
|
|
|
15768
15928
|
},
|
|
15769
15929
|
"default": "false"
|
|
15770
15930
|
},
|
|
15931
|
+
{
|
|
15932
|
+
"kind": "field",
|
|
15933
|
+
"name": "size",
|
|
15934
|
+
"type": {
|
|
15935
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
15936
|
+
},
|
|
15937
|
+
"default": "\"medium\""
|
|
15938
|
+
},
|
|
15771
15939
|
{
|
|
15772
15940
|
"kind": "field",
|
|
15773
15941
|
"name": "#row",
|
|
@@ -16158,6 +16326,13 @@
|
|
|
16158
16326
|
},
|
|
16159
16327
|
"description": "Shows skeletons for the control and any unknown text.",
|
|
16160
16328
|
"name": "loading"
|
|
16329
|
+
},
|
|
16330
|
+
{
|
|
16331
|
+
"type": {
|
|
16332
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
16333
|
+
},
|
|
16334
|
+
"description": "The text and spacing size. Defaults to `medium`.",
|
|
16335
|
+
"name": "size"
|
|
16161
16336
|
}
|
|
16162
16337
|
],
|
|
16163
16338
|
"superclass": {
|
|
@@ -21797,6 +21972,19 @@
|
|
|
21797
21972
|
"kind": "javascript-module",
|
|
21798
21973
|
"path": "src/styles.ts",
|
|
21799
21974
|
"declarations": [
|
|
21975
|
+
{
|
|
21976
|
+
"kind": "function",
|
|
21977
|
+
"name": "controlSizes",
|
|
21978
|
+
"parameters": [
|
|
21979
|
+
{
|
|
21980
|
+
"name": "name",
|
|
21981
|
+
"type": {
|
|
21982
|
+
"text": "string"
|
|
21983
|
+
}
|
|
21984
|
+
}
|
|
21985
|
+
],
|
|
21986
|
+
"description": "The `xs` to `xl` presets on a `size` attribute, as `--gw-<name>-scale`\naround 1 for medium, so an app can also set any size between or beyond\nthem. A control multiplies its height and icon by `--gw-control-scale`\ntoo, which follows the theme's density, and its text only by its own\nscale, since spacing and type already follow density on their own."
|
|
21987
|
+
},
|
|
21800
21988
|
{
|
|
21801
21989
|
"kind": "variable",
|
|
21802
21990
|
"name": "base",
|
|
@@ -21844,6 +22032,14 @@
|
|
|
21844
22032
|
}
|
|
21845
22033
|
],
|
|
21846
22034
|
"exports": [
|
|
22035
|
+
{
|
|
22036
|
+
"kind": "js",
|
|
22037
|
+
"name": "controlSizes",
|
|
22038
|
+
"declaration": {
|
|
22039
|
+
"name": "controlSizes",
|
|
22040
|
+
"module": "src/styles.ts"
|
|
22041
|
+
}
|
|
22042
|
+
},
|
|
21847
22043
|
{
|
|
21848
22044
|
"kind": "js",
|
|
21849
22045
|
"name": "base",
|