@timmo001/groundwork-ui 0.5.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 +641 -27
- package/package.json +1 -1
- package/src/fields.ts +32 -6
- package/src/gw-alert.ts +4 -0
- package/src/gw-app-bar.ts +106 -42
- package/src/gw-badge.ts +40 -20
- package/src/gw-banner.ts +4 -0
- package/src/gw-button.ts +8 -24
- package/src/gw-card.ts +102 -6
- package/src/gw-chip.ts +29 -7
- package/src/gw-command-menu.ts +7 -3
- package/src/gw-dialog.ts +15 -5
- package/src/gw-dot.ts +2 -0
- package/src/gw-expansion.ts +7 -2
- package/src/gw-facts.ts +13 -5
- package/src/gw-gauge.ts +11 -5
- package/src/gw-input.ts +7 -0
- package/src/gw-menu-button.ts +17 -5
- package/src/gw-meter.ts +17 -4
- package/src/gw-notification-center.ts +14 -3
- package/src/gw-notification.ts +2 -0
- package/src/gw-option-list.ts +26 -5
- package/src/gw-page-header.ts +7 -3
- package/src/gw-popover.ts +14 -4
- package/src/gw-section-title.ts +3 -1
- package/src/gw-segmented.ts +21 -8
- package/src/gw-select.ts +7 -0
- package/src/gw-setting-row.ts +21 -5
- package/src/gw-skeleton.ts +3 -1
- package/src/gw-spinner.ts +5 -1
- package/src/gw-theme-picker.ts +145 -40
- package/src/gw-toast.ts +3 -1
- 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
|
{
|
|
@@ -1021,6 +1021,20 @@
|
|
|
1021
1021
|
"kind": "class",
|
|
1022
1022
|
"description": "A message in the flow of the page. `urgent` announces it at once, for\nerrors that need attention; otherwise it's announced politely.",
|
|
1023
1023
|
"name": "GwAlert",
|
|
1024
|
+
"cssProperties": [
|
|
1025
|
+
{
|
|
1026
|
+
"description": "The icon color, for a tone of your own. `tone` sets it.",
|
|
1027
|
+
"name": "--gw-tone"
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"description": "The background. `tone` sets it.",
|
|
1031
|
+
"name": "--gw-tone-fill"
|
|
1032
|
+
},
|
|
1033
|
+
{
|
|
1034
|
+
"description": "The border. `tone` sets it.",
|
|
1035
|
+
"name": "--gw-tone-border"
|
|
1036
|
+
}
|
|
1037
|
+
],
|
|
1024
1038
|
"cssParts": [
|
|
1025
1039
|
{
|
|
1026
1040
|
"description": "The alert.",
|
|
@@ -1465,16 +1479,24 @@
|
|
|
1465
1479
|
"declarations": [
|
|
1466
1480
|
{
|
|
1467
1481
|
"kind": "class",
|
|
1468
|
-
"description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden until then, so a
|
|
1482
|
+
"description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden, taking no room, until then, so a\nlarge logo in the hero hands over to the small one in the bar. The nav\nslides over as it opens.\n\n`overlay` lays it over the top of the page rather than taking room, for a\npage that opens with a hero. Below `menu-below`, 600px wide by default,\nthe nav moves into a menu opened from a button, which closes on Esc, a\nclick outside or a link. Raise it when the nav and actions need more room.",
|
|
1469
1483
|
"name": "GwAppBar",
|
|
1470
1484
|
"cssParts": [
|
|
1471
1485
|
{
|
|
1472
1486
|
"description": "The bar.",
|
|
1473
1487
|
"name": "bar"
|
|
1474
1488
|
},
|
|
1489
|
+
{
|
|
1490
|
+
"description": "The brand's container.",
|
|
1491
|
+
"name": "brand"
|
|
1492
|
+
},
|
|
1475
1493
|
{
|
|
1476
1494
|
"description": "The nav links' container, the menu panel on narrow screens.",
|
|
1477
1495
|
"name": "nav"
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"description": "The actions' container.",
|
|
1499
|
+
"name": "actions"
|
|
1478
1500
|
}
|
|
1479
1501
|
],
|
|
1480
1502
|
"slots": [
|
|
@@ -1499,7 +1521,7 @@
|
|
|
1499
1521
|
"text": "Properties"
|
|
1500
1522
|
},
|
|
1501
1523
|
"static": true,
|
|
1502
|
-
"default": "{ revealAfter: { attribute: \"reveal-after\" }, overlay: { type: \"boolean\", reflect: true }, floating: { type: \"boolean\", reflect: true }, menuOpen: { type: \"boolean\", attribute: \"menu-open\", reflect: true }, menuLabel: { attribute: \"menu-label\" }, }",
|
|
1524
|
+
"default": "{ revealAfter: { attribute: \"reveal-after\" }, overlay: { type: \"boolean\", reflect: true }, floating: { type: \"boolean\", reflect: true }, menuOpen: { type: \"boolean\", attribute: \"menu-open\", reflect: true }, menuLabel: { attribute: \"menu-label\" }, menuBelow: { type: \"number\", attribute: \"menu-below\" }, collapsed: { type: \"boolean\", reflect: true }, }",
|
|
1503
1525
|
"inheritedFrom": {
|
|
1504
1526
|
"name": "GwElement",
|
|
1505
1527
|
"module": "src/element.ts"
|
|
@@ -1512,7 +1534,7 @@
|
|
|
1512
1534
|
"text": "readonly CSSStyleSheet[]"
|
|
1513
1535
|
},
|
|
1514
1536
|
"static": true,
|
|
1515
|
-
"default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } .brand { display:
|
|
1537
|
+
"default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } /* A one-column grid, so a hidden brand can fold its width to nothing and the nav slides over as it opens, rather than leaving a gap */ .brand { display: grid; flex: none; grid-template-columns: 1fr; align-items: center; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .brand > slot { display: flex; align-items: center; min-width: 0; overflow: clip; overflow-clip-margin: calc( var(--gw-focus-width) + var(--gw-focus-offset) ); } :host([reveal-after]:not([floating])) .brand { grid-template-columns: 0fr; margin-inline-end: calc(var(--gw-space-3) * -1); pointer-events: none; visibility: hidden; opacity: 0; translate: 0 -0.25rem; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-slow) allow-discrete; } .nav { display: flex; flex: 1; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } .menu { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gw-color-text-strong); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } .menu:hover { background: var(--gw-color-fill-neutral-hovered); } /* Below menu-below, which sets collapsed, the nav folds into a menu */ :host([collapsed]) .menu { display: inline-grid; } :host([collapsed]) .nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: var(--gw-space-0-5); align-items: stretch; padding: var(--gw-space-2) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); visibility: hidden; background: var(--gw-color-surface-default); border-block-end: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.5rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } :host([collapsed][menu-open]) .nav { visibility: visible; opacity: 1; translate: 0 0; } `, ]",
|
|
1516
1538
|
"inheritedFrom": {
|
|
1517
1539
|
"name": "GwElement",
|
|
1518
1540
|
"module": "src/element.ts"
|
|
@@ -1558,6 +1580,38 @@
|
|
|
1558
1580
|
},
|
|
1559
1581
|
"default": "\"Menu\""
|
|
1560
1582
|
},
|
|
1583
|
+
{
|
|
1584
|
+
"kind": "field",
|
|
1585
|
+
"name": "menuBelow",
|
|
1586
|
+
"type": {
|
|
1587
|
+
"text": "number"
|
|
1588
|
+
},
|
|
1589
|
+
"description": "The viewport width in pixels below which the nav moves into a menu.",
|
|
1590
|
+
"default": "600"
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
"kind": "field",
|
|
1594
|
+
"name": "collapsed",
|
|
1595
|
+
"type": {
|
|
1596
|
+
"text": "boolean"
|
|
1597
|
+
},
|
|
1598
|
+
"description": "Whether the nav is in the menu. Set by the bar from `menuBelow`.",
|
|
1599
|
+
"default": "false"
|
|
1600
|
+
},
|
|
1601
|
+
{
|
|
1602
|
+
"kind": "field",
|
|
1603
|
+
"name": "#narrow",
|
|
1604
|
+
"privacy": "private",
|
|
1605
|
+
"type": {
|
|
1606
|
+
"text": "MediaQueryList | undefined"
|
|
1607
|
+
}
|
|
1608
|
+
},
|
|
1609
|
+
{
|
|
1610
|
+
"kind": "field",
|
|
1611
|
+
"name": "#onNarrow",
|
|
1612
|
+
"privacy": "private",
|
|
1613
|
+
"readonly": true
|
|
1614
|
+
},
|
|
1561
1615
|
{
|
|
1562
1616
|
"kind": "field",
|
|
1563
1617
|
"name": "#menuIcon",
|
|
@@ -1593,6 +1647,12 @@
|
|
|
1593
1647
|
},
|
|
1594
1648
|
"default": "0"
|
|
1595
1649
|
},
|
|
1650
|
+
{
|
|
1651
|
+
"kind": "method",
|
|
1652
|
+
"name": "#watchWidth",
|
|
1653
|
+
"privacy": "private",
|
|
1654
|
+
"description": "Follows the viewport across `menuBelow`, setting `collapsed`."
|
|
1655
|
+
},
|
|
1596
1656
|
{
|
|
1597
1657
|
"kind": "method",
|
|
1598
1658
|
"name": "toggleMenu",
|
|
@@ -1976,6 +2036,20 @@
|
|
|
1976
2036
|
"description": "Whether it floats. Set by the bar as the page scrolls.",
|
|
1977
2037
|
"name": "floating"
|
|
1978
2038
|
},
|
|
2039
|
+
{
|
|
2040
|
+
"type": {
|
|
2041
|
+
"text": "number"
|
|
2042
|
+
},
|
|
2043
|
+
"description": "The viewport width in pixels below which the nav moves into a menu. Defaults to `600`.",
|
|
2044
|
+
"name": "menu-below"
|
|
2045
|
+
},
|
|
2046
|
+
{
|
|
2047
|
+
"type": {
|
|
2048
|
+
"text": "boolean"
|
|
2049
|
+
},
|
|
2050
|
+
"description": "Whether the nav is in the menu. Set by the bar from `menu-below`.",
|
|
2051
|
+
"name": "collapsed"
|
|
2052
|
+
},
|
|
1979
2053
|
{
|
|
1980
2054
|
"type": {
|
|
1981
2055
|
"text": "boolean"
|
|
@@ -2019,10 +2093,32 @@
|
|
|
2019
2093
|
"kind": "class",
|
|
2020
2094
|
"description": "A pill with an icon, a value and an optional small label above it. The\nicon takes the `tone`'s color. While `loading`, a skeleton stands in for\nthe value, and for the icon if it has none yet, and the value fades in\nonce it's loaded.",
|
|
2021
2095
|
"name": "GwBadge",
|
|
2096
|
+
"cssProperties": [
|
|
2097
|
+
{
|
|
2098
|
+
"description": "The icon's color, for a tone of your own. `tone` sets it.",
|
|
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"
|
|
2108
|
+
}
|
|
2109
|
+
],
|
|
2022
2110
|
"cssParts": [
|
|
2023
2111
|
{
|
|
2024
2112
|
"description": "The badge.",
|
|
2025
2113
|
"name": "badge"
|
|
2114
|
+
},
|
|
2115
|
+
{
|
|
2116
|
+
"description": "The label above the value.",
|
|
2117
|
+
"name": "label"
|
|
2118
|
+
},
|
|
2119
|
+
{
|
|
2120
|
+
"description": "The value.",
|
|
2121
|
+
"name": "value"
|
|
2026
2122
|
}
|
|
2027
2123
|
],
|
|
2028
2124
|
"slots": [
|
|
@@ -2052,7 +2148,7 @@
|
|
|
2052
2148
|
"text": "readonly CSSStyleSheet[]"
|
|
2053
2149
|
},
|
|
2054
2150
|
"static": true,
|
|
2055
|
-
"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; } `, ]",
|
|
2056
2152
|
"inheritedFrom": {
|
|
2057
2153
|
"name": "GwElement",
|
|
2058
2154
|
"module": "src/element.ts"
|
|
@@ -2086,7 +2182,7 @@
|
|
|
2086
2182
|
"kind": "field",
|
|
2087
2183
|
"name": "size",
|
|
2088
2184
|
"type": {
|
|
2089
|
-
"text": "\"small\" | \"medium\""
|
|
2185
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
2090
2186
|
},
|
|
2091
2187
|
"default": "\"medium\""
|
|
2092
2188
|
},
|
|
@@ -2470,9 +2566,9 @@
|
|
|
2470
2566
|
},
|
|
2471
2567
|
{
|
|
2472
2568
|
"type": {
|
|
2473
|
-
"text": "\"small\"|\"medium\""
|
|
2569
|
+
"text": "\"xs\"|\"small\"|\"medium\"|\"large\"|\"xl\""
|
|
2474
2570
|
},
|
|
2475
|
-
"description": "The size. Defaults to `medium`.",
|
|
2571
|
+
"description": "The size, around 36px tall at medium. Defaults to `medium`.",
|
|
2476
2572
|
"name": "size"
|
|
2477
2573
|
},
|
|
2478
2574
|
{
|
|
@@ -2511,6 +2607,20 @@
|
|
|
2511
2607
|
"kind": "class",
|
|
2512
2608
|
"description": "A slim bar across the top of the app for app-wide state the person can\nwork through: a restart is needed, the connection is lost, or a new\nversion is ready. Put it above the app's content, not over it. Its height\nopens and closes smoothly, so the page below moves with it rather than\njumping. Put one action in the `actions` slot, which opens what it's\nabout. `urgent` announces it at once.",
|
|
2513
2609
|
"name": "GwBanner",
|
|
2610
|
+
"cssProperties": [
|
|
2611
|
+
{
|
|
2612
|
+
"description": "The text and icon color, for a tone of your own. `tone` sets it.",
|
|
2613
|
+
"name": "--gw-tone"
|
|
2614
|
+
},
|
|
2615
|
+
{
|
|
2616
|
+
"description": "The background. `tone` sets it.",
|
|
2617
|
+
"name": "--gw-tone-fill"
|
|
2618
|
+
},
|
|
2619
|
+
{
|
|
2620
|
+
"description": "The border. `tone` sets it.",
|
|
2621
|
+
"name": "--gw-tone-border"
|
|
2622
|
+
}
|
|
2623
|
+
],
|
|
2514
2624
|
"cssParts": [
|
|
2515
2625
|
{
|
|
2516
2626
|
"description": "The bar.",
|
|
@@ -2956,6 +3066,10 @@
|
|
|
2956
3066
|
"description": "Scales every dimension, around 1 for medium.",
|
|
2957
3067
|
"name": "--gw-button-scale"
|
|
2958
3068
|
},
|
|
3069
|
+
{
|
|
3070
|
+
"description": "Scales its height and icon with the theme's density. The theme sets it.",
|
|
3071
|
+
"name": "--gw-control-scale"
|
|
3072
|
+
},
|
|
2959
3073
|
{
|
|
2960
3074
|
"description": "The color, set by `variant`.",
|
|
2961
3075
|
"name": "--gw-button-tone"
|
|
@@ -3016,7 +3130,7 @@
|
|
|
3016
3130
|
"text": "readonly CSSStyleSheet[]"
|
|
3017
3131
|
},
|
|
3018
3132
|
"static": true,
|
|
3019
|
-
"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; } } `, ]",
|
|
3020
3134
|
"inheritedFrom": {
|
|
3021
3135
|
"name": "GwElement",
|
|
3022
3136
|
"module": "src/element.ts"
|
|
@@ -3550,12 +3664,24 @@
|
|
|
3550
3664
|
"declarations": [
|
|
3551
3665
|
{
|
|
3552
3666
|
"kind": "class",
|
|
3553
|
-
"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.",
|
|
3554
3668
|
"name": "GwCard",
|
|
3555
3669
|
"cssParts": [
|
|
3556
3670
|
{
|
|
3557
3671
|
"description": "The card's surface.",
|
|
3558
3672
|
"name": "card"
|
|
3673
|
+
},
|
|
3674
|
+
{
|
|
3675
|
+
"description": "The row with the heading and actions.",
|
|
3676
|
+
"name": "header"
|
|
3677
|
+
},
|
|
3678
|
+
{
|
|
3679
|
+
"description": "The heading.",
|
|
3680
|
+
"name": "heading"
|
|
3681
|
+
},
|
|
3682
|
+
{
|
|
3683
|
+
"description": "The content.",
|
|
3684
|
+
"name": "body"
|
|
3559
3685
|
}
|
|
3560
3686
|
],
|
|
3561
3687
|
"slots": [
|
|
@@ -3563,6 +3689,10 @@
|
|
|
3563
3689
|
"description": "The content.",
|
|
3564
3690
|
"name": ""
|
|
3565
3691
|
},
|
|
3692
|
+
{
|
|
3693
|
+
"description": "The heading, in place of `heading`. An `<a>` here makes the whole card follow it.",
|
|
3694
|
+
"name": "heading"
|
|
3695
|
+
},
|
|
3566
3696
|
{
|
|
3567
3697
|
"description": "Buttons beside the heading.",
|
|
3568
3698
|
"name": "actions"
|
|
@@ -3589,7 +3719,7 @@
|
|
|
3589
3719
|
"text": "readonly CSSStyleSheet[]"
|
|
3590
3720
|
},
|
|
3591
3721
|
"static": true,
|
|
3592
|
-
"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; } `, ]",
|
|
3593
3723
|
"inheritedFrom": {
|
|
3594
3724
|
"name": "GwElement",
|
|
3595
3725
|
"module": "src/element.ts"
|
|
@@ -3648,6 +3778,12 @@
|
|
|
3648
3778
|
"privacy": "private",
|
|
3649
3779
|
"readonly": true
|
|
3650
3780
|
},
|
|
3781
|
+
{
|
|
3782
|
+
"kind": "field",
|
|
3783
|
+
"name": "#headingSlot",
|
|
3784
|
+
"privacy": "private",
|
|
3785
|
+
"readonly": true
|
|
3786
|
+
},
|
|
3651
3787
|
{
|
|
3652
3788
|
"kind": "field",
|
|
3653
3789
|
"name": "#header",
|
|
@@ -3692,6 +3828,17 @@
|
|
|
3692
3828
|
},
|
|
3693
3829
|
"default": "false"
|
|
3694
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
|
+
},
|
|
3695
3842
|
{
|
|
3696
3843
|
"kind": "method",
|
|
3697
3844
|
"name": "create",
|
|
@@ -5155,6 +5302,24 @@
|
|
|
5155
5302
|
"kind": "class",
|
|
5156
5303
|
"description": "A short status or category, tinted by its `tone`. While `loading`, a\nskeleton stands in for its text, and the text fades in once it's loaded.",
|
|
5157
5304
|
"name": "GwChip",
|
|
5305
|
+
"cssProperties": [
|
|
5306
|
+
{
|
|
5307
|
+
"description": "The tint, for a tone of your own. `tone` sets it.",
|
|
5308
|
+
"name": "--gw-tone-fill"
|
|
5309
|
+
},
|
|
5310
|
+
{
|
|
5311
|
+
"description": "The border. `tone` sets it.",
|
|
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"
|
|
5321
|
+
}
|
|
5322
|
+
],
|
|
5158
5323
|
"cssParts": [
|
|
5159
5324
|
{
|
|
5160
5325
|
"description": "The chip.",
|
|
@@ -5179,7 +5344,7 @@
|
|
|
5179
5344
|
"text": "Properties"
|
|
5180
5345
|
},
|
|
5181
5346
|
"static": true,
|
|
5182
|
-
"default": "{ tone: { reflect: true }, icon: {}, loading: { type: \"boolean\", reflect: true }, }",
|
|
5347
|
+
"default": "{ tone: { reflect: true }, icon: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
|
|
5183
5348
|
"inheritedFrom": {
|
|
5184
5349
|
"name": "GwElement",
|
|
5185
5350
|
"module": "src/element.ts"
|
|
@@ -5192,7 +5357,7 @@
|
|
|
5192
5357
|
"text": "readonly CSSStyleSheet[]"
|
|
5193
5358
|
},
|
|
5194
5359
|
"static": true,
|
|
5195
|
-
"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; } `, ]",
|
|
5196
5361
|
"inheritedFrom": {
|
|
5197
5362
|
"name": "GwElement",
|
|
5198
5363
|
"module": "src/element.ts"
|
|
@@ -5223,6 +5388,14 @@
|
|
|
5223
5388
|
},
|
|
5224
5389
|
"default": "false"
|
|
5225
5390
|
},
|
|
5391
|
+
{
|
|
5392
|
+
"kind": "field",
|
|
5393
|
+
"name": "size",
|
|
5394
|
+
"type": {
|
|
5395
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
5396
|
+
},
|
|
5397
|
+
"default": "\"medium\""
|
|
5398
|
+
},
|
|
5226
5399
|
{
|
|
5227
5400
|
"kind": "field",
|
|
5228
5401
|
"name": "#icon",
|
|
@@ -5580,6 +5753,13 @@
|
|
|
5580
5753
|
},
|
|
5581
5754
|
"description": "Shows a skeleton for the text.",
|
|
5582
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"
|
|
5583
5763
|
}
|
|
5584
5764
|
],
|
|
5585
5765
|
"superclass": {
|
|
@@ -5610,6 +5790,20 @@
|
|
|
5610
5790
|
"kind": "class",
|
|
5611
5791
|
"description": "A command menu on Cmd+K or Ctrl+K: a searchable list of commands in a\nmodal near the top of the page, or a bottom sheet on phones. Picking one\ncloses the menu and fires `pick` with its value. Esc or a click outside\ncloses it. It won't open over another dialog, so only one overlay shows at\na time. Set `shortcut=\"none\"` to open it only with `show()`.",
|
|
5612
5792
|
"name": "GwCommandMenu",
|
|
5793
|
+
"cssParts": [
|
|
5794
|
+
{
|
|
5795
|
+
"description": "The menu's surface.",
|
|
5796
|
+
"name": "dialog"
|
|
5797
|
+
},
|
|
5798
|
+
{
|
|
5799
|
+
"description": "The `gw-option-list` of commands.",
|
|
5800
|
+
"name": "list"
|
|
5801
|
+
},
|
|
5802
|
+
{
|
|
5803
|
+
"description": "The row of key hints.",
|
|
5804
|
+
"name": "footer"
|
|
5805
|
+
}
|
|
5806
|
+
],
|
|
5613
5807
|
"members": [
|
|
5614
5808
|
{
|
|
5615
5809
|
"kind": "field",
|
|
@@ -6090,6 +6284,28 @@
|
|
|
6090
6284
|
"kind": "class",
|
|
6091
6285
|
"description": "A modal on the native `<dialog>`, so focus is trapped and returned, Esc\ncloses it and the page behind is inert. Open it with `show()`. Put buttons\nin the `actions` slot; a click on one with a `value` closes the dialog with\nthat value, and fires `close`.",
|
|
6092
6286
|
"name": "GwDialog",
|
|
6287
|
+
"cssParts": [
|
|
6288
|
+
{
|
|
6289
|
+
"description": "The dialog's surface.",
|
|
6290
|
+
"name": "dialog"
|
|
6291
|
+
},
|
|
6292
|
+
{
|
|
6293
|
+
"description": "The row with the heading and close button.",
|
|
6294
|
+
"name": "header"
|
|
6295
|
+
},
|
|
6296
|
+
{
|
|
6297
|
+
"description": "The heading.",
|
|
6298
|
+
"name": "heading"
|
|
6299
|
+
},
|
|
6300
|
+
{
|
|
6301
|
+
"description": "The content.",
|
|
6302
|
+
"name": "body"
|
|
6303
|
+
},
|
|
6304
|
+
{
|
|
6305
|
+
"description": "The actions row.",
|
|
6306
|
+
"name": "footer"
|
|
6307
|
+
}
|
|
6308
|
+
],
|
|
6093
6309
|
"slots": [
|
|
6094
6310
|
{
|
|
6095
6311
|
"description": "The content.",
|
|
@@ -6591,6 +6807,12 @@
|
|
|
6591
6807
|
"kind": "class",
|
|
6592
6808
|
"description": "A small status dot. Give it a `label`, such as \"Online\", unless text\nbeside it already says the same.",
|
|
6593
6809
|
"name": "GwDot",
|
|
6810
|
+
"cssProperties": [
|
|
6811
|
+
{
|
|
6812
|
+
"description": "The color, for a tone of your own. `tone` sets it.",
|
|
6813
|
+
"name": "--gw-tone"
|
|
6814
|
+
}
|
|
6815
|
+
],
|
|
6594
6816
|
"members": [
|
|
6595
6817
|
{
|
|
6596
6818
|
"kind": "field",
|
|
@@ -7447,6 +7669,14 @@
|
|
|
7447
7669
|
"description": "The summary row.",
|
|
7448
7670
|
"name": "summary"
|
|
7449
7671
|
},
|
|
7672
|
+
{
|
|
7673
|
+
"description": "The heading.",
|
|
7674
|
+
"name": "heading"
|
|
7675
|
+
},
|
|
7676
|
+
{
|
|
7677
|
+
"description": "The line under the heading.",
|
|
7678
|
+
"name": "description"
|
|
7679
|
+
},
|
|
7450
7680
|
{
|
|
7451
7681
|
"description": "The content's wrapper.",
|
|
7452
7682
|
"name": "content"
|
|
@@ -7909,6 +8139,20 @@
|
|
|
7909
8139
|
"kind": "class",
|
|
7910
8140
|
"description": "Label and value pairs, as a description list. While `loading`, `rows`\nskeleton pairs stand in for them, keeping any labels already known. The\nlist glides to its new height and the values fade in once they've loaded.",
|
|
7911
8141
|
"name": "GwFacts",
|
|
8142
|
+
"cssParts": [
|
|
8143
|
+
{
|
|
8144
|
+
"description": "The description list.",
|
|
8145
|
+
"name": "list"
|
|
8146
|
+
},
|
|
8147
|
+
{
|
|
8148
|
+
"description": "Each label.",
|
|
8149
|
+
"name": "label"
|
|
8150
|
+
},
|
|
8151
|
+
{
|
|
8152
|
+
"description": "Each value.",
|
|
8153
|
+
"name": "value"
|
|
8154
|
+
}
|
|
8155
|
+
],
|
|
7912
8156
|
"members": [
|
|
7913
8157
|
{
|
|
7914
8158
|
"kind": "field",
|
|
@@ -8800,6 +9044,28 @@
|
|
|
8800
9044
|
"name": "--gw-gauge-color"
|
|
8801
9045
|
}
|
|
8802
9046
|
],
|
|
9047
|
+
"cssParts": [
|
|
9048
|
+
{
|
|
9049
|
+
"description": "The dial, with the arc and the reading.",
|
|
9050
|
+
"name": "dial"
|
|
9051
|
+
},
|
|
9052
|
+
{
|
|
9053
|
+
"description": "The reading's number.",
|
|
9054
|
+
"name": "value"
|
|
9055
|
+
},
|
|
9056
|
+
{
|
|
9057
|
+
"description": "The unit after it.",
|
|
9058
|
+
"name": "unit"
|
|
9059
|
+
},
|
|
9060
|
+
{
|
|
9061
|
+
"description": "What it measures.",
|
|
9062
|
+
"name": "label"
|
|
9063
|
+
},
|
|
9064
|
+
{
|
|
9065
|
+
"description": "The line under the label.",
|
|
9066
|
+
"name": "caption"
|
|
9067
|
+
}
|
|
9068
|
+
],
|
|
8803
9069
|
"members": [
|
|
8804
9070
|
{
|
|
8805
9071
|
"kind": "field",
|
|
@@ -9407,6 +9673,16 @@
|
|
|
9407
9673
|
"kind": "class",
|
|
9408
9674
|
"description": "A labeled native `<input>`, with an optional hint and error.",
|
|
9409
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
|
+
],
|
|
9410
9686
|
"members": [
|
|
9411
9687
|
{
|
|
9412
9688
|
"kind": "field",
|
|
@@ -9415,7 +9691,7 @@
|
|
|
9415
9691
|
"text": "Properties"
|
|
9416
9692
|
},
|
|
9417
9693
|
"static": true,
|
|
9418
|
-
"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 }, }",
|
|
9419
9695
|
"inheritedFrom": {
|
|
9420
9696
|
"name": "GwElement",
|
|
9421
9697
|
"module": "src/element.ts"
|
|
@@ -9510,6 +9786,14 @@
|
|
|
9510
9786
|
},
|
|
9511
9787
|
"default": "false"
|
|
9512
9788
|
},
|
|
9789
|
+
{
|
|
9790
|
+
"kind": "field",
|
|
9791
|
+
"name": "size",
|
|
9792
|
+
"type": {
|
|
9793
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
9794
|
+
},
|
|
9795
|
+
"default": "\"medium\""
|
|
9796
|
+
},
|
|
9513
9797
|
{
|
|
9514
9798
|
"kind": "field",
|
|
9515
9799
|
"name": "#id",
|
|
@@ -9949,6 +10233,13 @@
|
|
|
9949
10233
|
},
|
|
9950
10234
|
"description": "Disables the field.",
|
|
9951
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"
|
|
9952
10243
|
}
|
|
9953
10244
|
],
|
|
9954
10245
|
"superclass": {
|
|
@@ -9979,6 +10270,16 @@
|
|
|
9979
10270
|
"kind": "class",
|
|
9980
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.",
|
|
9981
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
|
+
],
|
|
9982
10283
|
"cssParts": [
|
|
9983
10284
|
{
|
|
9984
10285
|
"description": "The button that opens the menu.",
|
|
@@ -9993,7 +10294,7 @@
|
|
|
9993
10294
|
"text": "Properties"
|
|
9994
10295
|
},
|
|
9995
10296
|
"static": true,
|
|
9996
|
-
"default": "{ label: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, }",
|
|
10297
|
+
"default": "{ label: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, }",
|
|
9997
10298
|
"inheritedFrom": {
|
|
9998
10299
|
"name": "GwElement",
|
|
9999
10300
|
"module": "src/element.ts"
|
|
@@ -10006,7 +10307,7 @@
|
|
|
10006
10307
|
"text": "readonly CSSStyleSheet[]"
|
|
10007
10308
|
},
|
|
10008
10309
|
"static": true,
|
|
10009
|
-
"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); } `, ]",
|
|
10010
10311
|
"inheritedFrom": {
|
|
10011
10312
|
"name": "GwElement",
|
|
10012
10313
|
"module": "src/element.ts"
|
|
@@ -10054,6 +10355,14 @@
|
|
|
10054
10355
|
},
|
|
10055
10356
|
"default": "[]"
|
|
10056
10357
|
},
|
|
10358
|
+
{
|
|
10359
|
+
"kind": "field",
|
|
10360
|
+
"name": "size",
|
|
10361
|
+
"type": {
|
|
10362
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
10363
|
+
},
|
|
10364
|
+
"default": "\"medium\""
|
|
10365
|
+
},
|
|
10057
10366
|
{
|
|
10058
10367
|
"kind": "field",
|
|
10059
10368
|
"name": "#trigger",
|
|
@@ -10497,6 +10806,13 @@
|
|
|
10497
10806
|
},
|
|
10498
10807
|
"description": "Actions pinned under the items, as JSON.",
|
|
10499
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"
|
|
10500
10816
|
}
|
|
10501
10817
|
],
|
|
10502
10818
|
"superclass": {
|
|
@@ -10527,6 +10843,24 @@
|
|
|
10527
10843
|
"kind": "class",
|
|
10528
10844
|
"description": "A labeled bar for a value in a range, such as disk use. Past `high` it\nturns warning, and past `critical` danger, unless a `tone` is set. While\n`loading`, the track pulses and a skeleton stands in for the value.",
|
|
10529
10845
|
"name": "GwMeter",
|
|
10846
|
+
"cssParts": [
|
|
10847
|
+
{
|
|
10848
|
+
"description": "The row with the label and value.",
|
|
10849
|
+
"name": "top"
|
|
10850
|
+
},
|
|
10851
|
+
{
|
|
10852
|
+
"description": "The value as shown.",
|
|
10853
|
+
"name": "value"
|
|
10854
|
+
},
|
|
10855
|
+
{
|
|
10856
|
+
"description": "The bar's track.",
|
|
10857
|
+
"name": "track"
|
|
10858
|
+
},
|
|
10859
|
+
{
|
|
10860
|
+
"description": "The filled part of the bar.",
|
|
10861
|
+
"name": "fill"
|
|
10862
|
+
}
|
|
10863
|
+
],
|
|
10530
10864
|
"members": [
|
|
10531
10865
|
{
|
|
10532
10866
|
"kind": "field",
|
|
@@ -11094,6 +11428,20 @@
|
|
|
11094
11428
|
"kind": "class",
|
|
11095
11429
|
"description": "Where notifications wait until they're dealt with: a list of\n`gw-notification` cards with Clear all, and an empty state once nothing's\nleft. Put it in a page, a panel or a popover from a bell button. Each\ncard folds away when dismissed, and the list closes up smoothly. It fires\n`clear` when Clear all is pressed.",
|
|
11096
11430
|
"name": "GwNotificationCenter",
|
|
11431
|
+
"cssParts": [
|
|
11432
|
+
{
|
|
11433
|
+
"description": "The row with the heading and Clear all.",
|
|
11434
|
+
"name": "header"
|
|
11435
|
+
},
|
|
11436
|
+
{
|
|
11437
|
+
"description": "The heading.",
|
|
11438
|
+
"name": "heading"
|
|
11439
|
+
},
|
|
11440
|
+
{
|
|
11441
|
+
"description": "The list of cards.",
|
|
11442
|
+
"name": "list"
|
|
11443
|
+
}
|
|
11444
|
+
],
|
|
11097
11445
|
"slots": [
|
|
11098
11446
|
{
|
|
11099
11447
|
"description": "The `gw-notification` cards.",
|
|
@@ -11547,6 +11895,12 @@
|
|
|
11547
11895
|
"kind": "class",
|
|
11548
11896
|
"description": "Something new the person needs to decide or know, kept in a\n`gw-notification-center` until it's dealt with. It has an icon, a heading,\na line of text, when it happened and up to two actions. Its close button\ndismisses it: it fires `dismiss`, then folds away and removes itself,\nunless the event is cancelled.",
|
|
11549
11897
|
"name": "GwNotification",
|
|
11898
|
+
"cssProperties": [
|
|
11899
|
+
{
|
|
11900
|
+
"description": "The icon's color, for a tone of your own. `tone` sets it.",
|
|
11901
|
+
"name": "--gw-tone"
|
|
11902
|
+
}
|
|
11903
|
+
],
|
|
11550
11904
|
"cssParts": [
|
|
11551
11905
|
{
|
|
11552
11906
|
"description": "The card.",
|
|
@@ -12051,6 +12405,32 @@
|
|
|
12051
12405
|
"name": "--gw-option-list-height"
|
|
12052
12406
|
}
|
|
12053
12407
|
],
|
|
12408
|
+
"cssParts": [
|
|
12409
|
+
{
|
|
12410
|
+
"description": "The search field's row.",
|
|
12411
|
+
"name": "search"
|
|
12412
|
+
},
|
|
12413
|
+
{
|
|
12414
|
+
"description": "The scrolling list.",
|
|
12415
|
+
"name": "listbox"
|
|
12416
|
+
},
|
|
12417
|
+
{
|
|
12418
|
+
"description": "Each option.",
|
|
12419
|
+
"name": "option"
|
|
12420
|
+
},
|
|
12421
|
+
{
|
|
12422
|
+
"description": "Each group heading.",
|
|
12423
|
+
"name": "group"
|
|
12424
|
+
},
|
|
12425
|
+
{
|
|
12426
|
+
"description": "An option's second line.",
|
|
12427
|
+
"name": "description"
|
|
12428
|
+
},
|
|
12429
|
+
{
|
|
12430
|
+
"description": "The no matches line.",
|
|
12431
|
+
"name": "none"
|
|
12432
|
+
}
|
|
12433
|
+
],
|
|
12054
12434
|
"members": [
|
|
12055
12435
|
{
|
|
12056
12436
|
"kind": "field",
|
|
@@ -12760,6 +13140,20 @@
|
|
|
12760
13140
|
"kind": "class",
|
|
12761
13141
|
"description": "A page's title, with an optional icon tile and description, and its\ncontrols at the top right in the `actions` slot.",
|
|
12762
13142
|
"name": "GwPageHeader",
|
|
13143
|
+
"cssParts": [
|
|
13144
|
+
{
|
|
13145
|
+
"description": "The icon tile.",
|
|
13146
|
+
"name": "tile"
|
|
13147
|
+
},
|
|
13148
|
+
{
|
|
13149
|
+
"description": "The title.",
|
|
13150
|
+
"name": "heading"
|
|
13151
|
+
},
|
|
13152
|
+
{
|
|
13153
|
+
"description": "The line under the title.",
|
|
13154
|
+
"name": "description"
|
|
13155
|
+
}
|
|
13156
|
+
],
|
|
12763
13157
|
"slots": [
|
|
12764
13158
|
{
|
|
12765
13159
|
"description": "The page's controls.",
|
|
@@ -13210,6 +13604,24 @@
|
|
|
13210
13604
|
"name": "--gw-popover-width"
|
|
13211
13605
|
}
|
|
13212
13606
|
],
|
|
13607
|
+
"cssParts": [
|
|
13608
|
+
{
|
|
13609
|
+
"description": "The popover's surface.",
|
|
13610
|
+
"name": "surface"
|
|
13611
|
+
},
|
|
13612
|
+
{
|
|
13613
|
+
"description": "The heading.",
|
|
13614
|
+
"name": "heading"
|
|
13615
|
+
},
|
|
13616
|
+
{
|
|
13617
|
+
"description": "The content.",
|
|
13618
|
+
"name": "body"
|
|
13619
|
+
},
|
|
13620
|
+
{
|
|
13621
|
+
"description": "The actions row.",
|
|
13622
|
+
"name": "footer"
|
|
13623
|
+
}
|
|
13624
|
+
],
|
|
13213
13625
|
"slots": [
|
|
13214
13626
|
{
|
|
13215
13627
|
"description": "The content.",
|
|
@@ -13743,6 +14155,12 @@
|
|
|
13743
14155
|
"kind": "class",
|
|
13744
14156
|
"description": "A small heading between groups on a page, as an `<h2>` unless `level` says otherwise.",
|
|
13745
14157
|
"name": "GwSectionTitle",
|
|
14158
|
+
"cssParts": [
|
|
14159
|
+
{
|
|
14160
|
+
"description": "The heading.",
|
|
14161
|
+
"name": "heading"
|
|
14162
|
+
}
|
|
14163
|
+
],
|
|
13746
14164
|
"slots": [
|
|
13747
14165
|
{
|
|
13748
14166
|
"description": "The heading text.",
|
|
@@ -14143,7 +14561,21 @@
|
|
|
14143
14561
|
"kind": "class",
|
|
14144
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.",
|
|
14145
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
|
+
],
|
|
14146
14574
|
"cssParts": [
|
|
14575
|
+
{
|
|
14576
|
+
"description": "Each option.",
|
|
14577
|
+
"name": "option"
|
|
14578
|
+
},
|
|
14147
14579
|
{
|
|
14148
14580
|
"description": "The pill that slides to the chosen option.",
|
|
14149
14581
|
"name": "indicator"
|
|
@@ -14157,7 +14589,7 @@
|
|
|
14157
14589
|
"text": "Properties"
|
|
14158
14590
|
},
|
|
14159
14591
|
"static": true,
|
|
14160
|
-
"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 }, }",
|
|
14161
14593
|
"inheritedFrom": {
|
|
14162
14594
|
"name": "GwElement",
|
|
14163
14595
|
"module": "src/element.ts"
|
|
@@ -14170,7 +14602,7 @@
|
|
|
14170
14602
|
"text": "readonly CSSStyleSheet[]"
|
|
14171
14603
|
},
|
|
14172
14604
|
"static": true,
|
|
14173
|
-
"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); } `, ]",
|
|
14174
14606
|
"inheritedFrom": {
|
|
14175
14607
|
"name": "GwElement",
|
|
14176
14608
|
"module": "src/element.ts"
|
|
@@ -14216,6 +14648,14 @@
|
|
|
14216
14648
|
},
|
|
14217
14649
|
"default": "[]"
|
|
14218
14650
|
},
|
|
14651
|
+
{
|
|
14652
|
+
"kind": "field",
|
|
14653
|
+
"name": "size",
|
|
14654
|
+
"type": {
|
|
14655
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
14656
|
+
},
|
|
14657
|
+
"default": "\"medium\""
|
|
14658
|
+
},
|
|
14219
14659
|
{
|
|
14220
14660
|
"kind": "field",
|
|
14221
14661
|
"name": "#legend",
|
|
@@ -14633,6 +15073,13 @@
|
|
|
14633
15073
|
},
|
|
14634
15074
|
"description": "The options, as JSON.",
|
|
14635
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"
|
|
14636
15083
|
}
|
|
14637
15084
|
],
|
|
14638
15085
|
"superclass": {
|
|
@@ -14663,6 +15110,16 @@
|
|
|
14663
15110
|
"kind": "class",
|
|
14664
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.",
|
|
14665
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
|
+
],
|
|
14666
15123
|
"members": [
|
|
14667
15124
|
{
|
|
14668
15125
|
"kind": "field",
|
|
@@ -14671,7 +15128,7 @@
|
|
|
14671
15128
|
"text": "Properties"
|
|
14672
15129
|
},
|
|
14673
15130
|
"static": true,
|
|
14674
|
-
"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 }, }",
|
|
14675
15132
|
"inheritedFrom": {
|
|
14676
15133
|
"name": "GwElement",
|
|
14677
15134
|
"module": "src/element.ts"
|
|
@@ -14791,6 +15248,14 @@
|
|
|
14791
15248
|
},
|
|
14792
15249
|
"default": "false"
|
|
14793
15250
|
},
|
|
15251
|
+
{
|
|
15252
|
+
"kind": "field",
|
|
15253
|
+
"name": "size",
|
|
15254
|
+
"type": {
|
|
15255
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
15256
|
+
},
|
|
15257
|
+
"default": "\"medium\""
|
|
15258
|
+
},
|
|
14794
15259
|
{
|
|
14795
15260
|
"kind": "field",
|
|
14796
15261
|
"name": "#id",
|
|
@@ -15353,6 +15818,13 @@
|
|
|
15353
15818
|
},
|
|
15354
15819
|
"description": "Shows the label inside the trigger, before the value, for toolbars and filters.",
|
|
15355
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"
|
|
15356
15828
|
}
|
|
15357
15829
|
],
|
|
15358
15830
|
"superclass": {
|
|
@@ -15387,6 +15859,10 @@
|
|
|
15387
15859
|
{
|
|
15388
15860
|
"description": "The padding above and below. Defaults to `--gw-space-2`.",
|
|
15389
15861
|
"name": "--gw-row-padding"
|
|
15862
|
+
},
|
|
15863
|
+
{
|
|
15864
|
+
"description": "Scales the text and spacing, around 1 for medium.",
|
|
15865
|
+
"name": "--gw-setting-row-scale"
|
|
15390
15866
|
}
|
|
15391
15867
|
],
|
|
15392
15868
|
"cssParts": [
|
|
@@ -15409,7 +15885,7 @@
|
|
|
15409
15885
|
"text": "Properties"
|
|
15410
15886
|
},
|
|
15411
15887
|
"static": true,
|
|
15412
|
-
"default": "{ heading: {}, description: {}, loading: { type: \"boolean\", reflect: true }, }",
|
|
15888
|
+
"default": "{ heading: {}, description: {}, loading: { type: \"boolean\", reflect: true }, size: { reflect: true }, }",
|
|
15413
15889
|
"inheritedFrom": {
|
|
15414
15890
|
"name": "GwElement",
|
|
15415
15891
|
"module": "src/element.ts"
|
|
@@ -15422,7 +15898,7 @@
|
|
|
15422
15898
|
"text": "readonly CSSStyleSheet[]"
|
|
15423
15899
|
},
|
|
15424
15900
|
"static": true,
|
|
15425
|
-
"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); } `, ]",
|
|
15426
15902
|
"inheritedFrom": {
|
|
15427
15903
|
"name": "GwElement",
|
|
15428
15904
|
"module": "src/element.ts"
|
|
@@ -15452,6 +15928,14 @@
|
|
|
15452
15928
|
},
|
|
15453
15929
|
"default": "false"
|
|
15454
15930
|
},
|
|
15931
|
+
{
|
|
15932
|
+
"kind": "field",
|
|
15933
|
+
"name": "size",
|
|
15934
|
+
"type": {
|
|
15935
|
+
"text": "\"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\""
|
|
15936
|
+
},
|
|
15937
|
+
"default": "\"medium\""
|
|
15938
|
+
},
|
|
15455
15939
|
{
|
|
15456
15940
|
"kind": "field",
|
|
15457
15941
|
"name": "#row",
|
|
@@ -15842,6 +16326,13 @@
|
|
|
15842
16326
|
},
|
|
15843
16327
|
"description": "Shows skeletons for the control and any unknown text.",
|
|
15844
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"
|
|
15845
16336
|
}
|
|
15846
16337
|
],
|
|
15847
16338
|
"superclass": {
|
|
@@ -16606,6 +17097,12 @@
|
|
|
16606
17097
|
"kind": "class",
|
|
16607
17098
|
"description": "Several lines of text, as a paragraph, with a shorter last line so it\ndoesn't read as a solid block.",
|
|
16608
17099
|
"name": "GwSkeletonLines",
|
|
17100
|
+
"cssParts": [
|
|
17101
|
+
{
|
|
17102
|
+
"description": "Each line.",
|
|
17103
|
+
"name": "line"
|
|
17104
|
+
}
|
|
17105
|
+
],
|
|
16609
17106
|
"members": [
|
|
16610
17107
|
{
|
|
16611
17108
|
"kind": "field",
|
|
@@ -17393,6 +17890,12 @@
|
|
|
17393
17890
|
"name": "--gw-spinner-size"
|
|
17394
17891
|
}
|
|
17395
17892
|
],
|
|
17893
|
+
"cssParts": [
|
|
17894
|
+
{
|
|
17895
|
+
"description": "The spinning ring.",
|
|
17896
|
+
"name": "ring"
|
|
17897
|
+
}
|
|
17898
|
+
],
|
|
17396
17899
|
"members": [
|
|
17397
17900
|
{
|
|
17398
17901
|
"kind": "field",
|
|
@@ -18320,12 +18823,20 @@
|
|
|
18320
18823
|
"declarations": [
|
|
18321
18824
|
{
|
|
18322
18825
|
"kind": "class",
|
|
18323
|
-
"description": "A palette button for a page's look. It opens a popover with the mode\n(auto, light, dark or Darker), the theme, and buttons to import a theme\nfile (a Groundwork theme's `.json` or an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.\n\n`gallery` swaps the theme select for `gw-theme-gallery`'s cards, which\npreview each theme in the chosen mode.",
|
|
18826
|
+
"description": "A palette button for a page's look. It opens a popover with the mode\n(auto, light, dark or Darker), the theme, and buttons to import a theme\nfile (a Groundwork theme's `.json` or an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.\n\n`gallery` swaps the theme select for `gw-theme-gallery`'s cards, which\npreview each theme in the chosen mode.\n\n`layout` sets how it shows. `popover`, the default, is the palette button\nand its popover. `cycle` is one button showing the mode in use, which steps\nto the next mode on each press, for an app bar. `inline` lays the controls\nout in place, in one wrapping row with Reset and Import, for a footer or a\nsettings page; set `justify-content` on it to align the row. `modes` picks which modes it offers, such as `light dark` without\nAuto.",
|
|
18324
18827
|
"name": "GwThemePicker",
|
|
18325
18828
|
"cssParts": [
|
|
18326
18829
|
{
|
|
18327
18830
|
"description": "The theme gallery, with `gallery`.",
|
|
18328
18831
|
"name": "gallery"
|
|
18832
|
+
},
|
|
18833
|
+
{
|
|
18834
|
+
"description": "The mode, theme and status.",
|
|
18835
|
+
"name": "controls"
|
|
18836
|
+
},
|
|
18837
|
+
{
|
|
18838
|
+
"description": "Reset and Import, with `inline`.",
|
|
18839
|
+
"name": "actions"
|
|
18329
18840
|
}
|
|
18330
18841
|
],
|
|
18331
18842
|
"members": [
|
|
@@ -18336,7 +18847,7 @@
|
|
|
18336
18847
|
"text": "Properties"
|
|
18337
18848
|
},
|
|
18338
18849
|
"static": true,
|
|
18339
|
-
"default": "{ mode: { reflect: true }, theme: { reflect: true }, themes: { type: \"json\" }, gallery: { type: \"boolean\", reflect: true }, status: {}, label: {}, }",
|
|
18850
|
+
"default": "{ mode: { reflect: true }, theme: { reflect: true }, themes: { type: \"json\" }, gallery: { type: \"boolean\", reflect: true }, status: {}, label: {}, layout: { reflect: true }, modes: {}, }",
|
|
18340
18851
|
"inheritedFrom": {
|
|
18341
18852
|
"name": "GwElement",
|
|
18342
18853
|
"module": "src/element.ts"
|
|
@@ -18349,7 +18860,7 @@
|
|
|
18349
18860
|
"text": "readonly CSSStyleSheet[]"
|
|
18350
18861
|
},
|
|
18351
18862
|
"static": true,
|
|
18352
|
-
"default": "[ base, css` :host { display: inline-block; } :host([gallery]) gw-popover { --gw-popover-width: 34rem; } .gallery { max-height: min(24rem, 50vh); overflow: auto; /* Room for the cards' focus rings */ padding: var(--gw-space-1); margin: calc(var(--gw-space-1) * -1); } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } `, ]",
|
|
18863
|
+
"default": "[ base, css` :host { display: inline-block; } :host([gallery]) gw-popover { --gw-popover-width: 34rem; } .gallery { max-height: min(24rem, 50vh); overflow: auto; /* Room for the cards' focus rings */ padding: var(--gw-space-1); margin: calc(var(--gw-space-1) * -1); } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } /* One wrapping row: the controls, then Reset and Import. The host is the flex container, so a page can set its justify-content */ :host([layout=\"inline\"]) { display: flex; flex-wrap: wrap; gap: var(--gw-space-4); align-items: center; } :host([layout=\"inline\"]) .controls { flex-flow: row wrap; align-items: center; margin-block-start: 0; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); align-items: center; } `, ]",
|
|
18353
18864
|
"inheritedFrom": {
|
|
18354
18865
|
"name": "GwElement",
|
|
18355
18866
|
"module": "src/element.ts"
|
|
@@ -18403,6 +18914,24 @@
|
|
|
18403
18914
|
},
|
|
18404
18915
|
"default": "\"Theme\""
|
|
18405
18916
|
},
|
|
18917
|
+
{
|
|
18918
|
+
"kind": "field",
|
|
18919
|
+
"name": "layout",
|
|
18920
|
+
"type": {
|
|
18921
|
+
"text": "\"popover\" | \"cycle\" | \"inline\""
|
|
18922
|
+
},
|
|
18923
|
+
"description": "How it shows: a button and popover, a button cycling the modes, or the controls in place.",
|
|
18924
|
+
"default": "\"popover\""
|
|
18925
|
+
},
|
|
18926
|
+
{
|
|
18927
|
+
"kind": "field",
|
|
18928
|
+
"name": "modes",
|
|
18929
|
+
"type": {
|
|
18930
|
+
"text": "string"
|
|
18931
|
+
},
|
|
18932
|
+
"description": "The modes to offer, in order and separated by spaces.",
|
|
18933
|
+
"default": "\"auto light dark darker\""
|
|
18934
|
+
},
|
|
18406
18935
|
{
|
|
18407
18936
|
"kind": "field",
|
|
18408
18937
|
"name": "#button",
|
|
@@ -18439,16 +18968,60 @@
|
|
|
18439
18968
|
"privacy": "private",
|
|
18440
18969
|
"readonly": true
|
|
18441
18970
|
},
|
|
18971
|
+
{
|
|
18972
|
+
"kind": "field",
|
|
18973
|
+
"name": "#controls",
|
|
18974
|
+
"privacy": "private",
|
|
18975
|
+
"readonly": true
|
|
18976
|
+
},
|
|
18977
|
+
{
|
|
18978
|
+
"kind": "field",
|
|
18979
|
+
"name": "#reset",
|
|
18980
|
+
"privacy": "private",
|
|
18981
|
+
"readonly": true
|
|
18982
|
+
},
|
|
18983
|
+
{
|
|
18984
|
+
"kind": "field",
|
|
18985
|
+
"name": "#import",
|
|
18986
|
+
"privacy": "private",
|
|
18987
|
+
"readonly": true
|
|
18988
|
+
},
|
|
18442
18989
|
{
|
|
18443
18990
|
"kind": "field",
|
|
18444
18991
|
"name": "#popover",
|
|
18445
18992
|
"privacy": "private",
|
|
18446
18993
|
"readonly": true
|
|
18447
18994
|
},
|
|
18995
|
+
{
|
|
18996
|
+
"kind": "field",
|
|
18997
|
+
"name": "#actions",
|
|
18998
|
+
"privacy": "private",
|
|
18999
|
+
"readonly": true
|
|
19000
|
+
},
|
|
19001
|
+
{
|
|
19002
|
+
"kind": "method",
|
|
19003
|
+
"name": "#offered",
|
|
19004
|
+
"privacy": "private",
|
|
19005
|
+
"description": "The modes on offer, in the order `modes` gives them."
|
|
19006
|
+
},
|
|
18448
19007
|
{
|
|
18449
19008
|
"kind": "method",
|
|
18450
19009
|
"name": "show",
|
|
18451
|
-
"description": "Opens the popover under the button."
|
|
19010
|
+
"description": "Opens the popover under the button, or with `cycle`, steps to the next mode."
|
|
19011
|
+
},
|
|
19012
|
+
{
|
|
19013
|
+
"kind": "method",
|
|
19014
|
+
"name": "#place",
|
|
19015
|
+
"privacy": "private",
|
|
19016
|
+
"parameters": [
|
|
19017
|
+
{
|
|
19018
|
+
"name": "root",
|
|
19019
|
+
"type": {
|
|
19020
|
+
"text": "ShadowRoot"
|
|
19021
|
+
}
|
|
19022
|
+
}
|
|
19023
|
+
],
|
|
19024
|
+
"description": "Puts the controls and their buttons in the popover, or in place for `inline`."
|
|
18452
19025
|
},
|
|
18453
19026
|
{
|
|
18454
19027
|
"kind": "method",
|
|
@@ -18493,7 +19066,7 @@
|
|
|
18493
19066
|
"privacy": "protected",
|
|
18494
19067
|
"parameters": [
|
|
18495
19068
|
{
|
|
18496
|
-
"name": "
|
|
19069
|
+
"name": "changed",
|
|
18497
19070
|
"type": {
|
|
18498
19071
|
"text": "ReadonlySet<string>"
|
|
18499
19072
|
}
|
|
@@ -18812,6 +19385,20 @@
|
|
|
18812
19385
|
}
|
|
18813
19386
|
],
|
|
18814
19387
|
"attributes": [
|
|
19388
|
+
{
|
|
19389
|
+
"type": {
|
|
19390
|
+
"text": "\"popover\"|\"cycle\"|\"inline\""
|
|
19391
|
+
},
|
|
19392
|
+
"description": "How it shows: a button and popover, a button cycling the modes, or the controls in place. Defaults to `popover`.",
|
|
19393
|
+
"name": "layout"
|
|
19394
|
+
},
|
|
19395
|
+
{
|
|
19396
|
+
"type": {
|
|
19397
|
+
"text": "string"
|
|
19398
|
+
},
|
|
19399
|
+
"description": "The modes to offer, in order and separated by spaces. Defaults to `auto light dark darker`.",
|
|
19400
|
+
"name": "modes"
|
|
19401
|
+
},
|
|
18815
19402
|
{
|
|
18816
19403
|
"type": {
|
|
18817
19404
|
"text": "\"auto\"|\"light\"|\"dark\"|\"darker\""
|
|
@@ -18851,7 +19438,7 @@
|
|
|
18851
19438
|
"type": {
|
|
18852
19439
|
"text": "string"
|
|
18853
19440
|
},
|
|
18854
|
-
"description": "The button's accessible name and the popover's heading. Defaults to `Theme`.",
|
|
19441
|
+
"description": "The button's accessible name and the popover's heading. Defaults to `Theme`. With `cycle`, the button's name also gives the mode in use.",
|
|
18855
19442
|
"name": "label"
|
|
18856
19443
|
}
|
|
18857
19444
|
],
|
|
@@ -18883,6 +19470,12 @@
|
|
|
18883
19470
|
"kind": "class",
|
|
18884
19471
|
"description": "Where toasts appear: the bottom corner on the end side, away from what\npeople click. Call `show(message, tone)`; each toast is announced politely\nand fades out after `duration` milliseconds.\n\nA toast only tells; it has no actions and lets every click through, since\nit may sit over something interactive and leaves before it can be used.\nIt's in the top layer and rises above any dialog each time one shows. It's\na last resort: show an outcome where it happened instead.",
|
|
18885
19472
|
"name": "GwToaster",
|
|
19473
|
+
"cssParts": [
|
|
19474
|
+
{
|
|
19475
|
+
"description": "Each toast.",
|
|
19476
|
+
"name": "toast"
|
|
19477
|
+
}
|
|
19478
|
+
],
|
|
18886
19479
|
"members": [
|
|
18887
19480
|
{
|
|
18888
19481
|
"kind": "field",
|
|
@@ -21379,6 +21972,19 @@
|
|
|
21379
21972
|
"kind": "javascript-module",
|
|
21380
21973
|
"path": "src/styles.ts",
|
|
21381
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
|
+
},
|
|
21382
21988
|
{
|
|
21383
21989
|
"kind": "variable",
|
|
21384
21990
|
"name": "base",
|
|
@@ -21426,6 +22032,14 @@
|
|
|
21426
22032
|
}
|
|
21427
22033
|
],
|
|
21428
22034
|
"exports": [
|
|
22035
|
+
{
|
|
22036
|
+
"kind": "js",
|
|
22037
|
+
"name": "controlSizes",
|
|
22038
|
+
"declaration": {
|
|
22039
|
+
"name": "controlSizes",
|
|
22040
|
+
"module": "src/styles.ts"
|
|
22041
|
+
}
|
|
22042
|
+
},
|
|
21429
22043
|
{
|
|
21430
22044
|
"kind": "js",
|
|
21431
22045
|
"name": "base",
|