@crowdstrike/glide-core 0.23.0 → 0.24.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.styles.js +22 -21
- package/dist/button-group.button.styles.js +46 -22
- package/dist/button-group.styles.js +7 -7
- package/dist/button.d.ts +3 -0
- package/dist/button.js +1 -1
- package/dist/button.styles.js +62 -42
- package/dist/checkbox-group.styles.js +5 -5
- package/dist/checkbox.js +9 -3
- package/dist/checkbox.styles.js +46 -28
- package/dist/drawer.styles.js +6 -4
- package/dist/dropdown.js +1 -1
- package/dist/dropdown.option.styles.js +26 -28
- package/dist/dropdown.styles.js +64 -58
- package/dist/icon-button.styles.js +44 -23
- package/dist/inline-alert.js +1 -1
- package/dist/inline-alert.styles.js +24 -21
- package/dist/input.styles.js +33 -25
- package/dist/label.styles.js +22 -27
- package/dist/menu.button.styles.js +6 -4
- package/dist/menu.js +1 -1
- package/dist/menu.link.styles.js +6 -4
- package/dist/menu.options.styles.js +12 -16
- package/dist/menu.styles.js +9 -6
- package/dist/modal.styles.js +16 -13
- package/dist/popover.js +1 -1
- package/dist/popover.styles.js +14 -14
- package/dist/radio-group.radio.styles.js +31 -11
- package/dist/radio-group.styles.js +8 -10
- package/dist/split-button.primary-button.styles.js +41 -26
- package/dist/split-button.secondary-button.styles.js +61 -21
- package/dist/styles/focus-outline.js +1 -1
- package/dist/styles/variables.css +1 -1
- package/dist/tab.group.styles.js +6 -5
- package/dist/tab.panel.styles.js +1 -1
- package/dist/tab.styles.js +7 -7
- package/dist/tag.styles.js +27 -26
- package/dist/textarea.styles.js +22 -18
- package/dist/toasts.styles.js +2 -2
- package/dist/toasts.toast.styles.js +20 -20
- package/dist/toggle.styles.js +15 -7
- package/dist/tooltip.container.styles.js +14 -13
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.styles.js +1 -1
- package/package.json +8 -9
- package/dist/library/get-parent-class-name.d.ts +0 -3
- package/dist/library/get-parent-class-name.js +0 -1
package/dist/textarea.styles.js
CHANGED
|
@@ -3,7 +3,7 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
3
3
|
`,css`
|
|
4
4
|
glide-core-private-label::part(private-tooltips) {
|
|
5
5
|
align-items: flex-start;
|
|
6
|
-
margin-block-start: var(--glide-core-spacing-sm);
|
|
6
|
+
margin-block-start: var(--glide-core-spacing-base-sm);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.textarea-container {
|
|
@@ -24,19 +24,20 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
24
24
|
|
|
25
25
|
textarea {
|
|
26
26
|
appearance: none;
|
|
27
|
-
background-color: var(--glide-core-surface-
|
|
28
|
-
border: 1px solid var(--glide-core-
|
|
29
|
-
border-radius:
|
|
30
|
-
color: var(--glide-core-text-
|
|
27
|
+
background-color: var(--glide-core-color-interactive-surface-container);
|
|
28
|
+
border: 1px solid var(--glide-core-color-interactive-stroke-primary);
|
|
29
|
+
border-radius: var(--glide-core-rounding-base-radius-sm);
|
|
30
|
+
color: var(--glide-core-color-interactive-text-default);
|
|
31
31
|
cursor: inherit;
|
|
32
32
|
display: block;
|
|
33
33
|
flex-grow: 1;
|
|
34
|
-
font-family: var(--glide-core-
|
|
35
|
-
font-size: var(--glide-core-
|
|
36
|
-
font-weight: var(--glide-core-
|
|
34
|
+
font-family: var(--glide-core-typography-family-primary);
|
|
35
|
+
font-size: var(--glide-core-typography-size-body-default);
|
|
36
|
+
font-weight: var(--glide-core-typography-weight-regular);
|
|
37
37
|
max-block-size: 5lh;
|
|
38
38
|
min-block-size: 3lh;
|
|
39
|
-
padding: var(--glide-core-spacing-xs)
|
|
39
|
+
padding: var(--glide-core-spacing-base-xs)
|
|
40
|
+
var(--glide-core-spacing-base-sm);
|
|
40
41
|
resize: vertical;
|
|
41
42
|
transition: border-color 200ms ease-in-out;
|
|
42
43
|
|
|
@@ -49,15 +50,15 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
49
50
|
&:focus-visible,
|
|
50
51
|
&:focus-visible[readonly],
|
|
51
52
|
&:hover {
|
|
52
|
-
border-color: var(--glide-core-
|
|
53
|
+
border-color: var(--glide-core-color-interactive-stroke-primary--hover);
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
&::placeholder {
|
|
56
|
-
color: var(--glide-core-text-placeholder);
|
|
57
|
+
color: var(--glide-core-color-interactive-text-placeholder);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
&.error {
|
|
60
|
-
border-color: var(--glide-core-
|
|
61
|
+
border-color: var(--glide-core-color-error-stroke-primary);
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
&[readonly] {
|
|
@@ -70,22 +71,25 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
|
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
&[disabled] {
|
|
73
|
-
background-color: var(
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
background-color: var(
|
|
75
|
+
--glide-core-color-interactive-surface-container--disabled
|
|
76
|
+
);
|
|
77
|
+
border: 0.0625rem solid
|
|
78
|
+
var(--glide-core-color-interactive-stroke-primary--disabled);
|
|
79
|
+
color: var(--glide-core-color-interactive-text-default--disabled);
|
|
76
80
|
}
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
.meta {
|
|
80
|
-
column-gap: var(--glide-core-spacing-xs);
|
|
84
|
+
column-gap: var(--glide-core-spacing-base-xs);
|
|
81
85
|
display: flex;
|
|
82
|
-
font-size: var(--glide-core-
|
|
86
|
+
font-size: var(--glide-core-typography-size-body-small);
|
|
83
87
|
justify-content: space-between;
|
|
84
88
|
}
|
|
85
89
|
|
|
86
90
|
.character-count {
|
|
87
91
|
&.error {
|
|
88
|
-
font-weight: var(--glide-core-
|
|
92
|
+
font-weight: var(--glide-core-typography-weight-bold);
|
|
89
93
|
}
|
|
90
94
|
}
|
|
91
95
|
`];
|
package/dist/toasts.styles.js
CHANGED
|
@@ -4,7 +4,7 @@ import{css}from"lit";export default[css`
|
|
|
4
4
|
border: none;
|
|
5
5
|
display: none;
|
|
6
6
|
flex-direction: column-reverse;
|
|
7
|
-
gap: var(--glide-core-spacing-md);
|
|
7
|
+
gap: var(--glide-core-spacing-base-md);
|
|
8
8
|
inline-size: 24.25rem;
|
|
9
9
|
inset-block-start: 0;
|
|
10
10
|
inset-inline-end: 0;
|
|
@@ -12,7 +12,7 @@ import{css}from"lit";export default[css`
|
|
|
12
12
|
max-block-size: 100%;
|
|
13
13
|
max-inline-size: 100%;
|
|
14
14
|
overflow: hidden;
|
|
15
|
-
padding: var(--glide-core-spacing-sm);
|
|
15
|
+
padding: var(--glide-core-spacing-base-sm);
|
|
16
16
|
position: fixed;
|
|
17
17
|
|
|
18
18
|
&:popover-open {
|
|
@@ -3,17 +3,16 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
|
|
|
3
3
|
`,css`
|
|
4
4
|
.component {
|
|
5
5
|
align-items: center;
|
|
6
|
-
border-radius: var(--glide-core-
|
|
7
|
-
box-shadow: var(--glide-core-
|
|
8
|
-
color: var(--glide-core-text-
|
|
9
|
-
column-gap: var(--glide-core-spacing-xs);
|
|
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
10
|
display: grid;
|
|
11
|
-
font-family: var(--glide-core-
|
|
12
|
-
font-size: var(--glide-core-
|
|
13
|
-
font-weight: var(--glide-core-
|
|
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
14
|
grid-template-columns: auto minmax(0, 1fr);
|
|
15
|
-
|
|
16
|
-
padding: var(--glide-core-spacing-sm);
|
|
15
|
+
padding: var(--glide-core-spacing-base-sm);
|
|
17
16
|
transform: translateX(110%);
|
|
18
17
|
|
|
19
18
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -23,15 +22,15 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
|
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
&.error {
|
|
26
|
-
background-color: var(--glide-core-surface-
|
|
25
|
+
background-color: var(--glide-core-color-error-surface-container);
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
&.informational {
|
|
30
|
-
background-color: var(--glide-core-surface-
|
|
29
|
+
background-color: var(--glide-core-color-info-surface-container);
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
&.success {
|
|
34
|
-
background-color: var(--glide-core-surface-
|
|
33
|
+
background-color: var(--glide-core-color-success-surface-container);
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
&.open {
|
|
@@ -57,32 +56,33 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
|
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
.label {
|
|
60
|
-
color: var(--glide-core-text-
|
|
61
|
-
font-size: var(--glide-core-
|
|
62
|
-
font-weight: var(--glide-core-
|
|
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);
|
|
63
62
|
grid-column: 2;
|
|
63
|
+
line-height: var(--glide-core-typography-height-heading-h3);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.close-button {
|
|
67
|
-
--private-icon-color: var(--glide-core-icon-
|
|
67
|
+
--private-icon-color: var(--glide-core-color-interactive-icon-default);
|
|
68
68
|
|
|
69
69
|
grid-column: 3;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.description {
|
|
73
|
-
color: var(--glide-core-text-
|
|
73
|
+
color: var(--glide-core-color-static-text-default);
|
|
74
74
|
grid-column: 2;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.error {
|
|
78
|
-
color: var(--glide-core-
|
|
78
|
+
color: var(--glide-core-color-error-icon-default);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.success {
|
|
82
|
-
color: var(--glide-core-
|
|
82
|
+
color: var(--glide-core-color-success-icon-default);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
.warning-informational {
|
|
86
|
-
color: var(--glide-core-
|
|
86
|
+
color: var(--glide-core-color-info-icon-default);
|
|
87
87
|
}
|
|
88
88
|
`];
|
package/dist/toggle.styles.js
CHANGED
|
@@ -4,17 +4,19 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
4
4
|
.toggle-and-input-and-summary {
|
|
5
5
|
align-items: center;
|
|
6
6
|
display: flex;
|
|
7
|
-
gap: var(--glide-core-spacing-sm);
|
|
7
|
+
gap: var(--glide-core-spacing-base-sm);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.toggle-and-input {
|
|
11
11
|
--private-inline-size: 1.5rem;
|
|
12
12
|
|
|
13
13
|
align-items: center;
|
|
14
|
-
background-color: var(
|
|
14
|
+
background-color: var(
|
|
15
|
+
--glide-core-color-interactive-surface-container-inactive
|
|
16
|
+
);
|
|
15
17
|
block-size: 0.875rem;
|
|
16
18
|
border: 1px solid transparent;
|
|
17
|
-
border-radius: var(--glide-core-
|
|
19
|
+
border-radius: var(--glide-core-rounding-base-radius-round);
|
|
18
20
|
display: flex;
|
|
19
21
|
flex-shrink: 0; /* Don't shrink when the summary wraps. */
|
|
20
22
|
inline-size: var(--private-inline-size);
|
|
@@ -22,7 +24,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
22
24
|
position: relative;
|
|
23
25
|
|
|
24
26
|
&:has(input:checked:not(:disabled)) {
|
|
25
|
-
background-color: var(
|
|
27
|
+
background-color: var(
|
|
28
|
+
--glide-core-color-interactive-surface-container-active
|
|
29
|
+
);
|
|
26
30
|
border-color: transparent;
|
|
27
31
|
|
|
28
32
|
&::before {
|
|
@@ -31,7 +35,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
&:has(input:disabled) {
|
|
34
|
-
background-color: var(
|
|
38
|
+
background-color: var(
|
|
39
|
+
--glide-core-color-interactive-surface-container--disabled
|
|
40
|
+
);
|
|
35
41
|
|
|
36
42
|
&::before {
|
|
37
43
|
box-shadow: none;
|
|
@@ -39,7 +45,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
&:has(input:checked:disabled) {
|
|
42
|
-
background-color: var(
|
|
48
|
+
background-color: var(
|
|
49
|
+
--glide-core-color-interactive-surface-container-active--disabled
|
|
50
|
+
);
|
|
43
51
|
|
|
44
52
|
&::before {
|
|
45
53
|
transform: translateX(0);
|
|
@@ -47,7 +55,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
&::before {
|
|
50
|
-
background: var(--glide-core-
|
|
58
|
+
background: var(--glide-core-color-interactive-icon-onsolid);
|
|
51
59
|
block-size: 0.875rem;
|
|
52
60
|
border-radius: 50%;
|
|
53
61
|
box-shadow:
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import{css}from"lit";export default[css`
|
|
2
2
|
.component {
|
|
3
3
|
align-items: center;
|
|
4
|
-
background-color: var(
|
|
5
|
-
|
|
4
|
+
background-color: var(
|
|
5
|
+
--glide-core-private-color-tooltip-surface-container
|
|
6
|
+
);
|
|
7
|
+
border-radius: var(--glide-core-spacing-base-xs);
|
|
6
8
|
display: flex;
|
|
7
|
-
font-family: var(--glide-core-
|
|
8
|
-
font-size: var(--glide-core-
|
|
9
|
-
font-
|
|
10
|
-
font-weight: var(--glide-core-body-sm-font-weight);
|
|
9
|
+
font-family: var(--glide-core-typography-family-primary);
|
|
10
|
+
font-size: var(--glide-core-typography-size-body-default);
|
|
11
|
+
font-weight: var(--glide-core-typography-weight-regular);
|
|
11
12
|
inline-size: max-content;
|
|
12
13
|
inset-block-start: 50%;
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
padding: var(--glide-core-spacing-base-xs)
|
|
15
|
+
var(--glide-core-spacing-base-sm);
|
|
15
16
|
|
|
16
17
|
&.reversed {
|
|
17
18
|
flex-direction: row-reverse;
|
|
@@ -19,7 +20,7 @@ import{css}from"lit";export default[css`
|
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.label {
|
|
22
|
-
color: var(--glide-core-text-
|
|
23
|
+
color: var(--glide-core-color-static-text-onsolid);
|
|
23
24
|
display: block;
|
|
24
25
|
hyphens: auto;
|
|
25
26
|
max-inline-size: 11.25rem;
|
|
@@ -28,7 +29,7 @@ import{css}from"lit";export default[css`
|
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.shortcut {
|
|
31
|
-
color: var(--glide-core-text-
|
|
32
|
+
color: var(--glide-core-private-color-tooltip-text-shortcut);
|
|
32
33
|
display: none;
|
|
33
34
|
white-space: nowrap;
|
|
34
35
|
|
|
@@ -37,15 +38,15 @@ import{css}from"lit";export default[css`
|
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
&.reversed {
|
|
40
|
-
margin-inline-end: var(--glide-core-spacing-xs);
|
|
41
|
+
margin-inline-end: var(--glide-core-spacing-base-xs);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
&:not(.reversed) {
|
|
44
|
-
margin-inline-start: var(--glide-core-spacing-xs);
|
|
45
|
+
margin-inline-start: var(--glide-core-spacing-base-xs);
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
kbd {
|
|
49
|
-
font-family: var(--glide-core-
|
|
50
|
+
font-family: var(--glide-core-typography-family-primary);
|
|
50
51
|
}
|
|
51
52
|
`];
|
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.#a():this.#n();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 label(){return this.#d}set label(e){this.#d=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-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.#a(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#n(),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.#a();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" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${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 disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#a():this.#n();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 label(){return this.#d}set label(e){this.#d=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}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.#a(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#n(),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.#a();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" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)} name="target"></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;#d;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#n(){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))}#a(){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,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",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/tooltip.styles.js
CHANGED
|
@@ -77,7 +77,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
|
77
77
|
--private-arrow-height: 0.375rem;
|
|
78
78
|
--private-arrow-width: 0.625rem;
|
|
79
79
|
|
|
80
|
-
color: var(--glide-core-surface-
|
|
80
|
+
color: var(--glide-core-private-color-tooltip-surface-container);
|
|
81
81
|
display: flex;
|
|
82
82
|
position: relative;
|
|
83
83
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crowdstrike/glide-core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.1",
|
|
4
4
|
"description": "A Web Component design system",
|
|
5
5
|
"author": "CrowdStrike UX Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -60,11 +60,10 @@
|
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@changesets/changelog-github": "^0.5.0",
|
|
62
62
|
"@changesets/cli": "^2.27.10",
|
|
63
|
-
"@crowdstrike/design-tokens": "^2.0.1",
|
|
64
63
|
"@custom-elements-manifest/analyzer": "^0.10.4",
|
|
65
64
|
"@eslint/eslintrc": "^3.3.0",
|
|
66
65
|
"@eslint/js": "^9.22.0",
|
|
67
|
-
"@figma/rest-api-spec": "^0.
|
|
66
|
+
"@figma/rest-api-spec": "^0.27.0",
|
|
68
67
|
"@open-wc/testing": "^4.0.0",
|
|
69
68
|
"@playwright/test": "^1.50.1",
|
|
70
69
|
"@rollup/plugin-commonjs": "^28.0.2",
|
|
@@ -82,9 +81,9 @@
|
|
|
82
81
|
"@types/eslint": "^8.56.12",
|
|
83
82
|
"@types/mocha": "^10.0.10",
|
|
84
83
|
"@types/sinon": "^17.0.3",
|
|
85
|
-
"@typescript-eslint/rule-tester": "^8.
|
|
86
|
-
"@typescript-eslint/types": "^8.
|
|
87
|
-
"@typescript-eslint/utils": "^8.
|
|
84
|
+
"@typescript-eslint/rule-tester": "^8.29.0",
|
|
85
|
+
"@typescript-eslint/types": "^8.29.0",
|
|
86
|
+
"@typescript-eslint/utils": "^8.29.0",
|
|
88
87
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
89
88
|
"@web/dev-server-rollup": "^0.6.4",
|
|
90
89
|
"@web/test-runner": "^0.19.0",
|
|
@@ -101,7 +100,7 @@
|
|
|
101
100
|
"eslint-plugin-lit": "^1.15.0",
|
|
102
101
|
"eslint-plugin-lit-a11y": "^4.1.4",
|
|
103
102
|
"eslint-plugin-sort-class-members": "^1.21.0",
|
|
104
|
-
"eslint-plugin-unicorn": "^
|
|
103
|
+
"eslint-plugin-unicorn": "^58.0.0",
|
|
105
104
|
"globals": "^15.13.0",
|
|
106
105
|
"globby": "^14.0.2",
|
|
107
106
|
"http-server": "^14.1.1",
|
|
@@ -134,7 +133,7 @@
|
|
|
134
133
|
"ts-morph": "^25.0.1",
|
|
135
134
|
"tsx": "^4.19.2",
|
|
136
135
|
"typescript": "^5.8.2",
|
|
137
|
-
"typescript-eslint": "^8.
|
|
136
|
+
"typescript-eslint": "^8.29.0",
|
|
138
137
|
"vite": "^6.2.1",
|
|
139
138
|
"vitest": "^3.0.8",
|
|
140
139
|
"yocto-spinner": "^0.2.0"
|
|
@@ -154,7 +153,7 @@
|
|
|
154
153
|
"start:production": "rimraf ./dist && npm-run-all --aggregate-output --print-label --parallel start:production:typescript start:production:storybook start:production:esbuild",
|
|
155
154
|
"start:production:esbuild": "node ./esbuild.js",
|
|
156
155
|
"start:production:cem-analyze": "tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet && git diff --quiet -- || { echo ERROR: Uncommitted elements manifest changes. Run this command locally and commit the changes.; exit 1; }",
|
|
157
|
-
"start:production:figma": "
|
|
156
|
+
"start:production:figma": "tsx ./src/figma/run.ts",
|
|
158
157
|
"start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
|
|
159
158
|
"start:production:ts-morph": "tsx ./src/ts-morph/run.ts && git diff --quiet -- || { echo ERROR: Uncommitted code modifications. Run this command locally and commit the changes.; exit 1; }",
|
|
160
159
|
"start:production:typescript": "tsc --noCheck --outDir ./dist && node ./terser.js",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{isClassDeclaration,isIdentifier}from"typescript";export default e=>{if(isClassDeclaration(e)&&e.name&&isIdentifier(e.name))return e.name.text;let t=e.parent;for(;t&&!isClassDeclaration(t);)t=t.parent;return t?.name&&isIdentifier(t.name)?t.name.text:void 0};
|