@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/radio-group.test.validity.js

@@ -0,0 +1,228 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreRadio from './radio.js';
+import GlideCoreRadioGroup from './radio-group.js';
+GlideCoreRadio.shadowRootOptions.mode = 'open';
+GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
+it('is valid if not required and radios are unchecked', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    const radios = component.querySelectorAll('glide-core-radio');
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]?.ariaInvalid).to.equal('false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]?.ariaInvalid).to.equal('false');
+});
+it('is valid if required and a radio is checked', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+    const radios = component.querySelectorAll('glide-core-radio');
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]?.ariaInvalid).to.equal('false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]?.ariaInvalid).to.equal('false');
+});
+it('is invalid if required and no radio is checked', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+});
+it('is both invalid and valid if required but disabled and no radio is checked', async () => {
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('adds an error class after submit when invalid and required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    form.requestSubmit();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.true;
+});
+it('adds an error class after `reportValidity` is called when invalid and required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.reportValidity();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.true;
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]?.invalid).to.be.true;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'true');
+    expect(radios[1]?.invalid).to.be.true;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'true');
+});
+it('does not add an error class by default', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.false;
+    const radios = document.querySelectorAll('glide-core-radio');
+    let isRadioError = radios[0].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    isRadioError = radios[1].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+});
+it('does not add an error class after `reportValidity` is called when not required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.reportValidity();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.false;
+    const radios = document.querySelectorAll('glide-core-radio');
+    let isRadioError = radios[0].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    isRadioError = radios[1].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+});
+it('does not add an error class after `reportValidity` is called when required and a radio is checked', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.reportValidity();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.false;
+    const radios = document.querySelectorAll('glide-core-radio');
+    let isRadioError = radios[0].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    isRadioError = radios[1].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+});
+it('does not add an error class after `reportValidity` is called when required but disabled', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.reportValidity();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.false;
+    const radios = document.querySelectorAll('glide-core-radio');
+    let isRadioError = radios[0].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    isRadioError = radios[1].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+});
+it('does not add an error class after `checkValidity` is called when required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.checkValidity();
+    await elementUpdated(component);
+    const isComponentErrorClass = component.shadowRoot
+        ?.querySelector('.radio-container')
+        ?.classList.contains('invalid');
+    expect(isComponentErrorClass).to.be.false;
+    const radios = document.querySelectorAll('glide-core-radio');
+    let isRadioError = radios[0].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    isRadioError = radios[1].shadowRoot
+        ?.querySelector('[data-test="radio"]')
+        ?.classList.contains('invalid');
+    expect(isRadioError).to.be.false;
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+});
+it('sets radios as valid initially when required', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-radio-group label="label" name="name" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>`, { parentNode: form });
+    component.required = false;
+    await elementUpdated(component);
+    const radios = component.querySelectorAll('glide-core-radio');
+    expect(radios[0]?.invalid).to.be.false;
+    expect(radios[0]?.ariaInvalid).to.equal('false');
+    expect(radios[1]?.invalid).to.be.false;
+    expect(radios[1]?.ariaInvalid).to.equal('false');
+});

package/dist/radio.js

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(d,r,e,l)=>{for(var a=l>1?void 0:l?f(r,e):r,h=d.length-1,o;h>=0;h--)(o=d[h])&&(a=(l?o(r,e,a):o(a))||a);return l&&a&&p(r,e,a),a};import{LitElement as n,html as u}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{customElement as b,property as s}from"lit/decorators.js";import m from"./radio.styles.js";let t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.label=""}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.ariaLabel=this.label}render(){return u`<span class="${c({component:!0,disabled:this.disabled})}"><span id="radio" class="${c({"radio-circle":!0,checked:this.checked})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&(this.ariaLabel=this.label))}};t.shadowRootOptions={...n.shadowRootOptions,mode:"closed"},t.styles=m,i([s({type:Boolean,reflect:!0})],t.prototype,"checked",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({type:Boolean})],t.prototype,"invalid",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s()],t.prototype,"value",2),i([s({reflect:!0})],t.prototype,"label",2),t=i([b("glide-core-radio")],t);export{t as default};
+var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length,d=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(d=(a<3?o(d):a>3?o(t,i,d):o(t,i))||d);return a>3&&d&&Object.defineProperty(t,i,d),d};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="",this.label=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.ariaLabel=this.label}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}"><span id="radio" class="${classMap({"radio-circle":!0,checked:this.checked})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&(this.ariaLabel=this.label))}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",void 0),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"invalid",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"required",void 0),__decorate([property()],GlideCoreRadio.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",void 0),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;

package/dist/radio.styles.js

@@ -1,18 +1,13 @@
-"use strict";import{css as e}from"lit";import r from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     :host {
       display: flex;
+      outline: none;
     }
 
