dap-design-system 0.62.3 → 0.63.0

package/dist/components/code-puncher/code-puncher.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-puncher.component.js","sources":["../../../src/components/code-puncher/code-puncher.component.ts"],"sourcesContent":["import { ContextProvider } from '@lit/context'\nimport clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\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 DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport { CodePuncherContext, codePuncherContext } from './code-puncher.context'\nimport styles from './code-puncher.scss?inline'\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\n/**\n * `dap-ds-code-puncher`\n * @summary A composable PIN/OTP input component for entering verification codes.\n * @element dap-ds-code-puncher\n * @title - Code Puncher\n * @group code-puncher\n *\n * @property {string} value - The complete code value.\n * @property {boolean} mask - Mask input like password. Default is false.\n * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.\n * @property {string} placeholder - Placeholder character for empty slots.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.\n * @property {string} label - The label of the component.\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 component.\n * @property {string} tooltip - The tooltip of the component.\n * @property {string} feedback - The feedback message.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.\n * @property {'success' | 'error'} status - The status of the component.\n * @property {boolean} disabled - Disable all slots. Default is false.\n * @property {boolean} readonly - Read-only state. Default is false.\n * @property {boolean} required - Required for form validation. Default is false.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} name - Form element name.\n * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.\n *\n * @event {{ value: string, index: number }} dds-input - Fires on each digit input.\n * @event {{ value: string }} dds-change - Fires when value changes.\n * @event {{ value: string }} dds-complete - Fires when all slots are filled.\n * @event dds-focus - Fires when component gains focus.\n * @event dds-blur - Fires when component loses focus.\n *\n * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n *\n * @csspart base - The main container.\n * @csspart slots - The slots container.\n * @csspart label - The label element.\n * @csspart description - The description element.\n * @csspart feedback - The feedback element.\n */\nexport default class DapDSCodePuncher extends GenericFormElement {\n  static tagName = 'dap-ds-code-puncher'\n\n  static dependencies = {\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-feedback': DapDSFeedback,\n  }\n\n  @property({ type: Boolean, reflect: true }) mask = false\n  @property() pattern = '[0-9]'\n  @property() placeholder = ''\n  @property() autocomplete = 'one-time-code'\n\n  @state() private _slots: DapDSCodePuncherSlot[] = []\n  @state() private _activeIndex = -1\n  @state() private _chars: string[] = []\n  @state() private _hasFocus = false\n\n  private _rawValue = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _patternRegex: RegExp = /^[0-9]$/\n  private _provider!: ContextProvider<typeof codePuncherContext>\n\n  private _getContextValue(): CodePuncherContext {\n    return {\n      registerSlot: this._registerSlot.bind(this),\n      unregisterSlot: this._unregisterSlot.bind(this),\n      getCharAt: this._getCharAt.bind(this),\n      setCharAt: this._setCharAt.bind(this),\n      focusSlot: this._focusSlot.bind(this),\n      handleKeydown: this._handleKeydown.bind(this),\n      handlePaste: this._handlePaste.bind(this),\n      activeIndex: this._activeIndex,\n      mask: this.mask,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      size: this.size as CommonFormElementSize,\n      placeholder: this.placeholder,\n      pattern: this._patternRegex,\n      status: this.status,\n      autocomplete: this.autocomplete,\n      slotCount: this._slots.length,\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Initialize the context provider\n    this._provider = new ContextProvider(this, {\n      context: codePuncherContext,\n      initialValue: this._getContextValue(),\n    })\n  }\n\n  private _updateContext(): void {\n    if (this._provider) {\n      this._provider.setValue(this._getContextValue())\n    }\n  }\n\n  get value(): string {\n    return this._chars.join('')\n  }\n\n  set value(v: string) {\n    this._rawValue = v\n    if (this._slots.length === 0) return\n    const chars = v.split('')\n    this._chars = Array.from(\n      { length: this._slots.length },\n      (_, i) => chars[i] ?? '',\n    )\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap<any>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('pattern')) {\n      this._patternRegex = new RegExp(`^${this.pattern}$`)\n    }\n    // Update context when relevant properties change\n    this._updateContext()\n  }\n\n  private _registerSlot(slot: DapDSCodePuncherSlot): number {\n    const index = this._slots.length\n    this._slots = [...this._slots, slot]\n    this._chars = [...this._chars, this._rawValue[index] ?? '']\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n    return index\n  }\n\n  private _unregisterSlot(slot: DapDSCodePuncherSlot): void {\n    const index = this._slots.indexOf(slot)\n    if (index > -1) {\n      this._slots = this._slots.filter(s => s !== slot)\n      this._chars = this._chars.filter((_, i) => i !== index)\n      this.requestUpdate()\n    }\n  }\n\n  private _getCharAt(index: number): string {\n    return this._chars[index] || ''\n  }\n\n  private _setCharAt(index: number, char: string): void {\n    const oldValue = this.value\n    this._chars = this._chars.map((c, i) => (i === index ? char : c))\n    this.internals.setFormValue(this.value)\n\n    this.emit('dds-input', { value: this.value, index })\n\n    if (this.value !== oldValue) {\n      this.emit('dds-change', { value: this.value })\n    }\n\n    // Check if complete\n    if (\n      this._chars.length > 0 &&\n      this._chars.every(c => c !== '') &&\n      char !== ''\n    ) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n    this.setValidity()\n  }\n\n  private _focusSlot(index: number): void {\n    if (index >= 0 && index < this._slots.length) {\n      this._activeIndex = index\n      this._slots[index]?.focus()\n      this.requestUpdate()\n    }\n  }\n\n  private _handleKeydown(index: number, event: KeyboardEvent): void {\n    const char = this._chars[index] || ''\n\n    switch (event.key) {\n      case 'Backspace':\n        if (char === '' && index > 0) {\n          // Empty slot, move to previous and clear\n          this._setCharAt(index - 1, '')\n          this._focusSlot(index - 1)\n        } else {\n          // Clear current\n          this._setCharAt(index, '')\n        }\n        event.preventDefault()\n        break\n\n      case 'Delete':\n        this._setCharAt(index, '')\n        event.preventDefault()\n        break\n\n      case 'ArrowLeft':\n        if (index > 0) {\n          this._focusSlot(index - 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'ArrowRight':\n        if (index < this._slots.length - 1) {\n          this._focusSlot(index + 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'Home':\n        this._focusSlot(0)\n        event.preventDefault()\n        break\n\n      case 'End':\n        this._focusSlot(this._slots.length - 1)\n        event.preventDefault()\n        break\n    }\n  }\n\n  private _handlePaste(event: ClipboardEvent): void {\n    event.preventDefault()\n\n    const pastedText = event.clipboardData?.getData('text') || ''\n    // Remove common separators and filter by pattern\n    const cleanedText = pastedText\n      .replace(/[-·\\s]/g, '')\n      .split('')\n      .filter(char => this._patternRegex.test(char))\n\n    // Distribute characters starting from first slot\n    cleanedText.slice(0, this._slots.length).forEach((char, i) => {\n      this._chars[i] = char\n    })\n\n    this.internals.setFormValue(this.value)\n    this.emit('dds-change', { value: this.value })\n\n    // Focus last filled slot or next empty\n    const lastFilledIndex = Math.min(\n      cleanedText.length - 1,\n      this._slots.length - 1,\n    )\n    const nextEmptyIndex = this._chars.findIndex(c => c === '')\n\n    if (nextEmptyIndex > -1) {\n      this._focusSlot(nextEmptyIndex)\n    } else {\n      this._focusSlot(lastFilledIndex)\n    }\n\n    // Check if complete\n    if (this._chars.every(c => c !== '')) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n  }\n\n  private _handleFocusIn(): void {\n    if (!this._hasFocus) {\n      this._hasFocus = true\n      this.emit('dds-focus')\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    // Check if focus is moving to another element within this component\n    const relatedTarget = event.relatedTarget as HTMLElement\n    if (!this.contains(relatedTarget)) {\n      this._hasFocus = false\n      this._activeIndex = -1\n      this.emit('dds-blur')\n      this.requestUpdate()\n    }\n  }\n\n  setActiveIndex(index: number): void {\n    this._activeIndex = index\n    this.requestUpdate()\n  }\n\n  public get focusElement(): HTMLElement {\n    return this._slots[0] || this\n  }\n\n  override focus(): void {\n    // Focus first empty slot or first slot\n    const firstEmptyIndex = this._chars.findIndex(c => c === '')\n    const targetIndex = firstEmptyIndex > -1 ? firstEmptyIndex : 0\n    this._focusSlot(targetIndex)\n  }\n\n  setValidity(): void {\n    if (this.required && this._chars.some(c => c === '')) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'Please fill in all digits',\n        this._slots[0],\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('code-puncher', `code-puncher--${this.size}`, {\n          'code-puncher--disabled': this.disabled,\n          'code-puncher--readonly': this.readonly,\n          'code-puncher--success': this.status === 'success',\n          'code-puncher--error': this.status === 'error',\n          'code-puncher--focused': this._hasFocus,\n        })}\n        role=\"group\"\n        aria-label=${ifDefined(this.label || 'Code input')}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}>\n        ${this.label || this.tooltip\n          ? html`\n              <div class=\"label-container\">\n                ${this.label\n                  ? html`<dap-ds-form-label\n                      part=\"label\"\n                      id=\"label\"\n                      .size=${this.size}\n                      .required=${this.required}\n                      .requiredLabel=${this.requiredLabel}\n                      .optional=${this.optional}\n                      .optionalLabel=${this.optionalLabel}\n                      .disabled=${this.disabled}\n                      class=${clsx('label')}\n                      .noMargin=${!!this.description}\n                      .hideLabel=${this.hideLabel}\n                      label=${ifDefined(this.label)}>\n                    </dap-ds-form-label>`\n                  : nothing}\n                ${this.tooltip\n                  ? html`<dap-ds-tooltip\n                      part=\"tooltip\"\n                      content=${this.tooltip}\n                      mode=\"toggle\"\n                      floatingStrategy=\"fixed\"\n                      placement=${this.tooltipPlacement}>\n                      <dap-ds-icon-button\n                        clean\n                        class=\"info-button\"\n                        slot=\"trigger\"\n                        aria-label=${this.tooltipAriaLabel ||\n                        'More information'}\n                        size=${(this.size as 'xs' | 'sm' | 'lg') || 'sm'}\n                        iconSize=${this.size === 'xs' ? '16' : '22'}>\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                  : nothing}\n              </div>\n            `\n          : nothing}\n        ${this.description\n          ? html`\n              <dap-ds-typography\n                part=\"description\"\n                variant=\"description\"\n                class=${clsx('input-description')}\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                id=\"description\">\n                ${this.description}\n              </dap-ds-typography>\n            `\n          : nothing}\n        <div part=\"slots\" class=\"code-puncher__slots\">\n          <slot></slot>\n        </div>\n        ${this.feedback && this._renderFeedback()}\n      </div>\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLElement\n    target.setAttribute('slot', 'icon')\n  }\n}\n"],"names":["_DapDSCodePuncher","GenericFormElement","ContextProvider","codePuncherContext","v","chars","_","_a","changedProperties","slot","index","s","char","oldValue","c","i","event","cleanedText","lastFilledIndex","nextEmptyIndex","relatedTarget","firstEmptyIndex","targetIndex","html","clsx","ifDefined","nothing","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSCodePuncher","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"code-puncher.component.js","sources":["../../../src/components/code-puncher/code-puncher.component.ts"],"sourcesContent":["import { ContextProvider } from '@lit/context'\nimport clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\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 DapDSTooltip from '../tooltip/tooltip.component'\nimport DapDSTypography from '../typography/typography.component'\nimport { CodePuncherContext, codePuncherContext } from './code-puncher.context'\nimport styles from './code-puncher.scss?inline'\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\n/**\n * `dap-ds-code-puncher`\n * @summary A composable PIN/OTP input component for entering verification codes.\n * @element dap-ds-code-puncher\n * @title - Code Puncher\n * @group code-puncher\n *\n * @property {string} value - The complete code value.\n * @property {boolean} mask - Mask input like password. Default is false.\n * @property {string} pattern - Regex pattern for allowed characters. Default is '[0-9]'.\n * @property {string} placeholder - Placeholder character for empty slots.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the slots. Default is 'sm'.\n * @property {string} label - The label of the component.\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 component.\n * @property {string} tooltip - The tooltip of the component.\n * @property {string} feedback - The feedback message.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type.\n * @property {'success' | 'error'} status - The status of the component.\n * @property {boolean} disabled - Disable all slots. Default is false.\n * @property {boolean} readonly - Read-only state. Default is false.\n * @property {boolean} required - Required for form validation. Default is false.\n * @property {string} requiredLabel - Indicator of required text. (default: '*')\n * @property {string} name - Form element name.\n * @property {string} autocomplete - Autocomplete hint. Default is 'one-time-code'.\n *\n * @event {{ value: string, index: number }} dds-input - Fires on each digit input.\n * @event {{ value: string }} dds-change - Fires when value changes.\n * @event {{ value: string }} dds-complete - Fires when all slots are filled.\n * @event dds-focus - Fires when component gains focus.\n * @event dds-blur - Fires when component loses focus.\n *\n * @slot default - Slot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.\n *\n * @csspart base - The main container.\n * @csspart slots - The slots container.\n * @csspart label - The label element.\n * @csspart description - The description element.\n * @csspart feedback - The feedback element.\n * @csspart tooltip - The tooltip of the code puncher.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n */\nexport default class DapDSCodePuncher extends GenericFormElement {\n  static tagName = 'dap-ds-code-puncher'\n\n  static dependencies = {\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-feedback': DapDSFeedback,\n  }\n\n  @property({ type: Boolean, reflect: true }) mask = false\n  @property() pattern = '[0-9]'\n  @property() placeholder = ''\n  @property() autocomplete = 'one-time-code'\n\n  @state() private _slots: DapDSCodePuncherSlot[] = []\n  @state() private _activeIndex = -1\n  @state() private _chars: string[] = []\n  @state() private _hasFocus = false\n\n  private _rawValue = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _patternRegex: RegExp = /^[0-9]$/\n  private _provider!: ContextProvider<typeof codePuncherContext>\n\n  private _getContextValue(): CodePuncherContext {\n    return {\n      registerSlot: this._registerSlot.bind(this),\n      unregisterSlot: this._unregisterSlot.bind(this),\n      getCharAt: this._getCharAt.bind(this),\n      setCharAt: this._setCharAt.bind(this),\n      focusSlot: this._focusSlot.bind(this),\n      handleKeydown: this._handleKeydown.bind(this),\n      handlePaste: this._handlePaste.bind(this),\n      activeIndex: this._activeIndex,\n      mask: this.mask,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      size: this.size as CommonFormElementSize,\n      placeholder: this.placeholder,\n      pattern: this._patternRegex,\n      status: this.status,\n      autocomplete: this.autocomplete,\n      slotCount: this._slots.length,\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    // Initialize the context provider\n    this._provider = new ContextProvider(this, {\n      context: codePuncherContext,\n      initialValue: this._getContextValue(),\n    })\n  }\n\n  private _updateContext(): void {\n    if (this._provider) {\n      this._provider.setValue(this._getContextValue())\n    }\n  }\n\n  get value(): string {\n    return this._chars.join('')\n  }\n\n  set value(v: string) {\n    this._rawValue = v\n    if (this._slots.length === 0) return\n    const chars = v.split('')\n    this._chars = Array.from(\n      { length: this._slots.length },\n      (_, i) => chars[i] ?? '',\n    )\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n  }\n\n  protected willUpdate(changedProperties: PropertyValueMap<any>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('pattern')) {\n      this._patternRegex = new RegExp(`^${this.pattern}$`)\n    }\n    // Update context when relevant properties change\n    this._updateContext()\n  }\n\n  private _registerSlot(slot: DapDSCodePuncherSlot): number {\n    const index = this._slots.length\n    this._slots = [...this._slots, slot]\n    this._chars = [...this._chars, this._rawValue[index] ?? '']\n    this.internals.setFormValue(this.value)\n    this.requestUpdate()\n    return index\n  }\n\n  private _unregisterSlot(slot: DapDSCodePuncherSlot): void {\n    const index = this._slots.indexOf(slot)\n    if (index > -1) {\n      this._slots = this._slots.filter(s => s !== slot)\n      this._chars = this._chars.filter((_, i) => i !== index)\n      this.requestUpdate()\n    }\n  }\n\n  private _getCharAt(index: number): string {\n    return this._chars[index] || ''\n  }\n\n  private _setCharAt(index: number, char: string): void {\n    const oldValue = this.value\n    this._chars = this._chars.map((c, i) => (i === index ? char : c))\n    this.internals.setFormValue(this.value)\n\n    this.emit('dds-input', { value: this.value, index })\n\n    if (this.value !== oldValue) {\n      this.emit('dds-change', { value: this.value })\n    }\n\n    // Check if complete\n    if (\n      this._chars.length > 0 &&\n      this._chars.every(c => c !== '') &&\n      char !== ''\n    ) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n    this.setValidity()\n  }\n\n  private _focusSlot(index: number): void {\n    if (index >= 0 && index < this._slots.length) {\n      this._activeIndex = index\n      this._slots[index]?.focus()\n      this.requestUpdate()\n    }\n  }\n\n  private _handleKeydown(index: number, event: KeyboardEvent): void {\n    const char = this._chars[index] || ''\n\n    switch (event.key) {\n      case 'Backspace':\n        if (char === '' && index > 0) {\n          // Empty slot, move to previous and clear\n          this._setCharAt(index - 1, '')\n          this._focusSlot(index - 1)\n        } else {\n          // Clear current\n          this._setCharAt(index, '')\n        }\n        event.preventDefault()\n        break\n\n      case 'Delete':\n        this._setCharAt(index, '')\n        event.preventDefault()\n        break\n\n      case 'ArrowLeft':\n        if (index > 0) {\n          this._focusSlot(index - 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'ArrowRight':\n        if (index < this._slots.length - 1) {\n          this._focusSlot(index + 1)\n        }\n        event.preventDefault()\n        break\n\n      case 'Home':\n        this._focusSlot(0)\n        event.preventDefault()\n        break\n\n      case 'End':\n        this._focusSlot(this._slots.length - 1)\n        event.preventDefault()\n        break\n    }\n  }\n\n  private _handlePaste(event: ClipboardEvent): void {\n    event.preventDefault()\n\n    const pastedText = event.clipboardData?.getData('text') || ''\n    // Remove common separators and filter by pattern\n    const cleanedText = pastedText\n      .replace(/[-·\\s]/g, '')\n      .split('')\n      .filter(char => this._patternRegex.test(char))\n\n    // Distribute characters starting from first slot\n    cleanedText.slice(0, this._slots.length).forEach((char, i) => {\n      this._chars[i] = char\n    })\n\n    this.internals.setFormValue(this.value)\n    this.emit('dds-change', { value: this.value })\n\n    // Focus last filled slot or next empty\n    const lastFilledIndex = Math.min(\n      cleanedText.length - 1,\n      this._slots.length - 1,\n    )\n    const nextEmptyIndex = this._chars.findIndex(c => c === '')\n\n    if (nextEmptyIndex > -1) {\n      this._focusSlot(nextEmptyIndex)\n    } else {\n      this._focusSlot(lastFilledIndex)\n    }\n\n    // Check if complete\n    if (this._chars.every(c => c !== '')) {\n      this.emit('dds-complete', { value: this.value })\n    }\n\n    this.requestUpdate()\n  }\n\n  private _handleFocusIn(): void {\n    if (!this._hasFocus) {\n      this._hasFocus = true\n      this.emit('dds-focus')\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    // Check if focus is moving to another element within this component\n    const relatedTarget = event.relatedTarget as HTMLElement\n    if (!this.contains(relatedTarget)) {\n      this._hasFocus = false\n      this._activeIndex = -1\n      this.emit('dds-blur')\n      this.requestUpdate()\n    }\n  }\n\n  setActiveIndex(index: number): void {\n    this._activeIndex = index\n    this.requestUpdate()\n  }\n\n  public get focusElement(): HTMLElement {\n    return this._slots[0] || this\n  }\n\n  override focus(): void {\n    // Focus first empty slot or first slot\n    const firstEmptyIndex = this._chars.findIndex(c => c === '')\n    const targetIndex = firstEmptyIndex > -1 ? firstEmptyIndex : 0\n    this._focusSlot(targetIndex)\n  }\n\n  setValidity(): void {\n    if (this.required && this._chars.some(c => c === '')) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'Please fill in all digits',\n        this._slots[0],\n      )\n    } else {\n      this.internals.setValidity({})\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('code-puncher', `code-puncher--${this.size}`, {\n          'code-puncher--disabled': this.disabled,\n          'code-puncher--readonly': this.readonly,\n          'code-puncher--success': this.status === 'success',\n          'code-puncher--error': this.status === 'error',\n          'code-puncher--focused': this._hasFocus,\n        })}\n        role=\"group\"\n        aria-label=${ifDefined(this.label || 'Code input')}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}>\n        ${this.label || this.tooltip\n          ? html`\n              <div class=\"label-container\">\n                ${formLabelTemplate({\n                  label: this.label,\n                  id: 'label',\n                  size: this.size,\n                  required: this.required,\n                  requiredLabel: this.requiredLabel,\n                  optional: this.optional,\n                  optionalLabel: this.optionalLabel,\n                  disabled: this.disabled,\n                  noMargin: !!this.description,\n                  hideLabel: this.hideLabel,\n                })}\n                ${this.tooltip\n                  ? html`<dap-ds-tooltip\n                      part=\"tooltip\"\n                      content=${this.tooltip}\n                      mode=\"toggle\"\n                      floatingStrategy=\"fixed\"\n                      placement=${this.tooltipPlacement}>\n                      <dap-ds-icon-button\n                        clean\n                        class=\"info-button\"\n                        slot=\"trigger\"\n                        aria-label=${this.tooltipAriaLabel ||\n                        'More information'}\n                        size=${(this.size as 'xs' | 'sm' | 'lg') || 'sm'}\n                        iconSize=${this.size === 'xs' ? '16' : '22'}>\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                  : nothing}\n              </div>\n            `\n          : nothing}\n        ${this.description\n          ? html`\n              <dap-ds-typography\n                part=\"description\"\n                variant=\"description\"\n                class=${clsx('input-description')}\n                size=${ifDefined(this.size as CommonFormElementSize)}\n                id=\"description\">\n                ${this.description}\n              </dap-ds-typography>\n            `\n          : nothing}\n        <div part=\"slots\" class=\"code-puncher__slots\">\n          <slot></slot>\n        </div>\n        ${this.feedback && this._renderFeedback()}\n      </div>\n    `\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        role=\"alert\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=\"${ifDefined(this.size as 'lg' | 'sm' | 'xs')}\"\n        .subtle=${this.subtle}\n        id=\"feedback\">\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLElement\n    target.setAttribute('slot', 'icon')\n  }\n}\n"],"names":["_DapDSCodePuncher","GenericFormElement","ContextProvider","codePuncherContext","v","chars","_","_a","changedProperties","slot","index","char","oldValue","c","i","event","cleanedText","lastFilledIndex","nextEmptyIndex","relatedTarget","firstEmptyIndex","targetIndex","html","clsx","ifDefined","formLabelTemplate","nothing","DapDSFormLabel","DapDSTooltip","DapDSIconButton","DapDSIcon","DapDSTypography","DapDSFeedback","unsafeCSS","styles","DapDSCodePuncher","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/code-puncher/code-puncher.context.js

@@ -1,4 +1,4 @@
-import { createContext as e } from "../../node_modules/@lit/context/lib/create-context.js";
+import { createContext as e } from "@lit/context";
 const o = e(
   "dap-ds-code-puncher-context"
 );

package/dist/components/code-puncher/code-puncher.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-puncher.context.js","sources":["../../../src/components/code-puncher/code-puncher.context.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nimport type { CommonFormElementSize } from '@/common/types'\n\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\nexport interface CodePuncherContext {\n  registerSlot: (slot: DapDSCodePuncherSlot) => number\n  unregisterSlot: (slot: DapDSCodePuncherSlot) => void\n  getCharAt: (index: number) => string\n  setCharAt: (index: number, char: string) => void\n  focusSlot: (index: number) => void\n  handleKeydown: (index: number, event: KeyboardEvent) => void\n  handlePaste: (event: ClipboardEvent) => void\n  activeIndex: number\n  mask: boolean\n  disabled: boolean\n  readonly: boolean\n  size: CommonFormElementSize\n  placeholder: string\n  pattern: RegExp\n  status?: 'success' | 'error'\n  autocomplete: string\n  slotCount: number\n}\n\nexport const codePuncherContext = createContext<CodePuncherContext>(\n  'dap-ds-code-puncher-context',\n)\n"],"names":["codePuncherContext","createContext"],"mappings":";AA0BO,MAAMA,IAAqBC;AAAAA,EAChC;AACF;"}
+{"version":3,"file":"code-puncher.context.js","sources":["../../../src/components/code-puncher/code-puncher.context.ts"],"sourcesContent":["import { createContext } from '@lit/context'\n\nimport type { CommonFormElementSize } from '@/common/types'\n\nimport type DapDSCodePuncherSlot from './code-puncher-slot.component'\n\nexport interface CodePuncherContext {\n  registerSlot: (slot: DapDSCodePuncherSlot) => number\n  unregisterSlot: (slot: DapDSCodePuncherSlot) => void\n  getCharAt: (index: number) => string\n  setCharAt: (index: number, char: string) => void\n  focusSlot: (index: number) => void\n  handleKeydown: (index: number, event: KeyboardEvent) => void\n  handlePaste: (event: ClipboardEvent) => void\n  activeIndex: number\n  mask: boolean\n  disabled: boolean\n  readonly: boolean\n  size: CommonFormElementSize\n  placeholder: string\n  pattern: RegExp\n  status?: 'success' | 'error'\n  autocomplete: string\n  slotCount: number\n}\n\nexport const codePuncherContext = createContext<CodePuncherContext>(\n  'dap-ds-code-puncher-context',\n)\n"],"names":["codePuncherContext","createContext"],"mappings":";AA0BO,MAAMA,IAAqBC;AAAA,EAChC;AACF;"}

package/dist/components/code-puncher/code-puncher.scss.js

@@ -1,4 +1,4 @@
-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}}: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-code-puncher-gap: var(--dds-spacing-100);--dds-code-puncher-group-gap: var(--dds-spacing-100);display:block;width:100%}.code-puncher{display:flex;flex-direction:column}.code-puncher__slots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dds-code-puncher-gap)}.code-puncher--disabled{opacity:.6;pointer-events:none}.code-puncher--readonly .code-puncher__slots{pointer-events:none}.info-button{color:var(--dds-icon-neutral-subtle)}';
+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}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-code-puncher-gap: var(--dds-spacing-100);--dds-code-puncher-group-gap: var(--dds-spacing-100);display:block;width:100%}.code-puncher{display:flex;flex-direction:column}.code-puncher__slots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dds-code-puncher-gap)}.code-puncher--disabled{opacity:.6;pointer-events:none}.code-puncher--readonly .code-puncher__slots{pointer-events:none}.info-button{color:var(--dds-icon-neutral-subtle)}';
 export {
   t as default
 };

