@crowdstrike/glide-core 0.9.6 → 0.11.0

package/dist/radio.styles.js

@@ -13,16 +13,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    @media (prefers-reduced-motion: reduce) {
-      /**
-        ':host' is targeted here to increase specificity so that
-        we don't need to use '!important' to turn off the animation.
-      */
-      :host .component .radio-circle.checked.animate::after {
-        animation: none;
-      }
-    }
-
     :host {
       display: flex;
       outline: none;
@@ -74,8 +64,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
         &.animate {
           &.checked {
-            &::after {
-              animation: animate-radio 250ms cubic-bezier(0.25, 0, 0.3, 1);
+            @media (prefers-reduced-motion: no-preference) {
+              &::after {
+                animation: animate-radio 250ms cubic-bezier(0.25, 0, 0.3, 1);
+              }
             }
           }
         }

package/dist/split-button.d.ts

@@ -1,4 +1,3 @@
-import './menu.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -6,22 +5,20 @@ declare global {
     }
 }
 /**
- * @description A button to be used in the `primary-action` slot of `glide-core-split-container`.
+ * @slot - One of `<glide-core-split-button-primary-button>` or `<glide-core-split-button-primary-link>`.
  *
- * @slot prefix - An optional icon slot to display before the label.
- * @slot - A label for the contents of the button.
+ * @slot secondary-button - One of `<glide-core-split-button-secondary-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';
+    get size(): 'large' | 'small';
+    set size(size: 'large' | 'small');
+    get variant(): 'primary' | 'secondary';
+    set variant(variant: 'primary' | 'secondary');
     firstUpdated(): void;
+    private get secondaryButtonElement();
+    private get primaryButtonElement();
     render(): import("lit").TemplateResult<1>;
-    private hasPrefixSlot;
 }

package/dist/split-button.js

@@ -1 +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;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var i,r=arguments.length,l=r<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(l=(r<3?i(l):r>3?i(e,o,l):i(e,o))||l);return r>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreSplitButtonPrimaryButton from"./split-button.primary-button.js";import GlideCoreSplitButtonPrimaryLink from"./split-button.primary-link.js";import GlideCoreSplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#t}set size(t){this.#t=t,this.primaryButtonElement&&(this.primaryButtonElement.privateSize=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=t)}get variant(){return this.#e}set variant(t){this.#e=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}firstUpdated(){owSlot(this.#o.value),owSlot(this.#n.value),owSlotType(this.#o.value,[GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink]),owSlotType(this.#n.value,[GlideCoreSplitButtonSecondaryButton])}get secondaryButtonElement(){const t=this.#n.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#o.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonPrimaryButton||t instanceof GlideCoreSplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#i}" ${ref(this.#o)}></slot><slot name="secondary-button" @slotchange="${this.#r}" ${ref(this.#n)}></slot></div>`}#o=createRef();#n=createRef();#t="large";#e="primary";#i(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink]),this.primaryButtonElement&&(this.primaryButtonElement.privateSize=this.size,this.primaryButtonElement.privateVariant=this.variant)}#r(){owSlotType(this.#n.value,[GlideCoreSplitButtonSecondaryButton]),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=this.size,this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",null),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button")],GlideCoreSplitButton);export default GlideCoreSplitButton;

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-button-primary-button': GlideCoreSplitButtonPrimaryButton;
+    }
+}
+/**
+ * @slot icon - An optional icon before the label.
+ */
+export default class GlideCoreSplitButtonPrimaryButton extends LitElement {
+    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;
+    label?: string;
+    privateSize: 'large' | 'small';
+    privateVariant: 'primary' | 'secondary';
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/split-button.primary-button.js

@@ -0,0 +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 p=t.length-1;p>=0;p--)(i=t[p])&&(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{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./split-button.primary-button.styles.js";let GlideCoreSplitButtonPrimaryButton=class GlideCoreSplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}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.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"label",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryButton.prototype,"privateVariant",void 0),GlideCoreSplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button")],GlideCoreSplitButtonPrimaryButton);export default GlideCoreSplitButtonPrimaryButton;

package/dist/split-button.primary-button.styles.js

