@crowdstrike/glide-core 0.28.1 → 0.29.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.
@@ -5,7 +5,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
5
5
  border: 1px solid
6
6
  var(--glide-core-color-static-surface-container-secondary);
7
7
  border-radius: var(--glide-core-rounding-base-radius-sm);
8
- box-shadow: var(--glide-core-effect-raised);
8
+ box-shadow: var(--glide-core-effect-lifted);
9
9
  font-family: var(--glide-core-typography-family-primary);
10
10
  }
11
11
 
@@ -21,7 +21,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
21
21
  line-height: var(--glide-core-typography-height-heading-h4);
22
22
  list-style: none;
23
23
  padding-block: var(--glide-core-spacing-base-xs);
24
- padding-inline: var(--glide-core-spacing-base-sm);
24
+ padding-inline: var(--glide-core-spacing-base-xs);
25
25
  user-select: none;
26
26
 
27
27
  &:focus {
@@ -79,10 +79,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
79
79
  padding-block-end: var(--glide-core-spacing-base-sm);
80
80
 
81
81
  /* Hardcoded spacing here is intentional so that it better aligns with the Accordion label */
82
- padding-inline: 2rem var(--glide-core-spacing-base-sm);
82
+ padding-inline: calc(
83
+ var(--glide-core-spacing-base-sm) + var(--glide-core-spacing-base-md)
84
+ )
85
+ var(--glide-core-spacing-base-sm);
83
86
 
84
87
  &.indented {
85
- padding-inline-start: 3.5rem;
88
+ padding-inline-start: 3.25rem;
86
89
  }
87
90
  }
88
91
 
@@ -38,11 +38,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
38
38
  font-family: var(--glide-core-typography-family-primary);
39
39
  font-size: var(--glide-core-typography-size-body-large);
40
40
  font-weight: var(--glide-core-typography-weight-bold);
41
- gap: 0.625rem;
41
+ gap: var(--glide-core-spacing-base-xs);
42
42
  justify-content: center;
43
43
  line-height: 1;
44
44
  min-block-size: 1.125rem;
45
- min-inline-size: 5.1875rem;
45
+ min-inline-size: 2.75rem;
46
46
  padding-block: var(--glide-core-spacing-base-xs);
47
47
  padding-inline: var(--glide-core-spacing-base-md);
48
48
  transition-duration: 150ms;
@@ -69,12 +69,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
69
69
 
70
70
  &.horizontal {
71
71
  border-inline-end: 1px solid
72
- var(--glide-core-color-static-surface-container-secondary);
72
+ var(--glide-core-color-static-stroke-primary);
73
73
  }
74
74
 
75
75
  &.vertical {
76
76
  border-block-end: 1px solid
77
- var(--glide-core-color-static-surface-container-secondary);
77
+ var(--glide-core-color-static-stroke-primary);
78
78
 
79
79
  &.icon {
80
80
  &:not(.icon-only) {
@@ -102,18 +102,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
102
102
  background-color: var(
103
103
  --glide-core-color-interactive-surface-container-active
104
104
  );
105
- border-color: var(
106
- --glide-core-color-interactive-surface-container-active
107
- );
108
105
  color: var(--glide-core-private-color-button-text-primary);
109
106
 
110
107
  &:hover {
111
108
  background-color: var(
112
109
  --glide-core-color-interactive-surface-container--hover
113
110
  );
114
- border-color: var(
115
- --glide-core-color-interactive-surface-container--hover
116
- );
117
111
  color: var(--glide-core-color-interactive-text-link);
118
112
  }
119
113
  }
@@ -123,7 +117,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
123
117
  background-color: var(
124
118
  --glide-core-color-interactive-surface-container--hover
125
119
  );
126
- border-color: transparent;
127
120
  box-shadow: var(--glide-core-effect-hovered);
128
121
  color: var(--glide-core-color-interactive-text-link);
129
122
  }
@@ -16,7 +16,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
16
16
  display: inline-flex;
17
17
  font-family: var(--glide-core-typography-family-primary);
18
18
  font-weight: var(--glide-core-typography-weight-bold);
19
- gap: 0.625rem;
19
+ gap: var(--glide-core-spacing-base-xs);
20
20
  justify-content: center;
21
21
  padding-block: var(--glide-core-spacing-base-xs);
22
22
  padding-inline: var(--glide-core-spacing-base-md);
@@ -35,11 +35,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
35
35
  }
36
36
 
37
37
  &.prefix-icon {
38
- padding-inline-start: 0.875rem;
38
+ padding-inline-start: var(--glide-core-spacing-base-md);
39
39
  }
40
40
 
41
41
  &.suffix-icon {
42
- padding-inline-end: 0.875rem;
42
+ padding-inline-end: var(--glide-core-spacing-base-md);
43
43
  }
44
44
 
45
45
  &.primary {
@@ -134,15 +134,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
134
134
  &.large {
135
135
  block-size: 2.125rem;
136
136
  font-size: var(--glide-core-typography-size-body-large);
137
- line-height: 1.5rem;
138
- min-inline-size: 5.1875rem;
137
+ min-inline-size: 2.75rem;
139
138
  }
140
139
 
141
140
  &.small {
142
141
  block-size: 1.75rem;
143
142
  font-size: var(--glide-core-typography-size-body-small);
144
- line-height: 1rem;
145
- min-inline-size: 4.375rem;
143
+ min-inline-size: 2.5625rem;
146
144
  }
147
145
  }
148
146
  `];
@@ -18,7 +18,7 @@ import{css}from"lit";export default[css`
18
18
 
19
19
  &.invalid {
20
20
  border: 1px solid var(--glide-core-color-advisory-stroke-error-primary);
21
- border-radius: var(--glide-core-rounding-base-radius-sm);
21
+ border-radius: var(--glide-core-rounding-base-radius-xxs);
22
22
  padding: var(--glide-core-spacing-base-xxs) 0.375rem;
23
23
  }
24
24
  }
@@ -4,7 +4,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
4
4
  `,css`
5
5
  .label-and-input-and-checkbox {
6
6
  align-items: center;
7
- column-gap: var(--glide-core-spacing-base-sm);
7
+ column-gap: var(--glide-core-spacing-base-xs);
8
8
  display: flex;
9
9
  font-family: var(--glide-core-typography-family-primary);
10
10
  font-size: var(--glide-core-typography-size-body-default);
@@ -37,7 +37,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
37
37
  );
38
38
  block-size: 100%;
39
39
  border: 1px solid var(--glide-core-color-interactive-stroke-contrast);
40
- border-radius: var(--glide-core-rounding-base-radius-xs);
40
+ border-radius: var(--glide-core-rounding-base-radius-xxs);
41
41
  box-sizing: border-box;
42
42
  color: var(
43
43
  --glide-core-private-color-checkbox-surface-background-selected--default
@@ -118,7 +118,6 @@ export default class Dropdown extends LitElement implements FormControl {
118
118
  private get areSomeOptionsSelected();
119
119
  checkValidity(): boolean;
120
120
  click(): void;
121
- private get selectedOptions();
122
121
  private get lastSelectedAndEnabledOption();
123
122
  private get internalLabel();
124
123
  connectedCallback(): void;
@@ -155,6 +154,7 @@ export default class Dropdown extends LitElement implements FormControl {
155
154
  private isReportValidityOrSubmit;
156
155
  private isShowSingleSelectIcon;
157
156
  private itemCount;
157
+ private selectedAndEnabledOptions;
158
158
  private tagOverflowLimit;
159
159
  private validityMessage?;
160
160
  }
package/dist/dropdown.js CHANGED
@@ -1,8 +1,8 @@
1
- var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length,o=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(o=(l<3?n(o):l>3?n(e,i,o):n(e,i))||o);return l>3&&o&&Object.defineProperty(e,i,o),o};import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import DropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import Tag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.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";import uniqueId from"./library/unique-id.js";let Dropdown=class Dropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.open&&t?this.#e():this.open&&this.#i()}get filterable(){return this.#s}set filterable(t){this.#s!==t&&t&&!this.multiple?this.#n.value&&this.lastSelectedAndEnabledOption?.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.#s!==t&&this.#l(),this.#s=t}get open(){return this.#o}set open(t){const e=t!==this.#o;if(this.#o=t,t&&e&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));!this.open&&e&&(!this.multiple&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label):(!this.multiple&&this.#n.value&&0===this.selectedOptions.length||this.multiple&&this.#n.value)&&(this.#n.value.value="",this.inputValue=""),this.#l(),this.#e(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get multiple(){return this.#a}set multiple(t){const e=this.#a&&!t,i=!this.#a&&t;this.#a=t,this.isShowSingleSelectIcon=!!e&&Boolean(this.lastSelectedAndEnabledOption?.value);for(const i of this.#d)i.privateMultiple=t,e&&i!==this.lastSelectedAndEnabledOption&&(i.selected=!1);e&&this.lastSelectedAndEnabledOption?.value?this.value=[this.lastSelectedAndEnabledOption.value]:i&&this.lastSelectedAndEnabledOption&&(this.#n.value&&(this.#n.value.value=""),this.lastSelectedAndEnabledOption.privateUpdateCheckbox(),this.#r())}get value(){return this.#p}set value(t){if(this.#p=t,!this.multiple&&t.length>1)throw new Error("Only one value is allowed when not `multiple`.");!this.multiple&&0===this.value.length&&this.#n.value&&1===this.selectedOptions.length&&(this.#n.value.value="");for(const e of this.#d)this.#h=!0,e.selected=t.some((t=>t&&t===e.value)),this.#h=!1,e.selected&&e.disabled&&(e.disabled=!1)}get activeOption(){return this.#c?.find((({privateActive:t})=>t))}get areAllOptionsSelected(){return this.#d.length>0&&this.#d.filter((({selected:t})=>t)).length===this.#d.filter((({disabled:t})=>!t)).length}get areSomeOptionsSelected(){return this.#d.some((({selected:t})=>t))}checkValidity(){this.isCheckingValidity=!0;const t=this.#u.checkValidity();return this.isCheckingValidity=!1,t}click(){this.filterable||this.isFilterable?(this.#n.value?.click(),this.#n.value?.select()):this.#v.value?.click()}get selectedOptions(){return this.#d.filter((t=>t instanceof DropdownOption&&t.selected&&!t.disabled))}get lastSelectedAndEnabledOption(){return this.#d.findLast((t=>t.selected&&!t.disabled))}get internalLabel(){const t=this.filterable||this.isFilterable;return t||0!==this.selectedOptions.length?this.multiple||t||!this.lastSelectedAndEnabledOption?.label?"":this.lastSelectedAndEnabledOption.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#m,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#m,{capture:!0})}async filter(t){return this.#d.filter((({label:e})=>e?.toLowerCase().includes(t.toLowerCase().trim())))}firstUpdated(){this.#g.value&&(this.#g.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedAndEnabledOption&&this.#n.value&&this.lastSelectedAndEnabledOption.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label);if(this.#d.every((({selected:t})=>!t)))for(const t of this.#d)t.selected=this.value.some((e=>""!==e&&e===t.value)),t.selected&&t.disabled&&(t.disabled=!1)}focus(t){this.filterable||this.isFilterable?this.#n.value?.focus(t):this.#v.value?.focus(t)}get form(){return this.#u.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#u.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#n.value:this.#v.value),this.#u.validity):this.required&&this.#u.validity.valueMissing&&this.selectedOptions.length>0?(this.#u.setValidity({}),this.#u.validity):this.#u.validity}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const t of this.#d){t.hasAttribute("selected")||(t.selected=!1)}const t=this.#d.filter((t=>t.hasAttribute("selected"))),e=t.at(-1)?.value;this.#p=this.multiple&&t.length>0?t.map((({value:t})=>t)):!this.multiple&&e?[e]:[]}render(){return html`<div
1
+ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length,o=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(o=(l<3?n(o):l>3?n(e,i,o):n(e,i))||o);return l>3&&o&&Object.defineProperty(e,i,o),o};import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import DropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import Tag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.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";import uniqueId from"./library/unique-id.js";let Dropdown=class Dropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.open&&t?this.#e():this.open&&this.#i()}get filterable(){return this.#s}set filterable(t){this.#s!==t&&t&&!this.multiple?this.#n.value&&this.lastSelectedAndEnabledOption?.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.#s!==t&&this.#l(),this.#s=t}get open(){return this.#o}set open(t){const e=t!==this.#o;if(this.#o=t,t&&e&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));!this.open&&e&&(!this.multiple&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label):(!this.multiple&&this.#n.value&&0===this.selectedAndEnabledOptions.length||this.multiple&&this.#n.value)&&(this.#n.value.value="",this.inputValue=""),this.#l(),this.#e(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get multiple(){return this.#a}set multiple(t){const e=this.#a&&!t,i=!this.#a&&t;this.#a=t;for(const i of this.#d)i.privateMultiple=t,e&&i!==this.lastSelectedAndEnabledOption&&(i.selected=!1);e&&this.lastSelectedAndEnabledOption?(this.#r=this.lastSelectedAndEnabledOption?.value?[this.lastSelectedAndEnabledOption.value]:[],this.selectedAndEnabledOptions=[this.lastSelectedAndEnabledOption],this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value),this.#n.value&&this.lastSelectedAndEnabledOption?.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label)):i&&this.lastSelectedAndEnabledOption&&(this.#n.value&&(this.#n.value.value="",this.inputValue=""),this.lastSelectedAndEnabledOption.privateUpdateCheckbox(),this.isShowSingleSelectIcon=!1)}get value(){return this.#r}set value(t){if(!this.multiple&&t.length>1)throw new Error("Only one value is allowed when not `multiple`.");this.#r=t;for(const t of this.selectedAndEnabledOptions)this.#p=!0,t.selected=!1,this.#p=!1;for(const e of t){const t=this.#d.find((t=>t.value===e&&!t.selected));t&&(this.#p=!0,t.selected=!0,this.#p=!1)}!this.multiple&&0===this.value.length&&this.#n.value?(this.#n.value.value="",this.inputValue=""):!this.multiple&&this.lastSelectedAndEnabledOption?.label&&this.#n.value&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label)}get activeOption(){return this.#h?.find((({privateActive:t})=>t))}get areAllOptionsSelected(){return this.#d.length>0&&this.#d.filter((({selected:t})=>t)).length===this.#d.filter((({disabled:t})=>!t)).length}get areSomeOptionsSelected(){return this.#d.some((({selected:t})=>t))}checkValidity(){this.isCheckingValidity=!0;const t=this.#c.checkValidity();return this.isCheckingValidity=!1,t}click(){this.filterable||this.isFilterable?(this.#n.value?.click(),this.#n.value?.select()):this.#u.value?.click()}get lastSelectedAndEnabledOption(){return this.selectedAndEnabledOptions.at(-1)}get internalLabel(){const t=this.filterable||this.isFilterable;return t||this.lastSelectedAndEnabledOption?this.multiple||t||!this.lastSelectedAndEnabledOption?"":this.lastSelectedAndEnabledOption.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#v,{capture:!0})}createRenderRoot(){return this.#m=super.createRenderRoot(),this.#m}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#v,{capture:!0})}async filter(t){return this.#d.filter((({label:e})=>e?.toLowerCase().includes(t.toLowerCase().trim())))}firstUpdated(){this.#b.value&&(this.#b.value.popover="manual"),this.open&&!this.disabled&&this.#i(),this.selectedAndEnabledOptions=this.#d.filter((({selected:t,disabled:e})=>t&&!e)),!this.multiple&&this.lastSelectedAndEnabledOption&&this.#n.value&&this.lastSelectedAndEnabledOption.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label);if(this.#d.every((({selected:t})=>!t)))for(const t of this.value){const e=this.#d.find((e=>e.value===t&&!e.selected));e&&(e.selected=!0)}}focus(t){this.filterable||this.isFilterable?this.#n.value?.focus(t):this.#u.value?.focus(t)}get form(){return this.#c.form}get validity(){return this.required&&0===this.selectedAndEnabledOptions.length?(this.#c.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#n.value:this.#u.value),this.#c.validity):this.required&&this.#c.validity.valueMissing&&this.selectedAndEnabledOptions.length>0?(this.#c.setValidity({}),this.#c.validity):this.#c.validity}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const t of this.#d){t.selected=!1;t.hasAttribute("selected")&&!t.disabled&&(t.selected=!0)}}render(){return html`<div
2
2
  class=${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}
