dap-design-system 0.62.3 → 0.63.0

package/dist/components/input/input-base-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-base-element.js","sources":["../../../src/components/input/input-base-element.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, InputTypes } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport styles from './_styles/input.scss?inline'\n\nexport class InputBaseElement extends GenericFormElement {\n  @query('#input') input!: HTMLInputElement\n  @queryAssignedElements({ slot: 'addon-before' })\n  private readonly _addonBeforeNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'addon-after' })\n  private readonly _addonAfterNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'postfix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @property() type: InputTypes = 'text'\n  @property() placeholder?: string\n  @property({ type: Number }) minlength?: number\n  @property({ type: Number }) maxlength?: number\n  @property({ type: Number }) min?: number\n  @property({ type: Number }) max?: number\n  @property() pattern?: string\n  @property({ type: Number }) step?: number | 'any' = 1\n  @property() inputmode?: string\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean }) manualValueSet = false\n  @property({ type: Boolean }) disableEnter = false\n  @state() private _hasAddonBefore = false\n  @state() private _hasAddonAfter = false\n  @state() private _hasPrefix = false\n  @state() private _hasPostfix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  public get nativeControl(): HTMLInputElement {\n    return this.shadowRoot?.querySelector('.input__control') as HTMLInputElement\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // this.role = 'textbox'\n    this._hasAddonBefore = !!this._addonBeforeNode.length\n    this._hasAddonAfter = !!this._addonAfterNode.length\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasPostfix = !!this._postfixNode.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput = () => {\n    if (!this.input.validity.badInput && !this.manualValueSet) {\n      this.value = this.input.value\n    }\n\n    this.emit('dds-input', { value: this.input.value })\n    this.setValidity()\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.input.value = this.defaultValue || ''\n  }\n\n  onBlur() {\n    this.emit('dds-blur')\n  }\n\n  onFocus() {\n    this.emit('dds-focus')\n  }\n\n  onChange() {\n    this.value = this.input.value\n\n    if (!this.manualValueSet) {\n      this.emit('dds-change', { value: this.input.value })\n    }\n\n    this.setValidity()\n  }\n\n  onKeydown(event: KeyboardEvent) {\n    this.emit('dds-keydown', { value: this.input.value, originalEvent: event })\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n\n    if (!this.disableEnter && event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          const proxy = document.createElement('button')\n          proxy.type = 'submit'\n          this.insertAdjacentElement('afterend', proxy)\n\n          proxy.click()\n          proxy.remove()\n        }\n      })\n    }\n  }\n\n  public get focusElement() {\n    return this.input\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.tooltip) {\n      ids.push('tooltip-description')\n    }\n\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  renderDefaultContent() {\n    return html` <span\n        part=\"prefix\"\n        class=${clsx({ 'input__addon-prefix': !!this._hasPrefix })}>\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span\n        part=\"postfix\"\n        class=${clsx({\n          'input__addon-postfix': this._hasPostfix || this.loading,\n        })}>\n        ${this.loading\n          ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n          : nothing}\n        <slot name=\"postfix\"></slot>\n      </span>`\n  }\n\n  renderInput(content?: unknown) {\n    return html`\n      <div class=\"label-container\">\n        ${this.label &&\n        html`<dap-ds-form-label\n          part=\"label\"\n          id=\"label\"\n          for=\"input\"\n          .size=${this.effectiveSize}\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        ${this.tooltip &&\n        html` <dap-ds-tooltip\n          part=\"tooltip\"\n          content=${this.tooltip}\n          mode=${this.tooltipTrigger === 'hover' ? 'tooltip' : 'toggle'}\n          trigger=${this.tooltipTrigger === 'hover' ? 'hover focus' : 'click'}\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            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === '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        ${this.tooltip &&\n        // The tooltip text lives in the tooltip's shadow root, which an\n        // aria-describedby on the input cannot reach; mirror it here instead.\n        html`<span id=\"tooltip-description\" hidden>${this.tooltip}</span>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <span\n        part=\"base\"\n        class=${clsx(\n          'input',\n          `input--${this.effectiveSize}`,\n          { 'input--success': this.status === 'success' },\n          { 'input--error': this.status === 'error' },\n          { 'input--disabled': this.disabled },\n          { 'input--readonly': this.readonly },\n          { 'input--has-addon-before': !!this._hasAddonBefore },\n          { 'input--has-addon-after': !!this._hasAddonAfter },\n          { 'input--has-prefix': !!this._hasPrefix },\n          { 'input--has-postfix': !!this._hasPostfix || this.loading },\n        )}>\n        <span\n          part=\"addon-before\"\n          class=${clsx({\n            'input__addon-before': !!this._hasAddonBefore,\n            [`input__addon-before--${this.effectiveSize}`]:\n              !!this._hasAddonBefore,\n            'input__addon-before--disabled':\n              !!this._hasAddonBefore && this.disabled,\n            'input__addon-before--readonly':\n              !!this._hasAddonBefore && this.readonly,\n            'input__addon-before--success':\n              !!this._hasAddonBefore && this.status === 'success',\n            'input__addon-before--error':\n              !!this._hasAddonBefore && this.status === 'error',\n          })}>\n          <slot name=\"addon-before\"></slot>\n        </span>\n        <div class=\"input__container\">\n          <input\n            id=\"input\"\n            class=${clsx(\n              'input__control',\n              `input__control--${this.effectiveSize}`,\n              { 'input__control--success': this.status === 'success' },\n              { 'input__control--error': this.status === 'error' },\n              { 'input__control--disabled': this.disabled },\n              { 'input__control--readonly': this.readonly },\n              { 'input__control--has-addon-before': !!this._hasAddonBefore },\n              { 'input__control--has-addon-after': !!this._hasAddonAfter },\n              { 'input__control--has-prefix': !!this._hasPrefix },\n              {\n                'input__control--has-postfix':\n                  !!this._hasPostfix || this.loading,\n              },\n            )}\n            part=\"input\"\n            name=${ifDefined(this.name ? this.name : undefined)}\n            type=${this.type}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            placeholder=${ifDefined(this.placeholder)}\n            value=${ifDefined(this.value)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            aria-labelledby=${ifDefined(this.label ? 'label' : nothing)}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            step=${ifDefined(this.step as number)}\n            inputmode=${ifDefined(this.inputmode)}\n            ?autofocus=${this.autofocus}\n            autocomplete=${this.autocomplete as any}\n            autocapitalize=${ifDefined(this.autocapitalize ? 'on' : 'off')}\n            @change=${this.onChange}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @invalid=${this.handleInvalid}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus} />\n          ${content ?? this.renderDefaultContent()}\n        </div>\n        <span\n          part=\"addon-after\"\n          class=${clsx({\n            'input__addon-after': !!this._hasAddonAfter,\n            [`input__addon-after--${this.effectiveSize}`]:\n              !!this._hasAddonAfter,\n            'input__addon-after--disabled':\n              !!this._hasAddonAfter && this.disabled,\n            'input__addon-after--readonly':\n              !!this._hasAddonAfter && this.readonly,\n            'input__addon-after--success':\n              !!this._hasAddonAfter && this.status === 'success',\n            'input__addon-after--error':\n              !!this._hasAddonAfter && this.status === 'error',\n          })}>\n          <slot name=\"addon-after\"></slot>\n        </span>\n      </span>\n      ${this.feedback && this._renderFeedback()}\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.effectiveSize 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"],"names":["_InputBaseElement","GenericFormElement","_a","event","_changedProperties","name","oldValue","newValue","hasModifier","proxy","ids","html","clsx","nothing","content","ifDefined","unsafeCSS","styles","InputBaseElement","__decorateClass","query","queryAssignedElements","property","state"],"mappings":"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"}
+{"version":3,"file":"input-base-element.js","sources":["../../../src/components/input/input-base-element.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { CommonFormElementSize, InputTypes } from '@/common/types'\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\n\nimport styles from './_styles/input.scss?inline'\n\nexport class InputBaseElement extends GenericFormElement {\n  @query('#input') input!: HTMLInputElement\n  @queryAssignedElements({ slot: 'addon-before' })\n  private readonly _addonBeforeNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'addon-after' })\n  private readonly _addonAfterNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'prefix' })\n  private readonly _prefixNode!: NodeListOf<HTMLElement>\n  @queryAssignedElements({ slot: 'postfix' })\n  private readonly _postfixNode!: NodeListOf<HTMLElement>\n\n  @property() type: InputTypes = 'text'\n  @property() placeholder?: string\n  @property({ type: Number }) minlength?: number\n  @property({ type: Number }) maxlength?: number\n  @property({ type: Number }) min?: number\n  @property({ type: Number }) max?: number\n  @property() pattern?: string\n  @property({ type: Number }) step?: number | 'any' = 1\n  @property() inputmode?: string\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean }) manualValueSet = false\n  @property({ type: Boolean }) disableEnter = false\n  @state() private _hasAddonBefore = false\n  @state() private _hasAddonAfter = false\n  @state() private _hasPrefix = false\n  @state() private _hasPostfix = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  public get nativeControl(): HTMLInputElement {\n    return this.shadowRoot?.querySelector('.input__control') as HTMLInputElement\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // this.role = 'textbox'\n    this._hasAddonBefore = !!this._addonBeforeNode.length\n    this._hasAddonAfter = !!this._addonAfterNode.length\n    this._hasPrefix = !!this._prefixNode.length\n    this._hasPostfix = !!this._postfixNode.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput = () => {\n    if (!this.input.validity.badInput && !this.manualValueSet) {\n      this.value = this.input.value\n    }\n\n    this.emit('dds-input', { value: this.input.value })\n    this.setValidity()\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.input.value = this.defaultValue || ''\n  }\n\n  onBlur() {\n    this.emit('dds-blur')\n  }\n\n  onFocus() {\n    this.emit('dds-focus')\n  }\n\n  onChange() {\n    this.value = this.input.value\n\n    if (!this.manualValueSet) {\n      this.emit('dds-change', { value: this.input.value })\n    }\n\n    this.setValidity()\n  }\n\n  onKeydown(event: KeyboardEvent) {\n    this.emit('dds-keydown', { value: this.input.value, originalEvent: event })\n\n    const hasModifier =\n      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n\n    if (!this.disableEnter && event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        if (!event.defaultPrevented && !event.isComposing) {\n          const proxy = document.createElement('button')\n          proxy.type = 'submit'\n          this.insertAdjacentElement('afterend', proxy)\n\n          proxy.click()\n          proxy.remove()\n        }\n      })\n    }\n  }\n\n  public get focusElement() {\n    return this.input\n  }\n\n  /**\n   * Gets the aria-describedby attribute value by combining description and feedback IDs.\n   * @returns {string | undefined} Space-separated IDs or undefined if none exist\n   * @private\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.tooltip) {\n      ids.push('tooltip-description')\n    }\n\n    if (this.feedback) {\n      ids.push('feedback')\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  renderDefaultContent() {\n    return html` <span\n        part=\"prefix\"\n        class=${clsx({ 'input__addon-prefix': !!this._hasPrefix })}>\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span\n        part=\"postfix\"\n        class=${clsx({\n          'input__addon-postfix': this._hasPostfix || this.loading,\n        })}>\n        ${this.loading\n          ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n          : nothing}\n        <slot name=\"postfix\"></slot>\n      </span>`\n  }\n\n  renderInput(content?: unknown) {\n    return html`\n      <div class=\"label-container\">\n        ${formLabelTemplate({\n          label: this.label,\n          id: 'label',\n          htmlFor: 'input',\n          size: this.effectiveSize,\n          required: this.required,\n          requiredLabel: this.requiredLabel,\n          optional: this.optional,\n          optionalLabel: this.optionalLabel,\n          disabled: this.disabled,\n          subtle: this.subtle,\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=${this.tooltipTrigger === 'hover' ? 'tooltip' : 'toggle'}\n          trigger=${this.tooltipTrigger === 'hover' ? 'hover focus' : 'click'}\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            size=${this.effectiveSize as 'xs' | 'sm' | 'md' | 'lg'}\n            iconSize=${this.effectiveSize === '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        ${this.tooltip &&\n        // The tooltip text lives in the tooltip's shadow root, which an\n        // aria-describedby on the input cannot reach; mirror it here instead.\n        html`<span id=\"tooltip-description\" hidden>${this.tooltip}</span>`}\n      </div>\n      ${this.description &&\n      html`\n        <dap-ds-typography\n          part=\"description\"\n          variant=\"description\"\n          class=${clsx('input-description')}\n          size=${ifDefined(this.effectiveSize as CommonFormElementSize)}\n          id=\"description\">\n          ${this.description}\n        </dap-ds-typography>\n      `}\n      <span\n        part=\"base\"\n        class=${clsx(\n          'input',\n          `input--${this.effectiveSize}`,\n          { 'input--success': this.status === 'success' },\n          { 'input--error': this.status === 'error' },\n          { 'input--disabled': this.disabled },\n          { 'input--readonly': this.readonly },\n          { 'input--has-addon-before': !!this._hasAddonBefore },\n          { 'input--has-addon-after': !!this._hasAddonAfter },\n          { 'input--has-prefix': !!this._hasPrefix },\n          { 'input--has-postfix': !!this._hasPostfix || this.loading },\n        )}>\n        <span\n          part=\"addon-before\"\n          class=${clsx({\n            'input__addon-before': !!this._hasAddonBefore,\n            [`input__addon-before--${this.effectiveSize}`]:\n              !!this._hasAddonBefore,\n            'input__addon-before--disabled':\n              !!this._hasAddonBefore && this.disabled,\n            'input__addon-before--readonly':\n              !!this._hasAddonBefore && this.readonly,\n            'input__addon-before--success':\n              !!this._hasAddonBefore && this.status === 'success',\n            'input__addon-before--error':\n              !!this._hasAddonBefore && this.status === 'error',\n          })}>\n          <slot name=\"addon-before\"></slot>\n        </span>\n        <div class=\"input__container\">\n          <input\n            id=\"input\"\n            class=${clsx(\n              'input__control',\n              `input__control--${this.effectiveSize}`,\n              { 'input__control--success': this.status === 'success' },\n              { 'input__control--error': this.status === 'error' },\n              { 'input__control--disabled': this.disabled },\n              { 'input__control--readonly': this.readonly },\n              { 'input__control--has-addon-before': !!this._hasAddonBefore },\n              { 'input__control--has-addon-after': !!this._hasAddonAfter },\n              { 'input__control--has-prefix': !!this._hasPrefix },\n              {\n                'input__control--has-postfix':\n                  !!this._hasPostfix || this.loading,\n              },\n            )}\n            part=\"input\"\n            name=${ifDefined(this.name ? this.name : undefined)}\n            type=${this.type}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            placeholder=${ifDefined(this.placeholder)}\n            value=${ifDefined(this.value)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            aria-labelledby=${ifDefined(this.label ? 'label' : nothing)}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            min=${ifDefined(this.min)}\n            max=${ifDefined(this.max)}\n            pattern=${ifDefined(this.pattern)}\n            step=${ifDefined(this.step as number)}\n            inputmode=${ifDefined(this.inputmode)}\n            ?autofocus=${this.autofocus}\n            autocomplete=${this.autocomplete as any}\n            autocapitalize=${ifDefined(this.autocapitalize ? 'on' : 'off')}\n            @change=${this.onChange}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @invalid=${this.handleInvalid}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus} />\n          ${content ?? this.renderDefaultContent()}\n        </div>\n        <span\n          part=\"addon-after\"\n          class=${clsx({\n            'input__addon-after': !!this._hasAddonAfter,\n            [`input__addon-after--${this.effectiveSize}`]:\n              !!this._hasAddonAfter,\n            'input__addon-after--disabled':\n              !!this._hasAddonAfter && this.disabled,\n            'input__addon-after--readonly':\n              !!this._hasAddonAfter && this.readonly,\n            'input__addon-after--success':\n              !!this._hasAddonAfter && this.status === 'success',\n            'input__addon-after--error':\n              !!this._hasAddonAfter && this.status === 'error',\n          })}>\n          <slot name=\"addon-after\"></slot>\n        </span>\n      </span>\n      ${this.feedback && this._renderFeedback()}\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.effectiveSize 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"],"names":["_InputBaseElement","GenericFormElement","_a","event","_changedProperties","name","oldValue","newValue","hasModifier","proxy","ids","html","clsx","nothing","content","formLabelTemplate","ifDefined","unsafeCSS","styles","InputBaseElement","__decorateClass","query","queryAssignedElements","property","state"],"mappings":"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"}

package/dist/components/label/_styles/label.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}.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)}:host{--dds-label-background: var(--dds-background-neutral-subtle);--dds-label-border-color: var(--dds-border-neutral-subtle);--dds-label-border-width: var(--dds-border-width-base);--dds-label-border-radius: var(--dds-radius-base);--dds-label-padding: var(--dds-spacing-400);--dds-label-disabled-background: var( --dds-background-neutral-disabled-inverted );--dds-label-checked-border-color: var(--dds-background-brand-base-inverted)}";
+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}.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)}: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-label-background: var(--dds-background-neutral-subtle);--dds-label-border-color: var(--dds-border-neutral-subtle);--dds-label-border-width: var(--dds-border-width-base);--dds-label-border-radius: var(--dds-radius-base);--dds-label-padding: var(--dds-spacing-400);--dds-label-disabled-background: var( --dds-background-neutral-disabled-inverted );--dds-label-checked-border-color: var(--dds-background-brand-base-inverted)}";
 export {
   d as default
 };

