@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.
- package/dist/button-group.d.ts +4 -1
- package/dist/checkbox-group.d.ts +1 -1
- package/dist/checkbox.d.ts +1 -1
- package/dist/drawer.d.ts +4 -1
- package/dist/dropdown.d.ts +1 -1
- package/dist/dropdown.option.d.ts +2 -0
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +22 -9
- package/dist/form-controls-layout.d.ts +3 -3
- package/dist/icon-button.d.ts +4 -1
- package/dist/icon-button.styles.js +1 -1
- package/dist/input.d.ts +1 -1
- package/dist/label.d.ts +2 -2
- package/dist/label.js +1 -1
- package/dist/label.styles.js +7 -2
- package/dist/library/final.js +1 -1
- package/dist/library/final.test.js +1 -1
- package/dist/library/form-control.d.ts +1 -1
- package/dist/menu.js +1 -1
- package/dist/radio-group.d.ts +1 -1
- package/dist/spinner.d.ts +24 -0
- package/dist/spinner.js +1 -0
- package/dist/spinner.styles.d.ts +2 -0
- package/dist/spinner.styles.js +52 -0
- package/dist/styles/variables.css +1 -1
- package/dist/textarea.d.ts +1 -1
- package/dist/toggle.d.ts +1 -1
- package/package.json +1 -1
package/dist/button-group.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 {'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
|
package/dist/checkbox-group.d.ts
CHANGED
@@ -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
|
*/
|
package/dist/checkbox.d.ts
CHANGED
@@ -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
|
/**
|
package/dist/dropdown.d.ts
CHANGED
@@ -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
|
*/
|
package/dist/dropdown.option.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,
|
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
|
-
|
180
|
-
|
181
|
-
|
180
|
+
&:not(.count) {
|
181
|
+
&.large {
|
182
|
+
padding-inline-end: var(--glide-core-spacing-base-sm);
|
183
|
+
}
|
182
184
|
|
183
|
-
|
184
|
-
|
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
|
}
|
package/dist/icon-button.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 {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:
|
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>`};
|
package/dist/label.styles.js
CHANGED
@@ -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:
|
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
|
}
|
package/dist/library/final.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export default function(e){class Final extends e{constructor(...n){if(new.target!==Final)throw new TypeError(`${e.name}
|
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(
|
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();
|
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
|
+
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;
|
package/dist/radio-group.d.ts
CHANGED
@@ -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
|
+
}
|
package/dist/spinner.js
ADDED
@@ -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,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}
|
package/dist/textarea.d.ts
CHANGED
@@ -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;
|