dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,438 @@
+var f = (u, e, t) => new Promise((n, a) => {
+  var p = (r) => {
+    try {
+      b(t.next(r));
+    } catch (y) {
+      a(y);
+    }
+  }, m = (r) => {
+    try {
+      b(t.throw(r));
+    } catch (y) {
+      a(y);
+    }
+  }, b = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(p, m);
+  b((t = t.apply(u, e)).next());
+});
+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 d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as $ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as v } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as i } from "../../node_modules/lit-html/static.js";
+import { getValidityStateObject as D } from "../../common/utils.js";
+import { GenericFormElement as w } from "../../internal/mixin/genericFormElement.js";
+import "../../localization/localization.js";
+import k from "../feedback/feedback.component.js";
+import S from "../form/form-label/form-label.component.js";
+import A from "../icon/icon.component.js";
+import L from "../icon-button/icon-button.component.js";
+import C from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
+import I from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import x from "../option-list/option-list.component.js";
+import V from "../popup/popup.component.js";
+import O from "../tooltip/tooltip.component.js";
+import B from "../tray/tray.component.js";
+import T from "../typography/typography.component.js";
+import q from "./select.scss.js";
+import g, { t as N } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as z } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var M = Object.defineProperty, l = (u, e, t, n) => {
+  for (var a = void 0, p = u.length - 1, m; p >= 0; p--)
+    (m = u[p]) && (a = m(e, t, a) || a);
+  return a && M(e, t, a), a;
+};
+const c = class c extends w {
+  constructor() {
+    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.isMobile = !1, this.native = !1, this.loading = !1, this.noAnimation = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this.languageChangeHandler = () => {
+      this.requestUpdate();
+    }, this.handleClick = () => {
+      this.readonly || this.disabled || (this.opened ? this.hideDropDown() : this.showDropDown());
+    }, this.handleKeyDown = (e) => f(this, null, function* () {
+      if (!(e.key === "Tab" || e.key === "Shift") && !this.readonly) {
+        if (e.preventDefault(), e.key === "Enter" || e.key === " ")
+          return this.opened ? this.hideDropDown() : this.showDropDown();
+        if (e.key === "Escape")
+          return this.hideDropDown(), this.focus();
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")
+          return this.opened ? void 0 : this.showDropDown();
+        this.emit("dds-keydown", e), this.showDropDown(e.key);
+      }
+    }), this.handleListKeyDown = (e) => {
+      e.detail.key === "Escape" && this.hideDropDown();
+    }, this.handleDocumentMouseDown = (e) => {
+      const t = e.composedPath();
+      this && !t.includes(this) && this.hideDropDown();
+    }, this.handlePopupAutoClose = () => {
+      this.hideDropDown({ skipFocus: !0 });
+    }, this.handleFocus = () => {
+      this.emit("dds-focus");
+    }, this.handleBlur = () => {
+      this.emit("dds-blur");
+    }, this.handleSelectedChange = (e) => {
+      const t = Object.keys(e.detail).length ? e.detail : null, n = t == null ? void 0 : t.value, a = n !== this.value;
+      this.selectedItem = t, this.hideDropDown(), this.value = n, a && this.emit("dds-change", this.selectedItem), this.setValidity();
+    }, this.handleOptionDeselect = () => {
+      this.selectedItem = null, this.value = void 0, this.emit("dds-change", null), this.setValidity();
+    }, this.handleNativeChange = (e) => {
+      const n = e.target.value, a = this.querySelector(
+        `dap-ds-option-item[value="${n}"]`
+      );
+      this.value = n, this.selectedItem = a ? { value: n, text: a.optionText } : { value: n, text: n }, this.emit("dds-change", this.selectedItem), this.setValidity();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), g.on("languageChanged", this.languageChangeHandler), this.addEventListener("invalid", this.handleInvalid);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), g.off("languageChanged", this.languageChangeHandler), this.removeEventListener("invalid", this.handleInvalid);
+  }
+  /**
+   * Lifecycle method to handle property changes
+   */
+  updated(e) {
+    if (super.updated(e), e.has("value")) {
+      const t = this.value;
+      t == null && this.selectedItem !== null && (this.selectedItem = null, this.setValidity());
+    }
+  }
+  formResetCallback() {
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.selectedItem = this.defaultValue;
+  }
+  showDropDown(e) {
+    return f(this, null, function* () {
+      this.opened || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, this.optionList.captureFocus(e), yield this.updateComplete, this.emit("dds-opened"));
+    });
+  }
+  hideDropDown(e) {
+    return f(this, null, function* () {
+      this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, this.optionList.removeFocus(), e != null && e.skipFocus || this.focus(), this.emit("dds-closed"));
+    });
+  }
+  get focusElement() {
+    return this.triggerButton;
+  }
+  /**
+   * Get the active descendant element for aria-activedescendant
+   * Returns the currently focused option when dropdown is open, otherwise null
+   */
+  getActiveDescendant() {
+    var t;
+    return this.opened ? (t = this.optionList) == null ? void 0 : t.getActiveOption() : null;
+  }
+  /**
+   * Get the aria-describedby value, combining description and feedback IDs
+   */
+  getAriaDescribedBy() {
+    const e = [];
+    return this.description && e.push("description"), this.feedback && e.push("feedback"), e.length > 0 ? e.join(" ") : void 0;
+  }
+  // custom validation
+  get validity() {
+    return this.internals.validity ? this.internals.validity : D({
+      valueMissing: this.required && (!this.selectedItem || this.selectedItem.value === "" || this.value === "" || this.value === void 0 || this.value === null)
+    });
+  }
+  get validationMessage() {
+    return N("form.validationMessage.select");
+  }
+  /** Get the current display text for the selected item, dynamically fetching from the option */
+  get selectedDisplayText() {
+    if (!this.selectedItem) return null;
+    if (this.optionList) {
+      const e = Array.from(
+        this.optionList.querySelectorAll("dap-ds-option-item")
+      ).find((t) => t.value === this.selectedItem.value);
+      if (e)
+        return e.optionText;
+    }
+    return this.selectedItem.text;
+  }
+  checkValidity() {
+    const e = !!this.selectedItem && this.selectedItem.value !== "" && this.value !== "" && this.value !== void 0 && this.value !== null;
+    return this.required ? e : !0;
+  }
+  reportValidity() {
+    return this.required ? this.checkValidity() : !0;
+  }
+  setValidity() {
+    this.checkValidity() ? this.internals.setValidity({}) : this.internals.setValidity(
+      {
+        valueMissing: this.required && (!this.selectedItem || this.selectedItem.value === "" || this.value === "" || this.value === void 0 || this.value === null)
+      },
+      this.validationMessage,
+      this.triggerButton
+    );
+  }
+  handleInvalid(e) {
+    e.preventDefault(), this.focus();
+  }
+  renderNativeOption(e) {
+    return i`
+      <option
+        value=${e.value || ""}
+        ?disabled=${e.disabled}
+        ?selected=${e.value === this.value}>
+        ${e.optionText}
+      </option>
+    `;
+  }
+  renderNativeOptgroup(e) {
+    const t = Array.from(
+      e.querySelectorAll("dap-ds-option-item")
+    );
+    return i`
+      <optgroup label=${e.label || ""} ?disabled=${e.disabled}>
+        ${t.map((n) => this.renderNativeOption(n))}
+      </optgroup>
+    `;
+  }
+  renderNativeOptions() {
+    return Array.from(this.children).map((t) => t.tagName === "DAP-DS-OPTION-GROUP" ? this.renderNativeOptgroup(t) : t.tagName === "DAP-DS-OPTION-ITEM" ? this.renderNativeOption(t) : "");
+  }
+  renderNativeSelect() {
+    return i`
+      <div class="select-wrapper--native">
+        <select
+          class="${h("select", `select--${this.effectiveSize}`, {
+      "select--disabled": this.disabled,
+      "select--readonly": this.readonly,
+      "select--success": this.status === "success",
+      "select--error": this.status === "error",
+      "select--loading": this.loading
+    })}"
+          part="trigger"
+          aria-labelledby=${s(this.label ? "label" : void 0)}
+          aria-describedby=${s(this.getAriaDescribedBy())}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this.handleNativeChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}>
+          ${this.placeholder ? i`<option value="" disabled ?selected=${!this.value}>
+                ${this.placeholder}
+              </option>` : ""}
+          ${this.renderNativeOptions()}
+        </select>
+        <div class="icon" part="indicator-icon">
+          ${this.loading ? i`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : i`<slot name="indicator-icon"
+                ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line
+              ></slot>`}
+        </div>
+      </div>
+    `;
+  }
+  renderTriggerElement() {
+    var e;
+    return i` <button
+      slot="trigger"
+      part="trigger"
+      role="combobox"
+      class="${h("select", `select--${this.effectiveSize}`, {
+      "select--disabled": this.disabled,
+      "select--readonly": this.readonly,
+      "select--opened": this.opened,
+      "select--loading": this.loading,
+      "select--success": this.status === "success",
+      "select--error": this.status === "error",
+      "select--no-animation": this.noAnimation,
+      "select--optional": this.optional
+    })}"
+      aria-expanded=${this.readonly || this.disabled ? "false" : this.opened ? "true" : "false"}
+      aria-haspopup=${s(
+      this.readonly || this.disabled ? void 0 : "listbox"
+    )}
+      aria-labelledby=${s(this.label ? "label" : void 0)}
+      aria-label=${s(
+      this.label ? void 0 : this.ariaLabel || this.selectedDisplayText || this.placeholder || void 0
+    )}
+      aria-describedby=${s(this.getAriaDescribedBy())}
+      aria-disabled=${this.disabled}
+      aria-controls="option-list"
+      aria-activedescendant=${s((e = this.getActiveDescendant()) == null ? void 0 : e.id)}
+      ?required=${this.required}
+      ?readonly=${this.readonly}
+      ?autofocus=${this.autofocus}
+      ?disabled=${this.disabled}
+      tabindex=${this.readonly || this.disabled ? -1 : 0}
+      @blur=${this.handleBlur}
+      @focus=${this.handleFocus}
+      @keydown=${this.handleKeyDown}
+      @click=${this.handleClick}>
+      <span class="text">${this.selectedDisplayText || this.placeholder}</span>
+      <div
+        class="${h("icon", {
+      "icon--opened": this.opened,
+      "icon--no-animation": this.noAnimation
+    })}"
+        part="indicator-icon">
+        ${this.loading ? i`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : i`<slot name="indicator-icon"
+              ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line
+            ></slot>`}
+      </div>
+    </button>`;
+  }
+  renderOptionList() {
+    return i` <dap-ds-option-list
+      class="option-list"
+      part="option-list"
+      exportparts="option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix"
+      id="option-list"
+      aria-labelledby=${s(this.label ? "label" : void 0)}
+      searchMode="typehead"
+      size=${s(this.effectiveSize)}
+      value=${this.value}
+      disableDelaySet
+      @dds-option-change=${this.handleSelectedChange}
+      @dds-keydown=${this.handleListKeyDown}
+      @dds-option-deselect=${this.handleOptionDeselect}>
+      <slot></slot>
+    </dap-ds-option-list>`;
+  }
+  render() {
+    return i` <div class="label-container">
+        ${this.label && i`<dap-ds-form-label
+          part="label"
+          id="label"
+          .size=${this.effectiveSize}
+          .required=${this.required}
+          .requiredLabel=${this.requiredLabel}
+          .optional=${this.optional}
+          .optionalLabel=${this.optionalLabel}
+          .subtle=${this.subtle}
+          .disabled=${this.disabled}
+          class=${h("label")}
+          .noMargin=${!!this.description}
+          for="input"
+          .hideLabel=${this.hideLabel}
+          label=${s(this.label)}>
+        </dap-ds-form-label>`}
+        ${this.tooltip && i` <dap-ds-tooltip
+          part="tooltip"
+          content=${this.tooltip}
+          mode="toggle"
+          placement=${this.tooltipPlacement}>
+          <dap-ds-icon-button
+            clean
+            slot="trigger"
+            size=${this.effectiveSize}
+            iconSize=${this.effectiveSize === "xs" ? "16" : "22"}
+            aria-label=${this.tooltipAriaLabel}
+            class="input-group__toggle-button">
+            <dap-ds-icon
+              name="information-line"
+              class="info-button"></dap-ds-icon>
+          </dap-ds-icon-button>
+        </dap-ds-tooltip>`}
+      </div>
+      ${this.description && i`
+        <dap-ds-typography
+          part="description"
+          variant="description"
+          class=${h("input-description")}
+          size=${s(this.effectiveSize)}
+          id="description">
+          ${this.description}
+        </dap-ds-typography>
+      `}
+      <div>
+        ${this.native ? this.renderNativeSelect() : this.isMobile ? i`
+                ${this.renderTriggerElement()}
+                <dap-ds-tray
+                  part="mobile-tray"
+                  exportparts="content: mobile-content, body: mobile-body, header: mobile-header, footer: mobile-footer"
+                  ?open=${this.opened}
+                  closeButton="false"
+                  header="false"
+                  >${this.renderOptionList()}</dap-ds-tray
+                >
+              ` : i`<dap-ds-popup
+                floatingStrategy=${s(this.floatingStrategy)}
+                part="base"
+                exportparts="popup:popup-base"
+                class="select-popup"
+                ?opened=${this.opened}
+                ?hasArrow=${!1}
+                overflow
+                placement=${this.placement}
+                maxHeight=${s(this.maxHeight)}
+                ?sync=${this.sync}
+                ?disableViewportAutoClose=${this.disableViewportAutoClose}
+                @dds-close=${this.handlePopupAutoClose}
+                size=${s(this.effectiveSize)}>
+                ${this.renderTriggerElement()} ${this.renderOptionList()}
+              </dap-ds-popup>`}
+        ${this.feedback && i`<dap-ds-feedback
+          part="feedback"
+          feedbackType=${s(this.feedbackType)}
+          feedbackSize="${s(this.effectiveSize)}"
+          id="feedback"
+          .subtle=${this.subtle}>
+          ${this.feedback}
+        </dap-ds-feedback>`}
+      </div>`;
+  }
+};
+c.tagName = "dap-ds-select", c.dependencies = {
+  "dap-ds-icon-loading-spinner": I,
+  "dap-ds-icon-arrow-down-s-line": C,
+  "dap-ds-option-list": x,
+  "dap-ds-form-label": S,
+  "dap-ds-tooltip": O,
+  "dap-ds-icon-button": L,
+  "dap-ds-icon": A,
+  "dap-ds-typography": T,
+  "dap-ds-popup": V,
+  "dap-ds-tray": B,
+  "dap-ds-feedback": k
+}, c.styles = z(q);
+let o = c;
+l([
+  v("button")
+], o.prototype, "triggerButton");
+l([
+  v("dap-ds-option-list")
+], o.prototype, "optionList");
+l([
+  d({ reflect: !0 })
+], o.prototype, "placement");
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "opened");
+l([
+  d()
+], o.prototype, "placeholder");
+l([
+  d({ type: Boolean })
+], o.prototype, "sync");
+l([
+  d({ type: Boolean })
+], o.prototype, "isMobile");
+l([
+  d({ type: Boolean })
+], o.prototype, "native");
+l([
+  d({ type: Boolean })
+], o.prototype, "loading");
+l([
+  d({ type: Number })
+], o.prototype, "maxHeight");
+l([
+  d({ type: Boolean })
+], o.prototype, "noAnimation");
+l([
+  d({ reflect: !0 })
+], o.prototype, "floatingStrategy");
+l([
+  d({ type: Boolean })
+], o.prototype, "disableViewportAutoClose");
+l([
+  $()
+], o.prototype, "selectedItem");
+export {
+  o as default
+};
+//# sourceMappingURL=select.component.js.map

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

