@crowdstrike/glide-core 0.22.0 → 0.24.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.
Files changed (53) hide show
  1. package/dist/accordion.styles.js +22 -21
  2. package/dist/button-group.button.styles.js +46 -22
  3. package/dist/button-group.styles.js +7 -7
  4. package/dist/button.d.ts +3 -0
  5. package/dist/button.js +1 -1
  6. package/dist/button.styles.js +62 -42
  7. package/dist/checkbox-group.js +6 -5
  8. package/dist/checkbox-group.styles.js +5 -5
  9. package/dist/checkbox.d.ts +10 -2
  10. package/dist/checkbox.js +23 -17
  11. package/dist/checkbox.styles.js +46 -28
  12. package/dist/drawer.styles.js +6 -4
  13. package/dist/dropdown.d.ts +1 -1
  14. package/dist/dropdown.js +20 -18
  15. package/dist/dropdown.option.js +1 -1
  16. package/dist/dropdown.option.styles.js +26 -28
  17. package/dist/dropdown.styles.js +64 -58
  18. package/dist/icon-button.styles.js +44 -23
  19. package/dist/inline-alert.js +1 -1
  20. package/dist/inline-alert.styles.js +24 -21
  21. package/dist/input.styles.js +33 -25
  22. package/dist/label.styles.js +22 -27
  23. package/dist/menu.button.styles.js +6 -4
  24. package/dist/menu.js +1 -1
  25. package/dist/menu.link.styles.js +6 -4
  26. package/dist/menu.options.styles.js +12 -16
  27. package/dist/menu.styles.js +9 -6
  28. package/dist/modal.styles.js +16 -13
  29. package/dist/popover.js +1 -1
  30. package/dist/popover.styles.js +14 -14
  31. package/dist/radio-group.js +15 -15
  32. package/dist/radio-group.radio.d.ts +2 -1
  33. package/dist/radio-group.radio.js +1 -1
  34. package/dist/radio-group.radio.styles.js +31 -11
  35. package/dist/radio-group.styles.js +8 -10
  36. package/dist/split-button.primary-button.styles.js +41 -26
  37. package/dist/split-button.secondary-button.styles.js +61 -21
  38. package/dist/styles/focus-outline.js +1 -1
  39. package/dist/styles/variables.css +1 -1
  40. package/dist/tab.group.styles.js +6 -5
  41. package/dist/tab.panel.styles.js +1 -1
  42. package/dist/tab.styles.js +8 -7
  43. package/dist/tag.styles.js +27 -26
  44. package/dist/textarea.styles.js +22 -18
  45. package/dist/toasts.styles.js +2 -2
  46. package/dist/toasts.toast.styles.js +20 -20
  47. package/dist/toggle.styles.js +15 -7
  48. package/dist/tooltip.container.styles.js +14 -13
  49. package/dist/tooltip.js +1 -1
  50. package/dist/tooltip.styles.js +1 -1
  51. package/package.json +8 -9
  52. package/dist/library/get-parent-class-name.d.ts +0 -3
  53. package/dist/library/get-parent-class-name.js +0 -1
