@internetarchive/elements 1.1.2 → 1.1.3-l10n-demo.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-dropdown.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown/ia-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  css,\n  LitElement,\n  TemplateResult,\n  PropertyValues,\n  CSSResultGroup,\n} from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { when } from 'lit/directives/when.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { localized, msg, str } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n// Imported as raw markup and inlined rather than rendered as `<img src>`, so\n// that the carets stay stylable — they're recolored through the\n// `--dropdownCaretColor` CSS var, which cannot reach inside an `<img>`.\nimport caretUp from './assets/caret-up.svg?raw';\nimport caretDown from './assets/caret-down.svg?raw';\n\nexport interface OptionInterface {\n  url?: string;\n  selectedHandler?: (option: OptionInterface) => void;\n  label: string | TemplateResult;\n  id: string;\n}\n\n@customElement('ia-dropdown')\n@localized()\nexport class IADropdown extends LitElement {\n  /**\n   * Determines whether the dropdown's option menu is currently visible.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Determines whether the main button and/or caret is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) isDisabled = false;\n\n  /**\n   * Specifies whether a caret should be displayed beside the main button content.\n   * Defaults to `false`.\n   */\n  @property({ type: Boolean }) displayCaret = false;\n\n  /**\n   * Specifies whether the dropdown should automatically close when an option is selected.\n   *\n   * Defaults to `false`, for backwards-compatibility.\n   */\n  @property({ type: Boolean }) closeOnSelect = false;\n\n  /**\n   * Specifies whether pressing the main button itself should open the dropdown. This does\n   * not change the behavior of clicking the caret (if shown), which _always_ opens the dropdown\n   * menu.\n   *\n   * Defaults to true, but can be disabled if only caret clicks should toggle the menu.\n   */\n  @property({ type: Boolean }) openViaButton = true;\n\n  /**\n   * Whether to use a popover element for the dropdown menu. Default false.\n   */\n  @property({ type: Boolean }) usePopover = false;\n\n  /**\n   * Specifies whether the currently-selected option should be shown in the dropdown menu.\n   * When `true`, all options are always listed.\n   * When `false`, only unselected options are listed.\n   *\n   * Defaults to `false`, for backwards-compatibility.\n   */\n  @property({ type: Boolean }) includeSelectedOption = false;\n\n  @property({ type: String }) selectedOption = '';\n\n  @property({ attribute: false }) options: OptionInterface[] = [];\n\n  /**\n   * Names the options in the screen reader label for the toggle, as in\n   * \"Toggle <optionGroup>\". When unset, the label is \"Toggle options\".\n   */\n  @property({ type: String }) optionGroup?: string;\n\n  @property({ attribute: false }) optionSelected = () => {};\n\n  /**\n   * Specifies whether the dropdown option list passed in as <slot>.\n   */\n  @property({ type: Boolean, reflect: true }) isCustomList = false;\n\n  /**\n   * Indicates whether mainbutton @click event overridden by ancestor\n   * @click or custom event\n   *\n   * If true, prevents dropdown from opening, closing on main button click.\n   * Also prevents dropdown from opening, closing on caret click, if displayCaret.\n   *\n   * Custom click handling needs to handle:\n   * - enabling/disabling click events\n   * - this.isDisabled property\n   * - this.open property\n   *   Suggest using the instance's open property from ancestor:\n   *     @query('#custom-dropdown') customDropdown!: IADropdown;\n   *     toggleDropdown = () => {\n   *       this.customDropdown.open = !this.customDropdown.open\n   *     }\n   *   @see ia-dropdown-story.ts - the \"My Lists\" custom-list dropdown\n   *\n   * Allows loading options from an API on click before opening dropdown.\n   */\n  @property({ type: Boolean, reflect: true }) hasCustomClickHandler = false;\n\n  /**\n   * Specifies whether the dropdown should automatically close when the Esc key is pressed.\n   * Defaults to `false`, for backwards-compatibility.\n   */\n  @property({ type: Boolean, reflect: true }) closeOnEscape = false;\n\n  /**\n   * Specifies whether the dropdown should close on clicks outside the dropdown menu.\n   * Always closes when true, regardless of {@property hasCustomClickHandler}\n   * Defaults to `false`, for backwards-compatibility.\n   */\n  @property({ type: Boolean, reflect: true }) closeOnBackdropClick = false;\n\n  @query('.ia-dropdown-group') private container!: HTMLDivElement;\n\n  @query('#dropdown-main') private dropdownMenu!: HTMLUListElement;\n\n  @query('.click-main') private mainButton!: HTMLButtonElement;\n\n  @queryAssignedElements({ slot: 'dropdown-label' })\n  private mainButtonLabelSlotted!: HTMLElement[];\n\n  // Lifecycle methods\n\n  async firstUpdated(): Promise<void> {\n    // Wait for the next tick to ensure that the dropdown is in the DOM\n    await new Promise((resolve) => {\n      setTimeout(resolve, 0);\n    });\n\n    this.addEventListener('closeDropdown', this.closeOptions);\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('open')) {\n      this.updatePopoverState();\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeKeyboardListener();\n  }\n\n  // Events\n\n  // Add optional event listener to close dropdown when Esc key pressed\n  private setupKeyboardListener(): void {\n    if (this.closeOnEscape) {\n      document.addEventListener('keydown', this.boundKeyboardListener);\n    }\n  }\n\n  // Remove the Esc key listener for Esc key pressed\n  private removeKeyboardListener(): void {\n    if (this.closeOnEscape) {\n      document.removeEventListener('keydown', this.boundKeyboardListener);\n    }\n  }\n\n  // Event handlers\n\n  // Handle Esc key pressed\n  private boundKeyboardListener = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'Escape':\n      case 'Esc':\n        this.closeOptions();\n        break;\n      default:\n        break;\n    }\n  };\n\n  get dropdownState(): string {\n    if (this.open) {\n      this.setupKeyboardListener();\n      return 'open';\n    }\n    this.removeKeyboardListener();\n    return 'closed';\n  }\n\n  private closeOptions = (e?: Event): void => {\n    if (e && e.type === 'click') {\n      e.stopPropagation();\n    }\n    this.open = false;\n    this.updatePopoverState();\n  };\n\n  toggleOptions(): void {\n    this.open = !this.open;\n    this.updatePopoverState();\n  }\n\n  private updatePopoverState(): void {\n    if (!this.usePopover) return;\n    this.dropdownMenu?.togglePopover?.(this.open);\n    if (this.open) this.positionDropdownMenu();\n  }\n\n  private positionDropdownMenu(): void {\n    if (!this.dropdownMenu) return;\n    const containerRect = this.container.getBoundingClientRect();\n    this.dropdownMenu.style.left = `${containerRect.left}px`;\n    this.dropdownMenu.style.top = `${containerRect.bottom}px`;\n    this.dropdownMenu.style.minWidth = `${containerRect.width}px`;\n  }\n\n  private mainButtonClicked(): void {\n    if (this.openViaButton) {\n      this.toggleOptions();\n    } else {\n      // Refer the click to the button's first slotted child instead\n      this.mainButtonLabelSlotted[0]?.click();\n    }\n  }\n\n  private mainButtonKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      this.mainButtonClicked();\n      e.preventDefault();\n    }\n  }\n\n  private caretKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      this.toggleOptions();\n      e.preventDefault();\n    }\n  }\n\n  // Options\n\n  /**\n   * Sets the default OptionInterface[] options for the dropdown\n   *\n   * Options with different structure and behavior can be used\n   * by passing in a custom list via <slot name=\"list\">\n   * and setting this.isCustomList = true\n   *\n   * @see ia-dropdown-story.ts - the \"My Lists\" custom-list dropdown\n   */\n\n  /**\n   * Renders a single option with click event handler\n   * @param availableOption {OptionInterface}\n   * @returns\n   */\n  renderOption(availableOption: OptionInterface): TemplateResult {\n    const { label, url = undefined, id } = availableOption;\n    let component;\n    const selected = this.selectedOption === id ? 'selected' : '';\n\n    if (url) {\n      component = html`<a\n        href=${url}\n        @click=${(e: Event) => this.optionClicked(e, availableOption)}\n        >${label}</a\n      >`;\n    } else {\n      component = html`<button\n        @click=${(e: Event) => this.optionClicked(e, availableOption)}\n      >\n        ${label}\n      </button>`;\n    }\n\n    return html`<li role=\"menuitem\" class=${selected}>${component}</li>`;\n  }\n\n  optionClicked(e: Event, option: OptionInterface): void {\n    e.stopPropagation();\n    // Don't emit an event for reselecting the same option\n    if (this.selectedOption !== option.id) {\n      this.selectedOption = option.id;\n\n      this.dispatchEvent(\n        new CustomEvent('optionSelected', {\n          detail: { option },\n        }),\n      );\n      option.selectedHandler?.(option);\n    }\n    if (this.closeOnSelect) {\n      this.closeOptions();\n      this.mainButton.focus(); // Move focus to the main button if we're closing the menu\n    }\n  }\n\n  get availableOptions(): OptionInterface[] {\n    // If we're showing the selected option in the dropdown then _all_ options are available.\n    if (this.includeSelectedOption) return this.options;\n\n    // Otherwise, exclude the selected option\n    return this.options.filter(\n      (option) => this.selectedOption !== (option as OptionInterface).id,\n    );\n  }\n\n  // Templates\n\n  /**\n   * Template for the \"up\" caret icon shown when the dropdown is open.\n   * Renders its contents within a named \"caret-up\" slot so that custom icons\n   * can be provided to override the default one.\n   */\n  private get caretUpTemplate(): TemplateResult {\n    return html`\n      <span ?hidden=${!this.open} class=\"caret-up\">\n        <slot name=\"caret-up\">${unsafeHTML(caretUp)}</slot>\n      </span>\n    `;\n  }\n\n  /**\n   * Template for the \"down\" caret icon shown when the dropdown is closed.\n   * Renders its contents within a named \"caret-down\" slot so that custom icons\n   * can be provided to override the default one.\n   */\n  private get caretDownTemplate(): TemplateResult {\n    return html`\n      <span ?hidden=${this.open} class=\"caret-down\">\n        <slot name=\"caret-down\">${unsafeHTML(caretDown)}</slot>\n      </span>\n    `;\n  }\n\n  /**\n   * Renders up and down carets\n   *\n   * @event click caretClicked()\n   * @event keydown caretKeyDown()\n   *\n   * @slot caret-up - Allow replacement of default up caret.\n   * @slot caret-down - Allow replacement of default down caret.\n   */\n  get caretTemplate(): TemplateResult {\n    if (!this.displayCaret) return html``;\n\n    // When clicking the button has the same effect as the caret (opening the dropdown),\n    // we just render the caret as inert content inside the button.\n    if (this.openViaButton) {\n      return html`\n        <span class=\"caret\" aria-hidden=\"true\">\n          ${this.caretUpTemplate} ${this.caretDownTemplate}\n        </span>\n      `;\n    }\n\n    // However, when clicking the button should _not_ open the dropdown, the caret\n    // should instead be rendered as a standalone button as it is the only means of\n    // controlling the dropdown state.\n    return html`\n      <button\n        class=\"caret\"\n        aria-labelledby=\"caret-label\"\n        aria-haspopup=\"true\"\n        aria-expanded=${this.open}\n        @click=${when(this.shouldAttachEventHandlers, () => this.toggleOptions)}\n        @keydown=${when(\n          this.shouldAttachEventHandlers,\n          () => this.caretKeyDown,\n        )}\n        ?disabled=${this.isDisabled}\n      >\n        ${this.caretUpTemplate} ${this.caretDownTemplate}\n      </button>\n    `;\n  }\n\n  /**\n   * Renders the dropdown menu, either as a list of options or as a custom list\n   *\n   * NOTE: tried to skip initial rendering of dropdown options with:\n   *   if (!this.open) return html``;\n   * This would also remove dropdown options from DOM on close.\n   * But because options may have window events, this could create a memory leak.\n   *\n   * @slot list - Allow replacement of default {@interface OptionInterface} dropdown list.\n   */\n  get dropdownTemplate(): TemplateResult {\n    if (this.isCustomList) {\n      return html`<slot name=\"list\"></slot>`;\n    }\n    return html`${this.availableOptions.map((o) => this.renderOption(o))}`;\n  }\n\n  /**\n   * Optional template rendering transparent backdrop to capture clicks outside the\n   * dropdown menu when open.\n   *\n   * @event click closeOptions()\n   * @event keyup closeOptions()\n   */\n  private get backdropTemplate(): TemplateResult {\n    if (!this.closeOnBackdropClick) return html``;\n    if (!this.open) return html``;\n    return html`\n      <div\n        id=\"dropdown-backdrop\"\n        @keyup=${this.closeOptions}\n        @click=${this.closeOptions}\n      ></div>\n    `;\n  }\n\n  /**\n   * Whether the caret element should be nested inside the main button (as an inert icon).\n   * If false, then the caret should be rendered as a separate button beside the main one.\n   */\n  private get shouldNestCaretInButton(): boolean {\n    return this.openViaButton;\n  }\n\n  /**\n   * Whether the main button (or caret, if main button is disabled) should have click and\n   * keydown handlers attached to it.\n   */\n  private get shouldAttachEventHandlers(): boolean {\n    return !this.isDisabled && !this.hasCustomClickHandler;\n  }\n\n  /**\n   * Screen reader label for the main button and caret.\n   */\n  private get toggleLabel(): string {\n    return this.optionGroup\n      ? msg(str`Toggle ${this.optionGroup}`)\n      : msg('Toggle options');\n  }\n\n  render() {\n    return html`\n      <div class=\"ia-dropdown-group ${this.open ? 'open' : ''}\">\n        <div class=\"button-row\">\n          <button\n            class=\"click-main\"\n            aria-haspopup=${this.openViaButton}\n            aria-expanded=${this.open}\n            @click=${when(\n              this.shouldAttachEventHandlers,\n              () => this.mainButtonClicked,\n            )}\n            @keydown=${when(\n              this.shouldAttachEventHandlers,\n              () => this.mainButtonKeyDown,\n            )}\n            ?disabled=${this.isDisabled}\n          >\n            <span class=\"sr-only\" id=\"caret-label\">${this.toggleLabel}</span>\n            <slot name=\"dropdown-label\"></slot>\n            ${when(this.shouldNestCaretInButton, () => this.caretTemplate)}\n          </button>\n          ${when(!this.shouldNestCaretInButton, () => this.caretTemplate)}\n        </div>\n\n        <ul\n          id=\"dropdown-main\"\n          class=${this.dropdownState}\n          role=\"menu\"\n          ?popover=${this.usePopover}\n        >\n          ${this.dropdownTemplate}\n        </ul>\n\n        ${this.backdropTemplate}\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const dropdownBorderWidth = css`var(--dropdownBorderWidth, 1px)`;\n    const dropdownBorderRadius = css`var(--dropdownBorderRadius, 4px)`;\n    const dropdownBorderColor = css`var(--dropdownBorderColor, #fff)`;\n    const dropdownBgColor = css`var(--dropdownBgColor, #333)`;\n    const dropdownTextColor = css`var(--dropdownTextColor, #fff)`;\n    const dropdownHoverBgColor = css`var(--dropdownHoverBgColor, rgba(255, 255, 255, 0.3))`;\n    const dropdownSelectedBgColor = css`var(--dropdownSelectedBgColor, #fff)`;\n    const dropdownMainButtonBgColor = css`var(--dropdownMainButtonBgColor, transparent)`;\n    const dropdownTextAlign = css`var(--dropdownTextAlign, inherit)`;\n    const dropdownBackdropZIndex = css`var(--dropdownBackdropZIndex, 1)`;\n    const dropdownListZIndex = css`var(--dropdownListZIndex, 2)`;\n\n    return [\n      themeStyles,\n      css`\n        :host {\n          display: inline;\n          color: ${dropdownTextColor};\n        }\n\n        svg.caret-up-svg,\n        svg.caret-down-svg,\n        ::slotted(svg.caret-up-svg),\n        ::slotted(svg.caret-down-svg) {\n          fill: var(--dropdownCaretColor, #fff);\n          vertical-align: middle;\n        }\n\n        .button-row {\n          display: flex;\n          height: 100%;\n        }\n\n        button.click-main {\n          background: ${dropdownMainButtonBgColor};\n          color: inherit;\n          padding: var(--dropdownMainButtonPadding, 0px);\n          border: var(--dropdownMainButtonBorder, none);\n          border-radius: var(--dropdownMainButtonBorderRadius, none);\n          cursor: pointer;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          align-content: center;\n          flex-wrap: nowrap;\n          flex-direction: var(--dropdownMainButtonFlexDirection, row);\n        }\n\n        .open button.click-main {\n          /* When the dropdown is open, give the buttom the same z-index\n           as the dropdown menu, so that it remains clickable despite\n           the backdrop. */\n          z-index: ${dropdownListZIndex};\n        }\n\n        button.click-main:disabled {\n          pointer-events: none;\n          cursor: not-allowed;\n          opacity: 0.5;\n          /* Disable text selection on disabled button */\n          -webkit-user-select: none; /* Safari */\n          -ms-user-select: none; /* IE 10 and IE 11 */\n          user-select: none; /* Standard syntax */\n        }\n\n        button.click-main:hover {\n          background-color: var(\n            --dropdownMainButtonHoverBgColor,\n            ${dropdownMainButtonBgColor}\n          );\n        }\n\n        button.click-main:focus,\n        button.click-main:focus-visible {\n          background-color: var(\n            --dropdownMainButtonFocusBgColor,\n            ${dropdownMainButtonBgColor}\n          );\n        }\n\n        button.click-main:active {\n          background-color: var(\n            --dropdownMainButtonActiveBgColor,\n            ${dropdownMainButtonBgColor}\n          );\n        }\n\n        button slot[name='dropdown-label'] {\n          /* Set var to 0px for column layout */\n          padding-right: var(--buttonSlotPaddingRight, 5px);\n          display: inline-block;\n        }\n\n        .ia-dropdown-group {\n          width: inherit;\n          height: inherit;\n          position: relative;\n        }\n\n        .sr-only {\n          border: 0 !important;\n          clip: rect(1px, 1px, 1px, 1px) !important;\n          -webkit-clip-path: inset(50%) !important;\n          clip-path: inset(50%) !important;\n          height: 1px !important;\n          margin: -1px !important;\n          overflow: hidden !important;\n          padding: 0 !important;\n          position: absolute !important;\n          width: 1px !important;\n          white-space: nowrap !important;\n          -webkit-user-select: none !important;\n          user-select: none !important;\n        }\n\n        .caret {\n          /* Maintain centered caret position but with a full-height clickable region */\n          display: flex;\n          align-self: stretch;\n          align-items: center;\n          padding: var(--caretPadding, 0px);\n        }\n\n        button.caret {\n          appearance: none;\n          background: none;\n          border: none;\n          cursor: pointer;\n        }\n\n        .caret svg {\n          height: var(--caretHeight, 10px);\n          width: var(--caretWidth, 20px);\n        }\n\n        #dropdown-backdrop {\n          position: fixed;\n          top: 0;\n          left: 0;\n          width: 100vw;\n          height: 100vh;\n          background-color: transparent;\n          z-index: ${dropdownBackdropZIndex};\n        }\n\n        ul {\n          z-index: ${dropdownListZIndex};\n        }\n\n        #dropdown-main.closed {\n          visibility: hidden;\n          height: 1px;\n          width: 1px;\n        }\n\n        #dropdown-main {\n          position: var(--dropdownListPosition, absolute);\n          list-style: none;\n          margin: var(--dropdownOffsetTop, 5px) 0 0 0;\n          padding: var(--dropdownPadding, 0);\n          color: ${dropdownTextColor};\n          background: ${dropdownBgColor};\n\n          font-size: var(--dropdownFontSize, inherit);\n\n          border-top: var(--dropdownBorderTopWidth, ${dropdownBorderWidth});\n          border-right: var(--dropdownBorderRightWidth, ${dropdownBorderWidth});\n          border-bottom: var(\n            --dropdownBorderBottomWidth,\n            ${dropdownBorderWidth}\n          );\n          border-left: var(--dropdownBorderLeftWidth, ${dropdownBorderWidth});\n          /* Must be after border-width settings for specificity */\n          border-style: solid;\n          border-color: ${dropdownBorderColor};\n\n          border-radius: var(\n              --dropdownBorderTopLeftRadius,\n              ${dropdownBorderRadius}\n            )\n            var(--dropdownBorderTopRightRadius, ${dropdownBorderRadius})\n            var(--dropdownBorderBottomRightRadius, ${dropdownBorderRadius})\n            var(--dropdownBorderBottomLeftRadius, ${dropdownBorderRadius});\n\n          white-space: var(--dropdownWhiteSpace, normal);\n\n          /* Prevent top/bottom inner li from overlapping inner border */\n          overflow: hidden;\n        }\n\n        #dropdown-main li:hover {\n          background-color: ${dropdownHoverBgColor};\n          color: var(--dropdownHoverTextColor, #fff);\n          list-style: none;\n          cursor: pointer;\n        }\n\n        #dropdown-main li:hover:first-child {\n          border-top-color: ${dropdownHoverBgColor};\n        }\n\n        ul#dropdown-main li:hover:last-child {\n          border-bottom-color: ${dropdownHoverBgColor};\n        }\n\n        #dropdown-main li:hover:not(:first-child) {\n          border-top: 0.5px solid var(--dropdownHoverTopBottomBorderColor, #333);\n        }\n        #dropdown-main li:hover:not(:last-child) {\n          border-bottom: 0.5px solid\n            var(--dropdownHoverTopBottomBorderColor, #333);\n        }\n\n        #dropdown-main li.selected:last-child {\n          border-bottom-color: ${dropdownSelectedBgColor};\n        }\n\n        #dropdown-main li.selected:first-child {\n          border-top-color: ${dropdownSelectedBgColor};\n        }\n\n        #dropdown-main li:hover > *,\n        #dropdown-main li:focus-within > * {\n          background-color: ${dropdownHoverBgColor};\n          color: var(--dropdownHoverTextColor, #fff);\n        }\n\n        #dropdown-main li.selected > * {\n          background-color: ${dropdownSelectedBgColor};\n          color: var(--dropdownSelectedTextColor, #2c2c2c);\n        }\n\n        #dropdown-main li {\n          background: ${dropdownBgColor};\n          list-style: none;\n          height: 30px;\n          cursor: pointer;\n          border-bottom: 0.5px solid ${dropdownBgColor};\n          border-top: 0.5px solid ${dropdownBgColor};\n        }\n\n        #dropdown-main li button {\n          background: none;\n          color: inherit;\n          border: none;\n          font: inherit;\n          cursor: pointer;\n          outline: inherit;\n        }\n\n        #dropdown-main li a {\n          text-decoration: none;\n          display: block;\n          box-sizing: border-box;\n        }\n\n        #dropdown-main li:first-child {\n          border-top-left-radius: var(--dropdownBorderTopLeftRadius, 4px);\n          border-top-right-radius: var(--dropdownBorderTopRightRadius, 4px);\n        }\n\n        #dropdown-main li:last-child {\n          border-bottom-right-radius: var(\n            --dropdownBorderBottomRightRadius,\n            4px\n          );\n          border-bottom-left-radius: var(--dropdownBorderBottomLeftRadius, 4px);\n        }\n\n        /* cover the list with the label */\n        #dropdown-main li > * > :first-child {\n          margin: 0;\n          display: flex;\n          align-items: center;\n          justify-content: flex-start;\n          align-content: center;\n          flex-wrap: nowrap;\n          height: 100%;\n          padding: var(--dropdownItemPaddingTop, 5px)\n            var(--dropdownItemPaddingRight, 10px)\n            var(--dropdownItemPaddingBottom, 5px)\n            var(--dropdownItemPaddingLeft, 10px);\n          box-sizing: border-box;\n        }\n\n        #dropdown-main li > * {\n          width: 100%;\n          height: inherit;\n          color: ${dropdownTextColor};\n          background: var(--dropdownItemButtonBgColor, transparent);\n          padding: var(--dropdownItemButtonPadding, 0);\n          text-align: ${dropdownTextAlign};\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-dropdown/ia-icon-label.d.ts

