@crowdstrike/glide-core 0.15.1 → 0.17.0

package/dist/accordion.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @event toggle - `(event: "toggle", handler: (event: Event) => void) => void`.
+ * @event toggle
  *
  * @slot - The content of the accordion.
  * @slot prefix-icon - An optional icon before the label.

package/dist/accordion.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var l,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(i<3?l(n):i>3?l(t,o,n):l(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};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{owSlot}from"./library/ow.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#l=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0}));if(e)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0}))}))}}));else if(this.isClosing=!0,this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0})))}))}}click(){this.#i.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing})}" data-test="summary" @click="${this.#n}" ${ref(this.#i)}><svg class="${classMap({chevron:!0,unrotated:this.open})}" width="16" height="16" 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><div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#l)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" @slotchange="${this.#f}" ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#l;#i;#f(){owSlot(this.#e.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#l.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],GlideCoreAccordion.prototype,"isClosing",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var l,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(i<3?l(n):i>3?l(t,o,n):l(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};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{owSlot}from"./library/ow.js";import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#l=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&t&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(e&&t)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))}}));else if(t&&(this.isClosing=!0,this.#e.value)){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}))}}click(){this.#i.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing,open:this.open})}" data-test="summary" @click="${this.#n}" ${ref(this.#i)}>${chevronIcon}<div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#l)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" @slotchange="${this.#c}" ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#l;#i;#c(){owSlot(this.#e.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#l.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],GlideCoreAccordion.prototype,"isClosing",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;

package/dist/accordion.styles.js

@@ -35,6 +35,23 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       &.active {
         padding-block-end: var(--glide-core-spacing-xxs);
       }
+
+      &.open {
+        svg {
+          rotate: 0deg;
+        }
+      }
+
+      svg {
+        align-items: center;
+        display: flex;
+        margin-inline-end: var(--glide-core-spacing-xxs);
+        rotate: -90deg;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: 250ms rotate ease;
+        }
+      }
     }
 
     .label-container {
@@ -52,21 +69,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       text-overflow: ellipsis;
     }
 
-    .chevron {
-      align-items: center;
-      display: flex;
-      margin-inline-end: var(--glide-core-spacing-xxs);
-      rotate: -90deg;
-
-      &.unrotated {
-        rotate: 0deg;
-      }
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: 250ms rotate ease;
-      }
-    }
-
     .default-slot {
       color: var(--glide-core-text-body-1);
       display: block;

package/dist/button-group.d.ts

@@ -5,8 +5,7 @@ declare global {
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
+ * @event selected
  *
  * @slot - One or more of `<glide-core-button-group-button>`.
  */

package/dist/button-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0)}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");e&&!e.disabled&&(e.selected=!0)}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus(),t.target.dispatchEvent(new Event("change",{bubbles:!0})),t.target.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0,e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})))}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0,o.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})));break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0,o.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})));break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0,e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})))}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;

package/dist/button.d.ts

@@ -14,20 +14,9 @@ export default class GlideCoreButton extends LitElement {
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    ariaControls: string | null;
-    ariaExpanded: 'true' | 'false' | null;
-    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
-    autofocus: boolean;
     disabled: boolean;
-    formAction: string;
-    formEncType: '' | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-    formMethod: '' | 'dialog' | 'get' | 'post';
-    formNoValidate: boolean;
-    formTarget: '' | '_blank' | '_parent' | '_self' | '_top';
     label?: string;
     name: string;
-    popoverTarget?: string;
-    popoverTargetAction: '' | 'hide' | 'show' | 'toggle';
     size: 'large' | 'small';
     type: 'button' | 'submit' | 'reset';
     value: string;

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};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{ifDefined}from"lit/directives/if-defined.js";import styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#t.form}click(){this.#e.value?.click()}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" ?autofocus="${this.autofocus}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" ?disabled="${this.disabled}" @click="${this.#o}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#i)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot></button>`}constructor(){super(),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.autofocus=!1,this.disabled=!1,this.formAction="",this.formEncType="",this.formMethod="",this.formNoValidate=!1,this.formTarget="",this.name="",this.popoverTargetAction="",this.size="large",this.type="button",this.value="",this.variant="primary",this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#e=createRef(),this.#i=createRef(),this.#s=createRef(),this.#t=this.attachInternals()}#e;#t;#i;#s;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#i.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#s.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"autofocus",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({attribute:"formaction",reflect:!0})],GlideCoreButton.prototype,"formAction",void 0),__decorate([property({attribute:"formenctype",reflect:!0})],GlideCoreButton.prototype,"formEncType",void 0),__decorate([property({attribute:"formmethod",reflect:!0})],GlideCoreButton.prototype,"formMethod",void 0),__decorate([property({attribute:"formnovalidate",type:Boolean,reflect:!0})],GlideCoreButton.prototype,"formNoValidate",void 0),__decorate([property({attribute:"formtarget",reflect:!0})],GlideCoreButton.prototype,"formTarget",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({attribute:"popovertarget",reflect:!0})],GlideCoreButton.prototype,"popoverTarget",void 0),__decorate([property({attribute:"popovertargetaction",reflect:!0})],GlideCoreButton.prototype,"popoverTargetAction",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,o,n):r(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};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 styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#e.form}click(){this.#t.value?.click()}render(){return html`<button class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" ?disabled="${this.disabled}" @click="${this.#o}" ${ref(this.#t)}><slot name="prefix-icon" @slotchange="${this.#i}" ${ref(this.#r)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#s}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#r=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#r;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#i(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(){const e=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(e&&e.length>0)}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;