@@ -0,0 +1,96 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
+    .component {
+      align-items: center;
+      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);
+      position: relative;
+      text-decoration: none;
+      transition-duration: 150ms;
+      transition-property: color, background-color, border-color, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      user-select: none;
+
+      /* So the box shadow and focus outline aren't covered up by the secondary button. */
+      z-index: 1;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        /* Covers up the secondary button's border. */
+        box-shadow: 0 0 0 2px var(--glide-core-surface-page) !important;
+      }
+
+      &.primary {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+        color: var(--glide-core-text-selected);
+      }
+
+      &.secondary {
+        background-color: var(--glide-core-surface-page);
+        border-color: var(--glide-core-border-primary);
+        color: var(--glide-core-text-primary);
+
+        &:not(.disabled) {
+          /* So it has a right border when the secondary button is disabled. */
+          box-shadow: 1px 0 0 var(--glide-core-border-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;
+      }
+
+      /* 
+        A "disabled" class is used instead of ":disabled" because these styles are 
+        shared between Split Button Primary Button and Split Button Primary Link.  
+      */
+      &.disabled {
+        background-color: var(--glide-core-surface-disabled);
+        border-color: transparent;
+        color: var(--glide-core-text-tertiary-disabled);
+        cursor: not-allowed;
+      }
+
+      &:not(:active, .disabled):is(:focus, :hover) {
+        background-color: var(--glide-core-surface-hover);
+        border-color: transparent;
+        color: var(--glide-core-text-primary);
+      }
+
+      &:not(:active, .disabled):is(:hover) {
+        box-shadow: var(--glide-core-glow-sm);
+        z-index: 1;
+      }
+
+      &:not(.disabled):active {
+        background-color: var(--glide-core-surface-selected-hover);
+        color: var(--glide-core-text-selected);
+      }
+    }
+  `];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonPrimaryButton from './split-button.primary-button.js';
+GlideCoreSplitButtonPrimaryButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-button-primary-button')).to.equal(GlideCoreSplitButtonPrimaryButton);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-button
+      label="Label"
+    ></glide-core-split-button-primary-button>
+  `);
+    await expect(component).to.be.accessible();
+    component.disabled = true;
+    await elementUpdated(component);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-button
+      label="Label"
+    ></glide-core-split-button-primary-button>
+  `);
+    expect(component.ariaControls).to.be.null;
+    expect(component.ariaExpanded).to.be.null;
+    expect(component.ariaHasPopup).to.be.null;
+    expect(component.disabled).to.be.false;
+    expect(component.privateSize).to.equal('large');
+    expect(component.privateVariant).to.equal('primary');
+});

package/dist/split-button.primary-button.test.focus.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/split-button.primary-button.test.focus.js

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonPrimaryButton from './split-button.primary-button.js';
+GlideCoreSplitButtonPrimaryButton.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus()` is called', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-button
+      label="Label"
+    ></glide-core-split-button-primary-button>
+  `);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="component"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});

package/dist/split-button.primary-link.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-button-primary-link': GlideCoreSplitButtonPrimaryLink;
+    }
+}
+/**
+ * @slot icon - An optional icon before the label.
+ */
+export default class GlideCoreSplitButtonPrimaryLink extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    label?: string;
+    url?: string;
+    privateSize: 'large' | 'small';
+    privateVariant: 'primary' | 'secondary';
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/split-button.primary-link.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(t,e,i,r){var o,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,r);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(l=(a<3?o(l):a>3?o(e,i,l):o(e,i))||l);return a>3&&l&&Object.defineProperty(e,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import styles from"./split-button.primary-button.styles.js";let GlideCoreSplitButtonPrimaryLink=class GlideCoreSplitButtonPrimaryLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateSize="large",this.privateVariant="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}render(){return this.disabled?html`<span aria-disabled="true" class="${classMap({component:!0,disabled:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" role="link"><slot name="icon"></slot>${this.label}</span>`:html`<a class="${classMap({component:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"url",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryLink.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonPrimaryLink.prototype,"privateVariant",void 0),GlideCoreSplitButtonPrimaryLink=__decorate([customElement("glide-core-split-button-primary-link")],GlideCoreSplitButtonPrimaryLink);export default GlideCoreSplitButtonPrimaryLink;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonPrimaryLink from './split-button.primary-link.js';
+GlideCoreSplitButtonPrimaryLink.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-button-primary-link')).to.equal(GlideCoreSplitButtonPrimaryLink);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-link
+      label="Label"
+      url="/"
+    ></glide-core-split-button-primary-link>
+  `);
+    await expect(component).to.be.accessible();
+    component.disabled = true;
+    await elementUpdated(component);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-link
+      label="Label"
+      url="/"
+    ></glide-core-split-button-primary-link>
+  `);
+    expect(component.disabled).to.be.false;
+    expect(component.privateSize).to.equal('large');
+    expect(component.privateVariant).to.equal('primary');
+});