package/dist/inline-alert.styles.js CHANGED
@@ -2,34 +2,37 @@ import{css}from"lit";export default[css`
2
2
  .component {
3
3
  align-items: flex-start;
4
4
  border: 1px solid;
5
- border-radius: var(--glide-core-spacing-sm);
6
- color: var(--glide-core-text-body-2);
5
+ border-radius: var(--glide-core-rounding-base-radius-md);
6
+ color: var(--glide-core-color-static-text-default);
7
7
  display: flex;
8
- font-family: var(--glide-core-body-sm-font-family);
9
- font-size: var(--glide-core-body-sm-font-size);
10
- font-weight: var(--glide-core-body-sm-font-weight);
11
- gap: var(--glide-core-spacing-xs);
12
- line-height: var(--glide-core-body-sm-line-height);
13
- padding: var(--glide-core-spacing-sm);
8
+ font-family: var(--glide-core-typography-family-primary);
9
+ font-size: var(--glide-core-typography-size-body-default);
10
+ font-weight: var(--glide-core-typography-weight-regular);
11
+ gap: var(--glide-core-spacing-base-xs);
12
+ padding: var(--glide-core-spacing-base-sm);
14
13
 
15
14
  &.informational {
16
- background-color: var(--glide-core-surface-informational);
17
- border-color: var(--glide-core-border-informational);
15
+ background-color: var(--glide-core-color-info-surface-container-light);
16
+ border-color: var(--glide-core-color-info-stroke-secondary);
18
17
  }
19
18
 
20
19
  &.medium {
21
- background-color: var(--glide-core-surface-warning);
22
- border-color: var(--glide-core-border-attention);
20
+ background-color: var(
21
+ --glide-core-color-attention-surface-container-light
22
+ );
23
+ border-color: var(--glide-core-color-attention-stroke-secondary);
23
24
  }
24
25
 
25
26
  &.high {
26
- background-color: var(--glide-core-surface-warning);
27
- border-color: var(--glide-core-border-warning);
27
+ background-color: var(
28
+ --glide-core-color-warning-surface-container-light
29
+ );
30
+ border-color: var(--glide-core-color-warning-stroke-secondary);
28
31
  }
29
32
 
30
33
  &.critical {
31
- background-color: var(--glide-core-surface-error);
32
- border-color: var(--glide-core-border-error);
34
+ background-color: var(--glide-core-color-error-surface-container-light);
35
+ border-color: var(--glide-core-color-error-stroke-secondary);
33
36
  }
34
37
 
35
38
  &.added {
@@ -73,19 +76,19 @@ import{css}from"lit";export default[css`
73
76
  inline-size: 1rem;
74
77
 
75
78
  &.informational {
76
- color: var(--glide-core-status-warning-informational);
79
+ color: var(--glide-core-color-info-icon-default);
77
80
  }
78
81
 
79
82
  &.medium {
80
- color: var(--glide-core-status-warning-medium);
83
+ color: var(--glide-core-color-attention-icon-default);
81
84
  }
82
85
 
83
86
  &.high {
84
- color: var(--glide-core-status-warning-high);
87
+ color: var(--glide-core-color-warning-icon-default);
85
88
  }
86
89
 
87
90
  &.critical {
88
- color: var(--glide-core-status-warning-critical);
91
+ color: var(--glide-core-color-error-icon-default);
89
92
  }
90
93
  }
91
94
 
