@internetarchive/elements 0.2.3-alpha-webdev8378.1 → 0.2.3-alpha-webdev8378.3

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts

@@ -47,10 +47,6 @@ export declare class IADropdownSearchBar extends LitElement {
      * The current search query with +'s replaced by spaces.
      */
     private get spacedQuery();
-    /**
-     * Template for any slotted search links beneath the search bar
-     */
-    private get searchLinksTemplate();
     /**
      * Handler for when the search bar's clear button is pressed.
      */

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,UAAU,CAAC;AAKlB,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAE3C,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAgBxB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAkB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,KAAK,mBAAmB,GAgB9B;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAsKhB;CACF"}
+{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,UAAU,CAAC;AAKlB,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAE3C,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAkB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAmHhB;CACF"}

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js

@@ -30,7 +30,7 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
     }
     /** The effective selected category, falling back to the first in the list. */
     get resolvedCategory() {
-        return this.selectedCategory ?? this.categories[0]?.id ?? '';
+        return this.selectedCategory ?? this.categories?.[0]?.id ?? '';
     }
     render() {
         return html `
@@ -43,7 +43,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
           ${this.hideDropdown ? nothing : this.dropdownTemplate}
           ${this.textBoxTemplate} ${this.searchButtonTemplate}
         </div>
-        ${this.searchLinksTemplate}
       </div>
     `;
     }
@@ -131,26 +130,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
     get spacedQuery() {
         return this.query?.replace(/\+/g, ' ') ?? '';
     }
-    /**
-     * Template for any slotted search links beneath the search bar
-     */
-    get searchLinksTemplate() {
-        return html `
-      <div id="search-links-area">
-        <slot name="before-search-links"></slot>
-        <div
-          id="search-links"
-          part="search-links"
-          class=${this.useMobileView ? 'mobile' : nothing}
-        >
-          <slot name="search-links-top"></slot>
-          <div id="search-links-end">
-            <slot name="search-links"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
     /**
      * Handler for when the search bar's clear button is pressed.
      */
@@ -210,7 +189,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
       #main-bar {
         display: flex;
         height: var(--search-bar-height--, 30px);
-        margin-bottom: 10px;
         flex: 1;
       }
 
@@ -306,56 +284,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         --icon-width: 20px;
         margin-top: 2px;
       }
-
-      #search-links-area {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        margin-top: 5px;
-        font-size: inherit;
-      }
-
-      #search-links {
-        display: flex;
-        column-gap: 10px;
-        width: 100%;
-      }
-
-      #search-links > a:not(:last-child) {
-        margin-bottom: 2px;
-      }
-
-      #search-links-end {
-        display: contents;
-      }
-
-      .mobile #search-links-end {
-        display: flex;
-        margin-left: auto;
-        column-gap: 10px;
-      }
-
-      a:link {
-        text-decoration: none;
-        display: block;
-        flex: 0 1 auto;
-        color: var(--ia-theme-link-color, #4b64ff);
-        white-space: nowrap;
-      }
-
-      a:hover {
-        text-decoration: underline;
-      }
-
-      a:visited {
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-
-      ::slotted(#action-bar-spacing) {
-        --iconLabelGutterWidth: 3px;
-        margin-top: -4px; /* Better icon alignment */
-        height: fit-content;
-      }
     `;
         return [themeStyles, ownStyles];
     }

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\r\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\r\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\r\nimport type {\r\n  SearchCategory,\r\n  SearchRequestedDetail,\r\n} from './models';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\nimport searchIcon from './search.svg';\r\n\r\nimport '@internetarchive/ia-clearable-text-input';\r\nimport '@internetarchive/ia-dropdown';\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\n/**\r\n * Event names emitted by this component\r\n */\r\nconst Events = {\r\n  CategoryChanged: 'categoryChanged',\r\n  SearchRequested: 'searchRequested',\r\n};\r\n\r\n@customElement('ia-dropdown-search-bar')\r\nexport class IADropdownSearchBar extends LitElement {\r\n  /** The query that appears in the search bar */\r\n  @property({ type: String }) query?: string;\r\n\r\n  /** Dropdown menu options (tab IDs + labels) */\r\n  @property({ type: Array }) categories: SearchCategory[] = [];\r\n\r\n  /** The currently selected dropdown category ID */\r\n  @property({ type: String }) selectedCategory?: string;\r\n\r\n  /** Placeholder text for the search input */\r\n  @property({ type: String }) placeholder = msg('Search');\r\n\r\n  /** Whether to use the mobile layout */\r\n  @property({ type: Boolean }) useMobileView = false;\r\n\r\n  /** Whether to hide the category dropdown to the left of the search bar */\r\n  @property({ type: Boolean }) hideDropdown = false;\r\n\r\n  /** Whether the search button should show its loading state */\r\n  @property({ type: Boolean }) loading = false;\r\n\r\n  @query('#search-input')\r\n  private searchInput!: IaClearableTextInput;\r\n\r\n  /** The effective selected category, falling back to the first in the list. */\r\n  private get resolvedCategory(): string {\r\n    return this.selectedCategory ?? this.categories[0]?.id ?? '';\r\n  }\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div id=\"container\" part=\"container\" role=\"search\">\r\n        <div\r\n          id=\"main-bar\"\r\n          part=\"main-bar\"\r\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\r\n        >\r\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\r\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\r\n        </div>\r\n        ${this.searchLinksTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the category dropdown on the left side of the search bar.\r\n   */\r\n  private get dropdownTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-dropdown\r\n        id=\"category-dropdown\"\r\n        part=\"category-dropdown\"\r\n        displayCaret\r\n        includeSelectedOption\r\n        closeOnSelect\r\n        closeOnEscape\r\n        closeOnBackdropClick\r\n        openViaButton\r\n        .selectedOption=${this.resolvedCategory}\r\n        .options=${this.dropdownOptions}\r\n        @optionSelected=${this.handleCategorySelected}\r\n      >\r\n        <span slot=\"dropdown-label\">${this.selectedCategoryLabel}</span>\r\n      </ia-dropdown>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the main text entry box of the search bar.\r\n   */\r\n  private get textBoxTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-clearable-text-input\r\n        id=\"search-input\"\r\n        part=\"search-input\"\r\n        .value=${this.spacedQuery}\r\n        placeholder=${this.placeholder}\r\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\r\n        screenReaderLabel=${msg(\r\n          'Search the Archive. Filters and Advanced Search available below.',\r\n        )}\r\n        @clear=${this.searchFieldCleared}\r\n        @submit=${this.handleSubmit}\r\n      ></ia-clearable-text-input>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\r\n   */\r\n  private get searchButtonTemplate(): TemplateResult {\r\n    return html`\r\n      <button\r\n        id=\"search-button\"\r\n        part=\"search-button\"\r\n        class=${this.loading ? 'loading' : nothing}\r\n        type=\"button\"\r\n        aria-label=${msg('Search')}\r\n        @click=${this.handleSubmit}\r\n      >\r\n        ${this.loading\r\n          ? html`<ia-status-indicator\r\n              mode=\"loading\"\r\n              class=\"search-button-loading-icon\"\r\n            ></ia-status-indicator>`\r\n          : html`<img src=${searchIcon} alt=\"\" />`}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Converts the `categories` array into the `optionInterface[]` format\r\n   * expected by `ia-dropdown`.\r\n   */\r\n  private get dropdownOptions(): optionInterface[] {\r\n    return this.categories.map((cat) => ({\r\n      id: cat.id,\r\n      label: html`<span>${cat.label}</span>`,\r\n    }));\r\n  }\r\n\r\n  /**\r\n   * The display label for the currently selected category.\r\n   */\r\n  private get selectedCategoryLabel(): string {\r\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\r\n    return match?.label ?? this.resolvedCategory;\r\n  }\r\n\r\n  /**\r\n   * The current search query with +'s replaced by spaces.\r\n   */\r\n  private get spacedQuery(): string {\r\n    return this.query?.replace(/\\+/g, ' ') ?? '';\r\n  }\r\n\r\n  /**\r\n   * Template for any slotted search links beneath the search bar\r\n   */\r\n  private get searchLinksTemplate(): TemplateResult {\r\n    return html`\r\n      <div id=\"search-links-area\">\r\n        <slot name=\"before-search-links\"></slot>\r\n        <div\r\n          id=\"search-links\"\r\n          part=\"search-links\"\r\n          class=${this.useMobileView ? 'mobile' : nothing}\r\n        >\r\n          <slot name=\"search-links-top\"></slot>\r\n          <div id=\"search-links-end\">\r\n            <slot name=\"search-links\"></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Handler for when the search bar's clear button is pressed.\r\n   */\r\n  private searchFieldCleared(): void {\r\n    if (this.query) {\r\n      this.emitSearchRequested();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for Enter key or search button click.\r\n   */\r\n  private handleSubmit(): void {\r\n    this.emitSearchRequested();\r\n  }\r\n\r\n  /**\r\n   * Handler for when the user selects a category from the dropdown.\r\n   *\r\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\r\n   * pattern). The parent also binds this property and may re-set it on re-render.\r\n   */\r\n  private handleCategorySelected(\r\n    e: CustomEvent<{ option: optionInterface }>,\r\n  ): void {\r\n    const newCategoryId = e.detail.option.id;\r\n    if (newCategoryId === this.resolvedCategory) return;\r\n\r\n    this.selectedCategory = newCategoryId;\r\n\r\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\r\n    setTimeout(() => this.searchInput.focus());\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<string>(Events.CategoryChanged, {\r\n        detail: newCategoryId,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Emits a `searchRequested` event with the current query and category.\r\n   */\r\n  private emitSearchRequested(): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\r\n        detail: {\r\n          query: this.searchInput.value,\r\n          category: this.resolvedCategory,\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  static get styles() {\r\n    const ownStyles = css`\r\n      :host {\r\n        --search-bar-height--: var(--search-bar-height, 30px);\r\n        --search-bar-width--: var(--search-bar-width, 300px);\r\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\r\n        --clear-button-offset--: var(--clear-button-offset, 0);\r\n      }\r\n\r\n      #container {\r\n        display: inline-block;\r\n        width: var(--search-bar-width--);\r\n      }\r\n\r\n      #main-bar {\r\n        display: flex;\r\n        height: var(--search-bar-height--, 30px);\r\n        margin-bottom: 10px;\r\n        flex: 1;\r\n      }\r\n\r\n      #category-dropdown {\r\n        display: flex;\r\n        flex-shrink: 0;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n\r\n        background-color: #f5f5f7;\r\n        border: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n\r\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --dropdownBgColor: #2c2c2c;\r\n        --dropdownTextColor: #fff;\r\n        --dropdownBorderColor: #ddd;\r\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownHoverTextColor: #fff;\r\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownSelectedTextColor: #fff;\r\n        --dropdownWhiteSpace: nowrap;\r\n        --dropdownOffsetTop: 2px;\r\n        --caretHeight: 8px;\r\n        --caretWidth: 12px;\r\n        --caretPadding: 0 0 0 5px;\r\n        --dropdownFontSize: inherit;\r\n        --dropdownBorderRadius: 4px;\r\n        --buttonSlotPaddingRight: 0;\r\n        --dropdownTextAlign: left;\r\n      }\r\n\r\n      #category-dropdown [slot='dropdown-label'] {\r\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .no-dropdown #search-input {\r\n        border-left: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n        overflow: hidden;\r\n      }\r\n\r\n      #search-input {\r\n        width: 100%;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n        border-top: 1px solid #999;\r\n        border-bottom: 1px solid #999;\r\n        font-size: inherit;\r\n\r\n        --input-height: calc(var(--search-bar-height--) - 2px);\r\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --input-background-color: var(\r\n          --ia-theme-secondary-background-color,\r\n          #fff\r\n        );\r\n        --input-border-radius: 0;\r\n        --input-border-width: 0;\r\n        --input-box-shadow: none;\r\n        --input-focused-box-shadow: none;\r\n        --input-font-size: auto;\r\n        --clear-button-top: var(--clear-button-offset--, 0);\r\n        --clear-button-right: 2px;\r\n      }\r\n\r\n      #search-button {\r\n        appearance: none;\r\n        box-sizing: border-box;\r\n        border-radius: 0 5px 5px 0;\r\n        background-color: var(--ia-theme-secondary-background-color, #fff);\r\n        border: 1px solid #999;\r\n        border-left: 0;\r\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\r\n        min-width: 30px;\r\n        height: 100%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n      }\r\n\r\n      #search-button img {\r\n        width: 18px;\r\n        height: 18px;\r\n      }\r\n\r\n      .search-button-loading-icon {\r\n        --icon-width: 20px;\r\n        margin-top: 2px;\r\n      }\r\n\r\n      #search-links-area {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        justify-content: space-between;\r\n        margin-top: 5px;\r\n        font-size: inherit;\r\n      }\r\n\r\n      #search-links {\r\n        display: flex;\r\n        column-gap: 10px;\r\n        width: 100%;\r\n      }\r\n\r\n      #search-links > a:not(:last-child) {\r\n        margin-bottom: 2px;\r\n      }\r\n\r\n      #search-links-end {\r\n        display: contents;\r\n      }\r\n\r\n      .mobile #search-links-end {\r\n        display: flex;\r\n        margin-left: auto;\r\n        column-gap: 10px;\r\n      }\r\n\r\n      a:link {\r\n        text-decoration: none;\r\n        display: block;\r\n        flex: 0 1 auto;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n        white-space: nowrap;\r\n      }\r\n\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n\r\n      a:visited {\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n\r\n      ::slotted(#action-bar-spacing) {\r\n        --iconLabelGutterWidth: 3px;\r\n        margin-top: -4px; /* Better icon alignment */\r\n        height: fit-content;\r\n      }\r\n    `;\r\n\r\n    return [themeStyles, ownStyles];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\r\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\r\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\r\nimport type {\r\n  SearchCategory,\r\n  SearchRequestedDetail,\r\n} from './models';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\nimport searchIcon from './search.svg';\r\n\r\nimport '@internetarchive/ia-clearable-text-input';\r\nimport '@internetarchive/ia-dropdown';\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\n/**\r\n * Event names emitted by this component\r\n */\r\nconst Events = {\r\n  CategoryChanged: 'categoryChanged',\r\n  SearchRequested: 'searchRequested',\r\n};\r\n\r\n@customElement('ia-dropdown-search-bar')\r\nexport class IADropdownSearchBar extends LitElement {\r\n  /** The query that appears in the search bar */\r\n  @property({ type: String }) query?: string;\r\n\r\n  /** Dropdown menu options (tab IDs + labels) */\r\n  @property({ type: Array }) categories: SearchCategory[] = [];\r\n\r\n  /** The currently selected dropdown category ID */\r\n  @property({ type: String }) selectedCategory?: string;\r\n\r\n  /** Placeholder text for the search input */\r\n  @property({ type: String }) placeholder = msg('Search');\r\n\r\n  /** Whether to use the mobile layout */\r\n  @property({ type: Boolean }) useMobileView = false;\r\n\r\n  /** Whether to hide the category dropdown to the left of the search bar */\r\n  @property({ type: Boolean }) hideDropdown = false;\r\n\r\n  /** Whether the search button should show its loading state */\r\n  @property({ type: Boolean }) loading = false;\r\n\r\n  @query('#search-input')\r\n  private searchInput!: IaClearableTextInput;\r\n\r\n  /** The effective selected category, falling back to the first in the list. */\r\n  private get resolvedCategory(): string {\r\n    return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\r\n  }\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div id=\"container\" part=\"container\" role=\"search\">\r\n        <div\r\n          id=\"main-bar\"\r\n          part=\"main-bar\"\r\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\r\n        >\r\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\r\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the category dropdown on the left side of the search bar.\r\n   */\r\n  private get dropdownTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-dropdown\r\n        id=\"category-dropdown\"\r\n        part=\"category-dropdown\"\r\n        displayCaret\r\n        includeSelectedOption\r\n        closeOnSelect\r\n        closeOnEscape\r\n        closeOnBackdropClick\r\n        openViaButton\r\n        .selectedOption=${this.resolvedCategory}\r\n        .options=${this.dropdownOptions}\r\n        @optionSelected=${this.handleCategorySelected}\r\n      >\r\n        <span slot=\"dropdown-label\">${this.selectedCategoryLabel}</span>\r\n      </ia-dropdown>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the main text entry box of the search bar.\r\n   */\r\n  private get textBoxTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-clearable-text-input\r\n        id=\"search-input\"\r\n        part=\"search-input\"\r\n        .value=${this.spacedQuery}\r\n        placeholder=${this.placeholder}\r\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\r\n        screenReaderLabel=${msg(\r\n          'Search the Archive. Filters and Advanced Search available below.',\r\n        )}\r\n        @clear=${this.searchFieldCleared}\r\n        @submit=${this.handleSubmit}\r\n      ></ia-clearable-text-input>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\r\n   */\r\n  private get searchButtonTemplate(): TemplateResult {\r\n    return html`\r\n      <button\r\n        id=\"search-button\"\r\n        part=\"search-button\"\r\n        class=${this.loading ? 'loading' : nothing}\r\n        type=\"button\"\r\n        aria-label=${msg('Search')}\r\n        @click=${this.handleSubmit}\r\n      >\r\n        ${this.loading\r\n          ? html`<ia-status-indicator\r\n              mode=\"loading\"\r\n              class=\"search-button-loading-icon\"\r\n            ></ia-status-indicator>`\r\n          : html`<img src=${searchIcon} alt=\"\" />`}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Converts the `categories` array into the `optionInterface[]` format\r\n   * expected by `ia-dropdown`.\r\n   */\r\n  private get dropdownOptions(): optionInterface[] {\r\n    return this.categories.map((cat) => ({\r\n      id: cat.id,\r\n      label: html`<span>${cat.label}</span>`,\r\n    }));\r\n  }\r\n\r\n  /**\r\n   * The display label for the currently selected category.\r\n   */\r\n  private get selectedCategoryLabel(): string {\r\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\r\n    return match?.label ?? this.resolvedCategory;\r\n  }\r\n\r\n  /**\r\n   * The current search query with +'s replaced by spaces.\r\n   */\r\n  private get spacedQuery(): string {\r\n    return this.query?.replace(/\\+/g, ' ') ?? '';\r\n  }\r\n\r\n  /**\r\n   * Handler for when the search bar's clear button is pressed.\r\n   */\r\n  private searchFieldCleared(): void {\r\n    if (this.query) {\r\n      this.emitSearchRequested();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for Enter key or search button click.\r\n   */\r\n  private handleSubmit(): void {\r\n    this.emitSearchRequested();\r\n  }\r\n\r\n  /**\r\n   * Handler for when the user selects a category from the dropdown.\r\n   *\r\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\r\n   * pattern). The parent also binds this property and may re-set it on re-render.\r\n   */\r\n  private handleCategorySelected(\r\n    e: CustomEvent<{ option: optionInterface }>,\r\n  ): void {\r\n    const newCategoryId = e.detail.option.id;\r\n    if (newCategoryId === this.resolvedCategory) return;\r\n\r\n    this.selectedCategory = newCategoryId;\r\n\r\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\r\n    setTimeout(() => this.searchInput.focus());\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<string>(Events.CategoryChanged, {\r\n        detail: newCategoryId,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Emits a `searchRequested` event with the current query and category.\r\n   */\r\n  private emitSearchRequested(): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\r\n        detail: {\r\n          query: this.searchInput.value,\r\n          category: this.resolvedCategory,\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  static get styles() {\r\n    const ownStyles = css`\r\n      :host {\r\n        --search-bar-height--: var(--search-bar-height, 30px);\r\n        --search-bar-width--: var(--search-bar-width, 300px);\r\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\r\n        --clear-button-offset--: var(--clear-button-offset, 0);\r\n      }\r\n\r\n      #container {\r\n        display: inline-block;\r\n        width: var(--search-bar-width--);\r\n      }\r\n\r\n      #main-bar {\r\n        display: flex;\r\n        height: var(--search-bar-height--, 30px);\r\n        flex: 1;\r\n      }\r\n\r\n      #category-dropdown {\r\n        display: flex;\r\n        flex-shrink: 0;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n\r\n        background-color: #f5f5f7;\r\n        border: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n\r\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --dropdownBgColor: #2c2c2c;\r\n        --dropdownTextColor: #fff;\r\n        --dropdownBorderColor: #ddd;\r\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownHoverTextColor: #fff;\r\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownSelectedTextColor: #fff;\r\n        --dropdownWhiteSpace: nowrap;\r\n        --dropdownOffsetTop: 2px;\r\n        --caretHeight: 8px;\r\n        --caretWidth: 12px;\r\n        --caretPadding: 0 0 0 5px;\r\n        --dropdownFontSize: inherit;\r\n        --dropdownBorderRadius: 4px;\r\n        --buttonSlotPaddingRight: 0;\r\n        --dropdownTextAlign: left;\r\n      }\r\n\r\n      #category-dropdown [slot='dropdown-label'] {\r\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .no-dropdown #search-input {\r\n        border-left: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n        overflow: hidden;\r\n      }\r\n\r\n      #search-input {\r\n        width: 100%;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n        border-top: 1px solid #999;\r\n        border-bottom: 1px solid #999;\r\n        font-size: inherit;\r\n\r\n        --input-height: calc(var(--search-bar-height--) - 2px);\r\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --input-background-color: var(\r\n          --ia-theme-secondary-background-color,\r\n          #fff\r\n        );\r\n        --input-border-radius: 0;\r\n        --input-border-width: 0;\r\n        --input-box-shadow: none;\r\n        --input-focused-box-shadow: none;\r\n        --input-font-size: auto;\r\n        --clear-button-top: var(--clear-button-offset--, 0);\r\n        --clear-button-right: 2px;\r\n      }\r\n\r\n      #search-button {\r\n        appearance: none;\r\n        box-sizing: border-box;\r\n        border-radius: 0 5px 5px 0;\r\n        background-color: var(--ia-theme-secondary-background-color, #fff);\r\n        border: 1px solid #999;\r\n        border-left: 0;\r\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\r\n        min-width: 30px;\r\n        height: 100%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n      }\r\n\r\n      #search-button img {\r\n        width: 18px;\r\n        height: 18px;\r\n      }\r\n\r\n      .search-button-loading-icon {\r\n        --icon-width: 20px;\r\n        margin-top: 2px;\r\n      }\r\n    `;\r\n\r\n    return [themeStyles, ownStyles];\r\n  }\r\n}\r\n"]}

