@internetarchive/elements 0.2.7-alpha-webdev8429.3 → 0.2.8-webdev-8565.0

package/dist/src/elements/ia-button/ia-button.d.ts

@@ -1,9 +1,47 @@
-import { LitElement, type CSSResultGroup } from 'lit';
+import { LitElement, TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import '../ia-status-indicator/ia-status-indicator.js';
 /**
- * A button element to demo the elements library
+ * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show
+ * a loading indicator instead of the text or to customize the text, and the ability to pass in any
+ * function to run on click.
+ *
+ * Designed to behave exactly like a native type="submit" or type="reset" button if either type is supplied,
+ * i.e. for an <ia-button type="submit" @click=${doSideEffects}></ia-button>,
+ * whether the form is submitted via enter or by clicking the button directly, the button will always
+ * run doSideEffects() and then submit the form.
  */
 export declare class IAButton extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
+    mode: 'primary' | 'secondary' | 'danger' | 'warning' | 'disabled' | 'transparent' | 'custom' | 'link' | 'danger-link';
+    loading: boolean;
+    disabled: boolean;
+    loadingText: string;
+    type: 'button' | 'submit' | 'reset';
+    href?: string;
+    openLinksNewTab: boolean;
+    render(): TemplateResult;
+    protected willUpdate(changed: PropertyValues): void;
+    private get buttonTemplate();
+    private get buttonTextTemplate();
+    private get loadingStateTemplate();
+    /** Sets up or removes button type emulation as needed */
+    private setButtonTypeEmulation;
+    /**
+     * Triggers form actions (submit/reset) on click, if desired
+     * and if actions not already in progress
+     */
+    private handleComponentClick;
+    /**
+     * Adds a hidden button to the light DOM to
+     * emulate native reset/submit button behavior.
+     *
+     * Used for:
+     * - Submitting/resetting the form (on behalf of handleComponentClick)
+     * - Activating any component click events if form is submitted with the enter key
+     * (via handleFormActions)
+     */
+    private addHiddenButton;
+    /** Triggers the component's click event manually to prevent extra submission/reset */
+    private handleFormActions;
     static get styles(): CSSResultGroup;
 }
 //# sourceMappingURL=ia-button.d.ts.map

package/dist/src/elements/ia-button/ia-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAgBlC;CACF"}
+{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAEd,cAAc,EAEf,MAAM,KAAK,CAAC;AAKb,OAAO,4CAA4C,CAAC;AAEpD;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,UAAU;IAEV,IAAI,EAC5B,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,UAAU,GACV,aAAa,GACb,QAAQ,GACR,MAAM,GACN,aAAa,CAAa;IAGD,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG3B,WAAW,EAAE,MAAM,CAAM;IAGV,IAAI,EAC3C,QAAQ,GACR,QAAQ,GACR,OAAO,CAAY;IAGK,IAAI,CAAC,EAAE,MAAM,CAAC;IAGb,eAAe,EAAE,OAAO,CAAS;IAE9D,MAAM,IAAI,cAAc;IAaxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOnD,OAAO,KAAK,cAAc,GAUzB;IAGD,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,oBAAoB,GAQ/B;IAED,yDAAyD;IACzD,OAAO,CAAC,sBAAsB;IAc9B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAe5B;;;;;;;;OAQG;IACH,OAAO,CAAC,eAAe;IAevB,sFAAsF;IACtF,OAAO,CAAC,iBAAiB;IAwBzB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiNlC;CACF"}

package/dist/src/elements/ia-button/ia-button.js

@@ -1,36 +1,374 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { html, LitElement, css, render, } from 'lit';
+import { msg } from '@lit/localize';
+import { property, customElement } from 'lit/decorators.js';
 import themeStyles from '../../themes/theme-styles.js';
+import '../ia-status-indicator/ia-status-indicator.js';
 /**
- * A button element to demo the elements library
+ * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show
+ * a loading indicator instead of the text or to customize the text, and the ability to pass in any
+ * function to run on click.
+ *
+ * Designed to behave exactly like a native type="submit" or type="reset" button if either type is supplied,
+ * i.e. for an <ia-button type="submit" @click=${doSideEffects}></ia-button>,
+ * whether the form is submitted via enter or by clicking the button directly, the button will always
+ * run doSideEffects() and then submit the form.
  */
 let IAButton = class IAButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* Which version of the button to display */
+        this.mode = 'primary';
+        /* Whether to show a loading indicator instead of the button */
+        this.loading = false;
+        /* Whether the button should be disabled, regardless of submission status */
+        this.disabled = false;
+        /* Optional text to include next to the loading indicator */
+        this.loadingText = '';
+        /* Type of the button - defaults to 'button' to prevent form submission */
+        this.type = 'button';
+        /* Whether to add a target="_blank" to any wrapping link */
+        this.openLinksNewTab = false;
+    }
     render() {
         return html `
-      <button>
-        <slot></slot>
+      ${this.href
+            ? html `<a
+            href=${this.href}
+            target=${this.openLinksNewTab ? '_blank' : '_self'}
+            >${this.buttonTemplate}</a
+          >`
+            : this.buttonTemplate}
+      <slot name="hidden-button"></slot>
+    `;
+    }
+    willUpdate(changed) {
+        if (changed.has('type')) {
+            this.setButtonTypeEmulation();
+        }
+    }
+    /* The native button to render */
+    get buttonTemplate() {
+        return html `
+      <button
+        part="button"
+        class=${this.mode}
+        ?disabled=${this.disabled || this.loading}
+      >
+        ${this.buttonTextTemplate}
       </button>
     `;
     }
