@crowdstrike/glide-core 0.9.2 → 0.9.4

package/dist/accordion.stories.d.ts

@@ -3,7 +3,5 @@ import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
-export declare const WithPrefixIcon: StoryObj;
-export declare const WithSuffix: StoryObj;
-export declare const WithPrefixAndSuffix: StoryObj;
+export declare const Accordion: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/button-group.button.styles.js

@@ -2,32 +2,28 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     ${focusOutline(".component:focus-visible")}
     ${visuallyHidden(".label.visually-hidden")}
   `,css`
-    :host(:first-of-type) {
-      .component {
-        &.horizontal {
-          border-end-start-radius: 0.6875rem;
-          border-start-start-radius: 0.6875rem;
-        }
+    /*
+    Nesting within :host does not work as expected in Safari
+    https://bugs.webkit.org/show_bug.cgi?id=275341#c1
+    */
+    :host(:first-of-type) .component.horizontal {
+      border-end-start-radius: 0.6875rem;
+      border-start-start-radius: 0.6875rem;
+    }
 
-        &.vertical {
-          border-start-end-radius: 0.6875rem;
-          border-start-start-radius: 0.6875rem;
-        }
-      }
+    :host(:first-of-type) .component.vertical {
+      border-start-end-radius: 0.6875rem;
+      border-start-start-radius: 0.6875rem;
     }
 
-    :host(:last-of-type) {
-      .component {
-        &.horizontal {
-          border-end-end-radius: 0.6875rem;
-          border-start-end-radius: 0.6875rem;
-        }
+    :host(:last-of-type) .component.horizontal {
+      border-end-end-radius: 0.6875rem;
+      border-start-end-radius: 0.6875rem;
+    }
 
-        &.vertical {
-          border-end-end-radius: 0.6875rem;
-          border-end-start-radius: 0.6875rem;
-        }
-      }
+    :host(:last-of-type) .component.vertical {
+      border-end-end-radius: 0.6875rem;
+      border-end-start-radius: 0.6875rem;
     }
 
     .component {

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

@@ -4,9 +4,5 @@ import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
-export declare const DefaultWithOrientationVertical: StoryObj;
-export declare const DefaultWithPrefixIcon: StoryObj;
-export declare const DefaultWithOrientationVerticalPrefixIcon: StoryObj;
-export declare const DefaultWithIconOnly: StoryObj;
-export declare const DefaultWithOrientationVerticalOnlyIcon: StoryObj;
+export declare const ButtonGroup: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/button.d.ts

@@ -20,10 +20,20 @@ export default class GlideCoreButton extends LitElement {
     ariaExpanded: 'true' | 'false' | null;
     ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     ariaControls: string | null;
+    autofocus: boolean;
     disabled: boolean;
+    formAction: string;
+    formEncType: '' | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    formMethod: '' | 'dialog' | 'get' | 'post';
+    formNoValidate: boolean;
+    formTarget: '' | '_blank' | '_parent' | '_self' | '_top';
+    name: string;
+    popoverTarget?: string;
+    popoverTargetAction: '' | 'hide' | 'show' | 'toggle';
+    size: 'large' | 'small';
     type: 'button' | 'submit' | 'reset';
+    value: string;
     variant: 'primary' | 'secondary' | 'tertiary';
-    size: 'large' | 'small';
     get form(): HTMLFormElement | null;
     click(): void;
     firstUpdated(): void;

package/dist/button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,l=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(l=(s<3?r(l):s>3?r(e,o,l):r(e,o))||l);return s>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)}" 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})}" type="${this.type}" ?disabled="${this.disabled}" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix" @slotchange="${this.#r}" ${ref(this.#s)}></slot><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot><slot name="suffix" @slotchange="${this.#a}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.ariaExpanded=null,this.ariaHasPopup=null,this.ariaControls=null,this.disabled=!1,this.type="button",this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#o=createRef(),this.#s=createRef(),this.#n=createRef(),this.#t=this.attachInternals()}#e;#o;#t;#s;#n;#i(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#l(){owSlot(this.#o.value)}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)}#a(){const t=this.#n.value?.assignedNodes();this.hasSuffixSlot=!!(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,"disabled",void 0),__decorate([property()],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",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,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;

package/dist/button.stories.d.ts

@@ -3,15 +3,5 @@ import './icons/storybook.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 PrimaryWithSuffixIcon: StoryObj;
-export declare const PrimaryWithPrefixAndSuffixIcons: StoryObj;
-export declare const Secondary: StoryObj;
-export declare const SecondaryWithPrefixIcon: StoryObj;
-export declare const SecondaryWithSuffixIcon: StoryObj;
-export declare const SecondaryWithPrefixAndSuffixIcons: StoryObj;
-export declare const Tertiary: StoryObj;
-export declare const TertiaryWithPrefixIcon: StoryObj;
-export declare const TertiaryWithSuffixIcon: StoryObj;
-export declare const TertiaryWithPrefixAndSuffixIcons: StoryObj;
+export declare const Button: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/button.test.basics.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './button.js';
 import { ArgumentError } from 'ow';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreButton from './button.js';
 import sinon from 'sinon';
 GlideCoreButton.shadowRootOptions.mode = 'open';
@@ -16,179 +16,45 @@ it('has defaults', async () => {
     const component = await fixture(html `
     <glide-core-button>Button</glide-core-button>
   `);
+    expect(component.ariaControls).to.be.null;
+    expect(component.ariaExpanded).to.be.null;
+    expect(component.ariaHasPopup).to.be.null;
+    expect(component.autofocus).to.be.false;
+    expect(component.disabled).to.be.false;
+    expect(component.formAction).to.be.empty.string;
+    expect(component.formEncType).to.be.empty.string;
+    expect(component.formMethod).to.be.empty.string;
+    expect(component.formNoValidate).to.be.false;
+    expect(component.name).to.be.empty.string;
+    expect(component.popoverTarget).to.be.undefined;
+    expect(component.popoverTargetAction).to.be.empty.string;
+    expect(component.value).to.be.empty.string;
     expect(component.type).to.equal('button');
-    expect(component.disabled).to.equal(false);
-    expect(component.textContent).to.equal('Button');
-    expect(component?.ariaHasPopup).to.equal(null);
-    expect(component?.ariaExpanded).to.equal(null);
-    expect(component?.ariaControls).to.equal(null);
+    expect(component.hasAttribute('autofocus')).to.be.false;
+    expect(component.getAttribute('aria-controls')).to.be.null;
+    expect(component.getAttribute('aria-expanded')).to.be.null;
+    expect(component.getAttribute('aria-haspopup')).to.be.null;
+    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(component.getAttribute('formaction')).to.be.empty.string;
+    expect(component.getAttribute('formenctype')).to.be.empty.string;
+    expect(component.getAttribute('formmethod')).to.be.empty.string;
+    expect(component.hasAttribute('formnovalidate')).to.be.false;
+    expect(component.getAttribute('name')).to.be.empty.string;
+    expect(component.getAttribute('popovertarget')).to.be.null;
+    expect(component.getAttribute('popovertargetaction')).to.be.empty.string;
+    expect(component.getAttribute('type')).to.equal('button');
+    expect(component.getAttribute('value')).to.be.empty.string;
     const button = component.shadowRoot?.querySelector('button');
-    expect(button?.getAttribute('type')).to.equal('button');
-    expect(button?.getAttribute('aria-controls')).to.equal(null);
-    expect(button?.ariaExpanded).to.equal(null);
-    expect(button?.ariaHasPopup).to.equal(null);
+    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.classList]).to.deep.equal([
-        'component',
-        'primary',
-        'large',
-    ]);
 });
 it('delegates focus', async () => {
     const component = await fixture(html `<glide-core-button>Button</glide-core-button>`);
     component.focus();
     expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
 });
-it('renders a secondary variant', async () => {
-    const component = await fixture(html `
-    <glide-core-button variant="secondary">Button</glide-core-button>
-  `);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'secondary', 'large']);
-});
-it('renders a tertiary variant', async () => {
-    const component = await fixture(html `
-    <glide-core-button variant="tertiary">Button</glide-core-button>
-  `);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'tertiary', 'large']);
-});
-it('sets the size to "large" by default', async () => {
-    const component = await fixture(html `
-    <glide-core-button>Button</glide-core-button>
-  `);
-    expect(component.size).to.equal('large');
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'large']);
-});
-it('sets the size attribute to "large"', async () => {
-    const component = await fixture(html `
-    <glide-core-button size="large">Button</glide-core-button>
-  `);
-    expect(component.size).to.equal('large');
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'large']);
-});
-it('sets the size attribute to "small"', async () => {
-    const component = await fixture(html `
-    <glide-core-button size="small">Button</glide-core-button>
-  `);
-    expect(component.size).to.equal('small');
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'small']);
-});
-it('sets the disabled attribute', async () => {
-    const component = await fixture(html `
-    <glide-core-button disabled>Button</glide-core-button>
-  `);
-    expect(component.disabled).to.equal(true);
-    expect(component.shadowRoot.querySelector('button')?.disabled).to.equal(true);
-});
-it('sets the type attribute to "submit"', async () => {
-    const component = await fixture(html `
-    <glide-core-button type="submit">Button</glide-core-button>
-  `);
-    expect(component.type).to.equal('submit');
-    expect(component.shadowRoot.querySelector('button')?.getAttribute('type')).to.equal('submit');
-});
-it('sets the type attribute to "reset"', async () => {
-    const component = await fixture(html `
-    <glide-core-button type="reset">Button</glide-core-button>
-  `);
-    expect(component.type).to.equal('reset');
-    expect(component.shadowRoot?.querySelector('button')?.getAttribute('type')).to.equal('reset');
-});
-it('renders with a prefix slot', async () => {
-    const component = await fixture(html `
-    <glide-core-button>
-      <span slot="prefix" data-prefix>prefix</span>
-      Button
-    </glide-core-button>
-  `);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'large', 'has-prefix']);
-    expect(document.querySelector('[data-prefix]')).to.be.ok;
-});
-it('renders with a suffix slot', async () => {
-    const component = await fixture(html `
-    <glide-core-button>
-      Button
-      <span slot="suffix" data-suffix>suffix</span>
-    </glide-core-button>
-  `);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'large', 'has-suffix']);
-    expect(document.querySelector('[data-suffix]')).to.be.ok;
-});
-it('renders with a prefix and suffix slot when both are present initially', async () => {
-    const component = await fixture(html `
-    <glide-core-button>
-      <span slot="prefix" data-prefix>prefix</span>
-      Button
-      <span slot="suffix" data-suffix>suffix</span>
-    </glide-core-button>
-  `);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal([
-        'component',
-        'primary',
-        'large',
-        'has-prefix',
-        'has-suffix',
-    ]);
-    expect(document.querySelector('[data-prefix]')).to.be.ok;
-    expect(document.querySelector('[data-suffix]')).to.be.ok;
-});
-it('renders with prefix and suffix classes when both are dynamically added', async () => {
-    const component = await fixture(html `
-    <glide-core-button>Button</glide-core-button>
-  `);
-    const prefix = document.createElement('span');
-    prefix.setAttribute('slot', 'prefix');
-    prefix.dataset.prefix = undefined;
-    prefix.textContent = 'prefix';
-    component.append(prefix);
-    const suffix = document.createElement('span');
-    suffix.setAttribute('slot', 'suffix');
-    prefix.dataset.suffix = undefined;
-    suffix.textContent = 'suffix';
-    component.append(suffix);
-    await elementUpdated(component);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal([
-        'component',
-        'primary',
-        'large',
-        'has-prefix',
-        'has-suffix',
-    ]);
-    expect(document.querySelector('[data-prefix]')).to.be.ok;
-    expect(document.querySelector('[data-suffix]')).to.be.ok;
-});
-it('renders without prefix and suffix classes after both are removed', async () => {
-    const component = await fixture(html `
-    <glide-core-button>
-      <span slot="prefix">prefix</span>
-      Button
-      <span slot="suffix">suffix</span>
-    </glide-core-button>
-  `);
-    component.querySelector('[slot="prefix"]')?.remove();
-    component.querySelector('[slot="suffix"]')?.remove();
-    await elementUpdated(component);
-    expect([
-        ...component.shadowRoot.querySelector('button').classList,
-    ]).to.deep.equal(['component', 'primary', 'large']);
-});
 it('throws if it does not have a default slot', async () => {
     const spy = sinon.spy();
     try {
@@ -201,3 +67,19 @@ it('throws if it does not have a default slot', async () => {
     }
     expect(spy.callCount).to.equal(1);
 });
+it('`#onPrefixSlotChange` coverage', async () => {
+    await fixture(html `
+    <glide-core-button>
+      <span slot="prefix">Prefix</span>
+      Button
+    </glide-core-button>
+  `);
+});
+it('`#onSuffixSlotChange` coverage', async () => {
+    await fixture(html `
+    <glide-core-button>
+      Button
+      <span slot="suffix">Suffix</span>
+    </glide-core-button>
+  `);
+});

package/dist/checkbox-group.stories.d.ts

@@ -2,6 +2,5 @@ import './checkbox.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Vertical: StoryObj;
-export declare const VerticalWithTooltip: StoryObj;
-export declare const VerticalWithError: StoryObj;
+export declare const CheckboxGroup: StoryObj;
+export declare const WithError: StoryObj;

package/dist/checkbox.stories.d.ts

@@ -1,9 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Horizontal: StoryObj;
-export declare const HorizontalWithTooltip: StoryObj;
-export declare const HorizontalWithError: StoryObj;
-export declare const Vertical: StoryObj;
-export declare const VerticalWithTooltip: StoryObj;
-export declare const VerticalWithError: StoryObj;
+export declare const Checkbox: StoryObj;
+export declare const WithError: StoryObj;

package/dist/drawer.stories.d.ts

@@ -3,4 +3,4 @@ import './drawer.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
+export declare const Drawer: StoryObj;

package/dist/dropdown.d.ts

@@ -26,6 +26,7 @@ export default class GlideCoreDropdown extends LitElement {
     static styles: import("lit").CSSResult[];
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
+    filterable: boolean;
     hideLabel: boolean;
     label?: string;
     name?: string;

package/dist/dropdown.js

@@ -1 +1 @@
-var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";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{repeat}from"lit/directives/repeat.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}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,this.open&&e?this.#t():this.open&&this.#i()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#i():!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.#t()):this.#t()}get size(){return this.#s}set size(e){if(this.#s=e,this.#n)for(const t of this.#n)t.privateSize=e}get multiple(){return this.#a}set multiple(e){const t=this.#a&&!e,i=!this.#a&&e;this.#a=e;for(const i of this.#r)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#d=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#d}set value(e){this.#d=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#r)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#n?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#p.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#h.value?.click()}get selectedOptions(){return this.#r.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#r.findLast((e=>e.selected))}get isAllSelected(){return this.#r.filter((({selected:e})=>e)).length===this.#r.length}get isSomeSelected(){return this.#r.some((({selected:e})=>e))}get internalLabel(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.placeholder}</span>`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.#v.value&&(this.#v.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.isFilterable?this.#o.value?.focus(e):this.#h.value?.focus(e)}get form(){return this.#p.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#p.setValidity({valueMissing:!0}," ",this.#o.value):this.#p.setValidity({}),this.#p.validity}get willValidate(){return this.#p.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const e of this.#r){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#r.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#d=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}" @blur="${this.#g}"><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#w}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#g}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#b}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#w,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#R)}><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#A)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#C-1})}" data-test="tag-container" data-test-hidden="${i>this.#C-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#S.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#D}" @keydown="${this.#$}" ${ref(this.#o)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))}<div class="tag-overflow-text-and-button">${when(this.selectedOptions.length>this.#C,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#C} </span>more</div>`))} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#k.term("open")}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden})}" data-test="options" id="options" role="listbox" @click="${this.#G}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#v)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#k.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#N)}></glide-core-dropdown-option><slot @slotchange="${this.#j}" ${ref(this.#m)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#p.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.hideLabel=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#m=createRef(),this.#R=createRef(),this.#o=createRef(),this.#e=!1,this.#a=!1,this.#l=!1,this.#H=!1,this.#M=!1,this.#z=!1,this.#k=new LocalizeController(this),this.#v=createRef(),this.#N=createRef(),this.#s="large",this.#C=3,this.#A=createRef(),this.#d=[],this.#c=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?this.open=!1:this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},this.#f=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#p=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#h;#T;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#C;#A;#d;#c;#f;#B(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#T?.(),this.#v.value?.hidePopover(),this.ariaActivedescendant=""}get#r(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#n(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#w(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#r.length>10,this.#n)for(const e of this.#n)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#B(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#B(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#d=[this.lastSelectedOption.value]),this.requestUpdate()}#b(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#u?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#H&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#h.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#z=!0,"Enter"===e.key||" "===e.key&&!this.isFilterable))return e.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#N.value&&this.#P(),this.#K(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t-1);return void(i&&0!==t&&(this.#B(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t+1);return void(i&&(this.#B(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(0);return void(t&&(this.#B(),t.privateActive=!0,t.scrollIntoView({block:"end"}),this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(-1);return void(t&&(this.#B(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#H?this.#H=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#z&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.#o.value?.select()))}#O(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#o.value.value.trim();for(const e of this.#r)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#B(),e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#U||0===this.#U.length}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#C-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.#C-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)for(const e of i)e.selected=!1;else;}#G(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#K(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#F(e){e.target instanceof GlideCoreDropdownOption&&(this.#B(),e.target.privateActive=!0)}#_(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#N.value&&this.#P(),this.#K(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#I(e){this.isFilterable&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#B(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#M&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#d=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)):!this.multiple&&e.target.selected&&(this.#d=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#d=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#d=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#d=e.target.value?[e.target.value]:[])}async#S(e){this.#H=!0;for(const t of this.#r)t.id===e&&(t.selected=!1,this.#d=this.value.filter((e=>e!==t.value)));const t=this.#A.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#P(){ow(this.#N.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#M=!0;for(const e of this.#r)e.selected=this.#N.value.selected;this.#M=!1}#i(){this.#T?.(),this.#R.value&&this.#v.value&&(this.#T=autoUpdate(this.#R.value,this.#v.value,(()=>{(async()=>{if(this.#R.value&&this.#v.value){const{x:e,y:t,placement:i}=await computePosition(this.#R.value,this.#v.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#v.value.dataset.placement=i,Object.assign(this.#v.value.style,{left:`${e}px`,top:`${t}px`}),this.#v.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if(this.isFilterable&&this.#o.value){this.isFiltering=!1;for(const e of this.#r)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";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{repeat}from"lit/directives/repeat.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}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,this.open&&e?this.#t():this.open&&this.#i()}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#i():!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.#t()):this.#t()}get size(){return this.#s}set size(e){if(this.#s=e,this.#n)for(const t of this.#n)t.privateSize=e}get multiple(){return this.#a}set multiple(e){const t=this.#a&&!e,i=!this.#a&&e;this.#a=e;for(const i of this.#r)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#d=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#d}set value(e){this.#d=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#r)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#n?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#p.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#h.value?.click()}get selectedOptions(){return this.#r.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#r.findLast((e=>e.selected))}get isAllSelected(){return this.#r.filter((({selected:e})=>e)).length===this.#r.length}get isSomeSelected(){return this.#r.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.placeholder}</span>`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.#v.value&&(this.#v.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#h.value?.focus(e)}get form(){return this.#p.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#p.setValidity({valueMissing:!0}," ",this.#o.value):this.#p.setValidity({}),this.#p.validity}get willValidate(){return this.#p.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const e of this.#r){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#r.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#d=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}" @blur="${this.#g}"><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#b}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#g}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#w}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#b,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#R)}><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#A)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#S-1})}" data-test="tag-container" data-test-hidden="${i>this.#S-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#C.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.filterable||this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#D}" @keydown="${this.#$}" ${ref(this.#o)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))}<div class="tag-overflow-text-and-button">${when(this.selectedOptions.length>this.#S,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#S} </span>more</div>`))} <button aria-expanded="${this.open}" aria-haspopup="listbox" aria-hidden="${this.filterable||this.isFilterable}" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.filterable||this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#k.term("open")}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div></div><div aria-labelledby="${this.filterable||this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden})}" data-test="options" id="options" role="listbox" @click="${this.#G}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#v)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#k.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#N)}></glide-core-dropdown-option><slot @slotchange="${this.#j}" ${ref(this.#m)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#p.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.filterable=!1,this.hideLabel=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#m=createRef(),this.#R=createRef(),this.#o=createRef(),this.#e=!1,this.#a=!1,this.#l=!1,this.#H=!1,this.#M=!1,this.#z=!1,this.#k=new LocalizeController(this),this.#v=createRef(),this.#N=createRef(),this.#s="large",this.#S=3,this.#A=createRef(),this.#d=[],this.#c=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?this.open=!1:this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},this.#f=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#p=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#h;#B;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#S;#A;#d;#c;#f;#T(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#B?.(),this.#v.value?.hidePopover(),this.ariaActivedescendant=""}get#r(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#n(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#b(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#r.length>10,this.#n)for(const e of this.#n)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#T(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#T(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&this.#o.value?(this.#d=[this.lastSelectedOption.value],this.#o.value.value=this.lastSelectedOption.label):this.lastSelectedOption?.value&&(this.#d=[this.lastSelectedOption.value]),this.requestUpdate()}#w(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#u?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#H&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#h.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#z=!0,"Enter"===e.key||" "===e.key&&!this.filterable&&!this.isFilterable))return e.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#N.value&&this.#P(),this.#K(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t-1);return void(i&&0!==t&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t+1);return void(i&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(0);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView({block:"end"}),this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(-1);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#H?this.#H=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#z&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.#o.value?.select()))}#O(e){const t=this.filterable||this.isFilterable;e.target instanceof GlideCoreTag||!t?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#o.value.value.trim();for(const e of this.#r)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#T(),e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#U||0===this.#U.length}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#S-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.#S-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)for(const e of i)e.selected=!1;else;}#G(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#K(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#F(e){e.target instanceof GlideCoreDropdownOption&&(this.#T(),e.target.privateActive=!0)}#_(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#N.value&&this.#P(),this.#K(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#I(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#T(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#M&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#d=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)):!this.multiple&&e.target.selected&&(this.#d=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#d=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#d=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#d=e.target.value?[e.target.value]:[])}async#C(e){this.#H=!0;for(const t of this.#r)t.id===e&&(t.selected=!1,this.#d=this.value.filter((e=>e!==t.value)));const t=this.#A.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#P(){ow(this.#N.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#M=!0;for(const e of this.#r)e.selected=this.#N.value.selected;this.#M=!1}#i(){this.#B?.(),this.#R.value&&this.#v.value&&(this.#B=autoUpdate(this.#R.value,this.#v.value,(()=>{(async()=>{if(this.#R.value&&this.#v.value){const{x:e,y:t,placement:i}=await computePosition(this.#R.value,this.#v.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#v.value.dataset.placement=i,Object.assign(this.#v.value.style,{left:`${e}px`,top:`${t}px`}),this.#v.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#r)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./checkbox.js";import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o="",this.#l=createRef(),this.#s=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,setTimeout((()=>{this.#a()}))}get selected(){return this.#s}set selected(e){if(this.#s=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#c)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1,this.#n=new IntersectionObserver((()=>{this.checkVisibility()&&this.#a()})),this.#n.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#n?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:t}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#p}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateActive}" ${ref(this.#e)}></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div><slot data-test="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateActive}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip></div>`))}</div>`}#e;#t;#i;#n;#o;#l;#s;#r;get#c(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#p(e){e.stopPropagation()}#a(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./checkbox.js";import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o="",this.#l=createRef(),this.#s=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#o}set label(e){this.#o=e,setTimeout((()=>{this.#a()}))}get selected(){return this.#s}set selected(e){if(this.#s=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#c)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role="option",this.tabIndex=-1,this.#n=new IntersectionObserver((()=>{this.checkVisibility()&&this.#a()})),this.#n.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#n?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:t}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#p}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateActive}" ${ref(this.#e)}></glide-core-checkbox>`),(()=>html`<div class="${classMap({option:!0,[this.privateSize]:!0})}"><slot data-test="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateActive}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip><div class="${classMap({"checked-icon":!0,visible:this.selected})}">${checkedIcon}</div></div>`))}</div>`}#e;#t;#i;#n;#o;#l;#s;#r;get#c(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#p(e){e.stopPropagation()}#a(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;

package/dist/dropdown.option.styles.js

@@ -55,6 +55,7 @@ import{css}from"lit";export default[css`
     .checked-icon {
       display: inline-flex;
       justify-content: center;
+      margin-inline-start: auto;
       opacity: 0;
 
       &.visible {

package/dist/dropdown.stories.d.ts

@@ -3,13 +3,6 @@ import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const SingleSelectionHorizontal: StoryObj;
-export declare const SingleSelectionHorizontalWithIcon: StoryObj;
-export declare const SingleSelectionHorizontalWithTooltip: StoryObj;
-export declare const SingleSelectionHorizontalWithError: StoryObj;
-export declare const SingleSelectionVerticalWithIcon: StoryObj;
-export declare const SingleSelectionVerticalWithTooltip: StoryObj;
-export declare const SingleSelectionVerticalWithError: StoryObj;
-export declare const SingleSelectionHorizontalWithFiltering: StoryObj;
-export declare const MultipleSelectionHorizontal: StoryObj;
-export declare const MultipleSelectionHorizontalWithFiltering: StoryObj;
+export declare const Dropdown: StoryObj;
+export declare const WithError: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/dropdown.styles.js

@@ -1,5 +1,5 @@
-import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${menuOpeningAnimation(".options:popover-open")}
+import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${opacityAndScaleAnimation(".options:popover-open")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
     .component {
@@ -44,9 +44,6 @@ import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-anim
         block-size: 1.5rem;
         border-color: transparent;
         border-radius: var(--glide-core-border-radius-round);
-        font-size: var(--glide-core-heading-xxxs-font-size);
-        font-style: var(--glide-core-heading-xxxs-font-style);
-        font-weight: var(--glide-core-heading-xxxs-font-weight);
         gap: var(--glide-core-spacing-xxs);
         min-inline-size: 3.75rem;
         padding-block: 0;
@@ -134,7 +131,12 @@ import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-anim
     }
 
     .placeholder {
-      color: var(--glide-core-text-placeholder);
+      /*
+        Using the browser's default placeholder color for now, as
+        '--glide-core-text-placeholder' has dark mode issues. Aligns
+        with Input and Textarea as suggested by design.
+      */
+      color: rgb(117 117 117);
 
       &.quiet {
         &:not(.disabled) {
@@ -193,6 +195,7 @@ import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-anim
       border: none;
       cursor: inherit;
       flex-grow: 1;
+      font-family: var(--glide-core-font-sans);
       font-size: inherit;
       min-inline-size: var(--min-inline-size);
       padding: 0;

package/dist/dropdown.test.basics.filterable.js

@@ -83,3 +83,23 @@ it('uses `placeholder` as a placeholder when not `multiple` and no option is sel
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.placeholder).to.equal('Placeholder');
 });
+it('sets `value` of its `<input>` when an option is initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('One');
+});

package/dist/dropdown.test.basics.js

@@ -33,6 +33,8 @@ it('has defaults', async () => {
     </glide-core-dropdown>`);
     expect(component.hasAttribute('disabled')).to.be.false;
     expect(component.disabled).to.equal(false);
+    expect(component.hasAttribute('filterable')).to.be.false;
+    expect(component.filterable).to.equal(false);
     expect(component.getAttribute('name')).to.be.null;
     expect(component.name).to.equal(undefined);
     expect(component.hasAttribute('required')).to.be.false;
@@ -72,6 +74,17 @@ it('cannot be open when disabled', async () => {
     const options = component?.shadowRoot?.querySelector('[data-test="options"]');
     expect(options?.checkVisibility()).to.be.false;
 });
+it('can be filterable', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.checkVisibility()).to.be.true;
+});
 it('can have a label', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option

package/dist/form-controls-layout.stories.d.ts

@@ -7,4 +7,4 @@ import './radio.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const SingleSelectionHorizontal: StoryObj;
+export declare const FormControlsLayout: StoryObj;

package/dist/icon-button.d.ts

@@ -17,7 +17,7 @@ export default class GlideCoreIconButton extends LitElement {
     ariaExpanded: 'true' | 'false' | null;
     ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
     disabled: boolean;
-    /** Text read aloud for screenreaders. For accessibility, this should always be provided. */
+    /** For screenreaders. Required. */
     label: string;
     variant: 'primary' | 'secondary' | 'tertiary';
     firstUpdated(): void;

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

@@ -3,6 +3,4 @@ import './icons/storybook.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Primary: StoryObj;
-export declare const Secondary: StoryObj;
-export declare const Tertiary: StoryObj;
+export declare const IconButton: StoryObj;

package/dist/input.stories.d.ts

@@ -3,13 +3,6 @@ import './input.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
-export declare const Password: StoryObj;
+export declare const Input: StoryObj;
 export declare const WithError: StoryObj;
-export declare const Clearable: StoryObj;
-export declare const SuffixIcon: StoryObj;
-export declare const PrefixIcon: StoryObj;
-export declare const SearchType: StoryObj;
-export declare const MaxLength: StoryObj;
-export declare const MaxLengthAndDescription: StoryObj;
-export declare const Tooltip: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/menu.stories.d.ts

@@ -7,4 +7,4 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Menu: StoryObj;
-export declare const MenuWithIcon: StoryObj;
+export declare const WithIcons: StoryObj;

package/dist/menu.styles.js

@@ -1,5 +1,5 @@
-import{css}from"lit";import menuOpeningAnimation from"./styles/menu-opening-animation.js";export default[css`
-    ${menuOpeningAnimation(".default-slot:popover-open")}
+import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
+    ${opacityAndScaleAnimation(".default-slot:popover-open")}
   `,css`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */

package/dist/modal.stories.d.ts

@@ -8,8 +8,6 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Modal: StoryObj;
-export declare const WithBackButton: StoryObj;
-export declare const HeaderActions: StoryObj;
-export declare const HeaderActionsWithBackButton: StoryObj;
-export declare const TertiaryButton: StoryObj;
-export declare const TertiaryIcon: StoryObj;
+export declare const WithHeaderActions: StoryObj;
+export declare const WithTertiaryButton: StoryObj;
+export declare const WithTertiaryIconAndButton: StoryObj;

package/dist/radio-group.stories.d.ts

@@ -3,6 +3,5 @@ import './radio.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Vertical: StoryObj;
-export declare const VerticalWithTooltip: StoryObj;
-export declare const VerticalWithError: StoryObj;
+export declare const RadioGroup: StoryObj;
+export declare const WithError: StoryObj;

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

@@ -7,11 +7,6 @@ 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;
+export declare const SplitButton: StoryObj;
+export declare const WithIcon: StoryObj;
+export declare const WithSplitLink: StoryObj;

package/dist/status-indicator.stories.d.ts

@@ -2,16 +2,4 @@ import './status-indicator.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Failed: StoryObj;
-export declare const Idle: StoryObj;
-export declare const InProgress: StoryObj;
-export declare const Queued: StoryObj;
-export declare const Scheduled: StoryObj;
-export declare const Success: StoryObj;
-export declare const WarningCritical: StoryObj;
-export declare const WarningHigh: StoryObj;
-export declare const WarningInformational: StoryObj;
-export declare const WarningLow: StoryObj;
-export declare const WarningMedium: StoryObj;
-export declare const WarningZero: StoryObj;
-export declare const CustomSize: StoryObj;
+export declare const StatusIndicator: StoryObj;

package/dist/styles/{menu-opening-animation.js → opacity-and-scale-animation.js}

@@ -1,21 +1,19 @@
 import{css,unsafeCSS}from"lit";export default e=>css`
     /* stylelint-disable selector-type-case, selector-type-no-unknown */
-    @keyframes menu-opening {
+    @keyframes opacity-and-scale {
       from {
         opacity: 0;
-        transform: scaleY(0);
-        transform-origin: 0% 0%;
+        transform: scale(0.95);
       }
 
       to {
         opacity: 1;
-        transform: scaleY(1);
-        transform-origin: 0% 0%;
+        transform: scale(1);
       }
     }
 
     ${unsafeCSS(e)} {
-      animation: menu-opening 150ms cubic-bezier(0.25, 0, 0.3, 1);
+      animation: opacity-and-scale 250ms cubic-bezier(0.25, 0, 0.3, 1);
     }
 
     @media (prefers-reduced-motion: reduce) {

package/dist/styles/variables.css

@@ -1 +1 @@
-:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #ffffff8c;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-gray-lighter: #ffffff1a;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #000000e5;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
+:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #d7e7ff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #00000066;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-gray-lighter: #ffffff1a;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #000000e5;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length,a=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,i,a):o(e,i))||a);return l>3&&a&&Object.defineProperty(e,i,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#i=100,this.#s=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#d=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#s.value,[GlideCoreTabPanel]),this.#f(),this.#v(),this.#m(),this.#p()}render(){return html`<div class="component" @click="${this.#w}" @keydown="${this.#T}" ${ref(this.#t)}><div class="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#E}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#d)} @scroll="${this.#R}" @focusout="${this.#g}" tabindex="-1"><slot name="nav" @slotchange="${this.#S}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#y}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#O}" ${ref(this.#s)}></slot></div>`}updated(){this.#f()}#t;#e;#i;#s;#o;#l;#a;#r;#n;#c;#h;#b;#u;#d;#w(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#B(e)}#y(){this.#C("right")}#E(){this.#C("left")}#O(){owSlotType(this.#s.value,[GlideCoreTabPanel])}#g(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#T(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#B(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let i=this.tabElements.indexOf(e);switch(t.key){case"Home":i=0;break;case"End":i=this.tabElements.length-1;break;case"ArrowLeft":i--;break;case"ArrowRight":i++}i<0&&(i=this.tabElements.length-1),i>this.tabElements.length-1&&(i=0),this.tabElements[i].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[i]===t?0:-1;this.#L(),t.preventDefault()}}}#S(){owSlotType(this.#l.value,[GlideCoreTab]),this.#L()}#R(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#L()}),this.#i)}#C(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const i=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:i,top:0})}#v(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),i=t.getAttribute("name");t.isActive=i===e,t.tabIndex=i===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-"+(this.activeTab===this.tabElements.at(0)?"start":"end"))),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const i=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0;this.#t.value.style.setProperty("--active-tab-indicator-width",this.activeTab.clientWidth-i+"px")}}#A(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:i}=e,s=t.scrollLeft+i,o=t.scrollWidth;this.isDisableOverflowEndButton=o-s<=this.#a}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:i}=e;this.isShowOverflowButtons=t.scrollWidth-i>this.#a}this.#G(),this.#A()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#m(){requestAnimationFrame((()=>{if(this.activeTab&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),{width:e}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",e-t+"px"),this.#t.value.style.setProperty("--active-tab-indicator-translate",`${t}px`),setTimeout((()=>{this.isAfterFirstUpdated=!0}))}}))}#p(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#L()}),this.#i))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#f(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#B(t){this.activeTab=t,this.#v(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;
+var __decorate=this&&this.__decorate||function(t,e,s,i){var o,l=arguments.length,a=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,i);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,s,a):o(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#i=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#f=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#i.value,[GlideCoreTabPanel]),this.#d()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#f)} @scroll="${this.#w}" @focusout="${this.#E}" tabindex="-1"><slot name="nav" @slotchange="${this.#T}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#g}" ${ref(this.#i)}></slot></div>`}updated(){this.#S()}#t;#e;#s;#i;#o;#l;#a;#r;#n;#c;#h;#b;#u;#f;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#O(e)}#R(){this.#y("right")}#p(){this.#y("left")}#g(){owSlotType(this.#i.value,[GlideCoreTabPanel])}#E(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#O(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#T(){owSlotType(this.#l.value,[GlideCoreTab]),this.#S(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#y(t){const e="right"===t?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=e*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:i}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",i-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#f.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,i=t.scrollLeft+s,o=t.scrollWidth;this.isDisableOverflowEndButton=o-i<=this.#a}}#B(){const t=this.#f.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#A(),this.#L()}#A(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#d(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#f.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#f.value)}#S(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#O(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;

package/dist/tabs.stories.d.ts

@@ -5,5 +5,5 @@ import './tab.panel.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Primary: StoryObj;
-export declare const Overflow: StoryObj;
+export declare const Tabs: StoryObj;
+export declare const WithOverflow: StoryObj;

package/dist/tag.stories.d.ts

@@ -3,7 +3,5 @@ import './tag.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
-export declare const DefaultWithPrefixIcon: StoryObj;
-export declare const Removable: StoryObj;
-export declare const RemovableWithIcon: StoryObj;
+export declare const Tag: StoryObj;
+export declare const WithIcon: StoryObj;

package/dist/textarea.stories.d.ts

@@ -1,8 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
+export declare const Textarea: StoryObj;
 export declare const WithError: StoryObj;
-export declare const MaxLength: StoryObj;
-export declare const MaxLengthAndDescription: StoryObj;
-export declare const Tooltip: StoryObj;

package/dist/toasts.stories.d.ts

@@ -4,4 +4,4 @@ import './toasts.toast.js';
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Default: StoryObj;
+export declare const Toasts: StoryObj;

package/dist/toggle.stories.d.ts

@@ -1,7 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
-export declare const Horizontal: StoryObj;
-export declare const HorizontalWithTooltip: StoryObj;
-export declare const Vertical: StoryObj;
-export declare const VerticalWithTooltip: StoryObj;
+export declare const Toggle: StoryObj;

package/dist/tooltip.styles.js

@@ -1,24 +1,7 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
+    ${opacityAndScaleAnimation(".tooltip:popover-open")}
     ${focusOutline(".target:focus-visible")}
   `,css`
-    @keyframes opacity-and-scale {
-      from {
-        opacity: 0;
-        transform: scale(0.95);
-      }
-
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .tooltip:popover-open {
-        animation: none !important;
-      }
-    }
-
     :host {
       display: inline-block;
     }
@@ -67,12 +50,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         color: var(--glide-core-text-header-2);
         display: inline-block;
         font-family: inherit;
-        margin-inline-start: var(--glide-core-spacing-sm);
+        font-size: inherit;
         white-space: nowrap;
       }
 
       &:popover-open {
-        animation: opacity-and-scale 250ms cubic-bezier(0.25, 0, 0.3, 1);
         display: flex;
 
         /*
@@ -124,13 +106,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .default-slot {
+      align-items: center;
       background-color: var(--glide-core-surface-base-dark);
       border-radius: var(--glide-core-spacing-xs);
       color: var(--glide-core-text-selected);
-      display: block;
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
       font-family: var(--glide-core-body-md-font-family);
-      font-style: var(--glide-core-body-md-font-style);
-      font-weight: var(--glide-core-body-md-font-weight);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-style: var(--glide-core-body-sm-font-style);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      hyphens: auto;
       inline-size: max-content;
       inset-block-start: 50%;
       max-inline-size: 11.25rem;

package/dist/tree.stories.d.ts

@@ -8,12 +8,3 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 declare const meta: Meta;
 export default meta;
 export declare const Tree: StoryObj;
-export declare const TreeItemDefault: StoryObj;
-export declare const TreeItemSelected: StoryObj;
-export declare const TreeItemWithChildItemsCollapsed: StoryObj;
-export declare const TreeItemWithChildItemsExpanded: StoryObj;
-export declare const TreeItemWithChildItemsNonCollapsible: StoryObj;
-export declare const TreeItemWithPrefixIcon: StoryObj;
-export declare const TreeItemWithSuffixIconButton: StoryObj;
-export declare const TreeItemWithMenu: StoryObj;
-export declare const TreeItemWithPrefixSuffixAndMenu: StoryObj;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -76,8 +76,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-lit-a11y": "^4.1.2",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-no-skip-tests": "^1.1.0",
     "eslint-plugin-sort-class-members": "^1.20.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-unicorn": "^50.0.1",