@crowdstrike/glide-core 0.19.4 → 0.20.0

package/README.md

@@ -1,24 +1,23 @@
-<div align="center">
+<p align="center">
   <a href="https://glide-core.crowdstrike-ux.workers.dev">
     <picture alt="Glide Core Logo">
       <source srcset="https://github.com/CrowdStrike/glide-core/blob/main/.github/logos/light.png?raw=true" media="(prefers-color-scheme: light)" />
       <source srcset="https://github.com/CrowdStrike/glide-core/blob/main/.github/logos/dark.png?raw=true" media="(prefers-color-scheme: dark)" />
-      <img src="https://github.com/CrowdStrike/glide-core/blob/main/.github/logos/light.png?raw=true" />
+      <img src="https://github.com/CrowdStrike/glide-core/blob/main/.github/logos/light.png?raw=true" width="500" />
     </picture>
-
   </a>
+</p>
 
-  <p align="center"> 
-    A Web Component design system from CrowdStrike.
-  </p>
-</div>
+<p align="center"> 
+  A Web Component design system from CrowdStrike.
+</p>
 
 ## Usage
 
 ### 1. Install the dependencies
 
 ```bash
-$ pnpm install @crowdstrike/glide-core lit
+pnpm install @crowdstrike/glide-core lit
 ```
 
 ### 2. Import the fonts and variables
@@ -39,21 +38,3 @@ import '@crowdstrike/glide-core/button.js';
 ```html
 <glide-core-button label="Button"></glide-core-button>
 ```
-
-## Development
-
-### Getting started
-
-```bash
-$ pnpm install
-$ pnpm start
-```
-
-- Follow our [contribution guidelines](./CONTRIBUTING.md) before opening a pull request.
-- We recommend using [Corepack](https://pnpm.io/installation#using-corepack) to manage PNPM.
-- If you have `ignore-scripts=true` in your `~/.npmrc`, also run `pnpm prepare` to install the Git hooks.
-
-### Updating style variables
-
-1. Generate a Figma [personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
-1. `$ FIGMA_TOKEN=<token> pnpm start:production:figma`

package/dist/accordion.d.ts

@@ -5,17 +5,26 @@ declare global {
     }
 }
 /**
- * @event toggle
+ * @attr {string} label
+ * @attr {boolean} [open=false]
  *
- * @slot - The content of the accordion.
- * @slot prefix-icon - An optional icon before the label.
- * @slot suffix-icons - Optional icons after the label.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element | string} - The content of the accordion
+ * @slot {Element} [prefix-icon] - An icon before the label
+ * @slot {Element} [suffix-icons] - Icons after the label
+ *
+ * @fires {Event} toggle
  */
 export default class GlideCoreAccordion extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
     readonly version: string;

package/dist/accordion.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,n=l<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--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}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.#l.value?.click()}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.#l)}>${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.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.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([property({reflect:!0})],GlideCoreAccordion.prototype,"version",void 0),__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 i,l=arguments.length,n=l<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--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}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.#l.value?.click()}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.#l)}>${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.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0}),required],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"version",void 0),__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"),final],GlideCoreAccordion);export default GlideCoreAccordion;

package/dist/button-group.button.d.ts

@@ -5,14 +5,26 @@ declare global {
     }
 }
 /**
- * @slot - A label.
- * @slot icon - An optional icon before the label.
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [selected=false]
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element} [icon]
+ *
+ * @fires {Event} selected
  */
 export default class GlideCoreButtonGroupButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label?: string | undefined;
+    label?: string;
+    /**
+     * @default false
+     */
     get selected(): boolean;
     set selected(isSelected: boolean);
     disabled: boolean;
@@ -22,6 +34,7 @@ export default class GlideCoreButtonGroupButton extends LitElement {
     readonly version: string;
     click(): void;
     focus(options?: FocusOptions): void;
+    privateSelect(): void;
     render(): import("lit").TemplateResult<1>;
     private hasIcon;
 }