package/dist/components/combobox/combobox.component.d.ts

@@ -29,8 +29,10 @@ import { default as ComboboxBaseElement } from './comboboxBase';
  * @property {boolean} autofocus - Whether the select is autofocus.
  * @property {string} feedback - The feedback content of the select.
  * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.
- * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select.
+ * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode.
  * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.
+ * @property {DapDSOptionData[]} items - The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.
+ * @property {DapDSOptionRenderer} renderOption - Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text.
  * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.
  * @property {boolean} searchForText - Whether the combobox should search for the selected item text.
  * @property {boolean} textComplete - Whether the combobox should complete the text.
@@ -48,6 +50,12 @@ import { default as ComboboxBaseElement } from './comboboxBase';
  * @csspart tooltip - The tooltip of the select.
  * @csspart option-list - The option list of the select.
  * @csspart input - The input of the select.
+ * @csspart chips - The container of the selected chips.
+ * @csspart indicator-icon - The dropdown indicator icon.
+ * @csspart search-button - The search button.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))
  * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.component.js","sources":["../../../src/components/combobox/combobox.component.ts"],"sourcesContent":["import ComboboxBaseElement from './comboboxBase'\n\n/**\n * `dap-ds-combobox`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-combobox\n * @title - Combobox\n *\n * @event {{ value }} 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-clear - Emitted when the select is cleared.\n * @event {{ search: string }} dds-search - Emitted when the manual input value changes.\n * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.\n *\n * @property {string} value - The value of the select.\n * @property {string} placeholder - The placeholder of the select.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the select dropdown is opened.\n * @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'.\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 input.\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 content of the select.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the select.\n * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.\n * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.\n * @property {boolean} searchForText - Whether the combobox should search for the selected item text.\n * @property {boolean} textComplete - Whether the combobox should complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false'\n * @property {boolean} noAnimation - Whether the combobox open indicator should be animated.\n * @property {boolean} multiselect - Whether the combobox is multiselect.\n * @property {number} maxSelections - The maximum number of selections allowed.\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 option-list - The option list of the select.\n * @csspart input - The input of the select.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @slot - The default slot for the options.\n */\nexport default class DapDSCombobox extends ComboboxBaseElement {\n  static tagName = 'dap-ds-combobox'\n\n  render() {\n    return this.renderCombobox()\n  }\n}\n"],"names":["_DapDSCombobox","ComboboxBaseElement","DapDSCombobox"],"mappings":";AAsFA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAoB;AAAA,EAG7D,SAAS;AACP,WAAO,KAAK,eAAe;AAAA,EAAA;AAE/B;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}
