@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/button-group.js

@@ -1 +1,249 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,l=i<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--)(n=t[s])&&(l=(i<3?n(l):i>3?n(e,o,l):n(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import ButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroup=class ButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e="horizontal"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#e}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#e=t}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#n}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([ButtonGroupButton])} ${ref(this.#t)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(this.#r.filter((({selected:t})=>t)).length>1)throw new Error("Only one selected Button Group Button is allowed.");if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#n(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof ButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof ButtonGroupButton&&o.privateSelect();break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}}#l(t){if(t.target instanceof ButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],ButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],ButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],ButtonGroup.prototype,"version",void 0),ButtonGroup=__decorate([customElement("glide-core-button-group"),final],ButtonGroup);export default ButtonGroup;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } 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 packageJson from '../package.json' with { type: 'json' };
+import ButtonGroupButton from './button-group.button.js';
+import styles from './button-group.styles.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label - For screenreaders
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {'icon-only'} [variant]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {ButtonGroupButton}
+ */
+let ButtonGroup = class ButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.#defaultSlotElementRef = createRef();
+        this.#orientation = 'horizontal';
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get variant() {
+        return this.#variant;
+    }
+    set variant(variant) {
+        for (const button of this.#buttonElements) {
+            button.privateVariant = variant;
+        }
+        this.#variant = variant;
+    }
+    /**
+     * @default 'horizontal'
+     */
+    get orientation() {
+        return this.#orientation;
+    }
+    set orientation(orientation) {
+        for (const button of this.#buttonElements) {
+            button.privateOrientation = orientation;
+        }
+        this.#orientation = orientation;
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            component: true,
+            horizontal: this.orientation === 'horizontal',
+            vertical: this.orientation === 'vertical',
+        })}
+      >
+        <div class="label" id="label" data-test="label">${this.label}</div>
+
+        <div
+          aria-labelledby="label"
+          role="radiogroup"
+          class=${classMap({
+            container: true,
+            vertical: this.orientation === 'vertical',
+        })}
+        >
+          <slot
+            @click=${this.#onDefaultSlotClick}
+            @keydown=${this.#onDefaultSlotKeydown}
+            @private-selected=${this.#onDefaultSlotSelected}
+            @slotchange=${this.#onDefaultSlotChange}
+            ${assertSlot([ButtonGroupButton])}
+            ${ref(this.#defaultSlotElementRef)}
+          >
+            <!--
+              @required
+              @type {ButtonGroupButton}
+            -->
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+    #defaultSlotElementRef;
+    #orientation;
+    #variant;
+    get #buttonElements() {
+        return [...this.querySelectorAll('glide-core-button-group-button')];
+    }
+    #onDefaultSlotChange() {
+        const areMultipleButtonsSelected = this.#buttonElements.filter(({ selected }) => selected).length > 1;
+        if (areMultipleButtonsSelected) {
+            // With form controls where only one control should be selected, like Radio Group
+            // or single-select Dropdown, we allow consumers to set multiple options as
+            // selected: both to match native and because we're able to avoid negative
+            // outcomes, at the form level, by ensuring the `value` of those components only
+            // includes one value.
+            //
+            // Button Group is different because its state doesn't end at a form. Its state is
+            // always represented somewhere else in the application. And, if the data or logic
+            // used to produce Button Group's state results in multiple selected buttons, then
+            // the same data or logic may also produce multiple selected tables or panes, for
+            // example.
+            //
+            // We could easily account for multiple selected buttons, like we do in other
+            // components, by leaving every button selected and only showing the last one as
+            // selected visually. But there's no guarantee that the logic responsible for
+            // showing one table or pane instead of another is the same as Button Group. Maybe
+            // the first selected table or pane is shown. Then there would be a mismatch
+            // between Button Group and another part of the application.
+            //
+            // Long story short, that's why we throw. Because multiple selected buttons
+            // indicates bad downstream data or logic that's likely to have consequences
+            // outside of Button Group.
+            throw new Error('Only one selected Button Group Button is allowed.');
+        }
+        const isButtonAlreadySelected = this.#buttonElements.find(({ disabled, selected }) => !disabled && selected);
+        if (!isButtonAlreadySelected) {
+            const firstEnabledButton = this.#buttonElements.find(({ disabled }) => !disabled);
+            if (firstEnabledButton) {
+                firstEnabledButton.selected = true;
+            }
+        }
+        for (const button of this.#buttonElements) {
+            button.privateVariant = this.variant;
+            if (this.orientation) {
+                button.privateOrientation = this.orientation;
+            }
+        }
+    }
+    // This handler could just as well go in Button Group Button. It's here for
+    // consistency, so that Button Group alone manages the state of `selected`.
+    #onDefaultSlotClick(event) {
+        if (event.target instanceof HTMLElement) {
+            const button = event.target.closest('glide-core-button-group-button');
+            // Guards against `button.selected` to prevent duplicate "change" and
+            // "input" events.
+            if (button && !button.disabled && !button.selected) {
+                button.privateSelect();
+            }
+        }
+    }
+    #onDefaultSlotKeydown(event) {
+        const selectedButtonElement = this.querySelector('glide-core-button-group-button[selected]');
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft': {
+                // Prevent page scroll.
+                event.preventDefault();
+                let previousButton = selectedButtonElement?.previousElementSibling ??
+                    this.#buttonElements.at(-1);
+                while (previousButton instanceof ButtonGroupButton) {
+                    if (previousButton.disabled) {
+                        previousButton =
+                            previousButton.previousElementSibling ??
+                                this.#buttonElements.at(-1);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (previousButton instanceof ButtonGroupButton) {
+                    previousButton.privateSelect();
+                }
+                break;
+            }
+            case 'ArrowDown':
+            case 'ArrowRight': {
+                // Prevent page scroll.
+                event.preventDefault();
+                let nextButton = selectedButtonElement?.nextElementSibling ??
+                    this.#buttonElements.at(0);
+                while (nextButton instanceof ButtonGroupButton) {
+                    if (nextButton.disabled) {
+                        nextButton =
+                            nextButton.nextElementSibling ?? this.#buttonElements.at(0);
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (nextButton instanceof ButtonGroupButton) {
+                    nextButton.privateSelect();
+                }
+                break;
+            }
+            // This is specifically so the VoiceOver user can select and deselect buttons.
+            // Normally only the selected button is tabbable. But VoiceOver can focus
+            // programmatically anything with a `tabindex`.
+            case ' ': {
+                // Prevent page scroll.
+                event.preventDefault();
+                if (event.target instanceof HTMLElement) {
+                    const button = event.target.closest('glide-core-button-group-button');
+                    if (button && !button.disabled && !button.selected) {
+                        button.privateSelect();
+                    }
+                }
+                break;
+            }
+        }
+    }
+    #onDefaultSlotSelected(event) {
+        // Guards against the button not being selected so an event for every
+        // deselected button isn't dispatched.
+        if (event.target instanceof ButtonGroupButton && event.target.selected) {
+            for (const button of this.#buttonElements) {
+                if (button !== event.target) {
+                    button.selected = false;
+                }
+            }
+            event.target.focus();
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], ButtonGroup.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], ButtonGroup.prototype, "variant", null);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], ButtonGroup.prototype, "orientation", null);
+__decorate([
+    property({ reflect: true })
+], ButtonGroup.prototype, "version", void 0);
+ButtonGroup = __decorate([
+    customElement('glide-core-button-group'),
+    final
+], ButtonGroup);
+export default ButtonGroup;

