dap-design-system 0.62.4 → 0.63.0

package/dist/components/select/select.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject, idInScope } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/**\n * `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n *\n * @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n *\n * @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n *\n * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n *\n * @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n */\nexport default class DapDSSelect extends GenericFormElement {\n  static tagName = 'dap-ds-select'\n\n  static dependencies = {\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n    'dap-ds-option-list': DapDSOptionList,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-tray': DapDSTray,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /**\n   * @ignore\n   */\n  @query('button') triggerButton!: HTMLButtonElement\n\n  /**\n   * @ignore\n   */\n  @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n  /** The popup placement of the select\n   * @type {'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** Whether the select dropdown is opened.*/\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** The placeholder of the select. */\n  @property() placeholder: string | null\n\n  /** The sync size of the select dropdown */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** Whether the select is in mobile mode. */\n  @property({ type: Boolean }) isMobile?: boolean = false\n\n  /** Whether to render a native HTML select element for mobile-friendly option selection. */\n  @property({ type: Boolean }) native?: boolean = false\n\n  /** The loading state of the select. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The max heigth of the select dropdown. */\n  @property({ type: Number }) maxHeight?: number\n\n  /** Whether the select dropdown indicator is animated or not */\n  @property({ type: Boolean }) noAnimation?: boolean = false\n\n  /** The floating strategy of the select dropdown\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /**\n   * @ignore\n   */\n  @state() selectedItem: any\n\n  static readonly styles = unsafeCSS(styles)\n\n  private languageChangeHandler = () => {\n    // Force re-render when language changes to update selectedDisplayText\n    this.requestUpdate()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Listen for language changes to update the displayed text\n    i18next.on('languageChanged', this.languageChangeHandler)\n\n    // Ensure native browser validation UI is suppressed by default,\n    // similar to other form components (inputs, combobox, etc.)\n    this.addEventListener('invalid', this.handleInvalid)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n\n    this.removeEventListener('invalid', this.handleInvalid)\n  }\n\n  /**\n   * Lifecycle method to handle property changes\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Handle when value is set to undefined or null externally\n    if (changedProperties.has('value')) {\n      const newValue = this.value\n      if (newValue === undefined || newValue === null) {\n        if (this.selectedItem !== null) {\n          this.selectedItem = null\n          this.setValidity()\n        }\n      }\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.readonly || this.disabled) {\n      return\n    }\n\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab' || event.key === 'Shift') {\n      return\n    }\n\n    if (this.readonly) {\n      return\n    }\n\n    event.preventDefault()\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      return this.opened ? this.hideDropDown() : this.showDropDown()\n    }\n\n    if (event.key === 'Escape') {\n      this.hideDropDown()\n      return this.focus()\n    }\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight'\n    ) {\n      if (!this.opened) {\n        return this.showDropDown()\n      }\n\n      return\n    }\n\n    this.emit('dds-keydown', event)\n\n    // typing\n    this.showDropDown(event.key)\n  }\n\n  private readonly handleListKeyDown = (event: CustomEvent) => {\n    if (event.detail?.key === 'Tab') {\n      // Return focus to the trigger synchronously so the native Tab continues\n      // from there and leaves the select instead of cycling inside the list.\n      this.hideDropDown({ skipFocus: true })\n      this.focus()\n      return\n    }\n\n    if (event.detail?.key === 'Escape') {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.selectedItem = this.defaultValue\n  }\n\n  async showDropDown(key?: string) {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.captureFocus(key)\n\n    // Force update to ensure aria-activedescendant is set correctly\n    await this.updateComplete\n\n    this.emit('dds-opened')\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.removeFocus()\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n\n    this.emit('dds-closed')\n  }\n\n  get focusElement() {\n    return this.triggerButton\n  }\n\n  /**\n   * Get the active descendant element for aria-activedescendant\n   * Returns the currently focused option when dropdown is open, otherwise null\n   */\n  getActiveDescendant() {\n    if (!this.opened) {\n      return null\n    }\n\n    const activeOption = this.optionList?.getActiveOption()\n    return activeOption\n  }\n\n  /**\n   * Get the aria-describedby value, combining description and feedback IDs\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n    if (this.description) {\n      ids.push('description')\n    }\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  // custom validation\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing:\n          this.required &&\n          (!this.selectedItem ||\n            this.selectedItem.value === '' ||\n            this.value === '' ||\n            this.value === undefined ||\n            this.value === null),\n      })\n    }\n  }\n\n  get validationMessage(): string {\n    return t('form.validationMessage.select')\n  }\n\n  /** Get the current display text for the selected item, dynamically fetching from the option */\n  get selectedDisplayText(): string | null {\n    if (!this.selectedItem) return null\n\n    // Try to get the current text from the actual option element (reactive to language changes)\n    if (this.optionList) {\n      const currentOption = Array.from(\n        this.optionList.querySelectorAll('dap-ds-option-item'),\n      ).find((opt: any) => opt.value === this.selectedItem.value)\n\n      if (currentOption) {\n        return (currentOption as any).optionText\n      }\n    }\n\n    // Fallback to cached text if option not found\n    return this.selectedItem.text\n  }\n\n  checkValidity() {\n    const hasValue =\n      !!this.selectedItem &&\n      this.selectedItem.value !== '' &&\n      this.value !== '' &&\n      this.value !== undefined &&\n      this.value !== null\n\n    return this.required ? hasValue : true\n  }\n\n  reportValidity() {\n    return this.required ? this.checkValidity() : true\n  }\n\n  setValidity() {\n    const isValid = this.checkValidity()\n\n    if (!isValid) {\n      this.internals.setValidity(\n        {\n          valueMissing:\n            this.required &&\n            (!this.selectedItem ||\n              this.selectedItem.value === '' ||\n              this.value === '' ||\n              this.value === undefined ||\n              this.value === null),\n        },\n        this.validationMessage,\n        this.triggerButton,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    this.focus()\n  }\n\n  private readonly handleSelectedChange = (event: CustomEvent) => {\n    const val = Object.keys(event.detail).length ? event.detail : null\n    const newValue = val?.value\n    // The option-list echoes dds-option-change whenever its value is synced from\n    // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n    // as a user change. A genuine selection changes the value here; a programmatic\n    // one has already set it before the echo arrives. Emit only on a real change.\n    const changed = newValue !== this.value\n    this.selectedItem = val\n    this.hideDropDown()\n    this.value = newValue\n    if (changed) {\n      this.emit('dds-change', this.selectedItem)\n    }\n\n    this.setValidity()\n  }\n\n  private readonly handleOptionDeselect = () => {\n    this.selectedItem = null\n    this.value = undefined\n    this.emit('dds-change', null)\n\n    this.setValidity()\n  }\n\n  private readonly handleNativeChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement\n    const value = select.value\n\n    // Find matching option-item to get full item data\n    const optionItem = this.querySelector(\n      `dap-ds-option-item[value=\"${value}\"]`,\n    ) as DapDSOptionItem | null\n\n    this.value = value\n    this.selectedItem = optionItem\n      ? { value, text: optionItem.optionText }\n      : { value, text: value }\n\n    this.emit('dds-change', this.selectedItem)\n    this.setValidity()\n  }\n\n  private renderNativeOption(item: DapDSOptionItem) {\n    return html`\n      <option\n        value=${item.value || ''}\n        ?disabled=${item.disabled}\n        ?selected=${item.value === this.value}>\n        ${item.optionText}\n      </option>\n    `\n  }\n\n  private renderNativeOptgroup(group: DapDSOptionGroup) {\n    const options = Array.from(\n      group.querySelectorAll('dap-ds-option-item'),\n    ) as DapDSOptionItem[]\n    return html`\n      <optgroup label=${group.label || ''} ?disabled=${group.disabled}>\n        ${options.map(opt => this.renderNativeOption(opt))}\n      </optgroup>\n    `\n  }\n\n  private renderNativeOptions() {\n    const children = Array.from(this.children)\n    return children.map(child => {\n      if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n        return this.renderNativeOptgroup(child as DapDSOptionGroup)\n      } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n        return this.renderNativeOption(child as DapDSOptionItem)\n      }\n      return ''\n    })\n  }\n\n  private renderNativeSelect() {\n    return html`\n      <div class=\"select-wrapper--native\">\n        <select\n          class=\"${clsx('select', `select--${this.effectiveSize}`, {\n            'select--disabled': this.disabled,\n            'select--readonly': this.readonly,\n            'select--success': this.status === 'success',\n            'select--error': this.status === 'error',\n            'select--loading': this.loading,\n          })}\"\n          part=\"trigger\"\n          aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n          aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}>\n          ${this.placeholder\n            ? html`<option value=\"\" disabled ?selected=${!this.value}>\n                ${this.placeholder}\n              </option>`\n            : ''}\n          ${this.renderNativeOptions()}\n        </select>\n        <div class=\"icon\" part=\"indicator-icon\">\n          ${this.loading\n            ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n            : html`<slot name=\"indicator-icon\"\n                ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n              ></slot>`}\n        </div>\n      </div>\n    `\n  }\n\n  renderTriggerElement() {\n    return html` <button\n      slot=\"trigger\"\n      part=\"trigger\"\n      role=\"combobox\"\n      class=\"${clsx('select', `select--${this.effectiveSize}`, {\n        'select--disabled': this.disabled,\n        'select--readonly': this.readonly,\n        'select--opened': this.opened,\n        'select--loading': this.loading,\n        'select--success': this.status === 'success',\n        'select--error': this.status === 'error',\n        'select--no-animation': this.noAnimation,\n        'select--optional': this.optional,\n      })}\"\n      aria-expanded=${this.readonly || this.disabled\n        ? 'false'\n        : this.opened\n          ? 'true'\n          : 'false'}\n      aria-haspopup=${ifDefined(\n        this.readonly || this.disabled ? undefined : 'listbox',\n      )}\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      aria-label=${ifDefined(\n        this.label\n          ? undefined\n          : this.ariaLabel ||\n              this.selectedDisplayText ||\n              this.placeholder ||\n              undefined,\n      )}\n      aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n      aria-disabled=${this.disabled}\n      aria-controls=\"option-list\"\n      aria-activedescendant=${ifDefined(\n        // Options render in option-list's shadow root, out of this scope; a\n        // cross-scope IDREF is ignored by browsers, so only same-scope ids are set\n        idInScope(this.shadowRoot, this.getActiveDescendant()),\n      )}\n      ?required=${this.required}\n      ?readonly=${this.readonly}\n      ?autofocus=${this.autofocus}\n      ?disabled=${this.disabled}\n      tabindex=${this.readonly || this.disabled ? -1 : 0}\n      @blur=${this.handleBlur}\n      @focus=${this.handleFocus}\n      @keydown=${this.handleKeyDown}\n      @click=${this.handleClick}>\n      <span class=\"text\">${this.selectedDisplayText || this.placeholder}</span>\n      <div\n        class=\"${clsx('icon', {\n          'icon--opened': this.opened,\n          'icon--no-animation': this.noAnimation,\n        })}\"\n        part=\"indicator-icon\">\n        ${this.loading\n          ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n          : html`<slot name=\"indicator-icon\"\n              ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n            ></slot>`}\n      </div>\n    </button>`\n  }\n\n  renderOptionList() {\n    return html` <dap-ds-option-list\n      class=\"option-list\"\n      part=\"option-list\"\n      exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n      id=\"option-list\"\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      searchMode=\"typehead\"\n      size=${ifDefined(this.effectiveSize)}\n      value=${this.value}\n      disableDelaySet\n      @dds-option-change=${this.handleSelectedChange}\n      @dds-keydown=${this.handleListKeyDown}\n      @dds-option-deselect=${this.handleOptionDeselect}>\n      <slot></slot>\n    </dap-ds-option-list>`\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          .size=${this.effectiveSize}\n          .required=${this.required}\n          .requiredLabel=${this.requiredLabel}\n          .optional=${this.optional}\n          .optionalLabel=${this.optionalLabel}\n          .subtle=${this.subtle}\n          .disabled=${this.disabled}\n          class=${clsx('label')}\n          .noMargin=${!!this.description}\n          for=\"input\"\n          .hideLabel=${this.hideLabel}\n          label=${ifDefined(this.label)}>\n        </dap-ds-form-label>`}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            slot=\"trigger\"\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n            aria-label=${this.tooltipAriaLabel}\n            class=\"input-group__toggle-button\">\n            <dap-ds-icon\n              name=\"information-line\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        ${this.native\n          ? this.renderNativeSelect()\n          : !this.isMobile\n            ? html`<dap-ds-popup\n                floatingStrategy=${ifDefined(this.floatingStrategy)}\n                part=\"base\"\n                exportparts=\"popup:popup-base\"\n                class=\"select-popup\"\n                ?opened=${this.opened}\n                ?hasArrow=${false}\n                overflow\n                placement=${this.placement}\n                maxHeight=${ifDefined(this.maxHeight)}\n                ?sync=${this.sync}\n                ?disableViewportAutoClose=${this.disableViewportAutoClose}\n                @dds-close=${this.handlePopupAutoClose}\n                size=${ifDefined(this.effectiveSize) as 'lg' | 'sm' | 'xs'}>\n                ${this.renderTriggerElement()} ${this.renderOptionList()}\n              </dap-ds-popup>`\n            : html`\n                ${this.renderTriggerElement()}\n                <dap-ds-tray\n                  part=\"mobile-tray\"\n                  exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n                  ?open=${this.opened}\n                  closeButton=\"false\"\n                  header=\"false\"\n                  >${this.renderOptionList()}</dap-ds-tray\n                >\n              `}\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\"\n          .subtle=${this.subtle}>\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["_DapDSSelect","GenericFormElement","event","__async","_a","_b","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","idInScope","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}
+{"version":3,"file":"select.component.js","sources":["../../../src/components/select/select.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  CommonFormElementSize,\n  FloatingStrategy,\n  PopupPlacement,\n} from '@/common/types'\nimport { getValidityStateObject, idInScope } from '@/common/utils'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\nimport { i18next, t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsArrowDownSLine from '../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport DapDSOptionGroup from '../option-group/option-group.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport {\n  DapDSOptionData,\n  DapDSOptionRenderer,\n  optionDataOf,\n  optionElementsFor,\n  optionItemsConverter,\n  toOptionItems,\n} from '../option-list/option-data'\nimport DapDSOptionList from '../option-list/option-list.component'\nimport DapDSPopup from '../popup/popup.component'\nimport DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTray from '../tray/tray.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './select.scss?inline'\n\n/**\n * Whether the browser supports the customizable select (`appearance: base-select`).\n * Guarded for SSR / test environments where `CSS` may not exist.\n */\nconst supportsBaseSelect = (): boolean =>\n  typeof CSS !== 'undefined' &&\n  typeof CSS.supports === 'function' &&\n  CSS.supports('appearance', 'base-select')\n\n/**\n * `dap-ds-select`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-select\n * @title - Select\n *\n * @event {{ value: string }} dds-change - Fired when the select value changes.\n * @event {{ void }} dds-blur - Emitted when the select loses focus.\n * @event {{ void }} dds-focus - Emitted when the select gains focus.\n * @event {{ void }} dds-opened - Emitted when the select dropdown is opened.\n * @event {{ void }} dds-closed - Emitted when the select dropdown is closed.\n *\n * @property {string} value - The value of the select.\n * @property {string} label - The label of the select.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the select.\n * @property {string} tooltip - The tooltip of the select.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.\n * @property {boolean} disabled - Whether the select is disabled.\n * @property {boolean} required - Whether the select is required.\n * @property {boolean} readonly - Whether the select is readonly.\n * @property {boolean} autofocus - Whether the select is autofocus.\n * @property {string} feedback - The feedback of the select.\n * @property {negative | positive | warning} feedbackType - The feedback type of the select. Can be `negative`, `positive`, or `warning`.\n * @property {string} status - The status of the select. Can be `success` or `error`.\n * @property {boolean} optional - The optional state of the select.\n * @property {string} optionalLabel - The optional label of the select.\n * @property {string} requiredLabel - The required indicator of the select. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @csspart base - The main select container.\n * @csspart trigger - The trigger button of the select.\n * @csspart label - The label of the select.\n * @csspart description - The description of the select.\n * @csspart feedback - The feedback of the select.\n * @csspart tooltip - The tooltip of the select.\n * @csspart popup-base - The base of the popup.\n * @csspart option-list - The option list of the select.\n * @csspart option-item - The option item of the select.\n * @csspart option-item-base - The base of the option item.\n * @csspart option-item-label - The label of the option item.\n * @csspart option-item-prefix - The prefix of the option item.\n * @csspart option-item-suffix - The suffix of the option item.\n * @csspart indicator-icon - The indicator icon of the select.\n * @csspart mobile-tray - The mobile tray of the select.\n * @csspart mobile-content - The mobile content of the select.\n * @csspart mobile-body - The mobile body of the select.\n * @csspart mobile-header - The mobile header of the select.\n * @csspart mobile-footer - The mobile footer of the select.\n * @csspart native-button - The button of the customizable native select (experimental `customizable` mode).\n * @csspart native-option - The options of the customizable native select (experimental `customizable` mode).\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-select-min-height - Minimum height of the select component (default: var(--dds-spacing-1000))\n * @cssproperty --dds-select-padding - Padding of the select component (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-column-gap - Column gap of the select component (default: var(--dds-spacing-100))\n * @cssproperty --dds-select-border-color - Border color of the select component (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-select-border-radius - Border radius of the select component (default: var(--dds-radius-base))\n * @cssproperty --dds-select-bg-color - Background color of the select component (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-text-color - Text color of the select component (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-select-icon-right - Right position of the icon (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-icon-color - Color of the icon (default: var(--dds-icon-neutral-subtle))\n * @cssproperty --dds-select-text-margin-right - Right margin of the text (default: var(--dds-spacing-600))\n * @cssproperty --dds-select-disabled-border-color - Border color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-bg-color - Background color when disabled (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-select-disabled-text-color - Text color when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-select-error-border-color - Border color in error state (default: var(--dds-border-negative-base))\n * @cssproperty --dds-select-success-border-color - Border color in success state (default: var(--dds-border-positive-base))\n * @cssproperty --dds-select-xs-min-height - Minimum height for extra small size (default: var(--dds-spacing-800))\n * @cssproperty --dds-select-xs-padding - Padding for extra small size (default: var(--dds-spacing-200))\n * @cssproperty --dds-select-xs-font-size - Font size for extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-select-lg-min-height - Minimum height for large size (default: var(--dds-spacing-1200))\n * @cssproperty --dds-select-lg-padding - Padding for large size (default: var(--dds-spacing-400))\n * @cssproperty --dds-select-lg-font-size - Font size for large size (default: var(--dds-font-lg))\n * @cssproperty --dds-select-lg-icon-right - Right position of the icon for large size (default: var(--dds-spacing-300))\n * @cssproperty --dds-select-lg-icon-color - Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-select-popup-bg-color - Background color of the popup (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-select-icon-opened-transform - Transform of the icon when the select is opened (default: rotate(90deg))\n * @cssproperty --dds-select-picker-max-height - Max height of the customizable select picker (default: 20rem)\n *\n * @slot - The option list of the select.\n * @slot indicator-icon - The indicator icon of the select.\n */\nexport default class DapDSSelect extends GenericFormElement {\n  static tagName = 'dap-ds-select'\n\n  static dependencies = {\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n    'dap-ds-icon-arrow-down-s-line': ArrowsArrowDownSLine,\n    'dap-ds-option-list': DapDSOptionList,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-tooltip': DapDSTooltip,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-popup': DapDSPopup,\n    'dap-ds-tray': DapDSTray,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /**\n   * @ignore\n   */\n  @query('button') triggerButton!: HTMLButtonElement\n\n  /**\n   * @ignore\n   */\n  @query('dap-ds-option-list') optionList!: DapDSOptionList\n\n  /** The popup placement of the select\n   * @type {'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom-start'\n\n  /** Whether the select dropdown is opened.*/\n  @property({ type: Boolean, reflect: true }) opened? = false\n\n  /** The placeholder of the select. */\n  @property() placeholder: string | null\n\n  /** The sync size of the select dropdown */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** Whether the select is in mobile mode. */\n  @property({ type: Boolean }) isMobile?: boolean = false\n\n  /** Whether to render a native HTML select element for mobile-friendly option selection. */\n  @property({ type: Boolean }) native?: boolean = false\n\n  /**\n   * Experimental: render a native `<select>` that opts into the customizable select\n   * (`appearance: base-select`) in supporting browsers, so the dropdown picker is styled\n   * like the design system while keeping native keyboard, typeahead and top-layer behavior.\n   * Browsers without support fall back to the classic native select (same as `native`).\n   */\n  @property({ type: Boolean, reflect: true }) customizable?: boolean = false\n\n  /** The loading state of the select. */\n  @property({ type: Boolean }) loading?: boolean = false\n\n  /** The max heigth of the select dropdown. */\n  @property({ type: Number }) maxHeight?: number\n\n  /** Whether the select dropdown indicator is animated or not */\n  @property({ type: Boolean }) noAnimation?: boolean = false\n\n  /** The floating strategy of the select dropdown\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true }) floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  /**\n   * The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.\n   * @type {DapDSOptionData[]}\n   */\n  @property({ converter: optionItemsConverter })\n  get items(): DapDSOptionData[] | undefined {\n    return this._items\n  }\n\n  set items(value: DapDSOptionData[] | string | undefined) {\n    this._items = toOptionItems(value)\n  }\n\n  private _items?: DapDSOptionData[]\n\n  /**\n   * Renders the content of each option given in `items` in the dropdown list. Defaults to the item's `label`. The native and customizable modes show the label.\n   * @type {DapDSOptionRenderer}\n   */\n  @property({ attribute: false }) renderOption?: DapDSOptionRenderer\n\n  /**\n   * @ignore\n   */\n  @state() selectedItem: any\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Feature detection result, resolved once per connection so renders stay consistent */\n  private baseSelectSupported = false\n\n  private languageChangeHandler = () => {\n    // Force re-render when language changes to update selectedDisplayText\n    this.requestUpdate()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.baseSelectSupported = supportsBaseSelect()\n\n    // Listen for language changes to update the displayed text\n    i18next.on('languageChanged', this.languageChangeHandler)\n\n    // Ensure native browser validation UI is suppressed by default,\n    // similar to other form components (inputs, combobox, etc.)\n    this.addEventListener('invalid', this.handleInvalid)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up language change listener\n    i18next.off('languageChanged', this.languageChangeHandler)\n\n    this.removeEventListener('invalid', this.handleInvalid)\n  }\n\n  /** The select's options, in the order (and so with the index) the list uses. */\n  private getOptions(): DapDSOptionItem[] {\n    if (this.items) {\n      return optionElementsFor<DapDSOptionItem>(this.items)\n    }\n    // `typeof` guard: this runs during SSR (willUpdate / render), and the\n    // @lit-labs/ssr element shim has no querySelectorAll.\n    if (typeof this.querySelectorAll !== 'function') {\n      return []\n    }\n    return (\n      this.optionList?.getAllOptions() ?? [\n        ...this.querySelectorAll<DapDSOptionItem>('dap-ds-option-item'),\n      ]\n    )\n  }\n\n  /** The selected item for `value`, shaped like the list's option-change detail. */\n  private findSelectedItem(value: unknown) {\n    if (value === undefined || value === null) {\n      return null\n    }\n    const options = this.getOptions()\n    const index = options.findIndex(option => option.value === value)\n    if (index < 0) {\n      return null\n    }\n    const opt = options[index]\n    const item = optionDataOf(opt)\n    return {\n      opt,\n      value: opt.value,\n      text: opt.optionText,\n      index,\n      ...(item ? { item } : {}),\n    }\n  }\n\n  /**\n   * Derive `selectedItem` from `value` and the options, so the trigger text\n   * and validity never depend on the list echoing the value back. An unknown\n   * value leaves it alone; the list answers that one (revert).\n   */\n  private syncSelectedItem() {\n    const item = this.findSelectedItem(this.value)\n    if (\n      item &&\n      (item.opt !== this.selectedItem?.opt ||\n        item.value !== this.selectedItem?.value)\n    ) {\n      this.selectedItem = item\n    }\n  }\n\n  private readonly handleSlotChange = () => {\n    this.syncSelectedItem()\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('value') || changedProperties.has('items')) {\n      this.syncSelectedItem()\n    }\n  }\n\n  /**\n   * Lifecycle method to handle property changes\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Handle when value is set to undefined or null externally\n    if (changedProperties.has('value')) {\n      const newValue = this.value\n      if (newValue === undefined || newValue === null) {\n        if (this.selectedItem !== null) {\n          this.selectedItem = null\n          this.setValidity()\n        }\n      }\n    }\n  }\n\n  private readonly handleClick = () => {\n    if (this.readonly || this.disabled) {\n      return\n    }\n\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private readonly handleKeyDown = async (event: KeyboardEvent) => {\n    if (event.key === 'Tab' || event.key === 'Shift') {\n      return\n    }\n\n    if (this.readonly) {\n      return\n    }\n\n    event.preventDefault()\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      return this.opened ? this.hideDropDown() : this.showDropDown()\n    }\n\n    if (event.key === 'Escape') {\n      this.hideDropDown()\n      return this.focus()\n    }\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight'\n    ) {\n      if (!this.opened) {\n        return this.showDropDown()\n      }\n\n      return\n    }\n\n    this.emit('dds-keydown', event)\n\n    // typing\n    this.showDropDown(event.key)\n  }\n\n  private readonly handleListKeyDown = (event: CustomEvent) => {\n    if (event.detail?.key === 'Tab') {\n      // Return focus to the trigger synchronously so the native Tab continues\n      // from there and leaves the select instead of cycling inside the list.\n      this.hideDropDown({ skipFocus: true })\n      this.focus()\n      return\n    }\n\n    if (event.detail?.key === 'Escape') {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  private readonly handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  private readonly handleFocus = () => {\n    this.emit('dds-focus')\n  }\n\n  private readonly handleBlur = () => {\n    this.emit('dds-blur')\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.selectedItem = this.findSelectedItem(this.defaultValue)\n  }\n\n  async showDropDown(key?: string) {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.captureFocus(key)\n\n    // Force update to ensure aria-activedescendant is set correctly\n    await this.updateComplete\n\n    this.emit('dds-opened')\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n    this.optionList.removeFocus()\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n\n    this.emit('dds-closed')\n  }\n\n  get focusElement() {\n    return this.triggerButton\n  }\n\n  /**\n   * Get the active descendant element for aria-activedescendant\n   * Returns the currently focused option when dropdown is open, otherwise null\n   */\n  getActiveDescendant() {\n    if (!this.opened) {\n      return null\n    }\n\n    const activeOption = this.optionList?.getActiveOption()\n    return activeOption\n  }\n\n  /**\n   * Get the aria-describedby value, combining description and feedback IDs\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n    if (this.description) {\n      ids.push('description')\n    }\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  // custom validation\n  get validity(): ValidityState {\n    if (this.internals.validity) {\n      return this.internals.validity\n    } else {\n      return getValidityStateObject({\n        valueMissing:\n          this.required &&\n          (!this.selectedItem ||\n            this.selectedItem.value === '' ||\n            this.value === '' ||\n            this.value === undefined ||\n            this.value === null),\n      })\n    }\n  }\n\n  get validationMessage(): string {\n    return t('form.validationMessage.select')\n  }\n\n  /** Get the current display text for the selected item, dynamically fetching from the option */\n  get selectedDisplayText(): string | null {\n    if (!this.selectedItem) return null\n\n    // Read the current text from the option element itself (reactive to\n    // language changes); the options are the select's own children.\n    const currentOption = this.getOptions().find(\n      opt => opt.value === this.selectedItem.value,\n    )\n    if (currentOption) {\n      return currentOption.optionText\n    }\n\n    // Fallback to cached text if option not found\n    return this.selectedItem.text\n  }\n\n  checkValidity() {\n    const hasValue =\n      !!this.selectedItem &&\n      this.selectedItem.value !== '' &&\n      this.value !== '' &&\n      this.value !== undefined &&\n      this.value !== null\n\n    return this.required ? hasValue : true\n  }\n\n  reportValidity() {\n    return this.required ? this.checkValidity() : true\n  }\n\n  setValidity() {\n    const isValid = this.checkValidity()\n\n    if (!isValid) {\n      this.internals.setValidity(\n        {\n          valueMissing:\n            this.required &&\n            (!this.selectedItem ||\n              this.selectedItem.value === '' ||\n              this.value === '' ||\n              this.value === undefined ||\n              this.value === null),\n        },\n        this.validationMessage,\n        this.triggerButton,\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    this.focus()\n  }\n\n  private readonly handleSelectedChange = (event: CustomEvent) => {\n    const val = Object.keys(event.detail).length ? event.detail : null\n    const newValue = val?.value\n    // The option-list echoes dds-option-change whenever its value is synced from\n    // ours (searchOnValueSet), so a programmatic `value` assignment would surface\n    // as a user change. A genuine selection changes the value here; a programmatic\n    // one has already set it before the echo arrives. Emit only on a real change.\n    // A programmatic value with no matching option is answered by the list with\n    // the previous option (its own value stays the unknown one): that revert\n    // is not a user change either.\n    const revert =\n      (event.target as DapDSOptionList | null)?.value !== undefined &&\n      (event.target as DapDSOptionList).value !== newValue\n    const changed = newValue !== this.value && !revert\n    this.selectedItem = val\n    this.hideDropDown()\n    this.value = newValue\n    if (changed) {\n      this.emit('dds-change', this.selectedItem)\n    }\n\n    this.setValidity()\n  }\n\n  private readonly handleOptionDeselect = () => {\n    this.selectedItem = null\n    this.value = undefined\n    this.emit('dds-change', null)\n\n    this.setValidity()\n  }\n\n  private readonly handleNativeChange = (event: Event) => {\n    const select = event.target as HTMLSelectElement\n    const value = select.value\n\n    // Find matching option-item to get full item data\n    const optionItem =\n      this.getOptions().find(option => option.value === value) ?? null\n\n    this.value = value\n    this.selectedItem = optionItem\n      ? { value, text: optionItem.optionText }\n      : { value, text: value }\n\n    this.emit('dds-change', this.selectedItem)\n    this.setValidity()\n  }\n\n  /** Clone the option item's slotted prefix/suffix content for the customizable picker */\n  private cloneSlotContent(item: DapDSOptionItem, slot: 'prefix' | 'suffix') {\n    return Array.from(item.querySelectorAll(`:scope > [slot=\"${slot}\"]`)).map(\n      node => {\n        const clone = node.cloneNode(true) as Element\n        clone.removeAttribute('slot')\n        return clone\n      },\n    )\n  }\n\n  /** The option label without the text of slotted prefix/suffix content */\n  private getOptionLabel(item: DapDSOptionItem): string {\n    if (item.label) {\n      return item.label\n    }\n\n    return Array.from(item.childNodes)\n      .filter(node => !(node instanceof Element && node.hasAttribute('slot')))\n      .map(node => node.textContent)\n      .join('')\n      .trim()\n  }\n\n  private renderBaseSelectOption(item: DapDSOptionItem) {\n    const prefix = this.cloneSlotContent(item, 'prefix')\n    const suffix = this.cloneSlotContent(item, 'suffix')\n    return html`\n      <option\n        part=\"native-option\"\n        value=${item.value || ''}\n        ?disabled=${item.disabled}\n        ?selected=${item.value === this.value}>\n        ${prefix.length\n          ? html`<span class=\"option__prefix\" aria-hidden=\"true\"\n              >${prefix}</span\n            >`\n          : nothing}\n        <span class=\"option__label\">${this.getOptionLabel(item)}</span>\n        ${suffix.length\n          ? html`<span class=\"option__suffix\" aria-hidden=\"true\"\n              >${suffix}</span\n            >`\n          : nothing}\n      </option>\n    `\n  }\n\n  private renderNativeOption(item: DapDSOptionItem) {\n    if (this.useBaseSelect) {\n      return this.renderBaseSelectOption(item)\n    }\n\n    return html`\n      <option\n        value=${item.value || ''}\n        ?disabled=${item.disabled}\n        ?selected=${item.value === this.value}>\n        ${item.optionText}\n      </option>\n    `\n  }\n\n  private renderNativeOptgroup(group: DapDSOptionGroup) {\n    const options = Array.from(\n      group.querySelectorAll('dap-ds-option-item'),\n    ) as DapDSOptionItem[]\n    return html`\n      <optgroup label=${group.label || ''} ?disabled=${group.disabled}>\n        ${options.map(opt => this.renderNativeOption(opt))}\n      </optgroup>\n    `\n  }\n\n  private renderNativeOptions() {\n    if (this.items) {\n      return this.getOptions().map(opt => this.renderNativeOption(opt))\n    }\n    const children = Array.from(this.children)\n    return children.map(child => {\n      if (child.tagName === 'DAP-DS-OPTION-GROUP') {\n        return this.renderNativeOptgroup(child as DapDSOptionGroup)\n      } else if (child.tagName === 'DAP-DS-OPTION-ITEM') {\n        return this.renderNativeOption(child as DapDSOptionItem)\n      }\n      return ''\n    })\n  }\n\n  /** True when the customizable select is requested and supported by the browser */\n  private get useBaseSelect(): boolean {\n    return !!this.customizable && this.baseSelectSupported\n  }\n\n  private renderNativeSelect() {\n    const baseSelect = this.useBaseSelect\n    return html`\n      <div class=\"select-wrapper--native\">\n        <select\n          style=${styleMap(\n            baseSelect && this.maxHeight\n              ? { '--dds-select-picker-max-height': `${this.maxHeight}px` }\n              : {},\n          )}\n          class=\"${clsx('select', `select--${this.effectiveSize}`, {\n            'select--base': baseSelect,\n            'select--disabled': this.disabled,\n            'select--readonly': this.readonly,\n            'select--success': this.status === 'success',\n            'select--error': this.status === 'error',\n            'select--loading': this.loading,\n          })}\"\n          part=\"trigger\"\n          aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n          aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}>\n          ${baseSelect\n            ? // Rendered as a nested template so the HTML parser never sees a\n              // <button> inside <select> (the legacy parser would drop it and\n              // desync Lit's template parts); DOM insertion is always allowed.\n              html`<button class=\"select__button\" part=\"native-button\">\n                <selectedcontent></selectedcontent>\n              </button>`\n            : nothing}\n          ${this.placeholder\n            ? html`<option\n                class=\"option--placeholder\"\n                value=\"\"\n                disabled\n                ?selected=${!this.value}>\n                ${this.placeholder}\n              </option>`\n            : ''}\n          ${this.renderNativeOptions()}\n        </select>\n        <div class=\"icon\" part=\"indicator-icon\">\n          ${this.loading\n            ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n            : html`<slot name=\"indicator-icon\"\n                ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n              ></slot>`}\n        </div>\n      </div>\n    `\n  }\n\n  renderTriggerElement() {\n    return html` <button\n      slot=\"trigger\"\n      part=\"trigger\"\n      role=\"combobox\"\n      class=\"${clsx('select', `select--${this.effectiveSize}`, {\n        'select--disabled': this.disabled,\n        'select--readonly': this.readonly,\n        'select--opened': this.opened,\n        'select--loading': this.loading,\n        'select--success': this.status === 'success',\n        'select--error': this.status === 'error',\n        'select--no-animation': this.noAnimation,\n        'select--optional': this.optional,\n      })}\"\n      aria-expanded=${this.readonly || this.disabled\n        ? 'false'\n        : this.opened\n          ? 'true'\n          : 'false'}\n      aria-haspopup=${ifDefined(\n        this.readonly || this.disabled ? undefined : 'listbox',\n      )}\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      aria-label=${ifDefined(\n        this.label\n          ? undefined\n          : this.ariaLabel ||\n              this.selectedDisplayText ||\n              this.placeholder ||\n              undefined,\n      )}\n      aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n      aria-disabled=${this.disabled}\n      aria-controls=\"option-list\"\n      aria-activedescendant=${ifDefined(\n        // Options render in option-list's shadow root, out of this scope; a\n        // cross-scope IDREF is ignored by browsers, so only same-scope ids are set\n        idInScope(this.shadowRoot, this.getActiveDescendant()),\n      )}\n      ?required=${this.required}\n      ?readonly=${this.readonly}\n      ?autofocus=${this.autofocus}\n      ?disabled=${this.disabled}\n      tabindex=${this.readonly || this.disabled ? -1 : 0}\n      @blur=${this.handleBlur}\n      @focus=${this.handleFocus}\n      @keydown=${this.handleKeyDown}\n      @click=${this.handleClick}>\n      <span\n        class=\"text\"\n        .textContent=${this.selectedDisplayText ||\n        this.placeholder ||\n        ''}></span>\n      <div\n        class=\"${clsx('icon', {\n          'icon--opened': this.opened,\n          'icon--no-animation': this.noAnimation,\n        })}\"\n        part=\"indicator-icon\">\n        ${this.loading\n          ? html`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>`\n          : html`<slot name=\"indicator-icon\"\n              ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line\n            ></slot>`}\n      </div>\n    </button>`\n  }\n\n  renderOptionList() {\n    return html` <dap-ds-option-list\n      class=\"option-list\"\n      part=\"option-list\"\n      exportparts=\"option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix\"\n      id=\"option-list\"\n      aria-labelledby=${ifDefined(this.label ? 'label' : undefined)}\n      searchMode=\"typehead\"\n      size=${ifDefined(this.effectiveSize)}\n      value=${this.value}\n      disableDelaySet\n      .items=${this.items}\n      .renderOption=${this.renderOption}\n      @dds-option-change=${this.handleSelectedChange}\n      @dds-keydown=${this.handleListKeyDown}\n      @dds-option-deselect=${this.handleOptionDeselect}>\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    </dap-ds-option-list>`\n  }\n\n  render() {\n    return html` <div class=\"label-container\">\n        ${formLabelTemplate({\n          label: this.label,\n          id: 'label',\n          htmlFor: 'input',\n          size: this.effectiveSize,\n          required: this.required,\n          requiredLabel: this.requiredLabel,\n          optional: this.optional,\n          optionalLabel: this.optionalLabel,\n          subtle: this.subtle,\n          disabled: this.disabled,\n          noMargin: !!this.description,\n          hideLabel: this.hideLabel,\n        })}\n        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=\"toggle\"\n          placement=${this.tooltipPlacement}>\n          <dap-ds-icon-button\n            clean\n            slot=\"trigger\"\n            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === 'xs' ? '16' : '22'}\n            aria-label=${this.tooltipAriaLabel}\n            class=\"input-group__toggle-button\">\n            <dap-ds-icon\n              name=\"information-line\"\n              class=\"info-button\"></dap-ds-icon>\n          </dap-ds-icon-button>\n        </dap-ds-tooltip>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <div>\n        ${this.native || this.customizable\n          ? this.renderNativeSelect()\n          : !this.isMobile\n            ? html`<dap-ds-popup\n                floatingStrategy=${ifDefined(this.floatingStrategy)}\n                part=\"base\"\n                exportparts=\"popup:popup-base\"\n                class=\"select-popup\"\n                ?opened=${this.opened}\n                ?hasArrow=${false}\n                overflow\n                placement=${this.placement}\n                maxHeight=${ifDefined(this.maxHeight)}\n                ?sync=${this.sync}\n                ?disableViewportAutoClose=${this.disableViewportAutoClose}\n                @dds-close=${this.handlePopupAutoClose}\n                size=${ifDefined(this.effectiveSize) as 'lg' | 'sm' | 'xs'}>\n                ${this.renderTriggerElement()} ${this.renderOptionList()}\n              </dap-ds-popup>`\n            : html`\n                ${this.renderTriggerElement()}\n                <dap-ds-tray\n                  part=\"mobile-tray\"\n                  exportparts=\"content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer\"\n                  ?open=${this.opened}\n                  closeButton=\"false\"\n                  header=\"false\"\n                  >${this.renderOptionList()}</dap-ds-tray\n                >\n              `}\n        ${this.feedback &&\n        html`<dap-ds-feedback\n          part=\"feedback\"\n          feedbackType=${ifDefined(this.feedbackType)}\n          feedbackSize=\"${ifDefined(this.effectiveSize as 'lg' | 'sm' | 'xs')}\"\n          id=\"feedback\"\n          .subtle=${this.subtle}>\n          ${this.feedback}\n        </dap-ds-feedback>`}\n      </div>`\n  }\n}\n"],"names":["supportsBaseSelect","_DapDSSelect","GenericFormElement","event","__async","_a","_b","path","val","newValue","revert","changed","value","optionItem","option","toOptionItems","i18next","optionElementsFor","options","index","opt","item","optionDataOf","__spreadValues","changedProperties","key","ids","getValidityStateObject","t","currentOption","hasValue","slot","node","clone","prefix","suffix","html","nothing","group","child","baseSelect","styleMap","clsx","ifDefined","idInScope","formLabelTemplate","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","optionItemsConverter","state"],"mappings":"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"}

package/dist/components/select/select.scss.js

@@ -1,4 +1,4 @@
-const e = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-select-min-height: var(--dds-spacing-1000);--dds-select-padding: var(--dds-spacing-300);--dds-select-column-gap: var(--dds-spacing-100);--dds-select-border-color: var(--dds-border-neutral-base);--dds-select-border-radius: var(--dds-radius-base);--dds-select-bg-color: var(--dds-background-neutral-subtle);--dds-select-text-color: var(--dds-text-neutral-base);--dds-select-icon-right: var(--dds-spacing-200);--dds-select-icon-color: var(--dds-icon-neutral-subtle);--dds-select-text-margin-right: var(--dds-spacing-600);--dds-select-native-text-margin-right: var(--dds-spacing-800);--dds-select-disabled-border-color: var(--dds-background-neutral-stronger);--dds-select-disabled-bg-color: var(--dds-background-neutral-stronger);--dds-select-disabled-text-color: var(--dds-text-neutral-disabled);--dds-select-error-border-color: var(--dds-border-negative-base);--dds-select-success-border-color: var(--dds-border-positive-base);--dds-select-xs-min-height: var(--dds-spacing-800);--dds-select-xs-padding: var(--dds-spacing-200);--dds-select-xs-font-size: var(--dds-font-sm);--dds-select-lg-min-height: var(--dds-spacing-1200);--dds-select-lg-padding: var(--dds-spacing-400);--dds-select-lg-font-size: var(--dds-font-lg);--dds-select-lg-icon-right: var(--dds-spacing-300);--dds-select-lg-icon-color: var(--dds-text-icon-neutral-subtle);--dds-select-popup-bg-color: var(--dds-background-neutral-subtle);--dds-select-icon-opened-transform: rotate(-180deg)}.select{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;width:100%;min-height:var(--dds-select-min-height);padding:var(--dds-select-padding);column-gap:var(--dds-select-column-gap);border:var(--dds-border-width-base, 1px) solid var(--dds-select-border-color);border-radius:var(--dds-select-border-radius);background-color:var(--dds-select-bg-color);color:var(--dds-select-text-color);line-height:1;text-overflow:ellipsis;cursor:pointer}.select:focus{outline-style:solid}.select .icon{position:absolute;right:var(--dds-select-icon-right);transition:all .3s;fill:var(--dds-select-icon-color);color:var(--dds-select-icon-color);pointer-events:none}.select .text{min-width:0;margin-right:var(--dds-select-text-margin-right);overflow:hidden;line-height:var(--dds-font-line-height-large);text-align:left;text-overflow:ellipsis;white-space:nowrap}.select--loading .icon{animation:dds-spin 1s linear infinite}.select--disabled{border-color:var(--dds-select-disabled-border-color);background-color:var(--dds-select-disabled-bg-color);color:var(--dds-select-disabled-text-color);cursor:not-allowed;pointer-events:none;user-select:none}.select--disabled .text{pointer-events:auto;user-select:text;-webkit-touch-callout:default}.select--readonly{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-fields-background-read-only);color:var(--dds-text-neutral-subtle);cursor:text;pointer-events:none;user-select:none}.select--readonly .text{pointer-events:auto;user-select:text;-webkit-touch-callout:default}.select--readonly .icon{pointer-events:none}.select--error{border-color:var(--dds-select-error-border-color)}.select--success{border-color:var(--dds-select-success-border-color)}.select--xs{min-height:var(--dds-select-xs-min-height);padding:var(--dds-select-xs-padding);font-size:var(--dds-select-xs-font-size)}.select--sm{height:var(--dds-select-min-height)}.select--lg{min-height:var(--dds-select-lg-min-height);padding:var(--dds-select-lg-padding);font-size:var(--dds-select-lg-font-size)}.select--lg .icon{position:absolute;right:var(--dds-select-lg-icon-right);color:var(--dds-select-lg-icon-color);pointer-events:none}.select--opened:not(.select--no-animation) .icon{transform:var(--dds-select-icon-opened-transform)}.select-popup::part(popup){background-color:var(--dds-select-popup-bg-color)}dap-ds-tray::part(content){padding:var(--dds-spacing-100)}.select-wrapper--native{display:block;position:relative;width:100%}.select-wrapper--native .icon{position:absolute;top:50%;right:var(--dds-select-icon-right);transform:translateY(-50%);fill:var(--dds-select-icon-color);color:var(--dds-select-icon-color);pointer-events:none;user-select:none}.select-wrapper--native select.select--lg+.icon{right:var(--dds-select-lg-icon-right);color:var(--dds-select-lg-icon-color)}select.select{padding-top:0;padding-right:var(--dds-select-native-text-margin-right);padding-bottom:0;background-image:none;font-family:inherit;appearance:none}';
+const e = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-select-min-height: var(--dds-spacing-1000);--dds-select-padding: var(--dds-spacing-300);--dds-select-column-gap: var(--dds-spacing-100);--dds-select-border-color: var(--dds-border-neutral-base);--dds-select-border-radius: var(--dds-radius-base);--dds-select-bg-color: var(--dds-background-neutral-subtle);--dds-select-text-color: var(--dds-text-neutral-base);--dds-select-icon-right: var(--dds-spacing-200);--dds-select-icon-color: var(--dds-icon-neutral-subtle);--dds-select-text-margin-right: var(--dds-spacing-600);--dds-select-native-text-margin-right: var(--dds-spacing-800);--dds-select-disabled-border-color: var(--dds-background-neutral-stronger);--dds-select-disabled-bg-color: var(--dds-background-neutral-stronger);--dds-select-disabled-text-color: var(--dds-text-neutral-disabled);--dds-select-error-border-color: var(--dds-border-negative-base);--dds-select-success-border-color: var(--dds-border-positive-base);--dds-select-xs-min-height: var(--dds-spacing-800);--dds-select-xs-padding: var(--dds-spacing-200);--dds-select-xs-font-size: var(--dds-font-sm);--dds-select-lg-min-height: var(--dds-spacing-1200);--dds-select-lg-padding: var(--dds-spacing-400);--dds-select-lg-font-size: var(--dds-font-lg);--dds-select-lg-icon-right: var(--dds-spacing-300);--dds-select-lg-icon-color: var(--dds-text-icon-neutral-subtle);--dds-select-popup-bg-color: var(--dds-background-neutral-subtle);--dds-select-icon-opened-transform: rotate(-180deg);--dds-select-picker-max-height: 20rem}.select{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;width:100%;min-height:var(--dds-select-min-height);padding:var(--dds-select-padding);column-gap:var(--dds-select-column-gap);border:var(--dds-border-width-base, 1px) solid var(--dds-select-border-color);border-radius:var(--dds-select-border-radius);background-color:var(--dds-select-bg-color);color:var(--dds-select-text-color);line-height:1;text-overflow:ellipsis;cursor:pointer}.select:focus{outline-style:solid}.select .icon{position:absolute;right:var(--dds-select-icon-right);transition:all .3s;fill:var(--dds-select-icon-color);color:var(--dds-select-icon-color);pointer-events:none}.select .text{min-width:0;margin-right:var(--dds-select-text-margin-right);overflow:hidden;line-height:var(--dds-font-line-height-large);text-align:left;text-overflow:ellipsis;white-space:nowrap}.select--loading .icon{animation:dds-spin 1s linear infinite}.select--disabled{border-color:var(--dds-select-disabled-border-color);background-color:var(--dds-select-disabled-bg-color);color:var(--dds-select-disabled-text-color);cursor:not-allowed;pointer-events:none;user-select:none}.select--disabled .text{pointer-events:auto;user-select:text;-webkit-touch-callout:default}.select--readonly{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-fields-background-read-only);color:var(--dds-text-neutral-subtle);cursor:text;pointer-events:none;user-select:none}.select--readonly .text{pointer-events:auto;user-select:text;-webkit-touch-callout:default}.select--readonly .icon{pointer-events:none}.select--error{border-color:var(--dds-select-error-border-color)}.select--success{border-color:var(--dds-select-success-border-color)}.select--xs{min-height:var(--dds-select-xs-min-height);padding:var(--dds-select-xs-padding);font-size:var(--dds-select-xs-font-size)}.select--sm{height:var(--dds-select-min-height)}.select--lg{min-height:var(--dds-select-lg-min-height);padding:var(--dds-select-lg-padding);font-size:var(--dds-select-lg-font-size)}.select--lg .icon{position:absolute;right:var(--dds-select-lg-icon-right);color:var(--dds-select-lg-icon-color);pointer-events:none}.select--opened:not(.select--no-animation) .icon{transform:var(--dds-select-icon-opened-transform)}.select-popup::part(popup){background-color:var(--dds-select-popup-bg-color)}dap-ds-tray::part(content){padding:var(--dds-spacing-100)}.select-wrapper--native{display:block;position:relative;width:100%}.select-wrapper--native .icon{position:absolute;top:50%;right:var(--dds-select-icon-right);transform:translateY(-50%);fill:var(--dds-select-icon-color);color:var(--dds-select-icon-color);pointer-events:none;user-select:none}.select-wrapper--native select.select--lg+.icon{right:var(--dds-select-lg-icon-right);color:var(--dds-select-lg-icon-color)}select.select{padding-top:0;padding-right:var(--dds-select-native-text-margin-right);padding-bottom:0;background-image:none;font-family:inherit;appearance:none}@supports (appearance: base-select){select.select--base,select.select--base::picker(select){appearance:base-select}select.select--base{display:flex;align-items:center}select.select--base::picker-icon{display:none}select.select--base .select__button{display:flex;flex:1 1 auto;align-items:center;min-width:0;font:inherit}select.select--base selectedcontent{display:flex;align-items:center;min-width:0;column-gap:var(--dds-spacing-200);line-height:var(--dds-font-line-height-large)}select.select--base selectedcontent .option__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}select.select--base selectedcontent .option__suffix{display:none}select.select--base::picker(select){box-sizing:border-box;max-height:var(--dds-select-picker-max-height);margin:0;margin-block:var(--dds-spacing-100);padding:var(--dds-spacing-100);overflow-y:auto;transition:opacity .15s,display .15s allow-discrete,overlay .15s allow-discrete;border:var(--dds-border-width-base, 1px) solid var(--dds-border-neutral-subtle);border-radius:var(--dds-radius-base);opacity:0;background-color:var(--dds-select-popup-bg-color);color:var(--dds-text-neutral-base)}select.select--base:open::picker(select){opacity:1}select.select--base option{display:flex;align-items:center;padding:var(--dds-spacing-100) var(--dds-spacing-200);column-gap:var(--dds-spacing-200);border-radius:var(--dds-radius-small, 4px);color:var(--dds-text-neutral-base);line-height:var(--dds-font-line-height-large);cursor:pointer}select.select--base option:hover{background-color:var(--dds-background-neutral-medium)}select.select--base option:active{background-color:var(--dds-background-neutral-strong)}select.select--base option:focus-visible{outline:var(--dds-border-width-large) solid var(--dds-focus-outer-ring);outline-offset:calc(var(--dds-border-width-large) * -1)}select.select--base option:checked{font-weight:var(--dds-font-weight-bold)}select.select--base option:disabled{color:var(--dds-text-neutral-disabled);cursor:not-allowed}select.select--base option::checkmark{order:1;margin-left:auto}select.select--base .option--placeholder{display:none}:host([placement=top]) select.select--base::picker(select){position-area:block-start}:host([placement=top-start]) select.select--base::picker(select){position-area:block-start span-inline-end}:host([placement=top-end]) select.select--base::picker(select){position-area:block-start span-inline-start}:host([placement=bottom]) select.select--base::picker(select){position-area:block-end}:host([placement=bottom-start]) select.select--base::picker(select){position-area:block-end span-inline-end}:host([placement=bottom-end]) select.select--base::picker(select){position-area:block-end span-inline-start}:host([placement=left]) select.select--base::picker(select){position-area:inline-start}:host([placement=left-start]) select.select--base::picker(select){position-area:inline-start span-block-end}:host([placement=left-end]) select.select--base::picker(select){position-area:inline-start span-block-start}:host([placement=right]) select.select--base::picker(select){position-area:inline-end}:host([placement=right-start]) select.select--base::picker(select){position-area:inline-end span-block-end}:host([placement=right-end]) select.select--base::picker(select){position-area:inline-end span-block-start}:host([placement^=top]) select.select--base::picker(select),:host([placement^=bottom]) select.select--base::picker(select){position-try-fallbacks:flip-block}:host([placement^=left]) select.select--base::picker(select),:host([placement^=right]) select.select--base::picker(select){margin-block:0;margin-inline:var(--dds-spacing-100);position-try-fallbacks:flip-inline}select.select--base:open+.icon{transform:translateY(-50%) var(--dds-select-icon-opened-transform);transition:transform .3s}@starting-style{select.select--base:open::picker(select){opacity:0}}}';
 export {
   e as default
 };

