@internetarchive/elements 0.2.12-webdev8711.0 → 0.2.13-webdev-9022.0

package/README.md

@@ -143,6 +143,26 @@ src
 ```
 Export your component in `src/index.ts`
 
+### Naming
+Custom elements all share one global registry, and that registry is shared with every other script on the host page. Give each element a name specific enough that nothing else would plausibly want it.
+
+If a component is built from several elements, prefix its parts with the component's own name rather than naming them generically, and keep the file name matching the tag:
+```
+src
+- elements
+  - ia-foobar
+    - ia-foobar.ts // ia-foobar
+    - ia-foobar-list-item.ts // ia-foobar-list-item, not ia-list-item
+```
+Declare each element in `HTMLElementTagNameMap` so `querySelector` is typed and a mistyped tag in a template is caught at build time:
+```ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'ia-foobar-list-item': IAFoobarListItem;
+  }
+}
+```
+
 ### Story
 To demo your component, we have a component catalog that you can add your demo to. Create a component in your component directory. Name it `COMPONENT-NAME-story.ts`, ie `ia-button-story.ts`.
 

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,EAGL,UAAU,EAEV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,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;IAG3C,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB,UAAU,CAAC,OAAO,EAAE,cAAc;IAelC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;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,8BAqHhB;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,EAGL,UAAU,EAEV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,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;IAG3C,OAAO,CAAC,gBAAgB,CAAC,CAAa;IAEtC,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB,UAAU,CAAC,OAAO,EAAE,cAAc;IAelC;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;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,8BAwHhB;CACF"}

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

@@ -183,7 +183,10 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         --search-bar-width--: var(--search-bar-width, 300px);
         --search-bar-internal-padding--: var(--padding-sm, 5px);
         --clear-button-offset--: var(--clear-button-offset, 0);
-        --dropdown-z-index--: var(--dropdown-z-index, initial);
+        /* While it would be nice to fall back to ia-dropdown's own default here by making this var
+           fall back to "initial", older Safari versions don't support that keyword in a var() fallback.
+           So instead we just restate ia-dropdown's current default 2 here as the fallback. */
+        --dropdown-z-index--: var(--dropdown-z-index, 2);
       }
 
       #container {

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';\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  CategoryChanged: 'categoryChanged',\n  SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n  /** The query that appears in the search bar */\n  @property({ type: String }) query?: string;\n\n  /** Dropdown menu options (tab IDs + labels) */\n  @property({ type: Array }) categories: SearchCategory[] = [];\n\n  /** The currently selected dropdown category ID */\n  @property({ type: String }) selectedCategory?: string;\n\n  /** Placeholder text for the search input */\n  @property({ type: String }) placeholder = msg('Search');\n\n  /** Whether to use the mobile layout */\n  @property({ type: Boolean }) useMobileView = false;\n\n  /** Whether to hide the category dropdown to the left of the search bar */\n  @property({ type: Boolean }) hideDropdown = false;\n\n  /** Whether the search button should show its loading state */\n  @property({ type: Boolean }) loading = false;\n\n  @query('#search-input')\n  private searchInput!: IaClearableTextInput;\n\n  @query('#category-dropdown')\n  private categoryDropdown?: IaDropdown;\n\n  /** The effective selected category, falling back to the first in the list. */\n  private get resolvedCategory(): string {\n    return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\" part=\"container\" role=\"search\">\n        <div\n          id=\"main-bar\"\n          part=\"main-bar\"\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\n        >\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues) {\n    // Push new categories down to the inner dropdown immediately, since ia-dropdown\n    // mutates its own selected option on interaction which can cause Lit's\n    // property-binding diff to miss the change in certain cases.\n    if (changed.has('selectedCategory') || changed.has('categories')) {\n      const resolved = this.resolvedCategory;\n      if (\n        this.categoryDropdown &&\n        this.categoryDropdown.selectedOption !== resolved\n      ) {\n        this.categoryDropdown.selectedOption = resolved;\n      }\n    }\n  }\n\n  /**\n   * Template for the category dropdown on the left side of the search bar.\n   */\n  private get dropdownTemplate(): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=\"category-dropdown\"\n        part=\"category-dropdown\"\n        displayCaret\n        includeSelectedOption\n        closeOnSelect\n        closeOnEscape\n        closeOnBackdropClick\n        openViaButton\n        .selectedOption=${this.resolvedCategory}\n        .options=${this.categories}\n        @optionSelected=${this.handleCategorySelected}\n      >\n        <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n          >${this.selectedCategoryLabel}</span\n        >\n      </ia-dropdown>\n    `;\n  }\n\n  /**\n   * Template for the main text entry box of the search bar.\n   */\n  private get textBoxTemplate(): TemplateResult {\n    return html`\n      <ia-clearable-text-input\n        id=\"search-input\"\n        part=\"search-input\"\n        .value=${this.spacedQuery}\n        placeholder=${this.placeholder}\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\n        screenReaderLabel=${msg(\n          'Search the Archive. Filters and Advanced Search available below.',\n        )}\n        @clear=${this.searchFieldCleared}\n        @submit=${this.handleSubmit}\n      ></ia-clearable-text-input>\n    `;\n  }\n\n  /**\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\n   */\n  private get searchButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        id=\"search-button\"\n        part=\"search-button\"\n        class=${this.loading ? 'loading' : nothing}\n        type=\"button\"\n        aria-label=${msg('Search')}\n        @click=${this.handleSubmit}\n      >\n        ${this.loading\n          ? html`<ia-status-indicator\n              mode=\"loading\"\n              class=\"search-button-loading-icon\"\n            ></ia-status-indicator>`\n          : html`<img src=${searchIcon} alt=\"\" />`}\n      </button>\n    `;\n  }\n\n  /**\n   * The display label for the currently selected category.\n   */\n  private get selectedCategoryLabel(): string | TemplateResult {\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\n    return match?.label ?? this.resolvedCategory;\n  }\n\n  /**\n   * The current search query with +'s replaced by spaces.\n   */\n  private get spacedQuery(): string {\n    return this.query?.replace(/\\+/g, ' ') ?? '';\n  }\n\n  /**\n   * Handler for when the search bar's clear button is pressed.\n   */\n  private searchFieldCleared(): void {\n    if (this.query) {\n      this.emitSearchRequested();\n    }\n  }\n\n  /**\n   * Handler for Enter key or search button click.\n   */\n  private handleSubmit(): void {\n    this.emitSearchRequested();\n  }\n\n  /**\n   * Handler for when the user selects a category from the dropdown.\n   *\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n   * pattern). The parent also binds this property and may re-set it on re-render.\n   */\n  private handleCategorySelected(\n    e: CustomEvent<{ option: optionInterface }>,\n  ): void {\n    const newCategoryId = e.detail.option.id;\n    if (newCategoryId === this.resolvedCategory) return;\n\n    this.selectedCategory = newCategoryId;\n\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n    setTimeout(() => this.searchInput.focus());\n\n    this.dispatchEvent(\n      new CustomEvent<string>(Events.CategoryChanged, {\n        detail: newCategoryId,\n      }),\n    );\n  }\n\n  /**\n   * Emits a `searchRequested` event with the current query and category.\n   */\n  private emitSearchRequested(): void {\n    this.dispatchEvent(\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n        detail: {\n          query: this.searchInput.value,\n          category: this.resolvedCategory,\n        },\n      }),\n    );\n  }\n\n  static get styles() {\n    const ownStyles = css`\n      :host {\n        --search-bar-height--: var(--search-bar-height, 30px);\n        --search-bar-width--: var(--search-bar-width, 300px);\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\n        --clear-button-offset--: var(--clear-button-offset, 0);\n        --dropdown-z-index--: var(--dropdown-z-index, initial);\n      }\n\n      #container {\n        display: inline-block;\n        width: var(--search-bar-width--);\n      }\n\n      #main-bar {\n        display: flex;\n        height: var(--search-bar-height--, 30px);\n        flex: 1;\n      }\n\n      #category-dropdown {\n        display: flex;\n        flex-shrink: 0;\n        height: 100%;\n        box-sizing: border-box;\n\n        background-color: #f5f5f7;\n        border: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n        --dropdownBgColor: #2c2c2c;\n        --dropdownTextColor: #fff;\n        --dropdownBorderColor: #ddd;\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownHoverTextColor: #fff;\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownSelectedTextColor: #fff;\n        --dropdownWhiteSpace: nowrap;\n        --dropdownOffsetTop: 2px;\n        --caretHeight: 8px;\n        --caretWidth: 12px;\n        --caretPadding: 0 0 0 5px;\n        --dropdownFontSize: inherit;\n        --dropdownBorderRadius: 4px;\n        --buttonSlotPaddingRight: 0;\n        --dropdownTextAlign: left;\n        --dropdownListZIndex: var(--dropdown-z-index--);\n      }\n\n      #category-dropdown [slot='dropdown-label'] {\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\n        font-size: 1.4rem;\n        font-family: inherit;\n        white-space: nowrap;\n      }\n\n      .no-dropdown #search-input {\n        border-left: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n        overflow: hidden;\n      }\n\n      #search-input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border-top: 1px solid #999;\n        border-bottom: 1px solid #999;\n        font-size: inherit;\n\n        --input-height: calc(var(--search-bar-height--) - 2px);\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n        --input-background-color: var(\n          --ia-theme-secondary-background-color,\n          #fff\n        );\n        --input-border-radius: 0;\n        --input-border-width: 0;\n        --input-box-shadow: none;\n        --input-focused-box-shadow: none;\n        --input-font-size: auto;\n        --clear-button-top: var(--clear-button-offset--, 0);\n        --clear-button-right: 2px;\n      }\n\n      #search-button {\n        appearance: none;\n        box-sizing: border-box;\n        border-radius: 0 5px 5px 0;\n        background-color: var(--ia-theme-secondary-background-color, #fff);\n        border: 1px solid #999;\n        border-left: 0;\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n        min-width: 30px;\n        height: 100%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      #search-button img {\n        width: 18px;\n        height: 18px;\n      }\n\n      .search-button-loading-icon {\n        --icon-width: 20px;\n        margin-top: 2px;\n      }\n    `;\n\n    return [themeStyles, ownStyles];\n  }\n}\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';\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  CategoryChanged: 'categoryChanged',\n  SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n  /** The query that appears in the search bar */\n  @property({ type: String }) query?: string;\n\n  /** Dropdown menu options (tab IDs + labels) */\n  @property({ type: Array }) categories: SearchCategory[] = [];\n\n  /** The currently selected dropdown category ID */\n  @property({ type: String }) selectedCategory?: string;\n\n  /** Placeholder text for the search input */\n  @property({ type: String }) placeholder = msg('Search');\n\n  /** Whether to use the mobile layout */\n  @property({ type: Boolean }) useMobileView = false;\n\n  /** Whether to hide the category dropdown to the left of the search bar */\n  @property({ type: Boolean }) hideDropdown = false;\n\n  /** Whether the search button should show its loading state */\n  @property({ type: Boolean }) loading = false;\n\n  @query('#search-input')\n  private searchInput!: IaClearableTextInput;\n\n  @query('#category-dropdown')\n  private categoryDropdown?: IaDropdown;\n\n  /** The effective selected category, falling back to the first in the list. */\n  private get resolvedCategory(): string {\n    return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\" part=\"container\" role=\"search\">\n        <div\n          id=\"main-bar\"\n          part=\"main-bar\"\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\n        >\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues) {\n    // Push new categories down to the inner dropdown immediately, since ia-dropdown\n    // mutates its own selected option on interaction which can cause Lit's\n    // property-binding diff to miss the change in certain cases.\n    if (changed.has('selectedCategory') || changed.has('categories')) {\n      const resolved = this.resolvedCategory;\n      if (\n        this.categoryDropdown &&\n        this.categoryDropdown.selectedOption !== resolved\n      ) {\n        this.categoryDropdown.selectedOption = resolved;\n      }\n    }\n  }\n\n  /**\n   * Template for the category dropdown on the left side of the search bar.\n   */\n  private get dropdownTemplate(): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=\"category-dropdown\"\n        part=\"category-dropdown\"\n        displayCaret\n        includeSelectedOption\n        closeOnSelect\n        closeOnEscape\n        closeOnBackdropClick\n        openViaButton\n        .selectedOption=${this.resolvedCategory}\n        .options=${this.categories}\n        @optionSelected=${this.handleCategorySelected}\n      >\n        <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n          >${this.selectedCategoryLabel}</span\n        >\n      </ia-dropdown>\n    `;\n  }\n\n  /**\n   * Template for the main text entry box of the search bar.\n   */\n  private get textBoxTemplate(): TemplateResult {\n    return html`\n      <ia-clearable-text-input\n        id=\"search-input\"\n        part=\"search-input\"\n        .value=${this.spacedQuery}\n        placeholder=${this.placeholder}\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\n        screenReaderLabel=${msg(\n          'Search the Archive. Filters and Advanced Search available below.',\n        )}\n        @clear=${this.searchFieldCleared}\n        @submit=${this.handleSubmit}\n      ></ia-clearable-text-input>\n    `;\n  }\n\n  /**\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\n   */\n  private get searchButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        id=\"search-button\"\n        part=\"search-button\"\n        class=${this.loading ? 'loading' : nothing}\n        type=\"button\"\n        aria-label=${msg('Search')}\n        @click=${this.handleSubmit}\n      >\n        ${this.loading\n          ? html`<ia-status-indicator\n              mode=\"loading\"\n              class=\"search-button-loading-icon\"\n            ></ia-status-indicator>`\n          : html`<img src=${searchIcon} alt=\"\" />`}\n      </button>\n    `;\n  }\n\n  /**\n   * The display label for the currently selected category.\n   */\n  private get selectedCategoryLabel(): string | TemplateResult {\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\n    return match?.label ?? this.resolvedCategory;\n  }\n\n  /**\n   * The current search query with +'s replaced by spaces.\n   */\n  private get spacedQuery(): string {\n    return this.query?.replace(/\\+/g, ' ') ?? '';\n  }\n\n  /**\n   * Handler for when the search bar's clear button is pressed.\n   */\n  private searchFieldCleared(): void {\n    if (this.query) {\n      this.emitSearchRequested();\n    }\n  }\n\n  /**\n   * Handler for Enter key or search button click.\n   */\n  private handleSubmit(): void {\n    this.emitSearchRequested();\n  }\n\n  /**\n   * Handler for when the user selects a category from the dropdown.\n   *\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n   * pattern). The parent also binds this property and may re-set it on re-render.\n   */\n  private handleCategorySelected(\n    e: CustomEvent<{ option: optionInterface }>,\n  ): void {\n    const newCategoryId = e.detail.option.id;\n    if (newCategoryId === this.resolvedCategory) return;\n\n    this.selectedCategory = newCategoryId;\n\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n    setTimeout(() => this.searchInput.focus());\n\n    this.dispatchEvent(\n      new CustomEvent<string>(Events.CategoryChanged, {\n        detail: newCategoryId,\n      }),\n    );\n  }\n\n  /**\n   * Emits a `searchRequested` event with the current query and category.\n   */\n  private emitSearchRequested(): void {\n    this.dispatchEvent(\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n        detail: {\n          query: this.searchInput.value,\n          category: this.resolvedCategory,\n        },\n      }),\n    );\n  }\n\n  static get styles() {\n    const ownStyles = css`\n      :host {\n        --search-bar-height--: var(--search-bar-height, 30px);\n        --search-bar-width--: var(--search-bar-width, 300px);\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\n        --clear-button-offset--: var(--clear-button-offset, 0);\n        /* While it would be nice to fall back to ia-dropdown's own default here by making this var\n           fall back to \"initial\", older Safari versions don't support that keyword in a var() fallback.\n           So instead we just restate ia-dropdown's current default 2 here as the fallback. */\n        --dropdown-z-index--: var(--dropdown-z-index, 2);\n      }\n\n      #container {\n        display: inline-block;\n        width: var(--search-bar-width--);\n      }\n\n      #main-bar {\n        display: flex;\n        height: var(--search-bar-height--, 30px);\n        flex: 1;\n      }\n\n      #category-dropdown {\n        display: flex;\n        flex-shrink: 0;\n        height: 100%;\n        box-sizing: border-box;\n\n        background-color: #f5f5f7;\n        border: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n        --dropdownBgColor: #2c2c2c;\n        --dropdownTextColor: #fff;\n        --dropdownBorderColor: #ddd;\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownHoverTextColor: #fff;\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownSelectedTextColor: #fff;\n        --dropdownWhiteSpace: nowrap;\n        --dropdownOffsetTop: 2px;\n        --caretHeight: 8px;\n        --caretWidth: 12px;\n        --caretPadding: 0 0 0 5px;\n        --dropdownFontSize: inherit;\n        --dropdownBorderRadius: 4px;\n        --buttonSlotPaddingRight: 0;\n        --dropdownTextAlign: left;\n        --dropdownListZIndex: var(--dropdown-z-index--);\n      }\n\n      #category-dropdown [slot='dropdown-label'] {\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\n        font-size: 1.4rem;\n        font-family: inherit;\n        white-space: nowrap;\n      }\n\n      .no-dropdown #search-input {\n        border-left: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n        overflow: hidden;\n      }\n\n      #search-input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border-top: 1px solid #999;\n        border-bottom: 1px solid #999;\n        font-size: inherit;\n\n        --input-height: calc(var(--search-bar-height--) - 2px);\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n        --input-background-color: var(\n          --ia-theme-secondary-background-color,\n          #fff\n        );\n        --input-border-radius: 0;\n        --input-border-width: 0;\n        --input-box-shadow: none;\n        --input-focused-box-shadow: none;\n        --input-font-size: auto;\n        --clear-button-top: var(--clear-button-offset--, 0);\n        --clear-button-right: 2px;\n      }\n\n      #search-button {\n        appearance: none;\n        box-sizing: border-box;\n        border-radius: 0 5px 5px 0;\n        background-color: var(--ia-theme-secondary-background-color, #fff);\n        border: 1px solid #999;\n        border-left: 0;\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n        min-width: 30px;\n        height: 100%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      #search-button img {\n        width: 18px;\n        height: 18px;\n      }\n\n      .search-button-loading-icon {\n        --icon-width: 20px;\n        margin-top: 2px;\n      }\n    `;\n\n    return [themeStyles, ownStyles];\n  }\n}\n"]}