package/dist/split-button.primary-link.test.focus.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/split-button.primary-link.test.focus.js

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonPrimaryLink from './split-button.primary-link.js';
+GlideCoreSplitButtonPrimaryLink.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus()` is called', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-primary-link
+      label="Label"
+      url="/"
+    ></glide-core-split-button-primary-link>
+  `);
+    component.focus();
+    const link = component.shadowRoot?.querySelector('[data-test="component"]');
+    expect(component.shadowRoot?.activeElement).to.equal(link);
+});

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

@@ -0,0 +1,25 @@
+import './menu.options.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-button-secondary-button': GlideCoreSplitButtonSecondaryButton;
+    }
+}
+/**
+ * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
+ */
+export default class GlideCoreSplitButtonSecondaryButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    label?: string;
+    menuOpen: boolean;
+    menuPlacement: 'bottom-end' | 'top-end';
+    privateActive: boolean;
+    privateSize: 'large' | 'small';
+    privateVariant: 'primary' | 'secondary';
+    click(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/split-button.secondary-button.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,t,o,i){var n,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(r<3?n(l):r>3?n(t,o,l):n(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./menu.options.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 GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./split-button.secondary-button.styles.js";let GlideCoreSplitButtonSecondaryButton=class GlideCoreSplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateSize="large",this.privateVariant="primary",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink]);const e=new MutationObserver((()=>{this.#o.value&&(this.menuOpen=this.#o.value.open)}));ow(this.#o.value,ow.object.instanceOf(GlideCoreMenu)),e.observe(this.#o.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" size="${this.privateSize}" ?open="${this.menuOpen}" ${ref(this.#o)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><svg aria-hidden="true" class="${classMap({chevron:!0,disabled:this.disabled})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><glide-core-menu-options><slot @slotchange="${this.#i}" ${ref(this.#t)}></slot></glide-core-menu-options></glide-core-menu>`}#e;#t;#o;#i(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateVariant",void 0),GlideCoreSplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button")],GlideCoreSplitButtonSecondaryButton);export default GlideCoreSplitButtonSecondaryButton;

package/dist/split-button.secondary-button.styles.js

@@ -0,0 +1,103 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".component:focus-visible")}
+  `,css`
+    .component {
+      align-items: center;
+      background-color: var(--glide-core-surface-page);
+      border-color: var(--glide-core-border-primary);
+      border-radius: 0 0.75rem 0.75rem 0;
+      border-style: solid;
+      border-width: 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-xs);
+      position: relative;
+      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;
+
+      &:disabled {
+        background-color: var(--glide-core-surface-disabled);
+        border-block-color: transparent;
+        border-inline-end-color: transparent;
+        border-inline-start-color: var(--glide-core-border-base-light);
+        color: var(--glide-core-text-tertiary-disabled);
+        cursor: not-allowed;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 1px var(--glide-core-surface-page);
+
+        /* So the box shadow isn't covered up by the primary button. */
+        z-index: 1;
+      }
+
+      &.primary {
+        color: var(--glide-core-text-selected);
+      }
+
+      &.secondary {
+        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;
+        min-inline-size: fit-content;
+      }
+
+      &.large {
+        block-size: 2.125rem;
+        box-sizing: border-box;
+        font-size: var(--glide-core-body-xxs-font-size);
+        line-height: 1.5rem;
+      }
+
+      &:not(:disabled):is(:active, .active) {
+        background-color: var(--glide-core-surface-selected-hover);
+        border-color: transparent;
+        color: var(--glide-core-text-selected);
+
+        .chevron {
+          color: var(--glide-core-icon-selected);
+        }
+      }
+
+      &:not(:active, .active, :disabled):is(:focus, :hover) {
+        background-color: var(--glide-core-surface-hover);
+        border-color: transparent;
+        color: var(--glide-core-text-primary);
+      }
+
+      &:not(:active, .active, :disabled):is(:hover) {
+        box-shadow: var(--glide-core-glow-sm);
+
+        /* So the box shadow isn't covered up by the primary button. */
+        z-index: 1;
+      }
+    }
+
+    .chevron {
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+      }
+
+      &:not(.disabled) {
+        color: var(--glide-core-icon-primary);
+      }
+    }
+  `];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
+import GlideCoreMenuButton from './menu.button.js';
+import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
+GlideCoreMenuButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-button-secondary-button')).to.equal(GlideCoreSplitButtonSecondaryButton);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-secondary-button label="Label">
+      <glide-core-menu-button label="Label"></glide-core-menu-button>
+    </glide-core-split-button-secondary-button>
+  `);
+    await expect(component).to.be.accessible();
+    component.disabled = true;
+    await elementUpdated(component);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-secondary-button label="Label">
+      <glide-core-menu-button label="Label"></glide-core-menu-button>
+    </glide-core-split-button-secondary-button>
+  `);
+    expect(component.disabled).to.be.false;
+    expect(component.menuOpen).to.be.false;
+    expect(component.menuPlacement).to.be.equal('bottom-end');
+    expect(component.privateSize).to.be.equal('large');
+    expect(component.privateVariant).to.be.equal('primary');
+});
+it('throws when its default slot is empty', async () => {
+    await expectArgumentError(() => fixture(html `
+      <glide-core-split-button-secondary-button
+        label="Label"
+      ></glide-core-split-button-secondary-button>
+    `));
+});
+it('throws when its default slot is the incorrect type', async () => {
+    await expectArgumentError(() => fixture(html `
+      <glide-core-split-button-secondary-button label="Label">
+        <div></div>
+      </glide-core-split-button-secondary-button>
+    `));
+    // Menu is rendered asynchronously outside of this component's lifecycle
+    // and asserts against its default slot. That assertion, which is expected
+    // to fail in this case, results in an unhandled rejection that gets logged.
+    // `console.error` is stubbed so the logs aren't muddied.
+    const stub = sinon.stub(console, 'error');
+    // Menu asserts against its default slot once on `firstUpdated` and again
+    // on "slotchange". So we wait until the stub is called twice before restoring
+    // it.
+    await waitUntil(() => stub.calledTwice);
+    stub.restore();
+});

package/dist/split-button.secondary-button.test.focus.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/split-button.secondary-button.test.focus.js

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
+GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus()` is called', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-secondary-button label="Label">
+      <glide-core-menu-button label="Label"></glide-core-menu-button>
+    </glide-core-split-button-secondary-button>
+  `);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});

package/dist/split-button.secondary-button.test.interactions.d.ts

@@ -0,0 +1,2 @@
+import './menu.button.js';
+import './menu.options.js';

package/dist/split-button.secondary-button.test.interactions.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.button.js';
+import './menu.options.js';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitButtonSecondaryButton from './split-button.secondary-button.js';
+GlideCoreSplitButtonSecondaryButton.shadowRootOptions.mode = 'open';
+it('sets `menuOpen` when its menu is opened', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-secondary-button label="Label">
+      <glide-core-menu-button label="Label"></glide-core-menu-button>
+    </glide-core-split-button-secondary-button>
+  `);
+    component.click();
+    // Wait for the Mutation Observer to pick up the attribute change.
+    await aTimeout(0);
+    expect(component.menuOpen).to.be.true;
+});
+it('sets `menuOpen` when its menu is closed', async () => {
+    const component = await fixture(html `
+    <glide-core-split-button-secondary-button label="Label" menu-open>
+      <glide-core-menu-button label="Label"></glide-core-menu-button>
+    </glide-core-split-button-secondary-button>
+  `);
+    // Wait for Menu to open.
+    await aTimeout(0);
+    document.body.click();
+    // Wait for the Mutation Observer to pick up the attribute change.
+    await aTimeout(0);
+    expect(component.menuOpen).to.be.false;
+});

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

@@ -2,11 +2,12 @@ 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 './split-button.primary-button.js';
+import './split-button.primary-link.js';
+import './split-button.secondary-button.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const SplitButton: StoryObj;
 export declare const WithIcon: StoryObj;
-export declare const WithSplitLink: StoryObj;
+export declare const WithPrimaryLink: StoryObj;