package/dist/components/sidenav/sidenav-group.component.d.ts

@@ -17,6 +17,7 @@ export type Spacing = 'top' | 'bottom' | 'both' | 'none';
  * @csspart link - The link of the side navigation group.
  * @csspart toggle - The toggle button of the side navigation group.
  * @csspart submenu - The submenu of the side navigation group.
+ * @csspart icon - The toggle icon of the side navigation group.
  *
  * @cssproperty --dds-sidenav-group-margin-bottom - Default bottom margin of the sidenav group (default: var(--dds-spacing-100))
  * @cssproperty --dds-sidenav-group-border-radius - Border radius of the sidenav group (default: var(--dds-radius-base))

package/dist/components/sidenav/sidenav-group.component.js

@@ -1,19 +1,16 @@
 import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as p } from "../../node_modules/lit-html/static.js";
-import { DdsElement as c } from "../../internal/dds-hu-element.js";
-import f from "../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component.js";
-import h from "./sidenav-group.scss.js";
-import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, n = (l, t, u, v) => {
+import { unsafeCSS as c } from "lit";
+import { property as o } from "lit/decorators.js";
+import { html as p } from "lit/static-html.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import h from "../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component.js";
+import g from "./sidenav-group.scss.js";
+var m = Object.defineProperty, n = (l, t, u, v) => {
   for (var s = void 0, a = l.length - 1, d; a >= 0; a--)
     (d = l[a]) && (s = d(t, u, s) || s);
-  return s && g(t, u, s), s;
+  return s && m(t, u, s), s;
 };
-const r = class r extends c {
+const r = class r extends f {
   constructor() {
     super(...arguments), this.active = !1, this.spacing = "none", this.open = !1, this.size = "xs";
   }
@@ -80,8 +77,8 @@ const r = class r extends c {
   }
 };
 r.tagName = "dap-ds-sidenav-group", r.dependencies = {
-  "dap-ds-icon-arrow-right-s-line": f
-}, r.styles = m(h);
+  "dap-ds-icon-arrow-right-s-line": h
+}, r.styles = c(g);
 let e = r;
 n([
   o({ reflect: !0 })

package/dist/components/sidenav/sidenav-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.component.js","sources":["../../../src/components/sidenav/sidenav-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport ArrowsArrowRightSLine from '../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component'\nimport styles from './sidenav-group.scss?inline'\n\nexport type Spacing = 'top' | 'bottom' | 'both' | 'none'\n\n/**\n * `dap-ds-sidenav-group`\n * @summary Side navigation group\n * @element dap-ds-sidenav-group\n * @title - Side navigation group\n * @group side-navigation\n *\n * @slot - The content of the side navigation group.\n * @slot submenu - The submenu of the side navigation group.\n * @slot suffix - The suffix of the side navigation group.\n *\n * @csspart base - The main side navigation group container.\n * @csspart title - The title of the side navigation group.\n * @csspart link - The link of the side navigation group.\n * @csspart toggle - The toggle button of the side navigation group.\n * @csspart submenu - The submenu of the side navigation group.\n *\n * @cssproperty --dds-sidenav-group-margin-bottom - Default bottom margin of the sidenav group (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-group-border-radius - Border radius of the sidenav group (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-group-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-min-height-xs - Minimum height of the sidenav group item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-group-item-min-height-sm - Minimum height of the sidenav group item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-group-item-min-height-lg - Minimum height of the sidenav group item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-group-item-padding-xs - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-item-padding-sm - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-padding-lg - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-group-item-color - Text color of the sidenav group item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-group-item-font-size-xs - Font size of the sidenav group item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-group-item-font-size-sm - Font size of the sidenav group item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-group-item-font-size-lg - Font size of the sidenav group item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-group-item-font-weight - Font weight of the sidenav group item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-group-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-group-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-sidenav-group-toggle-margin - Margin for the toggle button (default: var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-submenu-padding - Padding for the submenu (default: var(--dds-spacing-300) 0)\n */\nexport default class DapDSSideNavGroup extends DdsElement {\n  static tagName = 'dap-ds-sidenav-group'\n\n  static dependencies = {\n    'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLine,\n  }\n\n  /** The href of the side navigation item */\n  @property({ reflect: true }) href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: Spacing = 'none'\n\n  /** Whether the side navigation group is open */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** The size of the side navigation group */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-group',\n          `sidenav-group--spacing-${this.spacing}`,\n        )}>\n        <div\n          class=${clsx(\n            'sidenav-group__item',\n            `sidenav-group__item--${this.size}`,\n            {\n              'sidenav-group__item--active': this.active,\n            },\n          )}>\n          <div\n            class=${clsx('sidenav-group__title')}\n            part=\"title\"\n            id=\"title\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (!this.open) {\n                this.open = true\n              } else if (this.open && !this.href) {\n                this.open = false\n              }\n            }}>\n            ${this.href\n              ? html`<a\n                  href=${this.href}\n                  class=\"sidenav-group__link\"\n                  part=\"link\">\n                  <slot></slot>\n                  <slot name=\"suffix\"></slot>\n                </a>`\n              : html`<slot></slot>`}\n          </div>\n          <button\n            part=\"toggle\"\n            type=\"button\"\n            class=${clsx('sidenav-group__toggle', {\n              'sidenav-group__toggle--open': this.open,\n            })}\n            aria-labelledby=\"title\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"submenu\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              this.open = !this.open\n            }}>\n            <dap-ds-icon-arrow-right-s-line\n              part=\"icon\"\n              aria-hidden=\"true\"></dap-ds-icon-arrow-right-s-line>\n          </button>\n        </div>\n        <ul\n          part=\"submenu\"\n          id=\"submenu\"\n          role=\"list\"\n          class=${clsx('sidenav-group__submenu', {\n            'sidenav-group__submenu--open': this.open,\n          })}>\n          <slot name=\"submenu\"></slot>\n        </ul>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSSideNavGroup","DdsElement","html","clsx","e","ArrowsArrowRightSLine","unsafeCSS","styles","DapDSSideNavGroup","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA+CA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAW;AAAA,EAA1D,cAAA;AAAA,UAAA,GAAA,SAAA,GAWuD,KAAA,SAAA,IAKL,KAAA,UAAA,QAGG,KAAA,OAAA,IAGmB,KAAA,OAAA;AAAA,EAAA;AAAA,EAItE,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,gBAIKC;AAAA,MACN;AAAA,MACA,0BAA0B,KAAK,OAAO;AAAA,IAAA,CACvC;AAAA;AAAA,kBAESA;AAAA,MACN;AAAA,MACA,wBAAwB,KAAK,IAAI;AAAA,MACjC;AAAA,QACE,+BAA+B,KAAK;AAAA,MAAA;AAAA,IACtC,CACD;AAAA;AAAA,oBAESA,EAAK,sBAAsB,CAAC;AAAA;AAAA;AAAA,qBAG3B,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAK,OAEC,KAAK,QAAQ,CAAC,KAAK,SAC5B,KAAK,OAAO,MAFZ,KAAK,OAAO;AAAA,IAGd,CACD;AAAA,cACC,KAAK,OACHF;AAAAA,yBACS,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlBA,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKfC,EAAK,yBAAyB;AAAA,MACpC,+BAA+B,KAAK;AAAA,IAAA,CACrC,CAAC;AAAA;AAAA,4BAEc,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,qBAEnC,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAA,OAAO,CAAC,KAAK;AAAA,IAAA,CACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUKD,EAAK,0BAA0B;AAAA,MACrC,gCAAgC,KAAK;AAAA,IAAA,CACtC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMZ;AAhGEH,EAAO,UAAU,wBAEjBA,EAAO,eAAe;AAAA,EACpB,kCAAkCK;AACpC,GAmBgBL,EAAA,SAASM,EAAUC,CAAM;AAxB3C,IAAqBC,IAArBR;AAQ+BS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EAQU,WAAA,MAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAXvBF,EAWyB,WAAA,QAAA;AAKfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAhBRF,EAgBU,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAnBvBF,EAmByB,WAAA,MAAA;AAGDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GAtBtBF,EAsBwB,WAAA,MAAA;"}
+{"version":3,"file":"sidenav-group.component.js","sources":["../../../src/components/sidenav/sidenav-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport ArrowsArrowRightSLine from '../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component'\nimport styles from './sidenav-group.scss?inline'\n\nexport type Spacing = 'top' | 'bottom' | 'both' | 'none'\n\n/**\n * `dap-ds-sidenav-group`\n * @summary Side navigation group\n * @element dap-ds-sidenav-group\n * @title - Side navigation group\n * @group side-navigation\n *\n * @slot - The content of the side navigation group.\n * @slot submenu - The submenu of the side navigation group.\n * @slot suffix - The suffix of the side navigation group.\n *\n * @csspart base - The main side navigation group container.\n * @csspart title - The title of the side navigation group.\n * @csspart link - The link of the side navigation group.\n * @csspart toggle - The toggle button of the side navigation group.\n * @csspart submenu - The submenu of the side navigation group.\n * @csspart icon - The toggle icon of the side navigation group.\n *\n * @cssproperty --dds-sidenav-group-margin-bottom - Default bottom margin of the sidenav group (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-group-border-radius - Border radius of the sidenav group (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-group-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-min-height-xs - Minimum height of the sidenav group item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-group-item-min-height-sm - Minimum height of the sidenav group item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-group-item-min-height-lg - Minimum height of the sidenav group item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-group-item-padding-xs - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-item-padding-sm - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-padding-lg - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-group-item-color - Text color of the sidenav group item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-group-item-font-size-xs - Font size of the sidenav group item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-group-item-font-size-sm - Font size of the sidenav group item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-group-item-font-size-lg - Font size of the sidenav group item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-group-item-font-weight - Font weight of the sidenav group item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-group-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-group-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-sidenav-group-toggle-margin - Margin for the toggle button (default: var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-submenu-padding - Padding for the submenu (default: var(--dds-spacing-300) 0)\n */\nexport default class DapDSSideNavGroup extends DdsElement {\n  static tagName = 'dap-ds-sidenav-group'\n\n  static dependencies = {\n    'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLine,\n  }\n\n  /** The href of the side navigation item */\n  @property({ reflect: true }) href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: Spacing = 'none'\n\n  /** Whether the side navigation group is open */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** The size of the side navigation group */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-group',\n          `sidenav-group--spacing-${this.spacing}`,\n        )}>\n        <div\n          class=${clsx(\n            'sidenav-group__item',\n            `sidenav-group__item--${this.size}`,\n            {\n              'sidenav-group__item--active': this.active,\n            },\n          )}>\n          <div\n            class=${clsx('sidenav-group__title')}\n            part=\"title\"\n            id=\"title\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (!this.open) {\n                this.open = true\n              } else if (this.open && !this.href) {\n                this.open = false\n              }\n            }}>\n            ${this.href\n              ? html`<a\n                  href=${this.href}\n                  class=\"sidenav-group__link\"\n                  part=\"link\">\n                  <slot></slot>\n                  <slot name=\"suffix\"></slot>\n                </a>`\n              : html`<slot></slot>`}\n          </div>\n          <button\n            part=\"toggle\"\n            type=\"button\"\n            class=${clsx('sidenav-group__toggle', {\n              'sidenav-group__toggle--open': this.open,\n            })}\n            aria-labelledby=\"title\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"submenu\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              this.open = !this.open\n            }}>\n            <dap-ds-icon-arrow-right-s-line\n              part=\"icon\"\n              aria-hidden=\"true\"></dap-ds-icon-arrow-right-s-line>\n          </button>\n        </div>\n        <ul\n          part=\"submenu\"\n          id=\"submenu\"\n          role=\"list\"\n          class=${clsx('sidenav-group__submenu', {\n            'sidenav-group__submenu--open': this.open,\n          })}>\n          <slot name=\"submenu\"></slot>\n        </ul>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSSideNavGroup","DdsElement","html","clsx","e","ArrowsArrowRightSLine","unsafeCSS","styles","DapDSSideNavGroup","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAgDA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAW;AAAA,EAA1D,cAAA;AAAA,UAAA,GAAA,SAAA,GAWuD,KAAA,SAAA,IAKL,KAAA,UAAA,QAGG,KAAA,OAAA,IAGmB,KAAA,OAAA;AAAA,EAAA;AAAA,EAItE,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA;AAAA,gBAIKC;AAAA,MACN;AAAA,MACA,0BAA0B,KAAK,OAAO;AAAA,IAAA,CACvC;AAAA;AAAA,kBAESA;AAAA,MACN;AAAA,MACA,wBAAwB,KAAK,IAAI;AAAA,MACjC;AAAA,QACE,+BAA+B,KAAK;AAAA,MAAA;AAAA,IACtC,CACD;AAAA;AAAA,oBAESA,EAAK,sBAAsB,CAAC;AAAA;AAAA;AAAA,qBAG3B,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAK,OAEC,KAAK,QAAQ,CAAC,KAAK,SAC5B,KAAK,OAAO,MAFZ,KAAK,OAAO;AAAA,IAGd,CACD;AAAA,cACC,KAAK,OACHF;AAAA,yBACS,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlBA,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKfC,EAAK,yBAAyB;AAAA,MACpC,+BAA+B,KAAK;AAAA,IAAA,CACrC,CAAC;AAAA;AAAA,4BAEc,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,qBAEnC,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAA,OAAO,CAAC,KAAK;AAAA,IAAA,CACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUKD,EAAK,0BAA0B;AAAA,MACrC,gCAAgC,KAAK;AAAA,IAAA,CACtC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMZ;AAhGEH,EAAO,UAAU,wBAEjBA,EAAO,eAAe;AAAA,EACpB,kCAAkCK;AACpC,GAmBgBL,EAAA,SAASM,EAAUC,CAAM;AAxB3C,IAAqBC,IAArBR;AAQ+BS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EAQU,WAAA,MAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAXvBF,EAWyB,WAAA,QAAA;AAKfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAhBRF,EAgBU,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAnBvBF,EAmByB,WAAA,MAAA;AAGDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GAtBtBF,EAsBwB,WAAA,MAAA;"}