package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult, CSSResultGroup, PropertyValues } from 'lit';
+import type { LoadingStatus } from '../../elements/ia-status-indicator/ia-status-indicator.js';
+import '../../elements/ia-status-indicator/ia-status-indicator.js';
+import '../../elements/ia-otp-input/ia-otp-input.js';
+/**
+ * Form for entering OTP codes, including success/loading/error states and a request new code button
+ */
+export declare class IAOTPForm extends LitElement {
+    validationStatus: LoadingStatus;
+    newCodeSending: boolean;
+    numPasscodeChars: number;
+    numericOnly: boolean;
+    private OTPInput;
+    render(): TemplateResult;
+    protected willUpdate(changed: PropertyValues): void;
+    private get resendCodeButtonTemplate();
+    private handleNewCodeRequested;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-otp-form.d.ts.map

package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-otp-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AAUjD;;GAEG;AACH,qBACa,SAAU,SAAQ,UAAU;IAGvC,gBAAgB,EAAE,aAAa,CAAW;IAI1C,cAAc,EAAE,OAAO,CAAS;IAIhC,gBAAgB,EAAE,MAAM,CAAK;IAI7B,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,QAAQ,CAAc;IAE9B,MAAM,IAAI,cAAc;IAuBxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD,OAAO,KAAK,wBAAwB,GAgBnC;YAGa,sBAAsB;IAUpC,MAAM,KAAK,MAAM,IAAI,cAAc,CAkElC;CACF"}

package/dist/src/elements/ia-otp-form/ia-otp-form.js

@@ -0,0 +1,175 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css, nothing, } from 'lit';
+import { msg } from '@lit/localize';
+import { property, customElement, query } from 'lit/decorators.js';
+import themeStyles from '../../themes/theme-styles.js';
+import '../../elements/ia-status-indicator/ia-status-indicator.js';
+import '../../elements/ia-otp-input/ia-otp-input.js';
+/**
+ * Custom events fired by the component
+ */
+const Events = {
+    NewCodeRequested: 'newCodeRequested',
+    CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input
+};
+/**
+ * Form for entering OTP codes, including success/loading/error states and a request new code button
+ */
+let IAOTPForm = class IAOTPForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* The state of the validation process */
+        this.validationStatus = 'ready';
+        /* Whether to display a loading indicator instead of the button text */
+        this.newCodeSending = false;
+        /* Number of characters to expect for the passcode */
+        this.numPasscodeChars = 6;
+        /* Whether to restrict entry to numeric characters */
+        this.numericOnly = true;
+    }
+    render() {
+        return html `
+      <div class="input-section">
+        <ia-otp-input
+          .numChars=${this.numPasscodeChars}
+          ?numericOnly=${this.numericOnly}
+          ?disabled=${this.validationStatus === 'loading' ||
+            this.validationStatus === 'success'}
+        ></ia-otp-input>
+        <ia-status-indicator
+          part="status-indicator"
+          .mode=${this.validationStatus}
+        ></ia-status-indicator>
+      </div>
+      ${this.validationStatus === 'error'
+            ? html `<p class="error-msg">
+            ${msg('The code entered is invalid or expired')}
+          </p>`
+            : nothing}
+      ${this.resendCodeButtonTemplate}
+    `;
+    }
+    willUpdate(changed) {
+        if (changed.has('validationStatus') &&
+            this.OTPInput &&
+            this.validationStatus === 'error') {
+            this.OTPInput.prefillValue = '';
+        }
+        if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {
+            this.OTPInput.prefillValue = '';
+        }
+    }
+    /* The button to display to send a new code */
+    get resendCodeButtonTemplate() {
+        return this.newCodeSending
+            ? html `<span part="new-code-message" class="new-code-msg"
+          >${msg('Emailing...')}</span
+        >`
+            : html `
+          <button
+            class="new-code-btn link"
+            part="new-code-button"
+            .disabled=${this.validationStatus === 'loading' ||
+                this.validationStatus === 'success'}
+            @click=${this.handleNewCodeRequested}
+          >
+            ${msg('Email me another code')}
+          </button>
+        `;
+    }
+    /* Emits an event to request the new code */
+    async handleNewCodeRequested() {
+        this.dispatchEvent(new CustomEvent(Events.NewCodeRequested, {
+            bubbles: true,
+            composed: true,
+        }));
+        this.OTPInput.prefillValue = '';
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --font-size-standard--: var(--font-size-standard);
+          --font-size-lg--: var(--font-size-lg);
+          --color-success--: var(--color-success);
+          --color-danger--: var(--color-danger);
+          --link-color--: var(--link-color);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .input-section {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+        }
+
+        ia-status-indicator {
+          --icon-width: calc(var(--font-size-lg--) * 1.33);
+        }
+
+        .error-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--color-danger--);
+          margin-bottom: -10px;
+        }
+
+        .new-code-btn {
+          font-family: inherit;
+          font-size: var(--font-size-standard--);
+          display: block;
+          width: fit-content;
+          margin-top: 10px;
+          border: 0;
+          padding: 0;
+          appearance: none;
+          background: none;
+          color: var(--link-color--);
+          text-decoration: none;
+          cursor: pointer;
+        }
+
+        .new-code-btn:hover,
+        .new-code-btn:focus {
+          text-decoration: underline;
+        }
+
+        .new-code-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--link-color--);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAOTPForm.prototype, "validationStatus", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAOTPForm.prototype, "newCodeSending", void 0);
+__decorate([
+    property({ type: Number })
+], IAOTPForm.prototype, "numPasscodeChars", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAOTPForm.prototype, "numericOnly", void 0);
+__decorate([
+    query('ia-otp-input')
+], IAOTPForm.prototype, "OTPInput", void 0);
+IAOTPForm = __decorate([
+    customElement('ia-otp-form')
+], IAOTPForm);
+export { IAOTPForm };
+//# sourceMappingURL=ia-otp-form.js.map