@@ -0,0 +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 } 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 === '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(this.getActiveDescendant()?.id)}\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","path","val","newValue","changed","value","optionItem","i18next","changedProperties","key","options","_a","ids","getValidityStateObject","t","currentOption","opt","hasValue","item","html","group","child","clsx","ifDefined","SystemLoadingSpinner","ArrowsArrowDownSLine","DapDSOptionList","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSPopup","DapDSTray","DapDSFeedback","unsafeCSS","styles","DapDSSelect","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/select/select.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSSelect } from './select.component.js';
-export * from './select.component.js';
+import { default as DapDSSelect } from './select.component';
+export * from './select.component';
 export default DapDSSelect;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/select/select.js

@@ -0,0 +1,6 @@
+import e from "./select.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.ts"],"sourcesContent":["import DapDSSelect from './select.component'\n\nexport * from './select.component'\nexport default DapDSSelect\n\nDapDSSelect.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-select': DapDSSelect\n  }\n}\n"],"names":["DapDSSelect"],"mappings":";AAKAA,EAAY,OAAO;"}

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

@@ -0,0 +1,5 @@
+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}';
+export {
+  e as default
+};
+//# sourceMappingURL=select.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,4 +1,5 @@
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as ArrowsArrowRightSLine } from '../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component';
 export type Spacing = 'top' | 'bottom' | 'both' | 'none';
 /**
  * `dap-ds-sidenav-group`
@@ -37,6 +38,10 @@ export type Spacing = 'top' | 'bottom' | 'both' | 'none';
  * @cssproperty --dds-sidenav-group-submenu-padding - Padding for the submenu (default: var(--dds-spacing-300) 0)
  */
 export default class DapDSSideNavGroup extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon-arrow-right-s-line': typeof ArrowsArrowRightSLine;
+    };
     /** The href of the side navigation item */
     href: string;
     /** Whether the side navigation item is active */