+    /* The text to render within the button */
+    get buttonTextTemplate() {
+        return this.loading ? this.loadingStateTemplate : html `<slot></slot>`;
+    }
+    /* Content to render while button is loading */
+    get loadingStateTemplate() {
+        return html `
+      <span class="loading-indicator" alt="Loading indicator">
+        <ia-status-indicator mode="loading"></ia-status-indicator> ${msg(this.loadingText)}
+      </span>
+    `;
+    }
+    /** Sets up or removes button type emulation as needed */
+    setButtonTypeEmulation() {
+        const hiddenButton = this.querySelector('input.hidden-button');
+        if (hiddenButton) {
+            hiddenButton.type = this.type;
+            return;
+        }
+        this.addHiddenButton();
+        this.addEventListener('click', this.handleComponentClick);
+    }
+    /**
+     * Triggers form actions (submit/reset) on click, if desired
+     * and if actions not already in progress
+     */
+    handleComponentClick(e) {
+        if (this.type === 'button')
+            return;
+        // No need to submit/reset the form if it's already submitting/resetting
+        const formActionsInProgress = e instanceof CustomEvent && e.detail.formActionsInProgress;
+        if (formActionsInProgress)
+            return;
+        // Request form submission/reset by clicking the hidden native submit/reset button we added earlier
+        const hiddenButton = this.querySelector('input.hidden-button');
+        hiddenButton.dispatchEvent(new PointerEvent('click'));
+    }
+    /**
+     * Adds a hidden button to the light DOM to
+     * emulate native reset/submit button behavior.
+     *
+     * Used for:
+     * - Submitting/resetting the form (on behalf of handleComponentClick)
+     * - Activating any component click events if form is submitted with the enter key
+     * (via handleFormActions)
+     */
+    addHiddenButton() {
+        if (this.type === 'button')
+            return;
+        render(html `<input
+        type=${this.type}
+        class="hidden-button"
+        style="display:none"
+        slot="hidden-button"
+        @click=${(e) => this.handleFormActions(e)}
+      />`, this);
+    }
+    /** Triggers the component's click event manually to prevent extra submission/reset */
+    handleFormActions(e) {
+        /**
+         * Prevents the event from bubbling up to the ia-button component itself.
+         * This way, if the click on this button is triggered by a click on the component,
+         * we don't accidentally bubble up a second click and end up in an infinite loop.
+         *
+         * And if the click was triggered by form submission (via the enter key), we can hijack the click
+         * event to pass that info to the component, so it knows not to
+         * re-attempt submission.
+         */
+        e.stopPropagation();
+        // Detect if click comes from the parent component,
+        // in which case there's no need to trigger a second click on it
+        const triggeredByComponentClick = !e.isTrusted;
+        if (triggeredByComponentClick)
+            return;
+        // Trigger parent component click events manually,
+        // so it knows not to try to re-submit/re-reset the form
+        this.dispatchEvent(new CustomEvent('click', { detail: { formActionsInProgress: true } }));
+    }
     static get styles() {
         return [
             themeStyles,
             css `
         :host {
-          --primary-background-color--: var(--primary-cta-fill);
-          --primary-text-color--: var(--primary-cta-text-color);
+          --primary-cta-text-color--: var(--primary-cta-text-color);
+          --primary-cta-fill--: var(--primary-cta-fill);
+          --primary-cta-border--: var(--primary-cta-border);
+
+          --secondary-cta-text-color--: var(--secondary-cta-text-color);
+          --secondary-cta-fill--: var(--secondary-cta-fill);
+          --secondary-cta-border--: var(--secondary-cta-border);
+
+          --danger-cta-text-color--: var(--danger-cta-text-color);
+          --danger-cta-fill--: var(--danger-cta-fill);
+          --danger-cta-border--: var(--danger-cta-border);
+
+          --warning-cta-text-color--: var(--warning-cta-text-color);
+          --warning-cta-fill--: var(--warning-cta-fill);
+          --warning-cta-border--: var(--warning-cta-border);
+
+          --disabled-cta-text-color--: var(--disabled-cta-text-color);
+          --disabled-cta-fill--: var(--disabled-cta-fill);
+          --disabled-cta-border--: var(--disabled-cta-border);
+
+          --link-color--: var(--link-color);
+          --color-danger--: var(--color-danger);
+
+          --button-padding--: var(--button-padding);
+          --button-width--: var(--button-width);
+          --button-height--: var(--button-height);
+          --button-border-width--: var(--button-border-width);
+          --button-border-radius--: var(--button-border-radius);
+          --base-font-family--: var(--base-font-family);
+
+          --ia-button-transition--: var(
+            --ia-button-transition,
+            all 0.1s ease 0s
+          );
+
+          --ia-button-custom-text-color--: var(
+            --ia-button-custom-text-color,
+            var(--primary-cta-text-color--)
+          );
+          --ia-button-custom-fill--: var(
+            --ia-button-custom-fill,
+            var(--primary-cta-fill--)
+          );
+          --ia-button-custom-border--: var(
+            --ia-button-custom-border,
+            var(--primary-cta-border--)
+          );
+          --ia-button-custom-active-text-color--: var(
+            --ia-button-custom-active-text-color,
+            var(--ia-button-custom-text-color--)
+          );
+          --ia-button-custom-active-fill--: var(
+            --ia-button-custom-active-fill,
+            var(--ia-button-custom-fill--)
+          );
+          --ia-button-custom-active-border--: var(
+            --ia-button-custom-active-border,
+            var(--ia-button-custom-border--)
+          );
+
+          display: inline-block; /* keeps host sized to button */
         }
 
         button {
-          padding: 8px 16px;
-          background-color: var(--primary-background-color--);
-          color: var(--primary-text-color--);
+          font-family: var(--base-font-family--);
+          font-size: var(--font-size-standard--);
+          height: var(--button-height--);
+          min-height: var(--button-height--);
+          width: var(--button-width--);
+          padding: var(--button-padding--);
+          border-width: var(--button-border-width--);
+          border-radius: var(--button-border-radius--);
+          transition: var(--ia-button-transition--);
+          outline-color: var(--primary-cta-text-color--);
+
+          cursor: pointer;
+          line-height: normal;
+          border-style: 'solid';
+          white-space: nowrap;
+          appearance: auto;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          vertical-align: middle;
+          outline-offset: -4px;
+          user-select: none;
+          text-decoration: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          -o-user-select: none;
+        }
+
+        a {
+          text-decoration: none;
+        }
+
+        button:disabled,
+        button.disabled {
+          cursor: not-allowed;
+          color: var(--disabled-cta-text-color--);
+          background-color: var(--disabled-cta-fill--);
+          border: 1px solid var(--disabled-cta-border--);
+          opacity: 0.5;
+        }
+
+        button:enabled:hover {
+          opacity: 0.9;
+        }
+
+        button:focus-visible {
+          opacity: 0.8;
+          outline-style: double;
+        }
+
+        button:active {
+          opacity: 0.7;
+        }
+
+        button.primary {
+          color: var(--primary-cta-text-color--);
+          background-color: var(--primary-cta-fill--);
+          border-color: var(--primary-cta-border--);
+        }
+
+        button.secondary {
+          color: var(--secondary-cta-text-color--);
+          background-color: var(--secondary-cta-fill--);
+          border-color: var(--secondary-cta-border--);
+        }
+
+        button.danger {
+          color: var(--danger-cta-text-color--);
+          background-color: var(--danger-cta-fill--);
+          border-color: var(--danger-cta-border--);
+        }
+
+        button.warning {
+          color: var(--warning-cta-text-color--);
+          background-color: var(--warning-cta-fill--);
+          border-color: var(--warning-cta-border--);
+        }
+
+        button.transparent {
+          color: inherit;
+          border-width: 0;
+          background-color: transparent;
+          border-color: transparent;
+        }
+
+        button.custom {
+          color: var(--ia-button-custom-text-color--);
+          background-color: var(--ia-button-custom-fill--);
+          border-color: var(--ia-button-custom-border--);
+        }
+
+        button.custom:enabled:is(:hover, :focus, :active) {
+          color: var(--ia-button-custom-active-text-color--);
+          background-color: var(--ia-button-custom-active-fill--);
+          border-color: var(--ia-button-custom-active-border--);
+        }
+
+        :host(.fit-content) button {
+          padding: 0;
+          height: fit-content;
+        }
+
+        button.link:enabled:hover,
+        button.danger-link:enabled:hover {
+          text-decoration: underline;
+        }
+
+        button.link,
+        button.danger-link {
+          margin: 0;
+          border: 0;
+          appearance: none;
+          background: none;
+          text-decoration: none;
+          cursor: pointer;
+          padding: 0;
+        }
+
+        button.link {
+          color: var(--link-color--);
+        }
+
+        button.danger-link {
+          color: var(--color-danger--);
+        }
+
+        .loading-indicator {
+          display: flex;
+          flex-direction: row;
+          gap: 0.5rem;
+          align-items: center;
+        }
+
+        ia-status-indicator {
+          --ia-theme-primary-text-color: currentColor;
         }
       `,
         ];
     }
 };
