@crowdstrike/glide-core 0.24.2 → 0.24.4

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 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @attr {string} label
8
+ * @attr {string} label - For screenreaders
9
9
  * @attr {'horizontal'|'vertical'} [orientation='horizontal']
10
10
  * @attr {'icon-only'} [variant]
11
11
  *
@@ -18,6 +18,9 @@ export default class GlideCoreButtonGroup extends LitElement {
18
18
  #private;
19
19
  static shadowRootOptions: ShadowRootInit;
20
20
  static styles: import("lit").CSSResult[];
21
+ /**
22
+ * For screenreaders
23
+ **/
21
24
  label?: string;
22
25
  /**
23
26
  * @default undefined
@@ -63,7 +63,7 @@ export default class GlideCoreCheckboxGroup extends LitElement implements FormCo
63
63
  label?: string;
64
64
  name: string;
65
65
  orientation: "horizontal";
66
- privateSplit?: 'left' | 'middle';
66
+ privateSplit?: 'left' | 'middle' | 'right';
67
67
  /**
68
68
  * @default false
69
69
  */
@@ -82,7 +82,7 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
82
82
  privateShowLabelTooltip: boolean;
83
83
  privateDisableLabelTooltip: boolean;
84
84
  privateSize: 'large' | 'small';
85
- privateSplit?: 'left' | 'middle';
85
+ privateSplit?: 'left' | 'middle' | 'right';
86
86
  privateVariant?: 'minimal';
87
87
  required: boolean;
88
88
  summary?: string;
package/dist/drawer.d.ts CHANGED
@@ -5,7 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @attr {string} label
8
+ * @attr {string} label - For screenreaders
9
9
  * @attr {boolean} [open=false]
10
10
  * @attr {boolean} [pinned=false]
11
11
  *
@@ -22,6 +22,9 @@ export default class GlideCoreDrawer extends LitElement {
22
22
  #private;
23
23
  static shadowRootOptions: ShadowRootInit;
24
24
  static styles: import("lit").CSSResult[];
25
+ /**
26
+ * For screenreaders
27
+ **/
25
28
  label?: string;
26
29
  pinned: boolean;
27
30
  /**
@@ -96,7 +96,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
96
96
  set open(isOpen: boolean);
97
97
  orientation: 'horizontal' | 'vertical';
98
98
  placeholder?: string;
99
- privateSplit?: 'left' | 'middle';
99
+ privateSplit?: 'left' | 'middle' | 'right';
100
100
  readonly: boolean;
101
101
  selectAll: boolean;
102
102
  required: boolean;
@@ -8,6 +8,7 @@ declare global {
8
8
  }
9
9
  /**
10
10
  * @attr {string} label
11
+ * @attr {number} [count]
11
12
  * @attr {boolean} [disabled=false]
12
13
  * @attr {boolean} [editable=false]
13
14
  * @attr {boolean} [selected=false]
@@ -24,6 +25,7 @@ export default class GlideCoreDropdownOption extends LitElement {
24
25
  #private;
25
26
  static shadowRootOptions: ShadowRootInit;
26
27
  static styles: import("lit").CSSResult[];
28
+ count?: number;
27
29
  /**
28
30
  * @default false
29
31
  */
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};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{nanoid}from"nanoid";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 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";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsTooltipOpen=!1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s=createRef(),this.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e,this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.ariaSelected=!e&&this.selected?"true":"false",this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#n}set label(e){this.#n=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){this.#r=e,this.ariaSelected=!this.disabled&&e?"true":"false",this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=!this.disabled&&this.selected?"true":"false",this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#p=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#p.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#p?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}get value(){return this.#a}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#a=e}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,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" @click="${this.#c}" 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="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateIsEditActive,disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,disabled:this.disabled,editable:this.editable,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!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.#v}"><div class="label" data-test="label" slot="target" ${ref(this.#s)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#p;#o;#l;#n;#s;#r;#a;#c(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#v(e){e.stopPropagation()}#d(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"version",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"lastSelectedOption",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
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 r=e.length-1;r>=0;r--)(l=e[r])&&(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{nanoid}from"nanoid";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";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsTooltipOpen=!1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s=createRef(),this.#a=new LocalizeController(this),this.#r=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e,this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.ariaSelected=!e&&this.selected?"true":"false",this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#d}set label(e){this.#d=e,setTimeout((()=>{this.#c()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){this.#r=e,this.ariaSelected=!this.disabled&&e?"true":"false",this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=!this.disabled&&this.selected?"true":"false",this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#p=new IntersectionObserver((()=>{this.checkVisibility()&&this.#c()})),this.#p.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#p?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}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}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,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" @click="${this.#h}" 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="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#a.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#b}" @mouseout="${this.#v}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" 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,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!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.#s)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#a.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#b}" @mouseout="${this.#v}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}#e;#t;#i;#p;#o;#l;#d;#s;#a;#r;#n;#h(e){e.stopPropagation()}#v(){this.privateIsEditActive=!1}#b(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#c(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__decorate([property({reflect:!0,type:Number})],GlideCoreDropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"version",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"lastSelectedOption",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
@@ -32,7 +32,7 @@ import{css}from"lit";export default[css`
32
32
  font-weight: var(--glide-core-typography-weight-regular);
33
33
  padding-inline-start: 0.625rem;
34
34
 
35
- &:not(.editable) {
35
+ &:not(.count, .editable) {
36
36
  padding-inline-end: var(--glide-core-spacing-base-sm);
37
37
  }
38
38
  }
@@ -43,7 +43,7 @@ import{css}from"lit";export default[css`
43
43
  font-weight: var(--glide-core-typography-weight-regular);
44
44
  padding-inline-start: var(--glide-core-spacing-base-sm);
45
45
 
46
- &:not(.editable) {
46
+ &:not(.count, .editable) {
47
47
  padding-inline-end: var(--glide-core-spacing-base-xs);
48
48
  }
49
49
  }
@@ -62,7 +62,7 @@ import{css}from"lit";export default[css`
62
62
  padding-inline-start: var(--glide-core-spacing-base-sm);
63
63
  }
64
64
 
65
- &:not(.editable) {
65
+ &:not(.count, .editable) {
66
66
  &::part(private-label-and-input-and-checkbox) {
67
67
  padding-inline-end: var(--glide-core-spacing-base-sm);
68
68
  }
@@ -74,7 +74,7 @@ import{css}from"lit";export default[css`
74
74
  padding-inline-start: var(--glide-core-spacing-base-xs);
75
75
  }
76
76
 
77
- &:not(.editable) {
77
+ &:not(.count, .editable) {
78
78
  &::part(private-label-and-input-and-checkbox) {
79
79
  padding-inline-end: var(--glide-core-spacing-base-xs);
80
80
  }
@@ -164,6 +164,7 @@ import{css}from"lit";export default[css`
164
164
  border: none;
165
165
  display: flex;
166
166
  padding-block: 0;
167
+ padding-inline-end: 0;
167
168
  padding-inline-start: var(--glide-core-spacing-base-xs);
168
169
 
169
170
  &.active {
@@ -176,12 +177,14 @@ import{css}from"lit";export default[css`
176
177
  color: var(--glide-core-color-interactive-icon-default--disabled);
177
178
  }
178
179
 
179
- &.large {
180
- padding-inline-end: var(--glide-core-spacing-base-sm);
181
- }
180
+ &:not(.count) {
181
+ &.large {
182
+ padding-inline-end: var(--glide-core-spacing-base-sm);
183
+ }
182
184
 
183
- &.small {
184
- padding-inline-end: var(--glide-core-spacing-base-xs);
185
+ &.small {
186
+ padding-inline-end: var(--glide-core-spacing-base-xs);
187
+ }
185
188
  }
186
189
 
187
190
  &:focus {
@@ -194,4 +197,14 @@ import{css}from"lit";export default[css`
194
197
  display: block;
195
198
  inline-size: 0.875rem;
196
199
  }
200
+
201
+ .count-container {
202
+ font-size: var(--glide-core-typography-size-body-small);
203
+ padding-inline-end: var(--glide-core-spacing-base-sm);
204
+ padding-inline-start: var(--glide-core-spacing-base-xs);
205
+
206
+ &.disabled {
207
+ color: var(--glide-core-icon-tertiary-disabled);
208
+ }
209
+ }
197
210
  `];
@@ -5,7 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @attr {'left'|'middle'} [split='left']
8
+ * @attr {'left'|'middle'|'right'} [split='left']
9
9
  *
10
10
  * @readonly
11
11
  * @attr {string} [version]
@@ -19,8 +19,8 @@ export default class GlideCoreFormControlsLayout extends LitElement {
19
19
  /**
20
20
  * @default 'left'
21
21
  */
22
- get split(): 'left' | 'middle';
23
- set split(split: 'left' | 'middle');
22
+ get split(): 'left' | 'middle' | 'right';
23
+ set split(split: 'left' | 'middle' | 'right');
24
24
  readonly version: string;
25
25
  render(): import("lit").TemplateResult<1>;
26
26
  }
@@ -5,7 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  /**
8
- * @attr {string} label
8
+ * @attr {string} label - For screenreaders
9
9
  * @attr {string|null} [aria-controls=null]
10
10
  * @attr {'true'|'false'|null} [aria-expanded=null]
11
11
  * @attr {'true'|'false'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null} [aria-haspopup=null]
@@ -25,6 +25,9 @@ export default class GlideCoreIconButton extends LitElement {
25
25
  ariaExpanded: 'true' | 'false' | null;
26
26
  ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
27
27
  disabled: boolean;
28
+ /**
29
+ * For screenreaders
30
+ **/
28
31
  label?: string;
29
32
  variant: 'primary' | 'secondary' | 'tertiary';
30
33
  readonly version: string;
@@ -68,7 +68,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
68
68
  }
69
69
 
70
70
  &.secondary {
71
- background-color: var(--glide-core-color-interactive-surface-container);
71
+ background-color: transparent;
72
72
  color: var(
73
73
  --private-icon-color,
74
74
  var(--glide-core-color-interactive-icon-default)
package/dist/input.d.ts CHANGED
@@ -84,7 +84,7 @@ export default class GlideCoreInput extends LitElement implements FormControl {
84
84
  required: boolean;
85
85
  readonly: boolean;
86
86
  disabled: boolean;
87
- privateSplit?: 'left' | 'middle';
87
+ privateSplit?: 'left' | 'middle' | 'right';
88
88
  maxlength?: number;
89
89
  readonly version: string;
90
90
  tooltip?: string;
package/dist/label.d.ts CHANGED
@@ -12,7 +12,7 @@ declare global {
12
12
  * @attr {string} [label]
13
13
  * @attr {'horizontal'|'vertical'} [orientation='horizontal']
14
14
  * @attr {boolean} [required=false]
15
- * @attr {'left'|'middle'} [split]
15
+ * @attr {'left'|'middle'|'right'} [split]
16
16
  * @attr {string} [tooltip]
17
17
  *
18
18
  * @slot {HTMLLabelElement}
@@ -29,7 +29,7 @@ export default class GlideCoreLabel extends LitElement {
29
29
  hide: boolean;
30
30
  orientation: 'horizontal' | 'vertical';
31
31
  required: boolean;
32
- split?: 'left' | 'middle';
32
+ split?: 'left' | 'middle' | 'right';
33
33
  tooltip?: string;
34
34
  label?: string;
35
35
  render(): import("lit").TemplateResult<1>;
package/dist/label.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,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 GlideCoreLabel=class GlideCoreLabel 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.#e=createRef(),this.#t=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,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===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" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></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.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;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(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,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 GlideCoreLabel=class GlideCoreLabel 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.#e=createRef(),this.#t=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" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></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.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;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>`};
@@ -17,7 +17,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
17
17
  }
18
18
 
19
19
  &.left {
20
- grid-template-columns: calc(100% / 3) 1fr;
20
+ grid-template-columns: 33.5% 1fr;
21
21
  }
22
22
 
23
23
  &.middle {
@@ -26,6 +26,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
26
26
  );
27
27
  }
28
28
 
29
+ &.right {
30
+ grid-template-columns: 66.5% 1fr;
31
+ }
32
+
29
33
  &.hidden-label {
30
34
  display: flex;
31
35
  flex-direction: column;
@@ -47,7 +51,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
47
51
  min-inline-size: 3ch;
48
52
 
49
53
  &.middle,
50
- &.left {
54
+ &.left,
55
+ &.right {
51
56
  justify-content: flex-end;
52
57
  }
53
58
  }
@@ -1 +1 @@
1
- export default function(e){class Final extends e{constructor(...n){if(new.target!==Final)throw new TypeError(`${e.name} does not allow extension.`);super(...n)}}return Object.defineProperty(Final,"name",{value:e.name}),Final}
1
+ export default function(e){class Final extends e{constructor(...n){if(new.target!==Final)throw new TypeError(`${e.name} doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);super(...n)}}return Object.defineProperty(Final,"name",{value:e.name}),Final}
@@ -30,7 +30,7 @@ it('throws when a class is extended', async () => {
30
30
  }
31
31
  expect(spy.callCount).to.equal(1);
32
32
  expect(spy.args.at(0)?.at(0) instanceof TypeError).to.be.true;
33
- expect(spy.args.at(0)?.at(0).message).to.equal('GlideCoreFinal does not allow extension.');
33
+ expect(spy.args.at(0)?.at(0).message).to.equal(`GlideCoreFinal doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);
34
34
  });
35
35
  it('does not throw when a class is not extended', () => {
36
36
  const spy = sinon.spy();
@@ -5,7 +5,7 @@ export default interface FormControl {
5
5
  label?: string;
6
6
  name: string;
7
7
  orientation: 'horizontal' | 'vertical';
8
- privateSplit?: 'left' | 'middle';
8
+ privateSplit?: 'left' | 'middle' | 'right';
9
9
  required: boolean;
10
10
  summary?: string;
11
11
  tooltip?: string;
package/dist/menu.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#h=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#h)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#b}" @slotchange="${this.#k}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#b}" @mouseover="${this.#w}" @private-disabled="${this.#R}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#T(){return this.#L?.find((({privateActive:e})=>e))}#d;#h;#c;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#T&&this.#p&&!e.target.disabled&&(this.#T.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#w(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#L)for(const t of this.#L)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#R(){if(this.#L&&this.#T){const e=this.#L.indexOf(this.#T);this.#T.privateActive=!1;const t=this.#L?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#L.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#L?.find((e=>!e.disabled));!this.#T&&e&&(e.privateActive=!0)}#b(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#T?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#T&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#T.id);if(this.open&&this.#T&&this.#L){const t=this.#L.indexOf(this.#T);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#L].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#L].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#k(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#L&&this.#L.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#L(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#T?.id&&(this.#p.ariaActivedescendant=this.#T.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu"),final],GlideCoreMenu);export default GlideCoreMenu;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s="large",this.#l=createRef(),this.#a=e=>{e.target===this.#t.value&&e.preventDefault()},this.#r=()=>{this.#i=!0},this.#d=()=>{this.#i?this.#i=!1:this.#n?this.#n=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#h=()=>{this.#n=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.isTargetDisabled?(this.#u(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#s}set size(e){this.#s=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#d,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#u()),this.#l.value?.addEventListener("mouseup",this.#h),this.#t.value?.addEventListener("mousedown",this.#a),this.#t.value?.addEventListener("mouseup",this.#r)}get isTargetDisabled(){const e=this.#v&&"disabled"in this.#v&&this.#v.disabled,t=this.#v&&"true"===this.#v.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#E}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#g}" @keydown="${this.#S}" @slotchange="${this.#y}" ${assertSlot([Element])} ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#b}" @focusin="${this.#C}" @keydown="${this.#S}" @mouseover="${this.#M}" @private-disabled="${this.#D}" @private-slot-change="${this.#k}" @slotchange="${this.#w}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#R;#e;#t;#i;#o;#n;#c;#f;#s;#l;get#O(){return this.#A?.find((({privateActive:e})=>e))}#a;#r;#d;#h;#T(e){this.#v&&"focus"in this.#v&&this.#v?.focus(e)}#m(){this.#R?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#v&&(this.#v.ariaExpanded="false"),this.#t.value?.hidePopover()}#E(e){const t=e.relatedTarget instanceof HTMLElement&&this.#f?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#w(){this.#p&&(this.#p.privateSize=this.size)}#b(e){e.defaultPrevented||e.target===this.#t.value||(this.open=!1)}#C(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#O&&this.#p&&!e.target.disabled&&(this.#O.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#M(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#A)for(const t of this.#A)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#D(){if(this.#A&&this.#O){const e=this.#A.indexOf(this.#O);this.#O.privateActive=!1;const t=this.#A?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#A.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#k(){const e=this.#A?.find((e=>!e.disabled));!this.#O&&e&&(e.privateActive=!0)}#S(e){const t=this.#v instanceof HTMLSpanElement||this.#v instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return this.#i=!0,e.preventDefault()," "===e.key&&t&&e.preventDefault(),this.#T(),void this.#O?.click();if([" ","Enter"].includes(e.key)&&!this.open&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#T();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#O&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#O.id);if(this.open&&this.#O&&this.#A){const t=this.#A.indexOf(this.#O);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#A.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#O.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#A.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#O.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#A].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#O.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#A].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#O.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#y(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#u():this.#m()}));this.#v&&this.#p&&(e.observe(this.#v,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#v.ariaHasPopup="true",this.#v.id=nanoid(),this.#v.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#v.id);(this.#v instanceof HTMLSpanElement||this.#v instanceof HTMLDivElement)&&this.#v instanceof HTMLElement&&(this.#v.tabIndex=0),this.open&&!this.isTargetDisabled?this.#u():this.#m()}#g(e){e.defaultPrevented||(this.isTargetDisabled?this.#m():this.#A&&this.#A.length>0&&(this.open=!this.open))}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#A(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#u(){this.#R?.(),this.#v&&this.#t.value&&(this.#R=autoUpdate(this.#v,this.#t.value,(()=>{(async()=>{if(this.#v&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#v,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#O?.id&&(this.#p.ariaActivedescendant=this.#O.id),this.#v&&(this.#v.ariaExpanded="true")})()})))}get#v(){return this.#l.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu"),final],GlideCoreMenu);export default GlideCoreMenu;
@@ -63,7 +63,7 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
63
63
  label?: string;
64
64
  name: string;
65
65
  orientation: "horizontal";
66
- privateSplit?: 'left' | 'middle';
66
+ privateSplit?: 'left' | 'middle' | 'right';
67
67
  tooltip?: string;
68
68
  /**
69
69
  * @default false
@@ -0,0 +1,24 @@
1
+ import { LitElement } from 'lit';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'glide-core-spinner': GlideCoreSpinner;
5
+ }
6
+ }
7
+ /**
8
+ * @attr {string} label - For screenreaders
9
+ * @attr {'large'|'medium'|'small'} [size='medium']
10
+ *
11
+ * @readonly
12
+ * @attr {string} [version]
13
+ */
14
+ export default class GlideCoreSpinner extends LitElement {
15
+ static shadowRootOptions: ShadowRootInit;
16
+ static styles: import("lit").CSSResult[];
17
+ /**
18
+ * For screenreaders
19
+ **/
20
+ label?: string;
21
+ size: 'large' | 'medium' | 'small';
22
+ readonly version: string;
23
+ render(): import("lit").TemplateResult<1>;
24
+ }
@@ -0,0 +1 @@
1
+ var __decorate=this&&this.__decorate||function(e,r,t,o){var i,s=arguments.length,l=s<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,r,t,o);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(l=(s<3?i(l):s>3?i(r,t,l):i(r,t))||l);return s>3&&l&&Object.defineProperty(r,t,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./spinner.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreSpinner=class GlideCoreSpinner extends LitElement{constructor(){super(...arguments),this.size="medium",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,[this.size]:!0})}" role="progressbar"></div>`}};__decorate([property({reflect:!0}),required],GlideCoreSpinner.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreSpinner.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreSpinner.prototype,"version",void 0),GlideCoreSpinner=__decorate([customElement("glide-core-spinner"),final],GlideCoreSpinner);export default GlideCoreSpinner;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").CSSResult[];
2
+ export default _default;
@@ -0,0 +1,52 @@
1
+ import{css}from"lit";export default[css`
2
+ @keyframes spin {
3
+ 100% {
4
+ align-items: center;
5
+ transform: rotate(1turn);
6
+ }
7
+ }
8
+
9
+ .component {
10
+ background:
11
+ radial-gradient(
12
+ farthest-side,
13
+ var(--glide-core-color-interactive-icon-active) 94%,
14
+ #0000
15
+ )
16
+ top / var(--private-gradient-size) var(--private-gradient-size)
17
+ no-repeat,
18
+ conic-gradient(
19
+ #0000 30%,
20
+ var(--glide-core-color-interactive-icon-active)
21
+ );
22
+ block-size: var(--private-spinner-size);
23
+ border-radius: 50%;
24
+ inline-size: var(--private-spinner-size);
25
+
26
+ /* stylelint-disable-next-line property-no-vendor-prefix */
27
+ -webkit-mask: radial-gradient(
28
+ farthest-side,
29
+ #0000 calc(100% - var(--private-gradient-size)),
30
+ #000 0
31
+ );
32
+
33
+ @media (prefers-reduced-motion: no-preference) {
34
+ animation: spin 1s infinite linear;
35
+ }
36
+
37
+ &.large {
38
+ --private-spinner-size: 3rem;
39
+ --private-gradient-size: 0.5rem;
40
+ }
41
+
42
+ &.medium {
43
+ --private-spinner-size: 2rem;
44
+ --private-gradient-size: 0.375rem;
45
+ }
46
+
47
+ &.small {
48
+ --private-spinner-size: 1rem;
49
+ --private-gradient-size: 0.25rem;
50
+ }
51
+ }
52
+ `];
@@ -1 +1 @@
1
- :root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-success-surface-container: #f1fdf4;--glide-core-color-success-surface-container-light: #f5fcf7;--glide-core-color-success-surface-solid: #34c759;--glide-core-color-success-surface-solid--hover: #248b3e;--glide-core-color-success-stroke-primary: #34c759;--glide-core-color-success-stroke-secondary: #d6f4de;--glide-core-color-success-text-status: #34c759;--glide-core-color-success-text-container: #212121;--glide-core-color-success-icon-default: #34c759;--glide-core-color-attention-surface-container: #fffbeb;--glide-core-color-attention-surface-container-light: #fffcf2;--glide-core-color-attention-surface-solid: #ffcc00;--glide-core-color-attention-surface-solid--hover: #b28f00;--glide-core-color-attention-stroke-primary: #ffcc00;--glide-core-color-attention-stroke-secondary: #fff5cc;--glide-core-color-attention-text-status: #ffcc00;--glide-core-color-attention-text-container: #212121;--glide-core-color-attention-icon-default: #ffcc00;--glide-core-color-warning-surface-container: #fff6e9;--glide-core-color-warning-surface-container-light: #fffaf2;--glide-core-color-warning-surface-solid: #ff9500;--glide-core-color-warning-surface-solid--hover: #b26800;--glide-core-color-warning-stroke-primary: #ff9500;--glide-core-color-warning-stroke-secondary: #ffeacc;--glide-core-color-warning-text-status: #ff9500;--glide-core-color-warning-text-container: #212121;--glide-core-color-warning-icon-default: #ff9500;--glide-core-color-info-surface-container: #e5f1fc;--glide-core-color-info-surface-container-light: #f2f8fe;--glide-core-color-info-surface-solid: #0073e6;--glide-core-color-info-surface-solid--hover: #0051a1;--glide-core-color-info-stroke-primary: #0073e6;--glide-core-color-info-stroke-secondary: #cce3fa;--glide-core-color-info-text-status: #0073e6;--glide-core-color-info-text-container: #212121;--glide-core-color-info-icon-default: #0073e6;--glide-core-color-error-surface-container: #fff0ef;--glide-core-color-error-surface-container-light: #fdf4f4;--glide-core-color-error-surface-solid: #db2d24;--glide-core-color-error-surface-solid--hover: #992019;--glide-core-color-error-stroke-primary: #db2d24;--glide-core-color-error-stroke-secondary: #f8d5d3;--glide-core-color-error-text-status: #db2d24;--glide-core-color-error-text-container: #212121;--glide-core-color-error-icon-default: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #2c2c2c;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-success-surface-container: #1c261e;--glide-core-color-success-surface-container-light: #181d19;--glide-core-color-success-surface-solid: #61c479;--glide-core-color-success-surface-solid--hover: #90d6a1;--glide-core-color-success-stroke-primary: #61c479;--glide-core-color-success-stroke-secondary: #233728;--glide-core-color-success-text-status: #61c479;--glide-core-color-success-text-container: #dcdcdc;--glide-core-color-success-icon-default: #61c479;--glide-core-color-attention-surface-container: #2a271a;--glide-core-color-attention-surface-container-light: #1f1d17;--glide-core-color-attention-surface-solid: #f0cf4f;--glide-core-color-attention-surface-solid--hover: #f5dd84;--glide-core-color-attention-stroke-primary: #f0cf4f;--glide-core-color-attention-stroke-secondary: #403920;--glide-core-color-attention-text-status: #f0cf4f;--glide-core-color-attention-text-container: #dcdcdc;--glide-core-color-attention-icon-default: #f0cf4f;--glide-core-color-warning-surface-container: #2c241a;--glide-core-color-warning-surface-container-light: #201c17;--glide-core-color-warning-surface-solid: #ffb64f;--glide-core-color-warning-surface-solid--hover: #ffcc84;--glide-core-color-warning-stroke-primary: #ffb64f;--glide-core-color-warning-stroke-secondary: #433420;--glide-core-color-warning-text-status: #ffb64f;--glide-core-color-warning-text-container: #dcdcdc;--glide-core-color-warning-icon-default: #ffb64f;--glide-core-color-info-surface-container: #171f26;--glide-core-color-info-surface-container-light: #15191d;--glide-core-color-info-surface-solid: #2d7dcc;--glide-core-color-info-surface-solid--hover: #6ca4db;--glide-core-color-info-stroke-primary: #2d7dcc;--glide-core-color-info-stroke-secondary: #192939;--glide-core-color-info-text-status: #2d7dcc;--glide-core-color-info-text-container: #dcdcdc;--glide-core-color-info-icon-default: #2d7dcc;--glide-core-color-error-surface-container: #291d1c;--glide-core-color-error-surface-container-light: #1e1818;--glide-core-color-error-surface-solid: #e36963;--glide-core-color-error-surface-solid--hover: #eb9692;--glide-core-color-error-stroke-primary: #e36963;--glide-core-color-error-stroke-secondary: #3d2524;--glide-core-color-error-text-status: #e36963;--glide-core-color-error-text-container: #dcdcdc;--glide-core-color-error-icon-default: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #6ca4db;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
1
+ :root,:host,.theme-light{color-scheme:light;--glide-core-color-static-surface-container: #ffffff;--glide-core-color-static-surface-container-secondary: #f0f0f0;--glide-core-color-static-surface-solid: #212121;--glide-core-color-static-surface-card: #ffffffcc;--glide-core-color-static-surface-overlay: #0000008c;--glide-core-color-static-surface-header: #0000000d;--glide-core-color-static-surface-active: #0051a1;--glide-core-color-static-stroke-primary: #c9c9c9;--glide-core-color-static-stroke-secondary: #e3e3e3;--glide-core-color-static-stroke-frame: #ffffff;--glide-core-color-static-text-default: #212121;--glide-core-color-static-text-secondary: #424242;--glide-core-color-static-text-heading: #424242;--glide-core-color-static-text-onsolid: #ffffff;--glide-core-color-static-text-onsolid-secondary: #8a8a8a;--glide-core-color-static-icon-default: #212121;--glide-core-color-static-icon-secondary: #424242;--glide-core-color-static-icon-heading: #424242;--glide-core-color-static-icon-onsolid: #ffffff;--glide-core-color-interactive-surface-container: #ffffff;--glide-core-color-interactive-surface-container--hover: #cce3fa;--glide-core-color-interactive-surface-container--disabled: #f0f0f0;--glide-core-color-interactive-surface-container-active: #0073e6;--glide-core-color-interactive-surface-container-active--hover: #0051a1;--glide-core-color-interactive-surface-container-active--disabled: #e5f1fc;--glide-core-color-interactive-surface-container-inactive: #8a8a8a;--glide-core-color-interactive-surface-container-clickable: #00000008;--glide-core-color-interactive-stroke-focus: #0073e6;--glide-core-color-interactive-stroke-primary: #c9c9c9;--glide-core-color-interactive-stroke-primary--hover: #0073e6;--glide-core-color-interactive-stroke-primary--disabled: #e5f1fc;--glide-core-color-interactive-stroke-active: #0073e6;--glide-core-color-interactive-stroke-active--hover: #0051a1;--glide-core-color-interactive-stroke-active--disabled: #e5f1fc;--glide-core-color-interactive-stroke-contrast: #6d6d6d;--glide-core-color-interactive-text-link: #0051a1;--glide-core-color-interactive-text-link--disabled: #8a8a8a;--glide-core-color-interactive-text-default: #212121;--glide-core-color-interactive-text-default--active: #ffffff;--glide-core-color-interactive-text-default--disabled: #8a8a8a;--glide-core-color-interactive-text-placeholder: #6d6d6d;--glide-core-color-interactive-text-placeholder--disabled: #8a8a8a;--glide-core-color-interactive-text-onsolid: #ffffff;--glide-core-color-interactive-text-link--hover: #0073e6;--glide-core-color-interactive-icon-link: #0051a1;--glide-core-color-interactive-icon-link--disabled: #8a8a8a;--glide-core-color-interactive-icon-default: #212121;--glide-core-color-interactive-icon-default--active: #ffffff;--glide-core-color-interactive-icon-default--disabled: #8a8a8a;--glide-core-color-interactive-icon-active: #0073e6;--glide-core-color-interactive-icon-active--hover: #0051a1;--glide-core-color-interactive-icon-active--disabled: #e5f1fc;--glide-core-color-interactive-icon-onsolid: #ffffff;--glide-core-color-success-surface-container: #f1fdf4;--glide-core-color-success-surface-container-light: #f5fcf7;--glide-core-color-success-surface-solid: #34c759;--glide-core-color-success-surface-solid--hover: #248b3e;--glide-core-color-success-stroke-primary: #34c759;--glide-core-color-success-stroke-secondary: #d6f4de;--glide-core-color-success-text-status: #34c759;--glide-core-color-success-text-container: #212121;--glide-core-color-success-icon-default: #34c759;--glide-core-color-attention-surface-container: #fffbeb;--glide-core-color-attention-surface-container-light: #fffcf2;--glide-core-color-attention-surface-solid: #ffcc00;--glide-core-color-attention-surface-solid--hover: #b28f00;--glide-core-color-attention-stroke-primary: #ffcc00;--glide-core-color-attention-stroke-secondary: #fff5cc;--glide-core-color-attention-text-status: #ffcc00;--glide-core-color-attention-text-container: #212121;--glide-core-color-attention-icon-default: #ffcc00;--glide-core-color-warning-surface-container: #fff6e9;--glide-core-color-warning-surface-container-light: #fffaf2;--glide-core-color-warning-surface-solid: #ff9500;--glide-core-color-warning-surface-solid--hover: #b26800;--glide-core-color-warning-stroke-primary: #ff9500;--glide-core-color-warning-stroke-secondary: #ffeacc;--glide-core-color-warning-text-status: #ff9500;--glide-core-color-warning-text-container: #212121;--glide-core-color-warning-icon-default: #ff9500;--glide-core-color-info-surface-container: #e5f1fc;--glide-core-color-info-surface-container-light: #f2f8fe;--glide-core-color-info-surface-solid: #0073e6;--glide-core-color-info-surface-solid--hover: #0051a1;--glide-core-color-info-stroke-primary: #0073e6;--glide-core-color-info-stroke-secondary: #cce3fa;--glide-core-color-info-text-status: #0073e6;--glide-core-color-info-text-container: #212121;--glide-core-color-info-icon-default: #0073e6;--glide-core-color-error-surface-container: #fff0ef;--glide-core-color-error-surface-container-light: #fdf4f4;--glide-core-color-error-surface-solid: #db2d24;--glide-core-color-error-surface-solid--hover: #992019;--glide-core-color-error-stroke-primary: #db2d24;--glide-core-color-error-stroke-secondary: #f8d5d3;--glide-core-color-error-text-status: #db2d24;--glide-core-color-error-text-container: #212121;--glide-core-color-error-icon-default: #db2d24;--glide-core-color-severity-surface-critical: #fff0ef;--glide-core-color-severity-surface-high: #fffaf2;--glide-core-color-severity-surface-medium: #fffcf2;--glide-core-color-severity-surface-low: #f9f9f9;--glide-core-color-severity-stroke-critical: #f4c0bd;--glide-core-color-severity-stroke-high: #ffbf66;--glide-core-color-severity-stroke-medium: #ffcc00;--glide-core-color-severity-stroke-low: #c9c9c9;--glide-core-color-severity-text-citical: #2c0907;--glide-core-color-severity-text-high: #331e00;--glide-core-color-severity-text-medium: #332900;--glide-core-color-severity-text-low: #212121;--glide-core-color-severity-icon-critical: #db2d24;--glide-core-color-severity-icon-high: #ff9500;--glide-core-color-severity-icon-medium: #ffcc00;--glide-core-color-severity-icon-low: #595959;--glide-core-color-effect-blur-elevation-floating-blur: .25rem;--glide-core-color-effect-color-elevation-hovered: #338febe5;--glide-core-color-effect-color-elevation-lifted: #adadad40;--glide-core-color-effect-color-elevation-raised-1: #0000000d;--glide-core-color-effect-color-elevation-raised-2: #00000026;--glide-core-color-effect-color-elevation-floating: #00000040;--glide-core-color-effect-color-elevation-detail-panel: #adadad;--glide-core-color-effect-position-elevation-floating-y: .25rem;--glide-core-private-color-button-surface-active: #0051a1;--glide-core-private-color-button-stroke-default: #0051a1;--glide-core-private-color-button-text-primary: #ffffff;--glide-core-private-color-button-icon-primary: #ffffff;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #ffffff;--glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;--glide-core-private-color-radio-icon-default--disabled: #d9d9d9;--glide-core-private-color-dialog-and-modal-surface-container: #ffffff;--glide-core-private-color-tabs-stroke-underline: #e3e3e3;--glide-core-private-color-template-surface-container-detail: #ffffffe5;--glide-core-private-color-tooltip-surface-container: #212121;--glide-core-private-color-tooltip-text-shortcut: #adadad}:host,.theme-dark{color-scheme:dark;--glide-core-color-static-surface-container: #141414;--glide-core-color-static-surface-container-secondary: #2c2c2c;--glide-core-color-static-surface-solid: #dcdcdc;--glide-core-color-static-surface-card: #ffffff0d;--glide-core-color-static-surface-overlay: #141414bf;--glide-core-color-static-surface-header: #ffffff0d;--glide-core-color-static-surface-active: #6ca4db;--glide-core-color-static-stroke-primary: #ffffff26;--glide-core-color-static-stroke-secondary: #ffffff0d;--glide-core-color-static-stroke-frame: #ffffff40;--glide-core-color-static-text-default: #dcdcdc;--glide-core-color-static-text-secondary: #c4c4c4;--glide-core-color-static-text-heading: #c4c4c4;--glide-core-color-static-text-onsolid: #141414;--glide-core-color-static-text-onsolid-secondary: #7e7e7e;--glide-core-color-static-icon-default: #dcdcdc;--glide-core-color-static-icon-secondary: #c4c4c4;--glide-core-color-static-icon-heading: #c4c4c4;--glide-core-color-static-icon-onsolid: #141414;--glide-core-color-interactive-surface-container: #ffffff0d;--glide-core-color-interactive-surface-container--hover: #1e3e5e;--glide-core-color-interactive-surface-container--disabled: #434343;--glide-core-color-interactive-surface-container-active: #2d7dcc;--glide-core-color-interactive-surface-container-active--hover: #265e95;--glide-core-color-interactive-surface-container-active--disabled: #1c344b;--glide-core-color-interactive-surface-container-inactive: #7e7e7e;--glide-core-color-interactive-surface-container-clickable: #ffffff0d;--glide-core-color-interactive-stroke-focus: #2d7dcc;--glide-core-color-interactive-stroke-primary: #ffffff26;--glide-core-color-interactive-stroke-primary--hover: #2d7dcc;--glide-core-color-interactive-stroke-primary--disabled: #171f26;--glide-core-color-interactive-stroke-active: #2d7dcc;--glide-core-color-interactive-stroke-active--hover: #6ca4db;--glide-core-color-interactive-stroke-active--disabled: #171f26;--glide-core-color-interactive-stroke-contrast: #a1a1a1;--glide-core-color-interactive-text-link: #6ca4db;--glide-core-color-interactive-text-link--disabled: #7e7e7e;--glide-core-color-interactive-text-default: #dcdcdc;--glide-core-color-interactive-text-default--active: #dcdcdc;--glide-core-color-interactive-text-default--disabled: #7e7e7e;--glide-core-color-interactive-text-placeholder: #a1a1a1;--glide-core-color-interactive-text-placeholder--disabled: #7e7e7e;--glide-core-color-interactive-text-onsolid: #141414;--glide-core-color-interactive-text-link--hover: #2d7dcc;--glide-core-color-interactive-icon-link: #6ca4db;--glide-core-color-interactive-icon-link--disabled: #7e7e7e;--glide-core-color-interactive-icon-default: #dcdcdc;--glide-core-color-interactive-icon-default--active: #dcdcdc;--glide-core-color-interactive-icon-default--disabled: #7e7e7e;--glide-core-color-interactive-icon-active: #2d7dcc;--glide-core-color-interactive-icon-active--hover: #6ca4db;--glide-core-color-interactive-icon-active--disabled: #434343;--glide-core-color-interactive-icon-onsolid: #141414;--glide-core-color-success-surface-container: #1c261e;--glide-core-color-success-surface-container-light: #181d19;--glide-core-color-success-surface-solid: #61c479;--glide-core-color-success-surface-solid--hover: #90d6a1;--glide-core-color-success-stroke-primary: #61c479;--glide-core-color-success-stroke-secondary: #233728;--glide-core-color-success-text-status: #61c479;--glide-core-color-success-text-container: #dcdcdc;--glide-core-color-success-icon-default: #61c479;--glide-core-color-attention-surface-container: #2a271a;--glide-core-color-attention-surface-container-light: #1f1d17;--glide-core-color-attention-surface-solid: #f0cf4f;--glide-core-color-attention-surface-solid--hover: #f5dd84;--glide-core-color-attention-stroke-primary: #f0cf4f;--glide-core-color-attention-stroke-secondary: #403920;--glide-core-color-attention-text-status: #f0cf4f;--glide-core-color-attention-text-container: #dcdcdc;--glide-core-color-attention-icon-default: #f0cf4f;--glide-core-color-warning-surface-container: #2c241a;--glide-core-color-warning-surface-container-light: #201c17;--glide-core-color-warning-surface-solid: #ffb64f;--glide-core-color-warning-surface-solid--hover: #ffcc84;--glide-core-color-warning-stroke-primary: #ffb64f;--glide-core-color-warning-stroke-secondary: #433420;--glide-core-color-warning-text-status: #ffb64f;--glide-core-color-warning-text-container: #dcdcdc;--glide-core-color-warning-icon-default: #ffb64f;--glide-core-color-info-surface-container: #171f26;--glide-core-color-info-surface-container-light: #15191d;--glide-core-color-info-surface-solid: #2d7dcc;--glide-core-color-info-surface-solid--hover: #6ca4db;--glide-core-color-info-stroke-primary: #2d7dcc;--glide-core-color-info-stroke-secondary: #192939;--glide-core-color-info-text-status: #2d7dcc;--glide-core-color-info-text-container: #dcdcdc;--glide-core-color-info-icon-default: #2d7dcc;--glide-core-color-error-surface-container: #291d1c;--glide-core-color-error-surface-container-light: #1e1818;--glide-core-color-error-surface-solid: #e36963;--glide-core-color-error-surface-solid--hover: #eb9692;--glide-core-color-error-stroke-primary: #e36963;--glide-core-color-error-stroke-secondary: #3d2524;--glide-core-color-error-text-status: #e36963;--glide-core-color-error-text-container: #dcdcdc;--glide-core-color-error-icon-default: #e36963;--glide-core-color-severity-surface-critical: #291d1c;--glide-core-color-severity-surface-high: #2c241a;--glide-core-color-severity-surface-medium: #2a271a;--glide-core-color-severity-surface-low: #2c2c2c;--glide-core-color-severity-stroke-critical: #e67873;--glide-core-color-severity-stroke-high: #e7a649;--glide-core-color-severity-stroke-medium: #f0cf4f;--glide-core-color-severity-stroke-low: #727272;--glide-core-color-severity-text-citical: #e67873;--glide-core-color-severity-text-high: #ffb64f;--glide-core-color-severity-text-medium: #f0cf4f;--glide-core-color-severity-text-low: #dcdcdc;--glide-core-color-severity-icon-critical: #e67873;--glide-core-color-severity-icon-high: #ffb64f;--glide-core-color-severity-icon-medium: #f0cf4f;--glide-core-color-severity-icon-low: #727272;--glide-core-color-effect-blur-elevation-floating-blur: 1.5rem;--glide-core-color-effect-color-elevation-hovered: #4a72b1e5;--glide-core-color-effect-color-elevation-lifted: #ffffff00;--glide-core-color-effect-color-elevation-raised-1: #ffffff00;--glide-core-color-effect-color-elevation-raised-2: #ffffff00;--glide-core-color-effect-color-elevation-floating: #14141459;--glide-core-color-effect-color-elevation-detail-panel: #14141480;--glide-core-color-effect-position-elevation-floating-y: .75rem;--glide-core-private-color-button-surface-active: #265e95;--glide-core-private-color-button-stroke-default: #6ca4db;--glide-core-private-color-button-text-primary: #dcdcdc;--glide-core-private-color-button-icon-primary: #dcdcdc;--glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;--glide-core-private-color-checkbox-surface-background-idle: #1414144d;--glide-core-private-color-checkbox-icon-default--disabled: #434343;--glide-core-private-color-radio-icon-default--disabled: #434343;--glide-core-private-color-dialog-and-modal-surface-container: #2c2c2c;--glide-core-private-color-tabs-stroke-underline: #ffffff26;--glide-core-private-color-template-surface-container-detail: #2c2c2c;--glide-core-private-color-tooltip-surface-container: #dcdcdc;--glide-core-private-color-tooltip-text-shortcut: #5b5b5b}:root{--glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);--glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);--glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);--glide-core-effect-floating: 0px var(--glide-core-color-effect-position-elevation-floating-y) var(--glide-core-color-effect-blur-elevation-floating-blur) var(--glide-core-color-effect-color-elevation-floating)}:root{--glide-core-rounding-base-radius-xs: .25rem;--glide-core-rounding-base-radius-sm: .5rem;--glide-core-rounding-base-radius-md: .75rem;--glide-core-rounding-base-radius-round: 12.5rem}:root{--glide-core-spacing-base-xxxs: .125rem;--glide-core-spacing-base-xxs: .25rem;--glide-core-spacing-base-xs: .5rem;--glide-core-spacing-base-sm: .75rem;--glide-core-spacing-base-md: 1rem;--glide-core-spacing-base-lg: 1.5rem;--glide-core-spacing-base-xl: 2rem;--glide-core-spacing-base-xxl: 3rem;--glide-core-spacing-base-xxxl: 4rem;--glide-core-spacing-indent-level-1: 1rem;--glide-core-spacing-indent-level-2: 2.5rem;--glide-core-spacing-indent-level-3: 4rem;--glide-core-spacing-indent-level-4: 5.5rem}:root{--glide-core-stroke-default: .0625rem;--glide-core-stroke-focus: .125rem;--glide-core-stroke-fat: .25rem}:root{--glide-core-typography-size-heading-h1: 1.75rem;--glide-core-typography-size-heading-h2: 1.5rem;--glide-core-typography-size-heading-h3: 1.25rem;--glide-core-typography-size-heading-h4: 1rem;--glide-core-typography-size-heading-h5: .75rem;--glide-core-typography-size-body-large: 1rem;--glide-core-typography-size-body-default: .875rem;--glide-core-typography-size-body-small: .75rem;--glide-core-typography-size-component-chartlabel-md: .625rem;--glide-core-typography-family-primary: "Nunito";--glide-core-typography-family-monospace: "Oxygen Mono";--glide-core-typography-weight-light: 300;--glide-core-typography-weight-regular: 400;--glide-core-typography-weight-semibold: 600;--glide-core-typography-weight-bold: 700;--glide-core-typography-weight-extrabold: 800;--glide-core-typography-weight-italic: italic;--glide-core-typography-height-heading-h1: 2.25rem;--glide-core-typography-height-heading-h2: 2rem;--glide-core-typography-height-heading-h3: 1.625rem;--glide-core-typography-height-heading-h4: 1.375rem;--glide-core-typography-height-heading-h5: 1.125rem;--glide-core-typography-paragraph-body-lg: 0rem;--glide-core-typography-paragraph-body-md: 0rem}
@@ -72,7 +72,7 @@ export default class GlideCoreTextarea extends LitElement implements FormControl
72
72
  spellcheck: boolean;
73
73
  autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
74
74
  autocomplete: 'on' | 'off';
75
- privateSplit?: 'left' | 'middle';
75
+ privateSplit?: 'left' | 'middle' | 'right';
76
76
  tooltip?: string;
77
77
  readonly version: string;
78
78
  checkValidity(): boolean;
package/dist/toggle.d.ts CHANGED
@@ -30,7 +30,7 @@ export default class GlideCoreToggle extends LitElement {
30
30
  hideLabel: boolean;
31
31
  label?: string;
32
32
  orientation: 'horizontal' | 'vertical';
33
- privateSplit?: 'left' | 'middle';
33
+ privateSplit?: 'left' | 'middle' | 'right';
34
34
  summary?: string;
35
35
  tooltip?: string;
36
36
  readonly version: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crowdstrike/glide-core",
3
- "version": "0.24.2",
3
+ "version": "0.24.4",
4
4
  "description": "A Web Component design system",
5
5
  "author": "CrowdStrike UX Team",
6
6
  "license": "Apache-2.0",