dap-design-system 0.60.2 → 0.61.0

package/dist/components/number-input/number-input.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.component.js","sources":["../../../src/components/number-input/number-input.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { html, nothing, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\n\n/**\n * `dap-ds-number-input`\n * @summary A number input component.\n * @element dap-ds-number-input\n * @title - Number input\n *\n * @property {string} label - The label of the input.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} placeholder - The placeholder of the input.\n * @property {string} description - The description of the input.\n * @property {string} tooltip - The tooltip of the input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`. Can be `sm` or `lg`.\n * @property {string} name - The name of the input.\n * @property {string} value - The value of the input.\n * @property {string} thousandSeparator - The thousand separator of the input.\n * @property {string} decimalSeparator - The decimal separator of the input.\n * @property {number} decimalScale - The decimal scale of the input.\n * @property {string} allowNegative - The allow negative state of the input.\n * @property {string} allowDecimal - The allow decimal state of the input.\n * @property {boolean} disabled - The disabled state of the input. Default is false.\n * @property {boolean} required - The required state of the input. Default is false.\n * @property {boolean} readonly - The readonly state of the input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the input. Default is false.\n * @property {number} min - The minimum value of the number input.\n * @property {number} max - The maximum value of the number input.\n * @property {number} step - The step value of the number input.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the input. Default is false.\n * @property {boolean} optional - The optional state of the input.\n * @property {string} optionalLabel - The optional label of the input.\n * @property {string} requiredLabel - The required indicator of the input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} disableEnter - Disables the enter key from being used to submit the form.\n * @property {boolean} hideControls - Hides the increment and decrement buttons.\n * @property {number} padStart - The number of leading zeros to add to the input.\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800) ).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @csspart base - The main number input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\n * @csspart postfix - The postfix of the input.\n * @csspart decrement-button - The decrement button of the input.\n * @csspart increment-button - The increment button of the input.\n * @csspart decrement-button-base - The base of the decrement button.\n * @csspart increment-button-base - The base of the increment button.\n * @csspart decrement-button-content - The content of the decrement button.\n * @csspart increment-button-content - The content of the increment button.\n */\nexport default class DapDSNumberInput extends InputBaseElement {\n  static tagName = 'dap-ds-number-input'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  constructor() {\n    super()\n    this.manualValueSet = true\n    // Use text type to prevent the browser from interfering with custom\n    // number formatting (thousand/decimal separators). The inputmode\n    // attribute provides the correct mobile keyboard (decimal/numeric).\n    this.type = 'text'\n  }\n\n  @query('input')\n  private readonly inputElement!: HTMLInputElement\n\n  @property({ type: String }) thousandSeparator = ''\n  @property({ type: String }) decimalSeparator = ','\n  @property({ type: Number }) decimalScale?: number\n  @property({ type: String }) allowNegative = 'true'\n  @property({ type: String }) allowDecimal = 'true'\n  @property({ type: Boolean }) hideControls = false\n  @property({ type: Number }) padStart?: number\n  /** `data-testid` for the decrement stepper button. */\n  @property() decrementButtonTestId = 'number-input-decrement-button'\n  /** `data-testid` for the increment stepper button. */\n  @property() incrementButtonTestId = 'number-input-increment-button'\n\n  @state() private formattedValue = ''\n\n  // True when `value` was changed by user input / increment / decrement, so\n  // `formattedValue` already reflects it (and preserves in-progress text such as\n  // a trailing decimal separator). External (programmatic) `value` changes leave\n  // this false, telling `updated()` to re-mask `value` so the display refreshes.\n  private valueSetInternally = false\n\n  get _thousandSeparator() {\n    //escape regex control characters with \\\n    return this.thousandSeparator?.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties)\n\n    this.inputMode =\n      this.inputMode || (this.allowDecimal === 'true' ? 'decimal' : 'numeric')\n\n    this.inputElement.addEventListener('input', (e: Event) =>\n      this.handleInput(e as InputEvent),\n    )\n\n    this.inputElement.addEventListener('keydown', (e: KeyboardEvent) =>\n      this.handleKeydown(e),\n    )\n\n    this.inputElement.addEventListener('blur', () => this.applyPadStart())\n\n    // Handle initial value\n    if (this.value !== undefined) {\n      this.formattedValue = this.getMaskedValue(this.value)\n      this.inputElement.value = this.formattedValue\n      this.applyPadStart()\n    }\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled || this.readonly) return\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this._increment()\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this._decrement()\n    } else if (\n      event.key === 'e' ||\n      event.key === 'E' ||\n      event.key === '+' ||\n      (event.key === '-' && this.allowNegative !== 'true')\n    ) {\n      // Block scientific notation and sign characters that the browser\n      // allows in type=\"number\" inputs but cause input.value to return ''\n      // while the user is mid-typing (e.g. \"1e\"), triggering a false clear.\n      event.preventDefault()\n    }\n  }\n\n  private getMaskedValue(value: string | number): string {\n    if (!value && value !== 0) return ''\n\n    let result = value\n\n    // if the value is a number and it has a decimal point, convert it to a string and replace the . with the decimal separator\n    if (typeof result === 'number' && result.toString().includes('.')) {\n      result = result.toString().replace('.', this.decimalSeparator)\n    }\n\n    // Handle negative numbers\n    if (this.allowNegative === 'true' && value.toString().startsWith('-')) {\n      result = '-' + this.getMaskedValue(value.toString().substring(1))\n    } else if (\n      this.allowNegative === 'false' &&\n      value.toString().startsWith('-')\n    ) {\n      result = value.toString().substring(1)\n    }\n\n    // Apply thousand separator\n    if (this.thousandSeparator) {\n      const parts = result.toString().split(this.decimalSeparator)\n      parts[0] = parts[0].replace(\n        /\\B(?=(\\d{3})+(?!\\d))/g,\n        this.thousandSeparator,\n      )\n      result = parts.join(this.decimalSeparator)\n    }\n\n    // Apply decimal scale\n    if (this.allowDecimal === 'true' && this.decimalScale !== undefined) {\n      const parts = result.toString().split(this.decimalSeparator)\n      if (parts[1]) {\n        parts[1] = parts[1].slice(0, this.decimalScale)\n        result = parts.join(this.decimalSeparator)\n      }\n    } else if (this.allowDecimal === 'false') {\n      const parts = result.toString().split(this.decimalSeparator)\n      result = parts[0]\n    }\n\n    return result.toString()\n  }\n\n  private isBackspaceOrDelete(event: InputEvent): boolean {\n    return (\n      event.inputType === 'deleteContentBackward' ||\n      event.inputType === 'deleteContentForward'\n    )\n  }\n\n  private handleEmptyValue() {\n    this.valueSetInternally = true\n    this.value = ''\n    this.formattedValue = ''\n    this.inputElement.value = ''\n    this.emit('dds-change', {\n      value: '',\n      formattedValue: '',\n    })\n  }\n\n  private createNumericRegex(): RegExp {\n    if (this.allowDecimal === 'true') {\n      const escapedDecimalSeparator = this.decimalSeparator.replace(\n        /[.*+?^${}()|[\\]\\\\]/g,\n        '\\\\$&',\n      )\n      return this.allowNegative === 'true'\n        ? new RegExp(`^-?\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n        : new RegExp(`^\\\\d*${escapedDecimalSeparator}?\\\\d*$`)\n    }\n    return this.allowNegative === 'true' ? /^-?\\d*$/ : /^\\d*$/\n  }\n\n  private enforceDecimalScale(value: string): string {\n    if (this.decimalScale === undefined || this.allowDecimal !== 'true') {\n      return value\n    }\n\n    const parts = value.split(this.decimalSeparator)\n    if (parts[1] && parts[1].length > this.decimalScale) {\n      parts[1] = parts[1].slice(0, this.decimalScale)\n      return parts.join(this.decimalSeparator)\n    }\n    return value\n  }\n\n  private applyPadStart() {\n    if (!this.padStart || !this.formattedValue) return\n\n    const padded = this.formattedValue.padStart(this.padStart, '0')\n    this.formattedValue = padded\n    this.inputElement.value = padded\n    // value keeps the real numeric value, padStart only affects display\n  }\n\n  private convertToNumericValue(value: string): number | string {\n    if (!value) return value\n\n    const normalizedValue = value.replace(this.decimalSeparator, '.')\n    const numericValue = parseFloat(normalizedValue)\n    return isNaN(numericValue) ? value : numericValue\n  }\n\n  private handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement\n    let value = input.value\n\n    // Remove thousand separators\n    if (this.thousandSeparator) {\n      value = value.replace(new RegExp(this._thousandSeparator, 'g'), '')\n    }\n\n    // Handle empty value\n    if (value === '') {\n      this.handleEmptyValue()\n      this.setValidity()\n      return\n    }\n\n    // Check for negative numbers if not allowed\n    if (this.allowNegative === 'false' && value.includes('-')) {\n      input.value = value.replace('-', '')\n      this.formattedValue = value.replace('-', '')\n      this.setValidity()\n      return\n    }\n\n    // Validate numeric input\n    const numericRegex = this.createNumericRegex()\n    if (!numericRegex.test(value) && !this.isBackspaceOrDelete(event)) {\n      input.value = this.formattedValue\n      this.setValidity()\n      return\n    }\n\n    // Enforce decimal scale\n    value = this.enforceDecimalScale(value)\n\n    // Convert and update value\n    const numericValue = this.convertToNumericValue(value)\n    this.valueSetInternally = true\n    this.value = numericValue\n    this.formattedValue = this.getMaskedValue(value)\n    input.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n\n    // Update validity state for form validation\n    this.setValidity()\n  }\n\n  protected updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      // An external (programmatic) value change leaves formattedValue stale, so\n      // re-mask it here -- otherwise preloaded/reset values never reach the\n      // visible input. Internal edits already set formattedValue (and keep the\n      // user's in-progress text), so we leave it untouched for those.\n      if (!this.valueSetInternally) {\n        this.formattedValue = this.getMaskedValue(this.value ?? '')\n      }\n      this.valueSetInternally = false\n      this.inputElement.value = this.formattedValue\n      // Update validity state when value changes externally\n      this.setValidity()\n    }\n  }\n\n  formResetCallback() {\n    super.formResetCallback()\n    // Reset the formatted value to match the reset value\n    this.formattedValue = this.getMaskedValue(this.value || '')\n    this.inputElement.value = this.formattedValue\n  }\n\n  private _decrement() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this._thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue - step\n\n    // Apply min constraint if defined\n    if (this.min !== undefined && newValue < this.min) {\n      newValue = this.min\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  private _increment() {\n    if (this.disabled || this.readonly) return\n\n    const currentValue = this.value\n      ? parseFloat(this.value.toString().replace(this.thousandSeparator, ''))\n      : 0\n    const step =\n      typeof this.step === 'number'\n        ? this.step\n        : parseFloat(this.step?.toString() ?? '1')\n\n    // Calculate new value\n    let newValue = currentValue + step\n\n    // Apply max constraint if defined\n    if (this.max !== undefined && newValue > this.max) {\n      newValue = this.max\n    }\n\n    // Update the value\n    this.valueSetInternally = true\n    this.value = newValue\n    this.formattedValue = this.getMaskedValue(newValue)\n    this.inputElement.value = this.formattedValue\n\n    this.emit('dds-change', {\n      value: this.value,\n      formattedValue: this.formattedValue,\n    })\n  }\n\n  render() {\n    return this.renderInput(\n      html` <span\n        part=\"postfix\"\n        class=${clsx('input__addon-postfix number-input')}>\n        ${!(this.disabled || this.readonly) && !this.hideControls\n          ? html` <dap-ds-stack direction=\"row\" tabindex=\"-1\" spacing=\"300\">\n              ${this.loading\n                ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n                : nothing}\n              <dap-ds-icon-button\n                part=\"decrement-button\"\n                data-testid=${this.decrementButtonTestId}\n                exportparts=\"base: decrement-button-base, content: decrement-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._decrement}\n                aria-label=\"${translate('decrease')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"decrement-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"subtract-line\"\n                    part=\"decrement-icon\"\n                    exportparts=\"icon: decrement-icon, base: decrement-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n              <dap-ds-icon-button\n                part=\"increment-button\"\n                data-testid=${this.incrementButtonTestId}\n                exportparts=\"base: increment-button-base, content: increment-button-content\"\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                @click=${this._increment}\n                aria-label=\"${translate('increase')}\"\n                .disabled=${this.disabled}>\n                <slot name=\"increment-icon\">\n                  <dap-ds-icon\n                    size=\"lg\"\n                    name=\"add-line\"\n                    part=\"increment-icon\"\n                    exportparts=\"icon: increment-icon, base: increment-icon-base\"></dap-ds-icon>\n                </slot>\n              </dap-ds-icon-button>\n            </dap-ds-stack>`\n          : ``}\n      </span>`,\n    )\n  }\n}\n"],"names":["_DapDSNumberInput","InputBaseElement","_a","changedProperties","event","value","result","parts","escapedDecimalSeparator","padded","normalizedValue","numericValue","input","currentValue","step","_b","newValue","html","clsx","nothing","ifDefined","translate","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","DapDSNumberInput","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/number-input/number-input.d.ts

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

package/dist/components/number-input/number-input.js

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

package/dist/components/number-input/number-input.js.map

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

package/dist/components/official-website-banner/official-website-banner.component.d.ts

@@ -1,4 +1,6 @@
 import { AccordionBaseElement } from '../accordion/accordion-base-element';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSStack } from '../stack/stack.component';
 /**
  * `dap-ds-official-website-banner`
  * @element dap-ds-official-website-banner
@@ -40,6 +42,11 @@ import { AccordionBaseElement } from '../accordion/accordion-base-element';
  * @cssproperty --dds-official-banner-icon-color-hover - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted))
  */
 export default class DapDSOfficialWebsiteBanner extends AccordionBaseElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-stack': typeof DapDSStack;
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     static readonly styles: import('lit').CSSResult;
     headingRender(): import('lit-html').TemplateResult<1>;
     contentRender(): import('lit-html').TemplateResult<1>;

package/dist/components/official-website-banner/official-website-banner.component.js

@@ -0,0 +1,51 @@
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as i } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import "../../localization/localization.js";
+import o from "../accordion/accordion.scss.js";
+import { AccordionBaseElement as a } from "../accordion/accordion-base-element.js";
+import r from "../icon/icon.component.js";
+import n from "../stack/stack.component.js";
+import c from "./official-website-banner.scss.js";
+import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { translate as e } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+const t = class t extends a {
+  headingRender() {
+    var s;
+    return i` <span>
+      <dap-ds-stack direction="row" spacing="100">
+        <dap-ds-icon
+          size="xs"
+          name="shield-check-fill"
+          aria-hidden="true"></dap-ds-icon>
+        ${(s = this.heading) != null ? s : e("official-website-banner.heading")}
+      </dap-ds-stack>
+    </span>`;
+  }
+  contentRender() {
+    return i` <div
+      style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;">
+      <dap-ds-stack direction="row" spacing="200">
+        <dap-ds-icon name="lock-fill" aria-hidden="true"></dap-ds-icon>
+        <span style="font-weight: bold"
+          >${e("official-website-banner.heading-2")}</span
+        >
+      </dap-ds-stack>
+      <div style="font-size: var(--dds-font-sm)">
+        ${e("official-website-banner.content")}
+      </div>
+    </div>`;
+  }
+  render() {
+    return i` ${this.renderAccordion()} `;
+  }
+};
+t.tagName = "dap-ds-official-website-banner", t.dependencies = {
+  "dap-ds-stack": n,
+  "dap-ds-icon": r
+}, t.styles = m(`${o}${c}`);
+let d = t;
+export {
+  d as default
+};
+//# sourceMappingURL=official-website-banner.component.js.map

package/dist/components/official-website-banner/official-website-banner.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"official-website-banner.component.js","sources":["../../../src/components/official-website-banner/official-website-banner.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\n\nimport { translate } from '@/localization/localization'\n\nimport accordionStyles from '../accordion/accordion.scss?inline'\nimport { AccordionBaseElement } from '../accordion/accordion-base-element'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport officialStyles from './official-website-banner.scss?inline'\n\n/**\n * `dap-ds-official-website-banner`\n * @element dap-ds-official-website-banner\n * @summary An official website banner is a banner that displays that the website is an official website.\n * @title - Official website-banner\n *\n * @property { 'sm' | 'lg' } size - The size of the official website banner. Default is `sm`.\n * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided\n * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n *\n * @event {{ void }} dds-opened - Event fired when the accordion is opened.\n * @event {{ void }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n *\n * @cssproperty --dds-official-banner-background-color - The background color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-text-color - The text color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-heading-hover-color - The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-official-banner-border-radius - The border radius of the official website banner (default: 0)\n * @cssproperty --dds-official-banner-icon-color - The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-official-banner-icon-color-hover - The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted))\n */\nexport default class DapDSOfficialWebsiteBanner extends AccordionBaseElement {\n  static tagName = 'dap-ds-official-website-banner'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(`${accordionStyles}${officialStyles}`)\n\n  headingRender() {\n    return html` <span>\n      <dap-ds-stack direction=\"row\" spacing=\"100\">\n        <dap-ds-icon\n          size=\"xs\"\n          name=\"shield-check-fill\"\n          aria-hidden=\"true\"></dap-ds-icon>\n        ${this.heading ?? translate('official-website-banner.heading')}\n      </dap-ds-stack>\n    </span>`\n  }\n\n  contentRender() {\n    return html` <div\n      style=\"display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;\">\n      <dap-ds-stack direction=\"row\" spacing=\"200\">\n        <dap-ds-icon name=\"lock-fill\" aria-hidden=\"true\"></dap-ds-icon>\n        <span style=\"font-weight: bold\"\n          >${translate('official-website-banner.heading-2')}</span\n        >\n      </dap-ds-stack>\n      <div style=\"font-size: var(--dds-font-sm)\">\n        ${translate('official-website-banner.content')}\n      </div>\n    </div>`\n  }\n\n  render() {\n    return html` ${this.renderAccordion()} `\n  }\n}\n"],"names":["_DapDSOfficialWebsiteBanner","AccordionBaseElement","html","_a","translate","DapDSStack","DapDSIcon","unsafeCSS","accordionStyles","officialStyles","DapDSOfficialWebsiteBanner"],"mappings":";;;;;;;;;;;AAkDA,MAAqBA,IAArB,MAAqBA,UAAmCC,EAAqB;AAAA,EAU3E,gBAAgB;;AACP,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,WAMDC,IAAA,KAAK,YAAL,OAAAA,IAAgBC,EAAU,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAKpE,gBAAgB;AACP,WAAAF;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,aAKEE,EAAU,mCAAmC,CAAC;AAAA;AAAA;AAAA;AAAA,UAIjDA,EAAU,iCAAiC,CAAC;AAAA;AAAA;AAAA,EAAA;AAAA,EAKpD,SAAS;AACA,WAAAF,KAAQ,KAAK,gBAAA,CAAiB;AAAA,EAAA;AAEzC;AAvCEF,EAAO,UAAU,kCAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBK;AAAA,EAChB,eAAeC;AACjB,GAEAN,EAAgB,SAASO,EAAU,GAAGC,CAAe,GAAGC,CAAc,EAAE;AAR1E,IAAqBC,IAArBV;"}