package/dist/src/elements/ia-otp-form/ia-otp-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  css,\r\n  nothing,\r\n  PropertyValues,\r\n} from 'lit';\r\nimport { msg } from '@lit/localize';\r\nimport { property, customElement, query } from 'lit/decorators.js';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\n\r\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\r\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\nimport '@src/elements/ia-otp-input/ia-otp-input';\r\n\r\n/**\r\n * Custom events fired by the component\r\n */\r\nconst Events = {\r\n  NewCodeRequested: 'newCodeRequested',\r\n  CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\r\n};\r\n\r\n/**\r\n * Form for entering OTP codes, including success/loading/error states and a request new code button\r\n */\r\n@customElement('ia-otp-form')\r\nexport class IAOTPForm extends LitElement {\r\n  /* The state of the validation process */\r\n  @property({ type: String })\r\n  validationStatus: LoadingStatus = 'ready';\r\n\r\n  /* Whether to display a loading indicator instead of the button text */\r\n  @property({ type: Boolean })\r\n  newCodeSending: boolean = false;\r\n\r\n  /* Number of characters to expect for the passcode */\r\n  @property({ type: Number })\r\n  numPasscodeChars: number = 6;\r\n\r\n  /* Whether to restrict entry to numeric characters */\r\n  @property({ type: Boolean })\r\n  numericOnly: boolean = true;\r\n\r\n  @query('ia-otp-input')\r\n  private OTPInput!: IAOTPInput;\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"input-section\">\r\n        <ia-otp-input\r\n          .numChars=${this.numPasscodeChars}\r\n          ?numericOnly=${this.numericOnly}\r\n          ?disabled=${this.validationStatus === 'loading' ||\r\n          this.validationStatus === 'success'}\r\n        ></ia-otp-input>\r\n        <ia-status-indicator\r\n          part=\"status-indicator\"\r\n          .mode=${this.validationStatus}\r\n        ></ia-status-indicator>\r\n      </div>\r\n      ${this.validationStatus === 'error'\r\n        ? html`<p class=\"error-msg\">\r\n            ${msg('The code entered is invalid or expired')}\r\n          </p>`\r\n        : nothing}\r\n      ${this.resendCodeButtonTemplate}\r\n    `;\r\n  }\r\n\r\n  protected willUpdate(changed: PropertyValues): void {\r\n    if (\r\n      changed.has('validationStatus') &&\r\n      this.OTPInput &&\r\n      this.validationStatus === 'error'\r\n    ) {\r\n      this.OTPInput.prefillValue = '';\r\n    }\r\n\r\n    if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\r\n      this.OTPInput.prefillValue = '';\r\n    }\r\n  }\r\n\r\n  /* The button to display to send a new code */\r\n  private get resendCodeButtonTemplate(): TemplateResult {\r\n    return this.newCodeSending\r\n      ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\r\n          >${msg('Emailing...')}</span\r\n        >`\r\n      : html`\r\n          <button\r\n            class=\"new-code-btn link\"\r\n            part=\"new-code-button\"\r\n            .disabled=${this.validationStatus === 'loading' ||\r\n            this.validationStatus === 'success'}\r\n            @click=${this.handleNewCodeRequested}\r\n          >\r\n            ${msg('Email me another code')}\r\n          </button>\r\n        `;\r\n  }\r\n\r\n  /* Emits an event to request the new code */\r\n  private async handleNewCodeRequested(): Promise<void> {\r\n    this.dispatchEvent(\r\n      new CustomEvent(Events.NewCodeRequested, {\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n    this.OTPInput.prefillValue = '';\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return [\r\n      themeStyles,\r\n      css`\r\n        :host {\r\n          --font-size-standard--: var(--font-size-standard);\r\n          --font-size-lg--: var(--font-size-lg);\r\n          --color-success--: var(--color-success);\r\n          --color-danger--: var(--color-danger);\r\n          --link-color--: var(--link-color);\r\n\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          justify-content: center;\r\n        }\r\n\r\n        .input-section {\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: center;\r\n          gap: 5px;\r\n        }\r\n\r\n        ia-status-indicator {\r\n          --icon-width: calc(var(--font-size-lg--) * 1.33);\r\n        }\r\n\r\n        .error-msg {\r\n          margin-top: 10px;\r\n          font-size: var(--font-size-standard--);\r\n          color: var(--color-danger--);\r\n          margin-bottom: -10px;\r\n        }\r\n\r\n        .new-code-btn {\r\n          font-family: inherit;\r\n          font-size: var(--font-size-standard--);\r\n          display: block;\r\n          width: fit-content;\r\n          margin-top: 10px;\r\n          border: 0;\r\n          padding: 0;\r\n          appearance: none;\r\n          background: none;\r\n          color: var(--link-color--);\r\n          text-decoration: none;\r\n          cursor: pointer;\r\n        }\r\n\r\n        .new-code-btn:hover,\r\n        .new-code-btn:focus {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .new-code-msg {\r\n          margin-top: 10px;\r\n          font-size: var(--font-size-standard--);\r\n          color: var(--link-color--);\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+export type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';
 /**
  * Renders an SVG indicator, which defualts to an animated circular indicator
  */
@@ -7,8 +8,10 @@ export declare class IAStatusIndicator extends LitElement {
     successTitle: string;
     errorTitle: string;
     loadingStyle: 'ring' | 'ring-dots';
-    mode: 'loading' | 'success' | 'error';
+    mode: LoadingStatus;
     render(): TemplateResult;
+    /** A placeholder to render before loading begins, if desired */
+    private get placeholderTemplate();
     /** A circular loading indicator to render when processing */
     private get loadingIndicatorTemplate();
     /** A check mark to render on success */

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5E;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,YAAY,EAAE,MAAM,GAAG,WAAW,CAAe;IAGjD,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9E,MAAM,IAAI,cAAc;IAQxB,6DAA6D;IAC7D,OAAO,KAAK,wBAAwB,GA4BnC;IAED,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAGD,OAAO,KAAK,qBAAqB,GAIhC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAqFlC;CACF"}
+{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5E,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,YAAY,EAAE,MAAM,GAAG,WAAW,CAAe;IAGjD,IAAI,EAAE,aAAa,CAAa;IAE5D,MAAM,IAAI,cAAc;IASxB,gEAAgE;IAChE,OAAO,KAAK,mBAAmB,GAE9B;IAED,6DAA6D;IAC7D,OAAO,KAAK,wBAAwB,GA4BnC;IAED,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAGD,OAAO,KAAK,qBAAqB,GAIhC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAyFlC;CACF"}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js

@@ -23,86 +23,91 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     }
     render() {
         return html `${choose(this.mode, [
+            ['ready', () => this.placeholderTemplate],
             ['loading', () => this.loadingIndicatorTemplate],
             ['success', () => this.successIndicatorTemplate],
             ['error', () => this.errorIndicatorTemplate],
         ])}`;
     }
+    /** A placeholder to render before loading begins, if desired */
+    get placeholderTemplate() {
+        return html `<div class="placeholder"></div>`;
+    }
     /** A circular loading indicator to render when processing */
     get loadingIndicatorTemplate() {
-        return html `
-      <svg
-        class="loading-indicator"
-        viewBox="0 0 120 120"
-        preserveAspectRatio="none"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        role="status"
-      >
-        <title>${this.loadingTitle}</title>
-        <g stroke="none" stroke-width="1" fill-rule="evenodd">
-          <path
-            class="loading-ring"
-            d="M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
-          ></path>
-          <g
-            class="loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}"
-            transform="translate(40.000000, 55.000000)"
-          >
-            <circle id="left-dot" cx="5" cy="5" r="5"></circle>
-            <circle id="middle-dot" cx="20" cy="5" r="5"></circle>
-            <circle id="right-dot" cx="35" cy="5" r="5"></circle>
-          </g>
-        </g>
-      </svg>
+        return html `
+      <svg
+        class="loading-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.loadingTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="loading-ring"
+            d="M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <g
+            class="loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}"
+            transform="translate(40.000000, 55.000000)"
+          >
+            <circle id="left-dot" cx="5" cy="5" r="5"></circle>
+            <circle id="middle-dot" cx="20" cy="5" r="5"></circle>
+            <circle id="right-dot" cx="35" cy="5" r="5"></circle>
+          </g>
+        </g>
+      </svg>
     `;
     }
     /** A check mark to render on success */
     get successIndicatorTemplate() {
-        return html `
-      <svg
-        class="success-indicator"
-        viewBox="0 0 120 120"
-        preserveAspectRatio="none"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        role="status"
-      >
-        <title>${this.successTitle}</title>
-        <g stroke="none" stroke-width="1" fill-rule="evenodd">
-          <path
-            class="success-icon"
-            d="M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
-          ></path>
-          <polygon
-            class="success-icon"
-            transform="translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) "
-            points="96 85 54 85 54 65 76 64.999 76 -2 96 -2"
-          ></polygon>
-        </g>
-      </svg>
+        return html `
+      <svg
+        class="success-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.successTitle}</title>
+        <g stroke="none" stroke-width="1" fill-rule="evenodd">
+          <path
+            class="success-icon"
+            d="M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z"
+          ></path>
+          <polygon
+            class="success-icon"
+            transform="translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) "
+            points="96 85 54 85 54 65 76 64.999 76 -2 96 -2"
+          ></polygon>
+        </g>
+      </svg>
     `;
     }
     /** An "!" to render on error */
     get errorIndicatorTemplate() {
-        return html `
-      <svg
-        class="error-indicator"
-        viewBox="0 0 120 120"
-        preserveAspectRatio="none"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        role="status"
-      >
-        <title>${this.errorTitle}</title>
-        <path
-          class="error-icon"
-          d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
-        />
-      </svg>
+        return html `
+      <svg
+        class="error-indicator"
+        viewBox="0 0 120 120"
+        preserveAspectRatio="none"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        role="status"
+      >
+        <title>${this.errorTitle}</title>
+        <path
+          class="error-icon"
+          d="m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z"
+        />
+      </svg>
     `;
     }
     /* Whether to include the dots in the loading indicator */
@@ -114,86 +119,90 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
     static get styles() {
         return [
             themeStyles,
-            css `
-        :host {
-          --indicator-width--: var(--icon-width);
-
-          /* Loading */
-          --loading-ring-color--: var(--primary-text-color);
-          --loading-dot-color--: var(--primary-text-color);
-
-          /* Success */
-          --success-icon-color--: var(--color-success);
-
-          /* Error */
-          --error-icon-color--: var(--color-danger);
-
-          display: inline-block;
-          width: var(--indicator-width--);
-        }
-
-        .success-icon {
-          fill: var(--success-icon-color--);
-        }
-
-        .error-icon {
-          fill: var(--error-icon-color--);
-        }
-
-        .loading-ring {
-          fill: var(--loading-ring-color--);
-          animation: rotate 1.3s infinite linear;
-          transform-origin: 50px 50px;
-          transform-box: fill-box;
-        }
-
-        .loading-dots {
-          fill: var(--loading-dot-color--);
-          transition: opacity 0.25s ease-out;
-        }
-
-        .loading-dots.hidden {
-          display: none;
-        }
-
-        .loading-dots > * {
-          opacity: 0;
-          animation: dot 1.3s infinite;
-        }
-
-        .loading-dots #left-dot {
-          animation-delay: 0.2s;
-        }
-
-        .loading-dots #middle-dot {
-          animation-delay: 0.4s;
-        }
-
-        .loading-dots #right-dot {
-          animation-delay: 0.6s;
-        }
-
-        @keyframes rotate {
-          0% {
-            transform: rotate(-360deg);
-          }
-          100% {
-            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */
-            transform: rotate(0deg);
-          }
-        }
-
-        @keyframes dot {
-          0% {
-            opacity: 0;
-          }
-          25% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0;
-          }
-        }
+            css `
+        :host {
+          --indicator-width--: var(--icon-width);
+
+          /* Loading */
+          --loading-ring-color--: var(--primary-text-color);
+          --loading-dot-color--: var(--primary-text-color);
+
+          /* Success */
+          --success-icon-color--: var(--color-success);
+
+          /* Error */
+          --error-icon-color--: var(--color-danger);
+
+          display: inline-block;
+          width: var(--indicator-width--);
+        }
+
+        .placeholder {
+          height: var(--indicator-width--);
+        }
+
+        .success-icon {
+          fill: var(--success-icon-color--);
+        }
+
+        .error-icon {
+          fill: var(--error-icon-color--);
+        }
+
+        .loading-ring {
+          fill: var(--loading-ring-color--);
+          animation: rotate 1.3s infinite linear;
+          transform-origin: 50px 50px;
+          transform-box: fill-box;
+        }
+
+        .loading-dots {
+          fill: var(--loading-dot-color--);
+          transition: opacity 0.25s ease-out;
+        }
+
+        .loading-dots.hidden {
+          display: none;
+        }
+
+        .loading-dots > * {
+          opacity: 0;
+          animation: dot 1.3s infinite;
+        }
+
+        .loading-dots #left-dot {
+          animation-delay: 0.2s;
+        }
+
+        .loading-dots #middle-dot {
+          animation-delay: 0.4s;
+        }
+
+        .loading-dots #right-dot {
+          animation-delay: 0.6s;
+        }
+
+        @keyframes rotate {
+          0% {
+            transform: rotate(-360deg);
+          }
+          100% {
+            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */
+            transform: rotate(0deg);
+          }
+        }
+
+        @keyframes dot {
+          0% {
+            opacity: 0;
+          }
+          25% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
       `,
         ];
     }

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;QAE7D,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1D,qGAAqG;QACzE,eAAU,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;QAEtD,gDAAgD;QACpB,iBAAY,GAAyB,WAAW,CAAC;QAE7E,qDAAqD;QACzB,SAAI,GAAoC,SAAS,CAAC;IAuLhF,CAAC;IArLC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;YAC9B,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAC7C,CAAC,EAAE,CAAC;IACP,CAAC;IAED,6DAA6D;IAC7D,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;kCAOA,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KASxE,CAAC;IACJ,CAAC;IAED,wCAAwC;IACxC,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAa7B,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,UAAU;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,0DAA0D;IAC1D,IAAY,qBAAqB;QAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;YAAE,OAAO,KAAK,CAAC;QAE/C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnM6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA+B;AAG9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAG1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkD;AAGjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmD;AAdnE,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAqM7B","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Renders an SVG indicator, which defualts to an animated circular indicator\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) loadingTitle = msg('Loading...');\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) successTitle = msg('Success');\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) errorTitle = msg('Error');\n\n  /* Which type of loading indicator to display */\n  @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\n\n  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: 'loading' | 'success' | 'error' = 'loading';\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /** A circular loading indicator to render when processing */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"loading-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <g\n            class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\n            transform=\"translate(40.000000, 55.000000)\"\n          >\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n          </g>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** A check mark to render on success */\n  private get successIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"success-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.successTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"success-icon\"\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <polygon\n            class=\"success-icon\"\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n          ></polygon>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** An \"!\" to render on error */\n  private get errorIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"error-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.errorTitle}</title>\n        <path\n          class=\"error-icon\"\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n        />\n      </svg>\n    `;\n  }\n\n  /* Whether to include the dots in the loading indicator */\n  private get shouldShowLoadingDots(): boolean {\n    if (this.loadingStyle === 'ring') return false;\n\n    return true;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --indicator-width--: var(--icon-width);\n\n          /* Loading */\n          --loading-ring-color--: var(--primary-text-color);\n          --loading-dot-color--: var(--primary-text-color);\n\n          /* Success */\n          --success-icon-color--: var(--color-success);\n\n          /* Error */\n          --error-icon-color--: var(--color-danger);\n\n          display: inline-block;\n          width: var(--indicator-width--);\n        }\n\n        .success-icon {\n          fill: var(--success-icon-color--);\n        }\n\n        .error-icon {\n          fill: var(--error-icon-color--);\n        }\n\n        .loading-ring {\n          fill: var(--loading-ring-color--);\n          animation: rotate 1.3s infinite linear;\n          transform-origin: 50px 50px;\n          transform-box: fill-box;\n        }\n\n        .loading-dots {\n          fill: var(--loading-dot-color--);\n          transition: opacity 0.25s ease-out;\n        }\n\n        .loading-dots.hidden {\n          display: none;\n        }\n\n        .loading-dots > * {\n          opacity: 0;\n          animation: dot 1.3s infinite;\n        }\n\n        .loading-dots #left-dot {\n          animation-delay: 0.2s;\n        }\n\n        .loading-dots #middle-dot {\n          animation-delay: 0.4s;\n        }\n\n        .loading-dots #right-dot {\n          animation-delay: 0.6s;\n        }\n\n        @keyframes rotate {\n          0% {\n            transform: rotate(-360deg);\n          }\n          100% {\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n            transform: rotate(0deg);\n          }\n        }\n\n        @keyframes dot {\n          0% {\n            opacity: 0;\n          }\n          25% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport { choose } from 'lit/directives/choose.js';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\n\r\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\r\n\r\n/**\r\n * Renders an SVG indicator, which defualts to an animated circular indicator\r\n */\r\n@customElement('ia-status-indicator')\r\nexport class IAStatusIndicator extends LitElement {\r\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) loadingTitle = msg('Loading...');\r\n\r\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) successTitle = msg('Success');\r\n\r\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\r\n  @property({ type: String }) errorTitle = msg('Error');\r\n\r\n  /* Which type of loading indicator to display */\r\n  @property({ type: String }) loadingStyle: 'ring' | 'ring-dots' = 'ring-dots';\r\n\r\n  /* The state of the indicator that should be shown */\r\n  @property({ type: String }) mode: LoadingStatus = 'loading';\r\n\r\n  render(): TemplateResult {\r\n    return html`${choose(this.mode, [\r\n      ['ready', () => this.placeholderTemplate],\r\n      ['loading', () => this.loadingIndicatorTemplate],\r\n      ['success', () => this.successIndicatorTemplate],\r\n      ['error', () => this.errorIndicatorTemplate],\r\n    ])}`;\r\n  }\r\n\r\n  /** A placeholder to render before loading begins, if desired */\r\n  private get placeholderTemplate(): TemplateResult {\r\n    return html`<div class=\"placeholder\"></div>`;\r\n  }\r\n\r\n  /** A circular loading indicator to render when processing */\r\n  private get loadingIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"loading-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.loadingTitle}</title>\r\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n          <path\r\n            class=\"loading-ring\"\r\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\r\n          ></path>\r\n          <g\r\n            class=\"loading-dots ${!this.shouldShowLoadingDots ? 'hidden' : ''}\"\r\n            transform=\"translate(40.000000, 55.000000)\"\r\n          >\r\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\r\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\r\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\r\n          </g>\r\n        </g>\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /** A check mark to render on success */\r\n  private get successIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"success-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.successTitle}</title>\r\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\r\n          <path\r\n            class=\"success-icon\"\r\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\r\n          ></path>\r\n          <polygon\r\n            class=\"success-icon\"\r\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\r\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /** An \"!\" to render on error */\r\n  private get errorIndicatorTemplate(): TemplateResult {\r\n    return html`\r\n      <svg\r\n        class=\"error-indicator\"\r\n        viewBox=\"0 0 120 120\"\r\n        preserveAspectRatio=\"none\"\r\n        version=\"1.1\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n        role=\"status\"\r\n      >\r\n        <title>${this.errorTitle}</title>\r\n        <path\r\n          class=\"error-icon\"\r\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\r\n        />\r\n      </svg>\r\n    `;\r\n  }\r\n\r\n  /* Whether to include the dots in the loading indicator */\r\n  private get shouldShowLoadingDots(): boolean {\r\n    if (this.loadingStyle === 'ring') return false;\r\n\r\n    return true;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return [\r\n      themeStyles,\r\n      css`\r\n        :host {\r\n          --indicator-width--: var(--icon-width);\r\n\r\n          /* Loading */\r\n          --loading-ring-color--: var(--primary-text-color);\r\n          --loading-dot-color--: var(--primary-text-color);\r\n\r\n          /* Success */\r\n          --success-icon-color--: var(--color-success);\r\n\r\n          /* Error */\r\n          --error-icon-color--: var(--color-danger);\r\n\r\n          display: inline-block;\r\n          width: var(--indicator-width--);\r\n        }\r\n\r\n        .placeholder {\r\n          height: var(--indicator-width--);\r\n        }\r\n\r\n        .success-icon {\r\n          fill: var(--success-icon-color--);\r\n        }\r\n\r\n        .error-icon {\r\n          fill: var(--error-icon-color--);\r\n        }\r\n\r\n        .loading-ring {\r\n          fill: var(--loading-ring-color--);\r\n          animation: rotate 1.3s infinite linear;\r\n          transform-origin: 50px 50px;\r\n          transform-box: fill-box;\r\n        }\r\n\r\n        .loading-dots {\r\n          fill: var(--loading-dot-color--);\r\n          transition: opacity 0.25s ease-out;\r\n        }\r\n\r\n        .loading-dots.hidden {\r\n          display: none;\r\n        }\r\n\r\n        .loading-dots > * {\r\n          opacity: 0;\r\n          animation: dot 1.3s infinite;\r\n        }\r\n\r\n        .loading-dots #left-dot {\r\n          animation-delay: 0.2s;\r\n        }\r\n\r\n        .loading-dots #middle-dot {\r\n          animation-delay: 0.4s;\r\n        }\r\n\r\n        .loading-dots #right-dot {\r\n          animation-delay: 0.6s;\r\n        }\r\n\r\n        @keyframes rotate {\r\n          0% {\r\n            transform: rotate(-360deg);\r\n          }\r\n          100% {\r\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\r\n            transform: rotate(0deg);\r\n          }\r\n        }\r\n\r\n        @keyframes dot {\r\n          0% {\r\n            opacity: 0;\r\n          }\r\n          25% {\r\n            opacity: 1;\r\n          }\r\n          100% {\r\n            opacity: 0;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/themes/theme-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAuFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/themes/theme-styles.js