+    /* Using nesting creates an issue on Safari with :host */
     /* stylelint-disable-next-line csstools/use-nesting */
-    :host(:focus-visible) {
-      outline: none;
-
-      & .component .radio-circle {
-        box-shadow: var(--glide-core-glow-sm);
-
-        ${r};
-        outline-offset: 4px;
-      }
+    :host(:focus-visible) .component .radio-circle {
+      ${focusOutline};
     }
 
     .component {
@@ -25,45 +20,33 @@
       & .radio-circle {
         align-items: center;
         appearance: none;
-        background-color: var(--glide-core-color-white);
-        block-size: 0.875rem;
+        block-size: 1rem;
         border: 1px solid var(--glide-core-border-base-dark);
         border-radius: 50%;
         box-sizing: border-box;
         content: ' ';
         display: inline-flex;
-        inline-size: 0.875rem;
+        inline-size: 1rem;
         margin: 0;
         margin-inline-end: 0.625rem;
-        min-inline-size: 0.875rem;
+        min-inline-size: 1rem;
         padding: 0;
         position: relative;
 
         &.checked {
+          background-color: var(--glide-core-color-white);
           border-color: var(--glide-core-surface-primary);
 
           &::after {
             background-color: var(--glide-core-surface-primary);
-
-            /*
-              svg in figma has viewbox 16px, with inner circle radius of 8px, however figma element has height & width of 14px;
-              14px = 0.875rem;
-              8px * 0.875 = 7px = 0.4375rem;
-            */
-            block-size: 0.4375rem;
+            block-size: 0.5rem;
             border-radius: 50%;
             box-sizing: border-box;
             content: ' ';
             display: block;
-            inline-size: 0.4375rem;
-
-            /*
-              svg in figma has viewbox 16px, however figma element has height & width of 14px;
-              14px/16px = 0.875;
-              4px radius * 0.875 = 3.5px = 0.21875rem;
-            */
-            inset-block-start: calc(50% - 0.2187rem);
-            inset-inline-start: calc(50% - 0.2187rem);
+            inline-size: 0.5rem;
+            inset-block-start: calc(50% - 0.25rem);
+            inset-inline-start: calc(50% - 0.25rem);
             position: absolute;
           }
         }
@@ -89,4 +72,4 @@
         }
       }
     }
-  `];
+  `];

package/dist/split-button.d.ts

@@ -0,0 +1,27 @@
+import './menu.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-button': GlideCoreSplitButton;
+    }
+}
+/**
+ * @description A button to be used in the `primary-action` slot of `glide-core-split-container`.
+ *
+ * @slot prefix - An optional icon slot to display before the label.
+ * @slot - A label for the contents of the button.
+ */
+export default class GlideCoreSplitButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    ariaControls: string | null;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
+    disabled: boolean;
+    variant: 'primary' | 'secondary';
+    size: 'large' | 'small';
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private hasPrefixSlot;
+}

