@crowdstrike/glide-core 0.16.0 → 0.17.1

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var 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{LitElement,html}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{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.option.styles.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.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s="",this.#a=createRef(),this.#r=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#s}set label(e){this.#s=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){if(this.#r=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#p)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}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}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}" internally-inert @click="${this.#h}" ?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.#v}" @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" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#a)}>${this.label}</div></glide-core-tooltip>${when(this.selected,(()=>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.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#s;#a;#r;#n;get#p(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#d(){this.#a.value&&(this.isLabelOverflow=this.#a.value.scrollWidth>this.#a.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})],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([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
+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{LitElement,html}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{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.option.styles.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.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s="",this.#a=createRef(),this.#r=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#s}set label(e){this.#s=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){if(this.#r=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#p)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}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}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}" internally-inert @click="${this.#h}" ?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.#v}" @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" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" @toggle="${this.#u}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#a)}>${this.label}</div></glide-core-tooltip>${when(this.selected,(()=>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.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#s;#a;#r;#n;get#p(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#a.value&&(this.isLabelOverflow=this.#a.value.scrollWidth>this.#a.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})],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([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;

package/dist/icons/checked.js

@@ -1 +1 @@
-import{html}from"lit";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="${styleMap({height:"var(--size, 0.875rem)",width:"var(--size, 0.875rem)"})}"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/chevron.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").TemplateResult<1>;
+export default _default;

package/dist/icons/chevron.js

@@ -0,0 +1 @@
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/magnifying-glass.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").TemplateResult;
+declare const _default: import("lit").TemplateResult<1>;
 export default _default;

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" data-test="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg class="search-icon" data-test="search-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="${styleMap({display:"block",height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;

package/dist/icons/pencil.js

@@ -1 +1 @@
-import{html}from"lit";export default html`<svg aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="none" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M10.0244 5.95031L8.0395 3.96536M2.06587 11.924L3.74532 11.7374C3.95051 11.7146 4.0531 11.7032 4.149 11.6721C4.23407 11.6446 4.31504 11.6057 4.38969 11.5564C4.47384 11.501 4.54683 11.428 4.69281 11.282L11.5132 4.4616C12.0613 3.91347 12.0613 3.02478 11.5132 2.47665C10.965 1.92852 10.0763 1.92852 9.52821 2.47665L2.70786 9.29703C2.56188 9.44302 2.48889 9.51601 2.4334 9.60015C2.38417 9.67481 2.34526 9.75577 2.31772 9.84085C2.28667 9.93674 2.27527 10.0393 2.25247 10.2445L2.06587 11.924Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" viewBox="0 0 14 14" fill="none" style="${styleMap({height:"var(--size, 0.875rem)",width:"var(--size, 0.875rem)"})}"><path d="M10.0244 5.95031L8.0395 3.96536M2.06587 11.924L3.74532 11.7374C3.95051 11.7146 4.0531 11.7032 4.149 11.6721C4.23407 11.6446 4.31504 11.6057 4.38969 11.5564C4.47384 11.501 4.54683 11.428 4.69281 11.282L11.5132 4.4616C12.0613 3.91347 12.0613 3.02478 11.5132 2.47665C10.965 1.92852 10.0763 1.92852 9.52821 2.47665L2.70786 9.29703C2.56188 9.44302 2.48889 9.51601 2.4334 9.60015C2.38417 9.67481 2.34526 9.75577 2.31772 9.84085C2.28667 9.93674 2.27527 10.0393 2.25247 10.2445L2.06587 11.924Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/x.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").TemplateResult<1>;
+export default _default;

package/dist/icons/x.js

@@ -0,0 +1 @@
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/inline-alert.d.ts

@@ -6,7 +6,7 @@ declare global {
     }
 }
 /**
- * @event remove - `(event: Event) => void`
+ * @event remove
  *
  * @slot - The content of the Inline Alert.
  */
@@ -21,9 +21,9 @@ export default class GlideCoreInlineAlert extends LitElement {
     render(): import("lit").TemplateResult<1>;
 }
 declare const icons: {
-    informational: import("lit").TemplateResult;
-    medium: import("lit").TemplateResult<2>;
-    high: import("lit").TemplateResult<2>;
-    critical: import("lit").TemplateResult<2>;
+    informational: import("lit").TemplateResult<1>;
+    medium: import("lit").TemplateResult<1>;
+    high: import("lit").TemplateResult<1>;
+    critical: import("lit").TemplateResult<1>;
 };
 export {};

package/dist/inline-alert.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(n<3?l(r):n>3?l(t,o,r):l(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.js";import{LitElement,html,svg}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{when}from"lit/directives/when.js";import informationalIcon from"./icons/informational.js";import styles from"./inline-alert.styles.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.#e=100,this.#t=createRef(),this.#o=createRef(),this.#i=!1,this.#l=new LocalizeController(this),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#o.value),this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#n.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#l.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#a}" @keydown="${this.#s}" ${ref(this.#n)}><svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#l;#n;#r(){owSlot(this.#o.value)}#a(){this.#i?this.#i=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#s(e){["Enter"," "].includes(e.key)&&(this.#i=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:informationalIcon,medium:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(r<3?l(n):r>3?l(t,i,n):l(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.#e=100,this.#t=createRef(),this.#i=createRef(),this.#o=!1,this.#l=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#i.value),this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot @slotchange="${this.#n}" ${ref(this.#i)}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#l.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#a}" @keydown="${this.#s}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#i;#o;#l;#r;#n(){owSlot(this.#i.value)}#a(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#s(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`,medium:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};

package/dist/input.d.ts

@@ -9,9 +9,9 @@ declare global {
 export declare const SUPPORTED_TYPES: readonly ["date", "email", "number", "password", "search", "tel", "text", "url"];
 type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
  *
  * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.

package/dist/input.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
+var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.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{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <glide-core-private-label
         class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
         orientation=${this.orientation}
@@ -47,28 +47,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
                   label=${this.#c.term("clearEntry",this.label)}
                   @click=${this.#u}
                 >
-                  <!-- X icon -->
-                  <svg
-                    aria-hidden="true"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    <path
-                      d="M6 6L18 18"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                    <path
-                      d="M18 6L6 18"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
+                  ${xIcon}
                 </glide-core-icon-button>
               `:nothing}
           ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`
@@ -79,42 +58,9 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
                   label=${this.passwordVisible?"Hide password":"Show password"}
                   aria-controls="input"
                   aria-expanded=${this.passwordVisible?"true":"false"}
-                  @click=${this.#v}
+                  @click=${this.#y}
                 >
-                  ${this.passwordVisible?html`<svg
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-                        />
-                      </svg> `:html`<svg
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-                        />
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-                        />
-                      </svg>`}
+                  ${this.passwordVisible?icons.eyeWithSlash:icons.eye}
                 </glide-core-icon-button>
               `:nothing}
 
@@ -143,14 +89,45 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
                     more accesible, verbose description below.
                   -->
                   <span aria-hidden="true" data-test="character-count-text">
-                    ${this.#c.term("displayedCharacterCount",this.#y,this.maxlength)}
+                    ${this.#c.term("displayedCharacterCount",this.#m,this.maxlength)}
                   </span>
 
                   <span class="hidden" data-test="character-count-announcement"
-                    >${this.#c.term("announcedCharacterCount",this.#y,this.maxlength)}</span
+                    >${this.#c.term("announcedCharacterCount",this.#m,this.maxlength)}</span
                   >
                 </div>
               `:nothing}
         </div>
       </glide-core-private-label>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#h(){return this.clearable&&!this.disabled&&!this.readonly}get#p(){return this.#h&&this.value.length>0}get#y(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#y>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(t){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value?.value,this.dispatchEvent(new Event(t.type,t))}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#o(){this.hasFocus=!0}#n(){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value.value}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#v(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#h(){return this.clearable&&!this.disabled&&!this.readonly}get#p(){return this.#h&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(t){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value?.value,this.dispatchEvent(new Event(t.type,{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value.value}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
+    aria-hidden="true"
+    style=${styleMap({height:"1rem",width:"1rem"})}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+    />
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+    />
+  </svg>`,eyeWithSlash:html`<svg
+    aria-hidden="true"
+    style=${styleMap({height:"1rem",width:"1rem"})}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+    />
+  </svg>`};

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}from"lit";import{LocalizeController}from"./library/localize.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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<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">`;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.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}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"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</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" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=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([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html}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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.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.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}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"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0">${icons.information}</span><slot name="tooltip" @slotchange="${this.#r}" ${ref(this.#s)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#a}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</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" @slotchange="${this.#n}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#d}" ${ref(this.#i)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#n(){owSlot(this.#e.value)}#a(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#d(){const e=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#r(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=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([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg 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

@@ -71,7 +71,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .optional-tooltip-target {
       background-color: transparent;
       border: none;
-      border-radius: 0.0625rem;
+      border-radius: 50%;
       color: var(--glide-core-text-body-1);
 
       /*
@@ -82,6 +82,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       display: flex;
       padding: 0;
+
+      &:focus-visible {
+        outline-offset: 0;
+      }
     }
 
     .label {

package/dist/library/localize.d.ts

@@ -8,9 +8,7 @@ export interface Translation extends DefaultTranslation {
     $dir: 'ltr' | 'rtl';
     close: string;
     dismiss: string;
-    open: string;
     selectAll: string;
-    moreInformation: string;
     notifications: string;
     nextTab: string;
     previousTab: string;

package/dist/library/mouse.d.ts

@@ -0,0 +1,2 @@
+export declare function click(element: Element | null | undefined, position?: 'top' | 'right' | 'bottom' | 'left' | 'outside' | 'center'): Promise<void>;
+export declare function hover(element: Element | null | undefined, position?: 'top' | 'right' | 'bottom' | 'left' | 'outside' | 'center'): Promise<void>;

package/dist/library/mouse.js

@@ -0,0 +1 @@
+import{assert}from"@open-wc/testing";import{resetMouse,sendMouse}from"@web/test-runner-commands";export function click(t,e="center"){return mouse(t,e,"click")}export function hover(t,e="center"){return mouse(t,e,"move")}async function mouse(t,e="center",o){assert(t);const{height:i,width:r,x:c,y:n}=t.getBoundingClientRect();await sendMouse({type:o,position:"top"===e?[Math.ceil(c+r/2),Math.ceil(n)]:"right"===e?[Math.floor(c+r),Math.ceil(n+i/2)]:"bottom"===e?[Math.ceil(c+r/2),Math.floor(n+i)]:"left"===e?[Math.ceil(c),Math.ceil(n+i/2)]:"outside"===e?[Math.floor(c-1),Math.floor(n-1)]:[Math.ceil(c+r/2),Math.ceil(n+i/2)]}),afterEach((async()=>{await resetMouse()}))}

package/dist/menu.d.ts

@@ -6,8 +6,10 @@ declare global {
     }
 }
 /**
+ * @event toggle
+ *
  * @slot - One of `<glide-core-menu-options>`.
- * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
+ * @slot target - The element to which the menu will anchor, which can be any focusable element.
  */
 export default class GlideCoreMenu extends LitElement {
     #private;

package/dist/menu.js

@@ -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{LitElement,html}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 GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",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.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#d&&(this.#d.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#h??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#h=e}get open(){return this.#s}set open(e){this.#s=e,e&&!this.isTargetDisabled?this.#p():this.#f()}get size(){return this.#a}set size(e){this.#a=e,this.#d&&(this.#d.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#r.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#p(),this.#r.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#t.value.addEventListener("mousedown",(e=>{e.target===this.#t.value&&e.preventDefault()})),this.#t.value.addEventListener("mouseup",(e=>{if(e.target!==this.#t.value){if(e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}}else this.#o=!0}))}get isTargetDisabled(){const e=this.#m&&"disabled"in this.#m&&this.#m.disabled,t=this.#m&&"true"===this.#m.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.#v}" @keydown="${this.#g}" @slotchange="${this.#S}" ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#C}" @focusin="${this.#w}" @keydown="${this.#g}" @mouseover="${this.#k}" @private-disabled="${this.#b}" @private-slot-change="${this.#y}" @slotchange="${this.#O}" ${ref(this.#t)}></slot></div>`}#R;#e;#t;#i;#o;#n;#s;#l;#h;#u;#a;#r;get#D(){return this.#M?.find((({privateActive:e})=>e))}#c;#A(e){this.#m&&"focus"in this.#m&&this.#m?.focus(e)}#f(){this.#R?.(),this.#d&&(this.#d.ariaActivedescendant=""),this.#m&&(this.#m.ariaExpanded="false"),this.#t.value?.hidePopover()}get#d(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#O(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#d.privateSize=this.size}#C(e){e.target!==this.#t.value&&(this.open=!1)}#w(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#D&&this.#d&&!e.target.disabled&&(this.#D.privateActive=!1,e.target.privateActive=!0,this.#d.ariaActivedescendant=e.target.id)}#k(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#M)for(const t of this.#M)t.privateActive=t===e.target;this.#d&&(this.#d.ariaActivedescendant=e.target.id)}}#E(e){const t=e.relatedTarget instanceof HTMLElement&&this.#u?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#b(){if(this.#M&&this.#D){const e=this.#M.indexOf(this.#D);this.#D.privateActive=!1;const t=this.#M?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#M.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#y(){const e=this.#M?.find((e=>!e.disabled));!this.#D&&e&&(e.privateActive=!0)}#g(e){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#A(),this.#D?.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.#A();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#D)return e.preventDefault(),this.open=!0,void(this.#d.ariaActivedescendant=this.#D.id);if(this.open){ow(this.#M,ow.array),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#D,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#M.indexOf(this.#D);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.find(((e,i)=>!e.disabled&&i>t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#M].reverse().findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#M].findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}}}#S(){owSlot(this.#r.value),ow(this.#m,ow.object.instanceOf(Element)),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#p():this.#f()})).observe(this.#m,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#m.ariaHasPopup="true",this.#m.id=nanoid(),this.#m.setAttribute("aria-controls",this.#d.id),this.#d.ariaLabelledby=this.#m.id;(this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement)&&this.#m instanceof HTMLElement&&(this.#m.tabIndex=0),this.open&&!this.isTargetDisabled?this.#p():this.#f()}#v(){this.isTargetDisabled?this.#f():this.#i?this.#i=!1:this.#M&&this.#M.length>0&&(this.open=!this.open)}get#M(){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))}#p(){this.#R?.(),this.#m&&this.#t.value&&(this.#R=autoUpdate(this.#m,this.#t.value,(()=>{(async()=>{if(this.#m&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#m,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.#d&&this.#D?.id&&(this.#d.ariaActivedescendant=this.#D.id),this.#m&&(this.#m.ariaExpanded="true")})()})))}get#m(){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),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+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{LitElement,html}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 GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",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.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#d&&(this.#d.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#h??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#h=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#p(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#u(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#d&&(this.#d.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#r.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#p(),this.#r.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#t.value.addEventListener("mousedown",(e=>{e.target===this.#t.value&&e.preventDefault()})),this.#t.value.addEventListener("mouseup",(e=>{if(e.target!==this.#t.value){if(e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}}else this.#o=!0}))}get isTargetDisabled(){const e=this.#m&&"disabled"in this.#m&&this.#m.disabled,t=this.#m&&"true"===this.#m.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.#v}" @keydown="${this.#g}" @slotchange="${this.#S}" ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#C}" @focusin="${this.#b}" @keydown="${this.#g}" @mouseover="${this.#w}" @private-disabled="${this.#k}" @private-slot-change="${this.#y}" @slotchange="${this.#O}" ${ref(this.#t)}></slot></div>`}#R;#e;#t;#i;#o;#n;#s;#l;#h;#f;#a;#r;get#D(){return this.#M?.find((({privateActive:e})=>e))}#c;#A(e){this.#m&&"focus"in this.#m&&this.#m?.focus(e)}#u(){this.#R?.(),this.#d&&(this.#d.ariaActivedescendant=""),this.#m&&(this.#m.ariaExpanded="false"),this.#t.value?.hidePopover()}get#d(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#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)}#O(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#d.privateSize=this.size}#C(e){e.target!==this.#t.value&&(this.open=!1)}#b(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#D&&this.#d&&!e.target.disabled&&(this.#D.privateActive=!1,e.target.privateActive=!0,this.#d.ariaActivedescendant=e.target.id)}#w(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#M)for(const t of this.#M)t.privateActive=t===e.target;this.#d&&(this.#d.ariaActivedescendant=e.target.id)}}#k(){if(this.#M&&this.#D){const e=this.#M.indexOf(this.#D);this.#D.privateActive=!1;const t=this.#M?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#M.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#y(){const e=this.#M?.find((e=>!e.disabled));!this.#D&&e&&(e.privateActive=!0)}#g(e){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#A(),this.#D?.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.#A();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#D)return e.preventDefault(),this.open=!0,void(this.#d.ariaActivedescendant=this.#D.id);if(this.open){ow(this.#M,ow.array),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#D,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#M.indexOf(this.#D);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.find(((e,i)=>!e.disabled&&i>t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#M].reverse().findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#M].findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}}}#S(){owSlot(this.#r.value),ow(this.#m,ow.object.instanceOf(Element)),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#p():this.#u()})).observe(this.#m,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#m.ariaHasPopup="true",this.#m.id=nanoid(),this.#m.setAttribute("aria-controls",this.#d.id),this.#d.ariaLabelledby=this.#m.id;(this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement)&&this.#m instanceof HTMLElement&&(this.#m.tabIndex=0),this.open&&!this.isTargetDisabled?this.#p():this.#u()}#v(){this.isTargetDisabled?this.#u():this.#i?this.#i=!1:this.#M&&this.#M.length>0&&(this.open=!this.open)}get#M(){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))}#p(){this.#R?.(),this.#m&&this.#t.value&&(this.#R=autoUpdate(this.#m,this.#t.value,(()=>{(async()=>{if(this.#m&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#m,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.#d&&this.#D?.id&&(this.#d.ariaActivedescendant=this.#D.id),this.#m&&(this.#m.ariaExpanded="true")})()})))}get#m(){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),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

package/dist/menu.options.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
+ * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
  */
 export default class GlideCoreMenuOptions extends LitElement {
     #private;

package/dist/modal.d.ts

@@ -6,9 +6,9 @@ declare global {
     }
 }
 /**
- * @event close - `(event: "close", handler: (event: Event)) => void) => void`
+ * @event toggle
  *
- * @slot - The content of the modal.
+ * @slot - The primary content of the modal.
  * @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
  * @slot primary - One of `<glide-core-button>`.
  * @slot secondary - One of `<glide-core-button>`.
@@ -18,16 +18,13 @@ export default class GlideCoreModal extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label: string;
     backButton: boolean;
+    label?: string;
+    get open(): boolean;
+    set open(isOpen: boolean);
     size?: 'small' | 'medium' | 'large' | 'xlarge';
-    close(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    /**
-     * Method called by consumers to open the Modal.
-     */
-    showModal(): void;
 }

package/dist/modal.icon-button.d.ts

@@ -6,13 +6,8 @@ declare global {
     }
 }
 /**
- * @slot - The content of the button. Should only be an icon. The icon should also leverage the
- *         "label" attribute for accessibility so that it is read to screenreaders.
- *
- * @example
- * <glide-core-modal-icon-button slot="header-actions">
- *   <!-- icon here -->
- * </glide-core-modal-icon-button>
+ * @slot - The content of the button. Should only be an icon. The icon should also use the
+ *         "label" attribute for accessibility.
  */
 export default class GlideCoreModalIconButton extends LitElement {
     #private;

package/dist/modal.icon-button.styles.js

@@ -1,8 +1,8 @@
 import{css}from"lit";export default[css`
     ::slotted(*) {
-      --size: 1.25rem;
+      --size: 1.125rem;
 
-      block-size: 1.25rem;
-      inline-size: 1.25rem;
+      block-size: 1.125rem;
+      inline-size: 1.125rem;
     }
   `];

package/dist/modal.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.backButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="icon-button" data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button class="icon-button" data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#u}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#h}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#h(){owSlotType(this.#l.value,[GlideCoreButton])}#u(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(e.preventDefault(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,i=arguments.length,r=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  .private-glide-core-modal-lock-scroll {\n    scrollbar-gutter: stable !important;\n    overflow: hidden !important;\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#i=createRef(),this.#r=createRef(),this.#s=createRef(),this.#a=!1,this.#c=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#a}set open(e){const t=e!==this.#a;this.#a=e,e&&t?(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#l.value),owSlotType(this.#s.value,[GlideCoreModalIconButton]),owSlotType(this.#n.value,[GlideCoreButton]),owSlotType(this.#i.value,[GlideCoreButton]),owSlotType(this.#r.value,[GlideCoreModalTertiaryIcon,GlideCoreButton]),this.open&&this.#d()}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" data-test="component" @keydown="${this.#h}" @click="${this.#f}" ${ref(this.#o)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#c.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#p}" ${ref(this.#s)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#c.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot @slotchange="${this.#y}" ${ref(this.#l)}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" @slotchange="${this.#S}" ${ref(this.#r)}></slot></li><li class="action"><slot name="secondary" @slotchange="${this.#C}" ${ref(this.#i)}></slot></li><li class="action"><slot name="primary" @slotchange="${this.#b}" ${ref(this.#n)}></slot></li></menu></footer></dialog>`}#e;#t;#o;#l;#n;#i;#r;#s;#a;#c;#m(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#f(e){if(this.#o.value){const{height:t,width:o,top:l,left:n}=this.#o.value.getBoundingClientRect();l<=e.clientY&&e.clientY<=l+t&&n<=e.clientX&&e.clientX<=n+o||(this.open=!1)}}#h(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#y(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#l.value)}#b(){owSlotType(this.#n.value,[GlideCoreButton])}#C(){owSlotType(this.#i.value,[GlideCoreButton])}#S(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#r.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#p(){owSlotType(this.#s.value,[GlideCoreModalIconButton])}#d(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`};