package/dist/components/official-website-banner/official-website-banner.js

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

package/dist/components/official-website-banner/official-website-banner.js.map

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

package/dist/components/official-website-banner/official-website-banner.scss.js

@@ -0,0 +1,5 @@
+const o = "*,*: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}}:host{--dds-official-banner-background-color: var( --dds-background-brand-medium-inverted );--dds-official-banner-text-color: var(--dds-text-neutral-on-inverted);--dds-official-banner-icon-color: var(--dds-text-neutral-on-inverted);--dds-official-banner-heading-hover-color: var( --dds-background-brand-medium-inverted );--dds-official-banner-border-radius: 0;--dds-official-banner-icon-color-hover: var(--dds-text-neutral-on-inverted)}.accordion{border-radius:var(--dds-official-banner-border-radius);border-color:transparent;color:var(--dds-official-banner-text-color);--dds-accordion-background-color: var(--dds-official-banner-background-color)}.accordion .accordion__heading{outline-color:var(--dds-focus-inner-ring)}.accordion.accordion--sm [part=content]{padding:var(--dds-spacing-600) var(--dds-spacing-400);background-color:var(--dds-official-banner-background-color)}.accordion.accordion--sm .accordion__button{padding:var(--dds-spacing-100) var(--dds-spacing-300);font-size:var(--dds-font-2xs)}.accordion.accordion--sm .accordion__heading-text{color:var(--dds-official-banner-text-color)}.accordion.accordion--lg .accordion__content{padding:var(--dds-spacing-600) var(--dds-spacing-400);background-color:var(--dds-official-banner-background-color)}.accordion.accordion--lg .accordion__button{padding:var(--dds-spacing-400) var(--dds-spacing-600);font-size:var(--dds-font-sm)}.accordion.accordion--lg .accordion__heading-text{color:var(--dds-official-banner-text-color)}.accordion__heading:hover{background-color:var(--dds-official-banner-heading-hover-color)}.open-icon::part(icon){color:var(--dds-official-banner-icon-color)}.open-icon::part(icon):hover{color:var(--dds-official-banner-icon-color-hover)}.close-icon::part(icon){color:var(--dds-official-banner-icon-color)}.close-icon::part(icon):hover{color:var(--dds-official-banner-icon-color-hover)}";
+export {
+  o as default
+};
+//# sourceMappingURL=official-website-banner.scss.js.map