package/dist/checkbox-group.d.ts

@@ -6,9 +6,9 @@ declare global {
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
  *
  * @slot - One or more of `<glide-core-checkbox>`.
  * @slot description - Additional information or context.

package/dist/checkbox-group.js

@@ -40,4 +40,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,l=arguments.length
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.value=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.value=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox.d.ts

@@ -7,9 +7,9 @@ declare global {
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
  *
  * @slot description - Additional information or context.
  * @slot tooltip - Content for the tooltip.

package/dist/checkbox.js

@@ -1,18 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length,r=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    class="indeterminate-icon"
-  >
-    <rect x="0.5" y="0.5" width="13" height="13" rx="3.5" />
-    <path
-      d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z"
-      fill="currentColor"
-    />
-  </svg>
-`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#a.form}blur(){this.#s.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#s.value?.click()}connectedCallback(){super.connectedCallback(),this.#o=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#o.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#a.validity:this.required&&!this.checked?(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#s.value),this.#a.validity):this.required&&this.#a.validity.valueMissing&&this.checked?(this.#a.setValidity({}),this.#a.validity):(this.required||!this.#a.validity.valueMissing||this.checked||this.#a.setValidity({}),this.#a.validity)}focus(e){this.#s.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
+var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length,o=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(o=(r<3?s(o):r>3?s(t,i,o):s(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.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{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 checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#a.form}blur(){this.#s.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#s.value?.click()}connectedCallback(){super.connectedCallback(),this.#r=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#r.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#o),this.#r?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#a.validity:this.required&&!this.checked?(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#s.value),this.#a.validity):this.required&&this.#a.validity.valueMissing&&this.checked?(this.#a.setValidity({}),this.#a.validity):(this.required||!this.#a.validity.valueMissing||this.checked||this.#a.setValidity({}),this.#a.validity)}focus(e){this.#s.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#o)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
       ${when("minimal"===this.privateVariant,(()=>html`
           <label
             class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
@@ -38,7 +24,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
                 class=${classMap({checkbox:!0,disabled:this.disabled})}
               >
                 <div class="checked-icon">${checkedIcon}</div>
-                ${indeterminateIcon}
+                ${icons.indeterminate}
               </div>
             </div>
 
@@ -78,25 +64,6 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
               The input is described by the summary and description but not the tooltip.
               Screenreaders will come across the tooltip naturally as focus moves toward
               the Checkbox.
-
-              —
-
-              A native input isn't necessary given the component itself is form associated.
-              A button, for example, could also be made to work. But an input gives us a
-              few things that together make using one worthwhile:
-
-              - "change" and "input" events.
-              - Toggling checked using the spacebar.
-              - ":checked" and ":indeterminate" pseudo classes, which browsers don't support
-                on hosts even when a component is form-associated.
-
-              -
-
-              aria-invalid is set based on whether the validation feedback is displayed. This
-              is to handle an odd behavior with checkboxes where "Invalid Data" is announced
-              on required unchecked inputs. While this is technically correct, it's
-              inconsistent with how other form controls behave as their validity isn’t announced
-              on screen readers by default before validation.
             -->
             <div class="input-and-checkbox" slot="control">
               <input
@@ -120,7 +87,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
                 class=${classMap({checkbox:!0,disabled:this.disabled,error:this.#l})}
               >
                 <div class="checked-icon">${checkedIcon}</div>
-                ${indeterminateIcon}
+                ${icons.indeterminate}
               </div>
             </div>
 
@@ -138,4 +105,17 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length
                   >`))}
             </div>
           </glide-core-private-label>`))}
-    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#s.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#s.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#s.value)}get willValidate(){return this.#a.willValidate}updated(){this.#s.value&&(this.#s.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#s=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#r=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#a=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#s;#a;#o;#e;#h;#i;#r;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([state()],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#s.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#s.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#s.value)}get willValidate(){return this.#a.willValidate}updated(){this.#s.value&&(this.#s.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#s=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#o=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#a=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#s;#a;#r;#e;#h;#i;#o;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([state()],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
+    <svg
+      style=${styleMap({height:"0.875rem",width:"0.875rem"})}
+      viewBox="0 0 14 14"
+      fill="none"
+      class="indeterminate-icon"
+    >
+      <rect x="0.5" y="0.5" width="0.8125rem" height="0.8125rem" rx="3.5" />
+      <path
+        d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z"
+        fill="currentColor"
+      />
+    </svg>
+  `};

package/dist/checkbox.styles.js

@@ -2,17 +2,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     ${focusOutline(".input:focus-visible ~ .checkbox")}
     ${focusOutline(".input:focus ~ .checkbox.error")}
   `,css`
-    /*
-Most states are handled on the host. But ":checked" and ":indeterminate" are
-handled on the input because browsers don't support those classes on the host.
-And using attribute selectors won't work because those attributes, same as
-native, don't change when their properties do.
-
-TODO
-Use the ":checked" and ":indeterminate" pseudo classes on the host and throughout
-when browsers support them.
-*/
-
     .label-and-input-and-checkbox {
       align-items: center;
       display: flex;
@@ -45,7 +34,7 @@ when browsers support them.
     .input-and-checkbox {
       block-size: 0.875rem;
 
-      /* Prevent shrinkage when the summary wraps. */
+      /* Don't shrink when the summary wraps. */
       flex-shrink: 0;
       inline-size: 0.875rem;
       position: relative;

package/dist/drawer.d.ts

@@ -5,23 +5,20 @@ declare global {
     }
 }
 /**
+ * @event toggle
  *
  * @cssprop [--width] - The width the drawer.
  *
- * @event close
- *
  * @slot - The content of the Drawer.
  */
 export default class GlideCoreDrawer extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label: string;
+    label?: string;
     pinned: boolean;
     get open(): boolean;
     set open(isOpen: boolean);
-    close(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    show(): void;
 }

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,n=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};import{LitElement,html,nothing}from"lit";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 styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#i}set open(e){this.#i=e,this.#i?(async()=>{this.#s?.cancel(),this.#e?.value?.classList?.add("open"),this.#o=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:300,fill:"forwards",easing:"ease-in",composite:"add"}),await(this.#o?.finished),this.#e?.value?.focus()})():(async()=>{this.#o?.cancel(),this.#s=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:300,fill:"forwards",composite:"add"}),await(this.#s?.finished),this.#e?.value?.classList?.remove("open"),this.dispatchEvent(new Event("close",{bubbles:!0}))})()}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#i&&this.#e?.value?.classList?.add("open")}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#i?"open":"closed"}" @keydown="${this.#a}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#s;#t;#i;#o;#n(){owSlot(this.#t.value)}#a(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
+var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,a=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,n);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#n?.cancel(),this.#e?.value?.classList?.add("open"),this.#i=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#i?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#i?.cancel(),this.#n=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#n?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){owSlot(this.#t.value),this.#o&&(this.#e?.value?.classList?.add("open"),this.#i=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" @keydown="${this.#s}" ${ref(this.#e)}><slot @slotchange="${this.#a}" ${ref(this.#t)}></slot></aside>`}#n;#e;#t;#o;#i;#s(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#a(){owSlot(this.#t.value)}};__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.styles.js

@@ -25,8 +25,6 @@ import{css}from"lit";export default[css`
     }
 
     .open {
-      /* stylelint-disable-next-line property-no-vendor-prefix */
-      -webkit-backdrop-filter: blur(25px);
       backdrop-filter: blur(25px);
       block-size: auto;
       inline-size: var(--width, 27.375rem);

package/dist/dropdown.d.ts

@@ -11,9 +11,10 @@ declare global {
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
+ * @event toggle
  *
  * @slot - One or more of `<glide-core-dropdown-option>`.
  * @slot description - Additional information or context.