@crowdstrike/glide-core 0.24.5 → 0.26.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/button-group.button.js +1 -1
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +8 -1
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.styles.js +2 -2
- package/dist/checkbox.d.ts +7 -7
- package/dist/checkbox.js +2 -2
- package/dist/checkbox.styles.js +1 -1
- package/dist/dropdown.d.ts +3 -1
- package/dist/dropdown.js +23 -16
- package/dist/dropdown.option.d.ts +22 -8
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.styles.js +20 -13
- package/dist/icon-button.d.ts +11 -4
- package/dist/icon-button.js +1 -1
- package/dist/inline-alert.d.ts +0 -6
- package/dist/inline-alert.js +1 -1
- package/dist/inline-alert.styles.js +18 -38
- package/dist/input.d.ts +14 -14
- package/dist/input.js +1 -1
- package/dist/input.styles.js +2 -2
- package/dist/label.js +1 -1
- package/dist/label.styles.js +3 -3
- package/dist/library/assert-slot.d.ts +4 -0
- package/dist/library/localize.d.ts +1 -1
- package/dist/link.d.ts +30 -0
- package/dist/link.js +1 -0
- package/dist/link.styles.js +27 -0
- package/dist/menu.button.d.ts +13 -2
- package/dist/menu.button.js +1 -1
- package/dist/menu.d.ts +6 -0
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +15 -4
- package/dist/menu.link.js +1 -1
- package/dist/menu.options.d.ts +13 -1
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +9 -1
- package/dist/modal.d.ts +1 -1
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/modal.styles.js +3 -3
- package/dist/radio-group.d.ts +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.radio.d.ts +7 -7
- package/dist/radio-group.radio.js +1 -1
- package/dist/radio-group.styles.js +2 -2
- package/dist/spinner.js +1 -1
- package/dist/spinner.styles.js +1 -4
- package/dist/split-button.primary-button.d.ts +1 -1
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-link.d.ts +3 -3
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +1 -1
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/styles/skeleton.d.ts +2 -0
- package/dist/styles/skeleton.js +45 -0
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +1 -0
- package/dist/tab.group.d.ts +1 -2
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +4 -0
- package/dist/tab.js +1 -1
- package/dist/tag.d.ts +1 -1
- package/dist/tag.js +1 -1
- package/dist/tag.styles.js +30 -37
- package/dist/textarea.d.ts +9 -9
- package/dist/textarea.js +1 -1
- package/dist/textarea.styles.js +2 -2
- package/dist/toast.d.ts +40 -0
- package/dist/toast.js +1 -0
- package/dist/toast.toasts.d.ts +31 -0
- package/dist/toast.toasts.js +90 -0
- package/dist/toast.toasts.styles.js +127 -0
- package/dist/toggle.d.ts +1 -1
- package/dist/toggle.js +1 -1
- package/dist/tooltip.d.ts +5 -5
- 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 +8 -8
- package/dist/toasts.d.ts +0 -33
- package/dist/toasts.js +0 -1
- package/dist/toasts.styles.js +0 -22
- package/dist/toasts.toast.d.ts +0 -31
- package/dist/toasts.toast.js +0 -1
- package/dist/toasts.toast.styles.js +0 -88
- /package/dist/{toasts.styles.d.ts → link.styles.d.ts} +0 -0
- /package/dist/{toasts.toast.styles.d.ts → toast.toasts.styles.d.ts} +0 -0
|
@@ -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-success-surface-container: #f1fdf4;--glide-core-color-success-surface-container-light: #f5fcf7;--glide-core-color-success-surface-solid: #34c759;--glide-core-color-success-surface-solid--hover: #248b3e;--glide-core-color-success-stroke-primary: #34c759;--glide-core-color-success-stroke-secondary: #d6f4de;--glide-core-color-success-text-status: #34c759;--glide-core-color-success-text-container: #212121;--glide-core-color-success-icon-default: #34c759;--glide-core-color-attention-surface-container: #fffbeb;--glide-core-color-attention-surface-container-light: #fffcf2;--glide-core-color-attention-surface-solid: #ffcc00;--glide-core-color-attention-surface-solid--hover: #b28f00;--glide-core-color-attention-stroke-primary: #ffcc00;--glide-core-color-attention-stroke-secondary: #fff5cc;--glide-core-color-attention-text-status: #ffcc00;--glide-core-color-attention-text-container: #212121;--glide-core-color-attention-icon-default: #ffcc00;--glide-core-color-warning-surface-container: #fff6e9;--glide-core-color-warning-surface-container-light: #fffaf2;--glide-core-color-warning-surface-solid: #ff9500;--glide-core-color-warning-surface-solid--hover: #b26800;--glide-core-color-warning-stroke-primary: #ff9500;--glide-core-color-warning-stroke-secondary: #ffeacc;--glide-core-color-warning-text-status: #ff9500;--glide-core-color-warning-text-container: #212121;--glide-core-color-warning-icon-default: #ff9500;--glide-core-color-info-surface-container: #e5f1fc;--glide-core-color-info-surface-container-light: #f2f8fe;--glide-core-color-info-surface-solid: #0073e6;--glide-core-color-info-surface-solid--hover: #0051a1;--glide-core-color-info-stroke-primary: #0073e6;--glide-core-color-info-stroke-secondary: #cce3fa;--glide-core-color-info-text-status: #0073e6;--glide-core-color-info-text-container: #212121;--glide-core-color-info-icon-default: #0073e6;--glide-core-color-error-surface-container: #fff0ef;--glide-core-color-error-surface-container-light: #fdf4f4;--glide-core-color-error-surface-solid: #db2d24;--glide-core-color-error-surface-solid--hover: #992019;--glide-core-color-error-stroke-primary: #db2d24;--glide-core-color-error-stroke-secondary: #f8d5d3;--glide-core-color-error-text-status: #db2d24;--glide-core-color-error-text-container: #212121;--glide-core-color-error-icon-default: #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-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-success-surface-container: #1c261e;--glide-core-color-success-surface-container-light: #181d19;--glide-core-color-success-surface-solid: #61c479;--glide-core-color-success-surface-solid--hover: #90d6a1;--glide-core-color-success-stroke-primary: #61c479;--glide-core-color-success-stroke-secondary: #233728;--glide-core-color-success-text-status: #61c479;--glide-core-color-success-text-container: #dcdcdc;--glide-core-color-success-icon-default: #61c479;--glide-core-color-attention-surface-container: #2a271a;--glide-core-color-attention-surface-container-light: #1f1d17;--glide-core-color-attention-surface-solid: #f0cf4f;--glide-core-color-attention-surface-solid--hover: #f5dd84;--glide-core-color-attention-stroke-primary: #f0cf4f;--glide-core-color-attention-stroke-secondary: #403920;--glide-core-color-attention-text-status: #f0cf4f;--glide-core-color-attention-text-container: #dcdcdc;--glide-core-color-attention-icon-default: #f0cf4f;--glide-core-color-warning-surface-container: #2c241a;--glide-core-color-warning-surface-container-light: #201c17;--glide-core-color-warning-surface-solid: #ffb64f;--glide-core-color-warning-surface-solid--hover: #ffcc84;--glide-core-color-warning-stroke-primary: #ffb64f;--glide-core-color-warning-stroke-secondary: #433420;--glide-core-color-warning-text-status: #ffb64f;--glide-core-color-warning-text-container: #dcdcdc;--glide-core-color-warning-icon-default: #ffb64f;--glide-core-color-info-surface-container: #171f26;--glide-core-color-info-surface-container-light: #15191d;--glide-core-color-info-surface-solid: #2d7dcc;--glide-core-color-info-surface-solid--hover: #6ca4db;--glide-core-color-info-stroke-primary: #2d7dcc;--glide-core-color-info-stroke-secondary: #192939;--glide-core-color-info-text-status: #2d7dcc;--glide-core-color-info-text-container: #dcdcdc;--glide-core-color-info-icon-default: #2d7dcc;--glide-core-color-error-surface-container: #291d1c;--glide-core-color-error-surface-container-light: #1e1818;--glide-core-color-error-surface-solid: #e36963;--glide-core-color-error-surface-solid--hover: #eb9692;--glide-core-color-error-stroke-primary: #e36963;--glide-core-color-error-stroke-secondary: #3d2524;--glide-core-color-error-text-status: #e36963;--glide-core-color-error-text-container: #dcdcdc;--glide-core-color-error-icon-default: #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-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-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}
|
package/dist/tab.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export default class GlideCoreTab extends LitElement {
|
|
|
30
30
|
set selected(isSelected: boolean);
|
|
31
31
|
readonly version: string;
|
|
32
32
|
protected firstUpdated(): void;
|
|
33
|
+
privateSelect(): void;
|
|
33
34
|
render(): import("lit").TemplateResult<1>;
|
|
34
35
|
protected updated(changes: PropertyValues): void;
|
|
35
36
|
}
|
package/dist/tab.group.d.ts
CHANGED
|
@@ -22,9 +22,8 @@ export default class GlideCoreTabGroup extends LitElement {
|
|
|
22
22
|
static shadowRootOptions: ShadowRootInit;
|
|
23
23
|
static styles: import("lit").CSSResult[];
|
|
24
24
|
readonly version: string;
|
|
25
|
+
firstUpdated(): void;
|
|
25
26
|
render(): import("lit").TemplateResult<1>;
|
|
26
|
-
private get selectedTab();
|
|
27
|
-
private set selectedTab(value);
|
|
28
27
|
updated(): void;
|
|
29
28
|
private isDisableOverflowEndButton;
|
|
30
29
|
private isDisableOverflowStartButton;
|
package/dist/tab.group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(a=(l<3?i(a):l>3?i(e,s,a):i(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};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 GlideCoreTab from"./tab.js";import GlideCoreTabPanel 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 GlideCoreTabGroup=class GlideCoreTabGroup 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=1,this.#o=createRef(),this.#i=createRef(),this.#l=null,this.#a=null,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.#a=t,this.#c())}render(){return html`<div class="component" @click="${this.#d}" @keydown="${this.#b}" ${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.#h}" ${ref(this.#i)}>${chevronIcon}</button>`))}<div class="${classMap({"tab-group":!0,animated:this.hasUpdated})}" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#f}" @scroll="${this.#u}" ${onResize(this.#m.bind(this))} ${ref(this.#n)}><slot name="nav" @private-selected="${this.#p}" @slotchange="${this.#v}" ${assertSlot([GlideCoreTab])}></slot></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.#w}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#o)}>${chevronIcon}</button>`))}</div><slot ${assertSlot([GlideCoreTabPanel])}></slot></div>`}updated(){this.#T()}#t;#e;#s;#o;#i;#l;#a;#n;get#E(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#r(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#d(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#r.includes(e)&&(this.#a=e,this.#c(),e.selected=!0)}#b(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#a=e,this.#c(),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#r.find((t=>t.matches(":focus")));if(e instanceof GlideCoreTab){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.#u(),t.preventDefault()}}}#v(){this.#T(),this.#c(),this.#u()}#w(){this.#B("right")}#h(){this.#B("left")}#f(){for(const[,t]of this.#r.entries())t.tabIndex=t===this.#a?0:-1}#m(){this.#l&&clearTimeout(this.#l),this.#l=setTimeout((()=>{this.#u()}))}#p(t){t.target instanceof GlideCoreTab&&t.target.selected&&(this.#a=t.target,this.#c(),t.target.privateSelect())}#B(t){const e="right"===t?1:-1;if(this.#n.value){const t=e*this.#n.value.clientWidth*.5;this.#n.value.scrollBy({left:t,top:0})}}#g(){const t=this.#n.value,e=t?.getBoundingClientRect();if(e&&t){const{width:s}=e,o=t.scrollLeft+s,i=t.scrollWidth;this.isDisableOverflowEndButton=i-o<=this.#s}}#u(){if(this.#n.value){const{width:t}=this.#n.value.getBoundingClientRect();this.isShowOverflowButtons=this.#n.value.scrollWidth-t>this.#s}this.#R(),this.#g()}#R(){this.#n.value&&(this.isDisableOverflowStartButton=this.#n.value.scrollLeft<=0)}#T(){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))}}#c(){for(const t of this.#r)t.selected=this.#a===t,t.tabIndex=this.#a===t?0:-1;for(const t of this.#E){const e=this.#a?.getAttribute("panel"),s=t.getAttribute("name");t.privateIsSelected=s===e,t.tabIndex=s===e?0:-1}if(this.#a&&this.#r.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.#a).getPropertyValue("padding-inline-start")),e=this.#a===this.#r.at(0)?t:this.#a.offsetLeft-this.#r.at(0).offsetLeft;this.#t.value.style.setProperty("--private-selected-tab-indicator-translate",`${e}px`);const s=this.#a===this.#r.at(0)||this.#a===this.#r.at(-1)?t:0,{width:o}=this.#a.getBoundingClientRect();this.#t.value.style.setProperty("--private-selected-tab-indicator-width",o-s+"px")}}};__decorate([property({reflect:!0})],GlideCoreTabGroup.prototype,"version",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group"),final],GlideCoreTabGroup);export default GlideCoreTabGroup;
|
package/dist/tab.group.styles.js
CHANGED
package/dist/tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";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";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.version=packageJson.version,this.#e=nanoid(),this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#t}set selected(e){const t=e!==this.#t;this.#t=e,e&&t&&this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}firstUpdated(){this.setAttribute("role","tab"),this.id=this.#e}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}"><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;#t};__decorate([property({reflect:!0}),required],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"selected",null),__decorate([property({reflect:!0})],GlideCoreTab.prototype,"version",void 0),GlideCoreTab=__decorate([customElement("glide-core-tab"),final],GlideCoreTab);export default GlideCoreTab;
|
package/dist/tag.d.ts
CHANGED
|
@@ -22,8 +22,8 @@ export default class GlideCoreTag extends LitElement {
|
|
|
22
22
|
#private;
|
|
23
23
|
static shadowRootOptions: ShadowRootInit;
|
|
24
24
|
static styles: import("lit").CSSResult[];
|
|
25
|
-
disabled: boolean;
|
|
26
25
|
label?: string;
|
|
26
|
+
disabled: boolean;
|
|
27
27
|
privateEditable: boolean;
|
|
28
28
|
removable: boolean;
|
|
29
29
|
size: 'small' | 'medium' | 'large';
|
package/dist/tag.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var s,a=arguments.length,l=a<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 r=e.length-1;r>=0;r--)(s=e[r])&&(l=(a<3?s(l):a>3?s(t,o,l):s(t,o))||l);return a>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 GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.size="medium",this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#s.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#s.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" 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,[this.size]:!0,disabled:this.disabled})}" data-test="edit-button" type="button" ?disabled="${this.disabled}" @click="${this.#a}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#r}" @keydown="${this.#n}" ${ref(this.#s)}>${xIcon}</button>`))}</div>`}#e;#t;#o;#i;#s;#a(){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})))}#r(){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})))}#n(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
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var s,a=arguments.length,l=a<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 r=e.length-1;r>=0;r--)(s=e[r])&&(l=(a<3?s(l):a>3?s(t,o,l):s(t,o))||l);return a>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 GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.size="medium",this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#s.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#s.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" 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,[this.size]:!0,disabled:this.disabled})}" data-test="edit-button" type="button" ?disabled="${this.disabled}" @click="${this.#a}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#r}" @keydown="${this.#n}" ${ref(this.#s)}>${xIcon}</button>`))}</div>`}#e;#t;#o;#i;#s;#a(){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})))}#r(){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})))}#n(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],GlideCoreTag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],GlideCoreTag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreTag.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"version",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag"),final],GlideCoreTag);export default GlideCoreTag;
|
package/dist/tag.styles.js
CHANGED
|
@@ -24,28 +24,38 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
24
24
|
|
|
25
25
|
.component {
|
|
26
26
|
align-items: center;
|
|
27
|
-
background: var(
|
|
27
|
+
background-color: var(
|
|
28
|
+
--glide-core-color-static-surface-container-secondary
|
|
29
|
+
);
|
|
30
|
+
border: 1px solid var(--glide-core-color-interactive-stroke-primary);
|
|
28
31
|
border-radius: var(--glide-core-rounding-base-radius-round);
|
|
29
|
-
color: var(--glide-core-color-
|
|
32
|
+
color: var(--glide-core-color-interactive-text-default);
|
|
30
33
|
display: flex;
|
|
31
34
|
font-family: var(--glide-core-typography-family-primary);
|
|
32
|
-
font-size: var(--glide-core-typography-size-body-small);
|
|
33
35
|
font-weight: var(--glide-core-typography-weight-regular);
|
|
34
36
|
justify-content: center;
|
|
35
37
|
line-height: 1;
|
|
36
38
|
max-inline-size: max-content;
|
|
37
|
-
min-block-size: var(--glide-core-spacing-base-md);
|
|
38
39
|
opacity: 1;
|
|
39
|
-
padding: var(--glide-core-spacing-base-xxxs)
|
|
40
|
-
var(--glide-core-spacing-base-xs);
|
|
41
40
|
|
|
42
41
|
&.large {
|
|
42
|
+
column-gap: var(--glide-core-spacing-base-xs);
|
|
43
|
+
font-size: var(--glide-core-typography-size-body-small);
|
|
43
44
|
min-block-size: 0.875rem;
|
|
44
45
|
padding: var(--glide-core-spacing-base-xxs)
|
|
45
46
|
var(--glide-core-spacing-base-sm);
|
|
46
47
|
}
|
|
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
|
+
|
|
48
57
|
&.small {
|
|
58
|
+
column-gap: var(--glide-core-spacing-base-xxs);
|
|
49
59
|
font-size: 0.625rem;
|
|
50
60
|
min-block-size: var(--glide-core-spacing-base-md);
|
|
51
61
|
padding: 0 var(--glide-core-spacing-base-xs);
|
|
@@ -58,6 +68,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
58
68
|
}
|
|
59
69
|
|
|
60
70
|
&.disabled {
|
|
71
|
+
background: var(--glide-core-color-static-surface-container-secondary);
|
|
72
|
+
border-color: var(--glide-core-color-interactive-stroke-primary);
|
|
61
73
|
color: var(--glide-core-color-interactive-icon-default--disabled);
|
|
62
74
|
}
|
|
63
75
|
|
|
@@ -80,39 +92,27 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
80
92
|
.removal-button {
|
|
81
93
|
align-items: center;
|
|
82
94
|
background-color: transparent;
|
|
95
|
+
block-size: 1rem;
|
|
83
96
|
border: none;
|
|
84
97
|
border-radius: 0.0625rem;
|
|
85
98
|
color: var(--glide-core-color-interactive-icon-default);
|
|
86
99
|
cursor: pointer;
|
|
87
100
|
display: flex;
|
|
101
|
+
inline-size: 1rem;
|
|
88
102
|
justify-content: center;
|
|
89
103
|
margin: 0;
|
|
90
104
|
padding: 0;
|
|
91
105
|
transition: color 200ms ease-in-out;
|
|
92
106
|
|
|
93
|
-
&.large {
|
|
94
|
-
block-size: 0.875rem;
|
|
95
|
-
inline-size: 0.875rem;
|
|
96
|
-
margin-inline-start: var(--glide-core-spacing-base-xs);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
&.medium {
|
|
100
|
-
block-size: var(--glide-core-spacing-base-sm);
|
|
101
|
-
inline-size: var(--glide-core-spacing-base-sm);
|
|
102
|
-
margin-inline-start: 0.375rem;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&.small {
|
|
106
|
-
block-size: 0.625rem;
|
|
107
|
-
inline-size: 0.6215rem;
|
|
108
|
-
margin-inline-start: var(--glide-core-spacing-base-xxs);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
107
|
&.disabled {
|
|
112
108
|
color: var(--glide-core-color-interactive-icon-default--disabled);
|
|
113
109
|
cursor: not-allowed;
|
|
114
110
|
}
|
|
115
111
|
|
|
112
|
+
&.hidden {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
116
|
&:hover:not(.disabled) {
|
|
117
117
|
color: var(--glide-core-color-interactive-icon-active--hover);
|
|
118
118
|
}
|
|
@@ -125,9 +125,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
125
125
|
.icon-slot {
|
|
126
126
|
&.large {
|
|
127
127
|
&::slotted(*) {
|
|
128
|
-
block-size:
|
|
129
|
-
inline-size:
|
|
130
|
-
margin-inline-end: var(--glide-core-spacing-base-xs);
|
|
128
|
+
block-size: 1rem;
|
|
129
|
+
inline-size: 1rem;
|
|
131
130
|
}
|
|
132
131
|
}
|
|
133
132
|
|
|
@@ -135,7 +134,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
135
134
|
&::slotted(*) {
|
|
136
135
|
block-size: 0.75rem;
|
|
137
136
|
inline-size: 0.75rem;
|
|
138
|
-
margin-inline-end: 0.375rem;
|
|
139
137
|
}
|
|
140
138
|
}
|
|
141
139
|
|
|
@@ -143,10 +141,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
143
141
|
&::slotted(*) {
|
|
144
142
|
block-size: 0.625rem;
|
|
145
143
|
inline-size: 0.625rem;
|
|
146
|
-
margin-inline-end: var(--glide-core-spacing-base-xxs);
|
|
147
144
|
}
|
|
148
145
|
}
|
|
149
146
|
|
|
147
|
+
&.hidden {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
150
151
|
&::slotted(*) {
|
|
151
152
|
align-items: center;
|
|
152
153
|
display: flex;
|
|
@@ -161,20 +162,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
161
162
|
display: flex;
|
|
162
163
|
padding: 0;
|
|
163
164
|
|
|
164
|
-
&.large {
|
|
165
|
-
margin-inline-start: var(--glide-core-spacing-base-xs);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
165
|
&.medium {
|
|
169
166
|
--private-size: 0.75rem;
|
|
170
|
-
|
|
171
|
-
margin-inline-start: 0.375rem;
|
|
172
167
|
}
|
|
173
168
|
|
|
174
169
|
&.small {
|
|
175
170
|
--private-size: 0.625rem;
|
|
176
|
-
|
|
177
|
-
margin-inline-start: var(--glide-core-spacing-base-xxs);
|
|
178
171
|
}
|
|
179
172
|
|
|
180
173
|
&.disabled {
|
package/dist/textarea.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ declare global {
|
|
|
15
15
|
* @attr {number} [maxlength]
|
|
16
16
|
* @attr {string} [name='']
|
|
17
17
|
* @attr {'horizontal'|'vertical'} [orientation='horizontal']
|
|
18
|
-
* @attr {string} [placeholder
|
|
18
|
+
* @attr {string} [placeholder]
|
|
19
19
|
* @attr {boolean} [readonly=false]
|
|
20
20
|
* @attr {boolean} [required=false]
|
|
21
21
|
* @attr {boolean} [spellcheck=false]
|
|
@@ -59,21 +59,21 @@ export default class GlideCoreTextarea extends LitElement implements FormControl
|
|
|
59
59
|
static formAssociated: boolean;
|
|
60
60
|
static shadowRootOptions: ShadowRootInit;
|
|
61
61
|
static styles: import("lit").CSSResult[];
|
|
62
|
-
value: string;
|
|
63
62
|
label?: string;
|
|
63
|
+
autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
|
|
64
|
+
autocomplete: 'on' | 'off';
|
|
65
|
+
disabled: boolean;
|
|
64
66
|
hideLabel: boolean;
|
|
67
|
+
maxlength?: number;
|
|
68
|
+
name: string;
|
|
65
69
|
orientation: 'horizontal' | 'vertical';
|
|
66
70
|
placeholder?: string;
|
|
71
|
+
privateSplit?: 'left' | 'middle' | 'right';
|
|
72
|
+
spellcheck: boolean;
|
|
67
73
|
required: boolean;
|
|
68
74
|
readonly: boolean;
|
|
69
|
-
disabled: boolean;
|
|
70
|
-
maxlength?: number;
|
|
71
|
-
name: string;
|
|
72
|
-
spellcheck: boolean;
|
|
73
|
-
autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
|
|
74
|
-
autocomplete: 'on' | 'off';
|
|
75
|
-
privateSplit?: 'left' | 'middle' | 'right';
|
|
76
75
|
tooltip?: string;
|
|
76
|
+
value: string;
|
|
77
77
|
readonly version: string;
|
|
78
78
|
checkValidity(): boolean;
|
|
79
79
|
disconnectedCallback(): void;
|
package/dist/textarea.js
CHANGED
|
@@ -62,4 +62,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
|
|
|
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.
|
|
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.#n=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;#n;#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)}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(){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)}#d(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property({reflect:!0}),required],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"tooltip",void 0),__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"version",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea"),final],GlideCoreTextarea);export default GlideCoreTextarea;
|
package/dist/textarea.styles.js
CHANGED
|
@@ -58,7 +58,7 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&.error {
|
|
61
|
-
border-color: var(--glide-core-color-
|
|
61
|
+
border-color: var(--glide-core-color-advisory-stroke-error-primary);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&[readonly] {
|
|
@@ -75,7 +75,7 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
75
75
|
--glide-core-color-interactive-surface-container--disabled
|
|
76
76
|
);
|
|
77
77
|
border: 0.0625rem solid
|
|
78
|
-
var(--glide-core-color-interactive-
|
|
78
|
+
var(--glide-core-color-interactive-surface-container--disabled);
|
|
79
79
|
color: var(--glide-core-color-interactive-text-default--disabled);
|
|
80
80
|
}
|
|
81
81
|
}
|
package/dist/toast.d.ts
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import './icon-button.js';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'glide-core-toast': GlideCoreToast;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* @attr {string} label
|
|
10
|
+
* @attr {number} [duration=5000] - Set to `Infinity` to make it persist until dismissed by the user
|
|
11
|
+
* @attr {'informational'|'success'|'error'} [variant='informational']
|
|
12
|
+
*
|
|
13
|
+
* @readonly
|
|
14
|
+
* @attr {string} [version]
|
|
15
|
+
*
|
|
16
|
+
* @slot {GlideCoreLink | string} - A description
|
|
17
|
+
*
|
|
18
|
+
* @fires {Event} dismiss
|
|
19
|
+
*
|
|
20
|
+
* @method dismiss
|
|
21
|
+
*/
|
|
22
|
+
export default class GlideCoreToast extends LitElement {
|
|
23
|
+
static shadowRootOptions: ShadowRootInit;
|
|
24
|
+
label?: string;
|
|
25
|
+
privateDescription?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Set to `Infinity` to make it persist until dismissed by the user
|
|
28
|
+
**/
|
|
29
|
+
duration: number;
|
|
30
|
+
privateDismissing: boolean;
|
|
31
|
+
privateDismissingViaButton: boolean;
|
|
32
|
+
privateId: string;
|
|
33
|
+
privateShow: boolean;
|
|
34
|
+
privateTimeoutId?: ReturnType<typeof setTimeout>;
|
|
35
|
+
variant: 'informational' | 'success' | 'error';
|
|
36
|
+
readonly version: string;
|
|
37
|
+
dismiss(): void;
|
|
38
|
+
firstUpdated(): void;
|
|
39
|
+
render(): import("lit").TemplateResult<1>;
|
|
40
|
+
}
|
package/dist/toast.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,a=s<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 p=e.length-1;p>=0;p--)(i=e[p])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreToasts from"./toast.toasts.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import GlideCoreLink from"./link.js";import assertSlot from"./library/assert-slot.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.privateDismissing=!1,this.privateDismissingViaButton=!1,this.privateId=nanoid(),this.privateShow=!1,this.variant="informational",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}dismiss(){this.dispatchEvent(new Event("dismiss",{bubbles:!0,composed:!0})),this.remove()}firstUpdated(){GlideCoreToasts.show(this)}render(){return html`<slot hidden ${assertSlot([GlideCoreLink,Text],!0)}></slot>`}};__decorate([property({reflect:!0}),required],GlideCoreToast.prototype,"label",void 0),__decorate([property()],GlideCoreToast.prototype,"privateDescription",void 0),__decorate([property({reflect:!0,type:Number,useDefault:!0})],GlideCoreToast.prototype,"duration",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateDismissing",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateDismissingViaButton",void 0),__decorate([property()],GlideCoreToast.prototype,"privateId",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateShow",void 0),__decorate([property({attribute:!1})],GlideCoreToast.prototype,"privateTimeoutId",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreToast.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"version",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast"),final],GlideCoreToast);export default GlideCoreToast;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import './icon-button.js';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import GlideCoreToast from './toast.js';
|
|
4
|
+
declare global {
|
|
5
|
+
interface HTMLElementTagNameMap {
|
|
6
|
+
'glide-core-private-toasts': GlideCoreToasts;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @attr {GlideCoreToast[]} [toasts=[]]
|
|
11
|
+
*
|
|
12
|
+
* @method dismiss
|
|
13
|
+
* @param {GlideCoreToast} toast
|
|
14
|
+
*
|
|
15
|
+
* @method show
|
|
16
|
+
* @param {GlideCoreToast} toast
|
|
17
|
+
* @returns Promise<void>
|
|
18
|
+
*
|
|
19
|
+
* @method showPopover
|
|
20
|
+
*/
|
|
21
|
+
export default class GlideCoreToasts extends LitElement {
|
|
22
|
+
#private;
|
|
23
|
+
static shadowRootOptions: ShadowRootInit;
|
|
24
|
+
static styles: import("lit").CSSResult[];
|
|
25
|
+
toasts: GlideCoreToast[];
|
|
26
|
+
dismiss(toast: GlideCoreToast): void;
|
|
27
|
+
firstUpdated(): void;
|
|
28
|
+
render(): import("lit").TemplateResult<1>;
|
|
29
|
+
showPopover(): void;
|
|
30
|
+
static show(toast: GlideCoreToast): Promise<void>;
|
|
31
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var o,r=arguments.length,a=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{classMap}from"lit/directives/class-map.js";import{styleMap}from"lit/directives/style-map.js";import{choose}from"lit/directives/choose.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import xIcon from"./icons/x.js";import{LocalizeController}from"./library/localize.js";import styles from"./toast.toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import GlideCoreToast from"./toast.js";import GlideCoreLink from"./link.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.toasts=[],this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}dismiss(e){const t=this.toasts.indexOf(e);this.toasts=[...this.toasts.slice(0,t),...this.toasts.slice(t+1)],e.dismiss(),0===this.toasts.length&&this.remove()}firstUpdated(){this.#e.value&&(this.#e.value.popover="manual")}render(){return html`<div
|
|
2
|
+
aria-label=${this.#t.term("notifications")}
|
|
3
|
+
class="component"
|
|
4
|
+
data-test="component"
|
|
5
|
+
role="region"
|
|
6
|
+
tabindex="-1"
|
|
7
|
+
${ref(this.#e)}
|
|
8
|
+
>
|
|
9
|
+
<div class="toasts">
|
|
10
|
+
${repeat(this.toasts,(e=>e.privateId),(e=>html`<div
|
|
11
|
+
aria-labelledby="prefix label description"
|
|
12
|
+
class=${classMap({toast:!0,error:"error"===e.variant,informational:"informational"===e.variant,success:"success"===e.variant,show:Boolean(e.privateShow),dismissing:Boolean(e.privateDismissing),"dismissing-via-button":Boolean(e.privateDismissingViaButton)})}
|
|
13
|
+
data-test="toast"
|
|
14
|
+
role="alert"
|
|
15
|
+
@mouseover=${this.#i.bind(this,e)}
|
|
16
|
+
@mouseout=${this.#s.bind(this,e)}
|
|
17
|
+
@transitionend=${this.#o.bind(this,e)}
|
|
18
|
+
>
|
|
19
|
+
<span class="prefix" id="prefix">
|
|
20
|
+
${this.#t.term(e.variant)}
|
|
21
|
+
</span>
|
|
22
|
+
|
|
23
|
+
${choose(e.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}
|
|
24
|
+
|
|
25
|
+
<div class="label" data-test="label" id="label">
|
|
26
|
+
${e.label}
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<glide-core-icon-button
|
|
30
|
+
class="dismiss-button"
|
|
31
|
+
data-test="dismiss-button"
|
|
32
|
+
label=${this.#t.term("dismiss")}
|
|
33
|
+
variant="tertiary"
|
|
34
|
+
@click=${this.#r.bind(this,e)}
|
|
35
|
+
>
|
|
36
|
+
${xIcon}
|
|
37
|
+
</glide-core-icon-button>
|
|
38
|
+
|
|
39
|
+
${when(e.privateDescription,(()=>html`
|
|
40
|
+
<div
|
|
41
|
+
class="description"
|
|
42
|
+
data-test="description"
|
|
43
|
+
id="description"
|
|
44
|
+
@click=${this.#a.bind(this,e)}
|
|
45
|
+
>
|
|
46
|
+
${unsafeHTML(e.privateDescription)}
|
|
47
|
+
</div>
|
|
48
|
+
`))}
|
|
49
|
+
</div>`))}
|
|
50
|
+
</div>
|
|
51
|
+
</div>`}showPopover(){this.#e.value?.showPopover()}static async show(e){let t=document.querySelector("glide-core-private-toasts");if(t||(t=document.createElement("glide-core-private-toasts"),document.body.append(t)),e.childNodes.length>0){let t="";for(const i of e.childNodes)i instanceof Element?t+=i.outerHTML:i instanceof Text&&(t+=i.textContent);e.privateDescription=t.trim()}t.toasts=[e,...t.toasts],await t.updateComplete,t.showPopover(),e.privateShow=!0,setTimeout((()=>{t.requestUpdate()})),e.duration<Number.POSITIVE_INFINITY&&(e.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?t?.dismiss(e):(e.privateDismissing=!0,t.requestUpdate())}),e.duration))}#e;#t;#a(e,t){t.target instanceof GlideCoreLink&&t.preventDefault();const i=[...e.querySelectorAll("*")].find((e=>{if(t.target instanceof GlideCoreLink)return e instanceof GlideCoreLink&&e.label===t.target.label&&e.href===t.target.href}));i instanceof GlideCoreLink&&i.click()}#r(e){window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(e):(e.privateDismissing=!0,e.privateDismissingViaButton=!0,this.requestUpdate())}#s(e){e.duration<Number.POSITIVE_INFINITY&&(e.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(e):(e.privateDismissing=!0,this.requestUpdate())}),e.duration))}#i(e){clearTimeout(e.privateTimeoutId)}#o(e){document.querySelector("glide-core-private-toasts")&&e.privateDismissing&&this.dismiss(e)}};__decorate([property({type:Array})],GlideCoreToasts.prototype,"toasts",void 0),GlideCoreToasts=__decorate([customElement("glide-core-private-toasts"),final],GlideCoreToasts);export default GlideCoreToasts;const icons={error:html`<svg
|
|
52
|
+
aria-hidden="true"
|
|
53
|
+
class="icon error"
|
|
54
|
+
fill="none"
|
|
55
|
+
viewBox="0 0 20 20"
|
|
56
|
+
style=${styleMap({height:"1.25rem",width:"1.25rem"})}
|
|
57
|
+
>
|
|
58
|
+
<path
|
|
59
|
+
fill-rule="evenodd"
|
|
60
|
+
clip-rule="evenodd"
|
|
61
|
+
d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z"
|
|
62
|
+
fill="currentColor"
|
|
63
|
+
/>
|
|
64
|
+
</svg>`,success:html`<svg
|
|
65
|
+
aria-hidden="true"
|
|
66
|
+
class="icon success"
|
|
67
|
+
fill="none"
|
|
68
|
+
viewBox="0 0 20 20"
|
|
69
|
+
style=${styleMap({height:"1.25rem",width:"1.25rem"})}
|
|
70
|
+
>
|
|
71
|
+
<path
|
|
72
|
+
fill-rule="evenodd"
|
|
73
|
+
clip-rule="evenodd"
|
|
74
|
+
d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z"
|
|
75
|
+
fill="currentColor"
|
|
76
|
+
/>
|
|
77
|
+
</svg>`,warningInformational:html`<svg
|
|
78
|
+
aria-hidden="true"
|
|
79
|
+
class="icon informational"
|
|
80
|
+
fill="none"
|
|
81
|
+
viewBox="0 0 20 20"
|
|
82
|
+
style=${styleMap({height:"1.25rem",width:"1.25rem"})}
|
|
83
|
+
>
|
|
84
|
+
<path
|
|
85
|
+
fill-rule="evenodd"
|
|
86
|
+
clip-rule="evenodd"
|
|
87
|
+
d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z"
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
/>
|
|
90
|
+
</svg>`};
|