@@ -96,7 +99,7 @@ import{css}from"lit";export default[css`
96
99
  }
97
100
 
98
101
  .removal-button {
99
- --private-icon-color: var(--glide-core-icon-default2);
102
+ --private-icon-color: var(--glide-core-color-interactive-icon-default);
100
103
 
101
104
  align-self: flex-start;
102
105
  transition: color 200ms ease-in-out;
package/dist/input.styles.js CHANGED
@@ -2,9 +2,9 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
2
2
  ${visuallyHidden(".character-count .hidden")}
3
3
  `,css`
4
4
  .meta {
5
- column-gap: var(--glide-core-spacing-xs);
5
+ column-gap: var(--glide-core-spacing-base-xs);
6
6
  display: flex;
7
- font-size: 0.75rem;
7
+ font-size: var(--glide-core-typography-size-body-small);
8
8
  grid-column: 2;
9
9
  justify-content: space-between;
10
10
  }
@@ -23,7 +23,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
23
23
 
24
24
  .character-count {
25
25
  &.error {
26
- font-weight: var(--glide-core-font-weight-bold);
26
+ font-weight: var(--glide-core-typography-weight-bold);
27
27
  }
28
28
  }
29
29
 
@@ -34,28 +34,32 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
34
34
 
35
35
  .input-container {
36
36
  align-items: center;
37
- background-color: var(--glide-core-surface-base-lighter);
38
- border: 1px solid var(--glide-core-border-base);
39
- border-radius: var(--glide-core-spacing-xs);
37
+ background-color: var(--glide-core-color-interactive-surface-container);
38
+ border: 1px solid var(--glide-core-color-interactive-stroke-primary);
39
+ border-radius: var(--glide-core-rounding-base-radius-sm);
40
40
  box-sizing: border-box;
41
- color: var(--glide-core-text-body-1);
41
+ color: var(--glide-core-color-interactive-text-default);
42
42
  display: flex;
43
- line-height: var(--glide-core-body-xs-line-height);
44
43
  min-inline-size: 3.75rem;
45
- padding-inline: var(--glide-core-spacing-sm);
44
+ padding-inline: var(--glide-core-spacing-base-sm);
46
45
 
47
46
  &.focused,
47
+ &:has(.input:hover) {
48
+ border-color: var(--glide-core-color-interactive-stroke-focus);
49
+ transition: border-color 200ms ease-in-out;
50
+ }
51
+
48
52
  &:hover,
49
53
  &:has(.input:hover) {
50
- border-color: var(--glide-core-border-focus);
54
+ border-color: var(--glide-core-color-interactive-stroke-primary--hover);
51
55
  transition: border-color 200ms ease-in-out;
52
56
  }
53
57
 
54
58
  &.error {
55
- border-color: var(--glide-core-status-error);
59
+ border-color: var(--glide-core-color-error-stroke-primary);
56
60
  }
57
61
 
58
- /*
62
+ /*
59
63
  We had to resort to a class selector because there may be a bug in Chrome and Safari
60
64
  with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
61
65
  */
@@ -66,9 +70,13 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
66
70
  }
67
71
 
68
72
  &.disabled {
69
- background-color: var(--glide-core-surface-disabled);
70
- border-color: var(--glide-core-border-base-light);
71
- color: var(--glide-core-text-tertiary-disabled);
73
+ background-color: var(
74
+ --glide-core-color-interactive-surface-container--disabled
75
+ );
76
+ border-color: var(
77
+ --glide-core-color-interactive-stroke-primary--disabled
78
+ );
79
+ color: var(--glide-core-color-interactive-text-default--disabled);
72
80
  }
73
81
  }
74
82
 
@@ -78,16 +86,16 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
78
86
  border: none;
79
87
  color: inherit;
80
88
  cursor: inherit;
81
- font-family: var(--glide-core-font-sans);
82
- font-size: var(--glide-core-body-sm-font-size);
83
- font-weight: var(--glide-core-body-xs-font-weight);
89
+ font-family: var(--glide-core-typography-family-primary);
90
+ font-size: var(--glide-core-typography-size-body-default);
91
+ font-weight: var(--glide-core-typography-weight-regular);
84
92
  inline-size: 100%;
85
93
  min-inline-size: 0;
86
94
  outline: none;
87
95
  padding: 0;
88
96
 
89
97
  &::placeholder {
90
- color: var(--glide-core-text-placeholder);
98
+ color: var(--glide-core-color-interactive-text-placeholder);
91
99
  }
92
100
 
93
101
  &::-webkit-search-decoration,
@@ -100,12 +108,12 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
100
108
  /* The input obscures an offset outline for -webkit-calendar-picker-indicator, so 'focus-outline' is not used */
101
109
  &[type='date'] {
102
110
  &::-webkit-calendar-picker-indicator {
103
- border-radius: var(--glide-core-border-radius-xs);
104
- padding: var(--glide-core-spacing-xxs);
111
+ border-radius: 0.125rem;
112
+ padding: var(--glide-core-spacing-base-xxs);
105
113
  }
106
114
  /* stylelint-disable-next-line csstools/use-nesting */
107
115
  &::-webkit-calendar-picker-indicator:focus-visible {
108
- outline: 2px solid var(--glide-core-border-focus);
116
+ outline: 2px solid var(--glide-core-color-interactive-stroke-focus);
109
117
  }
110
118
  }
111
119
  }
@@ -121,10 +129,10 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
121
129
  align-items: center;
122
130
  background: none;
123
131
  border: none;
124
- color: var(--glide-core-icon-default);
132
+ color: var(--glide-core-color-interactive-icon-default);
125
133
  display: inline-flex;
126
134
  justify-content: center;
127
- padding-inline-start: var(--glide-core-spacing-xxs);
135
+ padding-inline-start: var(--glide-core-spacing-base-xxs);
128
136
  }
129
137
 
130
138
  .clear-icon-button,
@@ -136,7 +144,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
136
144
  }
137
145
 
138
146
  ::slotted([slot='prefix-icon']) {
139
- padding-inline-end: var(--glide-core-spacing-xxs);
147
+ padding-inline-end: var(--glide-core-spacing-base-xxs);
140
148
  }
141
149
 
142
150
  .empty .clear-icon-button {
package/dist/label.styles.js CHANGED
@@ -4,9 +4,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
4
4
  `,css`
5
5
  .component {
6
6
  &.horizontal {
7
- --private-column-gap: var(--glide-core-spacing-sm);
7
+ --private-column-gap: var(--glide-core-spacing-base-sm);
8
8
 
9
- column-gap: var(--glide-core-spacing-sm);
9
+ column-gap: var(--glide-core-spacing-base-sm);
10
10
  display: grid;
11
11
  grid-template-columns: auto minmax(auto, 1fr);
12
12
  }
@@ -34,7 +34,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
34
34
 
35
35
  .tooltips {
36
36
  align-items: center;
37
- column-gap: var(--glide-core-spacing-xs);
37
+ column-gap: var(--glide-core-spacing-base-xs);
38
38
  display: flex;
39
39
 
40
40
  /*
@@ -72,7 +72,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
72
72
  background-color: transparent;
73
73
  border: none;
74
74
  border-radius: 50%;
75
- color: var(--glide-core-text-body-1);
75
+ color: var(--glide-core-color-static-text-default);
76
76
 
77
77
  /*
78
78
  Any "display" that's not inline-level will do. We don't want the button to
@@ -88,13 +88,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
88
88
  }
89
89
 
90
90
  .label {
91
- color: var(--glide-core-text-body-1);
91
+ color: var(--glide-core-color-static-text-default);
92
92
  display: block;
93
- font-family: var(--glide-core-heading-xxxs-font-family);
94
- font-size: var(--glide-core-heading-xxxs-font-size);
95
- font-style: var(--glide-core-heading-xxxs-font-style);
96
- font-variant: var(--glide-core-heading-xxxs-font-variant);
97
- font-weight: var(--glide-core-heading-xxxs-font-weight);
93
+ font-family: var(--glide-core-typography-family-primary);
94
+ font-size: var(--glide-core-typography-size-body-default);
95
+ font-weight: var(--glide-core-typography-weight-bold);
98
96
  line-height: 100%;
99
97
  margin-inline-start: auto;
100
98
  overflow: hidden;
@@ -112,7 +110,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
112
110
  }
113
111
 
114
112
  &.vertical {
115
- margin-block-end: var(--glide-core-spacing-xxs);
113
+ margin-block-end: var(--glide-core-spacing-base-xxs);
116
114
  }
117
115
  }
118
116
 
@@ -125,13 +123,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
125
123
  }
126
124
 
127
125
  .required-symbol {
128
- color: var(--glide-core-status-error);
126
+ color: var(--glide-core-color-error-stroke-primary);
129
127
  }
130
128
 
131
129
  .control-and-summary {
132
130
  align-items: center;
133
131
  display: flex;
134
- gap: var(--glide-core-spacing-sm);
132
+ gap: var(--glide-core-spacing-base-sm);
135
133
  }
136
134
 
137
135
  .control {
@@ -147,37 +145,34 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
147
145
  }
148
146
 
149
147
  &.vertical:not(.hidden-label) {
150
- margin-block-start: var(--glide-core-spacing-xxs);
148
+ margin-block-start: var(--glide-core-spacing-base-xxs);
151
149
  }
152
150
  }
153
151
 
154
152
  .summary {
155
- font-family: var(--glide-core-body-sm-font-family);
156
- font-size: var(--glide-core-body-sm-font-size);
157
- font-style: var(--glide-core-body-sm-font-style);
158
- font-weight: var(--glide-core-body-sm-font-weight);
153
+ font-family: var(--glide-core-typography-family-primary);
154
+ font-size: var(--glide-core-typography-size-body-default);
155
+ font-weight: var(--glide-core-typography-weight-regular);
159
156
 
160
157
  &.error {
161
- color: var(--glide-core-status-error);
158
+ color: var(--glide-core-color-error-text-status);
162
159
  }
163
160
  }
164
161
 
165
162
  .description {
166
- color: var(--glide-core-text-body-1);
163
+ color: var(--glide-core-color-static-text-default);
167
164
  display: block;
168
- font-family: var(--glide-core-body-xs-font-family);
169
- font-size: var(--glide-core-body-xs-font-size);
170
- font-style: var(--glide-core-body-xs-font-style);
171
- font-weight: var(--glide-core-body-xs-font-weight);
165
+ font-family: var(--glide-core-typography-family-primary);
166
+ font-size: var(--glide-core-typography-size-body-small);
167
+ font-weight: var(--glide-core-typography-weight-regular);
172
168
  grid-column: 2;
173
- line-height: var(--glide-core-body-xs-line-height);
174
169
 
175
170
  &.content {
176
- margin-block-start: var(--glide-core-spacing-xxs);
171
+ margin-block-start: var(--glide-core-spacing-base-xxs);
177
172
  }
178
173
 
179
174
  &.error {
180
- color: var(--glide-core-status-error);
175
+ color: var(--glide-core-color-error-text-status);
181
176
  }
182
177
  }
183
178
  `];