@@ -0,0 +1,10 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+/**
+ * Lays out an icon beside a label, for use as the content of an
+ * `ia-dropdown` option or main button.
+ */
+export declare class IAIconLabel extends LitElement {
+    render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+//# sourceMappingURL=ia-icon-label.d.ts.map

package/dist/src/elements/ia-dropdown/ia-icon-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-icon-label.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown/ia-icon-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E;;;GAGG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,IAAI,cAAc;IASxB,MAAM,CAAC,MAAM,EAAE,cAAc,CA+E3B;CACH"}

package/dist/src/elements/ia-dropdown/ia-icon-label.js

@@ -0,0 +1,103 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement } from '../../util/custom-element.js';
+import themeStyles from '../../themes/theme-styles.js';
+/**
+ * Lays out an icon beside a label, for use as the content of an
+ * `ia-dropdown` option or main button.
+ */
+let IAIconLabel = class IAIconLabel extends LitElement {
+    render() {
+        return html `
+      <div class="icon-label-container">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+IAIconLabel.styles = [
+    themeStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+
+      :host(.invert-icon-at-hover:hover) slot[name='icon'] {
+        filter: invert(1);
+      }
+
+      :host(.selected) {
+        background-color: var(--selectedBgColor, #fff);
+        color: var(--selectedTextColor, #2c2c2c);
+      }
+
+      :host(.invert-icon-at-selected.selected) slot[name='icon'] {
+        filter: invert(1);
+      }
+
+      div.icon-label-container {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+        align-content: center;
+        flex-wrap: nowrap;
+        flex-direction: var(--iconLabelFlexDirection, row);
+        height: 100%;
+      }
+
+      slot[name='icon'] {
+        width: var(--iconWidth, 20px);
+        margin-right: var(--iconLabelGutterWidth, 10px);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        align-content: center;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        height: 100%;
+      }
+
+      /* https://css-tricks.com/flexbox-truncated-text/ */
+      ::slotted(div.truncate) {
+        display: flex;
+        width: var(--labelWidth, 100%);
+        text-align: left;
+        word-wrap: break-word; /* Important for long words! */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+      }
+
+      @supports not (-webkit-line-clamp: 2) {
+        ::slotted(div.truncate) {
+          min-width: 0;
+        }
+      }
+      @supports (-webkit-line-clamp: 2) {
+        ::slotted(div.truncate) {
+          min-width: 0;
+          display: -webkit-box;
+          overflow-wrap: break-word;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          /* Fixed line-height needed to fit unicode and emojis
+          https://stackoverflow.com/a/67807146
+        */
+          line-height: 1.2em;
+          /* max-height needed for Safari browser */
+          max-height: var(--labelTruncateHeight, 30px);
+          max-width: var(--labelWidth, 100%);
+        }
+      }
+    `,
+];
+IAIconLabel = __decorate([
+    customElement('ia-icon-label')
+], IAIconLabel);
+export { IAIconLabel };
+//# sourceMappingURL=ia-icon-label.js.map

package/dist/src/elements/ia-dropdown/ia-icon-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-icon-label.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown/ia-icon-label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;GAGG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IACzC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;KAKV,CAAC;IACJ,CAAC;;AAEM,kBAAM,GAAmB;IAC9B,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4EF;CACF,AA/EY,CA+EX;AAzFS,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA0FvB","sourcesContent":["import { html, css, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement } from '@src/util/custom-element';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Lays out an icon beside a label, for use as the content of an\n * `ia-dropdown` option or main button.\n */\n@customElement('ia-icon-label')\nexport class IAIconLabel extends LitElement {\n  render(): TemplateResult {\n    return html`\n      <div class=\"icon-label-container\">\n        <slot name=\"icon\"></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = [\n    themeStyles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n        position: relative;\n      }\n\n      :host(.invert-icon-at-hover:hover) slot[name='icon'] {\n        filter: invert(1);\n      }\n\n      :host(.selected) {\n        background-color: var(--selectedBgColor, #fff);\n        color: var(--selectedTextColor, #2c2c2c);\n      }\n\n      :host(.invert-icon-at-selected.selected) slot[name='icon'] {\n        filter: invert(1);\n      }\n\n      div.icon-label-container {\n        display: flex;\n        width: 100%;\n        align-items: center;\n        justify-content: flex-start;\n        align-content: center;\n        flex-wrap: nowrap;\n        flex-direction: var(--iconLabelFlexDirection, row);\n        height: 100%;\n      }\n\n      slot[name='icon'] {\n        width: var(--iconWidth, 20px);\n        margin-right: var(--iconLabelGutterWidth, 10px);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        align-content: center;\n        flex-wrap: nowrap;\n        white-space: nowrap;\n        height: 100%;\n      }\n\n      /* https://css-tricks.com/flexbox-truncated-text/ */\n      ::slotted(div.truncate) {\n        display: flex;\n        width: var(--labelWidth, 100%);\n        text-align: left;\n        word-wrap: break-word; /* Important for long words! */\n        overflow: hidden;\n        text-overflow: ellipsis;\n        min-width: 0;\n      }\n\n      @supports not (-webkit-line-clamp: 2) {\n        ::slotted(div.truncate) {\n          min-width: 0;\n        }\n      }\n      @supports (-webkit-line-clamp: 2) {\n        ::slotted(div.truncate) {\n          min-width: 0;\n          display: -webkit-box;\n          overflow-wrap: break-word;\n          -webkit-line-clamp: 2;\n          -webkit-box-orient: vertical;\n          /* Fixed line-height needed to fit unicode and emojis\n          https://stackoverflow.com/a/67807146\n        */\n          line-height: 1.2em;\n          /* max-height needed for Safari browser */\n          max-height: var(--labelTruncateHeight, 30px);\n          max-width: var(--labelWidth, 100%);\n        }\n      }\n    `,\n  ];\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import type { SearchCategory } from './models.js';
 import '@internetarchive/ia-clearable-text-input';
-import '@internetarchive/ia-dropdown';
+import '../../elements/ia-dropdown/ia-dropdown.js';
 import '../../elements/ia-status-indicator/ia-status-indicator.js';
 export declare class IADropdownSearchBar extends LitElement {
     /** The query that appears in the search bar */
@@ -10,8 +10,8 @@ export declare class IADropdownSearchBar extends LitElement {
     categories: SearchCategory[];
     /** The currently selected dropdown category ID */
     selectedCategory?: string;
-    /** Placeholder text for the search input */
-    placeholder: string;
+    /** Placeholder text for the search input. Defaults to "Search". */
+    placeholder?: string;
     /** Whether to use the mobile layout */
     useMobileView: boolean;
     /** Whether to hide the category dropdown to the left of the search bar */

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;AAKb,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"}
+{"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;AAQb,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,OAAO,0CAA0C,CAAC;AAClD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uDAAuD,CAAC;AAU/D,qBAEa,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,mEAAmE;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD,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

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { css, html, LitElement, nothing, } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import themeStyles from '../../themes/theme-styles.js';
 import searchIcon from './search.svg';
 import '@internetarchive/ia-clearable-text-input';
-import '@internetarchive/ia-dropdown';
+import '../../elements/ia-dropdown/ia-dropdown.js';
 import '../../elements/ia-status-indicator/ia-status-indicator.js';
 /**
  * Event names emitted by this component
@@ -20,8 +20,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         super(...arguments);
         /** Dropdown menu options (tab IDs + labels) */
         this.categories = [];
-        /** Placeholder text for the search input */
-        this.placeholder = msg('Search');
         /** Whether to use the mobile layout */
         this.useMobileView = false;
         /** Whether to hide the category dropdown to the left of the search bar */
@@ -92,7 +90,7 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         id="search-input"
         part="search-input"
         .value=${this.spacedQuery}
-        placeholder=${this.placeholder}
+        placeholder=${this.placeholder ?? msg('Search')}
         clearButtonScreenReaderLabel=${msg('Clear search query')}
         screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
         @clear=${this.searchFieldCleared}
@@ -326,7 +324,8 @@ __decorate([
     query('#category-dropdown')
 ], IADropdownSearchBar.prototype, "categoryDropdown", void 0);
 IADropdownSearchBar = __decorate([
-    customElement('ia-dropdown-search-bar')
+    customElement('ia-dropdown-search-bar'),
+    localized()
 ], IADropdownSearchBar);
 export { IADropdownSearchBar };
 //# sourceMappingURL=ia-dropdown-search-bar.js.map

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 { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\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"]}
+{"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 { localized, msg } from '@lit/localize';\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type {\n  IADropdown,\n  OptionInterface,\n} from '@src/elements/ia-dropdown/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 '@src/elements/ia-dropdown/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')\n@localized()\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. Defaults to \"Search\". */\n  @property({ type: String }) placeholder?: string;\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 ?? msg('Search')}\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-expandable-search-bar/ia-expandable-search-bar.d.ts

@@ -13,10 +13,10 @@ export declare class IAExpandableSearchBar extends LitElement {
     searchTerm: string;
     /** The suggestions to offer in the quick search list */
     quickSearches: QuickSearchEntry[];
-    /** Placeholder text for the input */
-    placeholder: string;
-    /** The accessible name for the input */
-    label: string;
+    /** Placeholder text for the input. Defaults to "Search". */
+    placeholder?: string;
+    /** The accessible name for the input. Defaults to "Search". */
+    label?: string;
     private searchInput?;
     render(): TemplateResult;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ia-expandable-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMjD,OAAO,mBAAmB,CAAC;AAY3B;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,+CAA+C;IAClB,MAAM,UAAS;IAE5C,yEAAyE;IAC5C,eAAe,UAAS;IAErD,8BAA8B;IACF,UAAU,SAAM;IAE5C,wDAAwD;IAC7B,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,qCAAqC;IACT,WAAW,SAAiB;IAExD,wCAAwC;IACZ,KAAK,SAAiB;IAE1B,OAAO,CAAC,WAAW,CAAC,CAA0B;IAEtE,MAAM,IAAI,cAAc;IAuDxB;;;;;;;;OAQG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAWnB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsKlC;CACF"}
+{"version":3,"file":"ia-expandable-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMjD,OAAO,mBAAmB,CAAC;AAY3B;;GAEG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;IACnD,+CAA+C;IAClB,MAAM,UAAS;IAE5C,yEAAyE;IAC5C,eAAe,UAAS;IAErD,8BAA8B;IACF,UAAU,SAAM;IAE5C,wDAAwD;IAC7B,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,4DAA4D;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD,+DAA+D;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,WAAW,CAAC,CAA0B;IAEtE,MAAM,IAAI,cAAc;IAuDxB;;;;;;;;OAQG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAWnB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsKlC;CACF"}

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import clearResultsIcon from './assets/clear-results.js';
 import disclosureIcon from './assets/disclosure.js';
 import magnifyingGlassIcon from './assets/magnifying-glass.js';
@@ -30,10 +30,6 @@ let IAExpandableSearchBar = class IAExpandableSearchBar extends LitElement {
         this.searchTerm = '';
         /** The suggestions to offer in the quick search list */
         this.quickSearches = [];
-        /** Placeholder text for the input */
-        this.placeholder = msg('Search');
-        /** The accessible name for the input */
-        this.label = msg('Search');
         /**
          * Whether the Enter now coming up is the same one that went down on the
          * input. Selecting a quick search with the keyboard hands focus back to the
@@ -54,8 +50,8 @@ let IAExpandableSearchBar = class IAExpandableSearchBar extends LitElement {
           <input
             id="search-input"
             type="text"
-            aria-label=${this.label}
-            placeholder=${this.placeholder}
+            aria-label=${this.label ?? msg('Search')}
+            placeholder=${this.placeholder ?? msg('Search')}
             .value=${this.searchTerm}
             @input=${this.handleInput}
             @keydown=${this.handleKeyDown}
@@ -347,7 +343,8 @@ __decorate([
     query('#search-input')
 ], IAExpandableSearchBar.prototype, "searchInput", void 0);
 IAExpandableSearchBar = __decorate([
-    customElement('ia-expandable-search-bar')
+    customElement('ia-expandable-search-bar'),
+    localized()
 ], IAExpandableSearchBar);
 export { IAExpandableSearchBar };
 //# sourceMappingURL=ia-expandable-search-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ia-expandable-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport type { QuickSearchEntry } from './models';\n\nimport clearResultsIcon from './assets/clear-results';\nimport disclosureIcon from './assets/disclosure';\nimport magnifyingGlassIcon from './assets/magnifying-glass';\n\nimport './ia-quick-search';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  InputChange: 'inputchange',\n  EnterKeyPressed: 'enterKeyPressed',\n  SearchCleared: 'searchCleared',\n  QuickSearchSelected: 'quickSearchSelected',\n};\n\n/**\n * A search bar with a quick search list that expands underneath it.\n */\n@customElement('ia-expandable-search-bar')\nexport class IAExpandableSearchBar extends LitElement {\n  /** Whether the quick search list is showing */\n  @property({ type: Boolean }) isOpen = false;\n\n  /** Whether to offer the disclosure button that opens the quick search */\n  @property({ type: Boolean }) showsDisclosure = false;\n\n  /** The current search text */\n  @property({ type: String }) searchTerm = '';\n\n  /** The suggestions to offer in the quick search list */\n  @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n  /** Placeholder text for the input */\n  @property({ type: String }) placeholder = msg('Search');\n\n  /** The accessible name for the input */\n  @property({ type: String }) label = msg('Search');\n\n  @query('#search-input') private searchInput?: HTMLInputElement | null;\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=\"container ${this.isOpen ? 'is-open' : ''} ${this.showsDisclosure\n          ? 'shows-disclosure'\n          : ''}\"\n      >\n        <div class=\"search-bar ${this.searchTerm === '' ? '' : 'is-searching'}\">\n          <div class=\"magnifier-container endcap\">${magnifyingGlassIcon}</div>\n\n          <input\n            id=\"search-input\"\n            type=\"text\"\n            aria-label=${this.label}\n            placeholder=${this.placeholder}\n            .value=${this.searchTerm}\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @keyup=${this.handleKeyUp}\n          />\n\n          <div class=\"clear-search-container endcap\">\n            <button\n              id=\"clear-search-button\"\n              type=\"button\"\n              aria-label=${msg('Clear search')}\n              @click=${this.clearSearch}\n            >\n              ${clearResultsIcon}\n            </button>\n          </div>\n\n          <div class=\"disclosure-container endcap\">\n            <button\n              id=\"disclosure-button\"\n              type=\"button\"\n              aria-label=${msg('Toggle quick search')}\n              aria-expanded=${this.isOpen}\n              @click=${this.toggleDisclosure}\n            >\n              ${disclosureIcon}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"quick-search\">\n          <ia-quick-search\n            .quickSearches=${this.quickSearches}\n            @searchTermSelected=${this.quickSearchSelected}\n          ></ia-quick-search>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Forces the field to match `searchTerm`.\n   *\n   * Lit's property binding dirty-checks against the value it last committed\n   * rather than against the DOM. A consumer that normalises `searchTerm` in\n   * its own `inputchange` handler can land back on that committed value, so\n   * the binding sees nothing to do and the field keeps whatever the listener\n   * typed. Writing it here keeps the two in step.\n   */\n  updated(changedProperties: PropertyValues): void {\n    if (!changedProperties.has('searchTerm') || !this.searchInput) return;\n\n    this.searchInput.value = this.searchTerm;\n  }\n\n  /**\n   * Tracks the input's value.\n   *\n   * Bound to `input` rather than `keyup` so that a paste from the mouse menu,\n   * autofill, a drag-and-drop and an IME composition all register, and so that\n   * arrow keys don't announce a change that never happened.\n   */\n  private handleInput(): void {\n    if (!this.searchInput) return;\n\n    this.searchTerm = this.searchInput.value;\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>(Events.InputChange, {\n        detail: { value: this.searchTerm },\n      }),\n    );\n  }\n\n  /**\n   * Whether the Enter now coming up is the same one that went down on the\n   * input. Selecting a quick search with the keyboard hands focus back to the\n   * input mid-keystroke, so its keyup lands here without a matching keydown.\n   */\n  private enterWentDownOnInput = false;\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter') this.enterWentDownOnInput = true;\n  }\n\n  private handleKeyUp(e: KeyboardEvent): void {\n    if (e.key !== 'Enter') return;\n    if (!this.enterWentDownOnInput) return;\n    this.enterWentDownOnInput = false;\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>(Events.EnterKeyPressed, {\n        detail: { value: this.searchTerm },\n      }),\n    );\n  }\n\n  private clearSearch(): void {\n    this.searchTerm = '';\n    this.searchInput?.focus();\n    this.dispatchEvent(new Event(Events.SearchCleared));\n  }\n\n  private quickSearchSelected(\n    e: CustomEvent<{ searchEntry: QuickSearchEntry }>,\n  ): void {\n    const quickSearchEntry = e.detail.searchEntry;\n    this.searchTerm = quickSearchEntry.displayText;\n\n    this.dispatchEvent(\n      new CustomEvent<{ quickSearchEntry: QuickSearchEntry }>(\n        Events.QuickSearchSelected,\n        { detail: { quickSearchEntry } },\n      ),\n    );\n\n    // Closing the list hides the entry that was just activated. Focus has to\n    // go somewhere first, or the browser drops it to the body and a keyboard\n    // user lands back at the top of the page.\n    this.enterWentDownOnInput = false;\n    this.searchInput?.focus();\n    this.isOpen = false;\n  }\n\n  private toggleDisclosure(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --search-bar-background-color--: var(\n          --ia-theme-search-bar-background-color,\n          #000\n        );\n        --search-bar-text-color--: var(--ia-theme-search-bar-text-color, #fff);\n        --search-bar-font-size--: var(--ia-theme-search-bar-font-size, 1em);\n        --search-bar-border--: var(\n          --ia-theme-search-bar-border,\n          1px solid #fff\n        );\n        --search-bar-min-width--: var(--ia-theme-search-bar-min-width, 5em);\n        --search-bar-max-expansion-height--: var(\n          --ia-theme-search-bar-max-expansion-height,\n          150px\n        );\n        --search-bar-clear-disc-color--: var(\n          --ia-theme-search-bar-clear-disc-color,\n          #fff\n        );\n        --search-bar-clear-cross-color--: var(\n          --ia-theme-search-bar-clear-cross-color,\n          #000\n        );\n\n        color: var(--search-bar-text-color--);\n      }\n\n      .container {\n        position: relative;\n      }\n\n      .search-bar {\n        display: flex;\n        justify-content: flex-start;\n      }\n\n      .endcap {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: calc(var(--search-bar-font-size--) * 2);\n        border: var(--search-bar-border--);\n        padding: 0 calc(var(--search-bar-font-size--) / 2);\n      }\n\n      .endcap svg {\n        height: var(--search-bar-font-size--);\n        width: var(--search-bar-font-size--);\n      }\n\n      .clear-disc {\n        fill: var(--search-bar-clear-disc-color--);\n      }\n\n      .clear-cross {\n        stroke: var(--search-bar-clear-cross-color--);\n      }\n\n      .clear-search-container {\n        border-left: 0;\n        border-radius: 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--) 0;\n      }\n\n      .search-bar.is-searching .clear-search-container {\n        padding: 0 calc(var(--search-bar-font-size--) / 2) 0 0;\n      }\n\n      .search-bar.is-searching .clear-search-container button {\n        display: block;\n      }\n\n      .clear-search-container button {\n        display: none;\n      }\n\n      .magnifier-container {\n        border-radius: var(--search-bar-font-size--) 0 0\n          var(--search-bar-font-size--);\n        border-right: 0;\n      }\n\n      .container.is-open .magnifier-container {\n        border-radius: var(--search-bar-font-size--) 0 0 0;\n      }\n\n      .container.shows-disclosure .clear-search-container {\n        border-radius: 0;\n        border-right: 0;\n      }\n\n      .disclosure-container {\n        border-radius: 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--) 0;\n        display: none;\n      }\n\n      .container.shows-disclosure .disclosure-container {\n        display: flex;\n      }\n\n      .container.is-open .disclosure-container {\n        border-radius: 0 var(--search-bar-font-size--) 0 0;\n      }\n\n      .disclosure-container button {\n        border: 0;\n        background: none;\n      }\n\n      #search-input {\n        border-top: var(--search-bar-border--);\n        border-bottom: var(--search-bar-border--);\n        border-left: 0;\n        border-right: 0;\n        border-radius: 0;\n        background-color: var(--search-bar-background-color--);\n        color: var(--search-bar-text-color--);\n        padding: 0;\n        margin: 0;\n        font-size: var(--search-bar-font-size--);\n        flex: 1 1 auto;\n        min-width: var(--search-bar-min-width--);\n      }\n\n      #search-input:focus {\n        outline: none;\n      }\n\n      .quick-search {\n        border-radius: 0 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--);\n        display: none;\n        position: absolute;\n        left: 0;\n        right: 0;\n        background-color: var(--search-bar-background-color--);\n        z-index: 1;\n        max-height: var(--search-bar-max-expansion-height--);\n        overflow-y: auto;\n        scrollbar-width: none;\n        padding: 0 calc(var(--search-bar-font-size--) / 2);\n      }\n\n      .quick-search::-webkit-scrollbar {\n        display: none;\n      }\n\n      .container.is-open.shows-disclosure .quick-search {\n        border: var(--search-bar-border--);\n        border-top: 0;\n        display: block;\n      }\n\n      button {\n        background: none;\n        border: none;\n        margin: 0;\n        padding: 0;\n        color: inherit;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ia-expandable-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport type { QuickSearchEntry } from './models';\n\nimport clearResultsIcon from './assets/clear-results';\nimport disclosureIcon from './assets/disclosure';\nimport magnifyingGlassIcon from './assets/magnifying-glass';\n\nimport './ia-quick-search';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  InputChange: 'inputchange',\n  EnterKeyPressed: 'enterKeyPressed',\n  SearchCleared: 'searchCleared',\n  QuickSearchSelected: 'quickSearchSelected',\n};\n\n/**\n * A search bar with a quick search list that expands underneath it.\n */\n@customElement('ia-expandable-search-bar')\n@localized()\nexport class IAExpandableSearchBar extends LitElement {\n  /** Whether the quick search list is showing */\n  @property({ type: Boolean }) isOpen = false;\n\n  /** Whether to offer the disclosure button that opens the quick search */\n  @property({ type: Boolean }) showsDisclosure = false;\n\n  /** The current search text */\n  @property({ type: String }) searchTerm = '';\n\n  /** The suggestions to offer in the quick search list */\n  @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n  /** Placeholder text for the input. Defaults to \"Search\". */\n  @property({ type: String }) placeholder?: string;\n\n  /** The accessible name for the input. Defaults to \"Search\". */\n  @property({ type: String }) label?: string;\n\n  @query('#search-input') private searchInput?: HTMLInputElement | null;\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=\"container ${this.isOpen ? 'is-open' : ''} ${this.showsDisclosure\n          ? 'shows-disclosure'\n          : ''}\"\n      >\n        <div class=\"search-bar ${this.searchTerm === '' ? '' : 'is-searching'}\">\n          <div class=\"magnifier-container endcap\">${magnifyingGlassIcon}</div>\n\n          <input\n            id=\"search-input\"\n            type=\"text\"\n            aria-label=${this.label ?? msg('Search')}\n            placeholder=${this.placeholder ?? msg('Search')}\n            .value=${this.searchTerm}\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @keyup=${this.handleKeyUp}\n          />\n\n          <div class=\"clear-search-container endcap\">\n            <button\n              id=\"clear-search-button\"\n              type=\"button\"\n              aria-label=${msg('Clear search')}\n              @click=${this.clearSearch}\n            >\n              ${clearResultsIcon}\n            </button>\n          </div>\n\n          <div class=\"disclosure-container endcap\">\n            <button\n              id=\"disclosure-button\"\n              type=\"button\"\n              aria-label=${msg('Toggle quick search')}\n              aria-expanded=${this.isOpen}\n              @click=${this.toggleDisclosure}\n            >\n              ${disclosureIcon}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"quick-search\">\n          <ia-quick-search\n            .quickSearches=${this.quickSearches}\n            @searchTermSelected=${this.quickSearchSelected}\n          ></ia-quick-search>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Forces the field to match `searchTerm`.\n   *\n   * Lit's property binding dirty-checks against the value it last committed\n   * rather than against the DOM. A consumer that normalises `searchTerm` in\n   * its own `inputchange` handler can land back on that committed value, so\n   * the binding sees nothing to do and the field keeps whatever the listener\n   * typed. Writing it here keeps the two in step.\n   */\n  updated(changedProperties: PropertyValues): void {\n    if (!changedProperties.has('searchTerm') || !this.searchInput) return;\n\n    this.searchInput.value = this.searchTerm;\n  }\n\n  /**\n   * Tracks the input's value.\n   *\n   * Bound to `input` rather than `keyup` so that a paste from the mouse menu,\n   * autofill, a drag-and-drop and an IME composition all register, and so that\n   * arrow keys don't announce a change that never happened.\n   */\n  private handleInput(): void {\n    if (!this.searchInput) return;\n\n    this.searchTerm = this.searchInput.value;\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>(Events.InputChange, {\n        detail: { value: this.searchTerm },\n      }),\n    );\n  }\n\n  /**\n   * Whether the Enter now coming up is the same one that went down on the\n   * input. Selecting a quick search with the keyboard hands focus back to the\n   * input mid-keystroke, so its keyup lands here without a matching keydown.\n   */\n  private enterWentDownOnInput = false;\n\n  private handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter') this.enterWentDownOnInput = true;\n  }\n\n  private handleKeyUp(e: KeyboardEvent): void {\n    if (e.key !== 'Enter') return;\n    if (!this.enterWentDownOnInput) return;\n    this.enterWentDownOnInput = false;\n\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>(Events.EnterKeyPressed, {\n        detail: { value: this.searchTerm },\n      }),\n    );\n  }\n\n  private clearSearch(): void {\n    this.searchTerm = '';\n    this.searchInput?.focus();\n    this.dispatchEvent(new Event(Events.SearchCleared));\n  }\n\n  private quickSearchSelected(\n    e: CustomEvent<{ searchEntry: QuickSearchEntry }>,\n  ): void {\n    const quickSearchEntry = e.detail.searchEntry;\n    this.searchTerm = quickSearchEntry.displayText;\n\n    this.dispatchEvent(\n      new CustomEvent<{ quickSearchEntry: QuickSearchEntry }>(\n        Events.QuickSearchSelected,\n        { detail: { quickSearchEntry } },\n      ),\n    );\n\n    // Closing the list hides the entry that was just activated. Focus has to\n    // go somewhere first, or the browser drops it to the body and a keyboard\n    // user lands back at the top of the page.\n    this.enterWentDownOnInput = false;\n    this.searchInput?.focus();\n    this.isOpen = false;\n  }\n\n  private toggleDisclosure(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --search-bar-background-color--: var(\n          --ia-theme-search-bar-background-color,\n          #000\n        );\n        --search-bar-text-color--: var(--ia-theme-search-bar-text-color, #fff);\n        --search-bar-font-size--: var(--ia-theme-search-bar-font-size, 1em);\n        --search-bar-border--: var(\n          --ia-theme-search-bar-border,\n          1px solid #fff\n        );\n        --search-bar-min-width--: var(--ia-theme-search-bar-min-width, 5em);\n        --search-bar-max-expansion-height--: var(\n          --ia-theme-search-bar-max-expansion-height,\n          150px\n        );\n        --search-bar-clear-disc-color--: var(\n          --ia-theme-search-bar-clear-disc-color,\n          #fff\n        );\n        --search-bar-clear-cross-color--: var(\n          --ia-theme-search-bar-clear-cross-color,\n          #000\n        );\n\n        color: var(--search-bar-text-color--);\n      }\n\n      .container {\n        position: relative;\n      }\n\n      .search-bar {\n        display: flex;\n        justify-content: flex-start;\n      }\n\n      .endcap {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: calc(var(--search-bar-font-size--) * 2);\n        border: var(--search-bar-border--);\n        padding: 0 calc(var(--search-bar-font-size--) / 2);\n      }\n\n      .endcap svg {\n        height: var(--search-bar-font-size--);\n        width: var(--search-bar-font-size--);\n      }\n\n      .clear-disc {\n        fill: var(--search-bar-clear-disc-color--);\n      }\n\n      .clear-cross {\n        stroke: var(--search-bar-clear-cross-color--);\n      }\n\n      .clear-search-container {\n        border-left: 0;\n        border-radius: 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--) 0;\n      }\n\n      .search-bar.is-searching .clear-search-container {\n        padding: 0 calc(var(--search-bar-font-size--) / 2) 0 0;\n      }\n\n      .search-bar.is-searching .clear-search-container button {\n        display: block;\n      }\n\n      .clear-search-container button {\n        display: none;\n      }\n\n      .magnifier-container {\n        border-radius: var(--search-bar-font-size--) 0 0\n          var(--search-bar-font-size--);\n        border-right: 0;\n      }\n\n      .container.is-open .magnifier-container {\n        border-radius: var(--search-bar-font-size--) 0 0 0;\n      }\n\n      .container.shows-disclosure .clear-search-container {\n        border-radius: 0;\n        border-right: 0;\n      }\n\n      .disclosure-container {\n        border-radius: 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--) 0;\n        display: none;\n      }\n\n      .container.shows-disclosure .disclosure-container {\n        display: flex;\n      }\n\n      .container.is-open .disclosure-container {\n        border-radius: 0 var(--search-bar-font-size--) 0 0;\n      }\n\n      .disclosure-container button {\n        border: 0;\n        background: none;\n      }\n\n      #search-input {\n        border-top: var(--search-bar-border--);\n        border-bottom: var(--search-bar-border--);\n        border-left: 0;\n        border-right: 0;\n        border-radius: 0;\n        background-color: var(--search-bar-background-color--);\n        color: var(--search-bar-text-color--);\n        padding: 0;\n        margin: 0;\n        font-size: var(--search-bar-font-size--);\n        flex: 1 1 auto;\n        min-width: var(--search-bar-min-width--);\n      }\n\n      #search-input:focus {\n        outline: none;\n      }\n\n      .quick-search {\n        border-radius: 0 0 var(--search-bar-font-size--)\n          var(--search-bar-font-size--);\n        display: none;\n        position: absolute;\n        left: 0;\n        right: 0;\n        background-color: var(--search-bar-background-color--);\n        z-index: 1;\n        max-height: var(--search-bar-max-expansion-height--);\n        overflow-y: auto;\n        scrollbar-width: none;\n        padding: 0 calc(var(--search-bar-font-size--) / 2);\n      }\n\n      .quick-search::-webkit-scrollbar {\n        display: none;\n      }\n\n      .container.is-open.shows-disclosure .quick-search {\n        border: var(--search-bar-border--);\n        border-top: 0;\n        display: block;\n      }\n\n      button {\n        background: none;\n        border: none;\n        margin: 0;\n        padding: 0;\n        color: inherit;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1 +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;AAUb,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;IAenD;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAyBnB,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;IASvB,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,CAyIlC;CACF"}
+{"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;AAUb,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAY,MAAM,UAAU,CAAC;AAE3E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAEa,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;IAenD;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAyBnB,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;IASvB,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,CAyIlC;CACF"}

package/dist/src/elements/ia-image-viewer/ia-image-viewer.js

@@ -4,7 +4,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import themeStyles from '../../themes/theme-styles.js';
 import { prefersReducedMotion } from '../../util/prefers-reduced-motion.js';
 import { ImageViewerGestures } from './image-viewer-gestures.js';
@@ -521,7 +521,8 @@ __decorate([
     state()
 ], IAImageViewer.prototype, "wrapEdge", void 0);
 IAImageViewer = __decorate([
-    customElement('ia-image-viewer')
+    customElement('ia-image-viewer'),
+    localized()
 ], IAImageViewer);
 export { IAImageViewer };
 //# sourceMappingURL=ia-image-viewer.js.map