@crowdstrike/glide-core 0.5.1 → 0.5.2

package/dist/dropdown.test.interactions.single.js

@@ -0,0 +1,466 @@
+import { ArgumentError } from 'ow';
+import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+import sinon from 'sinon';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('opens on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
+    // which puts us in a guard in the event handler. `Event` has no `detail` property
+    // and would work. `CustomEvent` is used for completeness and to get us as close as
+    // possible to a real click. See the comment in the handler for more information.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    expect(component.open).to.be.true;
+});
+it('toggles open and closed when the button is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
+    // which puts us in a guard in the event handler. `Event` has no `detail` property
+    // and would work. `CustomEvent` is used for completeness and to get us as close as
+    // possible to a real click. See the comment in the handler for more information.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    expect(component.open).to.be.false;
+});
+it('does not toggle open and closed when the button overflow text is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
+    // which puts us in a guard in the event handler. `Event` has no `detail` property
+    // and would work. `CustomEvent` is used for completeness and to get us as close as
+    // possible to a real click. See the comment in the handler for more information.
+    component.shadowRoot
+        ?.querySelector('[data-test="tag-overflow-text"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    expect(component.open).to.be.true;
+});
+it('selects an option on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.click();
+    await elementUpdated(component);
+    const labels = component.shadowRoot?.querySelectorAll('[data-test="selected-option-label"]');
+    expect(option?.selected).to.be.true;
+    expect(labels?.length).to.equal(1);
+    expect(labels?.[0]?.textContent?.trim()).to.equal('One,');
+});
+it('selects an option on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.focus();
+    await sendKeys({ press: ' ' });
+    expect(option?.selected).to.be.true;
+});
+it('selects an option on Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(option?.selected).to.be.true;
+});
+it('deactivates all other options on "mouseover"', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[1]?.privateActive).to.be.true;
+});
+it('closes when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.querySelector('glide-core-dropdown-option')?.click();
+    expect(component.open).to.be.false;
+});
+it('closes when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.querySelector('glide-core-dropdown-option')?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.open).to.be.false;
+});
+it('closes when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.focus();
+    await sendKeys({ press: ' ' });
+    expect(component.open).to.be.false;
+});
+it('deselects all other options when one is newly selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <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-option
+        label="Three"
+        value="three"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new Event('click'));
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[1].click();
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.true;
+    expect(options[2].selected).to.be.false;
+});
+it('selects and deselects options when `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <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>`);
+    component.value = ['two'];
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.true;
+});
+it('throws when `value` is changed programmatically to include more than one value', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    try {
+        component.value = ['one', 'two'];
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('updates `value` when an option `value` is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.value = 'two';
+    expect(component.value).to.deep.equal(['two']);
+});
+it('updates `value` when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[1].click();
+    expect(component.value).to.deep.equal(['two']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[1].click();
+    expect(component.value).to.deep.equal(['two']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[2].click();
+    expect(component.value).to.deep.equal([]);
+});
+it('updates `value` when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.value).to.deep.equal(['one']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[1].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.value).to.deep.equal(['two']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[2].focus();
+    await sendKeys({ press: 'Enter' });
+    expect(component.value).to.deep.equal([]);
+});
+it('updates `value` when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    options[0].focus();
+    await sendKeys({ press: ' ' });
+    expect(component.value).to.deep.equal(['one']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[1].focus();
+    await sendKeys({ press: ' ' });
+    expect(component.value).to.deep.equal(['two']);
+    // Reopen it.
+    component.shadowRoot
+        ?.querySelector('[data-test="button"]')
+        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await elementUpdated(component);
+    options[2].focus();
+    await sendKeys({ press: ' ' });
+    expect(component.value).to.deep.equal([]);
+});
+it('updates `value` when `multiple` is changed to `false` programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown open multiple>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.multiple = false;
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    const checkbox = options[1].shadowRoot?.querySelector('[data-test="checkbox"]');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.true;
+    expect(checkbox?.checked).to.be.true;
+    expect(component.value).to.deep.equal(['two']);
+});
+it('updates `value` when the `value` of the selected option is changed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <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 option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.value = 'three';
+    expect(component.value).to.deep.equal(['three']);
+});
+it('updates `value` when the `value` of the selected option is removed programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <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 option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.value = '';
+    expect(component.value).to.deep.equal([]);
+});
+it('updates the its internal label when an option is newly selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option:last-of-type');
+    option?.click();
+    await elementUpdated(component);
+    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label?.textContent?.trim()).to.equal(option?.label);
+});
+it('hides Select All', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      select-all
+    >
+      <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 selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.checkVisibility()).to.not.be.ok;
+});
+it('does not select an option on Enter when the option is not focused', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    option?.focus();
+    await sendKeys({ down: 'Tab' });
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ up: 'Tab' });
+    await sendKeys({ press: 'Enter' });
+    expect(option?.selected).to.be.false;
+});
+it('cannot be tabbed to when `disabled`', async () => {
+    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    await sendKeys({ down: 'Tab' });
+    expect(document.activeElement).to.equal(document.body);
+});

package/dist/dropdown.test.validity.js

@@ -0,0 +1,46 @@
+import './dropdown.option.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+it('is valid if not required and no option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity?.valueMissing).to.be.false;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});
+it('is invalid if required and no option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    expect(component.reportValidity()).to.be.false;
+});
+it('is both invalid and valid if required but disabled and no option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      disabled
+      required
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.validity.valid).to.be.false;
+    expect(component.validity?.valueMissing).to.be.true;
+    expect(component.checkValidity()).to.be.true;
+    expect(component.reportValidity()).to.be.true;
+});