package/dist/menu.button.styles.js CHANGED
@@ -3,7 +3,7 @@ import{css}from"lit";export default[css`
3
3
  align-items: center;
4
4
  background-color: transparent;
5
5
  border: none;
6
- border-radius: var(--glide-core-spacing-sm);
6
+ border-radius: var(--glide-core-spacing-base-sm);
7
7
  display: flex;
8
8
  font: inherit;
9
9
  gap: var(--private-gap);
@@ -14,15 +14,17 @@ import{css}from"lit";export default[css`
14
14
  user-select: none;
15
15
 
16
16
  &.active {
17
- background-color: var(--glide-core-surface-hover);
17
+ background-color: var(
18
+ --glide-core-color-interactive-surface-container--hover
19
+ );
18
20
  }
19
21
 
20
22
  &.disabled {
21
- color: var(--glide-core-icon-tertiary-disabled);
23
+ color: var(--glide-core-color-interactive-icon-default--disabled);
22
24
  }
23
25
 
24
26
  &:not(.disabled) {
25
- color: var(--glide-core-text-body-1);
27
+ color: var(--glide-core-color-static-text-default);
26
28
  cursor: pointer;
27
29
  }
28
30
  }
package/dist/menu.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<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 a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#h=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#h)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#b}" @slotchange="${this.#k}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#b}" @mouseover="${this.#w}" @private-disabled="${this.#R}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#T(){return this.#L?.find((({privateActive:e})=>e))}#d;#h;#c;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#T&&this.#p&&!e.target.disabled&&(this.#T.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#w(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#L)for(const t of this.#L)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#R(){if(this.#L&&this.#T){const e=this.#L.indexOf(this.#T);this.#T.privateActive=!1;const t=this.#L?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#L.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#L?.find((e=>!e.disabled));!this.#T&&e&&(e.privateActive=!0)}#b(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#T?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#T&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#T.id);if(this.open&&this.#T&&this.#L){const t=this.#L.indexOf(this.#T);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#L].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#L].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#k(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#L&&this.#L.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#L(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#T?.id&&(this.#p.ariaActivedescendant=this.#T.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu"),final],GlideCoreMenu);export default GlideCoreMenu;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<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 a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#h=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#h)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#b}" @slotchange="${this.#k}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#b}" @mouseover="${this.#w}" @private-disabled="${this.#R}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#T(){return this.#L?.find((({privateActive:e})=>e))}#d;#h;#c;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#T&&this.#p&&!e.target.disabled&&(this.#T.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#w(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#L)for(const t of this.#L)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#R(){if(this.#L&&this.#T){const e=this.#L.indexOf(this.#T);this.#T.privateActive=!1;const t=this.#L?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#L.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#L?.find((e=>!e.disabled));!this.#T&&e&&(e.privateActive=!0)}#b(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#T?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#T&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#T.id);if(this.open&&this.#T&&this.#L){const t=this.#L.indexOf(this.#T);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#L].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#L].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#k(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#L&&this.#L.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#L(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#T?.id&&(this.#p.ariaActivedescendant=this.#T.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu"),final],GlideCoreMenu);export default GlideCoreMenu;
package/dist/menu.link.styles.js CHANGED
@@ -3,7 +3,7 @@ import{css}from"lit";export default[css`
3
3
  align-items: center;
4
4
  background-color: transparent;
5
5
  border: none;
6
- border-radius: var(--glide-core-spacing-sm);
6
+ border-radius: var(--glide-core-spacing-base-sm);
7
7
  box-sizing: border-box;
8
8
  display: flex;
9
9
  font: inherit;
@@ -16,16 +16,18 @@ import{css}from"lit";export default[css`
16
16
  user-select: none;
17
17
 
18
18
  &.active {
19
- background-color: var(--glide-core-surface-hover);
19
+ background-color: var(
20
+ --glide-core-color-interactive-surface-container--hover
21
+ );
20
22
  }
21
23
 
22
24
  &.disabled {
23
- color: var(--glide-core-icon-tertiary-disabled);
25
+ color: var(--glide-core-color-interactive-icon-default--disabled);
24
26
  cursor: default;
25
27
  }
26
28
 
27
29
  &:not(.disabled) {
28
- color: var(--glide-core-text-body-1);
30
+ color: var(--glide-core-color-static-text-default);
29
31
  cursor: pointer;
30
32
  }
31
33
  }