3
- @mouseup=${this.#O}
4
- ${onResize(this.#r.bind(this))}
5
- ${ref(this.#E)}
3
+ @mouseup=${this.#E}
4
+ ${onResize(this.#g.bind(this))}
5
+ ${ref(this.#O)}
6
6
  >
7
7
  <glide-core-private-label
8
8
  label=${ifDefined(this.label)}
@@ -29,38 +29,38 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
29
29
  ${ref(this.#$)}
30
30
  >
31
31
  <span class="selected-option-labels" id="selected-option-labels">
32
- ${this.selectedOptions.map((({label:t})=>html`<span data-test="selected-option-label">
32
+ ${this.selectedAndEnabledOptions.filter((t=>!!this.multiple||t===this.selectedAndEnabledOptions.at(-1))).map((({label:t})=>html`<span data-test="selected-option-label">
33
33
  ${t},
34
34
  </span>`))}
35
35
  </span>
36
36
 
37
- ${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul
38
- aria-describedby="tag-overflow-text"
39
- class="tags"
40
- ${ref(this.#I)}
41
- >
42
- ${repeat(this.selectedOptions,(({id:t})=>t),(({id:t,editable:e,label:i,value:s},n)=>html`<li
43
- class=${classMap({"tag-container":!0,hidden:n>this.tagOverflowLimit-1})}
44
- data-test="tag-container"
45
- data-test-hidden=${n>this.tagOverflowLimit-1}
46
- >
47
- <glide-core-tag
48
- data-test="tag"
49
- data-id=${t}
50
- label=${ifDefined(i)}
51
- removable
52
- ?disabled=${this.disabled||this.readonly}
53
- ?private-editable=${e}
54
- @edit=${this.#D}
55
- @remove=${this.#B.bind(this,t)}
37
+ ${when(this.multiple&&this.selectedAndEnabledOptions.length>0,(()=>html`<ul
38
+ aria-describedby="tag-overflow-text"
39
+ class="tags"
40
+ ${ref(this.#I)}
41
+ >
42
+ ${repeat(this.selectedAndEnabledOptions,(({id:t})=>t),((t,e)=>html`<li
43
+ class=${classMap({"tag-container":!0,hidden:e>this.tagOverflowLimit-1})}
44
+ data-test="tag-container"
45
+ data-test-hidden=${e>this.tagOverflowLimit-1}
56
46
  >
57
- ${when(s,(()=>html`
58
- <slot
59
- data-test="multiselect-icon-slot"
60
- name="icon:${s}"
61
- slot="icon"
62
- >
63
- <!--
47
+ <glide-core-tag
48
+ data-test="tag"
49
+ data-id=${t.id}
50
+ label=${ifDefined(t.label)}
51
+ removable
52
+ ?disabled=${this.disabled||this.readonly}
53
+ ?private-editable=${t.editable}
54
+ @edit=${this.#D}
55
+ @remove=${this.#B.bind(this,t)}
56
+ >
57
+ ${when(t.value,(()=>html`
58
+ <slot
59
+ data-test="multiselect-icon-slot"
60
+ name="icon:${t.value}"
61
+ slot="icon"
62
+ >
63
+ <!--
64
64
  Icons for the selected Dropdown Option(s).
65
65
  Slot one icon per Dropdown Option.
66
66
  \`<value>\` should be equal to the \`value\` of each Dropdown Option.
@@ -68,21 +68,33 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
68
68
  @name icon:value
69
69
  @type {Element}
70
70
  -->
71
- </slot>
72
- `))}
73
- </glide-core-tag>
74
- </li>`))}
75
- </ul>`))}
76
- ${when(this.isShowSingleSelectIcon,(()=>html`<slot
77
- class=${classMap({"single-select-icon-slot":!0,quiet:"quiet"===this.variant})}
78
- data-test="single-select-icon-slot"
79
- name="icon:${this.lastSelectedAndEnabledOption?.value}"
80
- >
81
- <!--
82
- @type {Element}
83
- @ignore
84
- -->
85
- </slot>`))}
71
+ </slot>
72
+ `))}
73
+ </glide-core-tag>
74
+ </li>`))}
75
+ </ul>`))}
76
+ ${when(this.multiple&&this.selectedAndEnabledOptions.length>this.tagOverflowLimit,(()=>html`<div
77
+ aria-hidden="true"
78
+ class="tag-overflow-text"
79
+ id="tag-overflow-text"
80
+ >
81
+ +
82
+ <span data-test="tag-overflow-count">
83
+ ${this.selectedAndEnabledOptions.length-this.tagOverflowLimit}
84
+ </span>
85
+
86
+ more
87
+ </div>`))}
88
+ ${when(this.isShowSingleSelectIcon&&this.lastSelectedAndEnabledOption?.value,(()=>html`<slot
89
+ class=${classMap({"single-select-icon-slot":!0,quiet:"quiet"===this.variant})}
90
+ data-test="single-select-icon-slot"
91
+ name="icon:${this.lastSelectedAndEnabledOption?.value}"
92
+ >
93
+ <!--
94
+ @type {Element}
95
+ @ignore
96
+ -->
97
+ </slot>`))}
86
98
 
87
99
  <glide-core-tooltip
88
100
  class=${classMap({"input-tooltip":!0,visible:this.filterable||this.isFilterable})}
@@ -106,21 +118,21 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
106
118
  class=${classMap({input:!0,quiet:"quiet"===this.variant})}
107
119
  data-test="input"
108
120
  id="input"
109
- placeholder=${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}
121
+ placeholder=${this.multiple||!this.lastSelectedAndEnabledOption?.label?this.placeholder??"":""}
110
122
  role="combobox"
111
123
  spellcheck="false"
112
124
  tabindex=${this.disabled?"-1":"0"}
113
125
  ?disabled=${this.disabled}
114
126
  ?readonly=${this.readonly}
115
127
  @blur=${this.#F}
116
- @focus=${this.#C}
128
+ @focus=${this.#V}
117
129
  @input=${this.#_}
118
- @keydown=${this.#T}
119
- ${onResize(this.#V.bind(this))}
130
+ @keydown=${this.#C}
131
+ ${onResize(this.#T.bind(this))}
120
132
  ${ref(this.#n)}
121
133
  />
122
134
 
123
- ${when(!this.multiple&&this.isInputOverflowing&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
135
+ ${when(!this.multiple&&this.isInputOverflowing&&this.inputValue===this.lastSelectedAndEnabledOption?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
124
136
 
125
137
  </span>`))}
126
138
 
@@ -159,20 +171,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
159
171
  </div>
160
172
  </glide-core-tooltip>
161
173
 
162
- <div class="tag-overflow-and-buttons">
163
- ${when(this.multiple&&this.selectedOptions.length>this.tagOverflowLimit,(()=>html`<div
164
- aria-hidden="true"
165
- class="tag-overflow-text"
166
- id="tag-overflow-text"
167
- data-test="tag-overflow-text"
168
- >
169
- +
170
- <span data-test="tag-overflow-count">
171
- ${this.selectedOptions.length-this.tagOverflowLimit}
172
- </span>
173
-
174
- more
175
- </div>`))}
174
+ <div class="buttons">
176
175
  ${when(!this.multiple&&this.lastSelectedAndEnabledOption?.editable&&!this.isFiltering,(()=>html`<glide-core-icon-button
177
176
  class="edit-button"
178
177
  data-test="edit-button"
@@ -200,8 +199,8 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
200
199
  type="button"
201
200
  ?disabled=${this.disabled}
202
201
  @focusin=${this.#H}
203
- @focusout=${this.#U}
204
- ${ref(this.#v)}
202
+ @focusout=${this.#x}
203
+ ${ref(this.#u)}
205
204
  >
206
205
  ${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
207
206
  ${magnifyingGlassIcon}
@@ -215,14 +214,14 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
215
214
  class=${classMap({"options-and-feedback":!0,optionless:(this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading&&!this.isAddButtonVisible})}
216
215
  role="listbox"
217
216
  tabindex="-1"
218
- ${ref(this.#g)}
217
+ ${ref(this.#b)}
219
218
  >
220
219
  <div
221
220
  class=${classMap({options:!0,hidden:!this.isAddButtonVisible&&(this.hasNoAvailableOptions||this.hasNoMatchingOptions||this.loading)})}
222
221
  data-test="options"
223
222
  id="options"
224
- @change=${this.#x}
225
- @click=${this.#z}
223
+ @change=${this.#z}
224
+ @click=${this.#U}
226
225
  @focusin=${this.#W}
227
226
  @mousedown=${this.#P}
228
227
  @mouseover=${this.#K}
@@ -314,4 +313,4 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
314
313
  >`))}
315
314
  </div>
316
315
  </glide-core-private-label>
317
- </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#u.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#u.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#n.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#n.value:this.#v.value)}setValidity(t,e){this.validityMessage=e,this.#u.setValidity(t," ",this.filterable||this.isFilterable?this.#n.value:this.#v.value)}constructor(){super(),this.addButton=!1,this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.hasNoAvailableOptions=!1,this.hasNoMatchingOptions=!1,this.inputValue="",this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflowing=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflowing=!1,this.isInternalLabelTooltipOpen=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#lt=createRef(),this.#it=uniqueId(),this.#E=createRef(),this.#et=createRef(),this.#$=createRef(),this.#j=createRef(),this.#n=createRef(),this.#N=createRef(),this.#ot=!1,this.#t=!1,this.#at=!1,this.#s=!1,this.#dt=!0,this.#a=!1,this.#o=!1,this.#rt=!1,this.#pt=!1,this.#h=!1,this.#ht=!1,this.#L=new LocalizeController(this),this.#g=createRef(),this.#v=createRef(),this.#Y=createRef(),this.#I=createRef(),this.#p=[],this.#m=()=>{this.#ot?setTimeout((()=>{this.#ot=!1})):this.open=!1},this.#b=({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#lt;#it;#ct;#E;#et;#$;#j;#n;#N;#u;#ot;#t;#at;#s;#dt;#a;#o;#rt;#pt;#h;#ht;#L;#g;#ut;#v;#Y;#f;#I;#p;#m;#b;#e(){this.#ct?.(),this.#g.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#A(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#nt(){this.isAddButtonActive=!0,this.#lt.value&&(this.ariaActivedescendant=this.#lt.value.id),this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1)}#O(){this.#ot=!0}async#tt(){this.#dt&&(this.isFilterable=this.#d.length>10,this.#dt=!1),this.tagOverflowLimit=this.selectedOptions.length,this.hasNoAvailableOptions=0===this.#d.length;for(const t of this.#d)t.privateMultiple=this.multiple;if(this.open){const t=this.#vt?.find((t=>!t.disabled));this.activeOption&&!this.activeOption?.disabled||!t||(this.#ut=t,this.ariaActivedescendant=t.id,t.privateActive=!0)}if(this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),this.multiple?this.#p=this.selectedOptions.filter((t=>Boolean(t.value)&&!t.disabled)).map((({value:t})=>t)):this.lastSelectedAndEnabledOption?.value&&(this.#p=[this.lastSelectedAndEnabledOption.value],this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value)),this.requestUpdate(),await this.updateComplete,!this.multiple)for(const t of this.#d)t.selected&&t.requestUpdate();!this.multiple&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.multiple||!this.#n.value||this.isFiltering||(this.#n.value.value="",this.inputValue="",this.isAddButtonVisible=!1,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth)}#y(t){(null===t.relatedTarget||t.relatedTarget instanceof Node&&!this.#f?.contains(t.relatedTarget)&&!this.contains(t.relatedTarget))&&!this.#at&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#w(t){if(this.disabled||this.readonly)return;if(("Enter"===t.key||" "===t.key)&&t.target===this.#j.value)return void(this.#ot=!0);if(!this.open&&"Enter"===t.key)return void this.form?.requestSubmit();if("Escape"===t.key)return t.preventDefault(),void(this.open=!1);const e=t.target===this.#v.value||t.target===this.#n.value||t.target instanceof DropdownOption;if(!this.multiple||e){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key))return t.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.isAddButtonActive&&this.open){if("ArrowUp"===t.key&&t.metaKey||["Home","PageUp"].includes(t.key)){t.preventDefault();const e=this.#mt?.at(0);e&&(e.privateActive=!0,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id,e.scrollIntoView())}if("ArrowUp"===t.key){t.preventDefault();const e=this.#ut&&!this.#ut.hidden?this.#ut:this.#mt?.at(-1);e&&(e.privateActive=!0,e.privateIsEditActive=e.editable,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id)}"Enter"===t.key&&this.#st()}else if(this.activeOption&&this.open){if("Enter"===t.key||" "===t.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===t.key&&this.#mt&&this.#mt.length>0||" "===t.key&&!this.filterable&&!this.isFilterable)return this.#ht=!0,t.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#ft(),this.#ht=!1,this.#l(),this.multiple?(this.#n.value&&(this.#n.value.value=""),this.inputValue=""):(this.#n.value&&void 0!==this.activeOption.label&&(this.#n.value.value=this.activeOption.label,this.inputValue=this.activeOption.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.open=!1,this.isInputTooltipOpen=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const e=this.#vt?.indexOf(this.activeOption);if("ArrowUp"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.findLast(((t,i)=>!t.disabled&&i<e));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.find(((t,i)=>!t.disabled&&i>e));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})):this.isAddButtonVisible&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id))}if(("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].reverse().findLast((t=>!t.disabled));return void(e&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}if(("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].findLast((t=>!t.disabled));return void(this.isAddButtonVisible&&this.#lt.value?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id):e&&this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}}}}#R(t){if(this.disabled||this.readonly)return;if(this.#at)return void(this.#at=!1);if(t.target instanceof Node&&this.#j.value?.contains(t.target))return void this.lastSelectedAndEnabledOption?.privateEdit();const e=this.filterable||this.isFilterable;if(this.#ht||!this.open||e&&!(t.target instanceof Element&&this.#v.value?.contains(t.target)))return 0!==t.detail?(this.open=!0,void this.focus()):void 0;this.open=!1}#S(t){const e=this.filterable||this.isFilterable,i=t.target instanceof Tag;e&&!i?t.target!==this.#n.value&&(t.preventDefault(),this.focus()):i||t.preventDefault()}#q(){this.open=!1}#F(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#C(){this.#n.value?.select(),this.isInputTooltipOpen=!0}async#_(t){let e;if(t.stopPropagation(),this.open=!0,this.#n.value&&(this.inputValue=this.#n.value.value),this.multiple&&""!==this.#n.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#n.value?.value&&this.#n.value?.value!==this.lastSelectedAndEnabledOption?.label?(this.isFiltering=!0,this.isShowSingleSelectIcon=!1):(this.isFiltering=!1,this.isShowSingleSelectIcon=!1),this.#n.value){this.isAddButtonVisible=this.addButton&&this.#n.value?.value.trim().length>0&&!this.#d.some((({label:t})=>this.#n.value&&t?.toLowerCase()===this.#n.value.value.toLowerCase().trim()));try{e=await this.filter(this.#n.value.value)}catch{}}if(e)for(const t of this.#d)t.hidden=!e.includes(t);if(this.isCommunicateItemCountToScreenreaders=!0,this.#mt&&(this.itemCount=this.isAddButtonVisible?this.#mt.length+1:this.#mt.length),this.hasNoMatchingOptions=0===this.#mt?.length,this.hasNoMatchingOptions)return void(this.addButton?(this.isAddButtonActive=!0,this.activeOption&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=this.#lt.value.id)):(this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1),this.ariaActivedescendant=""));const i=this.#mt?.find((({disabled:t})=>!t));if(this.isAddButtonActive&&!this.isAddButtonVisible&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled)return this.isAddButtonActive=!1,this.#ut.privateActive=!0,void(this.ariaActivedescendant=this.#ut.id);if(this.isAddButtonActive&&!this.isAddButtonVisible&&i)return i.privateActive=!0,this.isAddButtonActive=!1,void(this.ariaActivedescendant=i.id);if((!this.activeOption||this.activeOption?.hidden||this.activeOption?.disabled)&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled){const t=this.#ut;return this.activeOption&&(this.#ut=this.activeOption,this.#ut.privateActive=!1),t.privateActive=!0,void(this.ariaActivedescendant=t.id)}return this.activeOption?.hidden&&i?(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,void(i.privateActive=!0)):void 0}#T(t){const e=this.selectedOptions.findLast(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&!t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart)return this.#at=!0,e.selected=!1,void(this.#at=!1);const i=this.selectedOptions.filter(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart){this.#at=!0;for(const t of i)t.selected=!1;this.#at=!1}else;}#V(){this.#n.value&&(this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth)}#M(){this.#N.value&&(this.isInternalLabelOverflowing=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#d(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption))??[]}get#c(){const t=this.#d;return this.#Y.value&&t.unshift(this.#Y.value),t}get#mt(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption&&!t.hidden))}get#vt(){const t=this.#mt;return this.#Y.value&&!this.#Y.value.hidden&&t?.unshift(this.#Y.value),t}#x(t){t.target instanceof DropdownOption&&(t.target.selected=!t.target.selected),t.target===this.#Y.value&&this.#ft(),this.#n.value&&(this.#n.value.value=""),this.inputValue="",this.#l()}#z(t){if(t.target instanceof Element){const e=t.target.closest("glide-core-dropdown-option");if(e instanceof DropdownOption&&e.disabled)return;if(e instanceof DropdownOption&&e.privateIsEditActive)return e.privateEdit(),void(this.open=!1);if(e&&!e.selected)return e.selected=!0,this.#l(),this.open=!1,this.isInputTooltipOpen=!1,this.#n.value&&void 0!==e.label&&(this.#n.value.value=e.label,this.inputValue=e.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(e?.selected&&!this.multiple)return void(this.open=!1)}}#J(t){if(this.multiple&&t.target instanceof DropdownOption&&t.target.disabled){if(t.target.selected){const e=this.#p.lastIndexOf(t.target.value);this.#p.splice(e,e+1)}if(t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}}else if(t.target instanceof DropdownOption&&t.target.disabled){if(this.#p=this.lastSelectedAndEnabledOption?.value?[this.lastSelectedAndEnabledOption.value]:[],t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}this.#n.value&&(this.#n.value.value=this.lastSelectedAndEnabledOption?.label??"",this.inputValue=this.lastSelectedAndEnabledOption?.label??"",this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth);for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate()}else if(this.multiple&&t.target instanceof DropdownOption&&t.target.selected&&t.target.value)this.#p.push(t.target.value);else if(t.target instanceof DropdownOption&&t.target.selected&&t.target===this.lastSelectedAndEnabledOption&&void 0!==t.target.label){t.target.value&&(this.#p=[t.target.value]);for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate();this.#n.value&&(this.#n.value.value=t.target.label,this.inputValue=t.target.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth)}this.requestUpdate()}#G(){this.requestUpdate()}#W(t){t.target instanceof DropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),t.target.privateActive=!0,this.#ut=t.target)}#Q(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#r()}))):(this.filterable||this.isFilterable)&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.requestUpdate())}#P(t){(this.filterable||this.isFilterable)&&t.preventDefault()}#K(t){if(t.target instanceof DropdownOption&&this.#vt){if(t.target.disabled)return;this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=t.target.id,this.isAddButtonActive=!1,t.target.privateActive=!0,t.target.privateIsEditActive=!1}}#Z(t){if(!this.#pt){if(this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),t.target instanceof DropdownOption)if(this.multiple&&!this.#h)this.#p=t.target.selected&&t.target.value&&!t.target.disabled?[...this.value,t.target.value]:this.value.filter((e=>t.target instanceof DropdownOption&&e!==t.target.value));else if(!this.multiple&&t.target.selected&&!t.target.disabled){for(const e of this.#d)e!==t.target&&t.target instanceof DropdownOption&&t.target.selected&&e.selected&&(e.selected=!1);this.#p=t.target.value?[t.target.value]:[]}this.requestUpdate(),this.multiple&&this.updateComplete.then((()=>{this.#r()}))}}#X(t){t.target instanceof DropdownOption&&this.multiple&&t.target.selected&&t.detail.new?this.#p=this.value.map((e=>e===t.detail.old?t.detail.new:e)):t.target instanceof DropdownOption&&this.multiple?this.#p=this.value.filter((e=>e!==t.detail.old)):t.target instanceof DropdownOption&&(this.#p=t.detail.new?[t.detail.new]:[])}#H(){this.isInternalLabelTooltipOpen=!0}#U(){this.isInternalLabelTooltipOpen=!1}#D(){this.#at=!0,this.open=!1}async#B(t){this.#at=!0;for(const e of this.#d)e.id===t&&(e.selected=!1,this.#p=this.value.filter((t=>t!==e.value)));const e=this.#I.value?.querySelectorAll("glide-core-tag");if(e&&this.selectedOptions.length>0){const i=[...e].findIndex((e=>e.dataset.id===t)),s=e[i<e.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#at=!1}))}else setTimeout((()=>{this.focus(),this.#at=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#k(t){t.stopPropagation()}#st(){this.#n.value&&(this.dispatchEvent(new CustomEvent("add",{bubbles:!0,composed:!0,detail:this.#n.value.value})),this.#n.value.value="",this.inputValue="");const t=this.#d.at(0);t&&(t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id),this.multiple||(this.open=!1,this.isInputTooltipOpen=!1),this.#l(),this.focus()}#ft(){this.#pt=!0;for(const t of this.#d)!this.#Y.value?.selected||t.selected||t.disabled?!this.#Y.value?.selected&&t.selected&&(t.selected=!1):t.selected=!0;this.#p=this.#d.filter((({selected:t,value:e})=>t&&e)).map((({value:t})=>t)),this.#pt=!1}async#r(){if(this.#E.value){const t=this.#E.value.scrollWidth>this.#E.value.clientWidth;t&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#r()):!t&&!this.#rt&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#rt=!0,await this.updateComplete,this.#r()):this.#rt=!1}}#i(){this.#ct?.(),this.#mt&&(this.itemCount=this.#mt.length),this.hasNoAvailableOptions=0===this.#d.length;const t=this.#vt?.find((t=>!t.disabled));this.#ut&&!this.#ut.disabled?(this.#ut.privateActive=!0,this.ariaActivedescendant=this.#ut.id):t&&(t.privateActive=!0,this.ariaActivedescendant=t.id,this.#ut=t),this.#$.value&&this.#g.value&&(this.#ct=autoUpdate(this.#$.value,this.#g.value,(()=>{(async()=>{if(this.#$.value&&this.#g.value){const{x:t,y:e,placement:i}=await computePosition(this.#$.value,this.#g.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#g.value.dataset.placement=i,Object.assign(this.#g.value.style,{left:`${t}px`,top:`${e}px`}),this.#g.value?.showPopover()}})()})))}#l(){for(const t of this.#d)t.hidden=!1;this.isFiltering=!1,this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.hasNoMatchingOptions=!1,this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value)}};__decorate([property({reflect:!0}),required],Dropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button",reflect:!0,type:Boolean})],Dropdown.prototype,"addButton",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Dropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"placeholder",void 0),__decorate([property()],Dropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],Dropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],Dropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],Dropdown.prototype,"value",null),__decorate([property({reflect:!0})],Dropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"version",void 0),__decorate([state()],Dropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],Dropdown.prototype,"hasNoAvailableOptions",void 0),__decorate([state()],Dropdown.prototype,"hasNoMatchingOptions",void 0),__decorate([state()],Dropdown.prototype,"inputValue",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonActive",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonVisible",void 0),__decorate([state()],Dropdown.prototype,"isBlurring",void 0),__decorate([state()],Dropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],Dropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],Dropdown.prototype,"isFilterable",void 0),__decorate([state()],Dropdown.prototype,"isFiltering",void 0),__decorate([state()],Dropdown.prototype,"isInputOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Dropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],Dropdown.prototype,"itemCount",void 0),__decorate([state()],Dropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],Dropdown.prototype,"validityMessage",void 0),Dropdown=__decorate([customElement("glide-core-dropdown"),final],Dropdown);export default Dropdown;
316
+ </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#c.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#c.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#n.value:this.#u.value):this.#c.setValidity({customError:!0,valueMissing:this.#c.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#n.value:this.#u.value)}setValidity(t,e){this.validityMessage=e,this.#c.setValidity(t," ",this.filterable||this.isFilterable?this.#n.value:this.#u.value)}constructor(){super(),this.addButton=!1,this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.hasNoAvailableOptions=!1,this.hasNoMatchingOptions=!1,this.inputValue="",this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflowing=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflowing=!1,this.isInternalLabelTooltipOpen=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.selectedAndEnabledOptions=[],this.tagOverflowLimit=0,this.#lt=createRef(),this.#it=uniqueId(),this.#O=createRef(),this.#et=createRef(),this.#$=createRef(),this.#j=createRef(),this.#n=createRef(),this.#N=createRef(),this.#ot=!1,this.#t=!1,this.#at=!1,this.#s=!1,this.#dt=!0,this.#a=!1,this.#o=!1,this.#rt=!1,this.#pt=!1,this.#p=!1,this.#ht=!1,this.#L=new LocalizeController(this),this.#b=createRef(),this.#u=createRef(),this.#Y=createRef(),this.#I=createRef(),this.#r=[],this.#v=()=>{this.#ot?setTimeout((()=>{this.#ot=!1})):this.open=!1},this.#f=({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))},this.#c=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#lt;#it;#ct;#O;#et;#$;#j;#n;#N;#c;#ot;#t;#at;#s;#dt;#a;#o;#rt;#pt;#p;#ht;#L;#b;#ut;#u;#Y;#m;#I;#r;#v;#f;#e(){this.#ct?.(),this.#b.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#A(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#nt(){this.isAddButtonActive=!0,this.#lt.value&&(this.ariaActivedescendant=this.#lt.value.id),this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#ot=!0}async#tt(){if(this.open){const t=this.#vt?.find((t=>!t.disabled));this.activeOption&&!this.activeOption?.disabled||!t||(this.#ut=t,this.ariaActivedescendant=t.id,t.privateActive=!0)}this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),this.hasNoAvailableOptions=0===this.#d.length,this.selectedAndEnabledOptions=this.#d.filter((t=>t.selected&&!t.disabled)),this.#dt&&(this.isFilterable=this.#d.length>10,this.#dt=!1),this.multiple?(this.#r=this.selectedAndEnabledOptions.filter((({value:t})=>Boolean(t))).map((({value:t})=>t)),this.tagOverflowLimit=this.selectedAndEnabledOptions.length,this.#g()):(this.lastSelectedAndEnabledOption?.value&&(this.#r=[this.lastSelectedAndEnabledOption.value]),this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value),await this.updateComplete,this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.#n.value&&!this.isFiltering&&(this.#n.value.value="",this.inputValue="",this.isAddButtonVisible=!1,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth));for(const t of this.#d)t.privateMultiple=this.multiple,!this.multiple&&t.selected&&t.requestUpdate()}#y(t){(null===t.relatedTarget||t.relatedTarget instanceof Node&&!this.#m?.contains(t.relatedTarget)&&!this.contains(t.relatedTarget))&&!this.#at&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#w(t){if(this.disabled||this.readonly)return;if(("Enter"===t.key||" "===t.key)&&t.target===this.#j.value)return void(this.#ot=!0);if(!this.open&&"Enter"===t.key&&!this.#at)return void this.form?.requestSubmit();if("Escape"===t.key)return t.preventDefault(),void(this.open=!1);const e=t.target===this.#u.value||t.target===this.#n.value||t.target instanceof DropdownOption;if(!this.multiple||e){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key))return t.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.isAddButtonActive&&this.open){if("ArrowUp"===t.key&&t.metaKey||["Home","PageUp"].includes(t.key)){t.preventDefault();const e=this.#mt?.at(0);e&&(e.privateActive=!0,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id,e.scrollIntoView())}if("ArrowUp"===t.key){t.preventDefault();const e=this.#ut&&!this.#ut.hidden?this.#ut:this.#mt?.at(-1);e&&(e.privateActive=!0,e.privateIsEditActive=e.editable,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id)}"Enter"===t.key&&this.#st()}else if(this.activeOption&&this.open){if("Enter"===t.key||" "===t.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===t.key&&this.#mt&&this.#mt.length>0||" "===t.key&&!this.filterable&&!this.isFilterable)return this.#ht=!0,t.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#ft(),this.#ht=!1,this.#l(),this.multiple?(this.#n.value&&(this.#n.value.value=""),this.inputValue=""):(this.#n.value&&void 0!==this.activeOption.label&&(this.#n.value.value=this.activeOption.label,this.inputValue=this.activeOption.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.open=!1,this.isInputTooltipOpen=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const e=this.#vt?.indexOf(this.activeOption);if("ArrowUp"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.findLast(((t,i)=>!t.disabled&&i<e));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.find(((t,i)=>!t.disabled&&i>e));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})):this.isAddButtonVisible&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id))}if(("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].reverse().findLast((t=>!t.disabled));return void(e&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}if(("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].findLast((t=>!t.disabled));return void(this.isAddButtonVisible&&this.#lt.value?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id):e&&this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}}}}#R(t){if(this.disabled||this.readonly)return;if(this.#at)return void(this.#at=!1);if(t.target instanceof Node&&this.#j.value?.contains(t.target))return void this.lastSelectedAndEnabledOption?.privateEdit();const e=this.filterable||this.isFilterable;if(this.#ht||!this.open||e&&!(t.target instanceof Element&&this.#u.value?.contains(t.target)))return 0!==t.detail?(this.open=!0,void this.focus()):void 0;this.open=!1}#S(t){const e=this.filterable||this.isFilterable,i=t.target instanceof Tag;e&&!i?t.target!==this.#n.value&&(t.preventDefault(),this.focus()):i||t.preventDefault()}#q(){this.open=!1}#F(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#V(){this.#n.value?.select(),this.isInputTooltipOpen=!0}async#_(t){let e;if(t.stopPropagation(),this.open=!0,this.#n.value&&(this.inputValue=this.#n.value.value),this.multiple&&""!==this.#n.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#n.value?.value&&this.#n.value?.value!==this.lastSelectedAndEnabledOption?.label?(this.isFiltering=!0,this.isShowSingleSelectIcon=!1):(this.isFiltering=!1,this.isShowSingleSelectIcon=!1),this.#n.value){this.isAddButtonVisible=this.addButton&&this.#n.value?.value.trim().length>0&&!this.#d.some((({label:t})=>this.#n.value&&t?.toLowerCase()===this.#n.value.value.toLowerCase().trim()));try{e=await this.filter(this.#n.value.value)}catch{}}if(e)for(const t of this.#d)t.hidden=!e.includes(t);if(this.isCommunicateItemCountToScreenreaders=!0,this.#mt&&(this.itemCount=this.isAddButtonVisible?this.#mt.length+1:this.#mt.length),this.hasNoMatchingOptions=0===this.#mt?.length,this.hasNoMatchingOptions)return void(this.addButton?(this.isAddButtonActive=!0,this.activeOption&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=this.#lt.value.id)):(this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1),this.ariaActivedescendant=""));const i=this.#mt?.find((({disabled:t})=>!t));if(this.isAddButtonActive&&!this.isAddButtonVisible&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled)return this.isAddButtonActive=!1,this.#ut.privateActive=!0,void(this.ariaActivedescendant=this.#ut.id);if(this.isAddButtonActive&&!this.isAddButtonVisible&&i)return i.privateActive=!0,this.isAddButtonActive=!1,void(this.ariaActivedescendant=i.id);if((!this.activeOption||this.activeOption?.hidden||this.activeOption?.disabled)&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled){const t=this.#ut;return this.activeOption&&(this.#ut=this.activeOption,this.#ut.privateActive=!1),t.privateActive=!0,void(this.ariaActivedescendant=t.id)}return this.activeOption?.hidden&&i?(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,void(i.privateActive=!0)):void 0}#C(t){const e=this.selectedAndEnabledOptions.findLast(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&!t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart)return this.#at=!0,e.selected=!1,void(this.#at=!1);const i=this.selectedAndEnabledOptions.filter(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart){this.#at=!0;for(const t of i)t.selected=!1;this.#at=!1}else;}#T(){this.#n.value&&(this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth)}#M(){this.#N.value&&(this.isInternalLabelOverflowing=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#d(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption))??[]}get#h(){const t=this.#d;return this.#Y.value&&t.unshift(this.#Y.value),t}get#mt(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption&&!t.hidden))}get#vt(){const t=this.#mt;return this.#Y.value&&!this.#Y.value.hidden&&t?.unshift(this.#Y.value),t}#z(t){t.target instanceof DropdownOption&&(t.target.selected=!t.target.selected),t.target===this.#Y.value&&this.#ft(),this.#n.value&&(this.#n.value.value=""),this.inputValue="",this.#l()}#U(t){if(t.target instanceof Element){const e=t.target.closest("glide-core-dropdown-option");if(e instanceof DropdownOption&&e.disabled)return;if(e instanceof DropdownOption&&e.privateIsEditActive)return e.privateEdit(),void(this.open=!1);if(e&&!e.selected)return e.selected=!0,this.#l(),this.open=!1,this.isInputTooltipOpen=!1,this.#n.value&&void 0!==e.label&&(this.#n.value.value=e.label,this.inputValue=e.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(e?.selected&&!this.multiple)return void(this.open=!1)}}#J(t){if(this.multiple&&t.target instanceof DropdownOption&&t.target.disabled){if(t.target.selected&&(this.#r=this.#r.filter(((e,i)=>i!==this.selectedAndEnabledOptions.indexOf(t.target))),this.selectedAndEnabledOptions=this.selectedAndEnabledOptions.filter((e=>e!==t.target)),this.#g()),t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}}else if(t.target instanceof DropdownOption&&t.target.disabled){if(this.selectedAndEnabledOptions=this.selectedAndEnabledOptions.filter((e=>e!==t.target)),this.#r=this.lastSelectedAndEnabledOption?.value?[this.lastSelectedAndEnabledOption.value]:[],t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}this.#n.value&&(this.#n.value.value=this.lastSelectedAndEnabledOption?.label??"",this.inputValue=this.lastSelectedAndEnabledOption?.label??"",this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth);for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate()}else if(this.multiple&&t.target instanceof DropdownOption&&t.target.selected)t.target.value&&this.#r.push(t.target.value),this.selectedAndEnabledOptions=[...this.selectedAndEnabledOptions,t.target],this.#g();else if(t.target instanceof DropdownOption&&t.target.selected&&void 0!==t.target.label){this.selectedAndEnabledOptions=[...this.selectedAndEnabledOptions,t.target],this.#r=t.target===this.lastSelectedAndEnabledOption&&t.target.value?[t.target.value]:[];for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate();this.#n.value&&(this.#n.value.value=t.target.label,this.inputValue=t.target.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth)}}#G(){this.requestUpdate()}#W(t){t.target instanceof DropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),t.target.privateActive=!0,this.#ut=t.target)}#Q(){this.selectedAndEnabledOptions.length>0&&(this.multiple?this.requestUpdate():(this.filterable||this.isFilterable)&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.requestUpdate())}#P(t){(this.filterable||this.isFilterable)&&t.preventDefault()}#K(t){if(t.target instanceof DropdownOption&&this.#vt){if(t.target.disabled)return;this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=t.target.id,this.isAddButtonActive=!1,t.target.privateActive=!0,t.target.privateIsEditActive=!1}}#Z(t){if(!this.#pt){if(this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),t.target instanceof DropdownOption){const e=this.selectedAndEnabledOptions.every((e=>e!==t.target));if(this.multiple)t.target.selected?(t.target.disabled&&(t.target.disabled=!1),e&&(this.selectedAndEnabledOptions=[...this.selectedAndEnabledOptions,t.target],this.#p||(this.#r=[...this.value,t.target.value]))):(this.#p||(this.#r=this.#r.filter(((e,i)=>i!==this.selectedAndEnabledOptions.indexOf(t.target)))),this.selectedAndEnabledOptions=this.selectedAndEnabledOptions.filter((e=>e!==t.target)));else if(!this.multiple)if(t.target.selected){t.target.disabled&&(t.target.disabled=!1),e&&(this.selectedAndEnabledOptions=[...this.selectedAndEnabledOptions,t.target]);for(const e of this.#d)e!==t.target&&(e.selected=!1);this.#p||(this.#r=[t.target.value])}else this.selectedAndEnabledOptions=this.selectedAndEnabledOptions.filter((e=>e!==t.target)),this.#p||(this.#r=this.lastSelectedAndEnabledOption?.value?[this.lastSelectedAndEnabledOption.value]:[])}this.multiple&&this.#g()}}#X(t){t.target instanceof DropdownOption&&this.multiple&&t.target.selected&&t.detail.new?this.#r=this.value.map((e=>e===t.detail.old?t.detail.new:e)):t.target instanceof DropdownOption&&this.multiple?this.#r=this.value.filter((e=>e!==t.detail.old)):t.target instanceof DropdownOption&&(this.#r=t.detail.new?[t.detail.new]:[])}#H(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#D(){this.#at=!0,this.open=!1}async#B(t){this.#at=!0,t.selected=!1;const e=this.#I.value?.querySelectorAll("glide-core-tag");if(e&&this.selectedAndEnabledOptions.length>0){const i=[...e].findIndex((e=>e.dataset.id===t.id)),s=e[i<e.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#at=!1}))}else setTimeout((()=>{this.focus(),this.#at=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#k(t){t.stopPropagation()}#st(){this.#n.value&&(this.dispatchEvent(new CustomEvent("add",{bubbles:!0,composed:!0,detail:this.#n.value.value})),this.#n.value.value="",this.inputValue="");const t=this.#d.at(0);t&&(t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id),this.multiple||(this.open=!1,this.isInputTooltipOpen=!1),this.#l(),this.focus()}#ft(){this.#pt=!0;for(const t of this.#d)!this.#Y.value?.selected||t.selected||t.disabled?!this.#Y.value?.selected&&t.selected&&(t.selected=!1):t.selected=!0;this.#pt=!1,this.selectedAndEnabledOptions=this.#d.filter((t=>t.selected&&!t.disabled)),this.#r=this.selectedAndEnabledOptions.map((({value:t})=>t)),this.#g()}async#g(){if(await this.updateComplete,this.#O.value){const t=this.#O.value.scrollWidth>this.#O.value.clientWidth;t&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#g()):!t&&!this.#rt&&this.tagOverflowLimit<this.selectedAndEnabledOptions.length?(this.#rt=!0,this.tagOverflowLimit=this.tagOverflowLimit+1,this.#g()):this.#rt=!1}}#i(){this.#ct?.(),this.#mt&&(this.itemCount=this.#mt.length),this.hasNoAvailableOptions=0===this.#d.length;const t=this.#vt?.find((t=>!t.disabled));!this.#ut||this.#ut.hidden||this.#ut.disabled?t&&(t.privateActive=!0,this.ariaActivedescendant=t.id,this.#ut=t):(this.#ut.privateActive=!0,this.ariaActivedescendant=this.#ut.id),this.#$.value&&this.#b.value&&(this.#ct=autoUpdate(this.#$.value,this.#b.value,(()=>{(async()=>{if(this.#$.value&&this.#b.value){const{x:t,y:e,placement:i}=await computePosition(this.#$.value,this.#b.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#b.value.dataset.placement=i,Object.assign(this.#b.value.style,{left:`${t}px`,top:`${e}px`}),this.#b.value?.showPopover()}})()})))}#l(){for(const t of this.#d)t.hidden=!1;this.isFiltering=!1,this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.hasNoMatchingOptions=!1,this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value)}};__decorate([property({reflect:!0}),required],Dropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button",reflect:!0,type:Boolean})],Dropdown.prototype,"addButton",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Dropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"placeholder",void 0),__decorate([property()],Dropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],Dropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],Dropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],Dropdown.prototype,"value",null),__decorate([property({reflect:!0})],Dropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"version",void 0),__decorate([state()],Dropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],Dropdown.prototype,"hasNoAvailableOptions",void 0),__decorate([state()],Dropdown.prototype,"hasNoMatchingOptions",void 0),__decorate([state()],Dropdown.prototype,"inputValue",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonActive",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonVisible",void 0),__decorate([state()],Dropdown.prototype,"isBlurring",void 0),__decorate([state()],Dropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],Dropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],Dropdown.prototype,"isFilterable",void 0),__decorate([state()],Dropdown.prototype,"isFiltering",void 0),__decorate([state()],Dropdown.prototype,"isInputOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Dropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],Dropdown.prototype,"itemCount",void 0),__decorate([state()],Dropdown.prototype,"selectedAndEnabledOptions",void 0),__decorate([state()],Dropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],Dropdown.prototype,"validityMessage",void 0),Dropdown=__decorate([customElement("glide-core-dropdown"),final],Dropdown);export default Dropdown;
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(a=(s<3?l(a):s>3?l(t,i,a):l(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.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{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let DropdownOption=class DropdownOption extends LitElement{constructor(){super(...arguments),this.id=uniqueId(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#r}set label(e){this.#r=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.ariaDisabled=e.toString(),this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){this.#a=e,this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedAndEnabledOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected&&!e.disabled))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" @click="${this.#p}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="checkbox-icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple)})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable})}"><slot class="${classMap({"icon-slot":!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedAndEnabledOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}updated(){this.privateMultiple?this.ariaSelected=!this.disabled&&this.selected?"true":"false":this.ariaSelected=!this.disabled&&this.selected&&this===this.lastSelectedAndEnabledOption?"true":"false"}#e;#t;#c;#i;#o;#r;#l;#s;#a;#n;#p(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],DropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],DropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],DropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],DropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"role",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],DropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"value",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"version",void 0),__decorate([state()],DropdownOption.prototype,"isMultiple",null),__decorate([state()],DropdownOption.prototype,"lastSelectedAndEnabledOption",null),__decorate([state()],DropdownOption.prototype,"isLabelOverflow",void 0),DropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],DropdownOption);export default DropdownOption;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(a=(s<3?l(a):s>3?l(t,i,a):l(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.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{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let DropdownOption=class DropdownOption extends LitElement{constructor(){super(...arguments),this.id=uniqueId(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#r}set label(e){this.#r=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.ariaDisabled=e.toString(),this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){this.#a=e,this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedAndEnabledOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected&&!e.disabled))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" @click="${this.#p}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="checkbox-icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple)})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable})}"><slot class="${classMap({"icon-slot":!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedAndEnabledOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}updated(){this.privateMultiple?this.ariaSelected=!this.disabled&&this.selected?"true":"false":this.ariaSelected=!this.disabled&&this.selected&&this===this.lastSelectedAndEnabledOption?"true":"false"}#e;#t;#c;#i;#o;#r;#l;#s;#a;#n;#p(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],DropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],DropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],DropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],DropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"role",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],DropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"value",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"version",void 0),__decorate([state()],DropdownOption.prototype,"isMultiple",null),__decorate([state()],DropdownOption.prototype,"lastSelectedAndEnabledOption",null),__decorate([state()],DropdownOption.prototype,"isLabelOverflow",void 0),DropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],DropdownOption);export default DropdownOption;
@@ -213,7 +213,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
213
213
  }
214
214
  }
215
215
 
216
- .tag-overflow-and-buttons {
216
+ .buttons {
217
217
  align-items: center;
218
218
  display: flex;
219
219
  margin-inline-start: auto;
@@ -222,7 +222,6 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
222
222
  .tag-overflow-text {
223
223
  align-content: center;
224
224
  color: var(--glide-core-color-interactive-text-link);
225
- margin-inline-end: var(--glide-core-spacing-base-md);
226
225
  white-space: nowrap;
227
226
  }
228
227
 
@@ -10,7 +10,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
10
10
  align-items: center;
11
11
  block-size: var(--private-size, 1.625rem);
12
12
  border-color: transparent;
13
- border-radius: var(--glide-core-rounding-base-radius-sm);
13
+ border-radius: var(--glide-core-rounding-base-radius-md);
14
14
  border-style: solid;
15
15
  border-width: 1px;
16
16
  cursor: pointer;
@@ -146,7 +146,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
146
146
  }
147
147
 
148
148
  ::slotted([slot='prefix-icon']) {
149
- padding-inline-end: var(--glide-core-spacing-base-xxs);
149
+ padding-inline-end: var(--glide-core-spacing-base-xs);
150
150
  }
151
151
 
152
152
  .empty .clear-icon-button {
package/dist/label.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(s=(r<3?l(s):r>3?l(e,o,s):l(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let Label=class Label extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" data-test="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" @mouseover="${this.#r}" ${ref(this.#o)}><slot ${assertSlot()} ${ref(this.#t)}></slot></div></glide-core-tooltip>${this.required?html`<span aria-hidden="true" class="required-symbol" data-test="required-symbol">*</span>`:""}</div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#i;#l;#a(){this.hasDescription=Boolean(this.#e.value&&this.#e.value.offsetHeight>0)}#r(){const t=this.#t.value?.assignedElements().at(0);t&&this.#o.value&&(this.isLabelTooltip=t.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}#s(){const t=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"hide",void 0),__decorate([property({reflect:!0,useDefault:!0})],Label.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"required",void 0),__decorate([property()],Label.prototype,"split",void 0),__decorate([property()],Label.prototype,"tooltip",void 0),__decorate([property()],Label.prototype,"label",void 0),__decorate([state()],Label.prototype,"hasDescription",void 0),__decorate([state()],Label.prototype,"hasSummarySlot",void 0),__decorate([state()],Label.prototype,"isLabelTooltip",void 0),Label=__decorate([customElement("glide-core-private-label"),final],Label);export default Label;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
1
+ var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(s=(r<3?l(s):r>3?l(e,o,s):l(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let Label=class Label extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,vertical:"vertical"===this.orientation})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" data-test="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" @mouseover="${this.#r}" ${ref(this.#o)}><slot ${assertSlot()} ${ref(this.#t)}></slot></div></glide-core-tooltip>${this.required?html`<span aria-hidden="true" class="required-symbol" data-test="required-symbol">*</span>`:""}</div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#i;#l;#a(){this.hasDescription=Boolean(this.#e.value&&this.#e.value.offsetHeight>0)}#r(){const t=this.#t.value?.assignedElements().at(0);t&&this.#o.value&&(this.isLabelTooltip=t.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}#s(){const t=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"hide",void 0),__decorate([property({reflect:!0,useDefault:!0})],Label.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"required",void 0),__decorate([property()],Label.prototype,"split",void 0),__decorate([property()],Label.prototype,"tooltip",void 0),__decorate([property()],Label.prototype,"label",void 0),__decorate([state()],Label.prototype,"hasDescription",void 0),__decorate([state()],Label.prototype,"hasSummarySlot",void 0),__decorate([state()],Label.prototype,"isLabelTooltip",void 0),Label=__decorate([customElement("glide-core-private-label"),final],Label);export default Label;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
@@ -55,6 +55,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
55
55
  &.right {
56
56
  justify-content: flex-end;
57
57
  }
58
+
59
+ &.vertical:not(.hidden-label) {
60
+ block-size: 1.25rem;
61
+ }
58
62
  }
59
63
 
60
64
  .optional-tooltip {
@@ -138,7 +142,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
138
142
  .control-and-summary {
139
143
  align-items: center;
140
144
  display: flex;
141
- gap: var(--glide-core-spacing-base-sm);
145
+ gap: var(--glide-core-spacing-base-xs);
142
146
  }
143
147
 
144
148
  .control {
@@ -152,10 +156,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
152
156
  &.disabled::slotted(*) {
153
157
  cursor: not-allowed;
154
158
  }
155
-
156
- &.vertical:not(.hidden-label) {
157
- margin-block-start: var(--glide-core-spacing-base-xxs);
158
- }
159
159
  }
160
160
 
161
161
  .summary {
@@ -2,7 +2,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
2
2
  ${focusOutline(".component:focus-visible")}
3
3
  `,css`
4
4
  .component {
5
- border-radius: var(--glide-core-rounding-base-radius-xs);
5
+ border-radius: var(--glide-core-rounding-base-radius-xxs);
6
6
  color: var(--glide-core-color-interactive-text-link);
7
7
  font-family: var(--glide-core-typography-family-primary);
8
8
  font-size: var(--glide-core-typography-size-body-small);
@@ -2,11 +2,12 @@ import{css}from"lit";export default[css`
2
2
  .component {
3
3
  align-items: center;
4
4
  background-color: transparent;
5
+ block-size: 1.75rem;
5
6
  border: none;
6
7
  border-radius: var(--glide-core-spacing-base-sm);
7
8
  display: flex;
8
9
  font: inherit;
9
- gap: var(--glide-core-spacing-base-sm);
10
+ gap: var(--glide-core-spacing-base-xs);
10
11
  inline-size: 100%;
11
12
  padding-block: var(--glide-core-spacing-base-xxs);
12
13
  padding-inline: var(--glide-core-spacing-base-sm);
@@ -2,12 +2,13 @@ import{css}from"lit";export default[css`
2
2
  .component {
3
3
  align-items: center;
4
4
  background-color: transparent;
5
+ block-size: 1.75rem;
5
6
  border: none;
6
7
  border-radius: var(--glide-core-spacing-base-sm);
7
8
  box-sizing: border-box;
8
9
  display: flex;
9
10
  font: inherit;
10
- gap: var(--glide-core-spacing-base-sm);
11
+ gap: var(--glide-core-spacing-base-xs);
11
12
  inline-size: 100%;
12
13
  padding-block: var(--glide-core-spacing-base-xxs);
13
14
  padding-inline: var(--glide-core-spacing-base-sm);
@@ -68,7 +68,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
68
68
  .container {
69
69
  max-block-size: 75vh;
70
70
  max-inline-size: 80vw;
71
- padding: 1.25rem;
71
+ padding: var(--glide-core-spacing-base-md);
72
72
 
73
73
  &.small {
74
74
  inline-size: 22.5rem;
@@ -112,7 +112,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
112
112
  .header-actions {
113
113
  align-items: center;
114
114
  display: flex;
115
- gap: 0.625rem;
115
+ gap: var(--glide-core-spacing-base-xs);
116
116
 
117
117
  ::slotted(*) {
118
118
  /*
@@ -160,10 +160,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
160
160
  }
161
161
 
162
162
  .body {
163
- line-height: 1;
164
163
  overflow: auto;
165
- padding-block: 1rem;
166
- padding-block-end: 0.625rem;
164
+ padding-block: var(--glide-core-spacing-base-xs);
165
+ padding-block-end: var(--glide-core-spacing-base-md);
167
166
 
168
167
  &:focus {
169
168
  outline: none;
@@ -114,6 +114,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
114
114
  max-inline-size: 23.75rem;
115
115
  min-block-size: 2rem;
116
116
  min-inline-size: 5rem;
117
- padding: var(--glide-core-spacing-base-sm);
117
+ padding: var(--glide-core-spacing-base-xs);
118
118
  }
119
119
  `];
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,d=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(d=(o<3?r(d):o>3?r(t,i,d):r(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let RadioGroupRadio=class RadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i=!1,this.#a=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,this.ariaLabel=e.toString()}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e&&!this.disabled?"true":"false",e&&t!==e&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString(),this.ariaChecked=this.checked&&!e?"true":"false",this.dispatchEvent(new CustomEvent("private-disabled-change",{bubbles:!0}))}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get privateRequired(){return this.#a}set privateRequired(e){this.#a=e,this.ariaRequired=e.toString()}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked&&!this.disabled&&this===this.lastCheckedRadio?"true":"false",this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaRequired=this.privateRequired.toString(),this.role="radio",this.label&&(this.ariaLabel=this.label)}get lastCheckedRadio(){const e=this.parentElement?.querySelectorAll("glide-core-radio-group-radio");if(e&&e.length>0)return[...e].findLast((e=>e.checked))}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked&&this===this.lastCheckedRadio&&!this.disabled,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#o}</div>`}#e;#t;#o;#i;#a;#r};__decorate([property({reflect:!0}),required],RadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],RadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],RadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],RadioGroupRadio.prototype,"version",void 0),__decorate([state()],RadioGroupRadio.prototype,"lastCheckedRadio",null),RadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio"),final],RadioGroupRadio);export default RadioGroupRadio;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let RadioGroupRadio=class RadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i=!1,this.#a=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,this.ariaLabel=e.toString()}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e&&!this.disabled?"true":"false",e&&t!==e&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString(),this.ariaChecked=this.checked&&!e?"true":"false",this.dispatchEvent(new CustomEvent("private-disabled-change",{bubbles:!0}))}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get privateRequired(){return this.#a}set privateRequired(e){this.#a=e,this.ariaRequired=e.toString()}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked&&!this.disabled&&this===this.lastCheckedRadio?"true":"false",this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaRequired=this.privateRequired.toString(),this.role="radio",this.label&&(this.ariaLabel=this.label)}get lastCheckedRadio(){const e=this.parentElement?.querySelectorAll("glide-core-radio-group-radio");if(e&&e.length>0)return[...e].findLast((e=>e.checked))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}" data-test="component"><div class="${classMap({circle:!0,checked:this.checked&&this===this.lastCheckedRadio&&!this.disabled,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#o}</div>`}#e;#t;#o;#i;#a;#r};__decorate([property({reflect:!0}),required],RadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],RadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({type:Boolean,reflect:!0})],RadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],RadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],RadioGroupRadio.prototype,"version",void 0),__decorate([state()],RadioGroupRadio.prototype,"lastCheckedRadio",null),RadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio"),final],RadioGroupRadio);export default RadioGroupRadio;
@@ -48,7 +48,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
48
48
  border-radius: 50%;
49
49
  box-sizing: border-box;
50
50
  inline-size: 1rem;
51
- margin-inline-end: 0.625rem;
51
+ margin-inline-end: var(--glide-core-spacing-base-xs);
52
52
  min-inline-size: 1rem;
53
53
  position: relative;
54
54
  transition:
@@ -99,6 +99,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
99
99
  }
100
100
  }
101
101
  }
102
+
103
+ &.disabled {
104
+ color: var(--glide-core-color-interactive-text-default--disabled);
105
+ }
102
106
  }
103
107
 
104
108
  .label {
@@ -13,7 +13,7 @@ import{css}from"lit";export default[css`
13
13
 
14
14
  &.invalid {
15
15
  border: 1px solid var(--glide-core-color-advisory-stroke-error-primary);
16
- border-radius: var(--glide-core-rounding-base-radius-sm);
16
+ border-radius: var(--glide-core-rounding-base-radius-xxs);
17
17
  color: var(--glide-core-color-advisory-stroke-error-primary);
18
18
  margin-block-end: -0.0625rem;
19
19
  margin-inline-start: -0.0625rem;
@@ -14,9 +14,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
14
14
  font-family: var(--glide-core-typography-family-primary);
15
15
  font-size: var(--glide-core-typography-size-body-large);
16
16
  font-weight: var(--glide-core-typography-weight-bold);
17
- gap: 0.625rem;
17
+ gap: var(--glide-core-spacing-base-xs);
18
18
  justify-content: center;
19
- line-height: 1.5rem;
20
19
  padding-block: var(--glide-core-spacing-base-xs);
21
20
  padding-inline: var(--glide-core-spacing-base-md);
22
21
  position: relative;
@@ -39,7 +39,7 @@ import{css,unsafeCSS}from"lit";export default e=>css`
39
39
  );
40
40
  background-size: 400% 100%;
41
41
  block-size: 1rem;
42
- border-radius: var(--glide-core-rounding-base-radius-xs);
42
+ border-radius: var(--glide-core-rounding-base-radius-xxs);
43
43
  }
44
44
  }
45
45
  `;
@@ -1 +1 @@
1
- :root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-text-onsolid-tertiary: #212121;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-advisory-surface-info-container: #e5f1fc;--glide-core-color-advisory-surface-info-container-light: #f2f8fe;--glide-core-color-advisory-surface-info-solid: #0073e6;--glide-core-color-advisory-surface-info-solid--hover: #0051a1;--glide-core-color-advisory-surface-attention-container: #fffbeb;--glide-core-color-advisory-surface-attention-container-light: #fffcf2;--glide-core-color-advisory-surface-attention-solid: #ffcc00;--glide-core-color-advisory-surface-attention-solid--hover: #b28f00;--glide-core-color-advisory-surface-warning-container: #fff6e9;--glide-core-color-advisory-surface-warning-container-light: #fffaf2;--glide-core-color-advisory-surface-warning-solid: #ff9500;--glide-core-color-advisory-surface-warning-solid--hover: #b26800;--glide-core-color-advisory-surface-vital-container: #fff0ef;--glide-core-color-advisory-surface-vital-light: #fdf4f4;--glide-core-color-advisory-surface-vital-solid: #db2d24;--glide-core-color-advisory-surface-vital-solid--hover: #992019;--glide-core-color-advisory-surface-success-container: #f1fdf4;--glide-core-color-advisory-surface-success-container-light: #f5fcf7;--glide-core-color-advisory-surface-success-solid: #34c759;--glide-core-color-advisory-surface-success-solid--hover: #248b3e;--glide-core-color-advisory-surface-error-container: #fff0ef;--glide-core-color-advisory-surface-error-container-light: #fdf4f4;--glide-core-color-advisory-surface-error-solid: #db2d24;--glide-core-color-advisory-surface-error-solid--hover: #992019;--glide-core-color-advisory-stroke-info-primary: #0073e6;--glide-core-color-advisory-stroke-info-secondary: #99c7f5;--glide-core-color-advisory-stroke-attention-primary: #ffcc00;--glide-core-color-advisory-stroke-attention-secondary: #ffcc00;--glide-core-color-advisory-stroke-warning-primary: #ff9500;--glide-core-color-advisory-stroke-warning-secondary: #ffbf66;--glide-core-color-advisory-stroke-vital-primary: #db2d24;--glide-core-color-advisory-stroke-vital-secondary: #f1aba7;--glide-core-color-advisory-stroke-success-primary: #34c759;--glide-core-color-advisory-stroke-success-secondary: #d6f4de;--glide-core-color-advisory-stroke-error-primary: #db2d24;--glide-core-color-advisory-stroke-error-secondary: #f8d5d3;--glide-core-color-advisory-text-info: #0073e6;--glide-core-color-advisory-text-info-container: #212121;--glide-core-color-advisory-text-attention: #ffcc00;--glide-core-color-advisory-text-attention-container: #212121;--glide-core-color-advisory-text-warning: #ff9500;--glide-core-color-advisory-text-warning-container: #212121;--glide-core-color-advisory-text-vital: #db2d24;--glide-core-color-advisory-text-vital-container: #212121;--glide-core-color-advisory-text-success: #34c759;--glide-core-color-advisory-text-success-container: #212121;--glide-core-color-advisory-text-error: #db2d24;--glide-core-color-advisory-text-error-container: #212121;--glide-core-color-advisory-icon-info: #0073e6;--glide-core-color-advisory-icon-warning: #ff9500;--glide-core-color-advisory-icon-attention: #ffcc00;--glide-core-color-advisory-icon-vital: #db2d24;--glide-core-color-advisory-icon-success: #34c759;--glide-core-color-advisory-icon-error: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-surface-low-solid: #c9c9c9;--glide-core-color-severity-surface-unknown: #6d6d6d;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-text-onsolid-tertiary: #202020;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #434343;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-advisory-surface-info-container: #171f26;--glide-core-color-advisory-surface-info-container-light: #192939;--glide-core-color-advisory-surface-info-solid: #2d7dcc;--glide-core-color-advisory-surface-info-solid--hover: #6ca4db;--glide-core-color-advisory-surface-attention-container: #2a271a;--glide-core-color-advisory-surface-attention-container-light: #1f1d17;--glide-core-color-advisory-surface-attention-solid: #f0cf4f;--glide-core-color-advisory-surface-attention-solid--hover: #f5dd84;--glide-core-color-advisory-surface-warning-container: #2c241a;--glide-core-color-advisory-surface-warning-container-light: #201c17;--glide-core-color-advisory-surface-warning-solid: #ffb64f;--glide-core-color-advisory-surface-warning-solid--hover: #ffcc84;--glide-core-color-advisory-surface-vital-container: #291d1c;--glide-core-color-advisory-surface-vital-light: #1e1818;--glide-core-color-advisory-surface-vital-solid: #e36963;--glide-core-color-advisory-surface-vital-solid--hover: #eb9692;--glide-core-color-advisory-surface-success-container: #1c261e;--glide-core-color-advisory-surface-success-container-light: #181d19;--glide-core-color-advisory-surface-success-solid: #61c479;--glide-core-color-advisory-surface-success-solid--hover: #90d6a1;--glide-core-color-advisory-surface-error-container: #291d1c;--glide-core-color-advisory-surface-error-container-light: #1e1818;--glide-core-color-advisory-surface-error-solid: #e36963;--glide-core-color-advisory-surface-error-solid--hover: #eb9692;--glide-core-color-advisory-stroke-info-primary: #2d7dcc;--glide-core-color-advisory-stroke-info-secondary: #2d7dcc;--glide-core-color-advisory-stroke-attention-primary: #f0cf4f;--glide-core-color-advisory-stroke-attention-secondary: #f0cf4f;--glide-core-color-advisory-stroke-warning-primary: #ffb64f;--glide-core-color-advisory-stroke-warning-secondary: #a17537;--glide-core-color-advisory-stroke-vital-primary: #e36963;--glide-core-color-advisory-stroke-vital-secondary: #e36963;--glide-core-color-advisory-stroke-success-primary: #61c479;--glide-core-color-advisory-stroke-success-secondary: #233728;--glide-core-color-advisory-stroke-error-primary: #e36963;--glide-core-color-advisory-stroke-error-secondary: #3d2524;--glide-core-color-advisory-text-info: #2d7dcc;--glide-core-color-advisory-text-info-container: #dcdcdc;--glide-core-color-advisory-text-attention: #f0cf4f;--glide-core-color-advisory-text-attention-container: #dcdcdc;--glide-core-color-advisory-text-warning: #ffb64f;--glide-core-color-advisory-text-warning-container: #dcdcdc;--glide-core-color-advisory-text-vital: #e36963;--glide-core-color-advisory-text-vital-container: #dcdcdc;--glide-core-color-advisory-text-success: #61c479;--glide-core-color-advisory-text-success-container: #dcdcdc;--glide-core-color-advisory-text-error: #e36963;--glide-core-color-advisory-text-error-container: #dcdcdc;--glide-core-color-advisory-icon-info: #2d7dcc;--glide-core-color-advisory-icon-warning: #ffb64f;--glide-core-color-advisory-icon-attention: #f0cf4f;--glide-core-color-advisory-icon-vital: #e36963;--glide-core-color-advisory-icon-success: #61c479;--glide-core-color-advisory-icon-error: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-surface-low-solid: #434343;--glide-core-color-severity-surface-unknown: #a1a1a1;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #265e95;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #202020;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem;--glide-core-spacing-indent-level-5: 7rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
1
+ :root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-text-onsolid-tertiary: #212121;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-advisory-surface-info-container: #e5f1fc;--glide-core-color-advisory-surface-info-container-light: #f2f8fe;--glide-core-color-advisory-surface-info-solid: #0073e6;--glide-core-color-advisory-surface-info-solid--hover: #0051a1;--glide-core-color-advisory-surface-attention-container: #fffbeb;--glide-core-color-advisory-surface-attention-container-light: #fffcf2;--glide-core-color-advisory-surface-attention-solid: #ffcc00;--glide-core-color-advisory-surface-attention-solid--hover: #b28f00;--glide-core-color-advisory-surface-warning-container: #fff6e9;--glide-core-color-advisory-surface-warning-container-light: #fffaf2;--glide-core-color-advisory-surface-warning-solid: #ff9500;--glide-core-color-advisory-surface-warning-solid--hover: #b26800;--glide-core-color-advisory-surface-vital-container: #fff0ef;--glide-core-color-advisory-surface-vital-light: #fdf4f4;--glide-core-color-advisory-surface-vital-solid: #db2d24;--glide-core-color-advisory-surface-vital-solid--hover: #992019;--glide-core-color-advisory-surface-success-container: #f1fdf4;--glide-core-color-advisory-surface-success-container-light: #f5fcf7;--glide-core-color-advisory-surface-success-solid: #34c759;--glide-core-color-advisory-surface-success-solid--hover: #248b3e;--glide-core-color-advisory-surface-error-container: #fff0ef;--glide-core-color-advisory-surface-error-container-light: #fdf4f4;--glide-core-color-advisory-surface-error-solid: #db2d24;--glide-core-color-advisory-surface-error-solid--hover: #992019;--glide-core-color-advisory-stroke-info-primary: #0073e6;--glide-core-color-advisory-stroke-info-secondary: #99c7f5;--glide-core-color-advisory-stroke-attention-primary: #ffcc00;--glide-core-color-advisory-stroke-attention-secondary: #ffcc00;--glide-core-color-advisory-stroke-warning-primary: #ff9500;--glide-core-color-advisory-stroke-warning-secondary: #ffbf66;--glide-core-color-advisory-stroke-vital-primary: #db2d24;--glide-core-color-advisory-stroke-vital-secondary: #f1aba7;--glide-core-color-advisory-stroke-success-primary: #34c759;--glide-core-color-advisory-stroke-success-secondary: #d6f4de;--glide-core-color-advisory-stroke-error-primary: #db2d24;--glide-core-color-advisory-stroke-error-secondary: #f8d5d3;--glide-core-color-advisory-text-info: #0073e6;--glide-core-color-advisory-text-info-container: #212121;--glide-core-color-advisory-text-attention: #ffcc00;--glide-core-color-advisory-text-attention-container: #212121;--glide-core-color-advisory-text-warning: #ff9500;--glide-core-color-advisory-text-warning-container: #212121;--glide-core-color-advisory-text-vital: #db2d24;--glide-core-color-advisory-text-vital-container: #212121;--glide-core-color-advisory-text-success: #34c759;--glide-core-color-advisory-text-success-container: #212121;--glide-core-color-advisory-text-error: #db2d24;--glide-core-color-advisory-text-error-container: #212121;--glide-core-color-advisory-icon-info: #0073e6;--glide-core-color-advisory-icon-warning: #ff9500;--glide-core-color-advisory-icon-attention: #ffcc00;--glide-core-color-advisory-icon-vital: #db2d24;--glide-core-color-advisory-icon-success: #34c759;--glide-core-color-advisory-icon-error: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-surface-low-solid: #c9c9c9;--glide-core-color-severity-surface-unknown: #6d6d6d;--glide-core-color-severity-surface-other: #a6b7c0;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-text-onsolid-tertiary: #202020;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #434343;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-advisory-surface-info-container: #171f26;--glide-core-color-advisory-surface-info-container-light: #192939;--glide-core-color-advisory-surface-info-solid: #2d7dcc;--glide-core-color-advisory-surface-info-solid--hover: #6ca4db;--glide-core-color-advisory-surface-attention-container: #2a271a;--glide-core-color-advisory-surface-attention-container-light: #1f1d17;--glide-core-color-advisory-surface-attention-solid: #f0cf4f;--glide-core-color-advisory-surface-attention-solid--hover: #f5dd84;--glide-core-color-advisory-surface-warning-container: #2c241a;--glide-core-color-advisory-surface-warning-container-light: #201c17;--glide-core-color-advisory-surface-warning-solid: #ffb64f;--glide-core-color-advisory-surface-warning-solid--hover: #ffcc84;--glide-core-color-advisory-surface-vital-container: #291d1c;--glide-core-color-advisory-surface-vital-light: #1e1818;--glide-core-color-advisory-surface-vital-solid: #e36963;--glide-core-color-advisory-surface-vital-solid--hover: #eb9692;--glide-core-color-advisory-surface-success-container: #1c261e;--glide-core-color-advisory-surface-success-container-light: #181d19;--glide-core-color-advisory-surface-success-solid: #61c479;--glide-core-color-advisory-surface-success-solid--hover: #90d6a1;--glide-core-color-advisory-surface-error-container: #291d1c;--glide-core-color-advisory-surface-error-container-light: #1e1818;--glide-core-color-advisory-surface-error-solid: #e36963;--glide-core-color-advisory-surface-error-solid--hover: #eb9692;--glide-core-color-advisory-stroke-info-primary: #2d7dcc;--glide-core-color-advisory-stroke-info-secondary: #2d7dcc;--glide-core-color-advisory-stroke-attention-primary: #f0cf4f;--glide-core-color-advisory-stroke-attention-secondary: #f0cf4f;--glide-core-color-advisory-stroke-warning-primary: #ffb64f;--glide-core-color-advisory-stroke-warning-secondary: #a17537;--glide-core-color-advisory-stroke-vital-primary: #e36963;--glide-core-color-advisory-stroke-vital-secondary: #e36963;--glide-core-color-advisory-stroke-success-primary: #61c479;--glide-core-color-advisory-stroke-success-secondary: #233728;--glide-core-color-advisory-stroke-error-primary: #e36963;--glide-core-color-advisory-stroke-error-secondary: #3d2524;--glide-core-color-advisory-text-info: #2d7dcc;--glide-core-color-advisory-text-info-container: #dcdcdc;--glide-core-color-advisory-text-attention: #f0cf4f;--glide-core-color-advisory-text-attention-container: #dcdcdc;--glide-core-color-advisory-text-warning: #ffb64f;--glide-core-color-advisory-text-warning-container: #dcdcdc;--glide-core-color-advisory-text-vital: #e36963;--glide-core-color-advisory-text-vital-container: #dcdcdc;--glide-core-color-advisory-text-success: #61c479;--glide-core-color-advisory-text-success-container: #dcdcdc;--glide-core-color-advisory-text-error: #e36963;--glide-core-color-advisory-text-error-container: #dcdcdc;--glide-core-color-advisory-icon-info: #2d7dcc;--glide-core-color-advisory-icon-warning: #ffb64f;--glide-core-color-advisory-icon-attention: #f0cf4f;--glide-core-color-advisory-icon-vital: #e36963;--glide-core-color-advisory-icon-success: #61c479;--glide-core-color-advisory-icon-error: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-surface-low-solid: #434343;--glide-core-color-severity-surface-unknown: #a1a1a1;--glide-core-color-severity-surface-other: #a6b7c0;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #b8b8b8;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #265e95;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;--glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;--glide-core-private-color-slider-and-scrollbar-surface-handle: #202020;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-animation-swoop: cubic-bezier(.5, 0, 0, 1);--glide-core-animation-swoop-in: cubic-bezier(.05, .5, .15, 1);--glide-core-animation-swoop-out: cubic-bezier(.45, .1, .9, .5);--glide-core-animation-linear: cubic-bezier(0, 0, 1, 1);--glide-core-animation-bounce: cubic-bezier(0, .4, 0, 1.4);--glide-core-animation-smooth: cubic-bezier(.8, .05, .25, .95)}:root{--glide-core-duration-fast-01: 40ms;--glide-core-duration-fast-02: 75ms;--glide-core-duration-moderate-01: .15s;--glide-core-duration-moderate-02: .25s;--glide-core-duration-slow-01: .4s;--glide-core-duration-slow-02: .9s}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xxs: .25rem;--glide-core-rounding-base-radius-xs: .375rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem;--glide-core-spacing-indent-level-5: 7rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
@@ -22,7 +22,6 @@ export default class TabGroup extends LitElement {
22
22
  static shadowRootOptions: ShadowRootInit;
23
23
  static styles: import("lit").CSSResult[];
24
24
  readonly version: string;
25
- firstUpdated(): void;
26
25
  render(): import("lit").TemplateResult<1>;
27
26
  private isDisableOverflowEndButton;
28
27
  private isDisableOverflowStartButton;
package/dist/tab.group.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,s,o){var a,i=arguments.length,l=i<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,o);else for(var n=t.length-1;n>=0;n--)(a=t[n])&&(l=(i<3?a(l):i>3?a(e,s,l):a(e,s))||l);return i>3&&l&&Object.defineProperty(e,s,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import Tab from"./tab.js";import TabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import onResize from"./library/on-resize.js";import styles from"./tab.group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let TabGroup=class TabGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.isDisableOverflowEndButton=!1,this.isDisableOverflowStartButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=new LocalizeController(this),this.#s=createRef(),this.#o=createRef(),this.#a=null,this.#i=null,this.#l=createRef(),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){const t=this.#r.find((t=>t.selected))??this.#r[0];t&&(this.#i=t)}render(){return html`<div class="component" @click="${this.#c}" @keydown="${this.#d}" ${ref(this.#t)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("previousTab")}" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" data-test="overflow-start-button" tabindex="-1" ?disabled="${this.isDisableOverflowStartButton}" @click="${this.#b.bind(this,"start")}" ${ref(this.#o)}>${chevronIcon}</button>`))}<div class="tab-group" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#h}" @scroll="${this.#f}" ${onResize(this.#u.bind(this))} ${ref(this.#n)}><slot name="nav" @private-selected="${this.#m}" @slotchange="${this.#p}" ${assertSlot([Tab])}></slot><div class="${classMap({"selected-tab-indicator":!0,animated:this.hasUpdated})}" data-test="selected-tab-indicator" ${ref(this.#l)}></div></div>${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("nextTab")}" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" data-test="overflow-end-button" tabindex="-1" @click="${this.#b.bind(this,"end")}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#s)}>${chevronIcon}</button>`))}</div><slot @slotchange="${this.#v}" ${assertSlot([TabPanel])}></slot></div>`}#t;#e;#s;#o;#a;#i;#l;#n;get#E(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#r(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#c(t){const e=t.target.closest("glide-core-tab");e&&e instanceof Tab&&!e.disabled&&this.#r.includes(e)&&(this.#i=e,this.#T(),this.#w(),e.selected=!0)}#d(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof Tab&&!e.disabled&&(this.#i=e,this.#T(),this.#w(),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#r.find((t=>t.matches(":focus")));if(e instanceof Tab){let s=this.#r.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.#r.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#r.length-1),s>this.#r.length-1&&(s=0),this.#r[s]?.focus({preventScroll:!1});for(const[,t]of this.#r.entries())t.tabIndex=this.#r[s]===t?0:-1;this.#f(),t.preventDefault()}}}#v(){this.#R()}#p(){this.#R(),this.#T(),this.#w(),this.#f()}#b(t){const e="end"===t?1:-1;this.#n.value&&this.#n.value.scrollBy({left:e*this.#n.value.clientWidth*.5,top:0})}#h(){for(const[,t]of this.#r.entries())t.tabIndex=t===this.#i?0:-1}#u(){this.#a&&clearTimeout(this.#a),this.#w(),this.#a=setTimeout((()=>{this.#f()}))}#m(t){t.target instanceof Tab&&t.target.selected&&(this.#i=t.target,this.#T(),this.#w(),t.target.privateSelect())}#R(){for(const t of this.#r){const e=this.#E.filter((e=>e.name===t.panel))?.at(0);e?.id&&(t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id))}}#f(){this.#n.value&&(this.isShowOverflowButtons=this.#n.value.scrollWidth>this.#n.value.clientWidth),this.#n.value&&(this.isDisableOverflowStartButton=this.#n.value.scrollLeft<=0),this.#n.value&&(this.isDisableOverflowEndButton=this.#n.value.scrollLeft+this.#n.value.clientWidth>=this.#n.value.scrollWidth)}#T(){for(const t of this.#r)t.selected=this.#i===t,t.tabIndex=this.#i===t?0:-1;for(const t of this.#E){const e=this.#i?.getAttribute("panel"),s=t.getAttribute("name");t.privateIsSelected=s===e,t.tabIndex=s===e?0:-1}}#w(){if(this.#i&&this.#r.length>0&&this.#l.value){const t=Number.parseInt(window.getComputedStyle(this.#i).getPropertyValue("padding-inline-start")),e=this.#i===this.#r.at(0)?t:this.#i.offsetLeft-this.#r.at(0).offsetLeft;this.#l.value.style.setProperty("--private-selected-tab-indicator-translate",`${e}px`);const s=this.#i===this.#r.at(0)||this.#i===this.#r.at(-1)?t:0,{width:o}=this.#i.getBoundingClientRect();this.#l.value.style.setProperty("--private-selected-tab-indicator-width",o-s+"px")}}};__decorate([property({reflect:!0})],TabGroup.prototype,"version",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],TabGroup.prototype,"isShowOverflowButtons",void 0),TabGroup=__decorate([customElement("glide-core-tab-group"),final],TabGroup);export default TabGroup;
1
+ var __decorate=this&&this.__decorate||function(t,e,s,a){var o,i=arguments.length,l=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,s):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,a);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(l=(i<3?o(l):i>3?o(e,s,l):o(e,s))||l);return i>3&&l&&Object.defineProperty(e,s,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import Tab from"./tab.js";import TabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import onResize from"./library/on-resize.js";import styles from"./tab.group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let TabGroup=class TabGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.isDisableOverflowEndButton=!1,this.isDisableOverflowStartButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=new LocalizeController(this),this.#s=createRef(),this.#a=createRef(),this.#o=null,this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="component" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#t)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("previousTab")}" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" data-test="overflow-start-button" tabindex="-1" ?disabled="${this.isDisableOverflowStartButton}" @click="${this.#c.bind(this,"start")}" ${ref(this.#a)}>${chevronIcon}</button>`))}<div class="tab-group" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#d}" @scroll="${this.#b}" ${onResize(this.#h.bind(this))} ${ref(this.#l)}><slot name="nav" @private-selected="${this.#f}" @slotchange="${this.#m}" ${assertSlot([Tab])}></slot><div class="${classMap({"selected-tab-indicator":!0,animated:this.hasUpdated})}" data-test="selected-tab-indicator" ${ref(this.#i)}></div></div>${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("nextTab")}" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" data-test="overflow-end-button" tabindex="-1" @click="${this.#c.bind(this,"end")}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#s)}>${chevronIcon}</button>`))}</div><slot @slotchange="${this.#u}" ${assertSlot([TabPanel])}></slot></div>`}#t;#e;#s;#a;#o;#i;#l;get#p(){return this.#v.at(0)}get#E(){return this.#v.findLast((({selected:t})=>t))}get#T(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#v(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#n(t){const e=t.target.closest("glide-core-tab");e instanceof Tab&&!e.disabled&&this.#v.includes(e)&&(e.selected=!0)}#r(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e instanceof Tab&&!e.disabled&&(e.selected=!0,t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#v.find((t=>t.matches(":focus")));if(e instanceof Tab){let s=this.#v.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.#v.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#v.length-1),s>this.#v.length-1&&(s=0),this.#v[s]?.focus({preventScroll:!1});for(const[,t]of this.#v.entries())t.tabIndex=this.#v[s]===t?0:-1;this.#b(),t.preventDefault()}}}#u(){this.#w()}#m(){if(this.#E){this.#E.tabIndex=0;for(const t of this.#v)t.selected&&t!==this.#E&&(t.selected=!1,t.tabIndex=-1)}else this.#p&&(this.#p.selected=!0,this.#p.tabIndex=0);for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1;this.#w(),this.#b()}#c(t){const e="end"===t?1:-1;this.#l.value&&this.#l.value.scrollBy({left:e*this.#l.value.clientWidth*.5,top:0})}#d(){for(const[,t]of this.#v.entries())t.tabIndex=t===this.#E?0:-1}#h(){this.#o&&clearTimeout(this.#o),this.#S(),this.#o=setTimeout((()=>{this.#b()}))}#f(t){if(t.target instanceof Tab&&t.target.selected){t.target.privateSelect(),t.target.tabIndex=0;for(const e of this.#v)e!==t.target&&(e.selected=!1,e.tabIndex=-1)}else this.#p&&!this.#E&&(this.#p.privateSelect(),this.#p.tabIndex=0);for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1;this.#S()}#w(){for(const t of this.#v){const e=this.#T.filter((e=>e.name===t.panel))?.at(0);e?.id&&(t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id))}}#b(){this.#l.value&&(this.isShowOverflowButtons=this.#l.value.scrollWidth>this.#l.value.clientWidth,this.isDisableOverflowStartButton=this.#l.value.scrollLeft<=0,this.isDisableOverflowEndButton=Math.round(this.#l.value.scrollLeft)+this.#l.value.clientWidth>=this.#l.value.scrollWidth)}#S(){if(this.#E&&this.#v.length>0&&this.#i.value){const t=Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-start")),e=this.#E===this.#v.at(0)?t:this.#E.offsetLeft-this.#v.at(0).offsetLeft;this.#i.value.style.setProperty("--private-selected-tab-indicator-translate",`${e}px`);const s=this.#E===this.#v.at(0)||this.#E===this.#v.at(-1)?t:0,{width:a}=this.#E.getBoundingClientRect();this.#i.value.style.setProperty("--private-selected-tab-indicator-width",a-s+"px")}}};__decorate([property({reflect:!0})],TabGroup.prototype,"version",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],TabGroup.prototype,"isShowOverflowButtons",void 0),TabGroup=__decorate([customElement("glide-core-tab-group"),final],TabGroup);export default TabGroup;
@@ -12,6 +12,8 @@ import{css}from"lit";export default[css`
12
12
  }
13
13
 
14
14
  .component {
15
+ --private-transition-duration: 250ms;
16
+
15
17
  display: contents;
16
18
  }
17
19
 
@@ -52,9 +54,7 @@ import{css}from"lit";export default[css`
52
54
 
53
55
  &.animated {
54
56
  @media (prefers-reduced-motion: no-preference) {
55
- transition:
56
- inline-size 250ms,
57
- translate 250ms;
57
+ transition: translate var(--private-transition-duration);
58
58
  }
59
59
  }
60
60
  }
package/dist/tab.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(i<3?s(a):i>3?s(t,o,a):s(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let Tab=class Tab extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.version=packageJson.version,this.id=uniqueId(),this.role="tab",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#e}set selected(e){const t=e!==this.#e;this.#e=e,e&&t&&this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}" data-test="component"><div class="container"><slot name="icon"></slot><slot></slot></div></div>`}updated(e){e.has("selected")&&this.setAttribute("aria-selected",this.selected?"true":"false"),e.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#e};__decorate([property({reflect:!0}),required],Tab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"selected",null),__decorate([property({reflect:!0})],Tab.prototype,"version",void 0),__decorate([property({reflect:!0})],Tab.prototype,"id",void 0),__decorate([property({reflect:!0})],Tab.prototype,"role",void 0),Tab=__decorate([customElement("glide-core-tab"),final],Tab);export default Tab;
1
+ var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,a=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(i<3?r(a):i>3?r(t,o,a):r(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let Tab=class Tab extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.version=packageJson.version,this.id=uniqueId(),this.role="tab",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#e}set selected(e){const t=e!==this.#e;this.#e=e,t&&this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled,selected:this.selected})}" data-test="component"><div class="container"><slot name="icon"></slot><slot></slot></div></div>`}updated(e){e.has("selected")&&this.setAttribute("aria-selected",this.selected?"true":"false"),e.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#e};__decorate([property({reflect:!0}),required],Tab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"selected",null),__decorate([property({reflect:!0})],Tab.prototype,"version",void 0),__decorate([property({reflect:!0})],Tab.prototype,"id",void 0),__decorate([property({reflect:!0})],Tab.prototype,"role",void 0),Tab=__decorate([customElement("glide-core-tab"),final],Tab);export default Tab;
@@ -17,6 +17,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
17
17
  gap: 0.4375rem;
18
18
  justify-content: center;
19
19
  padding-block: 0.4375rem;
20
+ transition: font-weight var(--private-transition-duration) ease-in-out;
20
21
  user-select: none;
21
22
 
22
23
  &:hover {
@@ -28,6 +29,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
28
29
  color: var(--glide-core-color-interactive-text-default--disabled);
29
30
  pointer-events: none;
30
31
  }
32
+
33
+ &.selected {
34
+ font-weight: var(--glide-core-typography-weight-bold);
35
+ }
31
36
  }
32
37
 
33
38
  .container {
@@ -34,6 +34,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
34
34
  align-items: center;
35
35
  border-radius: var(--glide-core-rounding-base-radius-md);
36
36
  box-shadow: var(--glide-core-effect-floating);
37
+ box-sizing: border-box;
37
38
  color: var(--glide-core-color-static-text-default);
38
39
  column-gap: var(--glide-core-spacing-base-xs);
39
40
  display: grid;
@@ -41,7 +42,7 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
41
42
  font-size: var(--glide-core-typography-size-body-default);
42
43
  font-weight: var(--glide-core-typography-weight-regular);
43
44
  grid-template-columns: auto minmax(0, 1fr);
44
- inline-size: 21.125rem;
45
+ inline-size: 24.25rem;
45
46
  padding: var(--glide-core-spacing-base-sm);
46
47
  transform: translateX(calc(100% + var(--private-toasts-padding)));
47
48
 
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0,reversed:"left"===this.placement})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,reversed:"left"===this.placement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#t};__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#t};__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;
@@ -1,6 +1,5 @@
1
1
  import{css}from"lit";export default[css`
2
2
  .component {
3
- align-items: center;
4
3
  background-color: var(
5
4
  --glide-core-private-color-tooltip-surface-container
6
5
  );
@@ -11,12 +10,8 @@ import{css}from"lit";export default[css`
11
10
  font-weight: var(--glide-core-typography-weight-regular);
12
11
  inline-size: max-content;
13
12
  inset-block-start: 50%;
14
- padding: var(--glide-core-spacing-base-xs)
15
- var(--glide-core-spacing-base-sm);
16
-
17
- &.reversed {
18
- flex-direction: row-reverse;
19
- }
13
+ padding: var(--glide-core-spacing-base-xxs)
14
+ var(--glide-core-spacing-base-xs);
20
15
  }
21
16
 
22
17
  .label {
@@ -31,19 +26,12 @@ import{css}from"lit";export default[css`
31
26
  .shortcut {
32
27
  color: var(--glide-core-private-color-tooltip-text-shortcut);
33
28
  display: none;
29
+ margin-inline-start: var(--glide-core-spacing-base-xs);
34
30
  white-space: nowrap;
35
31
 
36
32
  &.visible {
37
33
  display: inline-block;
38
34
  }
39
-
40
- &.reversed {
41
- margin-inline-end: var(--glide-core-spacing-base-xs);
42
- }
43
-
44
- &:not(.reversed) {
45
- margin-inline-start: var(--glide-core-spacing-base-xs);
46
- }
47
35
  }
48
36
 
49
37
  kbd {
package/dist/tooltip.js CHANGED
@@ -1 +1 @@
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 a=e.length-1;a>=0;a--)(r=e[a])&&(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{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 Tooltip=class Tooltip 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.#s=createRef(),this.#l=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.#c();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.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.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=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.#c(),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.#s.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.#l.value&&(this.#l.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.#s)}></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.#l)}><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;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.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.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.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.#l.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.#l.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],Tooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;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>`};
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 a=e.length-1;a>=0;a--)(r=e[a])&&(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{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 Tooltip=class Tooltip 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.#s=createRef(),this.#l=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.#c();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.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.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=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.#c(),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.#s.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.#l.value&&(this.#l.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.#u}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#f}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></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.#l)}><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})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#u(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#f(){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.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.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.#l.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.#l.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],Tooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crowdstrike/glide-core",
3
- "version": "0.28.1",
3
+ "version": "0.29.0",
4
4
  "description": "A Web Component design system",
5
5
  "author": "CrowdStrike UX Team",
6
6
  "license": "Apache-2.0",