package/dist/icon-button.js

@@ -1 +1 @@
-"use strict";var g=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var s=(t,e,r,m)=>{for(var l=m>1?void 0:m?E(e,r):e,n=t.length-1,f;n>=0;n--)(f=t[n])&&(l=(m?f(e,r,l):f(l))||l);return m&&l&&g(e,r,l),l};var h=(t,e,r)=>{if(!e.has(t))throw TypeError("Cannot "+r)};var p=(t,e,r)=>(h(t,e,"read from private field"),r?r.call(t):e.get(t)),c=(t,e,r)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,r)};var u=(t,e,r)=>(h(t,e,"access private method"),r);var i,d,v;import{LitElement as y,html as R}from"lit";import{classMap as S}from"lit/directives/class-map.js";import{createRef as $,ref as w}from"lit/directives/ref.js";import{customElement as M,property as o}from"lit/decorators.js";import{owSlot as b}from"./library/ow.js";import x from"./icon-button.styles.js";let a=class extends y{constructor(){super(...arguments);c(this,d);this.ariaExpanded=null;this.ariaHasPopup=null;this.disabled=!1;this.label="";this.variant="primary";c(this,i,$())}firstUpdated(){b(p(this,i).value)}render(){return R`<button aria-label="${this.label}" class="${S({component:!0,primary:this.variant==="primary",secondary:this.variant==="secondary",tertiary:this.variant==="tertiary"})}" type="button" ?disabled="${this.disabled}"><slot @slotchange="${u(this,d,v)}" ${w(p(this,i))}></slot></button>`}};i=new WeakMap,d=new WeakSet,v=function(){b(p(this,i).value)},a.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0,mode:"closed"},a.styles=x,s([o({reflect:!0})],a.prototype,"ariaExpanded",2),s([o({reflect:!0})],a.prototype,"ariaHasPopup",2),s([o({type:Boolean,reflect:!0})],a.prototype,"disabled",2),s([o()],a.prototype,"label",2),s([o({reflect:!0})],a.prototype,"variant",2),a=s([M("glide-core-icon-button")],a);export{a as default};
+var __decorate=this&&this.__decorate||function(t,e,o,r){var l,a=arguments.length,i=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(l=t[s])&&(i=(a<3?l(i):a>3?l(e,o,i):l(e,o))||i);return a>3&&i&&Object.defineProperty(e,o,i),i};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<button aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" type="button" ?disabled="${this.disabled}"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></button>`}#t;#e(){owSlot(this.#t.value)}};__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;

package/dist/icon-button.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as r}from"lit";import o from"./styles/focus-outline.js";export default[r`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-block;
@@ -25,7 +25,7 @@
       }
 
       &:focus-visible {
-        ${o};
+        ${focusOutline};
         outline-offset: 3px;
       }
 
@@ -109,4 +109,4 @@
         }
       }
     }
-  `];
+  `];

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

@@ -0,0 +1,103 @@
+import './icon-button.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreIconButton from './icon-button.js';
+import sinon from 'sinon';
+GlideCoreIconButton.shadowRootOptions.mode = 'open';
+const icon = html `<svg
+  width="16"
+  height="16"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  aria-hidden="true"
+>
+  <path d="M16.51 9.873l-4.459 4.31-4.458-4.31"></path>
+</svg>`;
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-icon-button')).to.equal(GlideCoreIconButton);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
+      >${icon}</glide-core-icon-button
+    >`);
+    await expect(component).to.be.accessible();
+});
+it('has defaults', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
+      >${icon}</glide-core-icon-button
+    >`);
+    expect(component.shadowRoot?.querySelector('button')?.type).to.equal('button');
+    expect(component.shadowRoot?.querySelector('button')?.disabled).to.equal(false);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary']);
+});
+it('delegates focus', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
+      >${icon}</glide-core-icon-button
+    >`);
+    component.focus();
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('button'));
+});
+it('uses the provided "label" for the aria-label', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
+      >${icon}</glide-core-icon-button
+    >`);
+    expect(component.shadowRoot?.querySelector('button')?.getAttribute('aria-label')).to.equal('test-icon-button');
+});
+it('renders a default slot', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button"
+      ><span data-content>Inner content</span></glide-core-icon-button
+    >`);
+    expect(component.querySelector('[data-content]')).to.be.ok;
+    expect(component.querySelector('[data-content]')).to.be.visible;
+});
+it('renders a primary variant', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="primary"
+      >${icon}</glide-core-icon-button
+    >`);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'primary']);
+});
+it('renders a secondary variant', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="secondary"
+      >${icon}</glide-core-icon-button
+    >`);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'secondary']);
+});
+it('renders a tertiary variant', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" variant="tertiary"
+      >${icon}</glide-core-icon-button
+    >`);
+    expect([
+        ...component.shadowRoot.querySelector('button').classList,
+    ]).to.deep.equal(['component', 'tertiary']);
+});
+it('sets the disabled attribute', async () => {
+    const component = await fixture(html `<glide-core-icon-button label="test-icon-button" disabled
+      >${icon}</glide-core-icon-button
+    >`);
+    expect(component.disabled).to.equal(true);
+    expect(component.shadowRoot?.querySelector('button')?.disabled).to.equal(true);
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-icon-button
+        label="test-icon-button"
+      ></glide-core-icon-button>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});

package/dist/icons/checked.js

@@ -1 +1 @@
-"use strict";import{svg as e}from"lit/static-html.js";export default e`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{svg}from"lit/static-html.js";export default svg`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-"use strict";import{svg as o}from"lit/static-html.js";export default o`<svg class="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
+import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;