package/dist/components/label/label.component.js

@@ -1,18 +1,15 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { DdsElement as s } from "../../internal/dds-hu-element.js";
-import { LabelableMixin as e } from "../../internal/mixin/labelableMixin.js";
-import i from "./_styles/label.scss.js";
-import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
-const t = class t extends e(s) {
+import { unsafeCSS as s } from "lit";
+import { DdsElement as r } from "../../internal/dds-hu-element.js";
+import { LabelableMixin as i } from "../../internal/mixin/labelableMixin.js";
+import m from "./_styles/label.scss.js";
+const t = class t extends i(r) {
   render() {
     return this.renderLabel();
   }
 };
-t.tagName = "dap-ds-label", t.styles = m(i);
-let r = t;
+t.tagName = "dap-ds-label", t.styles = s(m);
+let e = t;
 export {
-  r as default
+  e as default
 };
 //# sourceMappingURL=label.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.component.js","sources":["../../../src/components/label/label.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { LabelableMixin } from '@/internal/mixin/labelableMixin'\n\nimport styles from './_styles/label.scss?inline'\n\n/**\n * `dap-ds-label`\n * @summary A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n * @element dap-ds-label\n * @title - Label\n *\n * @property {string} label - The label text\n * @property {string} description - The description of the label\n * @property {string} tooltip - The tooltip text\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the label.\n * @property {boolean} optional - If the label is optional. Default value is `false`.\n * @property {string} optionalLabel - Label of optional text\n * @property {string} requiredLabel - Indicator of required text (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is `false`.\n * @property {boolean} disabled - The disabled state of the label. Default is `false`.\n * @property {boolean} required - The required state of the label. Default is `false`.\n *\n * @csspart base - The main label container.\n * @csspart label - Tha main label container. dap-ds-form-label element.\n * @csspart label-base - The label text.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n * @csspart tooltip - The tooltip of the label. dap-ds-tooltip element.\n * @csspart description - The description of the label.\n *\n * @cssproperty {string} --dds-label-background - The background color of the label container. (default: var(--dds-background-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-color - The border color of the label container. (default: var(--dds-border-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-width - The border width of the label container. (default: var(--dds-border-width-base)).\n * @cssproperty {string} --dds-label-border-radius - The border radius of the label container. (default: var(--dds-radius-base)).\n * @cssproperty {string} --dds-label-padding - The padding of the label container. (default: var(--dds-spacing-400)).\n * @cssproperty {string} --dds-label-disabled-background - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)).\n * @cssproperty {string} --dds-label-checked-border-color - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)).\n */\nexport default class DapDSLabel extends LabelableMixin(DdsElement) {\n  static tagName = 'dap-ds-label'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return this.renderLabel()\n  }\n}\n"],"names":["_DapDSLabel","LabelableMixin","DdsElement","unsafeCSS","styles","DapDSLabel"],"mappings":";;;;;;;AAyCqB,MAAAA,IAAA,MAAAA,UAAmBC,EAAeC,CAAU,EAAE;AAAA,EAKjE,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AAPEF,EAAO,UAAU,gBAEDA,EAAA,SAASG,EAAUC,CAAM;AAHtB,IAAAC,IAAAL;"}
+{"version":3,"file":"label.component.js","sources":["../../../src/components/label/label.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { LabelableMixin } from '@/internal/mixin/labelableMixin'\n\nimport styles from './_styles/label.scss?inline'\n\n/**\n * `dap-ds-label`\n * @summary A label is a container for labels intended for general use. It contains a label text, description, and tooltip.\n * @element dap-ds-label\n * @title - Label\n *\n * @property {string} label - The label text\n * @property {string} description - The description of the label\n * @property {string} tooltip - The tooltip text\n * @property {'xs' | 'sm' | 'lg'} size - The size of the input. Default is `sm`.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the label.\n * @property {boolean} optional - If the label is optional. Default value is `false`.\n * @property {string} optionalLabel - Label of optional text\n * @property {string} requiredLabel - Indicator of required text (default: '*')\n * @property {boolean} subtle - Text weight of label. If true the label is subtle. Default value is `false`.\n * @property {boolean} disabled - The disabled state of the label. Default is `false`.\n * @property {boolean} required - The required state of the label. Default is `false`.\n *\n * @csspart base - The main label container.\n * @csspart label - Tha main label container. dap-ds-form-label element.\n * @csspart label-base - The label text.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n * @csspart tooltip - The tooltip of the label. dap-ds-tooltip element.\n * @csspart description - The description of the label.\n *\n * @cssproperty {string} --dds-label-background - The background color of the label container. (default: var(--dds-background-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-color - The border color of the label container. (default: var(--dds-border-neutral-subtle)).\n * @cssproperty {string} --dds-label-border-width - The border width of the label container. (default: var(--dds-border-width-base)).\n * @cssproperty {string} --dds-label-border-radius - The border radius of the label container. (default: var(--dds-radius-base)).\n * @cssproperty {string} --dds-label-padding - The padding of the label container. (default: var(--dds-spacing-400)).\n * @cssproperty {string} --dds-label-disabled-background - The background color of the label container when disabled. (default: var(--dds-background-neutral-disabled-inverted)).\n * @cssproperty {string} --dds-label-checked-border-color - The border color of the label container when checked. (default: var(--dds-background-brand-base-inverted)).\n */\nexport default class DapDSLabel extends LabelableMixin(DdsElement) {\n  static tagName = 'dap-ds-label'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return this.renderLabel()\n  }\n}\n"],"names":["_DapDSLabel","LabelableMixin","DdsElement","unsafeCSS","styles","DapDSLabel"],"mappings":";;;;AAyCqB,MAAAA,IAAA,MAAAA,UAAmBC,EAAeC,CAAU,EAAE;AAAA,EAKjE,SAAS;AACP,WAAO,KAAK,YAAY;AAAA,EAAA;AAE5B;AAPEF,EAAO,UAAU,gBAEDA,EAAA,SAASG,EAAUC,CAAM;AAHtB,IAAAC,IAAAL;"}

package/dist/components/link/link.component.js

@@ -1,34 +1,30 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
+import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m, nothing as k } from "lit";
+import { property as r, state as u } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { html as f } from "lit/static-html.js";
 import "../../localization/localization.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