package/dist/components/official-website-banner/official-website-banner.scss.js.map

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

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

@@ -15,6 +15,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @csspart label - The label of the option group.
  */
 export default class DapDSOptionGroup extends DdsElement {
+    static tagName: string;
     /** The label of the option group */
     label?: string;
     /** Whether all options in the group are disabled */

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

@@ -0,0 +1,38 @@
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as p } from "../../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 { DdsElement as f } from "../../internal/dds-hu-element.js";
+import n from "./option-group.scss.js";
+import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, m = (o, l, a, c) => {
+  for (var t = void 0, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (t = i(l, a, t) || t);
+  return t && b(l, a, t), t;
+};
+const r = class r extends f {
+  render() {
+    return p`
+      <div part="base" class="option-group">
+        ${this.label ? p`<div part="label" class="option-group__label">
+              ${this.label}
+            </div>` : ""}
+        <div class="option-group__items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.tagName = "dap-ds-option-group", r.styles = v(n);
+let e = r;
+m([
+  d()
+], e.prototype, "label");
+m([
+  d({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+export {
+  e as default
+};
+//# sourceMappingURL=option-group.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.component.js","sources":["../../../src/components/option-group/option-group.component.ts"],"sourcesContent":["import { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './option-group.scss?inline'\n\n/**\n * `dap-ds-option-group`\n * @summary An option group is a container for grouping related option items.\n * Used with dap-ds-select to create grouped options that render as native optgroup elements.\n * @element dap-ds-option-group\n * @title - Option group\n *\n * @property {string} label - The label of the option group (displayed in native optgroup).\n * @property {boolean} disabled - Whether all options in the group are disabled.\n *\n * @slot - The option items in this group.\n *\n * @csspart base - The main option group container.\n * @csspart label - The label of the option group.\n */\nexport default class DapDSOptionGroup extends DdsElement {\n  static tagName = 'dap-ds-option-group'\n\n  /** The label of the option group */\n  @property() label?: string\n\n  /** Whether all options in the group are disabled */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div part=\"base\" class=\"option-group\">\n        ${this.label\n          ? html`<div part=\"label\" class=\"option-group__label\">\n              ${this.label}\n            </div>`\n          : ''}\n        <div class=\"option-group__items\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionGroup","DdsElement","html","unsafeCSS","styles","DapDSOptionGroup","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAsBA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAWvD,SAAS;AACA,WAAAC;AAAAA;AAAAA,UAED,KAAK,QACHA;AAAAA,gBACI,KAAK,KAAK;AAAA,sBAEd,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOd;AAxBEF,EAAO,UAAU,uBAQDA,EAAA,SAASG,EAAUC,CAAM;AAT3C,IAAqBC,IAArBL;AAIcM,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,OAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,UAAA;"}

package/dist/components/option-group/option-group.d.ts

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

package/dist/components/option-group/option-group.js

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

package/dist/components/option-group/option-group.js.map

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

package/dist/components/option-group/option-group.scss.js

@@ -0,0 +1,5 @@
+const t = "*,*: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}}:host{display:block}.option-group{display:flex;flex-direction:column}.option-group__label{padding:var(--dds-spacing-200) var(--dds-spacing-300);color:var(--dds-text-neutral-subtle);font-size:var(--dds-font-sm);font-weight:var(--dds-font-weight-semibold)}.option-group__items{display:flex;flex-direction:column}:host([disabled]) .option-group__label{color:var(--dds-text-neutral-disabled)}";
+export {
+  t as default
+};
+//# sourceMappingURL=option-group.scss.js.map

package/dist/components/option-group/option-group.scss.js.map

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

package/dist/components/option-item/option-item.component.d.ts

@@ -1,5 +1,7 @@
 import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as SystemCheckLine } from '../icons/system/system-check-line/system-check-line.component';
+import { default as DapDSStack } from '../stack/stack.component';
 declare const DapDSOptionItem_base: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -34,6 +36,11 @@ declare const DapDSOptionItem_base: typeof DdsElement & {
  * @cssproperty --dds-option-item-selected-icon-width - The width of the selected icon (default: var(--dds-spacing-400))
  */
 export default class DapDSOptionItem extends DapDSOptionItem_base {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-stack': typeof DapDSStack;
+        'dap-ds-icon-check-line': typeof SystemCheckLine;
+    };
     /** The selected state of the option item */
     selected?: boolean;
     /** Wheteher the item is selectable, whether it shows the selected icon */

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

@@ -0,0 +1,122 @@
+import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as p, html as a } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { queryAssignedElements as m } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { DdsElement as x } from "../../internal/dds-hu-element.js";
+import { SizedMixin as b } from "../../internal/mixin/sizedMixin.js";
+import _ from "../icons/system/system-check-line/system-check-line.component.js";
+import v from "../stack/stack.component.js";
+import y from "./option-item.scss.js";
+import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var $ = Object.defineProperty, i = (f, t, r, c) => {
+  for (var o = void 0, n = f.length - 1, h; n >= 0; n--)
+    (h = f[n]) && (o = h(t, r, o) || o);
+  return o && $(t, r, o), o;
+};
+const d = class d extends b(x) {
+  constructor() {
+    super(...arguments), this.selectable = "true", this.selectedIconPosition = "suffix", this._hasPrefix = !1, this._hasSuffix = !1;
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._hasPrefix = !!this._prefixNode.length, this._hasSuffix = !!this._postfixNode.length, this.addEventListener("click", this.handleClick), this.setAttribute("role", "option");
+  }
+  updated(t) {
+    super.updated(t), t.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), t.has("selected") && this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleClick(t) {
+    this.disabled && (t.preventDefault(), t.stopPropagation());
+  }
+  get optionText() {
+    var t, r, c;
+    return (c = (r = this.label) != null ? r : (t = this.textContent) == null ? void 0 : t.trim()) != null ? c : "";
+  }
+  render() {
+    return a`
+      <div
+        part="base"
+        class=${l("option-item", `option-item--${this.size}`, {
+      "option-item--selected": this.selected,
+      "option-item--disabled": this.disabled,
+      "option-item--focused": this.focused
+    })}>
+        <dap-ds-stack direction="row" class="option-item__stack">
+          ${this.selectable === "true" && this.selectedIconPosition === "prefix" ? a`<div class=${"selected-icon"}>
+                ${this.selected ? a`<dap-ds-icon-check-line
+                      size="16"></dap-ds-icon-check-line>` : p}
+              </div>` : p}
+          <div
+            part="prefix"
+            class=${l("option-item__prefix", {
+      "option-item__prefix--visible": !!this._hasPrefix
+    })}>
+            <slot name="prefix"></slot>
+          </div>
+          <div part="label" class="label">
+            <slot></slot>
+          </div>
+          <div
+            part="suffix"
+            class=${l("option-item__suffix", {
+      "option-item__suffix--visible": !!this._hasSuffix
+    })}>
+            <slot name="suffix"></slot>
+          </div>
+        </dap-ds-stack>
+        ${this.selectable === "true" && this.selectedIconPosition === "suffix" ? a`<div class=${"selected-icon-suffix"}>
+              ${this.selected ? a`<dap-ds-icon-check-line
+                    size="16"></dap-ds-icon-check-line>` : p}
+            </div>` : p}
+        <span
+          part="high-contrast"
+          class=${l("option-item__high-contrast", {
+      "option-item__high-contrast--disabled": this.disabled
+    })}></span>
+      </div>
+    `;
+  }
+};
+d.tagName = "dap-ds-option-item", d.dependencies = {
+  "dap-ds-stack": v,
+  "dap-ds-icon-check-line": _
+}, d.styles = k(y);
+let e = d;
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "selected");
+i([
+  s({ type: String })
+], e.prototype, "selectable");
+i([
+  s({ type: String })
+], e.prototype, "selectedIconPosition");
+i([
+  s({ reflect: !0 })
+], e.prototype, "value");
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+i([
+  s({ type: Boolean })
+], e.prototype, "focused");
+i([
+  s()
+], e.prototype, "label");
+i([
+  m({ slot: "prefix" })
+], e.prototype, "_prefixNode");
+i([
+  m({ slot: "suffix" })
+], e.prototype, "_postfixNode");
+i([
+  u()
+], e.prototype, "_hasPrefix");
+i([
+  u()
+], e.prototype, "_hasSuffix");
+export {
+  e as default
+};
+//# sourceMappingURL=option-item.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option-item.component.js","sources":["../../../src/components/option-item/option-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport SystemCheckLine from '../icons/system/system-check-line/system-check-line.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './option-item.scss?inline'\n\n/**\n * `dap-ds-option-item`\n * @summary An option item is a selectable item in a list of options.\n * @element dap-ds-option-item\n * @title - Option item\n * @group select,combobox\n * *\n * @csspart base - The main option item container.\n * @csspart prefix - The prefix of the option item.\n * @csspart label - The label of the option item.\n * @csspart suffix - The suffix of the option item.\n *\n * @slot prefix - The prefix of the option item.\n * @slot - The label of the option item.\n * @slot suffix - The suffix of the option item.\n *\n * @cssproperty --dds-option-item-padding-vertical - The vertical padding of the option item (default: var(--dds-spacing-100))\n * @cssproperty --dds-option-item-padding-horizontal - The horizontal padding of the option item (default: var(--dds-spacing-200))\n * @cssproperty --dds-option-item-border-radius - The border radius of the option item (default: var(--dds-radius-small, 4px))\n * @cssproperty --dds-option-item-color - The text color of the option item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-option-item-hover-bg - The background color of the option item when hovered (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-option-item-active-bg - The background color of the option item when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-option-item-disabled-color - The text color of the option item when disabled (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-option-item-high-contrast-border - The border color of the option item in high contrast mode (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-option-item-selected-font-weight - The font weight of the option item when selected (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-option-item-xs-font-size - The font size of the option item in extra small size (default: var(--dds-font-sm))\n * @cssproperty --dds-option-item-lg-font-size - The font size of the option item in large size (default: var(--dds-font-lg))\n * @cssproperty --dds-option-item-selected-icon-width - The width of the selected icon (default: var(--dds-spacing-400))\n */\nexport default class DapDSOptionItem extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-option-item'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon-check-line': SystemCheckLine,\n  }\n\n  /** The selected state of the option item */\n  @property({ type: Boolean, reflect: true }) selected?: boolean\n\n  /** Wheteher the item is selectable, whether it shows the selected icon */\n  @property({ type: String }) selectable? = 'true'\n\n  /** The position of the selected icon */\n  @property({ type: String }) selectedIconPosition? = 'suffix'\n\n  /** The value of the option item */\n  @property({ reflect: true }) value?: any\n\n  /** The disabled state of the option item */\n  @property({ type: Boolean, reflect: true }) disabled?: boolean\n\n  /** The focused state of the option item */\n  @property({ type: Boolean }) focused?: boolean\n\n  /** The label of the option item, it can be a simplier version of an item */\n  @property() label?: string\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'suffix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @state() private _hasPrefix = false\n  @state() private _hasSuffix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasSuffix = !!this._postfixNode.length\n\n    this.addEventListener('click', this.handleClick)\n    this.setAttribute('role', 'option')\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('disabled')) {\n      this.setAttribute('tabindex', this.disabled ? '-1' : '0')\n      this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false')\n    }\n\n    if (_changedProperties.has('selected')) {\n      this.setAttribute('aria-selected', this.selected ? 'true' : 'false')\n    }\n  }\n\n  private handleClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  public get optionText(): string {\n    return this.label ?? this.textContent?.trim() ?? ''\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('option-item', `option-item--${this.size}`, {\n          'option-item--selected': this.selected,\n          'option-item--disabled': this.disabled,\n          'option-item--focused': this.focused,\n        })}>\n        <dap-ds-stack direction=\"row\" class=\"option-item__stack\">\n          ${this.selectable === 'true' && this.selectedIconPosition === 'prefix'\n            ? html`<div class=${'selected-icon'}>\n                ${this.selected\n                  ? html`<dap-ds-icon-check-line\n                      size=\"16\"></dap-ds-icon-check-line>`\n                  : nothing}\n              </div>`\n            : nothing}\n          <div\n            part=\"prefix\"\n            class=${clsx('option-item__prefix', {\n              'option-item__prefix--visible': !!this._hasPrefix,\n            })}>\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div part=\"label\" class=\"label\">\n            <slot></slot>\n          </div>\n          <div\n            part=\"suffix\"\n            class=${clsx('option-item__suffix', {\n              'option-item__suffix--visible': !!this._hasSuffix,\n            })}>\n            <slot name=\"suffix\"></slot>\n          </div>\n        </dap-ds-stack>\n        ${this.selectable === 'true' && this.selectedIconPosition === 'suffix'\n          ? html`<div class=${'selected-icon-suffix'}>\n              ${this.selected\n                ? html`<dap-ds-icon-check-line\n                    size=\"16\"></dap-ds-icon-check-line>`\n                : nothing}\n            </div>`\n          : nothing}\n        <span\n          part=\"high-contrast\"\n          class=${clsx('option-item__high-contrast', {\n            'option-item__high-contrast--disabled': this.disabled,\n          })}></span>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSOptionItem","SizedMixin","DdsElement","_changedProperties","event","_c","_b","_a","html","clsx","nothing","DapDSStack","SystemCheckLine","unsafeCSS","styles","DapDSOptionItem","__decorateClass","property","queryAssignedElements","state"],"mappings":"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"}