package/dist/button-group.button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#t=createRef(),this.#e=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(t){this.#o=t,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#t.value?.click()}focus(t){this.#t.value?.focus(t)}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#e)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#t;#e;#o;#r(){const t=this.#e.value?.assignedNodes();this.hasIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(e){this.#o=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#t)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;

package/dist/button-group.d.ts

@@ -5,18 +5,29 @@ declare global {
     }
 }
 /**
- * @event selected
+ * @attr {string} label
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {'icon-only'} [variant]
  *
- * @slot - One or more of `<glide-core-button-group-button>`.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {GlideCoreButtonGroupButton}
  */
 export default class GlideCoreButtonGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label?: string | undefined;
-    get variant(): "icon-only" | undefined;
+    label?: string;
+    /**
+     * @default undefined
+     */
+    get variant(): 'icon-only' | undefined;
     set variant(variant: 'icon-only' | undefined);
-    get orientation(): "horizontal" | "vertical";
+    /**
+     * @default 'horizontal'
+     */
+    get orientation(): 'horizontal' | 'vertical';
     set orientation(orientation: 'horizontal' | 'vertical');
     readonly version: string;
     render(): import("lit").TemplateResult<1>;

package/dist/button-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,s=i<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 l=t.length-1;l>=0;l--)(n=t[l])&&(s=(i<3?n(s):i>3?n(e,o,s):n(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version,this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#t=t}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.#n}" @keydown="${this.#i}" @private-selected="${this.#s}" @slotchange="${this.#l}" ${assertSlot([GlideCoreButtonGroupButton])} ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#l(){if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#n(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(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.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.#r.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.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})))}}}#s(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#r)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),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,l=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(e,o,l):i(e,o))||l);return n>3&&l&&Object.defineProperty(e,o,l),l};import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#t=t}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.#i}" @keydown="${this.#n}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([GlideCoreButtonGroupButton])} ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#i(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#n(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();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.privateSelect()}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group"),final],GlideCoreButtonGroup);export default GlideCoreButtonGroup;

package/dist/button.d.ts

@@ -5,9 +5,22 @@ declare global {
     }
 }
 /**
- * @slot - A label.
- * @slot prefix-icon - An optional icon before the label.
- * @slot suffix-icon - An optional icon after the label.
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [name='']
+ * @attr {'large'|'small'} [size='large']
+ * @attr {'button'|'submit'|'reset'} [type='button']
+ * @attr {string} [value='']
+ * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element} [prefix-icon] - An icon before the label
+ * @slot {Element} [suffix-icon] - An icon after the label
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
  */
 export default class GlideCoreButton extends LitElement {
     #private;

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}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.#r}" ${ref(this.#i)}></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.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#i=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#i;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const e=this.#i.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([property({reflect:!0})],GlideCoreButton.prototype,"version",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,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}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.#r}" ${ref(this.#i)}></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.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#i=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#i;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const e=this.#i.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}),required],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([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;

package/dist/checkbox-group.d.ts

@@ -7,18 +7,56 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
- * @event invalid
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
+ * @attr {string[]} [value=[]]
  *
- * @slot - One or more of `<glide-core-checkbox>`.
- * @slot description - Additional information or context.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {GlideCoreCheckbox}
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
  */
 export default class GlideCoreCheckboxGroup extends LitElement implements FormControl {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     hideLabel: boolean;
@@ -26,10 +64,16 @@ export default class GlideCoreCheckboxGroup extends LitElement implements FormCo
     name: string;
     orientation: "horizontal";
     privateSplit?: 'left' | 'middle';
+    /**
+     * @default false
+     */
     get required(): boolean;
     set required(isRequired: boolean);
     summary?: string;
     tooltip?: string;
+    /**
+     * @default []
+     */
     get value(): string[];
     set value(value: string[]);
     readonly version: string;
@@ -38,7 +82,6 @@ export default class GlideCoreCheckboxGroup extends LitElement implements FormCo
     firstUpdated(): void;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
-    get willValidate(): boolean;
     focus(options?: FocusOptions): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;

package/dist/checkbox-group.js

@@ -1,9 +1,10 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<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 l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal",e.addEventListener("blur",this.#a.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,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 l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#r}set value(e){this.#r=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal",e.addEventListener("blur",this.#a.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
       class="component"
       data-test="component"
       ${ref(this.#l)}
     >
       <glide-core-private-label
+        label=${ifDefined(this.label)}
         orientation=${this.orientation}
         split=${ifDefined(this.privateSplit??void 0)}
         tooltip=${ifDefined(this.tooltip)}
@@ -22,23 +23,33 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
           class=${classMap({"checkbox-container":!0,invalid:this.#d})}
         >
           <slot
-            class="checkboxes"
+            class="default-slot"
             @change=${this.#n}
             @private-value-change=${this.#c}
             ${assertSlot([GlideCoreCheckbox])}
             ${ref(this.#h)}
-          ></slot>
+          >
+            <!--
+              @type {GlideCoreCheckbox}
+              @required
+            -->
+          </slot>
         </div>
 
         <div id="description" slot="description">
           <slot
             class=${classMap({description:!0,hidden:Boolean(this.#d&&this.validityMessage)})}
             name="description"
-          ></slot>
+          >
+            <!-- 
+              Additional information or context
+              @type {Element | string}
+            -->
+          </slot>
 
           ${when(this.#d&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
                 >${unsafeHTML(this.validityMessage)}</span
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#h=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({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()}))}#l;#h;#o;#e;#i;#s;get#t(){return this.#h.value?this.#h.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#p(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#p()}#n(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)))}#c(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)))}};__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({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",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})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__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}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#h=createRef(),this.#e=!1,this.#i=!1,this.#r=[],this.#s=({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()}))}#l;#h;#o;#e;#i;#r;get#t(){return this.#h.value?this.#h.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#s;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#p(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#p()}#n(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)))}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#r.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#r.filter((t=>t!==e.detail.old)))}};__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}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",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})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__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"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -23,7 +23,7 @@ import{css}from"lit";export default[css`
       }
     }
 
-    .checkboxes {
+    .default-slot {
       display: flex;
       flex-direction: column;
       grid-column: 2;

package/dist/checkbox.d.ts

@@ -8,12 +8,50 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
- * @event invalid
+ * @attr {string} label
+ * @attr {boolean} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {boolean} [indeterminate=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
+ * @attr {string} [value]
  *
- * @slot description - Additional information or context.
- * @slot private-icon
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ * @slot {Element} [private-icon]
+ *
+ * @fires {Event} change
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
  */
 export default class GlideCoreCheckbox extends LitElement implements FormControl {
     #private;
@@ -21,10 +59,13 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     checked: boolean;
-    internallyInert: boolean;
+    privateInternallyInert: boolean;
     disabled: boolean;
     hideLabel: boolean;
     indeterminate: boolean;
+    /**
+     * @default undefined
+     */
     get label(): string | undefined;
     set label(label: string | undefined);
     orientation: 'horizontal' | 'vertical';
@@ -38,12 +79,14 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
     required: boolean;
     summary?: string;
     tooltip?: string;
+    /**
+     * @default undefined
+     */
     get value(): string;
     set value(value: string);
     privateIsReportValidityOrSubmit: boolean;
     readonly version: string;
     get form(): HTMLFormElement | null;
-    blur(): void;
     checkValidity(): boolean;
     click(): void;
     connectedCallback(): void;
@@ -57,7 +100,6 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
     resetValidityFeedback(): void;
     setCustomValidity(message: string): void;
     setValidity(flags?: ValidityStateFlags, message?: string): void;
-    get willValidate(): boolean;
     updated(): void;
     constructor();
     private isBlurring;