@crowdstrike/glide-core 0.5.1 → 0.6.0

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.d.ts

@@ -11,8 +11,9 @@ export default class GlideCoreIconButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    ariaExpanded: string | null;
-    ariaHasPopup: string | null;
+    ariaControls: string | null;
+    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. */
     label: string;

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 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 n=t.length-1;n>=0;n--)(i=t[n])&&(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}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,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-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" 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({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",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,14 +1,14 @@
-"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;
+      display: inline-flex;
     }
 
     .component {
       align-items: center;
       block-size: var(--size, 1.625rem);
       border-color: transparent;
-      border-radius: var(--glide-core-spacing-xs);
+      border-radius: 0.5rem;
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
@@ -25,12 +25,11 @@
       }
 
       &:focus-visible {
-        ${o};
-        outline-offset: 3px;
+        ${focusOutline};
       }
 
       &:disabled {
-        cursor: default;
+        cursor: not-allowed;
         opacity: 1;
       }
 
@@ -61,12 +60,11 @@
 
       &.secondary {
         background-color: var(--glide-core-surface-page);
-        border-color: var(--glide-core-border-primary);
-        color: var(--icon-color, var(--glide-core-icon-primary));
+        border-color: transparent;
+        color: var(--icon-color, var(--glide-core-icon-default));
 
         &:disabled {
           background-color: transparent;
-          border-color: var(--glide-core-border-base-light);
           color: var(--glide-core-icon-tertiary-disabled);
         }
 
@@ -79,18 +77,20 @@
         &:not(:active):hover:not(:disabled) {
           background-color: var(--glide-core-surface-hover);
           border-color: transparent;
-          box-shadow: var(--glide-core-glow-sm);
           color: var(--glide-core-icon-primary);
         }
       }
 
       &.tertiary {
         background-color: transparent;
+        block-size: var(--size, 1rem);
         border-color: transparent;
         color: var(--icon-color, var(--glide-core-icon-default));
+        inline-size: var(--size, 1rem);
+        padding: 0;
 
         &:focus-visible {
-          outline-offset: 0;
+          border-radius: 0.0625rem;
         }
 
         &:disabled {
@@ -109,4 +109,4 @@
         }
       }
     }
-  `];
+  `];