@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/button-group.button.test.basics.js

@@ -17,7 +17,7 @@ it('has defaults', async () => {
     expect(component.disabled).to.be.false;
     expect(component.selected).to.be.false;
     expect(component.value).to.equal('');
-    expect(component).to.have.attribute('value', '');
+    expect(component.getAttribute('value')).to.equal('');
     expect(component).to.not.have.attribute('disabled');
     expect(component).to.not.have.attribute('selected');
 });
@@ -34,29 +34,20 @@ it('can have a label', async () => {
     ></glide-core-button-group-button>`);
     expect(component.shadowRoot?.textContent?.trim()).to.equal('Button');
 });
-it('can have a "prefix" slot', async () => {
-    const component = await fixture(html `<glide-core-button-group-button label="Button">
-      <span slot="prefix">Prefix</span>
-    </glide-core-button-group-button>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="prefix"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Prefix');
-});
 it('sets `aria-checked` when selected', async () => {
     const component = await fixture(html `<glide-core-button-group-button
       label="Button"
       selected
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-checked', 'true');
+    expect(radio?.getAttribute('aria-checked')).to.equal('true');
 });
 it('sets `aria-checked` when not selected', async () => {
     const component = await fixture(html `<glide-core-button-group-button
       label="Button"
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-checked', 'false');
+    expect(radio?.getAttribute('aria-checked')).to.equal('false');
 });
 it('sets `aria-disabled` when disabled', async () => {
     const component = await fixture(html `<glide-core-button-group-button
@@ -64,14 +55,14 @@ it('sets `aria-disabled` when disabled', async () => {
       disabled
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
 });
 it('sets `aria-disabled` when not disabled', async () => {
     const component = await fixture(html `<glide-core-button-group-button
       label="Button"
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
 });
 it('is tabbable when selected', async () => {
     const component = await fixture(html `<glide-core-button-group-button
@@ -79,16 +70,16 @@ it('is tabbable when selected', async () => {
       selected
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('tabindex', '0');
+    expect(radio?.getAttribute('tabindex')).to.equal('0');
 });
 it('is not tabbable when not selected', async () => {
     const component = await fixture(html `<glide-core-button-group-button
       label="Button"
     ></glide-core-button-group-button>`);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('tabindex', '-1');
+    expect(radio?.getAttribute('tabindex')).to.equal('-1');
 });
-it('throws when icon-only and no "prefix" slot', async () => {
+it('throws when icon-only and no "icon" slot', async () => {
     const spy = sinon.spy();
     try {
         await fixture(html `<glide-core-button-group-button

package/dist/button-group.button.test.interactions.js

@@ -9,7 +9,7 @@ it('sets `aria-checked` when selected programmatically', async () => {
     component.selected = true;
     await elementUpdated(component);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-checked', 'true');
+    expect(radio?.getAttribute('aria-checked')).to.equal('true');
 });
 it('sets `aria-checked` when deselected programmatically', async () => {
     const component = await fixture(html `<glide-core-button-group-button
@@ -19,7 +19,7 @@ it('sets `aria-checked` when deselected programmatically', async () => {
     component.selected = false;
     await elementUpdated(component);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-checked', 'false');
+    expect(radio?.getAttribute('aria-checked')).to.equal('false');
 });
 it('sets `aria-disabled` when disabled programmatically', async () => {
     const component = await fixture(html `<glide-core-button-group-button
@@ -28,7 +28,7 @@ it('sets `aria-disabled` when disabled programmatically', async () => {
     component.disabled = true;
     await elementUpdated(component);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('true');
 });
 it('sets `aria-disabled` when enabled programmatically', async () => {
     const component = await fixture(html `<glide-core-button-group-button
@@ -38,5 +38,5 @@ it('sets `aria-disabled` when enabled programmatically', async () => {
     component.disabled = false;
     await elementUpdated(component);
     const radio = component.shadowRoot?.querySelector('[role="radio"]');
-    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.getAttribute('aria-disabled')).to.equal('false');
 });

package/dist/button-group.d.ts

@@ -5,8 +5,6 @@ declare global {
     }
 }
 /**
- * @description A button group.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  *

package/dist/button-group.test.basics.js

@@ -21,11 +21,11 @@ it('has defaults', async () => {
     </glide-core-button-group>`);
     expect(component.orientation).to.equal('horizontal');
     expect(component.variant).to.equal(undefined);
-    expect(component).to.have.attribute('orientation', 'horizontal');
+    expect(component.getAttribute('orientation')).to.equal('horizontal');
     expect(component).to.not.have.attribute('variant');
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-button-group label="label">
+    const component = await fixture(html `<glide-core-button-group label="Label">
       <glide-core-button-group-button
         label="One"
       ></glide-core-button-group-button>
@@ -42,7 +42,7 @@ it('is accessible', async () => {
     });
 });
 it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-button-group label="label">
+    const component = await fixture(html `<glide-core-button-group label="Label">
       <glide-core-button-group-button
         label="One"
       ></glide-core-button-group-button>
@@ -53,8 +53,8 @@ it('can have a label', async () => {
     </glide-core-button-group>`);
     const label = component.shadowRoot?.querySelector('[data-test="label"]');
     const radioGroup = component.shadowRoot?.querySelector('[role="radiogroup"]');
-    expect(label?.textContent).to.equal('label');
-    expect(radioGroup).to.have.attribute('aria-labelledby', label?.id);
+    expect(label?.textContent).to.equal('Label');
+    expect(radioGroup?.getAttribute('aria-labelledby')).to.equal(label?.id);
 });
 it('sets the orientation of each button when horizontal', async () => {
     await fixture(html `<glide-core-button-group>
@@ -85,13 +85,13 @@ it('sets the orientation of each button when vertical', async () => {
     expect(buttons[1]?.privateOrientation).to.equal('vertical');
 });
 it('sets `privateVariant` on each button', async () => {
-    await fixture(html `<glide-core-button-group label="label" variant="icon-only">
+    await fixture(html `<glide-core-button-group label="Label" variant="icon-only">
       <glide-core-button-group-button label="One">
-        <div slot="prefix">Prefix</div>
+        <div slot="icon">Icon</div>
       </glide-core-button-group-button>
 
       <glide-core-button-group-button label="Two">
-        <div slot="prefix">Prefix</div>
+        <div slot="icon">Icon</div>
       </glide-core-button-group-button>
     </glide-core-button-group>`);
     const buttons = document.querySelectorAll('glide-core-button-group-button');
@@ -101,13 +101,13 @@ it('sets `privateVariant` on each button', async () => {
 it('throws when its default slot is the wrong type', async () => {
     await expectArgumentError(() => {
         return fixture(html `
-      <glide-core-button-group label="label">
+      <glide-core-button-group label="Label">
         <div></div>
       </glide-core-button-group>
     `);
     });
     await expectArgumentError(() => {
-        return fixture(html `<glide-core-button-group label="label"> </glide-core-button-group>`);
+        return fixture(html `<glide-core-button-group label="Label"> </glide-core-button-group>`);
     });
 });
 it('selects the first button not disabled', async () => {

package/dist/button-group.test.events.js

@@ -157,7 +157,7 @@ it('emits a "change" event when a button is selected via Space', async () => {
     </glide-core-button-group>`);
     const buttons = document.querySelectorAll('glide-core-button-group-button');
     buttons[1]?.focus();
-    sendKeys({ press: 'Space' });
+    sendKeys({ press: ' ' });
     const event = await oneEvent(component, 'input');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
@@ -196,7 +196,7 @@ it('does not emit a "change" event when an already selected button is selected v
     buttons[0]?.focus();
     const spy = sinon.spy();
     component.addEventListener('change', spy);
-    sendKeys({ press: 'Space' });
+    sendKeys({ press: ' ' });
     expect(spy.callCount).to.equal(0);
 });
 it('does not emit a "change" event a button is selected programmatically', async () => {

package/dist/button-group.test.interactions.js

@@ -68,7 +68,7 @@ it('selects a button on Space', async () => {
     </glide-core-button-group>`);
     const buttons = document.querySelectorAll('glide-core-button-group-button');
     buttons[1]?.focus();
-    await sendKeys({ press: 'Space' });
+    await sendKeys({ press: ' ' });
     expect(buttons[0].selected).to.be.false;
     expect(buttons[1].selected).to.be.true;
 });

package/dist/button.d.ts

@@ -5,21 +5,18 @@ declare global {
     }
 }
 /**
- *
- * @description A group of buttons that work like radios—with labels and optional icons.
- *
- * @slot - A label for the contents of the button.
- * @slot prefix - An optional icon slot to display before the label.
- * @slot suffix - An optional icon slot to display after the label.
+ * @slot - A label.
+ * @slot prefix-icon - An optional icon before the label.
+ * @slot suffix-icon - An optional icon after the label.
  */
 export default class GlideCoreButton extends LitElement {
     #private;
     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;
-    ariaControls: string | null;
     autofocus: boolean;
     disabled: boolean;
     formAction: string;
@@ -27,6 +24,7 @@ export default class GlideCoreButton extends LitElement {
     formMethod: '' | 'dialog' | 'get' | 'post';
     formNoValidate: boolean;
     formTarget: '' | '_blank' | '_parent' | '_self' | '_top';
+    label?: string;
     name: string;
     popoverTarget?: string;
     popoverTargetAction: '' | 'hide' | 'show' | 'toggle';
@@ -36,9 +34,8 @@ export default class GlideCoreButton extends LitElement {
     variant: 'primary' | 'secondary' | 'tertiary';
     get form(): HTMLFormElement | null;
     click(): void;
-    firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     constructor();
-    private hasPrefixSlot;
-    private hasSuffixSlot;
+    private hasPrefixIcon;
+    private hasSuffixIcon;
 }

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<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=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>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,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.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()}firstUpdated(){owSlot(this.#o.value)}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,"has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" ?disabled="${this.disabled}" @click="${this.#r}" ${ref(this.#e)}><slot name="prefix" @slotchange="${this.#i}" ${ref(this.#a)}></slot><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot><slot name="suffix" @slotchange="${this.#s}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.ariaExpanded=null,this.ariaHasPopup=null,this.ariaControls=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.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#o=createRef(),this.#a=createRef(),this.#n=createRef(),this.#t=this.attachInternals()}#e;#o;#t;#a;#n;#r(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#l(){owSlot(this.#o.value)}#i(){const t=this.#a.value?.assignedNodes();this.hasPrefixSlot=Boolean(t&&t.length>0)}#s(){const t=this.#n.value?.assignedNodes();this.hasSuffixSlot=Boolean(t&&t.length>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({attribute:"aria-controls",reflect:!0})],GlideCoreButton.prototype,"ariaControls",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,"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,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixSlot",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;
+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;

package/dist/button.styles.js

@@ -35,15 +35,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         opacity: 1;
       }
 
-      /* We remove spacing using negative margin when an icon is present to help with empty space balancing */
-      &.has-prefix,
-      ::slotted([slot='prefix']) {
-        margin-inline-start: -0.125rem;
+      &.prefix-icon {
+        padding-inline-start: 0.875rem;
       }
 
-      &.has-suffix,
-      ::slotted([slot='suffix']) {
-        margin-inline-end: -0.125rem;
+      &.suffix-icon {
+        padding-inline-end: 0.875rem;
       }
 
       &.primary {

package/dist/button.test.basics.js

@@ -1,20 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button.js';
-import { ArgumentError } from 'ow';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreButton from './button.js';
-import sinon from 'sinon';
 GlideCoreButton.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-button')).to.equal(GlideCoreButton);
 });
 it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-button>Button</glide-core-button>`);
+    const component = await fixture(html `<glide-core-button label="Label"></glide-core-button>`);
     await expect(component).to.be.accessible();
 });
 it('has defaults', async () => {
     const component = await fixture(html `
-    <glide-core-button>Button</glide-core-button>
+    <glide-core-button label="Label"></glide-core-button>
   `);
     expect(component.ariaControls).to.be.null;
     expect(component.ariaExpanded).to.be.null;
@@ -48,38 +46,24 @@ it('has defaults', async () => {
     expect(button?.getAttribute('aria-controls')).to.be.null;
     expect(button?.ariaExpanded).to.be.null;
     expect(button?.ariaHasPopup).to.be.null;
-    expect(button?.disabled).to.equal(false);
+    expect(button?.disabled).to.be.false;
 });
 it('delegates focus', async () => {
-    const component = await fixture(html `<glide-core-button>Button</glide-core-button>`);
+    const component = await fixture(html `<glide-core-button label="Label"></glide-core-button>`);
     component.focus();
     expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
 });
-it('throws if it does not have a default slot', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-button></glide-core-button>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('`#onPrefixSlotChange` coverage', async () => {
+it('has `#onPrefixSlotChange` coverage', async () => {
     await fixture(html `
-    <glide-core-button>
-      <span slot="prefix">Prefix</span>
-      Button
+    <glide-core-button label="Label">
+      <span slot="prefix-icon">Prefix</span>
     </glide-core-button>
   `);
 });
-it('`#onSuffixSlotChange` coverage', async () => {
+it('has `#onSuffixIconSlotChange` coverage', async () => {
     await fixture(html `
-    <glide-core-button>
-      Button
-      <span slot="suffix">Suffix</span>
+    <glide-core-button label="Label">
+      <span slot="suffix-icon">Suffix</span>
     </glide-core-button>
   `);
 });

package/dist/button.test.events.js

@@ -6,7 +6,7 @@ import GlideCoreButton from './button.js';
 GlideCoreButton.shadowRootOptions.mode = 'open';
 it('dispatches a "click" event when clicked', async () => {
     const component = await fixture(html `
-    <glide-core-button type="button">Button</glide-core-button>
+    <glide-core-button label="Label" type="button"></glide-core-button>
   `);
     setTimeout(() => {
         component.click();
@@ -17,7 +17,7 @@ it('dispatches a "click" event when clicked', async () => {
 });
 it('dispatches a "click" event on Enter', async () => {
     const component = await fixture(html `
-    <glide-core-button type="button">Button</glide-core-button>
+    <glide-core-button label="Label" type="button"></glide-core-button>
   `);
     component.focus();
     sendKeys({ press: 'Enter' });
@@ -27,7 +27,7 @@ it('dispatches a "click" event on Enter', async () => {
 });
 it('dispatches a "click" event on Space', async () => {
     const component = await fixture(html `
-    <glide-core-button type="button">Button</glide-core-button>
+    <glide-core-button label="Label" type="button"></glide-core-button>
   `);
     component.focus();
     sendKeys({ press: ' ' });
@@ -37,7 +37,7 @@ it('dispatches a "click" event on Space', async () => {
 });
 it('dispatches a "reset" event on click', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
         parentNode: form,
     });
     setTimeout(() => {
@@ -48,7 +48,7 @@ it('dispatches a "reset" event on click', async () => {
 });
 it('dispatches a "reset" event on Enter', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
         parentNode: form,
     });
     component.focus();
@@ -58,7 +58,7 @@ it('dispatches a "reset" event on Enter', async () => {
 });
 it('dispatches a "reset" event on Space', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="reset"></glide-core-button>`, {
         parentNode: form,
     });
     component.focus();
@@ -68,7 +68,7 @@ it('dispatches a "reset" event on Space', async () => {
 });
 it('dispatches a "submit" event on click', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
         parentNode: form,
     });
     form.addEventListener('submit', (event) => event.preventDefault());
@@ -80,7 +80,7 @@ it('dispatches a "submit" event on click', async () => {
 });
 it('dispatches a "submit" event on Enter', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
         parentNode: form,
     });
     form.addEventListener('submit', (event) => event.preventDefault());
@@ -91,7 +91,7 @@ it('dispatches a "submit" event on Enter', async () => {
 });
 it('dispatches a "submit" event on Space', async () => {
     const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
+    const component = await fixture(html ` <glide-core-button label="Label" type="submit"></glide-core-button>`, {
         parentNode: form,
     });
     form.addEventListener('submit', (event) => event.preventDefault());

package/dist/checkbox-group.d.ts

@@ -6,8 +6,6 @@ declare global {
     }
 }
 /**
- * @description A group of checkboxes with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
- *
  * @event change - `(event: Event) => void`
  * @event input - `(event: Event) => void`
  * @event invalid - `(event: Event) => void`
@@ -25,12 +23,13 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     set disabled(isDisabled: boolean);
     hideLabel: boolean;
     label?: string;
-    name?: string;
+    name: string;
     privateSplit?: 'left' | 'middle';
     get required(): boolean;
     set required(isRequired: boolean);
     summary?: string;
-    value: readonly string[];
+    get value(): string[];
+    set value(value: string[]);
     checkValidity(): boolean;
     disconnectedCallback(): void;
     firstUpdated(): void;

package/dist/checkbox-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import"./label.js";import{LitElement,html}from"lit";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{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}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()}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(owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreCheckbox]),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.#l.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#a.value):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 class="component" data-test="component" ${ref(this.#a)}><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#d}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#c}" @slotchange="${this.#n}" ${ref(this.#s)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.value=[],this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#a=createRef(),this.#s=createRef(),this.#e=!1,this.#i=!1,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()}))}#a;#s;#o;#e;#i;get#t(){return this.#s.value?this.#s.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#h(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#l(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#h()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#n(){owSlot(this.#s.value),owSlotType(this.#s.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({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import"./label.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{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}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(owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox]),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({valueMissing:!0}," ",this.#d.value):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.#s)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#d)}><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#c}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control" class="${classMap({"checkbox-container":!0,invalid:this.#c})}"><slot class="checkboxes" @change="${this.#n}" @private-value-change="${this.#h}" @slotchange="${this.#p}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#l=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()}))}#d;#l;#o;#e;#i;#r;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#s;get#c(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#n(){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.#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)))}#p(){owSlot(this.#l.value),owSlotType(this.#l.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),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -11,10 +11,22 @@ import{css}from"lit";export default[css`
       align-items: flex-start;
     }
 
+    .checkbox-container {
+      display: flex;
+      gap: 0.375rem;
+      inline-size: min-content;
+
+      &.invalid {
+        border: 1px solid var(--glide-core-status-error);
+        border-radius: 0.5rem;
+        padding: var(--glide-core-spacing-xxs) 0.375rem;
+      }
+    }
+
     .checkboxes {
       display: flex;
       flex-direction: column;
       grid-column: 2;
-      row-gap: var(--glide-core-spacing-xxs);
+      row-gap: var(--glide-core-spacing-xs);
     }
   `];

package/dist/checkbox-group.test.basics.js

@@ -13,13 +13,9 @@ it('has defaults', async () => {
     const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
       <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
     </glide-core-checkbox-group>`);
-    expect(component.hasAttribute('disabled')).to.be.false;
     expect(component.disabled).to.be.false;
-    expect(component.hasAttribute('hide-label')).to.be.false;
     expect(component.hideLabel).to.be.false;
-    expect(component.getAttribute('name')).to.be.null;
-    expect(component.name).to.equal(undefined);
-    expect(component.hasAttribute('required')).to.be.false;
+    expect(component.name).to.be.empty.string;
     expect(component.required).to.be.false;
     // Not reflected, so no attribute assertion is necessary.
     expect(component.value).to.deep.equal([]);
@@ -72,10 +68,10 @@ it('can be disabled initially', async () => {
       <glide-core-checkbox label="Two"></glide-core-checkbox>
     </glide-core-checkbox-group>`);
     const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(checkboxes[0].disabled).to.equal(true);
-    expect(checkboxes[1].disabled).to.equal(true);
+    expect(checkboxes[0].disabled).to.be.true;
+    expect(checkboxes[1].disabled).to.be.true;
     expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.equal(true);
+    expect(component.disabled).to.be.true;
 });
 it('can be disabled dynamically', async () => {
     const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
@@ -85,17 +81,17 @@ it('can be disabled dynamically', async () => {
     component.disabled = true;
     await elementUpdated(component);
     const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(checkboxes[0].disabled).to.equal(true);
-    expect(checkboxes[1].disabled).to.equal(true);
+    expect(checkboxes[0].disabled).to.be.true;
+    expect(checkboxes[1].disabled).to.be.true;
     expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.equal(true);
+    expect(component.disabled).to.be.true;
 });
 it('can be required', async () => {
     const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
       <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
     </glide-core-checkbox-group>`);
     expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.equal(true);
+    expect(component.required).to.be.true;
 });
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();

package/dist/checkbox-group.test.focus.js

@@ -58,13 +58,13 @@ it('reports validity of checkboxes if blurred', async () => {
     expect(document.activeElement === checkboxes[0]).to.be.true;
     await sendKeys({ press: 'Tab' });
     expect(document.activeElement === checkboxes[1]).to.be.true;
-    expect(checkboxes[0].isReportValidityOrSubmit).to.equal(false);
-    expect(checkboxes[1].isReportValidityOrSubmit).to.equal(false);
+    expect(checkboxes[0].isReportValidityOrSubmit).to.be.false;
+    expect(checkboxes[1].isReportValidityOrSubmit).to.be.false;
     await sendKeys({ press: 'Tab' });
     expect(document.activeElement === document.body).to.be.true;
-    expect(component.validity.valid).to.equal(false);
-    expect(checkboxes[0].validity.valid).to.equal(false);
-    expect(checkboxes[0].isReportValidityOrSubmit).to.equal(true);
-    expect(checkboxes[1].validity.valid).to.equal(false);
-    expect(checkboxes[1].isReportValidityOrSubmit).to.equal(true);
+    expect(component.validity.valid).to.be.false;
+    expect(checkboxes[0].validity.valid).to.be.false;
+    expect(checkboxes[0].isReportValidityOrSubmit).to.be.true;
+    expect(checkboxes[1].validity.valid).to.be.false;
+    expect(checkboxes[1].isReportValidityOrSubmit).to.be.true;
 });

package/dist/checkbox-group.test.interactions.d.ts

@@ -0,0 +1 @@
+import './checkbox.js';