package/dist/menu.options.styles.js CHANGED
@@ -6,28 +6,24 @@ import{css}from"lit";export default[css`
6
6
 
7
7
  .component {
8
8
  &.large {
9
- --private-gap: var(--glide-core-spacing-sm);
10
- --private-padding-inline: var(--glide-core-spacing-sm);
11
- --private-padding-block: var(--glide-core-spacing-xxs);
9
+ --private-gap: var(--glide-core-spacing-base-sm);
10
+ --private-padding-inline: var(--glide-core-spacing-base-sm);
11
+ --private-padding-block: var(--glide-core-spacing-base-xxs);
12
12
 
13
- font-family: var(--glide-core-body-sm-font-family);
14
- font-size: var(--glide-core-body-sm-font-size);
15
- font-style: var(--glide-core-body-sm-font-style);
16
- font-weight: var(--glide-core-body-sm-font-weight);
17
- line-height: var(--glide-core-body-sm-line-height);
13
+ font-family: var(--glide-core-typography-family-primary);
14
+ font-size: var(--glide-core-typography-size-body-default);
15
+ font-weight: var(--glide-core-typography-weight-regular);
18
16
  }
19
17
 
20
18
  &.small {
21
- --private-gap: var(--glide-core-spacing-xs);
22
- --private-padding-inline: var(--glide-core-spacing-xs);
23
- --private-padding-block: var(--glide-core-spacing-xxxs);
19
+ --private-gap: var(--glide-core-spacing-base-xs);
20
+ --private-padding-inline: var(--glide-core-spacing-base-xs);
21
+ --private-padding-block: var(--glide-core-spacing-base-xxxs);
24
22
  --private-size: 0.75rem;
25
23
 
26
- font-family: var(--glide-core-body-xs-font-family);
27
- font-size: var(--glide-core-body-xs-font-size);
28
- font-style: var(--glide-core-body-xs-font-style);
29
- font-weight: var(--glide-core-body-xs-font-weight);
30
- line-height: var(--glide-core-body-xs-line-height);
24
+ font-family: var(--glide-core-typography-family-primary);
25
+ font-size: var(--glide-core-typography-size-body-small);
26
+ font-weight: var(--glide-core-typography-weight-regular);
31
27
  }
32
28
  }
33
29
  `];