package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts

@@ -0,0 +1,142 @@
+import { type CSSResultGroup, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { ImageViewerImage, SlideDirection } from './models.js';
+import './ia-imgview-slide.js';
+import './ia-imgview-controls.js';
+/**
+ * A swipeable image carousel.
+ *
+ * Shows one image at a time from a list, with previous/next buttons, a
+ * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
+ * Clicking an image opens it in a new tab.
+ *
+ * The viewer holds no opinion about where the images came from: it takes a
+ * plain list of names and URLs, and reports the image it lands on through
+ * `imageChanged` so a host can mirror that into its own URL or analytics.
+ *
+ * @fires imageChanged - The viewer settled on a new image.
+ * @fires imageLoaded - An image the viewer showed finished loading.
+ * @fires imageLoadFailed - An image the viewer showed could not be loaded.
+ *   Fires once per image until it loads successfully or the set changes.
+ * @fires imageActivated - An image was clicked. Cancelable: preventing it
+ *   stops the default of opening the image in a new tab.
+ */
+export declare class IAImageViewer extends LitElement {
+    images: ImageViewerImage[];
+    /**
+     * Name of the image to show. Changing it jumps straight to that image
+     * without animating. An unknown name shows the first image.
+     */
+    currentImageName?: string;
+    /** Read by the gesture controller, which tracks touches against it. */
+    imageArea?: HTMLElement;
+    /** Read by the gesture controller, which translates it during a drag. */
+    slideTrack?: HTMLElement;
+    /** Read by the gesture controller to navigate relative to the current image. */
+    currentIndex: number;
+    private animating;
+    /**
+     * Incremented when an animation is interrupted to force the track element to
+     * be recreated via the `keyed()` directive, which guarantees the CSS
+     * animation restarts even if the direction is the same.
+     */
+    private slideGeneration;
+    /** Which edge just wrapped, if any. Drives the glow indicator. */
+    private wrapEdge;
+    /**
+     * Images already reported as failed, so a broken image isn't counted again
+     * every time the viewer passes over it. Navigating back re-fires `error` on
+     * the recreated element, and the neighbouring slides staged during an
+     * animation or a drag load the same image too, so without this a single
+     * broken derivative reports several times a session.
+     *
+     * Cleared when the image set changes, which is the point a name stops
+     * standing for the same file.
+     */
+    private reportedFailures;
+    private slideTarget;
+    private slideDirection;
+    private gestures;
+    get imageCount(): number;
+    /** The image currently on screen, if there is one. */
+    get currentImage(): ImageViewerImage | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult | typeof nothing;
+    private slideTemplate;
+    /**
+     * Announces the image to a screen reader, which otherwise gets nothing when
+     * the counter and the picture change under it.
+     */
+    private get announcementTemplate();
+    /**
+     * Passes a slide's load result on to the host, which is where reporting
+     * belongs. The slide's own events stop at this shadow root, so they're
+     * re-dispatched rather than allowed to escape.
+     */
+    private onImageLoaded;
+    private onImageFailed;
+    /**
+     * Decides whether a click on a slide opens the image.
+     *
+     * Two things can stop it: the click is the tail end of a swipe, or the host
+     * cancels the event to show the image its own way. The slide's event doesn't
+     * cross this shadow root, so it's re-raised here for the host to see, and a
+     * veto is passed back down to cancel the click.
+     */
+    private onImageActivated;
+    /**
+     * Inserts the neighbouring slides around the current one so the touch target
+     * element stays in the DOM (avoiding touchcancel). These aren't rendered
+     * from the template, so they're marked for the gesture controller to clean
+     * up. The dragging class shifts the track to centre on the middle slide.
+     */
+    insertDragSlides(): void;
+    removeDragSlides(): void;
+    private createDragSlide;
+    showNext(): void;
+    showPrevious(): void;
+    /**
+     * Starts the move to another image. With reduced motion there's no animation
+     * to wait on, so the move lands immediately: nothing would fire the
+     * `animationend` that otherwise commits it.
+     */
+    private moveTo;
+    /**
+     * Moves to the image a completed drag landed on. The drag has already
+     * animated the track there, so this only updates state.
+     */
+    commitDrag(direction: SlideDirection): void;
+    /**
+     * If an animation is in progress, immediately commit its target so the next
+     * animation starts from the right position. Bumps the generation key to
+     * force the track element to be recreated, which restarts the CSS animation.
+     */
+    settleIfAnimating(): void;
+    private onWrapGlowEnd;
+    private onSlideEnd;
+    /** Finishes a move, however it was driven. */
+    private settleAtCurrentIndex;
+    private emitImageChanged;
+    /**
+     * Preloads the next and previous images around `currentIndex` so the first
+     * navigation feels instant.
+     */
+    private preloadAdjacentImages;
+    /**
+     * Preloads images adjacent to the given index. Called both at rest (around
+     * `currentIndex`) and at the start of a move (around the target) so rapid
+     * navigation stays ahead of the browser cache.
+     *
+     * A preload that fails is deliberately not reported. These requests are
+     * speculative and the viewer may never show them, so counting them would
+     * inflate the failure rate with images nobody looked at. Navigating to a
+     * broken image renders a real slide, whose `error` reports it then.
+     */
+    preloadAroundIndex(index: number): void;
+    static get styles(): CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ia-image-viewer': IAImageViewer;
+    }
+}
+//# sourceMappingURL=ia-image-viewer.d.ts.map

package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-image-viewer.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAY,MAAM,UAAU,CAAC;AAE3E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,MAAM,EAAE,gBAAgB,EAAE,CAAM;IAE3D;;;OAGG;IACyB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,uEAAuE;IACjD,SAAS,CAAC,EAAE,WAAW,CAAC;IAE9C,yEAAyE;IAClD,UAAU,CAAC,EAAE,WAAW,CAAC;IAEhD,gFAAgF;IACvE,YAAY,SAAK;IAEjB,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAK;IAErC,kEAAkE;IACzD,OAAO,CAAC,QAAQ,CAAyB;IAElD;;;;;;;;;OASG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,QAAQ,CAAiC;IAEjD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiBnD,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IA6EzC,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,OAAO,KAAK,oBAAoB,GAW/B;IAED;;;;OAIG;IACH,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAcxB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI;IAgBxB,gBAAgB,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IAOvB,QAAQ,IAAI,IAAI;IAKhB,YAAY,IAAI,IAAI;IAQpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAmBd;;;OAGG;IACH,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI;IAc3C;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU;IAMlB,8CAA8C;IAC9C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;;;;;;;OASG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUvC,MAAM,KAAK,MAAM,IAAI,cAAc,CA+IlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}