+__decorate([
+    property({ type: String })
+], IAButton.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], IAButton.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], IAButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], IAButton.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAButton.prototype, "openLinksNewTab", void 0);
 IAButton = __decorate([
     customElement('ia-button')
 ], IAButton);

package/dist/src/elements/ia-button/ia-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;OAWF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA1BY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0BpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * A button element to demo the elements library\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  render() {\n    return html`\n      <button>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --primary-background-color--: var(--primary-cta-fill);\n          --primary-text-color--: var(--primary-cta-text-color);\n        }\n\n        button {\n          padding: 8px 16px;\n          background-color: var(--primary-background-color--);\n          color: var(--primary-text-color--);\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  css,\n  PropertyValues,\n  render,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport '../ia-status-indicator/ia-status-indicator';\n\n/**\n * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show\n * a loading indicator instead of the text or to customize the text, and the ability to pass in any\n * function to run on click.\n *\n * Designed to behave exactly like a native type=\"submit\" or type=\"reset\" button if either type is supplied,\n * i.e. for an <ia-button type=\"submit\" @click=${doSideEffects}></ia-button>,\n * whether the form is submitted via enter or by clicking the button directly, the button will always\n * run doSideEffects() and then submit the form.\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n  /* Which version of the button to display */\n  @property({ type: String }) mode:\n    | 'primary'\n    | 'secondary'\n    | 'danger'\n    | 'warning'\n    | 'disabled'\n    | 'transparent'\n    | 'custom'\n    | 'link'\n    | 'danger-link' = 'primary';\n\n  /* Whether to show a loading indicator instead of the button */\n  @property({ type: Boolean }) loading: boolean = false;\n\n  /* Whether the button should be disabled, regardless of submission status */\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  /* Optional text to include next to the loading indicator */\n  @property({ type: String }) loadingText: string = '';\n\n  /* Type of the button - defaults to 'button' to prevent form submission */\n  @property({ type: String, reflect: true }) type:\n    | 'button'\n    | 'submit'\n    | 'reset' = 'button';\n\n  /* An optional href to wrap around the button */\n  @property({ type: String }) href?: string;\n\n  /* Whether to add a target=\"_blank\" to any wrapping link */\n  @property({ type: Boolean }) openLinksNewTab: boolean = false;\n\n  render(): TemplateResult {\n    return html`\n      ${this.href\n        ? html`<a\n            href=${this.href}\n            target=${this.openLinksNewTab ? '_blank' : '_self'}\n            >${this.buttonTemplate}</a\n          >`\n        : this.buttonTemplate}\n      <slot name=\"hidden-button\"></slot>\n    `;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('type')) {\n      this.setButtonTypeEmulation();\n    }\n  }\n\n  /* The native button to render */\n  private get buttonTemplate(): TemplateResult {\n    return html`\n      <button\n        part=\"button\"\n        class=${this.mode}\n        ?disabled=${this.disabled || this.loading}\n      >\n        ${this.buttonTextTemplate}\n      </button>\n    `;\n  }\n\n  /* The text to render within the button */\n  private get buttonTextTemplate(): TemplateResult {\n    return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;\n  }\n\n  /* Content to render while button is loading */\n  private get loadingStateTemplate(): TemplateResult {\n    return html`\n      <span class=\"loading-indicator\" alt=\"Loading indicator\">\n        <ia-status-indicator mode=\"loading\"></ia-status-indicator> ${msg(\n          this.loadingText,\n        )}\n      </span>\n    `;\n  }\n\n  /** Sets up or removes button type emulation as needed */\n  private setButtonTypeEmulation(): void {\n    const hiddenButton: HTMLInputElement | null = this.querySelector(\n      'input.hidden-button',\n    );\n\n    if (hiddenButton) {\n      hiddenButton.type = this.type;\n      return;\n    }\n\n    this.addHiddenButton();\n    this.addEventListener('click', this.handleComponentClick);\n  }\n\n  /**\n   * Triggers form actions (submit/reset) on click, if desired\n   * and if actions not already in progress\n   */\n  private handleComponentClick(e: Event): void {\n    if (this.type === 'button') return;\n\n    // No need to submit/reset the form if it's already submitting/resetting\n    const formActionsInProgress =\n      e instanceof CustomEvent && e.detail.formActionsInProgress;\n    if (formActionsInProgress) return;\n\n    // Request form submission/reset by clicking the hidden native submit/reset button we added earlier\n    const hiddenButton = this.querySelector(\n      'input.hidden-button',\n    ) as HTMLInputElement;\n    hiddenButton.dispatchEvent(new PointerEvent('click'));\n  }\n\n  /**\n   * Adds a hidden button to the light DOM to\n   * emulate native reset/submit button behavior.\n   *\n   * Used for:\n   * - Submitting/resetting the form (on behalf of handleComponentClick)\n   * - Activating any component click events if form is submitted with the enter key\n   * (via handleFormActions)\n   */\n  private addHiddenButton(): void {\n    if (this.type === 'button') return;\n\n    render(\n      html`<input\n        type=${this.type}\n        class=\"hidden-button\"\n        style=\"display:none\"\n        slot=\"hidden-button\"\n        @click=${(e: Event) => this.handleFormActions(e)}\n      />`,\n      this,\n    );\n  }\n\n  /** Triggers the component's click event manually to prevent extra submission/reset */\n  private handleFormActions(e: Event): void {\n    /**\n     * Prevents the event from bubbling up to the ia-button component itself.\n     * This way, if the click on this button is triggered by a click on the component,\n     * we don't accidentally bubble up a second click and end up in an infinite loop.\n     *\n     * And if the click was triggered by form submission (via the enter key), we can hijack the click\n     * event to pass that info to the component, so it knows not to\n     * re-attempt submission.\n     */\n    e.stopPropagation();\n\n    // Detect if click comes from the parent component,\n    // in which case there's no need to trigger a second click on it\n    const triggeredByComponentClick = !e.isTrusted;\n    if (triggeredByComponentClick) return;\n\n    // Trigger parent component click events manually,\n    // so it knows not to try to re-submit/re-reset the form\n    this.dispatchEvent(\n      new CustomEvent('click', { detail: { formActionsInProgress: true } }),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --primary-cta-text-color--: var(--primary-cta-text-color);\n          --primary-cta-fill--: var(--primary-cta-fill);\n          --primary-cta-border--: var(--primary-cta-border);\n\n          --secondary-cta-text-color--: var(--secondary-cta-text-color);\n          --secondary-cta-fill--: var(--secondary-cta-fill);\n          --secondary-cta-border--: var(--secondary-cta-border);\n\n          --danger-cta-text-color--: var(--danger-cta-text-color);\n          --danger-cta-fill--: var(--danger-cta-fill);\n          --danger-cta-border--: var(--danger-cta-border);\n\n          --warning-cta-text-color--: var(--warning-cta-text-color);\n          --warning-cta-fill--: var(--warning-cta-fill);\n          --warning-cta-border--: var(--warning-cta-border);\n\n          --disabled-cta-text-color--: var(--disabled-cta-text-color);\n          --disabled-cta-fill--: var(--disabled-cta-fill);\n          --disabled-cta-border--: var(--disabled-cta-border);\n\n          --link-color--: var(--link-color);\n          --color-danger--: var(--color-danger);\n\n          --button-padding--: var(--button-padding);\n          --button-width--: var(--button-width);\n          --button-height--: var(--button-height);\n          --button-border-width--: var(--button-border-width);\n          --button-border-radius--: var(--button-border-radius);\n          --base-font-family--: var(--base-font-family);\n\n          --ia-button-transition--: var(\n            --ia-button-transition,\n            all 0.1s ease 0s\n          );\n\n          --ia-button-custom-text-color--: var(\n            --ia-button-custom-text-color,\n            var(--primary-cta-text-color--)\n          );\n          --ia-button-custom-fill--: var(\n            --ia-button-custom-fill,\n            var(--primary-cta-fill--)\n          );\n          --ia-button-custom-border--: var(\n            --ia-button-custom-border,\n            var(--primary-cta-border--)\n          );\n          --ia-button-custom-active-text-color--: var(\n            --ia-button-custom-active-text-color,\n            var(--ia-button-custom-text-color--)\n          );\n          --ia-button-custom-active-fill--: var(\n            --ia-button-custom-active-fill,\n            var(--ia-button-custom-fill--)\n          );\n          --ia-button-custom-active-border--: var(\n            --ia-button-custom-active-border,\n            var(--ia-button-custom-border--)\n          );\n\n          display: inline-block; /* keeps host sized to button */\n        }\n\n        button {\n          font-family: var(--base-font-family--);\n          font-size: var(--font-size-standard--);\n          height: var(--button-height--);\n          min-height: var(--button-height--);\n          width: var(--button-width--);\n          padding: var(--button-padding--);\n          border-width: var(--button-border-width--);\n          border-radius: var(--button-border-radius--);\n          transition: var(--ia-button-transition--);\n          outline-color: var(--primary-cta-text-color--);\n\n          cursor: pointer;\n          line-height: normal;\n          border-style: 'solid';\n          white-space: nowrap;\n          appearance: auto;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          vertical-align: middle;\n          outline-offset: -4px;\n          user-select: none;\n          text-decoration: none;\n          -webkit-user-select: none;\n          -moz-user-select: none;\n          -ms-user-select: none;\n          -o-user-select: none;\n        }\n\n        a {\n          text-decoration: none;\n        }\n\n        button:disabled,\n        button.disabled {\n          cursor: not-allowed;\n          color: var(--disabled-cta-text-color--);\n          background-color: var(--disabled-cta-fill--);\n          border: 1px solid var(--disabled-cta-border--);\n          opacity: 0.5;\n        }\n\n        button:enabled:hover {\n          opacity: 0.9;\n        }\n\n        button:focus-visible {\n          opacity: 0.8;\n          outline-style: double;\n        }\n\n        button:active {\n          opacity: 0.7;\n        }\n\n        button.primary {\n          color: var(--primary-cta-text-color--);\n          background-color: var(--primary-cta-fill--);\n          border-color: var(--primary-cta-border--);\n        }\n\n        button.secondary {\n          color: var(--secondary-cta-text-color--);\n          background-color: var(--secondary-cta-fill--);\n          border-color: var(--secondary-cta-border--);\n        }\n\n        button.danger {\n          color: var(--danger-cta-text-color--);\n          background-color: var(--danger-cta-fill--);\n          border-color: var(--danger-cta-border--);\n        }\n\n        button.warning {\n          color: var(--warning-cta-text-color--);\n          background-color: var(--warning-cta-fill--);\n          border-color: var(--warning-cta-border--);\n        }\n\n        button.transparent {\n          color: inherit;\n          border-width: 0;\n          background-color: transparent;\n          border-color: transparent;\n        }\n\n        button.custom {\n          color: var(--ia-button-custom-text-color--);\n          background-color: var(--ia-button-custom-fill--);\n          border-color: var(--ia-button-custom-border--);\n        }\n\n        button.custom:enabled:is(:hover, :focus, :active) {\n          color: var(--ia-button-custom-active-text-color--);\n          background-color: var(--ia-button-custom-active-fill--);\n          border-color: var(--ia-button-custom-active-border--);\n        }\n\n        :host(.fit-content) button {\n          padding: 0;\n          height: fit-content;\n        }\n\n        button.link:enabled:hover,\n        button.danger-link:enabled:hover {\n          text-decoration: underline;\n        }\n\n        button.link,\n        button.danger-link {\n          margin: 0;\n          border: 0;\n          appearance: none;\n          background: none;\n          text-decoration: none;\n          cursor: pointer;\n          padding: 0;\n        }\n\n        button.link {\n          color: var(--link-color--);\n        }\n\n        button.danger-link {\n          color: var(--color-danger--);\n        }\n\n        .loading-indicator {\n          display: flex;\n          flex-direction: row;\n          gap: 0.5rem;\n          align-items: center;\n        }\n\n        ia-status-indicator {\n          --ia-theme-primary-text-color: currentColor;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-combo-box/caret-closed.svg

@@ -1,8 +1,8 @@
-<svg
-  viewBox="0 0 8 4"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
-  ></path>
-</svg>
+<svg
+  viewBox="0 0 8 4"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m6.7226499.58397485c.22976435-.15317623.54019902-.09108929.69337525.13867505.13615665.20423498.10222882.47220947-.06836249.63681849l-.07031256.05655676-3.2773501 2.18490006-3.2773501-2.18490006c-.22976434-.15317623-.29185128-.4636109-.13867505-.69337525.13615665-.20423497.39656688-.27598409.61412572-.18182636l.07924953.04315131 2.7226499 1.81402515z"
+  ></path>
+</svg>

package/dist/src/elements/ia-combo-box/caret-open.svg

@@ -1,8 +1,8 @@
-<svg
-  viewBox="0 0 8 4"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
-  ></path>
-</svg>
+<svg
+  viewBox="0 0 8 4"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m6.7226499 3.51689722c.22976435.15317623.54019902.0910893.69337525-.13867505.13615665-.20423497.10222882-.47220946-.06836249-.63681849l-.07031256-.05655675-3.2773501-2.18490007-3.2773501 2.18490007c-.22976434.15317623-.29185128.4636109-.13867505.69337524.13615665.20423498.39656688.27598409.61412572.18182636l.07924953-.04315131 2.7226499-1.81402514z"
+  ></path>
+</svg>

package/dist/src/elements/ia-combo-box/clear.svg

@@ -1,9 +1,9 @@
-<svg
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
-    fill-rule="evenodd"
-  ></path>
+<svg
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m50 0c27.6142375 0 50 22.3857625 50 50s-22.3857625 50-50 50-50-22.3857625-50-50 22.3857625-50 50-50zm23.8159475 26.1840525c-1.4033215-1.4033215-3.5816761-1.5592461-5.1572272-.4677738l-.5598841.4677738-18.0988362 18.0989475-18.0988362-18.0989475-.5598841-.4677738c-1.5755511-1.0914723-3.7539057-.9355477-5.1572272.4677738-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113l18.0989475 18.0988362-18.0989475 18.0988362c-1.5787367 1.5787367-1.5787367 4.1383746 0 5.7171113 1.4033215 1.4033215 3.5816761 1.5592461 5.1572272.4677738l.5598841-.4677738 18.0988362-18.0989475 18.0988362 18.0989475.5598841.4677738c1.5755511 1.0914723 3.7539057.9355477 5.1572272-.4677738 1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113l-18.0989475-18.0988362 18.0989475-18.0988362c1.5787367-1.5787367 1.5787367-4.1383746 0-5.7171113z"
+    fill-rule="evenodd"
+  ></path>
 </svg>

package/dist/src/elements/ia-combo-box/ia-combo-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-combo-box.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-combo-box/ia-combo-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EAEd,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,EAGL,KAAK,kBAAkB,EAEvB,KAAK,sBAAsB,EAE3B,KAAK,gBAAgB,EACtB,MAAM,UAAU,CAAC;AA0BlB;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;;;;;;;;;OAUG;IACwB,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAE5D;;OAEG;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;;;;;;;;;OAUG;IACyB,QAAQ,EAAE,kBAAkB,CAAoB;IAE5E;;;;OAIG;IAEH,sBAAsB,SAA4B;IAElD;;;;;;;;;;;;;;;;;;;;OAoBG;IACyB,MAAM,EAAE,sBAAsB,CAClC;IAExB;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;;OAIG;IACyC,IAAI,UAAS;IAEzD;;;OAGG;IAGH;;;;;OAKG;IAEH,aAAa,UAAS;IAEtB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IACyC,SAAS,UAAS;IAE9D;;OAEG;IACyC,IAAI,UAAS;IAEzD;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;;;;OAMG;IACyB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExD;;OAEG;IACM,OAAO,CAAC,QAAQ,CAAS;IAElC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiB,CAAiC;IAEnE;;OAEG;IACM,OAAO,CAAC,WAAW,CAAc;IAE1C;;OAEG;IACM,OAAO,CAAC,UAAU,CAAc;IAEd,OAAO,CAAC,aAAa,CAAC,CAAiB;IAE5C,OAAO,CAAC,SAAS,CAAC,CAAmB;IAEnC,OAAO,CAAC,WAAW,CAAC,CAAmB;IAE/D,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAGtC;IAEF,OAAO,CAAC,SAAS,CAAmB;IAEpC;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAAS;IAE5B;;;OAGG;IACH,OAAO,CAAC,WAAW,CAA4C;IAE/D;;;OAGG;IACH,OAAO,CAAC,qBAAqB,CAA4C;IAEzE;;;;OAIG;IACH,OAAO,CAAC,yBAAyB,CAA0B;IAE3D;;;OAGG;IACH,OAAO,CAAC,eAAe,CAA0B;;IAOjD,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAmBzC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA+CzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA4BtC;;;;OAIG;IACH,OAAO,KAAK,aAAa,GAMxB;IAED;;;OAGG;IACH,OAAO,KAAK,iBAAiB,GA6B5B;IAED;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAsB9B;IAED;;;OAGG;IACH,OAAO,KAAK,aAAa,GAqBxB;IAED;;OAEG;IACH,OAAO,KAAK,mBAAmB,GAmB9B;IAED;;OAEG;IACH,OAAO,KAAK,mBAAmB,GAiB9B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GA+B1B;IAED;;;OAGG;IACH,OAAO,KAAK,oBAAoB,GAM/B;IAMD;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAIhC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAM/B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAqC7B;;OAEG;YACW,kBAAkB;IAUhC;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAmB1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAK9B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAI/B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAIjC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAc1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAM9B;;OAEG;IACH,OAAO,CAAC,WAAW;IASnB;;OAEG;IACH,OAAO,CAAC,UAAU;IAwBlB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA8B1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAI5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAkB/B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAkB3B;;;OAGG;YACW,oBAAoB;IAmBlC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAenC;;;OAGG;IACH,mBAAmB,IAAI,IAAI;IAQ3B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,QAAQ;IAYhB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAMpB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAKrB,eAAe,IAAI,IAAI;IAKvB,gBAAgB,IAAI,IAAI;IAKxB,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAYvB;;OAEG;IACH,OAAO,KAAK,OAAO,GAElB;IAED;;;OAGG;IACH,OAAO,KAAK,qBAAqB,GAEhC;IAED;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;OAGG;IACH,OAAO,KAAK,aAAa,GAExB;IAED;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAO1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAY5B;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IAUpC;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAsB9B;;OAEG;IACH,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACH,OAAO,KAAK,kBAAkB,GAE7B;IAED;;OAEG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,gBAAgB,GAAG,IAAI,CAG5C;IAED;;;OAGG;IACH,OAAO,KAAK,gBAAgB,GAG3B;IAED;;;OAGG;IACH,OAAO,KAAK,kBAAkB,GAG7B;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAuKlC;CACF"}
+{"version":3,"file":"ia-combo-box.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-combo-box/ia-combo-box.ts"],"names":[],"mappings":"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"}

package/dist/src/elements/ia-combo-box/ia-combo-box.js

@@ -1055,6 +1055,10 @@ let IAComboBox = class IAComboBox extends LitElement {
         --combo-box-padding--: var(--padding-sm);
         --combo-box-list-width--: var(--combo-box-list-width, unset);
         --combo-box-list-max-height--: var(--combo-box-list-max-height, 250px);
+        --combo-box-list-fade-duration--: var(
+          --combo-box-list-fade-duration,
+          125ms
+        );
       }
 
       #container {
@@ -1155,7 +1159,7 @@ let IAComboBox = class IAComboBox extends LitElement {
         max-height: 400px;
         box-shadow: 0 0 1px 1px #ddd;
         opacity: 0;
-        transition: opacity 0.125s ease;
+        transition: opacity var(--combo-box-list-fade-duration--) ease;
       }
 
       #options-list.visible {