@@ -1,86 +1,91 @@
 import { css } from 'lit';
-const themeStyles = css `
-  :host {
-    /*
-    BASE STYLES
-    Default fallback values for theme styles. Assumes 16px root font size.
-    To adjust values, use theme styles below.
-    */
-
-    /* Typography */
-    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-    /* Sizing */
-    --default-icon-width: 1.25rem;
-    --default-padding-sm: 5px;
-    --default-combo-box-width: auto;
-    --default-search-bar-height: 30px;
-    --default-search-bar-width: auto;
-    --default-font-size-lg: 2.25rem;
-
-    /* Colors */
-    --true-white: #fff;
-    --off-white: #fbfbfd;
-    --dark-gray: #2c2c2c;
-    --light-gray: #666;
-    --classic-red: #e51c23;
-    --mint-green: #31a481;
-    --navy-blue: #194880;
-    --bright-blue: #4b64ff;
-
-    /*
-    ADJUSTABLE STYLES
-    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
-    */
-
-    /* Text */
-    --base-font-family: var(
-      --ia-theme-base-font-family,
-      var(--default-font-family)
-    );
-    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
-    --secondary-text-color: var(
-      --ia-theme-secondary-text-color,
-      var(--light-gray)
-    );
-    --link-color: var(--ia-theme-link-color, var(--bright-blue));
-
-    /* Sizing */
-    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
-    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
-    --search-bar-height: var(
-      --ia-theme-search-bar-height,
-      var(--default-search-bar-height)
-    );
-    --search-bar-width: var(
-      --ia-theme-search-bar-width,
-      var(--default-search-bar-width)
-    );
-    --combo-box-width: var(
-      --ia-theme-combo-box-width,
-      var(--default-combo-box-width)
-    );
-    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
-
-    /* Backgrounds and fills */
-    --primary-background-color: var(
-      --ia-theme-primary-background-color,
-      var(--off-white)
-    );
-    --secondary-background-color: var(
-      --ia-theme-secondary-background-color,
-      var(--true-white)
-    );
-
-    /* State colors */
-    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
-    --primary-cta-text-color: var(
-      --ia-theme-primary-cta-text-color,
-      var(--true-white)
-    );
-    --color-success: var(--ia-theme-color-success, var(--mint-green));
-    --color-danger: var(--ia-theme-color-danger, var(--classic-red));
-  }
+const themeStyles = css `
+  :host {
+    /*
+    BASE STYLES
+    Default fallback values for theme styles. Assumes 16px root font size.
+    To adjust values, use theme styles below.
+    */
+
+    /* Typography */
+    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    /* Sizing */
+    --default-icon-width: 1.25rem;
+    --default-padding-sm: 5px;
+    --default-combo-box-width: auto;
+    --default-search-bar-width: auto;
+    --default-search-bar-height: 30px;
+    --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */
+    --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */
+
+    /* Colors */
+    --true-white: #fff;
+    --off-white: #fbfbfd;
+    --dark-gray: #2c2c2c;
+    --light-gray: #666;
+    --classic-red: #e51c23;
+    --mint-green: #31a481;
+    --navy-blue: #194880;
+    --bright-blue: #4b64ff;
+
+    /*
+    ADJUSTABLE STYLES
+    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.
+    */
+
+    /* Text */
+    --base-font-family: var(
+      --ia-theme-base-font-family,
+      var(--default-font-family)
+    );
+    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));
+    --secondary-text-color: var(
+      --ia-theme-secondary-text-color,
+      var(--light-gray)
+    );
+    --link-color: var(--ia-theme-link-color, var(--bright-blue));
+
+    /* Sizing */
+    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
+    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
+    --search-bar-height: var(
+      --ia-theme-search-bar-height,
+      var(--default-search-bar-height)
+    );
+    --search-bar-width: var(
+      --ia-theme-search-bar-width,
+      var(--default-search-bar-width)
+    );
+    --combo-box-width: var(
+      --ia-theme-combo-box-width,
+      var(--default-combo-box-width)
+    );
+    --font-size-standard: var(
+      --ia-theme-font-size-standard,
+      var(--default-font-size-standard)
+    );
+    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
+
+    /* Backgrounds and fills */
+    --primary-background-color: var(
+      --ia-theme-primary-background-color,
+      var(--off-white)
+    );
+    --secondary-background-color: var(
+      --ia-theme-secondary-background-color,
+      var(--true-white)
+    );
+
+    /* State colors */
+    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));
+    --primary-cta-text-color: var(
+      --ia-theme-primary-cta-text-color,
+      var(--true-white)
+    );
+    --color-success: var(--ia-theme-color-success, var(--mint-green));
+    --color-danger: var(--ia-theme-color-danger, var(--classic-red));
+  }
 `;
 export default themeStyles;
 //# sourceMappingURL=theme-styles.js.map

package/dist/src/themes/theme-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n  :host {\n    /*\n    BASE STYLES\n    Default fallback values for theme styles. Assumes 16px root font size.\n    To adjust values, use theme styles below.\n    */\n\n    /* Typography */\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    /* Sizing */\n    --default-icon-width: 1.25rem;\n    --default-padding-sm: 5px;\n    --default-combo-box-width: auto;\n    --default-search-bar-height: 30px;\n    --default-search-bar-width: auto;\n    --default-font-size-lg: 2.25rem;\n\n    /* Colors */\n    --true-white: #fff;\n    --off-white: #fbfbfd;\n    --dark-gray: #2c2c2c;\n    --light-gray: #666;\n    --classic-red: #e51c23;\n    --mint-green: #31a481;\n    --navy-blue: #194880;\n    --bright-blue: #4b64ff;\n\n    /*\n    ADJUSTABLE STYLES\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n    */\n\n    /* Text */\n    --base-font-family: var(\n      --ia-theme-base-font-family,\n      var(--default-font-family)\n    );\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n    --secondary-text-color: var(\n      --ia-theme-secondary-text-color,\n      var(--light-gray)\n    );\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n    /* Sizing */\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\n    --search-bar-height: var(\n      --ia-theme-search-bar-height,\n      var(--default-search-bar-height)\n    );\n    --search-bar-width: var(\n      --ia-theme-search-bar-width,\n      var(--default-search-bar-width)\n    );\n    --combo-box-width: var(\n      --ia-theme-combo-box-width,\n      var(--default-combo-box-width)\n    );\n    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\n\n    /* Backgrounds and fills */\n    --primary-background-color: var(\n      --ia-theme-primary-background-color,\n      var(--off-white)\n    );\n    --secondary-background-color: var(\n      --ia-theme-secondary-background-color,\n      var(--true-white)\n    );\n\n    /* State colors */\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n    --primary-cta-text-color: var(\n      --ia-theme-primary-cta-text-color,\n      var(--true-white)\n    );\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n  }\n`;\n\nexport default themeStyles;\n"]}
+{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\r\n\r\nconst themeStyles = css`\r\n  :host {\r\n    /*\r\n    BASE STYLES\r\n    Default fallback values for theme styles. Assumes 16px root font size.\r\n    To adjust values, use theme styles below.\r\n    */\r\n\r\n    /* Typography */\r\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n\r\n    /* Sizing */\r\n    --default-icon-width: 1.25rem;\r\n    --default-padding-sm: 5px;\r\n    --default-combo-box-width: auto;\r\n    --default-search-bar-width: auto;\r\n    --default-search-bar-height: 30px;\r\n    --default-font-size-standard: 0.875rem; /* 14px with 16px root font size */\r\n    --default-font-size-lg: 2.25rem; /* 36px with 16px root font size */\r\n\r\n    /* Colors */\r\n    --true-white: #fff;\r\n    --off-white: #fbfbfd;\r\n    --dark-gray: #2c2c2c;\r\n    --light-gray: #666;\r\n    --classic-red: #e51c23;\r\n    --mint-green: #31a481;\r\n    --navy-blue: #194880;\r\n    --bright-blue: #4b64ff;\r\n\r\n    /*\r\n    ADJUSTABLE STYLES\r\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\r\n    */\r\n\r\n    /* Text */\r\n    --base-font-family: var(\r\n      --ia-theme-base-font-family,\r\n      var(--default-font-family)\r\n    );\r\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\r\n    --secondary-text-color: var(\r\n      --ia-theme-secondary-text-color,\r\n      var(--light-gray)\r\n    );\r\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\r\n\r\n    /* Sizing */\r\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\r\n    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\r\n    --search-bar-height: var(\r\n      --ia-theme-search-bar-height,\r\n      var(--default-search-bar-height)\r\n    );\r\n    --search-bar-width: var(\r\n      --ia-theme-search-bar-width,\r\n      var(--default-search-bar-width)\r\n    );\r\n    --combo-box-width: var(\r\n      --ia-theme-combo-box-width,\r\n      var(--default-combo-box-width)\r\n    );\r\n    --font-size-standard: var(\r\n      --ia-theme-font-size-standard,\r\n      var(--default-font-size-standard)\r\n    );\r\n    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\r\n\r\n    /* Backgrounds and fills */\r\n    --primary-background-color: var(\r\n      --ia-theme-primary-background-color,\r\n      var(--off-white)\r\n    );\r\n    --secondary-background-color: var(\r\n      --ia-theme-secondary-background-color,\r\n      var(--true-white)\r\n    );\r\n\r\n    /* State colors */\r\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\r\n    --primary-cta-text-color: var(\r\n      --ia-theme-primary-cta-text-color,\r\n      var(--true-white)\r\n    );\r\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\r\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\r\n  }\r\n`;\r\n\r\nexport default themeStyles;\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.2.3-alpha-webdev8378.1",
+  "version": "0.2.3-alpha-webdev8378.3",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",