package/dist/menu.styles.js CHANGED
@@ -7,7 +7,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
7
7
  }
8
8
 
9
9
  .component {
10
- color: var(--glide-core-text-body-1);
10
+ color: var(--glide-core-color-static-text-default);
11
11
  display: flex;
12
12
  }
13
13
 
@@ -17,16 +17,19 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
17
17
  }
18
18
 
19
19
  .default-slot {
20
- background-color: var(--glide-core-surface-modal);
21
- border: 1px solid var(--glide-core-border-base-lighter);
22
- border-radius: var(--glide-core-spacing-xs);
23
- box-shadow: var(--glide-core-shadow-lg);
20
+ background-color: var(
21
+ --glide-core-private-color-dialog-and-modal-surface-container
22
+ );
23
+ border: 1px solid
24
+ var(--glide-core-color-static-surface-container-secondary);
25
+ border-radius: var(--glide-core-rounding-base-radius-sm);
26
+ box-shadow: var(--glide-core-effect-floating);
24
27
  box-sizing: border-box;
25
28
  inline-size: max-content;
26
29
  inset: unset;
27
30
  margin-block: 0;
28
31
  min-inline-size: 9.375rem;
29
- padding: var(--glide-core-spacing-xxxs);
32
+ padding: var(--glide-core-spacing-base-xxxs);
30
33
  position: absolute;
31
34
  }