+{"version":3,"file":"combobox.component.js","sources":["../../../src/components/combobox/combobox.component.ts"],"sourcesContent":["import ComboboxBaseElement from './comboboxBase'\n\n/**\n * `dap-ds-combobox`\n * @summary A select is a form element that allows the user to select one option from a set.\n * @element dap-ds-combobox\n * @title - Combobox\n *\n * @event {{ value }} 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-clear - Emitted when the select is cleared.\n * @event {{ search: string }} dds-search - Emitted when the manual input value changes.\n * @event {{ input: string, originalEvent: Event }} dds-input - Emitted when typing happens in the input.\n *\n * @property {string} value - The value of the select.\n * @property {string} placeholder - The placeholder of the select.\n * @property { 'top' | 'top-start' | 'top-end' | 'right' | 'right-start'| 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} placement - The placement of the select dropdown. Default is 'bottom-start'.\n * @property {boolean} opened - Whether the select dropdown is opened.\n * @property {boolean} sync - The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element'.\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 input.\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 content of the select.\n * @property {'negative' | 'positive' | 'warning' | 'info'} feedbackType - The feedback type of the select.\n * @property {'none' | 'typehead' | 'autocomplete' | 'manual'} searchMode - The search mode of the combobox. `autocomplete` (default) filters the options by their starting text as you type; `manual` does no filtering, so replace the options yourself on `dds-input`. `typehead` is deprecated for the combobox: it is meant for the select, and the list does not open in this mode.\n * @property {boolean} openOnEmpty - Whether the combobox should open on empty results.\n * @property {DapDSOptionData[]} items - The options as data, instead of `dap-ds-option-item` children. When set, child options are ignored. Also accepted as a JSON attribute.\n * @property {DapDSOptionRenderer} renderOption - Renders the content of each option given in `items`. Defaults to the item's `label`. Must not render interactive elements and should include the label text.\n * @property {boolean} allowManualInput - Whether the combobox allows manual input, or free text.\n * @property {boolean} searchForText - Whether the combobox should search for the selected item text.\n * @property {boolean} textComplete - Whether the combobox should complete the text.\n * @property {string} searchButtonAriaLabel - The aria label of the search button.\n * @property {string} selectable - Show the selected item check mark in the dropdown. 'true' or 'false'\n * @property {boolean} noAnimation - Whether the combobox open indicator should be animated.\n * @property {boolean} multiselect - Whether the combobox is multiselect.\n * @property {number} maxSelections - The maximum number of selections allowed.\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 option-list - The option list of the select.\n * @csspart input - The input of the select.\n * @csspart chips - The container of the selected chips.\n * @csspart indicator-icon - The dropdown indicator icon.\n * @csspart search-button - The search button.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))\n * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))\n * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))\n * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))\n * @cssproperty --dds-combobox-loading-spinner-color - The color of the loading spinner. (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))\n * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06))\n * @cssproperty --dds-combobox-icon-opened-transform - The transform of the icon when the combobox is opened (default: rotate(90deg)).\n * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))\n * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))\n * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))\n * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)\n * @cssproperty --dds-combobox-chips-gap - The gap between chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-padding - The padding for chips. (default: var(--dds-spacing-100))\n * @cssproperty --dds-combobox-chips-max-height - The maximum height of the chips. (default: 120px)\n *\n * @slot - The default slot for the options.\n */\nexport default class DapDSCombobox extends ComboboxBaseElement {\n  static tagName = 'dap-ds-combobox'\n\n  render() {\n    return this.renderCombobox()\n  }\n}\n"],"names":["_DapDSCombobox","ComboboxBaseElement","DapDSCombobox"],"mappings":";AA8FA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAoB;AAAA,EAG7D,SAAS;AACP,WAAO,KAAK,eAAe;AAAA,EAAA;AAE/B;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}

package/dist/components/combobox/combobox.scss.js

@@ -1,4 +1,4 @@
-const d = '*,*: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}.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-combobox-background: var(--dds-fields-background-default);--dds-combobox-border-color: var(--dds-border-neutral-base);--dds-combobox-border-width: var(--dds-border-width-base, 1px);--dds-combobox-border-radius: var(--dds-radius-base);--dds-combobox-text-color: var(--dds-text-neutral-base);--dds-combobox-placeholder-color: var(--dds-text-neutral-subtle);--dds-combobox-disabled-background: var(--dds-background-neutral-stronger);--dds-combobox-disabled-text: var(--dds-text-neutral-disabled);--dds-combobox-error-border: var(--dds-border-negative-base);--dds-combobox-success-border: var(--dds-border-positive-base);--dds-combobox-icon-color: var(--dds-text-icon-neutral-base);--dds-combobox-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-combobox-popup-background: var(--dds-background-neutral-subtle);--dds-combobox-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-combobox-loading-spinner-color: var(--dds-icon-neutral-base);--dds-combobox-padding-xs: var(--dds-spacing-200);--dds-combobox-padding-sm: var(--dds-spacing-200);--dds-combobox-padding-lg: var(--dds-spacing-300);--dds-combobox-padding-horizontal: var(--dds-spacing-300);--dds-combobox-padding-vertical: var(--dds-spacing-200);--dds-combobox-gap: var(--dds-spacing-100);--dds-combobox-icon-gap: var(--dds-spacing-200);--dds-combobox-action-gap: var(--dds-spacing-200);--dds-combobox-action-padding: var(--dds-spacing-300);--dds-combobox-clear-icon-width: var(--dds-spacing-800);--dds-combobox-dropdown-icon-right: var(--dds-spacing-600);--dds-combobox-min-width: 7.5rem;--dds-combobox-icon-opened-transform: rotate(180deg);--dds-combobox-chips-gap: var(--dds-spacing-100);--dds-combobox-chips-padding: var(--dds-spacing-100);--dds-combobox-chips-max-height: 120px;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--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)}.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:flex;flex-direction:row;align-items:center;width:100%;min-width:var(--dds-combobox-min-width);column-gap:var(--dds-combobox-gap);border:var(--dds-combobox-border-width) solid var(--dds-combobox-border-color);border-radius:var(--dds-combobox-border-radius);background-color:var(--dds-combobox-background)}.select:focus-within{outline-style:solid}.select:active{border-color:var(--dds-border-brand-medium)}.select--disabled{border-color:var(--dds-combobox-disabled-background);background-color:var(--dds-combobox-disabled-background);color:var(--dds-combobox-disabled-text);cursor:not-allowed}.select--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.select--error{border-color:var(--dds-combobox-error-border)}.select--success{border-color:var(--dds-combobox-success-border)}.select--xs{height:var(--dds-spacing-800)}.select--sm{height:var(--dds-spacing-1000)}.select--lg{height:var(--dds-spacing-1200)}.select--lg .icon{position:absolute;right:var(--dds-combobox-dropdown-icon-right);color:var(--dds-text-icon-neutral-subtle);pointer-events:none}.select--multiselect{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:var(--dds-spacing-1000);padding:var(--dds-spacing-100)}.select--multiselect.select--xs{min-height:var(--dds-spacing-800)}.select--multiselect.select--lg{min-height:var(--dds-spacing-1200)}.select--opened:not(.select--no-animation) .indicator-icon{transform:var(--dds-combobox-icon-opened-transform)}.select .indicator-icon{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;align-items:center;color:var(--dds-combobox-icon-color)}.select .indicator-icon--loading{animation:dds-spin 1s linear infinite;fill:var(--dds-combobox-loading-spinner-color);color:var(--dds-combobox-loading-spinner-color)}.select .clear-icon{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;visibility:visible;align-items:center;justify-content:center;min-width:var(--dds-combobox-clear-icon-width);cursor:pointer}.select:has(input:placeholder-shown) .clear-icon{visibility:hidden}.select .clear-icon--hidden{visibility:hidden}.select .clear-icon dap-ds-icon-button::part(icon-base){fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.combobox__chips{display:flex;flex-wrap:wrap;align-items:center;max-height:var(--dds-combobox-chips-max-height);overflow:hidden auto;gap:var(--dds-combobox-chips-gap)}.input{width:100%;border-width:0;border-radius:var(--dds-combobox-border-radius);background-color:transparent;color:var(--dds-combobox-text-color);line-height:1;text-overflow:ellipsis}.input::placeholder{color:var(--dds-combobox-placeholder-color)}.input--xs{padding:var(--dds-combobox-padding-xs);font-size:var(--dds-font-sm)}.input--sm{padding:var(--dds-combobox-padding-sm)}.input--lg{padding:var(--dds-combobox-padding-lg);font-size:var(--dds-font-lg)}.input--disabled{cursor:not-allowed}.input::-webkit-search-cancel-button{display:none}.input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input--multiselect{flex:1;min-width:120px;padding:var(--dds-spacing-100)}.select-action{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--dds-combobox-action-gap);padding:0 var(--dds-combobox-action-padding);color:var(--dds-combobox-icon-color)}.select-action--disabled{color:var(--dds-icon-neutral-disabled);cursor:not-allowed;pointer-events:none}.select-action--xs{min-width:90px}.select-action--sm{min-width:94px}.select-action--lg{min-width:98px}.select-action--multiselect{align-self:center}.select-popup::part(popup){background-color:var(--dds-combobox-popup-background);box-shadow:var(--dds-combobox-popup-shadow)}.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}';
+const d = '*,*: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}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-combobox-background: var(--dds-fields-background-default);--dds-combobox-border-color: var(--dds-border-neutral-base);--dds-combobox-border-width: var(--dds-border-width-base, 1px);--dds-combobox-border-radius: var(--dds-radius-base);--dds-combobox-text-color: var(--dds-text-neutral-base);--dds-combobox-placeholder-color: var(--dds-text-neutral-subtle);--dds-combobox-disabled-background: var(--dds-background-neutral-stronger);--dds-combobox-disabled-text: var(--dds-text-neutral-disabled);--dds-combobox-error-border: var(--dds-border-negative-base);--dds-combobox-success-border: var(--dds-border-positive-base);--dds-combobox-icon-color: var(--dds-text-icon-neutral-base);--dds-combobox-clear-icon-color: var( --dds-button-subtle-icon-neutral-enabled );--dds-combobox-popup-background: var(--dds-background-neutral-subtle);--dds-combobox-popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);--dds-combobox-loading-spinner-color: var(--dds-icon-neutral-base);--dds-combobox-padding-xs: var(--dds-spacing-200);--dds-combobox-padding-sm: var(--dds-spacing-200);--dds-combobox-padding-lg: var(--dds-spacing-300);--dds-combobox-padding-horizontal: var(--dds-spacing-300);--dds-combobox-padding-vertical: var(--dds-spacing-200);--dds-combobox-gap: var(--dds-spacing-100);--dds-combobox-icon-gap: var(--dds-spacing-200);--dds-combobox-action-gap: var(--dds-spacing-200);--dds-combobox-action-padding: var(--dds-spacing-300);--dds-combobox-clear-icon-width: var(--dds-spacing-800);--dds-combobox-dropdown-icon-right: var(--dds-spacing-600);--dds-combobox-min-width: 7.5rem;--dds-combobox-icon-opened-transform: rotate(180deg);--dds-combobox-chips-gap: var(--dds-spacing-100);--dds-combobox-chips-padding: var(--dds-spacing-100);--dds-combobox-chips-max-height: 120px;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--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)}.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:flex;flex-direction:row;align-items:center;width:100%;min-width:var(--dds-combobox-min-width);column-gap:var(--dds-combobox-gap);border:var(--dds-combobox-border-width) solid var(--dds-combobox-border-color);border-radius:var(--dds-combobox-border-radius);background-color:var(--dds-combobox-background)}.select:focus-within{outline-style:solid}.select:active{border-color:var(--dds-border-brand-medium)}.select--disabled{border-color:var(--dds-combobox-disabled-background);background-color:var(--dds-combobox-disabled-background);color:var(--dds-combobox-disabled-text);cursor:not-allowed}.select--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.select--error{border-color:var(--dds-combobox-error-border)}.select--success{border-color:var(--dds-combobox-success-border)}.select--xs{height:var(--dds-spacing-800)}.select--sm{height:var(--dds-spacing-1000)}.select--lg{height:var(--dds-spacing-1200)}.select--lg .icon{position:absolute;right:var(--dds-combobox-dropdown-icon-right);color:var(--dds-text-icon-neutral-subtle);pointer-events:none}.select--multiselect{flex-wrap:wrap;align-items:flex-start;height:auto;min-height:var(--dds-spacing-1000);padding:var(--dds-spacing-100)}.select--multiselect.select--xs{min-height:var(--dds-spacing-800)}.select--multiselect.select--lg{min-height:var(--dds-spacing-1200)}.select--opened:not(.select--no-animation) .indicator-icon{transform:var(--dds-combobox-icon-opened-transform)}.select .indicator-icon{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;align-items:center;color:var(--dds-combobox-icon-color)}.select .indicator-icon--loading{animation:dds-spin 1s linear infinite;fill:var(--dds-combobox-loading-spinner-color);color:var(--dds-combobox-loading-spinner-color)}.select .clear-icon{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;visibility:visible;align-items:center;justify-content:center;min-width:var(--dds-combobox-clear-icon-width);cursor:pointer}.select:has(input:placeholder-shown) .clear-icon{visibility:hidden}.select .clear-icon--hidden{visibility:hidden}.select .clear-icon dap-ds-icon-button::part(icon-base){fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}.combobox__chips{display:flex;flex-wrap:wrap;align-items:center;max-height:var(--dds-combobox-chips-max-height);overflow:hidden auto;gap:var(--dds-combobox-chips-gap)}.input{width:100%;border-width:0;border-radius:var(--dds-combobox-border-radius);background-color:transparent;color:var(--dds-combobox-text-color);line-height:1;text-overflow:ellipsis}.input::placeholder{color:var(--dds-combobox-placeholder-color)}.input--xs{padding:var(--dds-combobox-padding-xs);font-size:var(--dds-font-sm)}.input--sm{padding:var(--dds-combobox-padding-sm)}.input--lg{padding:var(--dds-combobox-padding-lg);font-size:var(--dds-font-lg)}.input--disabled{cursor:not-allowed}.input::-webkit-search-cancel-button{display:none}.input--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input--multiselect{flex:1;min-width:120px;padding:var(--dds-spacing-100)}.select-action{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--dds-combobox-action-gap);padding:0 var(--dds-combobox-action-padding);color:var(--dds-combobox-icon-color)}.select-action--disabled{color:var(--dds-icon-neutral-disabled);cursor:not-allowed;pointer-events:none}.select-action--xs{min-width:90px}.select-action--sm{min-width:94px}.select-action--lg{min-width:98px}.select-action--multiselect{align-self:center}.select-popup::part(popup){background-color:var(--dds-combobox-popup-background);box-shadow:var(--dds-combobox-popup-shadow)}.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}';
 export {
   d as default
 };

package/dist/components/combobox/comboboxBase.d.ts

@@ -1,6 +1,7 @@
 import { PropertyValueMap } from 'lit';
 import { PopupPlacement } from '../../common/types';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { DapDSOptionData, DapDSOptionRenderer } from '../option-list/option-data';
 import { default as DapDSOptionList } from '../option-list/option-list.component';
 export default class ComboboxBaseElement extends GenericFormElement {
     readonly triggerInput: HTMLInputElement;
@@ -25,6 +26,12 @@ export default class ComboboxBaseElement extends GenericFormElement {
     subtle: boolean;
     multiselect: boolean;
     maxSelections?: number;
+    /** The options as data instead of `dap-ds-option-item` children; also accepted as a JSON attribute. */
+    get items(): DapDSOptionData[] | undefined;
+    set items(value: DapDSOptionData[] | string | undefined);
+    private _items?;
+    /** Renders the content of each option given in `items`; defaults to the label. */
+    renderOption?: DapDSOptionRenderer;
     /** `data-testid` for the clear button. */
     clearButtonTestId: string;
     /** `data-testid` for the search button. */
@@ -47,6 +54,12 @@ export default class ComboboxBaseElement extends GenericFormElement {
     selectedItems: any[];
     currentItem: any;
     selectedText: string;
+    /**
+     * Whether the input text filters the list. Typing turns it on; opening turns
+     * it off when the input just shows the selection, so reopening lists every
+     * option instead of only those matching the selected text.
+     */
+    private filtering;
     private optionListObserver;
     private isUserInteraction;
     private pendingInitialValues;
@@ -70,6 +83,14 @@ export default class ComboboxBaseElement extends GenericFormElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     get isAutoComplete(): boolean;
+    /**
+     * The option a value refers to. With `searchForText` a pick stores the
+     * option's text as the value, so fall back to matching the text; otherwise
+     * the pick is treated as an unknown value and the input gets cleared.
+     */
+    private findOptionForValue;
+    /** The option value the list should mark as selected. */
+    private get listValue();
     /**
      * Get all option items directly from the combobox element
      * This is more reliable for dynamic updates than the option list component
@@ -135,6 +156,14 @@ export default class ComboboxBaseElement extends GenericFormElement {
     reportValidity(): boolean;
     setValidity(): void;
     handleInvalid(event: Event): void;
+    /**
+     * Screen-reader status for the highlighted option while focus stays in the input.
+     * aria-activedescendant cannot reach options inside option-list's shadow root, so
+     * the highlight (e.g. the first match after typing) is announced through a polite
+     * live region instead. Once focus moves onto an option it is announced natively,
+     * so the status is cleared to avoid a double announcement.
+     */
+    get activeOptionStatus(): string;
     getActiveDescendant(): HTMLInputElement | import('../option-item/option-item.component').default | null | undefined;
     getSearchIconSize(size: string): "sm" | "md" | "lg";
     getInnerIconSize(size: string): 16 | 10;