package/dist/components/option-item/option-item.d.ts

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

package/dist/components/option-item/option-item.js

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

package/dist/components/option-item/option-item.js.map

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

package/dist/components/option-item/option-item.scss.js

@@ -0,0 +1,5 @@
+const t = "*,*: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}}:host{display:block;--dds-option-item-padding-vertical: var(--dds-spacing-100);--dds-option-item-padding-horizontal: var(--dds-spacing-200);--dds-option-item-border-radius: var(--dds-radius-small, 4px);--dds-option-item-color: var(--dds-text-neutral-base);--dds-option-item-hover-bg: var(--dds-background-neutral-medium);--dds-option-item-active-bg: var(--dds-background-neutral-strong);--dds-option-item-disabled-color: var(--dds-text-neutral-disabled);--dds-option-item-high-contrast-border: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-option-item-selected-font-weight: var(--dds-font-weight-bold);--dds-option-item-xs-font-size: var(--dds-font-sm);--dds-option-item-lg-font-size: var(--dds-font-lg);--dds-option-item-selected-icon-width: var(--dds-spacing-400)}:host(:focus){outline:none}.option-item__high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:100%;height:100%;margin:calc(var(--dds-option-item-padding-vertical) * -1) calc(var(--dds-option-item-padding-horizontal) * -1);border:var(--dds-border-width-large) solid var(--dds-option-item-high-contrast-border);border-radius:var(--dds-option-item-border-radius)}.option-item__high-contrast:hover{border-width:var(--dds-border-width-large)}.option-item__high-contrast:active{border-width:var(--dds-border-width-xlarge)}.option-item__high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.option-item{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:flex;position:relative;padding:var(--dds-option-item-padding-vertical) var(--dds-option-item-padding-horizontal);border-radius:var(--dds-option-item-border-radius);color:var(--dds-option-item-color);cursor:pointer}.option-item:hover{background-color:var(--dds-option-item-hover-bg)}.option-item:active{background-color:var(--dds-option-item-active-bg)}.option-item--focused{outline-style:solid}.option-item--selected{font-weight:var(--dds-option-item-selected-font-weight)}.option-item--disabled{color:var(--dds-option-item-disabled-color);cursor:not-allowed;pointer-events:none}.option-item--xs{font-size:var(--dds-option-item-xs-font-size)}.option-item--lg{font-size:var(--dds-option-item-lg-font-size)}.option-item__stack::part(base){flex-wrap:nowrap}.option-item__prefix,.option-item__suffix{display:none}.option-item__prefix--visible,.option-item__suffix--visible{display:block}.selected-icon{min-width:var(--dds-option-item-selected-icon-width)}.selected-icon-suffix{display:flex;min-width:var(--dds-option-item-selected-icon-width);margin-left:auto;text-align:right}";
+export {
+  t as default
+};
+//# sourceMappingURL=option-item.scss.js.map

package/dist/components/option-item/option-item.scss.js.map

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

package/dist/components/option-list/option-list.component.d.ts

@@ -27,6 +27,10 @@ declare const DapDSOptionList_base: typeof DdsElement & {
  * @slot - The default slot for the options.
  */
 export default class DapDSOptionList extends DapDSOptionList_base {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-option-item': typeof DapDSOptionItem;
+    };
     /** The filter text of the option list */
     filterText: string;
     /** The value of the option list */