package/dist/components/sidenav/sidenav-item.component.js

@@ -1,31 +1,28 @@
-import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as n } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as m } from "../../node_modules/lit-html/static.js";
+import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m, nothing as g } from "lit";
+import { property as e } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { html as h } from "lit/static-html.js";
 import "../../localization/localization.js";
-import { DdsElement as g } from "../../internal/dds-hu-element.js";
-import u from "./sidenav-item.scss.js";
-import { t as d } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, r = (p, i, l, $) => {
-  for (var s = void 0, a = p.length - 1, f; a >= 0; a--)
-    (f = p[a]) && (s = f(i, l, s) || s);
-  return s && y(i, l, s), s;
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import d from "./sidenav-item.scss.js";
+import { t as v } from "../../node_modules/i18next/dist/esm/i18next.js";
+var y = Object.defineProperty, r = (p, s, l, $) => {
+  for (var i = void 0, a = p.length - 1, f; a >= 0; a--)
+    (f = p[a]) && (i = f(s, l, i) || i);
+  return i && y(s, l, i), i;
 };
-const o = class o extends g {
+const o = class o extends u {
   constructor() {
     super(...arguments), this.active = !1, this.current = "page", this.spacing = "none", this.size = "xs", this.target = "_self", this.rel = "noreferrer noopener";
   }
   render() {
-    var i;
-    return m`
+    var s;
+    return h`
       <li
         part="base"
         role="listitem"
-        class=${h(
+        class=${c(
       "sidenav-item",
       `sidenav-item--spacing-${this.spacing}`,
       `sidenav-item--${this.size}`,
@@ -41,16 +38,16 @@ const o = class o extends g {
           target=${n(this.href ? this.target : void 0)}
           rel=${n(this.href ? this.rel : void 0)}>
           <slot></slot>
-          ${this.target === "_blank" ? m`<span class="sr-only">
-                ${(i = this.targetBlankText) != null ? i : d("opensInNewTab")}</span
-              >` : c}
+          ${this.target === "_blank" ? h`<span class="sr-only">
+                ${(s = this.targetBlankText) != null ? s : v("opensInNewTab")}</span
+              >` : g}
           <slot name="suffix"></slot>
         </a>
       </li>
     `;
   }
 };
-o.tagName = "dap-ds-sidenav-item", o.styles = v(u);
+o.tagName = "dap-ds-sidenav-item", o.styles = m(d);
 let t = o;
 r([
   e()

package/dist/components/sidenav/sidenav-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.component.js","sources":["../../../src/components/sidenav/sidenav-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport type { AriaCurrent, LinkTarget, SidenavSpacing } from '@/common/types'\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav-item.scss?inline'\n\n/**\n * `dap-ds-sidenav-item`\n * @summary Side navigation item\n * @element dap-ds-sidenav-item\n * @title - Side navigation item\n * @group side-navigation\n *\n * @slot - The content of the side navigation item.\n * @slot suffix - The suffix of the side navigation item.\n *\n * @csspart base - The main side navigation item container.\n * @csspart link - The link of the side navigation item.\n *\n * @cssproperty --dds-sidenav-item-min-height-xs - Minimum height of the sidenav item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-item-min-height-sm - Minimum height of the sidenav item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-item-min-height-lg - Minimum height of the sidenav item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-item-margin-bottom - Default bottom margin of the sidenav item (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-item-padding-xs - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-item-padding-sm - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-padding-lg - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-item-radius - Border radius of the sidenav item (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-item-color - Text color of the sidenav item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-item-font-size-xs - Font size of the sidenav item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-item-font-size-sm - Font size of the sidenav item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-item-font-size-lg - Font size of the sidenav item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-item-font-weight - Font weight of the sidenav item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-item-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n */\nexport default class DapDSSideNavItem extends DdsElement {\n  static tagName = 'dap-ds-sidenav-item'\n\n  /** The href of the side navigation item */\n  @property() href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * Which `aria-current` token to expose on the link when `active` is set.\n   *\n   * `aria-current` has to sit on the anchor that assistive technology actually\n   * exposes. Setting it on this host does nothing: the host is a role-less custom\n   * element, so the attribute is stranded there and screen-reader users cannot tell\n   * which item is current. Use `current=\"step\"` inside a stepper.\n   *\n   * @type {'page' | 'step' | 'location' | 'date' | 'time' | 'true'}\n   */\n  @property({ reflect: true }) current: AriaCurrent = 'page'\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: SidenavSpacing = 'none'\n\n  /** The size of the side navigation item */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  /** The target of the link.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The rel of the link */\n  @property({ type: String }) rel = 'noreferrer noopener'\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-item',\n          `sidenav-item--spacing-${this.spacing}`,\n          `sidenav-item--${this.size}`,\n          {\n            'sidenav-item--active': this.active,\n          },\n        )}>\n        <a\n          part=\"link\"\n          href=${this.href}\n          class=\"sidenav-item__link\"\n          aria-current=${ifDefined(this.active ? this.current : undefined)}\n          target=${ifDefined(this.href ? this.target : undefined)}\n          rel=${ifDefined(this.href ? this.rel : undefined)}>\n          <slot></slot>\n          ${this.target === '_blank'\n            ? html`<span class=\"sr-only\">\n                ${this.targetBlankText ?? t('opensInNewTab')}</span\n              >`\n            : nothing}\n          <slot name=\"suffix\"></slot>\n        </a>\n      </li>\n    `\n  }\n}\n"],"names":["_DapDSSideNavItem","DdsElement","html","clsx","ifDefined","_a","t","nothing","unsafeCSS","styles","DapDSSideNavItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOuD,KAAA,SAAA,IAYD,KAAA,UAAA,QAKG,KAAA,UAAA,QAGe,KAAA,OAAA,MAKrC,KAAA,SAAA,SAGC,KAAA,MAAA;AAAA,EAAA;AAAA,EAOlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,gBAIKC;AAAA,MACN;AAAA,MACA,yBAAyB,KAAK,OAAO;AAAA,MACrC,iBAAiB,KAAK,IAAI;AAAA,MAC1B;AAAA,QACE,wBAAwB,KAAK;AAAA,MAAA;AAAA,IAC/B,CACD;AAAA;AAAA;AAAA,iBAGQ,KAAK,IAAI;AAAA;AAAA,yBAEDC,EAAU,KAAK,SAAS,KAAK,UAAU,MAAS,CAAC;AAAA,mBACvDA,EAAU,KAAK,OAAO,KAAK,SAAS,MAAS,CAAC;AAAA,gBACjDA,EAAU,KAAK,OAAO,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,YAE/C,KAAK,WAAW,WACdF;AAAAA,mBACIG,IAAA,KAAK,oBAAL,OAAAA,IAAwBC,EAAE,eAAe,CAAC;AAAA,mBAE9CC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMrB;AAxEEP,EAAO,UAAU,uBAuCDA,EAAA,SAASQ,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBV;AAIcW,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,QAAA;AAYfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAnBRF,EAmBU,WAAA,SAAA;AAKAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRF,EAwBU,WAAA,SAAA;AAGcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GA3BtBF,EA2BwB,WAAA,MAAA;AAK/BC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhCSF,EAgCP,WAAA,QAAA;AAGgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAnCPF,EAmCS,WAAA,KAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAtCPF,EAsCS,WAAA,iBAAA;"}
+{"version":3,"file":"sidenav-item.component.js","sources":["../../../src/components/sidenav/sidenav-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport type { AriaCurrent, LinkTarget, SidenavSpacing } from '@/common/types'\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav-item.scss?inline'\n\n/**\n * `dap-ds-sidenav-item`\n * @summary Side navigation item\n * @element dap-ds-sidenav-item\n * @title - Side navigation item\n * @group side-navigation\n *\n * @slot - The content of the side navigation item.\n * @slot suffix - The suffix of the side navigation item.\n *\n * @csspart base - The main side navigation item container.\n * @csspart link - The link of the side navigation item.\n *\n * @cssproperty --dds-sidenav-item-min-height-xs - Minimum height of the sidenav item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-item-min-height-sm - Minimum height of the sidenav item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-item-min-height-lg - Minimum height of the sidenav item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-item-margin-bottom - Default bottom margin of the sidenav item (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-item-padding-xs - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-item-padding-sm - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-padding-lg - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-item-radius - Border radius of the sidenav item (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-item-color - Text color of the sidenav item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-item-font-size-xs - Font size of the sidenav item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-item-font-size-sm - Font size of the sidenav item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-item-font-size-lg - Font size of the sidenav item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-item-font-weight - Font weight of the sidenav item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-item-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n */\nexport default class DapDSSideNavItem extends DdsElement {\n  static tagName = 'dap-ds-sidenav-item'\n\n  /** The href of the side navigation item */\n  @property() href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * Which `aria-current` token to expose on the link when `active` is set.\n   *\n   * `aria-current` has to sit on the anchor that assistive technology actually\n   * exposes. Setting it on this host does nothing: the host is a role-less custom\n   * element, so the attribute is stranded there and screen-reader users cannot tell\n   * which item is current. Use `current=\"step\"` inside a stepper.\n   *\n   * @type {'page' | 'step' | 'location' | 'date' | 'time' | 'true'}\n   */\n  @property({ reflect: true }) current: AriaCurrent = 'page'\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: SidenavSpacing = 'none'\n\n  /** The size of the side navigation item */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  /** The target of the link.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The rel of the link */\n  @property({ type: String }) rel = 'noreferrer noopener'\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-item',\n          `sidenav-item--spacing-${this.spacing}`,\n          `sidenav-item--${this.size}`,\n          {\n            'sidenav-item--active': this.active,\n          },\n        )}>\n        <a\n          part=\"link\"\n          href=${this.href}\n          class=\"sidenav-item__link\"\n          aria-current=${ifDefined(this.active ? this.current : undefined)}\n          target=${ifDefined(this.href ? this.target : undefined)}\n          rel=${ifDefined(this.href ? this.rel : undefined)}>\n          <slot></slot>\n          ${this.target === '_blank'\n            ? html`<span class=\"sr-only\">\n                ${this.targetBlankText ?? t('opensInNewTab')}</span\n              >`\n            : nothing}\n          <slot name=\"suffix\"></slot>\n        </a>\n      </li>\n    `\n  }\n}\n"],"names":["_DapDSSideNavItem","DdsElement","html","clsx","ifDefined","_a","t","nothing","unsafeCSS","styles","DapDSSideNavItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOuD,KAAA,SAAA,IAYD,KAAA,UAAA,QAKG,KAAA,UAAA,QAGe,KAAA,OAAA,MAKrC,KAAA,SAAA,SAGC,KAAA,MAAA;AAAA,EAAA;AAAA,EAOlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA;AAAA,gBAIKC;AAAA,MACN;AAAA,MACA,yBAAyB,KAAK,OAAO;AAAA,MACrC,iBAAiB,KAAK,IAAI;AAAA,MAC1B;AAAA,QACE,wBAAwB,KAAK;AAAA,MAAA;AAAA,IAC/B,CACD;AAAA;AAAA;AAAA,iBAGQ,KAAK,IAAI;AAAA;AAAA,yBAEDC,EAAU,KAAK,SAAS,KAAK,UAAU,MAAS,CAAC;AAAA,mBACvDA,EAAU,KAAK,OAAO,KAAK,SAAS,MAAS,CAAC;AAAA,gBACjDA,EAAU,KAAK,OAAO,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,YAE/C,KAAK,WAAW,WACdF;AAAA,mBACIG,IAAA,KAAK,oBAAL,OAAAA,IAAwBC,EAAE,eAAe,CAAC;AAAA,mBAE9CC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMrB;AAxEEP,EAAO,UAAU,uBAuCDA,EAAA,SAASQ,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBV;AAIcW,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,QAAA;AAYfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAnBRF,EAmBU,WAAA,SAAA;AAKAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRF,EAwBU,WAAA,SAAA;AAGcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GA3BtBF,EA2BwB,WAAA,MAAA;AAK/BC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhCSF,EAgCP,WAAA,QAAA;AAGgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAnCPF,EAmCS,WAAA,KAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAtCPF,EAsCS,WAAA,iBAAA;"}

package/dist/components/sidenav/sidenav.component.js

@@ -1,13 +1,10 @@
 import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { literal as p, html as u } from "../../node_modules/lit-html/static.js";
-import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import v from "./sidenav.scss.js";
-import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var b = Object.defineProperty, c = (l, e, t, r) => {
+import { unsafeCSS as u } from "lit";
+import { property as c } from "lit/decorators.js";
+import { literal as p, html as m } from "lit/static-html.js";
+import { DdsElement as v } from "../../internal/dds-hu-element.js";
+import A from "./sidenav.scss.js";
+var b = Object.defineProperty, n = (l, e, t, r) => {
   for (var s = void 0, i = l.length - 1, d; i >= 0; i--)
     (d = l[i]) && (s = d(e, t, s) || s);
   return s && b(e, t, s), s;
@@ -15,7 +12,7 @@ var b = Object.defineProperty, c = (l, e, t, r) => {
 const f = {
   aside: p`aside`,
   nav: p`nav`
-}, o = class o extends m {
+}, o = class o extends v {
   constructor() {
     super(...arguments), this.size = "xs", this.landmark = "aside";
   }
@@ -70,7 +67,7 @@ const f = {
   render() {
     var t, r;
     const e = (t = f[this.landmark]) != null ? t : f.aside;
-    return u`
+    return m`
       <${e}
         part="base"
         class=${h("sidenav", `sidenav--${this.size}`)}
@@ -82,19 +79,19 @@ const f = {
     `;
   }
 };
-o.tagName = "dap-ds-sidenav", o.styles = A(v);
+o.tagName = "dap-ds-sidenav", o.styles = u(A);
 let a = o;
-c([
-  n({ reflect: !0 })
+n([
+  c({ reflect: !0 })
 ], a.prototype, "label");
-c([
-  n()
+n([
+  c()
 ], a.prototype, "activeHref");
-c([
-  n({ type: String })
+n([
+  c({ type: String })
 ], a.prototype, "size");
-c([
-  n({ reflect: !0, type: String })
+n([
+  c({ reflect: !0, type: String })
 ], a.prototype, "landmark");
 export {
   a as default