package/dist/split-button.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,a=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var s=t.length-1;s>=0;s--)(l=t[s])&&(a=(r<3?l(a):r>3?l(e,o,a):l(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};import"./menu.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 styles from"./split-button.styles.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}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)}" class="${classMap({component:!0,disabled:this.disabled,[this.variant]:!0,[this.size]:!0,"has-prefix":this.hasPrefixSlot})}" data-test="split-button" type="button" ?disabled="${this.disabled}"><slot name="prefix" @slotchange="${this.#o}" ${ref(this.#e)} data-test="prefix-slot"></slot><slot @slotchange="${this.#i}" ${ref(this.#t)} data-test="default-slot"></slot></button>`}#t;#e;#i(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}#o(){const t=this.#e.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreSplitButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreSplitButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreSplitButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",void 0),__decorate([state()],GlideCoreSplitButton.prototype,"hasPrefixSlot",void 0),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button")],GlideCoreSplitButton);export default GlideCoreSplitButton;

package/dist/split-button.stories.d.ts

@@ -0,0 +1,17 @@
+import './icons/storybook.js';
+import './menu.button.js';
+import './menu.link.js';
+import './split-button.js';
+import './split-container.js';
+import './split-link.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Primary: StoryObj;
+export declare const PrimaryWithPrefixIcon: StoryObj;
+export declare const PrimaryWithSizeSmall: StoryObj;
+export declare const PrimaryWithLink: StoryObj;
+export declare const Secondary: StoryObj;
+export declare const SecondaryWithPrefixIcon: StoryObj;
+export declare const SecondaryWithSizeSmall: StoryObj;
+export declare const SecondaryWithLink: StoryObj;

package/dist/split-button.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/split-button.styles.js

@@ -0,0 +1,102 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    .component {
+      align-items: center;
+      border-color: transparent;
+      border-radius: 0.75rem 0 0 0.75rem;
+      border-style: solid;
+      border-width: 1px 0 1px 1px;
+      cursor: pointer;
+      display: inline-flex;
+      font-family: var(--glide-core-heading-xxs-font-family);
+      font-style: var(--glide-core-heading-xxs-font-style);
+      font-weight: var(--glide-core-heading-xxs-font-weight);
+      gap: 0.625rem;
+      justify-content: center;
+      padding-block: var(--glide-core-spacing-xs);
+      padding-inline: var(--glide-core-spacing-md);
+      padding-inline-end: var(--glide-core-spacing-xs);
+      text-decoration: none;
+      transition-duration: 150ms;
+      transition-property: color, background-color, border-color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      user-select: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${focusOutline};
+      }
+
+      &.disabled {
+        opacity: 1;
+        pointer-events: none;
+      }
+
+      &.primary {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+        color: var(--glide-core-text-selected);
+
+        /* Since the "disabled" styles are shared between a link and a button, we use a disabled class and not a pseudo-class */
+        &.disabled {
+          background-color: var(--glide-core-surface-disabled);
+          border-color: transparent;
+          color: var(--glide-core-text-tertiary-disabled);
+        }
+
+        &:not(.disabled):active {
+          background-color: var(--glide-core-surface-selected-hover);
+          border-color: transparent;
+          color: var(--glide-core-text-selected);
+        }
+
+        &:not(:active):hover:not(.disabled) {
+          background-color: var(--glide-core-surface-hover);
+          border-color: transparent;
+          box-shadow: var(--glide-core-glow-sm);
+          color: var(--glide-core-text-primary);
+        }
+      }
+
+      &.secondary {
+        background-color: transparent;
+        border-color: var(--glide-core-border-primary);
+        color: var(--glide-core-text-primary);
+
+        &.disabled {
+          background-color: var(--glide-core-surface-disabled);
+          border-color: transparent;
+          color: var(--glide-core-text-tertiary-disabled);
+        }
+
+        &:not(.disabled):active {
+          background-color: var(--glide-core-surface-selected-hover);
+          border-color: transparent;
+          color: var(--glide-core-text-selected);
+        }
+
+        &:not(:active):hover:not(.disabled) {
+          background-color: var(--glide-core-surface-hover);
+          border-color: transparent;
+          box-shadow: var(--glide-core-glow-sm);
+          color: var(--glide-core-text-primary);
+        }
+      }
+
+      &.small {
+        block-size: 1.75rem;
+        box-sizing: border-box;
+        font-size: var(--glide-core-body-xs-font-size);
+        line-height: 1rem;
+      }
+
+      &.large {
+        block-size: 2.125rem;
+        box-sizing: border-box;
+        font-size: var(--glide-core-body-xxs-font-size);
+        line-height: 1.5rem;
+      }
+    }
+  `];

package/dist/split-button.test.basics.d.ts

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

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

@@ -0,0 +1,99 @@
+import './split-button.js';
+import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import GlideCoreSplitButton from './split-button.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreSplitButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-button')).to.equal(GlideCoreSplitButton);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>Button</glide-core-split-button>
+  `);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-split-button>Button</glide-core-split-button>`);
+    const button = component.shadowRoot?.querySelector('button');
+    assert(button);
+    expect(component.ariaExpanded).to.equal(null);
+    expect(component.ariaControls).to.equal(null);
+    expect(component.ariaHasPopup).to.equal(null);
+    expect(component.disabled).to.equal(false);
+    expect(component.size).to.equal('large');
+    expect(component.variant).to.equal('primary');
+    expect(button.getAttribute('aria-controls')).to.equal(null);
+    expect(button.ariaExpanded).to.equal(null);
+    expect(button.ariaHasPopup).to.equal(null);
+    expect(button.disabled).to.equal(false);
+});
+it('renders a button with a label by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>Button</glide-core-split-button>
+  `);
+    expect(component.textContent).to.equal('Button');
+});
+it('renders with size "large" and variant "primary" by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>Button</glide-core-split-button>
+  `);
+    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
+    expect(button?.classList.contains('large')).to.be.true;
+    expect(button?.classList.contains('primary')).to.be.true;
+});
+it('adds "small" styling when "size" attribute is "small"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button size="small">Button</glide-core-split-button>
+  `);
+    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
+    expect(button?.classList.contains('small')).to.be.true;
+});
+it('adds "secondary" styling when "variant" attribute is "secondary"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button variant="secondary"
+      >Button</glide-core-split-button
+    >
+  `);
+    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
+    expect(button?.classList.contains('secondary')).to.be.true;
+});
+it('sets the button as "disabled" when the attribute exists', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button disabled>Button</glide-core-split-button>
+  `);
+    const button = component?.shadowRoot?.querySelector('[data-test="split-button"]');
+    expect(button).to.have.attribute('disabled');
+});
+it('renders a prefix slot when given', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button
+      ><div data-prefix slot="prefix">Prefix</div>
+      Button</glide-core-split-button
+    >
+  `);
+    expect(component.querySelector('[data-prefix]')).to.be.not.null;
+});
+it('renders with prefix class when dynamically added and removed', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button>
+      <span slot="prefix">prefix</span>Button</glide-core-split-button
+    >
+  `);
+    expect(document.querySelector('[slot="prefix"]')).to.be.not.null;
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="split-button"]')
+            .classList,
+    ]).to.include('has-prefix');
+    component.querySelector('[slot="prefix"]')?.remove();
+    await elementUpdated(component);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="split-button"]')
+            .classList,
+    ]).to.not.include('has-prefix');
+});
+it('throws an error when there is no button label', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button></glide-core-split-button>`));
+});
+it('throws an error when there is something other than text in the default slot', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-button><div>test</div></glide-core-split-button>`));
+});