-import g from "./_styles/link.scss.js";
-import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, i = (h, t, e, l) => {
-  for (var o = void 0, n = h.length - 1, d; n >= 0; n--)
-    (d = h[n]) && (o = d(t, e, o) || o);
-  return o && $(t, e, o), o;
+import { DdsElement as g } from "../../internal/dds-hu-element.js";
+import y from "./_styles/link.scss.js";
+import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
+var $ = Object.defineProperty, i = (h, t, e, o) => {
+  for (var l = void 0, a = h.length - 1, d; a >= 0; a--)
+    (d = h[a]) && (l = d(t, e, l) || l);
+  return l && $(t, e, l), l;
 };
-const a = class a extends u {
+const n = class n extends g {
   constructor() {
     super(...arguments), this.variant = "brand", this.target = "_self", this.href = "#", this.disabled = !1, this.rel = "noreferrer noopener", this.download = !1, this.hasLink = !1, this._handleLinkSlotChange = (t) => {
       const e = t.target;
       if (e) {
-        const l = e.assignedElements();
-        this.hasLink = l.length > 0, l.forEach((o) => o.setAttribute("tabindex", "-1"));
+        const o = e.assignedElements();
+        this.hasLink = o.length > 0, o.forEach((l) => l.setAttribute("tabindex", "-1"));
       }
     };
   }
   _getLinkElement() {
-    var l;
-    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
       'slot[name="link"]'
     );
     if (!t) return null;
@@ -63,7 +59,7 @@ const a = class a extends u {
         href=${this.href}
         ?download=${this.download}
         rel=${p(this.target ? this.rel : void 0)}
-        class=${m(
+        class=${c(
       "link",
       `link--${this.size}`,
       { "link--bold": this.bold },
@@ -76,8 +72,8 @@ const a = class a extends u {
           <slot></slot>
         </span>
         ${this.target === "_blank" ? f`<span class="sr-only">
-              ${(e = this.targetBlankText) != null ? e : y("opensInNewTab")}</span
-            >` : c}
+              ${(e = this.targetBlankText) != null ? e : b("opensInNewTab")}</span
+            >` : k}
       </a>
       <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->
       <div class="link__link-wrapper" aria-hidden="true">
@@ -86,8 +82,8 @@ const a = class a extends u {
     `;
   }
 };
-a.tagName = "dap-ds-link", a.styles = b(g);
-let s = a;
+n.tagName = "dap-ds-link", n.styles = m(y);
+let s = n;
 i([
   r({ reflect: !0 })
 ], s.prototype, "size");
@@ -119,7 +115,7 @@ i([
   r({ type: String })
 ], s.prototype, "targetBlankText");
 i([
-  k()
+  u()
 ], s.prototype, "hasLink");
 export {
   s as default

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

@@ -1 +1 @@
-{"version":3,"file":"link.component.js","sources":["../../../src/components/link/link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { LinkSize, LinkTarget, LinkVariant } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/link.scss?inline'\n\n/**\n * `dap-ds-link`\n * @summary A link is a reference to a web resource.\n * @element dap-ds-link\n * @title - Link\n *\n * @event {{ event: Event }} dds-click - Emitted when the link is clicked.\n *\n * @slot - The text of the link.\n * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.\n *   Rendered outside the visible link so it is always accessible to programmatic clicks.\n *\n * @csspart base - The main link container.\n * @csspart text - The text of the link.\n *\n * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).\n * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).\n * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n *\n * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).\n *\n * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).\n * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).\n * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n *\n * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).\n * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n *\n * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).\n *\n * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).\n * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).\n * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).\n * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).\n * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).\n *\n * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).\n *\n * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).\n */\nexport default class DapDSLink extends DdsElement {\n  static tagName = 'dap-ds-link'\n\n  /** The size of the link\n   * @type {'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property({ reflect: true }) size?: LinkSize\n\n  /** The theme of the link\n   * @type {'neutral' | 'brand' | 'inverted' | 'warning'}\n   */\n  @property() variant: LinkVariant = 'brand'\n\n  /** The target of the link.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** Bold link style */\n  @property({ type: Boolean }) bold: boolean\n\n  /** Removes underline style */\n  @property({ type: Boolean }) noUnderline: boolean\n\n  /** The href / URL of the link */\n  @property() href: string = '#'\n\n  /** Disabled state of the link */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The rel of the link */\n  @property({ type: String }) rel = 'noreferrer noopener'\n\n  /** The download attribute of the link */\n  @property({ type: Boolean }) download = false\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  @state() private hasLink = false\n\n  private _getLinkElement(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"link\"]',\n    ) as HTMLSlotElement\n    if (!slot) return null\n    const elements = slot.assignedElements()\n    return elements.length > 0 ? (elements[0] as HTMLElement) : null\n  }\n\n  private _handleLinkSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n    if (slot) {\n      const elements = slot.assignedElements()\n      this.hasLink = elements.length > 0\n      // Remove link element from tab order — the visible <a> is the tab stop\n      elements.forEach(el => el.setAttribute('tabindex', '-1'))\n    }\n  }\n\n  private handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    if (this.hasLink) {\n      event.preventDefault()\n      const linkEl = this._getLinkElement()\n      if (linkEl) {\n        linkEl.click()\n      }\n      this.emit('dds-click', event)\n      return\n    }\n\n    if (!this.href) {\n      this.emit('dds-click', event)\n    }\n  }\n\n  override focus() {\n    if (!this.disabled) {\n      ;(this.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement)?.focus()\n    }\n  }\n\n  render() {\n    return html`\n      <a\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? '')}\n        target=${this.target}\n        href=${this.href}\n        ?download=${this.download}\n        rel=${ifDefined(this.target ? this.rel : undefined)}\n        class=${clsx(\n          'link',\n          `link--${this.size}`,\n          { 'link--bold': this.bold },\n          { 'link--no-under-line': this.noUnderline },\n          { 'link--disabled': this.disabled },\n          `link--${this.variant}`,\n        )}\n        @click=${this.handleClick}>\n        <span part=\"text\" class=\"link__text\">\n          <slot></slot>\n        </span>\n        ${this.target === '_blank'\n          ? html`<span class=\"sr-only\">\n              ${this.targetBlankText ?? t('opensInNewTab')}</span\n            >`\n          : nothing}\n      </a>\n      <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->\n      <div class=\"link__link-wrapper\" aria-hidden=\"true\">\n        <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSLink","DdsElement","e","slot","elements","el","_a","event","linkEl","_b","html","ifDefined","clsx","t","nothing","unsafeCSS","styles","DapDSLink","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"link.component.js","sources":["../../../src/components/link/link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { LinkSize, LinkTarget, LinkVariant } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/link.scss?inline'\n\n/**\n * `dap-ds-link`\n * @summary A link is a reference to a web resource.\n * @element dap-ds-link\n * @title - Link\n *\n * @event {{ event: Event }} dds-click - Emitted when the link is clicked.\n *\n * @slot - The text of the link.\n * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.\n *   Rendered outside the visible link so it is always accessible to programmatic clicks.\n *\n * @csspart base - The main link container.\n * @csspart text - The text of the link.\n *\n * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).\n * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).\n * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n *\n * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).\n *\n * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).\n * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).\n * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n *\n * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).\n * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n *\n * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).\n *\n * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).\n * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).\n * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).\n * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).\n * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).\n *\n * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).\n *\n * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).\n */\nexport default class DapDSLink extends DdsElement {\n  static tagName = 'dap-ds-link'\n\n  /** The size of the link\n   * @type {'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property({ reflect: true }) size?: LinkSize\n\n  /** The theme of the link\n   * @type {'neutral' | 'brand' | 'inverted' | 'warning'}\n   */\n  @property() variant: LinkVariant = 'brand'\n\n  /** The target of the link.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** Bold link style */\n  @property({ type: Boolean }) bold: boolean\n\n  /** Removes underline style */\n  @property({ type: Boolean }) noUnderline: boolean\n\n  /** The href / URL of the link */\n  @property() href: string = '#'\n\n  /** Disabled state of the link */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The rel of the link */\n  @property({ type: String }) rel = 'noreferrer noopener'\n\n  /** The download attribute of the link */\n  @property({ type: Boolean }) download = false\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  @state() private hasLink = false\n\n  private _getLinkElement(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"link\"]',\n    ) as HTMLSlotElement\n    if (!slot) return null\n    const elements = slot.assignedElements()\n    return elements.length > 0 ? (elements[0] as HTMLElement) : null\n  }\n\n  private _handleLinkSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n    if (slot) {\n      const elements = slot.assignedElements()\n      this.hasLink = elements.length > 0\n      // Remove link element from tab order — the visible <a> is the tab stop\n      elements.forEach(el => el.setAttribute('tabindex', '-1'))\n    }\n  }\n\n  private handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    if (this.hasLink) {\n      event.preventDefault()\n      const linkEl = this._getLinkElement()\n      if (linkEl) {\n        linkEl.click()\n      }\n      this.emit('dds-click', event)\n      return\n    }\n\n    if (!this.href) {\n      this.emit('dds-click', event)\n    }\n  }\n\n  override focus() {\n    if (!this.disabled) {\n      ;(this.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement)?.focus()\n    }\n  }\n\n  render() {\n    return html`\n      <a\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? '')}\n        target=${this.target}\n        href=${this.href}\n        ?download=${this.download}\n        rel=${ifDefined(this.target ? this.rel : undefined)}\n        class=${clsx(\n          'link',\n          `link--${this.size}`,\n          { 'link--bold': this.bold },\n          { 'link--no-under-line': this.noUnderline },\n          { 'link--disabled': this.disabled },\n          `link--${this.variant}`,\n        )}\n        @click=${this.handleClick}>\n        <span part=\"text\" class=\"link__text\">\n          <slot></slot>\n        </span>\n        ${this.target === '_blank'\n          ? html`<span class=\"sr-only\">\n              ${this.targetBlankText ?? t('opensInNewTab')}</span\n            >`\n          : nothing}\n      </a>\n      <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->\n      <div class=\"link__link-wrapper\" aria-hidden=\"true\">\n        <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSLink","DdsElement","e","slot","elements","el","_a","event","linkEl","_b","html","ifDefined","clsx","t","nothing","unsafeCSS","styles","DapDSLink","__decorateClass","property","state"],"mappings":"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"}

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

@@ -26,6 +26,8 @@ import { default as DapDSIcon } from '../icon/icon.component';
  * @csspart description-container - The container of the description.
  * @csspart actions-container - The container of the actions.
  * @csspart iteractive-indicator-container - The container of the interactive indicator.
+ * @csspart card-base - The base of the inner card content.
+ * @csspart actions - The actions slot of the list item.
  *
  * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))
  * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))

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

@@ -1,26 +1,21 @@
 import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as d } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as f } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as _ } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { ifDefined as y } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as a } from "../../node_modules/lit-html/static.js";
-import { DdsElement as $ } from "../../internal/dds-hu-element.js";
-import b from "../card/card.component.js";
-import g from "../card/card-content.component.js";
-import v from "../icon/icon.component.js";
-import u from "./list-item.scss.js";
-import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var C = Object.defineProperty, i = (m, n, p, o) => {
+import { unsafeCSS as f, nothing as d } from "lit";
+import { queryAssignedElements as _, query as y, property as e } from "lit/decorators.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
+import { html as a } from "lit/static-html.js";
+import { DdsElement as b } from "../../internal/dds-hu-element.js";
+import g from "../card/card.component.js";
+import v from "../card/card-content.component.js";
+import u from "../icon/icon.component.js";
+import k from "./list-item.scss.js";
+var C = Object.defineProperty, i = (m, n, l, o) => {
   for (var r = void 0, s = m.length - 1, h; s >= 0; s--)
-    (h = m[s]) && (r = h(n, p, r) || r);
-  return r && C(n, p, r), r;
+    (h = m[s]) && (r = h(n, l, r) || r);
+  return r && C(n, l, r), r;
 };
-const l = class l extends $ {
+const p = class p extends b {
   constructor() {
-    super(...arguments), this.variant = "info", this.shade = "base", this.status = "neutral", this.alignment = "horizontal", this.target = "_self", this.rel = "noreferrer noopener", this.renderAs = "a", this.getIcon = (n, p, o, r) => {
+    super(...arguments), this.variant = "info", this.shade = "base", this.status = "neutral", this.alignment = "horizontal", this.target = "_self", this.rel = "noreferrer noopener", this.renderAs = "a", this.getIcon = (n, l, o, r) => {
       let s;
       if (n)
         return a`
@@ -30,7 +25,7 @@ const l = class l extends $ {
         })}
           name="${n}"></dap-ds-icon>
       `;
-      if (p === "number")
+      if (l === "number")
         return a`
         <div
           class=${c("list-item__icon", {
@@ -39,7 +34,7 @@ const l = class l extends $ {
           ${r}
         </div>
       `;
-      switch (p) {
+      switch (l) {
         case "info":
           s = "lightbulb-fill";
           break;
@@ -78,7 +73,7 @@ const l = class l extends $ {
         ?interactive=${this.interactive}
         renderAs=${this.renderAs}
         target=${this.target}
-        href=${y(this.href)}
+        href=${$(this.href)}
         rel=${this.target}
         ?noPadding=${this.noPadding}
         part="base"
@@ -133,17 +128,17 @@ const l = class l extends $ {
     `;
   }
 };
-l.tagName = "dap-ds-list-item", l.dependencies = {
-  "dap-ds-icon": v,
-  "dap-ds-card": b,
-  "dap-ds-card-content": g
-}, l.styles = k(u);
-let t = l;
+p.tagName = "dap-ds-list-item", p.dependencies = {
+  "dap-ds-icon": u,
+  "dap-ds-card": g,
+  "dap-ds-card-content": v
+}, p.styles = f(k);
+let t = p;
 i([
   _({ slot: "actions" })
 ], t.prototype, "actionSlot");
 i([
-  f(".list-item__actions")
+  y(".list-item__actions")
 ], t.prototype, "actionContainer");
 i([
   e()

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.component.js","sources":["../../../src/components/list-item/list-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  Alignment,\n  BackgroundShade,\n  LinkTarget,\n  ListItemStatus,\n  ListItemVariant,\n} from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './list-item.scss?inline'\n\n/**\n * `dap-ds-list-item` is a custom banner component.\n * @element dap-ds-list-item\n * @summary A list\n * @title - List item\n *\n * @slot - The content of the list item.\n * @slot icon - The icon of the list item.\n * @slot title - The title of the list item.\n * @slot actions - The actions of the list item.\n *\n * @csspart base - The main list item container.\n * @csspart icon - The icon of the list item.\n * @csspart title - The title of the list item.\n * @csspart description - The description of the list item.\n * @csspart container - The container of the list item.\n * @csspart list-item-base - The base list item container.\n * @csspart icon-container - The container of the icon.\n * @csspart title-container - The container of the title.\n * @csspart description-container - The container of the description.\n * @csspart actions-container - The container of the actions.\n * @csspart iteractive-indicator-container - The container of the interactive indicator.\n *\n * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))\n * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))\n * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)\n * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))\n *\n * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))\n *\n */\nexport default class DapDSListItem extends DdsElement {\n  static tagName = 'dap-ds-list-item'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n  }\n\n  @queryAssignedElements({ slot: 'actions' })\n  private readonly actionSlot: HTMLElement[]\n  @query('.list-item__actions') private readonly actionContainer: HTMLElement\n\n  /**\n   * The variant of the list item.\n   * @type {'info' | 'pass' | 'fail' | 'notapplicable' | 'empty' | 'number'}\n   */\n  @property() variant: ListItemVariant = 'info'\n\n  /**\n   * The background strongness of the list item.\n   * @type {'none' | 'subtle' | 'base' | 'medium' | 'strong'}\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /**\n   * The status of the list item.\n   * @type {'transparent' | 'brand' | 'neutral' | 'positive' | 'negative'}\n   */\n  @property() status: ListItemStatus = 'neutral'\n\n  /**\n   * The alignment of the list item.\n   * @type {'horizontal' | 'vertical'}\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /**\n   * The title of the list item.\n   */\n  @property() title: string\n\n  /**\n   * The icon of the list item. This is an icon name from the built in icons.\n   */\n  @property() icon: string\n\n  /**\n   * The number of the list item. Only used when variant is 'number'.\n   */\n  @property({ type: Number }) number: number\n\n  /**\n   * Whether the list item is interactive. Generates an anchor tag.\n   */\n  @property({ type: Boolean }) interactive: boolean\n\n  /** The link target of the list item when interactive.\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The href of the list item when interactive */\n  @property() href: string\n\n  /** The rel of the list item when interactive */\n  @property() rel = 'noreferrer noopener'\n\n  /**\n   * Whether the list item has an icon.\n   */\n  @property({ type: Boolean }) noIcon: boolean\n\n  /**\n   * Whether the list item has no padding.\n   */\n  @property({ type: Boolean }) noPadding: boolean\n\n  /**\n   * The render as type of the list item, only applicable when interactive.\n   * @type {'a' | 'button'}\n   */\n  @property({ type: String }) renderAs: 'a' | 'button' = 'a'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private readonly getIcon = (\n    icon: string,\n    variant: ListItemVariant,\n    status: ListItemStatus,\n    number?: number,\n  ) => {\n    let staticIcon: string\n\n    if (icon) {\n      return html`\n        <dap-ds-icon\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}\n          name=\"${icon}\"></dap-ds-icon>\n      `\n    }\n\n    if (variant === 'number') {\n      return html`\n        <div\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}>\n          ${number}\n        </div>\n      `\n    }\n\n    switch (variant) {\n      case 'info':\n        staticIcon = 'lightbulb-fill'\n        break\n      case 'pass':\n        staticIcon = 'checkbox-circle-fill'\n        break\n      case 'fail':\n        staticIcon = 'close-circle-fill'\n        break\n      case 'notapplicable':\n        staticIcon = 'forbid-fill'\n        break\n      case 'empty':\n        staticIcon = 'checkbox-blank-circle-line'\n        break\n      default:\n        staticIcon = 'lightbulb-fill'\n        break\n    }\n\n    return html`\n      <dap-ds-icon\n        class=${clsx('list-item__icon', {\n          [`list-item__icon--${status}`]: status,\n        })}\n        name=\"${staticIcon}\"></dap-ds-icon>\n    `\n  }\n\n  render() {\n    return html`\n      <dap-ds-card\n        noBorder\n        ?interactive=${this.interactive}\n        renderAs=${this.renderAs}\n        target=${this.target}\n        href=${ifDefined(this.href)}\n        rel=${this.target}\n        ?noPadding=${this.noPadding}\n        part=\"base\"\n        exportparts=\"base:list-item-base\"\n        class=${clsx(\n          'list-item',\n          `list-item--${this.variant}`,\n          `list-item--${this.status}`,\n          `list-item--${this.shade}`,\n          `list-item--${this.alignment}`,\n        )}>\n        <dap-ds-card-content spacing=\"none\" exportparts=\"base:card-base\">\n          <div class=${clsx('list-item__container')} part=\"container\">\n            ${!this.noIcon\n              ? html`<div class=\"list-item__icon\" part=\"icon-container\">\n                  <slot part=\"icon\" name=\"icon\">\n                    ${this.getIcon(\n                      this.icon,\n                      this.variant,\n                      this.status,\n                      this.number,\n                    )}\n                  </slot>\n                </div>`\n              : nothing}\n            <div class=${clsx('list-item__content')}>\n              ${this.title\n                ? html`<span\n                    part=\"title\"\n                    class=\"list-item__title\"\n                    part=\"title-container\">\n                    <slot name=\"title\">${this.title}</slot>\n                  </span>`\n                : nothing}\n              <span\n                part=\"description\"\n                class=\"list-item__description\"\n                part=\"description-container\">\n                <slot></slot>\n              </span>\n              <span\n                part=\"actions\"\n                class=\"list-item__actions\"\n                part=\"actions-container\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </span>\n            </div>\n            ${this.interactive\n              ? html`<div\n                  class=\"list-item__iteractive-indicator\"\n                  part=\"iteractive-indicator-container\">\n                  <dap-ds-icon name=\"arrow-right-l-line\"></dap-ds-icon>\n                </div>`\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["_DapDSListItem","DdsElement","icon","variant","status","number","staticIcon","html","clsx","_changedProperties","ifDefined","nothing","DapDSIcon","DapDSCard","DapDSCardContent","unsafeCSS","styles","DapDSListItem","__decorateClass","queryAssignedElements","query","property"],"mappings":"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"}
+{"version":3,"file":"list-item.component.js","sources":["../../../src/components/list-item/list-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  Alignment,\n  BackgroundShade,\n  LinkTarget,\n  ListItemStatus,\n  ListItemVariant,\n} from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './list-item.scss?inline'\n\n/**\n * `dap-ds-list-item` is a custom banner component.\n * @element dap-ds-list-item\n * @summary A list\n * @title - List item\n *\n * @slot - The content of the list item.\n * @slot icon - The icon of the list item.\n * @slot title - The title of the list item.\n * @slot actions - The actions of the list item.\n *\n * @csspart base - The main list item container.\n * @csspart icon - The icon of the list item.\n * @csspart title - The title of the list item.\n * @csspart description - The description of the list item.\n * @csspart container - The container of the list item.\n * @csspart list-item-base - The base list item container.\n * @csspart icon-container - The container of the icon.\n * @csspart title-container - The container of the title.\n * @csspart description-container - The container of the description.\n * @csspart actions-container - The container of the actions.\n * @csspart iteractive-indicator-container - The container of the interactive indicator.\n * @csspart card-base - The base of the inner card content.\n * @csspart actions - The actions slot of the list item.\n *\n * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))\n * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))\n * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)\n * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))\n *\n * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))\n *\n */\nexport default class DapDSListItem extends DdsElement {\n  static tagName = 'dap-ds-list-item'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n  }\n\n  @queryAssignedElements({ slot: 'actions' })\n  private readonly actionSlot: HTMLElement[]\n  @query('.list-item__actions') private readonly actionContainer: HTMLElement\n\n  /**\n   * The variant of the list item.\n   * @type {'info' | 'pass' | 'fail' | 'notapplicable' | 'empty' | 'number'}\n   */\n  @property() variant: ListItemVariant = 'info'\n\n  /**\n   * The background strongness of the list item.\n   * @type {'none' | 'subtle' | 'base' | 'medium' | 'strong'}\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /**\n   * The status of the list item.\n   * @type {'transparent' | 'brand' | 'neutral' | 'positive' | 'negative'}\n   */\n  @property() status: ListItemStatus = 'neutral'\n\n  /**\n   * The alignment of the list item.\n   * @type {'horizontal' | 'vertical'}\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /**\n   * The title of the list item.\n   */\n  @property() title: string\n\n  /**\n   * The icon of the list item. This is an icon name from the built in icons.\n   */\n  @property() icon: string\n\n  /**\n   * The number of the list item. Only used when variant is 'number'.\n   */\n  @property({ type: Number }) number: number\n\n  /**\n   * Whether the list item is interactive. Generates an anchor tag.\n   */\n  @property({ type: Boolean }) interactive: boolean\n\n  /** The link target of the list item when interactive.\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The href of the list item when interactive */\n  @property() href: string\n\n  /** The rel of the list item when interactive */\n  @property() rel = 'noreferrer noopener'\n\n  /**\n   * Whether the list item has an icon.\n   */\n  @property({ type: Boolean }) noIcon: boolean\n\n  /**\n   * Whether the list item has no padding.\n   */\n  @property({ type: Boolean }) noPadding: boolean\n\n  /**\n   * The render as type of the list item, only applicable when interactive.\n   * @type {'a' | 'button'}\n   */\n  @property({ type: String }) renderAs: 'a' | 'button' = 'a'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private readonly getIcon = (\n    icon: string,\n    variant: ListItemVariant,\n    status: ListItemStatus,\n    number?: number,\n  ) => {\n    let staticIcon: string\n\n    if (icon) {\n      return html`\n        <dap-ds-icon\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}\n          name=\"${icon}\"></dap-ds-icon>\n      `\n    }\n\n    if (variant === 'number') {\n      return html`\n        <div\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}>\n          ${number}\n        </div>\n      `\n    }\n\n    switch (variant) {\n      case 'info':\n        staticIcon = 'lightbulb-fill'\n        break\n      case 'pass':\n        staticIcon = 'checkbox-circle-fill'\n        break\n      case 'fail':\n        staticIcon = 'close-circle-fill'\n        break\n      case 'notapplicable':\n        staticIcon = 'forbid-fill'\n        break\n      case 'empty':\n        staticIcon = 'checkbox-blank-circle-line'\n        break\n      default:\n        staticIcon = 'lightbulb-fill'\n        break\n    }\n\n    return html`\n      <dap-ds-icon\n        class=${clsx('list-item__icon', {\n          [`list-item__icon--${status}`]: status,\n        })}\n        name=\"${staticIcon}\"></dap-ds-icon>\n    `\n  }\n\n  render() {\n    return html`\n      <dap-ds-card\n        noBorder\n        ?interactive=${this.interactive}\n        renderAs=${this.renderAs}\n        target=${this.target}\n        href=${ifDefined(this.href)}\n        rel=${this.target}\n        ?noPadding=${this.noPadding}\n        part=\"base\"\n        exportparts=\"base:list-item-base\"\n        class=${clsx(\n          'list-item',\n          `list-item--${this.variant}`,\n          `list-item--${this.status}`,\n          `list-item--${this.shade}`,\n          `list-item--${this.alignment}`,\n        )}>\n        <dap-ds-card-content spacing=\"none\" exportparts=\"base:card-base\">\n          <div class=${clsx('list-item__container')} part=\"container\">\n            ${!this.noIcon\n              ? html`<div class=\"list-item__icon\" part=\"icon-container\">\n                  <slot part=\"icon\" name=\"icon\">\n                    ${this.getIcon(\n                      this.icon,\n                      this.variant,\n                      this.status,\n                      this.number,\n                    )}\n                  </slot>\n                </div>`\n              : nothing}\n            <div class=${clsx('list-item__content')}>\n              ${this.title\n                ? html`<span\n                    part=\"title\"\n                    class=\"list-item__title\"\n                    part=\"title-container\">\n                    <slot name=\"title\">${this.title}</slot>\n                  </span>`\n                : nothing}\n              <span\n                part=\"description\"\n                class=\"list-item__description\"\n                part=\"description-container\">\n                <slot></slot>\n              </span>\n              <span\n                part=\"actions\"\n                class=\"list-item__actions\"\n                part=\"actions-container\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </span>\n            </div>\n            ${this.interactive\n              ? html`<div\n                  class=\"list-item__iteractive-indicator\"\n                  part=\"iteractive-indicator-container\">\n                  <dap-ds-icon name=\"arrow-right-l-line\"></dap-ds-icon>\n                </div>`\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["_DapDSListItem","DdsElement","icon","variant","status","number","staticIcon","html","clsx","_changedProperties","ifDefined","nothing","DapDSIcon","DapDSCard","DapDSCardContent","unsafeCSS","styles","DapDSListItem","__decorateClass","queryAssignedElements","query","property"],"mappings":"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"}