@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
@@ -0,0 +1,127 @@
|
|
1
|
+
import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
|
2
|
+
${visuallyHidden(".prefix")}
|
3
|
+
`,css`
|
4
|
+
.component {
|
5
|
+
background-color: transparent;
|
6
|
+
border: none;
|
7
|
+
inset-block-end: unset;
|
8
|
+
inset-block-start: 0;
|
9
|
+
inset-inline-end: 0;
|
10
|
+
inset-inline-start: unset;
|
11
|
+
max-block-size: 100%;
|
12
|
+
max-inline-size: 100%;
|
13
|
+
overflow-x: hidden;
|
14
|
+
overflow-y: auto;
|
15
|
+
overscroll-behavior: contain;
|
16
|
+
padding: 0;
|
17
|
+
position: fixed;
|
18
|
+
|
19
|
+
&:popover-open .toasts {
|
20
|
+
display: flex;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
.toasts {
|
25
|
+
--private-toasts-padding: var(--glide-core-spacing-base-sm);
|
26
|
+
|
27
|
+
display: none;
|
28
|
+
flex-direction: column;
|
29
|
+
gap: var(--glide-core-spacing-base-md);
|
30
|
+
padding: var(--private-toasts-padding);
|
31
|
+
}
|
32
|
+
|
33
|
+
.toast {
|
34
|
+
align-items: center;
|
35
|
+
border-radius: var(--glide-core-rounding-base-radius-md);
|
36
|
+
box-shadow: var(--glide-core-effect-floating);
|
37
|
+
color: var(--glide-core-color-static-text-default);
|
38
|
+
column-gap: var(--glide-core-spacing-base-xs);
|
39
|
+
display: grid;
|
40
|
+
font-family: var(--glide-core-typography-family-primary);
|
41
|
+
font-size: var(--glide-core-typography-size-body-default);
|
42
|
+
font-weight: var(--glide-core-typography-weight-regular);
|
43
|
+
grid-template-columns: auto minmax(0, 1fr);
|
44
|
+
inline-size: 21.125rem;
|
45
|
+
padding: var(--glide-core-spacing-base-sm);
|
46
|
+
transform: translateX(calc(100% + var(--private-toasts-padding)));
|
47
|
+
|
48
|
+
&.error {
|
49
|
+
background-color: var(
|
50
|
+
--glide-core-color-advisory-surface-error-container
|
51
|
+
);
|
52
|
+
}
|
53
|
+
|
54
|
+
&.informational {
|
55
|
+
background-color: var(
|
56
|
+
--glide-core-color-advisory-surface-info-container
|
57
|
+
);
|
58
|
+
}
|
59
|
+
|
60
|
+
&.success {
|
61
|
+
background-color: var(
|
62
|
+
--glide-core-color-advisory-surface-success-container
|
63
|
+
);
|
64
|
+
}
|
65
|
+
|
66
|
+
&.show {
|
67
|
+
@media (prefers-reduced-motion: no-preference) {
|
68
|
+
transition: transform var(--private-test-transition-duration, 700ms)
|
69
|
+
ease-out;
|
70
|
+
}
|
71
|
+
|
72
|
+
transform: translateX(0);
|
73
|
+
}
|
74
|
+
|
75
|
+
&.dismissing {
|
76
|
+
@media (prefers-reduced-motion: no-preference) {
|
77
|
+
transition: transform var(--private-test-transition-duration, 700ms)
|
78
|
+
ease-in;
|
79
|
+
}
|
80
|
+
|
81
|
+
transform: translateX(calc(100% + var(--private-toasts-padding)));
|
82
|
+
|
83
|
+
&.dismissing-via-button {
|
84
|
+
@media (prefers-reduced-motion: no-preference) {
|
85
|
+
transition: transform var(--private-test-transition-duration, 500ms)
|
86
|
+
ease-in;
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
.icon {
|
93
|
+
block-size: 1.25rem;
|
94
|
+
grid-column: 1;
|
95
|
+
inline-size: 1.25rem;
|
96
|
+
|
97
|
+
&.informational {
|
98
|
+
color: var(--glide-core-color-advisory-icon-info);
|
99
|
+
}
|
100
|
+
|
101
|
+
&.success {
|
102
|
+
color: var(--glide-core-color-advisory-icon-success);
|
103
|
+
}
|
104
|
+
|
105
|
+
&.error {
|
106
|
+
color: var(--glide-core-color-advisory-icon-error);
|
107
|
+
}
|
108
|
+
}
|
109
|
+
|
110
|
+
.label {
|
111
|
+
color: var(--glide-core-color-static-text-default);
|
112
|
+
font-size: var(--glide-core-typography-size-body-large);
|
113
|
+
font-weight: var(--glide-core-typography-weight-bold);
|
114
|
+
grid-column: 2;
|
115
|
+
}
|
116
|
+
|
117
|
+
.dismiss-button {
|
118
|
+
--private-icon-color: var(--glide-core-color-interactive-icon-default);
|
119
|
+
|
120
|
+
grid-column: 3;
|
121
|
+
}
|
122
|
+
|
123
|
+
.description {
|
124
|
+
color: var(--glide-core-color-static-text-default);
|
125
|
+
grid-column: 2;
|
126
|
+
}
|
127
|
+
`];
|
package/dist/toggle.d.ts
CHANGED
@@ -25,10 +25,10 @@ export default class GlideCoreToggle extends LitElement {
|
|
25
25
|
#private;
|
26
26
|
static shadowRootOptions: ShadowRootInit;
|
27
27
|
static styles: import("lit").CSSResult[];
|
28
|
+
label?: string;
|
28
29
|
checked: boolean;
|
29
30
|
disabled: boolean;
|
30
31
|
hideLabel: boolean;
|
31
|
-
label?: string;
|
32
32
|
orientation: 'horizontal' | 'vertical';
|
33
33
|
privateSplit?: 'left' | 'middle' | 'right';
|
34
34
|
summary?: string;
|
package/dist/toggle.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({reflect:!0}),required],GlideCoreToggle.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"version",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle"),final],GlideCoreToggle);export default GlideCoreToggle;
|
package/dist/tooltip.d.ts
CHANGED
@@ -26,16 +26,16 @@ export default class GlideCoreTooltip extends LitElement {
|
|
26
26
|
#private;
|
27
27
|
static shadowRootOptions: ShadowRootInit;
|
28
28
|
static styles: import("lit").CSSResult[];
|
29
|
-
/**
|
30
|
-
* @default false
|
31
|
-
*/
|
32
|
-
get disabled(): boolean;
|
33
|
-
set disabled(isDisabled: boolean);
|
34
29
|
/**
|
35
30
|
* @default undefined
|
36
31
|
*/
|
37
32
|
get label(): string | undefined;
|
38
33
|
set label(label: string);
|
34
|
+
/**
|
35
|
+
* @default false
|
36
|
+
*/
|
37
|
+
get disabled(): boolean;
|
38
|
+
set disabled(isDisabled: boolean);
|
39
39
|
/**
|
40
40
|
* @default 4
|
41
41
|
*/
|
package/dist/tooltip.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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 packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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 packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#s.value&&(this.#s.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#d(){this.#s.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#s.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#l.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#s.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#l.value&&this.#s.value&&(this.#y=autoUpdate(this.#l.value,this.#s.value,(()=>{(async()=>{if(this.#l.value&&this.#s.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#s.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"version",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip"),final],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
|
package/dist/translations/en.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items
|
1
|
+
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/fr.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"Aucun résultat trouvé",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments
|
1
|
+
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"Aucun résultat trouvé",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/ja.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"結果が見つかりません",tooltip:"ツールチップ:",announcedCharacterCount:(e
|
1
|
+
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"結果が見つかりません",tooltip:"ツールチップ:",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション:${t}`,editTag:t=>`タグの編集:${t}`,removeTag:t=>`タグの削除:${t}`,itemCount:t=>`${t}件`};export default translation;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@crowdstrike/glide-core",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.26.0",
|
4
4
|
"description": "A Web Component design system",
|
5
5
|
"author": "CrowdStrike UX Team",
|
6
6
|
"license": "Apache-2.0",
|
@@ -41,7 +41,7 @@
|
|
41
41
|
"./package.json": "./package.json",
|
42
42
|
"./translations/*": null,
|
43
43
|
"./tooltip.container.js": null,
|
44
|
-
"./toasts.
|
44
|
+
"./toast.toasts.js": null,
|
45
45
|
"./styles/variables.css": "./dist/styles/variables.css",
|
46
46
|
"./styles/fonts.css": "./dist/styles/fonts.css",
|
47
47
|
"./styles/*": null,
|
@@ -66,7 +66,7 @@
|
|
66
66
|
"@eslint/js": "^9.22.0",
|
67
67
|
"@figma/rest-api-spec": "^0.27.0",
|
68
68
|
"@open-wc/testing": "^4.0.0",
|
69
|
-
"@playwright/test": "^1.
|
69
|
+
"@playwright/test": "^1.52.0",
|
70
70
|
"@rollup/plugin-commonjs": "^28.0.2",
|
71
71
|
"@storybook/addon-actions": "^8.6.3",
|
72
72
|
"@storybook/addon-controls": "^8.6.3",
|
@@ -108,13 +108,13 @@
|
|
108
108
|
"husky": "^8.0.3",
|
109
109
|
"is-ci": "^4.1.0",
|
110
110
|
"lint-staged": "^15.2.11",
|
111
|
-
"lit": "^3.
|
111
|
+
"lit": "^3.3.0",
|
112
112
|
"lit-analyzer": "^2.0.3",
|
113
113
|
"minify-literals": "^1.0.10",
|
114
114
|
"node-html-parser": "^7.0.1",
|
115
115
|
"npm-run-all2": "^7.0.2",
|
116
116
|
"per-env": "^1.0.2",
|
117
|
-
"playwright": "^1.
|
117
|
+
"playwright": "^1.52.0",
|
118
118
|
"postcss": "^8.4.49",
|
119
119
|
"postcss-lit": "^1.1.1",
|
120
120
|
"prettier": "^3.5.3",
|
@@ -135,13 +135,13 @@
|
|
135
135
|
"tsx": "^4.19.2",
|
136
136
|
"typescript": "^5.8.2",
|
137
137
|
"typescript-eslint": "^8.29.0",
|
138
|
-
"vite": "^6.2
|
138
|
+
"vite": "^6.3.2",
|
139
139
|
"vitest": "^3.0.8",
|
140
140
|
"yocto-spinner": "^0.2.0"
|
141
141
|
},
|
142
142
|
"engines": {
|
143
143
|
"node": ">= 20",
|
144
|
-
"pnpm": ">=
|
144
|
+
"pnpm": ">= 9"
|
145
145
|
},
|
146
146
|
"scripts": {
|
147
147
|
"start": "per-env",
|
@@ -187,7 +187,7 @@
|
|
187
187
|
"typecheck": "per-env",
|
188
188
|
"typecheck:development": "tsc --erasableSyntaxOnly --outDir ./dist -w",
|
189
189
|
"typecheck:production": "tsc --erasableSyntaxOnly --outDir ./dist",
|
190
|
-
"postinstall": "is-ci || pnpm dlx playwright@1.
|
190
|
+
"postinstall": "is-ci || pnpm dlx playwright@1.52.0 install --only-shell --with-deps chromium",
|
191
191
|
"postinstall:comment": "Not installing Chromium in CI every time we run `pnpm install` speeds up builds at the cost of having to also update Playwright's version in our workflows whenever we update Playwright here.",
|
192
192
|
"release": "changeset publish"
|
193
193
|
}
|
package/dist/toasts.d.ts
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
import { LitElement } from 'lit';
|
2
|
-
import GlideCoreToast from './toasts.toast.js';
|
3
|
-
declare global {
|
4
|
-
interface HTMLElementTagNameMap {
|
5
|
-
'glide-core-toasts': GlideCoreToasts;
|
6
|
-
}
|
7
|
-
}
|
8
|
-
/**
|
9
|
-
* @readonly
|
10
|
-
* @attr {string} [version]
|
11
|
-
*
|
12
|
-
* @method add
|
13
|
-
* @param {{
|
14
|
-
* label: string;
|
15
|
-
* description: string;
|
16
|
-
* variant: 'error' | 'informational' | 'success';
|
17
|
-
* duration?: number; // Defaults to 5000. Set to `Infinity` to make the toast persist until dismissed.
|
18
|
-
* }} toast
|
19
|
-
* @returns GlideCoreToast
|
20
|
-
*/
|
21
|
-
export default class GlideCoreToasts extends LitElement {
|
22
|
-
#private;
|
23
|
-
static shadowRootOptions: ShadowRootInit;
|
24
|
-
static styles: import("lit").CSSResult[];
|
25
|
-
readonly version: string;
|
26
|
-
add(toast: {
|
27
|
-
label: string;
|
28
|
-
description: string;
|
29
|
-
variant: 'error' | 'informational' | 'success';
|
30
|
-
duration?: number;
|
31
|
-
}): GlideCoreToast;
|
32
|
-
render(): import("lit").TemplateResult<1>;
|
33
|
-
}
|
package/dist/toasts.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import GlideCoreToast from"./toasts.toast.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value&&(this.#e.value.popover="manual",this.#e.value.showPopover(),this.#e.value.append(i)),i.addEventListener("close",(()=>{i.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),i}render(){return html`<div class="component" data-test="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreToasts.prototype,"version",void 0),GlideCoreToasts=__decorate([customElement("glide-core-toasts"),final],GlideCoreToasts);export default GlideCoreToasts;
|
package/dist/toasts.styles.js
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
import{css}from"lit";export default[css`
|
2
|
-
.component {
|
3
|
-
background-color: transparent;
|
4
|
-
border: none;
|
5
|
-
display: none;
|
6
|
-
flex-direction: column-reverse;
|
7
|
-
gap: var(--glide-core-spacing-base-md);
|
8
|
-
inline-size: 24.25rem;
|
9
|
-
inset-block-start: 0;
|
10
|
-
inset-inline-end: 0;
|
11
|
-
margin: 0 0 auto auto;
|
12
|
-
max-block-size: 100%;
|
13
|
-
max-inline-size: 100%;
|
14
|
-
overflow: hidden;
|
15
|
-
padding: var(--glide-core-spacing-base-sm);
|
16
|
-
position: fixed;
|
17
|
-
|
18
|
-
&:popover-open {
|
19
|
-
display: flex;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
`];
|
package/dist/toasts.toast.d.ts
DELETED
@@ -1,31 +0,0 @@
|
|
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} [description]
|
10
|
-
* @attr {number} [duration=5000]
|
11
|
-
* @attr {string} [label]
|
12
|
-
* @attr {'error'|'informational'|'success'} [variant]
|
13
|
-
*
|
14
|
-
* @fires {Event} close
|
15
|
-
*
|
16
|
-
* @method close
|
17
|
-
* @method open
|
18
|
-
*/
|
19
|
-
export default class GlideCoreToast extends LitElement {
|
20
|
-
#private;
|
21
|
-
static shadowRootOptions: ShadowRootInit;
|
22
|
-
static styles: import("lit").CSSResult[];
|
23
|
-
label?: string;
|
24
|
-
description?: string;
|
25
|
-
duration?: number | undefined;
|
26
|
-
variant?: 'error' | 'informational' | 'success';
|
27
|
-
close(): void;
|
28
|
-
firstUpdated(): void;
|
29
|
-
open(): void;
|
30
|
-
render(): import("lit").TemplateResult<1>;
|
31
|
-
}
|
package/dist/toasts.toast.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,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--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LocalizeController}from"./library/localize.js";import styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}close(){this.#e.value?.addEventListener("transitionend",(()=>{this.#e.value?.classList.remove("open","closing"),this.#e.value?.classList.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e.value?.classList.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div aria-labelledby="prefix label description" class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" data-test="component" role="alert" ${ref(this.#e)}><span class="prefix" id="prefix">${this.#t.term(this.variant)} </span>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button class="close-button" data-test="close-button" label="${this.#t.term("close")}" variant="tertiary" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast"),final],GlideCoreToast);export default GlideCoreToast;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"/></svg>`};
|
@@ -1,88 +0,0 @@
|
|
1
|
-
import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
|
2
|
-
${visuallyHidden(".prefix")}
|
3
|
-
`,css`
|
4
|
-
.component {
|
5
|
-
align-items: center;
|
6
|
-
border-radius: var(--glide-core-rounding-base-radius-md);
|
7
|
-
box-shadow: var(--glide-core-effect-floating);
|
8
|
-
color: var(--glide-core-color-static-text-default);
|
9
|
-
column-gap: var(--glide-core-spacing-base-xs);
|
10
|
-
display: grid;
|
11
|
-
font-family: var(--glide-core-typography-family-primary);
|
12
|
-
font-size: var(--glide-core-typography-size-body-default);
|
13
|
-
font-weight: var(--glide-core-typography-weight-regular);
|
14
|
-
grid-template-columns: auto minmax(0, 1fr);
|
15
|
-
padding: var(--glide-core-spacing-base-sm);
|
16
|
-
transform: translateX(110%);
|
17
|
-
|
18
|
-
@media (prefers-reduced-motion: no-preference) {
|
19
|
-
transition:
|
20
|
-
transform 0.2s ease-out,
|
21
|
-
opacity 0.3s ease-out;
|
22
|
-
}
|
23
|
-
|
24
|
-
&.error {
|
25
|
-
background-color: var(--glide-core-color-error-surface-container);
|
26
|
-
}
|
27
|
-
|
28
|
-
&.informational {
|
29
|
-
background-color: var(--glide-core-color-info-surface-container);
|
30
|
-
}
|
31
|
-
|
32
|
-
&.success {
|
33
|
-
background-color: var(--glide-core-color-success-surface-container);
|
34
|
-
}
|
35
|
-
|
36
|
-
&.open {
|
37
|
-
opacity: 1;
|
38
|
-
transform: none;
|
39
|
-
visibility: visible;
|
40
|
-
}
|
41
|
-
|
42
|
-
&.closing {
|
43
|
-
opacity: 0;
|
44
|
-
transform: none;
|
45
|
-
}
|
46
|
-
|
47
|
-
&.closed {
|
48
|
-
display: none;
|
49
|
-
}
|
50
|
-
}
|
51
|
-
|
52
|
-
.icon {
|
53
|
-
block-size: 1.25rem;
|
54
|
-
grid-column: 1;
|
55
|
-
inline-size: 1.25rem;
|
56
|
-
}
|
57
|
-
|
58
|
-
.label {
|
59
|
-
color: var(--glide-core-color-static-text-default);
|
60
|
-
font-size: var(--glide-core-typography-size-heading-h3);
|
61
|
-
font-weight: var(--glide-core-typography-weight-semibold);
|
62
|
-
grid-column: 2;
|
63
|
-
line-height: var(--glide-core-typography-height-heading-h3);
|
64
|
-
}
|
65
|
-
|
66
|
-
.close-button {
|
67
|
-
--private-icon-color: var(--glide-core-color-interactive-icon-default);
|
68
|
-
|
69
|
-
grid-column: 3;
|
70
|
-
}
|
71
|
-
|
72
|
-
.description {
|
73
|
-
color: var(--glide-core-color-static-text-default);
|
74
|
-
grid-column: 2;
|
75
|
-
}
|
76
|
-
|
77
|
-
.error {
|
78
|
-
color: var(--glide-core-color-error-icon-default);
|
79
|
-
}
|
80
|
-
|
81
|
-
.success {
|
82
|
-
color: var(--glide-core-color-success-icon-default);
|
83
|
-
}
|
84
|
-
|
85
|
-
.warning-informational {
|
86
|
-
color: var(--glide-core-color-info-icon-default);
|
87
|
-
}
|
88
|
-
`];
|
File without changes
|
File without changes
|