@crowdstrike/glide-core 0.26.1 → 0.28.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/dist/accordion.d.ts +2 -2
- package/dist/accordion.js +1 -1
- package/dist/button-group.button.d.ts +2 -2
- package/dist/button-group.button.js +1 -1
- package/dist/button-group.d.ts +3 -3
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +2 -2
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +3 -3
- package/dist/checkbox-group.js +9 -9
- package/dist/checkbox.d.ts +2 -3
- package/dist/checkbox.js +3 -3
- package/dist/checkbox.styles.js +8 -16
- package/dist/drawer.d.ts +2 -2
- package/dist/drawer.js +1 -1
- package/dist/dropdown.d.ts +17 -22
- package/dist/dropdown.js +102 -107
- package/dist/dropdown.option.d.ts +9 -9
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +16 -79
- package/dist/dropdown.styles.js +57 -74
- package/dist/form-controls-layout.d.ts +3 -3
- package/dist/form-controls-layout.js +1 -1
- package/dist/icon-button.d.ts +2 -2
- package/dist/icon-button.js +1 -1
- package/dist/icons/checked.js +1 -1
- package/dist/inline-alert.d.ts +2 -2
- package/dist/inline-alert.js +1 -1
- package/dist/input.d.ts +2 -2
- package/dist/input.js +2 -2
- package/dist/input.styles.js +9 -7
- package/dist/label.d.ts +2 -2
- package/dist/label.js +1 -1
- package/dist/label.styles.js +5 -1
- package/dist/library/assert-slot.d.ts +1 -1
- package/dist/library/assert-slot.test.js +22 -22
- package/dist/library/expect-window-error.js +1 -1
- package/dist/library/final.test.js +9 -9
- package/dist/library/form-control.d.ts +1 -1
- package/dist/library/localize.d.ts +5 -0
- package/dist/library/localize.test.js +6 -6
- package/dist/library/required.test.js +5 -5
- package/dist/library/unique-id.d.ts +2 -0
- package/dist/library/unique-id.js +1 -0
- package/dist/link.d.ts +2 -3
- package/dist/link.js +1 -1
- package/dist/link.styles.js +1 -1
- package/dist/menu.button.d.ts +2 -2
- package/dist/menu.button.js +1 -1
- package/dist/menu.button.styles.js +3 -3
- package/dist/menu.d.ts +3 -9
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -2
- package/dist/menu.link.js +1 -1
- package/dist/menu.link.styles.js +3 -3
- package/dist/menu.options.d.ts +3 -4
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +3 -20
- package/dist/modal.d.ts +6 -6
- package/dist/modal.icon-button.d.ts +2 -2
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js +1 -1
- package/dist/radio-group.d.ts +3 -3
- package/dist/radio-group.js +6 -6
- package/dist/radio-group.radio.d.ts +2 -2
- package/dist/radio-group.radio.js +1 -1
- package/dist/slider.d.ts +116 -0
- package/dist/slider.js +168 -0
- package/dist/slider.styles.d.ts +2 -0
- package/dist/slider.styles.js +168 -0
- package/dist/spinner.d.ts +2 -2
- package/dist/spinner.js +1 -1
- package/dist/split-button.d.ts +4 -10
- package/dist/split-button.js +1 -1
- package/dist/split-button.primary-button.d.ts +2 -2
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-button.styles.js +4 -14
- package/dist/split-button.primary-link.d.ts +2 -2
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +3 -4
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/split-button.secondary-button.styles.js +4 -15
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +12 -4
- package/dist/tab.group.d.ts +4 -5
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +14 -16
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +12 -5
- package/dist/tab.panel.js +1 -1
- package/dist/tag.d.ts +2 -4
- package/dist/tag.js +1 -1
- package/dist/tag.styles.js +7 -52
- package/dist/textarea.d.ts +2 -2
- package/dist/textarea.js +7 -7
- package/dist/textarea.styles.js +17 -2
- package/dist/toast.d.ts +3 -3
- package/dist/toast.js +1 -1
- package/dist/toast.toasts.d.ts +9 -9
- package/dist/toast.toasts.js +17 -17
- package/dist/toggle.d.ts +2 -2
- package/dist/toggle.js +1 -1
- package/dist/tooltip.container.d.ts +2 -2
- package/dist/tooltip.container.js +1 -1
- package/dist/tooltip.d.ts +3 -3
- package/dist/tooltip.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/fr.d.ts +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/ja.d.ts +1 -1
- package/dist/translations/ja.js +1 -1
- package/package.json +19 -18
|
@@ -6,6 +6,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
6
6
|
background-color: var(
|
|
7
7
|
--glide-core-color-interactive-surface-container-active
|
|
8
8
|
);
|
|
9
|
+
block-size: 2.125rem;
|
|
9
10
|
border-color: var(
|
|
10
11
|
--glide-core-color-interactive-surface-container-active
|
|
11
12
|
);
|
|
@@ -16,12 +17,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
16
17
|
var(--glide-core-rounding-base-radius-md) 0;
|
|
17
18
|
border-style: solid;
|
|
18
19
|
border-width: 1px;
|
|
20
|
+
box-sizing: border-box;
|
|
19
21
|
cursor: pointer;
|
|
20
22
|
display: inline-flex;
|
|
21
23
|
font-family: var(--glide-core-typography-family-primary);
|
|
24
|
+
font-size: var(--glide-core-body-xxs-font-size);
|
|
22
25
|
font-weight: var(--glide-core-typography-weight-bold);
|
|
23
26
|
gap: 0.625rem;
|
|
24
27
|
justify-content: center;
|
|
28
|
+
line-height: 1.5rem;
|
|
25
29
|
padding-block: var(--glide-core-spacing-base-xs);
|
|
26
30
|
padding-inline: var(--glide-core-spacing-base-xs);
|
|
27
31
|
position: relative;
|
|
@@ -89,21 +93,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
89
93
|
}
|
|
90
94
|
}
|
|
91
95
|
|
|
92
|
-
&.small {
|
|
93
|
-
block-size: 1.75rem;
|
|
94
|
-
box-sizing: border-box;
|
|
95
|
-
font-size: var(--glide-core-typography-size-body-small);
|
|
96
|
-
line-height: 1rem;
|
|
97
|
-
min-inline-size: fit-content;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&.large {
|
|
101
|
-
block-size: 2.125rem;
|
|
102
|
-
box-sizing: border-box;
|
|
103
|
-
font-size: var(--glide-core-body-xxs-font-size);
|
|
104
|
-
line-height: 1.5rem;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
96
|
&:not(:disabled):is(:active, .active) {
|
|
108
97
|
background-color: var(--glide-core-private-color-button-surface-active);
|
|
109
98
|
border-color: transparent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-advisory-surface-info-container: #e5f1fc;--glide-core-color-advisory-surface-info-container-light: #f2f8fe;--glide-core-color-advisory-surface-info-solid: #0073e6;--glide-core-color-advisory-surface-info-solid--hover: #0051a1;--glide-core-color-advisory-surface-attention-container: #fffbeb;--glide-core-color-advisory-surface-attention-container-light: #fffcf2;--glide-core-color-advisory-surface-attention-solid: #ffcc00;--glide-core-color-advisory-surface-attention-solid--hover: #b28f00;--glide-core-color-advisory-surface-warning-container: #fff6e9;--glide-core-color-advisory-surface-warning-container-light: #fffaf2;--glide-core-color-advisory-surface-warning-solid: #ff9500;--glide-core-color-advisory-surface-warning-solid--hover: #b26800;--glide-core-color-advisory-surface-vital-container: #fff0ef;--glide-core-color-advisory-surface-vital-light: #fdf4f4;--glide-core-color-advisory-surface-vital-solid: #db2d24;--glide-core-color-advisory-surface-vital-solid--hover: #992019;--glide-core-color-advisory-surface-success-container: #f1fdf4;--glide-core-color-advisory-surface-success-container-light: #f5fcf7;--glide-core-color-advisory-surface-success-solid: #34c759;--glide-core-color-advisory-surface-success-solid--hover: #248b3e;--glide-core-color-advisory-surface-error-container: #fff0ef;--glide-core-color-advisory-surface-error-container-light: #fdf4f4;--glide-core-color-advisory-surface-error-solid: #db2d24;--glide-core-color-advisory-surface-error-solid--hover: #992019;--glide-core-color-advisory-stroke-info-primary: #0073e6;--glide-core-color-advisory-stroke-info-secondary: #99c7f5;--glide-core-color-advisory-stroke-attention-primary: #ffcc00;--glide-core-color-advisory-stroke-attention-secondary: #ffcc00;--glide-core-color-advisory-stroke-warning-primary: #ff9500;--glide-core-color-advisory-stroke-warning-secondary: #ffbf66;--glide-core-color-advisory-stroke-vital-primary: #db2d24;--glide-core-color-advisory-stroke-vital-secondary: #f1aba7;--glide-core-color-advisory-stroke-success-primary: #34c759;--glide-core-color-advisory-stroke-success-secondary: #d6f4de;--glide-core-color-advisory-stroke-error-primary: #db2d24;--glide-core-color-advisory-stroke-error-secondary: #f8d5d3;--glide-core-color-advisory-text-info: #0073e6;--glide-core-color-advisory-text-info-container: #212121;--glide-core-color-advisory-text-attention: #ffcc00;--glide-core-color-advisory-text-attention-container: #212121;--glide-core-color-advisory-text-warning: #ff9500;--glide-core-color-advisory-text-warning-container: #212121;--glide-core-color-advisory-text-vital: #db2d24;--glide-core-color-advisory-text-vital-container: #212121;--glide-core-color-advisory-text-success: #34c759;--glide-core-color-advisory-text-success-container: #212121;--glide-core-color-advisory-text-error: #db2d24;--glide-core-color-advisory-text-error-container: #212121;--glide-core-color-advisory-icon-info: #0073e6;--glide-core-color-advisory-icon-warning: #ff9500;--glide-core-color-advisory-icon-attention: #ffcc00;--glide-core-color-advisory-icon-vital: #db2d24;--glide-core-color-advisory-icon-success: #34c759;--glide-core-color-advisory-icon-error: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #434343;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-advisory-surface-info-container: #171f26;--glide-core-color-advisory-surface-info-container-light: #192939;--glide-core-color-advisory-surface-info-solid: #2d7dcc;--glide-core-color-advisory-surface-info-solid--hover: #6ca4db;--glide-core-color-advisory-surface-attention-container: #2a271a;--glide-core-color-advisory-surface-attention-container-light: #1f1d17;--glide-core-color-advisory-surface-attention-solid: #f0cf4f;--glide-core-color-advisory-surface-attention-solid--hover: #f5dd84;--glide-core-color-advisory-surface-warning-container: #2c241a;--glide-core-color-advisory-surface-warning-container-light: #201c17;--glide-core-color-advisory-surface-warning-solid: #ffb64f;--glide-core-color-advisory-surface-warning-solid--hover: #ffcc84;--glide-core-color-advisory-surface-vital-container: #291d1c;--glide-core-color-advisory-surface-vital-light: #1e1818;--glide-core-color-advisory-surface-vital-solid: #e36963;--glide-core-color-advisory-surface-vital-solid--hover: #eb9692;--glide-core-color-advisory-surface-success-container: #1c261e;--glide-core-color-advisory-surface-success-container-light: #181d19;--glide-core-color-advisory-surface-success-solid: #61c479;--glide-core-color-advisory-surface-success-solid--hover: #90d6a1;--glide-core-color-advisory-surface-error-container: #291d1c;--glide-core-color-advisory-surface-error-container-light: #1e1818;--glide-core-color-advisory-surface-error-solid: #e36963;--glide-core-color-advisory-surface-error-solid--hover: #eb9692;--glide-core-color-advisory-stroke-info-primary: #2d7dcc;--glide-core-color-advisory-stroke-info-secondary: #2d7dcc;--glide-core-color-advisory-stroke-attention-primary: #f0cf4f;--glide-core-color-advisory-stroke-attention-secondary: #f0cf4f;--glide-core-color-advisory-stroke-warning-primary: #ffb64f;--glide-core-color-advisory-stroke-warning-secondary: #a17537;--glide-core-color-advisory-stroke-vital-primary: #e36963;--glide-core-color-advisory-stroke-vital-secondary: #e36963;--glide-core-color-advisory-stroke-success-primary: #61c479;--glide-core-color-advisory-stroke-success-secondary: #233728;--glide-core-color-advisory-stroke-error-primary: #e36963;--glide-core-color-advisory-stroke-error-secondary: #3d2524;--glide-core-color-advisory-text-info: #2d7dcc;--glide-core-color-advisory-text-info-container: #dcdcdc;--glide-core-color-advisory-text-attention: #f0cf4f;--glide-core-color-advisory-text-attention-container: #dcdcdc;--glide-core-color-advisory-text-warning: #ffb64f;--glide-core-color-advisory-text-warning-container: #dcdcdc;--glide-core-color-advisory-text-vital: #e36963;--glide-core-color-advisory-text-vital-container: #dcdcdc;--glide-core-color-advisory-text-success: #61c479;--glide-core-color-advisory-text-success-container: #dcdcdc;--glide-core-color-advisory-text-error: #e36963;--glide-core-color-advisory-text-error-container: #dcdcdc;--glide-core-color-advisory-icon-info: #2d7dcc;--glide-core-color-advisory-icon-warning: #ffb64f;--glide-core-color-advisory-icon-attention: #f0cf4f;--glide-core-color-advisory-icon-vital: #e36963;--glide-core-color-advisory-icon-success: #61c479;--glide-core-color-advisory-icon-error: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #265e95;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
|
|
1
|
+
:root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-advisory-surface-info-container: #e5f1fc;--glide-core-color-advisory-surface-info-container-light: #f2f8fe;--glide-core-color-advisory-surface-info-solid: #0073e6;--glide-core-color-advisory-surface-info-solid--hover: #0051a1;--glide-core-color-advisory-surface-attention-container: #fffbeb;--glide-core-color-advisory-surface-attention-container-light: #fffcf2;--glide-core-color-advisory-surface-attention-solid: #ffcc00;--glide-core-color-advisory-surface-attention-solid--hover: #b28f00;--glide-core-color-advisory-surface-warning-container: #fff6e9;--glide-core-color-advisory-surface-warning-container-light: #fffaf2;--glide-core-color-advisory-surface-warning-solid: #ff9500;--glide-core-color-advisory-surface-warning-solid--hover: #b26800;--glide-core-color-advisory-surface-vital-container: #fff0ef;--glide-core-color-advisory-surface-vital-light: #fdf4f4;--glide-core-color-advisory-surface-vital-solid: #db2d24;--glide-core-color-advisory-surface-vital-solid--hover: #992019;--glide-core-color-advisory-surface-success-container: #f1fdf4;--glide-core-color-advisory-surface-success-container-light: #f5fcf7;--glide-core-color-advisory-surface-success-solid: #34c759;--glide-core-color-advisory-surface-success-solid--hover: #248b3e;--glide-core-color-advisory-surface-error-container: #fff0ef;--glide-core-color-advisory-surface-error-container-light: #fdf4f4;--glide-core-color-advisory-surface-error-solid: #db2d24;--glide-core-color-advisory-surface-error-solid--hover: #992019;--glide-core-color-advisory-stroke-info-primary: #0073e6;--glide-core-color-advisory-stroke-info-secondary: #99c7f5;--glide-core-color-advisory-stroke-attention-primary: #ffcc00;--glide-core-color-advisory-stroke-attention-secondary: #ffcc00;--glide-core-color-advisory-stroke-warning-primary: #ff9500;--glide-core-color-advisory-stroke-warning-secondary: #ffbf66;--glide-core-color-advisory-stroke-vital-primary: #db2d24;--glide-core-color-advisory-stroke-vital-secondary: #f1aba7;--glide-core-color-advisory-stroke-success-primary: #34c759;--glide-core-color-advisory-stroke-success-secondary: #d6f4de;--glide-core-color-advisory-stroke-error-primary: #db2d24;--glide-core-color-advisory-stroke-error-secondary: #f8d5d3;--glide-core-color-advisory-text-info: #0073e6;--glide-core-color-advisory-text-info-container: #212121;--glide-core-color-advisory-text-attention: #ffcc00;--glide-core-color-advisory-text-attention-container: #212121;--glide-core-color-advisory-text-warning: #ff9500;--glide-core-color-advisory-text-warning-container: #212121;--glide-core-color-advisory-text-vital: #db2d24;--glide-core-color-advisory-text-vital-container: #212121;--glide-core-color-advisory-text-success: #34c759;--glide-core-color-advisory-text-success-container: #212121;--glide-core-color-advisory-text-error: #db2d24;--glide-core-color-advisory-text-error-container: #212121;--glide-core-color-advisory-icon-info: #0073e6;--glide-core-color-advisory-icon-warning: #ff9500;--glide-core-color-advisory-icon-attention: #ffcc00;--glide-core-color-advisory-icon-vital: #db2d24;--glide-core-color-advisory-icon-success: #34c759;--glide-core-color-advisory-icon-error: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-surface-unknown: #6d6d6d;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #434343;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-advisory-surface-info-container: #171f26;--glide-core-color-advisory-surface-info-container-light: #192939;--glide-core-color-advisory-surface-info-solid: #2d7dcc;--glide-core-color-advisory-surface-info-solid--hover: #6ca4db;--glide-core-color-advisory-surface-attention-container: #2a271a;--glide-core-color-advisory-surface-attention-container-light: #1f1d17;--glide-core-color-advisory-surface-attention-solid: #f0cf4f;--glide-core-color-advisory-surface-attention-solid--hover: #f5dd84;--glide-core-color-advisory-surface-warning-container: #2c241a;--glide-core-color-advisory-surface-warning-container-light: #201c17;--glide-core-color-advisory-surface-warning-solid: #ffb64f;--glide-core-color-advisory-surface-warning-solid--hover: #ffcc84;--glide-core-color-advisory-surface-vital-container: #291d1c;--glide-core-color-advisory-surface-vital-light: #1e1818;--glide-core-color-advisory-surface-vital-solid: #e36963;--glide-core-color-advisory-surface-vital-solid--hover: #eb9692;--glide-core-color-advisory-surface-success-container: #1c261e;--glide-core-color-advisory-surface-success-container-light: #181d19;--glide-core-color-advisory-surface-success-solid: #61c479;--glide-core-color-advisory-surface-success-solid--hover: #90d6a1;--glide-core-color-advisory-surface-error-container: #291d1c;--glide-core-color-advisory-surface-error-container-light: #1e1818;--glide-core-color-advisory-surface-error-solid: #e36963;--glide-core-color-advisory-surface-error-solid--hover: #eb9692;--glide-core-color-advisory-stroke-info-primary: #2d7dcc;--glide-core-color-advisory-stroke-info-secondary: #2d7dcc;--glide-core-color-advisory-stroke-attention-primary: #f0cf4f;--glide-core-color-advisory-stroke-attention-secondary: #f0cf4f;--glide-core-color-advisory-stroke-warning-primary: #ffb64f;--glide-core-color-advisory-stroke-warning-secondary: #a17537;--glide-core-color-advisory-stroke-vital-primary: #e36963;--glide-core-color-advisory-stroke-vital-secondary: #e36963;--glide-core-color-advisory-stroke-success-primary: #61c479;--glide-core-color-advisory-stroke-success-secondary: #233728;--glide-core-color-advisory-stroke-error-primary: #e36963;--glide-core-color-advisory-stroke-error-secondary: #3d2524;--glide-core-color-advisory-text-info: #2d7dcc;--glide-core-color-advisory-text-info-container: #dcdcdc;--glide-core-color-advisory-text-attention: #f0cf4f;--glide-core-color-advisory-text-attention-container: #dcdcdc;--glide-core-color-advisory-text-warning: #ffb64f;--glide-core-color-advisory-text-warning-container: #dcdcdc;--glide-core-color-advisory-text-vital: #e36963;--glide-core-color-advisory-text-vital-container: #dcdcdc;--glide-core-color-advisory-text-success: #61c479;--glide-core-color-advisory-text-success-container: #dcdcdc;--glide-core-color-advisory-text-error: #e36963;--glide-core-color-advisory-text-error-container: #dcdcdc;--glide-core-color-advisory-icon-info: #2d7dcc;--glide-core-color-advisory-icon-warning: #ffb64f;--glide-core-color-advisory-icon-attention: #f0cf4f;--glide-core-color-advisory-icon-vital: #e36963;--glide-core-color-advisory-icon-success: #61c479;--glide-core-color-advisory-icon-error: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-surface-unknown: #a1a1a1;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #265e95;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #202020;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
|
package/dist/tab.d.ts
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import { LitElement, type PropertyValues } from 'lit';
|
|
2
2
|
declare global {
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
|
-
'glide-core-tab':
|
|
4
|
+
'glide-core-tab': Tab;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* @attr {string} panel
|
|
9
9
|
* @attr {boolean} [disabled=false]
|
|
10
|
+
*
|
|
11
|
+
* @readonly
|
|
12
|
+
* @attr {string} [id]
|
|
13
|
+
*
|
|
14
|
+
* @readonly
|
|
15
|
+
* @attr {string} [role='tab']
|
|
16
|
+
*
|
|
10
17
|
* @attr {boolean} [selected=false]
|
|
11
18
|
*
|
|
12
19
|
* @readonly
|
|
@@ -17,7 +24,7 @@ declare global {
|
|
|
17
24
|
*
|
|
18
25
|
* @fires {Event} selected
|
|
19
26
|
*/
|
|
20
|
-
export default class
|
|
27
|
+
export default class Tab extends LitElement {
|
|
21
28
|
#private;
|
|
22
29
|
static shadowRootOptions: ShadowRootInit;
|
|
23
30
|
static styles: import("lit").CSSResult[];
|
|
@@ -29,8 +36,9 @@ export default class GlideCoreTab extends LitElement {
|
|
|
29
36
|
get selected(): boolean;
|
|
30
37
|
set selected(isSelected: boolean);
|
|
31
38
|
readonly version: string;
|
|
32
|
-
|
|
39
|
+
readonly id: string;
|
|
40
|
+
readonly role = "tab";
|
|
33
41
|
privateSelect(): void;
|
|
34
42
|
render(): import("lit").TemplateResult<1>;
|
|
35
|
-
|
|
43
|
+
updated(changes: PropertyValues): void;
|
|
36
44
|
}
|
package/dist/tab.group.d.ts
CHANGED
|
@@ -2,29 +2,28 @@ import './icon-button.js';
|
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
5
|
-
'glide-core-tab-group':
|
|
5
|
+
'glide-core-tab-group': TabGroup;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* @readonly
|
|
10
10
|
* @attr {string} [version]
|
|
11
11
|
*
|
|
12
|
-
* @slot {
|
|
13
|
-
* @slot {
|
|
12
|
+
* @slot {TabPanel}
|
|
13
|
+
* @slot {Tab} [nav]
|
|
14
14
|
*
|
|
15
15
|
* @cssprop [--tabs-padding-block-end=0rem]
|
|
16
16
|
* @cssprop [--tabs-padding-block-start=0rem]
|
|
17
17
|
* @cssprop [--tabs-padding-inline-end=0rem]
|
|
18
18
|
* @cssprop [--tabs-padding-inline-start=0rem]
|
|
19
19
|
*/
|
|
20
|
-
export default class
|
|
20
|
+
export default class TabGroup extends LitElement {
|
|
21
21
|
#private;
|
|
22
22
|
static shadowRootOptions: ShadowRootInit;
|
|
23
23
|
static styles: import("lit").CSSResult[];
|
|
24
24
|
readonly version: string;
|
|
25
25
|
firstUpdated(): void;
|
|
26
26
|
render(): import("lit").TemplateResult<1>;
|
|
27
|
-
updated(): void;
|
|
28
27
|
private isDisableOverflowEndButton;
|
|
29
28
|
private isDisableOverflowStartButton;
|
|
30
29
|
private isShowOverflowButtons;
|
package/dist/tab.group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,s,o){var i
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,s,o){var a,i=arguments.length,l=i<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,o);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(l=(i<3?a(l):i>3?a(e,s,l):a(e,s))||l);return i>3&&l&&Object.defineProperty(e,s,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import Tab from"./tab.js";import TabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import onResize from"./library/on-resize.js";import styles from"./tab.group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let TabGroup=class TabGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.isDisableOverflowEndButton=!1,this.isDisableOverflowStartButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=new LocalizeController(this),this.#s=createRef(),this.#o=createRef(),this.#a=null,this.#i=null,this.#l=createRef(),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){const t=this.#r.find((t=>t.selected))??this.#r[0];t&&(this.#i=t)}render(){return html`<div class="component" @click="${this.#c}" @keydown="${this.#d}" ${ref(this.#t)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("previousTab")}" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" data-test="overflow-start-button" tabindex="-1" ?disabled="${this.isDisableOverflowStartButton}" @click="${this.#b.bind(this,"start")}" ${ref(this.#o)}>${chevronIcon}</button>`))}<div class="tab-group" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#h}" @scroll="${this.#f}" ${onResize(this.#u.bind(this))} ${ref(this.#n)}><slot name="nav" @private-selected="${this.#m}" @slotchange="${this.#p}" ${assertSlot([Tab])}></slot><div class="${classMap({"selected-tab-indicator":!0,animated:this.hasUpdated})}" data-test="selected-tab-indicator" ${ref(this.#l)}></div></div>${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("nextTab")}" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" data-test="overflow-end-button" tabindex="-1" @click="${this.#b.bind(this,"end")}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#s)}>${chevronIcon}</button>`))}</div><slot @slotchange="${this.#v}" ${assertSlot([TabPanel])}></slot></div>`}#t;#e;#s;#o;#a;#i;#l;#n;get#E(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#r(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#c(t){const e=t.target.closest("glide-core-tab");e&&e instanceof Tab&&!e.disabled&&this.#r.includes(e)&&(this.#i=e,this.#T(),this.#w(),e.selected=!0)}#d(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof Tab&&!e.disabled&&(this.#i=e,this.#T(),this.#w(),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#r.find((t=>t.matches(":focus")));if(e instanceof Tab){let s=this.#r.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.#r.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#r.length-1),s>this.#r.length-1&&(s=0),this.#r[s]?.focus({preventScroll:!1});for(const[,t]of this.#r.entries())t.tabIndex=this.#r[s]===t?0:-1;this.#f(),t.preventDefault()}}}#v(){this.#R()}#p(){this.#R(),this.#T(),this.#w(),this.#f()}#b(t){const e="end"===t?1:-1;this.#n.value&&this.#n.value.scrollBy({left:e*this.#n.value.clientWidth*.5,top:0})}#h(){for(const[,t]of this.#r.entries())t.tabIndex=t===this.#i?0:-1}#u(){this.#a&&clearTimeout(this.#a),this.#w(),this.#a=setTimeout((()=>{this.#f()}))}#m(t){t.target instanceof Tab&&t.target.selected&&(this.#i=t.target,this.#T(),this.#w(),t.target.privateSelect())}#R(){for(const t of this.#r){const e=this.#E.filter((e=>e.name===t.panel))?.at(0);e?.id&&(t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id))}}#f(){this.#n.value&&(this.isShowOverflowButtons=this.#n.value.scrollWidth>this.#n.value.clientWidth),this.#n.value&&(this.isDisableOverflowStartButton=this.#n.value.scrollLeft<=0),this.#n.value&&(this.isDisableOverflowEndButton=this.#n.value.scrollLeft+this.#n.value.clientWidth>=this.#n.value.scrollWidth)}#T(){for(const t of this.#r)t.selected=this.#i===t,t.tabIndex=this.#i===t?0:-1;for(const t of this.#E){const e=this.#i?.getAttribute("panel"),s=t.getAttribute("name");t.privateIsSelected=s===e,t.tabIndex=s===e?0:-1}}#w(){if(this.#i&&this.#r.length>0&&this.#l.value){const t=Number.parseInt(window.getComputedStyle(this.#i).getPropertyValue("padding-inline-start")),e=this.#i===this.#r.at(0)?t:this.#i.offsetLeft-this.#r.at(0).offsetLeft;this.#l.value.style.setProperty("--private-selected-tab-indicator-translate",`${e}px`);const s=this.#i===this.#r.at(0)||this.#i===this.#r.at(-1)?t:0,{width:o}=this.#i.getBoundingClientRect();this.#l.value.style.setProperty("--private-selected-tab-indicator-width",o-s+"px")}}};__decorate([property({reflect:!0})],TabGroup.prototype,"version",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],TabGroup.prototype,"isShowOverflowButtons",void 0),TabGroup=__decorate([customElement("glide-core-tab-group"),final],TabGroup);export default TabGroup;
|
package/dist/tab.group.styles.js
CHANGED
|
@@ -37,26 +37,24 @@ import{css}from"lit";export default[css`
|
|
|
37
37
|
@media (prefers-reduced-motion: no-preference) {
|
|
38
38
|
scroll-behavior: smooth;
|
|
39
39
|
}
|
|
40
|
+
}
|
|
40
41
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
42
|
+
.selected-tab-indicator {
|
|
43
|
+
background: var(--glide-core-color-interactive-stroke-active);
|
|
44
|
+
block-size: 0.125rem;
|
|
45
|
+
content: '';
|
|
46
|
+
inline-size: var(--private-selected-tab-indicator-width);
|
|
47
|
+
inset-block-end: 0;
|
|
48
|
+
inset-inline: 0;
|
|
49
|
+
position: absolute;
|
|
50
|
+
transform-origin: left;
|
|
51
|
+
translate: var(--private-selected-tab-indicator-translate, 0) 0;
|
|
52
52
|
|
|
53
53
|
&.animated {
|
|
54
54
|
@media (prefers-reduced-motion: no-preference) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
translate 250ms;
|
|
59
|
-
}
|
|
55
|
+
transition:
|
|
56
|
+
inline-size 250ms,
|
|
57
|
+
translate 250ms;
|
|
60
58
|
}
|
|
61
59
|
}
|
|
62
60
|
}
|
package/dist/tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(i<3?s(a):i>3?s(t,o,a):s(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let Tab=class Tab extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.version=packageJson.version,this.id=uniqueId(),this.role="tab",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#e}set selected(e){const t=e!==this.#e;this.#e=e,e&&t&&this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}" data-test="component"><div class="container"><slot name="icon"></slot><slot></slot></div></div>`}updated(e){e.has("selected")&&this.setAttribute("aria-selected",this.selected?"true":"false"),e.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#e};__decorate([property({reflect:!0}),required],Tab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"selected",null),__decorate([property({reflect:!0})],Tab.prototype,"version",void 0),__decorate([property({reflect:!0})],Tab.prototype,"id",void 0),__decorate([property({reflect:!0})],Tab.prototype,"role",void 0),Tab=__decorate([customElement("glide-core-tab"),final],Tab);export default Tab;
|
package/dist/tab.panel.d.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
declare global {
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
|
-
'glide-core-tab-panel':
|
|
4
|
+
'glide-core-tab-panel': TabPanel;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
|
-
* @attr {string} name - The corresponding
|
|
8
|
+
* @attr {string} name - The corresponding Tab should have a `panel` attribute with this name
|
|
9
|
+
*
|
|
10
|
+
* @readonly
|
|
11
|
+
* @attr {string} [id]
|
|
12
|
+
*
|
|
13
|
+
* @readonly
|
|
14
|
+
* @attr {string} [role='tabpanel']
|
|
9
15
|
*
|
|
10
16
|
* @readonly
|
|
11
17
|
* @attr {string} [version]
|
|
@@ -15,17 +21,18 @@ declare global {
|
|
|
15
21
|
* @cssprop [--padding-inline-end=0rem]
|
|
16
22
|
* @cssprop [--padding-inline-start=0rem]
|
|
17
23
|
*/
|
|
18
|
-
export default class
|
|
24
|
+
export default class TabPanel extends LitElement {
|
|
19
25
|
#private;
|
|
20
26
|
static shadowRootOptions: ShadowRootInit;
|
|
21
27
|
static styles: import("lit").CSSResult[];
|
|
22
28
|
/**
|
|
23
|
-
* The corresponding
|
|
29
|
+
* The corresponding Tab should have a `panel` attribute with this name
|
|
24
30
|
*/
|
|
25
31
|
name?: string;
|
|
26
32
|
get privateIsSelected(): boolean;
|
|
27
33
|
set privateIsSelected(isSelected: boolean);
|
|
28
34
|
readonly version: string;
|
|
29
|
-
|
|
35
|
+
readonly role = "tabpanel";
|
|
36
|
+
readonly id: string;
|
|
30
37
|
render(): import("lit").TemplateResult<1>;
|
|
31
38
|
}
|
package/dist/tab.panel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,r,o){var a,i=arguments.length,s=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(s=(i<3?a(s):i>3?a(t,r,s):a(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.panel.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let TabPanel=class TabPanel extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.role="tabpanel",this.id=uniqueId(),this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get privateIsSelected(){return this.#e}set privateIsSelected(e){this.setAttribute("aria-hidden",e?"false":"true"),this.#e=e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}#e};__decorate([property({reflect:!0}),required],TabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],TabPanel.prototype,"privateIsSelected",null),__decorate([property({reflect:!0})],TabPanel.prototype,"version",void 0),__decorate([property({reflect:!0})],TabPanel.prototype,"role",void 0),__decorate([property({reflect:!0})],TabPanel.prototype,"id",void 0),TabPanel=__decorate([customElement("glide-core-tab-panel"),final],TabPanel);export default TabPanel;
|
package/dist/tag.d.ts
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
declare global {
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
|
-
'glide-core-tag':
|
|
4
|
+
'glide-core-tag': Tag;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* @attr {string} label
|
|
9
9
|
* @attr {boolean} [disabled=false]
|
|
10
10
|
* @attr {boolean} [removable=false]
|
|
11
|
-
* @attr {'small'|'medium'|'large'} [size='medium']
|
|
12
11
|
*
|
|
13
12
|
* @readonly
|
|
14
13
|
* @attr {string} [version]
|
|
@@ -18,7 +17,7 @@ declare global {
|
|
|
18
17
|
* @fires {Event} edit
|
|
19
18
|
* @fires {Event} remove
|
|
20
19
|
*/
|
|
21
|
-
export default class
|
|
20
|
+
export default class Tag extends LitElement {
|
|
22
21
|
#private;
|
|
23
22
|
static shadowRootOptions: ShadowRootInit;
|
|
24
23
|
static styles: import("lit").CSSResult[];
|
|
@@ -26,7 +25,6 @@ export default class GlideCoreTag extends LitElement {
|
|
|
26
25
|
disabled: boolean;
|
|
27
26
|
privateEditable: boolean;
|
|
28
27
|
removable: boolean;
|
|
29
|
-
size: 'small' | 'medium' | 'large';
|
|
30
28
|
readonly version: string;
|
|
31
29
|
click(): void;
|
|
32
30
|
firstUpdated(): void;
|
package/dist/tag.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var s
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var a,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(l=(s<3?a(l):s>3?a(t,o,l):a(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import pencilIcon from"./icons/pencil.js";import styles from"./tag.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tag=class Tag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#a.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#a.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled})}" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="icon-slot" name="icon"></slot><div class="label">${this.label}</div>${when(this.privateEditable,(()=>html`<button aria-label="${this.#i.term("editTag",this.label)}" class="${classMap({"edit-button":!0,disabled:this.disabled})}" data-test="edit-button" type="button" ?disabled="${this.disabled}" @click="${this.#s}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#a)}>${xIcon}</button>`))}</div>`}#e;#t;#o;#i;#a;#s(){this.#o?this.#o=!1:this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})))}#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#r(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0}),required],Tag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Tag.prototype,"disabled",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],Tag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],Tag.prototype,"removable",void 0),__decorate([property({reflect:!0})],Tag.prototype,"version",void 0),Tag=__decorate([customElement("glide-core-tag"),final],Tag);export default Tag;
|
package/dist/tag.styles.js
CHANGED
|
@@ -27,39 +27,21 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
27
27
|
background-color: var(
|
|
28
28
|
--glide-core-color-static-surface-container-secondary
|
|
29
29
|
);
|
|
30
|
+
block-size: 1.5rem;
|
|
30
31
|
border: 1px solid var(--glide-core-color-interactive-stroke-primary);
|
|
31
32
|
border-radius: var(--glide-core-rounding-base-radius-round);
|
|
33
|
+
box-sizing: border-box;
|
|
32
34
|
color: var(--glide-core-color-interactive-text-default);
|
|
35
|
+
column-gap: var(--glide-core-spacing-base-xs);
|
|
33
36
|
display: flex;
|
|
34
37
|
font-family: var(--glide-core-typography-family-primary);
|
|
38
|
+
font-size: var(--glide-core-typography-size-body-small);
|
|
35
39
|
font-weight: var(--glide-core-typography-weight-regular);
|
|
36
40
|
justify-content: center;
|
|
37
41
|
line-height: 1;
|
|
38
42
|
max-inline-size: max-content;
|
|
39
43
|
opacity: 1;
|
|
40
|
-
|
|
41
|
-
&.large {
|
|
42
|
-
column-gap: var(--glide-core-spacing-base-xs);
|
|
43
|
-
font-size: var(--glide-core-typography-size-body-small);
|
|
44
|
-
min-block-size: 0.875rem;
|
|
45
|
-
padding: var(--glide-core-spacing-base-xxs)
|
|
46
|
-
var(--glide-core-spacing-base-sm);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&.medium {
|
|
50
|
-
column-gap: var(--glide-core-spacing-base-xs);
|
|
51
|
-
font-size: var(--glide-core-typography-size-body-small);
|
|
52
|
-
min-block-size: var(--glide-core-spacing-base-md);
|
|
53
|
-
padding: var(--glide-core-spacing-base-xxxs)
|
|
54
|
-
var(--glide-core-spacing-base-xs);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&.small {
|
|
58
|
-
column-gap: var(--glide-core-spacing-base-xxs);
|
|
59
|
-
font-size: 0.625rem;
|
|
60
|
-
min-block-size: var(--glide-core-spacing-base-md);
|
|
61
|
-
padding: 0 var(--glide-core-spacing-base-xs);
|
|
62
|
-
}
|
|
44
|
+
padding-inline: var(--glide-core-spacing-base-sm);
|
|
63
45
|
|
|
64
46
|
&.added {
|
|
65
47
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -123,34 +105,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
123
105
|
}
|
|
124
106
|
|
|
125
107
|
.icon-slot {
|
|
126
|
-
&.large {
|
|
127
|
-
&::slotted(*) {
|
|
128
|
-
block-size: 1rem;
|
|
129
|
-
inline-size: 1rem;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
&.medium {
|
|
134
|
-
&::slotted(*) {
|
|
135
|
-
block-size: 0.75rem;
|
|
136
|
-
inline-size: 0.75rem;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&.small {
|
|
141
|
-
&::slotted(*) {
|
|
142
|
-
block-size: 0.625rem;
|
|
143
|
-
inline-size: 0.625rem;
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
108
|
&.hidden {
|
|
148
109
|
display: none;
|
|
149
110
|
}
|
|
150
111
|
|
|
151
112
|
&::slotted(*) {
|
|
152
113
|
align-items: center;
|
|
114
|
+
block-size: 1rem;
|
|
153
115
|
display: flex;
|
|
116
|
+
inline-size: 1rem;
|
|
154
117
|
justify-content: center;
|
|
155
118
|
}
|
|
156
119
|
}
|
|
@@ -162,14 +125,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
162
125
|
display: flex;
|
|
163
126
|
padding: 0;
|
|
164
127
|
|
|
165
|
-
&.medium {
|
|
166
|
-
--private-size: 0.75rem;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
&.small {
|
|
170
|
-
--private-size: 0.625rem;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
128
|
&.disabled {
|
|
174
129
|
color: var(--glide-core-color-interactive-icon-default--disabled);
|
|
175
130
|
cursor: not-allowed;
|
package/dist/textarea.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
|
|
|
3
3
|
import type FormControl from './library/form-control.js';
|
|
4
4
|
declare global {
|
|
5
5
|
interface HTMLElementTagNameMap {
|
|
6
|
-
'glide-core-textarea':
|
|
6
|
+
'glide-core-textarea': Textarea;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
@@ -54,7 +54,7 @@ declare global {
|
|
|
54
54
|
* @param {ValidityStateFlags} [flags]
|
|
55
55
|
* @param {string} [message]
|
|
56
56
|
*/
|
|
57
|
-
export default class
|
|
57
|
+
export default class Textarea extends LitElement implements FormControl {
|
|
58
58
|
#private;
|
|
59
59
|
static formAssociated: boolean;
|
|
60
60
|
static shadowRootOptions: ShadowRootInit;
|
package/dist/textarea.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,a){var r,
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length,o=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(o=(s<3?r(o):s>3?r(t,i,o):r(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import{html,LitElement,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./textarea.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Textarea=class Textarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#t)}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#e.validity.valueMissing&&this.value?(this.#e.setValidity({}),this.#e.validity):(this.required||!this.#e.validity.valueMissing||this.value||this.#e.setValidity({}),this.#e.validity):(this.#e.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#i.value),this.#e.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#t)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label
|
|
2
2
|
label=${ifDefined(this.label)}
|
|
3
3
|
split=${ifDefined(this.privateSplit??void 0)}
|
|
4
4
|
tooltip=${ifDefined(this.tooltip)}
|
|
@@ -27,10 +27,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
|
|
|
27
27
|
?readonly=${this.readonly}
|
|
28
28
|
?disabled=${this.disabled}
|
|
29
29
|
${ref(this.#i)}
|
|
30
|
-
@blur=${this.#
|
|
31
|
-
@change=${this.#
|
|
30
|
+
@blur=${this.#s}
|
|
31
|
+
@change=${this.#o}
|
|
32
32
|
@input=${this.#l}
|
|
33
|
-
@keydown=${this.#
|
|
33
|
+
@keydown=${this.#n}
|
|
34
34
|
>
|
|
35
35
|
</textarea>
|
|
36
36
|
</div>
|
|
@@ -54,12 +54,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
|
|
|
54
54
|
data-test="character-count-container"
|
|
55
55
|
>
|
|
56
56
|
<span aria-hidden="true" data-test="character-count-text">
|
|
57
|
-
${this.#
|
|
57
|
+
${this.#d.term("displayedCharacterCount",this.#h,this.maxlength)}
|
|
58
58
|
</span>
|
|
59
59
|
|
|
60
60
|
<span class="hidden" data-test="character-count-announcement"
|
|
61
|
-
>${this.#
|
|
61
|
+
>${this.#d.term("announcedCharacterCount",this.#h,this.maxlength)}</span
|
|
62
62
|
>
|
|
63
63
|
</div>`:nothing}
|
|
64
64
|
</div></glide-core-private-label
|
|
65
|
-
>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#i.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#i.value)}setValidity(e,t){this.validityMessage=t,this.#e.setValidity(e," ",this.#i.value)}constructor(){super(),this.autocapitalize="on",this.autocomplete="on",this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.spellcheck=!1,this.required=!1,this.readonly=!1,this.value="",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#
|
|
65
|
+
>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#i.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#i.value)}setValidity(e,t){this.validityMessage=t,this.#e.setValidity(e," ",this.#i.value)}constructor(){super(),this.autocapitalize="on",this.autocomplete="on",this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.spellcheck=!1,this.required=!1,this.readonly=!1,this.value="",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=new LocalizeController(this),this.#i=createRef(),this.#t=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#d;#i;#t;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#h(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#h>this.maxlength)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(){this.#i.value&&(this.value=this.#i.value.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#l(){this.#i.value&&(this.value=this.#i.value.value)}#n(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property({reflect:!0}),required],Textarea.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Textarea.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],Textarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"placeholder",void 0),__decorate([property()],Textarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],Textarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"readonly",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"tooltip",void 0),__decorate([property()],Textarea.prototype,"value",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"version",void 0),__decorate([state()],Textarea.prototype,"isBlurring",void 0),__decorate([state()],Textarea.prototype,"isCheckingValidity",void 0),__decorate([state()],Textarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Textarea.prototype,"validityMessage",void 0),Textarea=__decorate([customElement("glide-core-textarea"),final],Textarea);export default Textarea;
|