package/dist/button-group.styles.js

@@ -1,9 +1,13 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${visuallyHidden(".label")}
-  `,css`
+import { css } from 'lit';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${visuallyHidden('.label')}
+  `,
+    css `
     .component {
       border: 1px solid var(--glide-core-color-interactive-stroke-primary);
-      border-radius: var(--glide-core-spacing-base-sm);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
       display: inline-block;
     }
 
@@ -27,4 +31,5 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
         flex-direction: column;
       }
     }
-  `];
+  `,
+];

package/dist/button.js

@@ -1 +1,206 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./tooltip.js";import{html,LitElement}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 packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Button=class Button extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#n)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=null,this.#e=createRef(),this.#s=createRef(),this.#n=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#n;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],Button.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],Button.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],Button.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"size",void 0),__decorate([property({reflect:!0})],Button.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"variant",void 0),__decorate([property({reflect:!0})],Button.prototype,"version",void 0),__decorate([state()],Button.prototype,"hasPrefixIcon",void 0),__decorate([state()],Button.prototype,"hasSuffixIcon",void 0),Button=__decorate([customElement("glide-core-button"),final],Button);export default Button;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './tooltip.js';
+import { html, LitElement } 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 packageJson from '../package.json' with { type: 'json' };
+import styles from './button.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {string|null} [aria-description=null]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [name='']
+ * @attr {'large'|'small'} [size='large']
+ * @attr {string} [tooltip]
+ * @attr {'button'|'submit'|'reset'} [type='button']
+ * @attr {string} [value='']
+ * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} [prefix-icon] - An icon before the label
+ * @slot {Element} [suffix-icon] - An icon after the label
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ */
+let Button = class Button extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    // A getter and setter because Lit Analzyer doesn't recognize "aria-description"
+    // as a valid attribute on the `<button>` and doesn't provide a way to selectively
+    // disable rules.
+    /**
+     * @default null
+     */
+    get ariaDescription() {
+        return this.#ariaDescription;
+    }
+    set ariaDescription(description) {
+        this.#ariaDescription = description;
+        if (this.#buttonElementRef.value) {
+            this.#buttonElementRef.value.ariaDescription = description;
+        }
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    click() {
+        this.#buttonElementRef.value?.click();
+    }
+    firstUpdated() {
+        if (this.#buttonElementRef.value && this.ariaDescription) {
+            this.#buttonElementRef.value.ariaDescription = this.ariaDescription;
+        }
+    }
+    render() {
+        return html `<glide-core-tooltip
+      label=${this.tooltip ?? ''}
+      ?disabled=${!this.disabled || !this.tooltip}
+    >
+      <button
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        class=${classMap({
+            component: true,
+            primary: this.variant === 'primary',
+            secondary: this.variant === 'secondary',
+            tertiary: this.variant === 'tertiary',
+            large: this.size === 'large',
+            small: this.size === 'small',
+            disabled: this.disabled,
+            'prefix-icon': this.hasPrefixIcon,
+            'suffix-icon': this.hasSuffixIcon,
+        })}
+        data-test="button"
+        slot="target"
+        @click=${this.#onClick}
+        ${ref(this.#buttonElementRef)}
+      >
+        <slot
+          name="prefix-icon"
+          @slotchange=${this.#onPrefixIconSlotChange}
+          ${ref(this.#prefixIconSlotElementRef)}
+        >
+          <!--
+            An icon before the label
+            @type {Element}
+          -->
+        </slot>
+
+        ${this.label}
+
+        <slot
+          name="suffix-icon"
+          @slotchange=${this.#onSuffixIconSlotChange}
+          ${ref(this.#suffixIconSlotElementRef)}
+        >
+          <!--
+            An icon after the label
+            @type {Element}
+          -->
+        </slot>
+      </button>
+    </glide-core-tooltip>`;
+    }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.name = '';
+        this.size = 'large';
+        this.type = 'button';
+        this.value = '';
+        this.variant = 'primary';
+        this.version = packageJson.version;
+        this.hasPrefixIcon = false;
+        this.hasSuffixIcon = false;
+        this.#ariaDescription = null;
+        this.#buttonElementRef = createRef();
+        this.#prefixIconSlotElementRef = createRef();
+        this.#suffixIconSlotElementRef = createRef();
+        this.#internals = this.attachInternals();
+    }
+    #ariaDescription;
+    #buttonElementRef;
+    #internals;
+    #prefixIconSlotElementRef;
+    #suffixIconSlotElementRef;
+    #onClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        if (this.type === 'submit') {
+            this.form?.requestSubmit();
+            return;
+        }
+        if (this.type === 'reset') {
+            this.form?.reset();
+            return;
+        }
+    }
+    #onPrefixIconSlotChange() {
+        const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
+        this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+    #onSuffixIconSlotChange() {
+        const assignedNodes = this.#suffixIconSlotElementRef.value?.assignedNodes();
+        this.hasSuffixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Button.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'aria-description', reflect: true })
+], Button.prototype, "ariaDescription", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Button.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Button.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], Button.prototype, "tooltip", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Button.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Button.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Button.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Button.prototype, "version", void 0);
+__decorate([
+    state()
+], Button.prototype, "hasPrefixIcon", void 0);
+__decorate([
+    state()
+], Button.prototype, "hasSuffixIcon", void 0);
+Button = __decorate([
+    customElement('glide-core-button'),
+    final
+], Button);
+export default Button;

package/dist/button.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".component:focus-visible")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.component:focus-visible')}
+  `,
+    css `
     :host {
       /* Contains elements with "padding" and "width". Inline by default. */
       display: inline-block;
@@ -9,7 +13,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .component {
       align-items: center;
       border-color: transparent;
-      border-radius: var(--glide-core-rounding-base-radius-md);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
       border-style: solid;
       border-width: 1px;
       cursor: pointer;
@@ -20,9 +24,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       justify-content: center;
       padding-block: var(--glide-core-spacing-base-xs);
       padding-inline: var(--glide-core-spacing-base-md);
-      transition-duration: 150ms;
+      transition-duration: var(--glide-core-duration-moderate-02);
       transition-property: color, background-color, border-color, fill, stroke;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-timing-function: var(--glide-core-animation-swoop-in);
       user-select: none;
 
       &:focus {
@@ -143,4 +147,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         min-inline-size: 2.5625rem;
       }
     }
-  `];
+  `,
+];