package/dist/split-container.d.ts

@@ -0,0 +1,31 @@
+import './menu.js';
+import './menu.options.js';
+import { LitElement, type PropertyValueMap } from 'lit';
+import { type Placement } from '@floating-ui/dom';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-container': GlideCoreSplitContainer;
+    }
+}
+/**
+ * @description A split button that provides a button action and a menu of alternate actions.
+ *
+ * @slot - One or more of `<glide-core-menu-link>` or `<glide-core-menu-button>`.
+ * @slot primary-action - One of either `<glide-core-split-button>` or `<glide-core-split-link>`.
+ *
+ */
+export default class GlideCoreSplitContainer extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    menulabel: string;
+    open: boolean;
+    disabled: boolean;
+    placement: Placement;
+    variant: 'primary' | 'secondary';
+    size: 'large' | 'small';
+    firstUpdated(): void;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+    willUpdate(changedProperties: PropertyValueMap<GlideCoreSplitContainer>): void;
+}

package/dist/split-container.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(n=(r<3?l(n):r>3?l(t,i,n):l(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreSplitButton from"./split-button.js";import GlideCoreSplitLink from"./split-link.js";import styles from"./split-container.styles.js";let GlideCoreSplitContainer=class GlideCoreSplitContainer extends LitElement{constructor(){super(...arguments),this.menulabel="",this.open=!1,this.disabled=!1,this.placement="bottom-end",this.variant="primary",this.size="large",this.#e=createRef(),this.#t=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#o(),this.#l();const e=this.#i.value?.assignedNodes().at(0);(e instanceof GlideCoreSplitButton||e instanceof GlideCoreSplitLink)&&(e.disabled=this.disabled,e.variant=this.variant,e.size=this.size)}focus(e){const t=this.#i.value?.assignedNodes()?.at(0);t instanceof HTMLElement&&t.focus(e)}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}"><slot name="primary-action" @slotchange="${this.#r}" ${ref(this.#i)} data-test="primary-action"></slot><span class="${classMap({divider:!0,[this.variant]:!0})}" data-test="split-divider"></span><glide-core-menu ?open="${this.open}" size="${this.size}" placement="${this.placement}"><button slot="target" type="button" class="${classMap({"menu-button":!0,[this.variant]:!0,[this.size]:!0})}" ?disabled="${this.disabled}" aria-label="${this.menulabel}" data-test="split-menu-button" ${ref(this.#t)}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" role="presentation"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><glide-core-menu-options><slot @slotchange="${this.#n}" ${ref(this.#e)}></slot></glide-core-menu-options></glide-core-menu></div>`}willUpdate(e){const t=this.#i.value?.assignedNodes().at(0);this.hasUpdated&&(t instanceof GlideCoreSplitButton||t instanceof GlideCoreSplitLink)&&(e.has("disabled")&&(t.disabled=this.disabled),e.has("variant")&&(t.variant=this.variant),e.has("size")&&(t.size=this.size))}#e;#t;#i;#n(){this.#o()}#r(){this.#l()}#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}#l(){owSlot(this.#i.value),owSlotType(this.#i.value,[GlideCoreSplitButton,GlideCoreSplitLink])}};__decorate([property({attribute:"menu-label",reflect:!0})],GlideCoreSplitContainer.prototype,"menulabel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitContainer.prototype,"open",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitContainer.prototype,"disabled",void 0),__decorate([property({attribute:"menu-placement",reflect:!0})],GlideCoreSplitContainer.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreSplitContainer.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitContainer.prototype,"size",void 0),GlideCoreSplitContainer=__decorate([customElement("glide-core-split-container")],GlideCoreSplitContainer);export default GlideCoreSplitContainer;

package/dist/split-container.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;