32
35
  `];
package/dist/modal.styles.js CHANGED
@@ -26,11 +26,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
26
26
 
27
27
  .component {
28
28
  backdrop-filter: blur(100px);
29
- background-color: var(--glide-core-surface-modal);
29
+ background-color: var(
30
+ --glide-core-private-color-dialog-and-modal-surface-container
31
+ );
30
32
  border: none;
31
- border-radius: 0.5rem;
32
- box-shadow: var(--glide-core-shadow-lg);
33
- font-family: var(--glide-core-body-xs-font-family);
33
+ border-radius: var(--glide-core-rounding-base-radius-sm);
34
+ box-shadow: var(--glide-core-effect-floating);
35
+ font-family: var(--glide-core-typography-family-primary);
34
36
  opacity: 0;
35
37
  padding: 0;
36
38
 
@@ -93,13 +95,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
93
95
 
94
96
  .label {
95
97
  align-items: center;
96
- color: var(--glide-core-text-body);
98
+ color: var(--glide-core-color-static-text-default);
97
99
  display: flex;
98
- font-size: 1.5rem;
99
- font-weight: 600;
100
- gap: var(--glide-core-spacing-xs);
100
+ font-size: var(--glide-core-typography-size-heading-h2);
101
+ font-weight: var(--glide-core-typography-weight-semibold);
102
+ gap: var(--glide-core-spacing-base-xs);
101
103
  inline-size: 100%;
102
- line-height: 1.875rem;
104
+ line-height: var(--glide-core-typography-height-heading-h2);
103
105
  margin-block-end: 0;
104
106
  margin-block-start: 0;
105
107
  overflow: hidden;
@@ -127,15 +129,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
127
129
  display: flex;
128
130
 
129
131
  &.informational {
130
- color: var(--glide-core-status-warning-informational);
132
+ color: var(--glide-core-color-info-icon-default);
131
133
  }
132
134
 
133
135
  &.medium {
134
- color: var(--glide-core-status-warning-medium);
136
+ color: var(--glide-core-color-attention-icon-default);
135
137
  }
136
138
 
137
139
  &.critical {
138
- color: var(--glide-core-status-warning-critical);
140
+ color: var(--glide-core-color-error-icon-default);
139
141
  }
140
142
  }
141
143
 
@@ -171,7 +173,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
171
173
  .actions {
172
174
  align-items: center;
173
175
  display: flex;
174
- gap: var(--glide-core-spacing-xs);
176
+ gap: var(--glide-core-spacing-base-xs);
175
177
  list-style-type: none;
176
178
  margin: 0;
177
179
  padding: 0;
@@ -186,5 +188,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
186
188
  .tertiary-slot {
187
189
  align-items: center;
188
190
  display: flex;
191
+ gap: var(--glide-core-spacing-base-xxs);
189
192
  }
190
193
  `];