dap-design-system 0.62.4 → 0.63.1

package/dist/components/checkbox/checkbox.component.js

@@ -1,25 +1,22 @@
-import { clsx as o } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as u } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as l } from "../../node_modules/lit-html/static.js";
-import { LabeledChoiceElement as f } from "../../internal/mixin/labeledChoiceElement.js";
-import y from "../feedback/feedback.component.js";
-import m from "../form/form-label/form-label.component.js";
-import k from "../icons/system/system-check-line2/system-check-line2.component.js";
-import $ from "../icons/system/system-subtract-line/system-subtract-line.component.js";
-import v from "../typography/typography.component.js";
-import _ from "./_styles/checkbox.scss.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var I = Object.defineProperty, c = (b, e, a, p) => {
-  for (var i = void 0, r = b.length - 1, d; r >= 0; r--)
-    (d = b[r]) && (i = d(e, a, i) || i);
-  return i && I(e, a, i), i;
+import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as b } from "lit";
+import { query as f, property as h } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+import { html as c } from "lit/static-html.js";
+import { LabeledChoiceElement as y } from "../../internal/mixin/labeledChoiceElement.js";
+import { formLabelTemplate as m } from "../../internal/templates/formLabel.js";
+import k from "../feedback/feedback.component.js";
+import $ from "../form/form-label/form-label.component.js";
+import v from "../icons/system/system-check-line2/system-check-line2.component.js";
+import _ from "../icons/system/system-subtract-line/system-subtract-line.component.js";
+import g from "../typography/typography.component.js";
+import I from "./_styles/checkbox.scss.js";
+var x = Object.defineProperty, l = (u, e, a, p) => {
+  for (var i = void 0, r = u.length - 1, s; r >= 0; r--)
+    (s = u[r]) && (i = s(e, a, i) || i);
+  return i && x(e, a, i), i;
 }, t;
-const n = (t = class extends f {
+const n = (t = class extends y {
   constructor() {
     super(), this.indeterminate = !1, this.preventDefault = !1, this.border = !1, this.readonly = !1, this.type = "normal", t.nextId++;
     const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
@@ -72,13 +69,13 @@ const n = (t = class extends f {
         readonly: this.readonly,
         type: "checkbox"
       });
-    } catch (d) {
-      console.error("Error emitting checkbox change event:", d);
+    } catch (s) {
+      console.error("Error emitting checkbox change event:", s);
     }
     try {
       this.setValidity();
-    } catch (d) {
-      console.error("Error setting checkbox validity:", d);
+    } catch (s) {
+      console.error("Error setting checkbox validity:", s);
     }
   }
   /**
@@ -137,14 +134,14 @@ const n = (t = class extends f {
    * @private
    */
   renderIcon() {
-    return this.indeterminate ? l`
+    return this.indeterminate ? c`
         <dap-ds-icon-subtract-line
           class="checkbox__icon"
           part="icon"
           exportparts="base:icon-base"
           size="16"
           decorative></dap-ds-icon-subtract-line>
-      ` : this.checked ? l`
+      ` : this.checked ? c`
         <dap-ds-icon-check-line2
           class="checkbox__icon"
           part="icon"
@@ -172,11 +169,11 @@ const n = (t = class extends f {
     );
   }
   render() {
-    return l`
+    return c`
       <div part="base">
         <label
           part="base-label"
-          class=${o("checkbox choice", `checkbox--${this.size}`, {
+          class=${d("checkbox choice", `checkbox--${this.size}`, {
       "checkbox--checked": this.checked,
       "checkbox--disabled": this.disabled,
       "checkbox--readonly": this.readonly,
@@ -189,26 +186,26 @@ const n = (t = class extends f {
     })}>
           <div
             part="wrapper"
-            class=${o("input__wrapper", {
+            class=${d("input__wrapper", {
       "input__wrapper--background": this.type === "background",
       "input__wrapper--border": this.border
     })}>
             <input
               part="input"
               type="checkbox"
-              class=${o("input", {
+              class=${d("input", {
       "input--background": this.type === "background"
     })}
-              name=${s(this.name ? this.name : void 0)}
+              name=${o(this.name ? this.name : void 0)}
               id=${this.inputId}
               .indeterminate=${this.indeterminate}
               .checked=${this.checked}
               .disabled=${this.disabled}
               .required=${this.required}
-              aria-labelledby=${s(
+              aria-labelledby=${o(
       !this.ariaLabel && this.label ? this.labelId : void 0
     )}
-              aria-describedby=${this.ariaLabel ? "" : s(this.getAriaDescribedBy())}
+              aria-describedby=${this.ariaLabel ? "" : o(this.getAriaDescribedBy())}
               aria-checked=${this.getAriaChecked()}
               .aria-invalid=${this.invalid ? "true" : null}
               @invalid=${this.handleInvalid}
@@ -220,7 +217,7 @@ const n = (t = class extends f {
 
             <span
               part="control"
-              class=${o("input__control", `input__control--${this.size}`, {
+              class=${d("input__control", `input__control--${this.size}`, {
       "input__control--checked": this.checked,
       "input__control--disabled": this.disabled,
       "input__control--readonly": this.readonly,
@@ -229,7 +226,7 @@ const n = (t = class extends f {
     })}>
               <span
                 part="high-contrast"
-                class=${o(
+                class=${d(
       "input__control-high-contrast",
       `input__control-high-contrast--${this.size}`,
       {
@@ -242,47 +239,47 @@ const n = (t = class extends f {
 
             <div
               part="label-container"
-              class=${o("choice__label-container", {
+              class=${d("choice__label-container", {
       "choice__label-container--disabled": this.disabled,
       "choice__label-container--readonly": this.readonly,
       "choice__label--bottom": this.descriptionPlacement === "top",
       "choice__label--top": this.descriptionPlacement === "bottom"
     })}>
-              ${this.label && l`<dap-ds-form-label
-                id=${this.labelId}
-                class="label"
-                part="label"
-                .size=${this.size}
-                .required=${this.required}
-                .requiredLabel=${this.requiredLabel}
-                .optional=${this.optional}
-                aria-hidden="true"
-                .optionalLabel=${this.optionalLabel}
-                .disabled=${this.disabled || this.readonly}
-                .readonly=${this.readonly}
-                .hideLabel=${this.hideLabel}
-                label=${s(this.label)}
-                subtle
-                renderAs="span">
-              </dap-ds-form-label>`}
-              ${this.description && l`
+              ${m({
+      label: this.label,
+      id: this.labelId,
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled || this.readonly,
+      hideLabel: this.hideLabel,
+      subtle: !0,
+      // Rendered as a decorative <span> (not a <label>): checkbox/switch
+      // already wrap the input in an outer <label>, and the accessible
+      // name comes from the input's aria-labelledby=${labelId}.
+      as: "span",
+      ariaHidden: !0
+    })}
+              ${this.description && c`
                 <dap-ds-typography
                   class="description"
                   variant="description"
                   part="description"
                   aria-hidden="true"
-                  size=${s(this.size)}
+                  size=${o(this.size)}
                   id=${this.descriptionId}>
                   ${this.description}
                 </dap-ds-typography>
               `}
             </div>
           </div>
-          ${this.feedback && l`
+          ${this.feedback && c`
             <dap-ds-feedback
               part="feedback"
-              feedbackType=${s(this.feedbackType)}
-              feedbackSize=${s(this.size)}
+              feedbackType=${o(this.feedbackType)}
+              feedbackSize=${o(this.size)}
               id="feedback"
               .subtle=${this.subtle}>
               ${this.feedback}
@@ -293,32 +290,32 @@ const n = (t = class extends f {
     `;
   }
 }, t.tagName = "dap-ds-checkbox", t.dependencies = {
-  "dap-ds-icon-subtract-line": $,
-  "dap-ds-icon-check-line2": k,
-  "dap-ds-form-label": m,
-  "dap-ds-typography": v,
-  "dap-ds-feedback": y
-}, t.nextId = 0, t.styles = g(_), t);
-c([
-  u(".input")
+  "dap-ds-icon-subtract-line": _,
+  "dap-ds-icon-check-line2": v,
+  "dap-ds-form-label": $,
+  "dap-ds-typography": g,
+  "dap-ds-feedback": k
+}, t.nextId = 0, t.styles = b(I), t);
+l([
+  f(".input")
 ], n.prototype, "input");
-c([
+l([
   h({ type: Boolean, reflect: !0 })
 ], n.prototype, "indeterminate");
-c([
+l([
   h({ type: Boolean, reflect: !0 })
 ], n.prototype, "preventDefault");
-c([
+l([
   h({ type: Boolean })
 ], n.prototype, "border");
-c([
+l([
   h({ type: Boolean, reflect: !0 })
 ], n.prototype, "readonly");
-c([
+l([
   h({ type: String })
 ], n.prototype, "type");
-let j = n;
+let V = n;
 export {
-  j as default
+  V as default
 };
 //# sourceMappingURL=checkbox.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.js","sources":["../../../src/components/checkbox/checkbox.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonFormElementSize, CommonSize } from '@/common/types'\nimport { LabeledChoiceElement } from '@/internal/mixin/labeledChoiceElement'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport SystemCheckLine2 from '../icons/system/system-check-line2/system-check-line2.component'\nimport SystemSubtractLine from '../icons/system/system-subtract-line/system-subtract-line.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './_styles/checkbox.scss?inline'\n\n/**\n * `dap-ds-checkbox`\n * @summary A checkbox is a form element that allows the user to select one or more options from a set.\n * @element dap-ds-checkbox\n * @title - Checkbox\n *\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked.\n * @event {{ void }} dds-blur - Emitted when the checkbox loses focus.\n * @event {{ void }} dds-focus - Emitted when the checkbox gains focus.\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the checkbox receives input.\n *\n * @property {string} name - The name of the checkbox.\n * @property {string} value - The value of the checkbox.\n * @property {boolean} checked - Whether the checkbox is checked.\n * @property {string} label - The label of the checkbox.\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 checkbox.\n * @property {boolean} disabled - Whether the checkbox is disabled.\n * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - Whether the checkbox is required.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the checkbox.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox.\n * @property {boolean} invalid - The invalid state of the checkbox.\n * @property {boolean} optional - The optional state of the checkbox.\n * @property {string} optionalLabel - The optional label of the checkbox.\n * @property {string} requiredLabel - The required indicator of the checkbox. (default: '*')\n *\n * @csspart base - The main checkbox container.\n * @csspart label - The label of the checkbox.\n * @csspart input - The input of the checkbox.\n * @csspart control - The control of the checkbox.\n * @csspart icon - The icon of the checkbox.\n * @csspart icon-base - The base icon container.\n * @csspart label-container - The label container of the checkbox.\n * @csspart description - The description of the checkbox.\n * @csspart readonly - The readonly state of the checkbox.\n *\n * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))\n * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))\n * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. (default: var(--dds-radius-small))\n * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. (default: transparent)\n * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium))\n * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong))\n * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium))\n * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong))\n * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled))\n * @cssproperty --dds-checkbox-readonly-border-color - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-background-color - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-icon-color - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base))\n */\nexport default class DapDSCheckbox extends LabeledChoiceElement {\n  static tagName = 'dap-ds-checkbox'\n\n  static dependencies = {\n    'dap-ds-icon-subtract-line': SystemSubtractLine,\n    'dap-ds-icon-check-line2': SystemCheckLine2,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.input') private readonly input!: HTMLInputElement\n\n  /** Whether the checkbox is indeterminate */\n  @property({ type: Boolean, reflect: true }) indeterminate = false\n\n  /** Whether the checkbox should prevent the default action */\n  @property({ type: Boolean, reflect: true }) preventDefault: boolean = false\n\n  /** This sets up border around the checkbox, when true. */\n  @property({ type: Boolean }) border: boolean = false\n\n  /** Whether the checkbox is readonly */\n  @property({ type: Boolean, reflect: true }) readonly: boolean = false\n\n  /** The type of the checkbox\n   * @type {'normal' | 'background'}\n   */\n  @property({ type: String }) type: 'normal' | 'background' = 'normal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSCheckbox.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n  }\n\n  /**\n   * Validates property combinations and logs warnings for invalid states.\n   * @private\n   */\n  private validateProperties(): void {\n    // Warn if both checked and indeterminate are true (invalid combination)\n    if (this.checked && this.indeterminate) {\n      console.warn(\n        'Checkbox: Cannot be both checked and indeterminate simultaneously. Indeterminate state will take precedence.',\n      )\n    }\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(this.descriptionId)\n    }\n\n    if (this.feedback) {\n      ids.push(this.feedbackId!)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  /**\n   * Gets the aria-checked attribute value based on checkbox state.\n   * @returns {'true' | 'false' | 'mixed'} The appropriate aria-checked value\n   * @private\n   */\n  private getAriaChecked(): 'true' | 'false' | 'mixed' {\n    if (this.indeterminate) {\n      return 'mixed'\n    }\n    return this.checked ? 'true' : 'false'\n  }\n\n  /**\n   * Handles click events on the checkbox.\n   * Manages the checked/indeterminate state transitions and emits change events.\n   * @private\n   */\n  private handleClick(event?: Event) {\n    // Early return if click should be prevented, component is disabled, or readonly\n    if (this.preventDefault || this.disabled || this.readonly) {\n      if (this.readonly && event) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n      return\n    }\n\n    // Validate property combinations before state change\n    this.validateProperties()\n\n    // Handle state transitions\n    if (this.indeterminate) {\n      this.indeterminate = false\n      this.checked = true\n    } else {\n      this.checked = !this.checked\n    }\n\n    const { checked, indeterminate, value, disabled } = this\n\n    // Emit change event with null safety\n    try {\n      this.emit('dds-change', {\n        checked,\n        indeterminate,\n        value: value || (checked ? 'on' : 'off'),\n        disabled,\n        readonly: this.readonly,\n        type: 'checkbox',\n      })\n    } catch (error) {\n      console.error('Error emitting checkbox change event:', error)\n    }\n\n    // Update validity state with error handling\n    try {\n      this.setValidity()\n    } catch (error) {\n      console.error('Error setting checkbox validity:', error)\n    }\n  }\n\n  /**\n   * Handles input events on the checkbox.\n   * Emits the dds-input event with current checkbox state.\n   * @private\n   */\n  private handleInput() {\n    const { checked, indeterminate, value, disabled } = this\n\n    const event = new CustomEvent('dds-input', {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {\n        checked,\n        indeterminate,\n        value,\n        disabled,\n        readonly: this.readonly,\n      },\n    })\n\n    this.dispatchEvent(event)\n  }\n\n  /**\n   * Handles keyboard events on the checkbox.\n   * Provides enhanced keyboard navigation and accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   * @private\n   */\n  private handleKeyDown(event: KeyboardEvent): void {\n    // Early return if readonly\n    if (this.readonly) {\n      return\n    }\n\n    // Handle Space key to toggle checkbox (in addition to default behavior)\n    if (event.code === 'Space') {\n      // Allow default Space behavior for checkbox input\n      // This ensures proper accessibility and form behavior\n      return\n    }\n\n    // Handle Enter key to toggle checkbox (custom behavior)\n    if (event.code === 'Enter') {\n      event.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  public get focusElement(): HTMLInputElement {\n    if (!this.input) {\n      throw new Error(\n        'Checkbox input element not found. Component may not be properly initialized.',\n      )\n    }\n    return this.input\n  }\n\n  /**\n   * Programmatically focuses the checkbox input element.\n   * @public\n   */\n  public focus(): void {\n    if (this.input && !this.disabled && !this.readonly) {\n      this.input.focus()\n    }\n  }\n\n  /**\n   * Programmatically blurs the checkbox input element.\n   * @public\n   */\n  public blur(): void {\n    if (this.input) {\n      this.input.blur()\n    }\n  }\n\n  /**\n   * Renders the appropriate icon based on checkbox state.\n   * @returns {TemplateResult | null} The icon template or null if unchecked\n   * @private\n   */\n  renderIcon() {\n    if (this.indeterminate) {\n      return html`\n        <dap-ds-icon-subtract-line\n          class=\"checkbox__icon\"\n          part=\"icon\"\n          exportparts=\"base:icon-base\"\n          size=\"16\"\n          decorative></dap-ds-icon-subtract-line>\n      `\n    }\n\n    if (this.checked) {\n      return html`\n        <dap-ds-icon-check-line2\n          class=\"checkbox__icon\"\n          part=\"icon\"\n          exportparts=\"base:icon-base\"\n          size=\"16\"\n          decorative></dap-ds-icon-check-line2>\n      `\n    }\n\n    return null\n  }\n\n  /**\n   * Handles invalid events on the checkbox input.\n   * Prevents the default browser validation UI from showing and manages invalid state.\n   * @param {Event} event - The invalid event\n   * @private\n   */\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    // Set invalid state if not already set\n    if (!this.invalid) {\n      this.invalid = true\n    }\n  }\n\n  setValidity() {\n    if (!this.innerInput) return\n    const { valid } = (this.innerInput as HTMLInputElement).validity\n    if (valid) {\n      // Only clear invalid for constrained (required) inputs. For an\n      // unconstrained checkbox `invalid` is externally controlled (e.g. by a\n      // parent input-group), so setValidity must not clobber it here.\n      if (this.required) this.invalid = false\n      this.internals.setValidity({})\n    } else {\n      this.internals.setValidity(\n        (this.innerInput as HTMLInputElement).validity,\n        this.validationMessage,\n        this.innerInput,\n      )\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\">\n        <label\n          part=\"base-label\"\n          class=${clsx('checkbox choice', `checkbox--${this.size}`, {\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--readonly': this.readonly,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--required': this.required,\n            'choice--readonly': this.readonly,\n            'choice--disabled': this.disabled,\n            'choice__label--right': this.labelPlacement === 'right',\n            'choice__label--left': this.labelPlacement === 'left',\n          })}>\n          <div\n            part=\"wrapper\"\n            class=${clsx('input__wrapper', {\n              'input__wrapper--background': this.type === 'background',\n              'input__wrapper--border': this.border,\n            })}>\n            <input\n              part=\"input\"\n              type=\"checkbox\"\n              class=${clsx('input', {\n                'input--background': this.type === 'background',\n              })}\n              name=${ifDefined(this.name ? this.name : undefined)}\n              id=${this.inputId}\n              .indeterminate=${this.indeterminate}\n              .checked=${this.checked}\n              .disabled=${this.disabled}\n              .required=${this.required}\n              aria-labelledby=${ifDefined(\n                !this.ariaLabel && this.label ? this.labelId : undefined,\n              )}\n              aria-describedby=${!this.ariaLabel\n                ? ifDefined(this.getAriaDescribedBy())\n                : ''}\n              aria-checked=${this.getAriaChecked()}\n              .aria-invalid=${this.invalid ? 'true' : null}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeyDown}\n              @blur=${super.onBlur}\n              @focus=${super.onFocus} />\n\n            <span\n              part=\"control\"\n              class=${clsx('input__control', `input__control--${this.size}`, {\n                'input__control--checked': this.checked,\n                'input__control--disabled': this.disabled,\n                'input__control--readonly': this.readonly,\n                'input__control--indeterminate': this.indeterminate,\n                'input__control--invalid': this.invalid,\n              })}>\n              <span\n                part=\"high-contrast\"\n                class=${clsx(\n                  'input__control-high-contrast',\n                  `input__control-high-contrast--${this.size}`,\n                  {\n                    'input__control-high-contrast--disabled': this.disabled,\n                    'input__control-high-contrast--readonly': this.readonly,\n                  },\n                )}></span>\n              <slot name=\"iconcontent\"> ${this.renderIcon()} </slot>\n            </span>\n\n            <div\n              part=\"label-container\"\n              class=${clsx('choice__label-container', {\n                'choice__label-container--disabled': this.disabled,\n                'choice__label-container--readonly': this.readonly,\n                'choice__label--bottom': this.descriptionPlacement === 'top',\n                'choice__label--top': this.descriptionPlacement === 'bottom',\n              })}>\n              ${this.label &&\n              html`<dap-ds-form-label\n                id=${this.labelId}\n                class=\"label\"\n                part=\"label\"\n                .size=${this.size}\n                .required=${this.required}\n                .requiredLabel=${this.requiredLabel}\n                .optional=${this.optional}\n                aria-hidden=\"true\"\n                .optionalLabel=${this.optionalLabel}\n                .disabled=${this.disabled || this.readonly}\n                .readonly=${this.readonly}\n                .hideLabel=${this.hideLabel}\n                label=${ifDefined(this.label)}\n                subtle\n                renderAs=\"span\">\n              </dap-ds-form-label>`}\n              ${this.description &&\n              html`\n                <dap-ds-typography\n                  class=\"description\"\n                  variant=\"description\"\n                  part=\"description\"\n                  aria-hidden=\"true\"\n                  size=${ifDefined(this.size as CommonFormElementSize)}\n                  id=${this.descriptionId}>\n                  ${this.description}\n                </dap-ds-typography>\n              `}\n            </div>\n          </div>\n          ${this.feedback &&\n          html`\n            <dap-ds-feedback\n              part=\"feedback\"\n              feedbackType=${ifDefined(this.feedbackType)}\n              feedbackSize=${ifDefined(this.size) as CommonSize}\n              id=\"feedback\"\n              .subtle=${this.subtle}>\n              ${this.feedback}\n            </dap-ds-feedback>\n          `}\n        </label>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCheckbox","_a","LabeledChoiceElement","uniqueSuffix","ids","event","checked","indeterminate","value","disabled","error","html","valid","clsx","ifDefined","SystemSubtractLine","SystemCheckLine2","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSCheckbox"],"mappings":"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"}
+{"version":3,"file":"checkbox.component.js","sources":["../../../src/components/checkbox/checkbox.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CommonFormElementSize, CommonSize } from '@/common/types'\nimport { LabeledChoiceElement } from '@/internal/mixin/labeledChoiceElement'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport SystemCheckLine2 from '../icons/system/system-check-line2/system-check-line2.component'\nimport SystemSubtractLine from '../icons/system/system-subtract-line/system-subtract-line.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './_styles/checkbox.scss?inline'\n\n/**\n * `dap-ds-checkbox`\n * @summary A checkbox is a form element that allows the user to select one or more options from a set.\n * @element dap-ds-checkbox\n * @title - Checkbox\n *\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean, type: 'checkbox' }} dds-change - Fired when the checkbox is checked or unchecked.\n * @event {{ void }} dds-blur - Emitted when the checkbox loses focus.\n * @event {{ void }} dds-focus - Emitted when the checkbox gains focus.\n * @event {{ checked: boolean, indeterminate: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the checkbox receives input.\n *\n * @property {string} name - The name of the checkbox.\n * @property {string} value - The value of the checkbox.\n * @property {boolean} checked - Whether the checkbox is checked.\n * @property {string} label - The label of the checkbox.\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 checkbox.\n * @property {boolean} disabled - Whether the checkbox is disabled.\n * @property {boolean} readonly - Whether the checkbox is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - Whether the checkbox is required.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the checkbox. Default is 'sm'.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n * @property {'left' | 'right'} labelPlacement - The placement of the label.\n * @property {'top' | 'bottom'} descriptionPlacement - The placement of the description.\n * @property {boolean} subtle - The weight of the label.\n * @property {string} feedback - The feedback of the checkbox.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the checkbox.\n * @property {boolean} invalid - The invalid state of the checkbox.\n * @property {boolean} optional - The optional state of the checkbox.\n * @property {string} optionalLabel - The optional label of the checkbox.\n * @property {string} requiredLabel - The required indicator of the checkbox. (default: '*')\n *\n * @csspart base - The main checkbox container.\n * @csspart label - The label of the checkbox.\n * @csspart input - The input of the checkbox.\n * @csspart control - The control of the checkbox.\n * @csspart icon - The icon of the checkbox.\n * @csspart icon-base - The base icon container.\n * @csspart label-container - The label container of the checkbox.\n * @csspart description - The description of the checkbox.\n * @csspart base-label - The label element wrapping the control.\n * @csspart wrapper - The wrapper of the control and label.\n * @csspart feedback - The feedback of the checkbox.\n * @csspart high-contrast - The high contrast indicator of the checkbox.\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-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))\n * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))\n * @cssproperty --dds-checkbox-border-radius - The border radius of the checkbox. (default: var(--dds-radius-small))\n * @cssproperty --dds-checkbox-border-color - The border color of the checkbox. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-checkbox-background-color - The background color of the checkbox. (default: transparent)\n * @cssproperty --dds-checkbox-icon-color - The color of the checkbox icon. (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-checkbox-hover-border-color - The border color when hovering over the checkbox. (default: var(--dds-border-neutral-medium))\n * @cssproperty --dds-checkbox-hover-background-color - The background color when hovering over the checkbox. (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-checkbox-active-border-color - The border color when the checkbox is active. (default: var(--dds-border-neutral-strong))\n * @cssproperty --dds-checkbox-active-background-color - The background color when the checkbox is active. (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-checkbox-checked-border-color - The border color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-background-color - The background color when the checkbox is checked. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-checkbox-checked-hover-border-color - The border color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-hover-background-color - The background color when hovering over a checked checkbox. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-checkbox-checked-active-border-color - The border color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-checked-active-background-color - The background color when a checked checkbox is active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-checkbox-invalid-border-color - The border color when the checkbox is invalid. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-checkbox-invalid-background-color - The background color when the checkbox is invalid. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-checkbox-invalid-hover-border-color - The border color when hovering over an invalid checkbox. (default: var(--dds-border-negative-medium))\n * @cssproperty --dds-checkbox-invalid-hover-background-color - The background color when hovering over an invalid checkbox. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-checkbox-invalid-active-border-color - The border color when an invalid checkbox is active. (default: var(--dds-border-negative-strong))\n * @cssproperty --dds-checkbox-invalid-active-background-color - The background color when an invalid checkbox is active. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-checkbox-disabled-border-color - The border color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-background-color - The background color when the checkbox is disabled. (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-checkbox-disabled-icon-color - The color of the checkbox icon when disabled. (default: var(--dds-button-primary-icon-disabled))\n * @cssproperty --dds-checkbox-readonly-border-color - The border color when the checkbox is readonly. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-background-color - The background color when the checkbox is readonly. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-checkbox-readonly-icon-color - The color of the checkbox icon when readonly. (default: var(--dds-text-neutral-base))\n */\nexport default class DapDSCheckbox extends LabeledChoiceElement {\n  static tagName = 'dap-ds-checkbox'\n\n  static dependencies = {\n    'dap-ds-icon-subtract-line': SystemSubtractLine,\n    'dap-ds-icon-check-line2': SystemCheckLine2,\n    'dap-ds-form-label': DapDSFormLabel,\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n\n  @query('.input') private readonly input!: HTMLInputElement\n\n  /** Whether the checkbox is indeterminate */\n  @property({ type: Boolean, reflect: true }) indeterminate = false\n\n  /** Whether the checkbox should prevent the default action */\n  @property({ type: Boolean, reflect: true }) preventDefault: boolean = false\n\n  /** This sets up border around the checkbox, when true. */\n  @property({ type: Boolean }) border: boolean = false\n\n  /** Whether the checkbox is readonly */\n  @property({ type: Boolean, reflect: true }) readonly: boolean = false\n\n  /** The type of the checkbox\n   * @type {'normal' | 'background'}\n   */\n  @property({ type: String }) type: 'normal' | 'background' = 'normal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSCheckbox.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSCheckbox.nextId}-${uniqueSuffix}`\n  }\n\n  /**\n   * Validates property combinations and logs warnings for invalid states.\n   * @private\n   */\n  private validateProperties(): void {\n    // Warn if both checked and indeterminate are true (invalid combination)\n    if (this.checked && this.indeterminate) {\n      console.warn(\n        'Checkbox: Cannot be both checked and indeterminate simultaneously. Indeterminate state will take precedence.',\n      )\n    }\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(this.descriptionId)\n    }\n\n    if (this.feedback) {\n      ids.push(this.feedbackId!)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  /**\n   * Gets the aria-checked attribute value based on checkbox state.\n   * @returns {'true' | 'false' | 'mixed'} The appropriate aria-checked value\n   * @private\n   */\n  private getAriaChecked(): 'true' | 'false' | 'mixed' {\n    if (this.indeterminate) {\n      return 'mixed'\n    }\n    return this.checked ? 'true' : 'false'\n  }\n\n  /**\n   * Handles click events on the checkbox.\n   * Manages the checked/indeterminate state transitions and emits change events.\n   * @private\n   */\n  private handleClick(event?: Event) {\n    // Early return if click should be prevented, component is disabled, or readonly\n    if (this.preventDefault || this.disabled || this.readonly) {\n      if (this.readonly && event) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n      return\n    }\n\n    // Validate property combinations before state change\n    this.validateProperties()\n\n    // Handle state transitions\n    if (this.indeterminate) {\n      this.indeterminate = false\n      this.checked = true\n    } else {\n      this.checked = !this.checked\n    }\n\n    const { checked, indeterminate, value, disabled } = this\n\n    // Emit change event with null safety\n    try {\n      this.emit('dds-change', {\n        checked,\n        indeterminate,\n        value: value || (checked ? 'on' : 'off'),\n        disabled,\n        readonly: this.readonly,\n        type: 'checkbox',\n      })\n    } catch (error) {\n      console.error('Error emitting checkbox change event:', error)\n    }\n\n    // Update validity state with error handling\n    try {\n      this.setValidity()\n    } catch (error) {\n      console.error('Error setting checkbox validity:', error)\n    }\n  }\n\n  /**\n   * Handles input events on the checkbox.\n   * Emits the dds-input event with current checkbox state.\n   * @private\n   */\n  private handleInput() {\n    const { checked, indeterminate, value, disabled } = this\n\n    const event = new CustomEvent('dds-input', {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: {\n        checked,\n        indeterminate,\n        value,\n        disabled,\n        readonly: this.readonly,\n      },\n    })\n\n    this.dispatchEvent(event)\n  }\n\n  /**\n   * Handles keyboard events on the checkbox.\n   * Provides enhanced keyboard navigation and accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   * @private\n   */\n  private handleKeyDown(event: KeyboardEvent): void {\n    // Early return if readonly\n    if (this.readonly) {\n      return\n    }\n\n    // Handle Space key to toggle checkbox (in addition to default behavior)\n    if (event.code === 'Space') {\n      // Allow default Space behavior for checkbox input\n      // This ensures proper accessibility and form behavior\n      return\n    }\n\n    // Handle Enter key to toggle checkbox (custom behavior)\n    if (event.code === 'Enter') {\n      event.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  public get focusElement(): HTMLInputElement {\n    if (!this.input) {\n      throw new Error(\n        'Checkbox input element not found. Component may not be properly initialized.',\n      )\n    }\n    return this.input\n  }\n\n  /**\n   * Programmatically focuses the checkbox input element.\n   * @public\n   */\n  public focus(): void {\n    if (this.input && !this.disabled && !this.readonly) {\n      this.input.focus()\n    }\n  }\n\n  /**\n   * Programmatically blurs the checkbox input element.\n   * @public\n   */\n  public blur(): void {\n    if (this.input) {\n      this.input.blur()\n    }\n  }\n\n  /**\n   * Renders the appropriate icon based on checkbox state.\n   * @returns {TemplateResult | null} The icon template or null if unchecked\n   * @private\n   */\n  renderIcon() {\n    if (this.indeterminate) {\n      return html`\n        <dap-ds-icon-subtract-line\n          class=\"checkbox__icon\"\n          part=\"icon\"\n          exportparts=\"base:icon-base\"\n          size=\"16\"\n          decorative></dap-ds-icon-subtract-line>\n      `\n    }\n\n    if (this.checked) {\n      return html`\n        <dap-ds-icon-check-line2\n          class=\"checkbox__icon\"\n          part=\"icon\"\n          exportparts=\"base:icon-base\"\n          size=\"16\"\n          decorative></dap-ds-icon-check-line2>\n      `\n    }\n\n    return null\n  }\n\n  /**\n   * Handles invalid events on the checkbox input.\n   * Prevents the default browser validation UI from showing and manages invalid state.\n   * @param {Event} event - The invalid event\n   * @private\n   */\n  handleInvalid(event: Event) {\n    event.preventDefault()\n    // Set invalid state if not already set\n    if (!this.invalid) {\n      this.invalid = true\n    }\n  }\n\n  setValidity() {\n    if (!this.innerInput) return\n    const { valid } = (this.innerInput as HTMLInputElement).validity\n    if (valid) {\n      // Only clear invalid for constrained (required) inputs. For an\n      // unconstrained checkbox `invalid` is externally controlled (e.g. by a\n      // parent input-group), so setValidity must not clobber it here.\n      if (this.required) this.invalid = false\n      this.internals.setValidity({})\n    } else {\n      this.internals.setValidity(\n        (this.innerInput as HTMLInputElement).validity,\n        this.validationMessage,\n        this.innerInput,\n      )\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\">\n        <label\n          part=\"base-label\"\n          class=${clsx('checkbox choice', `checkbox--${this.size}`, {\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--readonly': this.readonly,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--required': this.required,\n            'choice--readonly': this.readonly,\n            'choice--disabled': this.disabled,\n            'choice__label--right': this.labelPlacement === 'right',\n            'choice__label--left': this.labelPlacement === 'left',\n          })}>\n          <div\n            part=\"wrapper\"\n            class=${clsx('input__wrapper', {\n              'input__wrapper--background': this.type === 'background',\n              'input__wrapper--border': this.border,\n            })}>\n            <input\n              part=\"input\"\n              type=\"checkbox\"\n              class=${clsx('input', {\n                'input--background': this.type === 'background',\n              })}\n              name=${ifDefined(this.name ? this.name : undefined)}\n              id=${this.inputId}\n              .indeterminate=${this.indeterminate}\n              .checked=${this.checked}\n              .disabled=${this.disabled}\n              .required=${this.required}\n              aria-labelledby=${ifDefined(\n                !this.ariaLabel && this.label ? this.labelId : undefined,\n              )}\n              aria-describedby=${!this.ariaLabel\n                ? ifDefined(this.getAriaDescribedBy())\n                : ''}\n              aria-checked=${this.getAriaChecked()}\n              .aria-invalid=${this.invalid ? 'true' : null}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick}\n              @input=${this.handleInput}\n              @keydown=${this.handleKeyDown}\n              @blur=${super.onBlur}\n              @focus=${super.onFocus} />\n\n            <span\n              part=\"control\"\n              class=${clsx('input__control', `input__control--${this.size}`, {\n                'input__control--checked': this.checked,\n                'input__control--disabled': this.disabled,\n                'input__control--readonly': this.readonly,\n                'input__control--indeterminate': this.indeterminate,\n                'input__control--invalid': this.invalid,\n              })}>\n              <span\n                part=\"high-contrast\"\n                class=${clsx(\n                  'input__control-high-contrast',\n                  `input__control-high-contrast--${this.size}`,\n                  {\n                    'input__control-high-contrast--disabled': this.disabled,\n                    'input__control-high-contrast--readonly': this.readonly,\n                  },\n                )}></span>\n              <slot name=\"iconcontent\"> ${this.renderIcon()} </slot>\n            </span>\n\n            <div\n              part=\"label-container\"\n              class=${clsx('choice__label-container', {\n                'choice__label-container--disabled': this.disabled,\n                'choice__label-container--readonly': this.readonly,\n                'choice__label--bottom': this.descriptionPlacement === 'top',\n                'choice__label--top': this.descriptionPlacement === 'bottom',\n              })}>\n              ${formLabelTemplate({\n                label: this.label,\n                id: this.labelId,\n                size: this.size,\n                required: this.required,\n                requiredLabel: this.requiredLabel,\n                optional: this.optional,\n                optionalLabel: this.optionalLabel,\n                disabled: this.disabled || this.readonly,\n                hideLabel: this.hideLabel,\n                subtle: true,\n                // Rendered as a decorative <span> (not a <label>): checkbox/switch\n                // already wrap the input in an outer <label>, and the accessible\n                // name comes from the input's aria-labelledby=${labelId}.\n                as: 'span',\n                ariaHidden: true,\n              })}\n              ${this.description &&\n              html`\n                <dap-ds-typography\n                  class=\"description\"\n                  variant=\"description\"\n                  part=\"description\"\n                  aria-hidden=\"true\"\n                  size=${ifDefined(this.size as CommonFormElementSize)}\n                  id=${this.descriptionId}>\n                  ${this.description}\n                </dap-ds-typography>\n              `}\n            </div>\n          </div>\n          ${this.feedback &&\n          html`\n            <dap-ds-feedback\n              part=\"feedback\"\n              feedbackType=${ifDefined(this.feedbackType)}\n              feedbackSize=${ifDefined(this.size) as CommonSize}\n              id=\"feedback\"\n              .subtle=${this.subtle}>\n              ${this.feedback}\n            </dap-ds-feedback>\n          `}\n        </label>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCheckbox","_a","LabeledChoiceElement","uniqueSuffix","ids","event","checked","indeterminate","value","disabled","error","html","valid","clsx","ifDefined","formLabelTemplate","SystemSubtractLine","SystemCheckLine2","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSCheckbox"],"mappings":"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"}

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

@@ -24,6 +24,7 @@ export type ChipSize = 'sm' | 'lg';
  * @csspart remove-icon - The icon of the remove icon
  * @csspart remove-icon-base - The base of the remove icon
  * @csspart remove-icon-base-base - The base of the remove icon base
+ * @csspart content - The content slot of the chip.
  *
  * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))
  * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))

package/dist/components/chip/chip.component.js

@@ -1,25 +1,20 @@
-import { clsx as b } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { queryAssignedNodes as u } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
-import { html as c } from "../../node_modules/lit-html/static.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as f, nothing as c } from "lit";
+import { property as a, queryAssignedNodes as u, state as v } from "lit/decorators.js";
+import { html as p } from "lit/static-html.js";
 import "../../localization/localization.js";
-import { DdsElement as v } from "../../internal/dds-hu-element.js";
-import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
-import g from "../icon-button/icon-button.component.js";
-import x from "../stack/stack.component.js";
+import { DdsElement as y } from "../../internal/dds-hu-element.js";
+import { SizedMixin as g } from "../../internal/mixin/sizedMixin.js";
+import x from "../icon-button/icon-button.component.js";
+import T from "../stack/stack.component.js";
 import $ from "./chip.scss.js";
-import { t as m } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
 var C = Object.defineProperty, o = (d, e, t, r) => {
   for (var i = void 0, n = d.length - 1, h; n >= 0; n--)
     (h = d[n]) && (i = h(e, t, i) || i);
   return i && C(e, t, i), i;
 };
-const k = y(v), l = class l extends k {
+const k = g(y), l = class l extends k {
   constructor() {
     super(...arguments), this.removeable = !1, this.selectable = !1, this.selected = !1, this.disabled = !1, this.removeButtonTestId = "chip-remove-button", this._slotTextContent = "";
   }
@@ -47,7 +42,7 @@ const k = y(v), l = class l extends k {
    * Gets the aria-label for the chip when removable
    */
   getRemovableAriaLabel() {
-    const e = m("chip.removable");
+    const e = b("chip.removable");
     return this._slotTextContent ? `${this._slotTextContent}, ${e}` : e;
   }
   updated(e) {
@@ -67,10 +62,10 @@ const k = y(v), l = class l extends k {
   }
   render() {
     var e, t;
-    return c`
+    return p`
       <div
         part="base"
-        class=${b("chip", `chip--${this.chipSize}`, {
+        class=${m("chip", `chip--${this.chipSize}`, {
       "chip--selected": this.selectable && this.selected,
       "chip--disabled": this.disabled,
       "chip--selectable": this.selectable
@@ -79,12 +74,12 @@ const k = y(v), l = class l extends k {
         tabindex=${this.disabled ? "-1" : "0"}
         aria-disabled=${this.disabled}
         aria-pressed=${this.selected}
-        aria-label=${this.removeable ? this.getRemovableAriaLabel() : (e = this.ariaLabel) != null ? e : p}
+        aria-label=${this.removeable ? this.getRemovableAriaLabel() : (e = this.ariaLabel) != null ? e : c}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}>
         <dap-ds-stack direction="row" spacing="200" part="content-container">
           <slot part="content" @slotchange=${this.handleSlotChange}></slot>
-          ${this.removeable ? c`<dap-ds-icon-button
+          ${this.removeable ? p`<dap-ds-icon-button
                 icon="close-line"
                 part="remove-button"
                 data-testid=${this.removeButtonTestId}
@@ -93,17 +88,17 @@ const k = y(v), l = class l extends k {
                 tabindex="-1"
                 ?disabled=${this.disabled}
                 size="sm"
-                aria-label=${(t = this.deleteAriaLabel) != null ? t : m("chip.remove")}
-                @click=${this.handleRemove}></dap-ds-icon-button>` : p}
+                aria-label=${(t = this.deleteAriaLabel) != null ? t : b("chip.remove")}
+                @click=${this.handleRemove}></dap-ds-icon-button>` : c}
         </dap-ds-stack>
       </div>
     `;
   }
 };
 l.tagName = "dap-ds-chip", l.dependencies = {
-  "dap-ds-stack": x,
-  "dap-ds-icon-button": g
-}, l.styles = T($);
+  "dap-ds-stack": T,
+  "dap-ds-icon-button": x
+}, l.styles = f($);
 let s = l;
 o([
   a({ type: Boolean })
@@ -130,7 +125,7 @@ o([
   u({ slot: "", flatten: !0 })
 ], s.prototype, "_slotNodes");
 o([
-  f()
+  v()
 ], s.prototype, "_slotTextContent");
 export {
   s as default

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

@@ -1 +1 @@
-{"version":3,"file":"chip.component.js","sources":["../../../src/components/chip/chip.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './chip.scss?inline'\n\nconst ChipBaseWithSized = SizedMixin(DdsElement)\n\nexport type ChipSize = 'sm' | 'lg'\n\n/**\n * `dap-ds-chip`\n * @summary A chip is a small status descriptor for UI elements.\n * @element dap-ds-chip\n * @title - Chip\n *\n * @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ value: string }} dds-remove - Fired when the chip is removed\n * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected\n *\n * @csspart base - The base part\n * @csspart content-container - The container for the content\n * @csspart remove-button - The remove button\n * @csspart remove-icon - The icon of the remove icon\n * @csspart remove-icon-base - The base of the remove icon\n * @csspart remove-icon-base-base - The base of the remove icon base\n *\n * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))\n * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))\n * @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)\n * @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)\n * @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))\n * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))\n *\n */\nexport default class DapDSChip extends ChipBaseWithSized {\n  static tagName = 'dap-ds-chip'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */\n  private get chipSize(): ChipSize {\n    const s = this.effectiveSize\n    return s === 'lg' || s === 'md' ? 'lg' : 'sm'\n  }\n\n  /** Whether the chip is removeable */\n  @property({ type: Boolean }) removeable = false\n\n  /** Whether the chip is selectable */\n  @property({ type: Boolean }) selectable = false\n\n  /** Whether the chip is selected */\n  @property({ type: Boolean, reflect: true }) selected = false\n\n  /** Whether the chip is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The value of the chip */\n  @property({ type: String }) value?: string\n\n  /** The aria label for the delete button */\n  @property({ type: String }) deleteAriaLabel?: string\n\n  /** `data-testid` for the remove button. */\n  @property() removeButtonTestId = 'chip-remove-button'\n\n  @queryAssignedNodes({ slot: '', flatten: true })\n  private _slotNodes!: Node[]\n\n  @state() private _slotTextContent = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * Gets the text content from the slot nodes\n   */\n  private extractSlotTextContent(nodes: Node[]): string {\n    if (!nodes || nodes.length === 0) return ''\n    return nodes\n      .map(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          return node.textContent?.trim() || ''\n        }\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          return (node as Element).textContent?.trim() || ''\n        }\n        return ''\n      })\n      .filter(text => text.length > 0)\n      .join(' ')\n  }\n\n  /**\n   * Handles slot content changes\n   */\n  private handleSlotChange(): void {\n    if (this._slotNodes) {\n      this._slotTextContent = this.extractSlotTextContent(this._slotNodes)\n    }\n  }\n\n  /**\n   * Gets the aria-label for the chip when removable\n   */\n  private getRemovableAriaLabel(): string {\n    const removableText = t('chip.removable')\n    return this._slotTextContent\n      ? `${this._slotTextContent}, ${removableText}`\n      : removableText\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Update slot text content when slot nodes are available\n    if (this._slotNodes && this._slotNodes.length > 0) {\n      this.handleSlotChange()\n    }\n\n    // Prevent removeable and selectable from being enabled together\n    if (\n      changedProperties.has('removeable') ||\n      changedProperties.has('selectable')\n    ) {\n      if (this.removeable && this.selectable) {\n        console.warn(\n          'Chip cannot be both removeable and selectable at the same time.',\n        )\n        // Disable selectable if removeable is set, or vice versa\n        if (changedProperties.has('removeable') && this.removeable) {\n          this.selectable = false\n        } else if (changedProperties.has('selectable') && this.selectable) {\n          this.removeable = false\n        }\n      }\n    }\n  }\n\n  private handleClick(event: Event): void {\n    event.stopPropagation()\n    if (!this.disabled && this.selectable) {\n      this.selected = !this.selected\n      this.emit('dds-select', { value: this.value, selected: this.selected })\n    }\n  }\n\n  private handleRemove(event: Event): void {\n    event.stopPropagation()\n    if (!this.disabled) {\n      this.emit('dds-remove', { value: this.value ?? '' })\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return\n    }\n\n    if (\n      (event.key === 'Delete' || event.key === 'Backspace') &&\n      this.removeable\n    ) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.handleRemove(event)\n    }\n\n    if (event.key === 'Enter' && this.selectable) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.handleClick(event)\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('chip', `chip--${this.chipSize}`, {\n          'chip--selected': this.selectable && this.selected,\n          'chip--disabled': this.disabled,\n          'chip--selectable': this.selectable,\n        })}\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${this.disabled}\n        aria-pressed=${this.selected}\n        aria-label=${this.removeable\n          ? this.getRemovableAriaLabel()\n          : (this.ariaLabel ?? nothing)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-stack direction=\"row\" spacing=\"200\" part=\"content-container\">\n          <slot part=\"content\" @slotchange=${this.handleSlotChange}></slot>\n          ${this.removeable\n            ? html`<dap-ds-icon-button\n                icon=\"close-line\"\n                part=\"remove-button\"\n                data-testid=${this.removeButtonTestId}\n                exportparts=\"base:remove-icon-base, icon:remove-icon, icon-base:remove-icon-base-base\"\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n                ?disabled=${this.disabled}\n                size=\"sm\"\n                aria-label=${this.deleteAriaLabel ?? t('chip.remove')}\n                @click=${this.handleRemove}></dap-ds-icon-button>`\n            : nothing}\n        </dap-ds-stack>\n      </div>\n    `\n  }\n}\n"],"names":["ChipBaseWithSized","SizedMixin","DdsElement","_DapDSChip","s","nodes","node","_a","_b","text","removableText","t","changedProperties","event","html","clsx","nothing","DapDSStack","DapDSIconButton","unsafeCSS","styles","DapDSChip","__decorateClass","property","queryAssignedNodes","state"],"mappings":"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"}
+{"version":3,"file":"chip.component.js","sources":["../../../src/components/chip/chip.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './chip.scss?inline'\n\nconst ChipBaseWithSized = SizedMixin(DdsElement)\n\nexport type ChipSize = 'sm' | 'lg'\n\n/**\n * `dap-ds-chip`\n * @summary A chip is a small status descriptor for UI elements.\n * @element dap-ds-chip\n * @title - Chip\n *\n * @property { 'sm' | 'lg' } size - The size of the chip. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @event {{ value: string }} dds-remove - Fired when the chip is removed\n * @event {{ value?: string, selected: boolean }} dds-select - Fired when the chip is selected\n *\n * @csspart base - The base part\n * @csspart content-container - The container for the content\n * @csspart remove-button - The remove button\n * @csspart remove-icon - The icon of the remove icon\n * @csspart remove-icon-base - The base of the remove icon\n * @csspart remove-icon-base-base - The base of the remove icon base\n * @csspart content - The content slot of the chip.\n *\n * @cssproperty --dds-chip-border - Border of the chip (default: var(--dds-border-width-base) solid var(--dds-transparent-black-base))\n * @cssproperty --dds-chip-border-radius - Border radius of the chip (default: var(--dds-radius-small))\n * @cssproperty --dds-chip-font-weight - Font weight of the chip (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-chip-line-height - Line height of the chip (default: 1.5)\n * @cssproperty --dds-chip-transition - Transition timing for chip interactions (default: all 0.2s ease-in-out)\n * @cssproperty --dds-chip-padding-sm - Padding for small chip size (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-chip-padding-lg - Padding for large chip size (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-chip-font-size-sm - Font size for small chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-font-size-lg - Font size for large chip size (default: var(--dds-font-xs))\n * @cssproperty --dds-chip-background-color - Background color of the chip (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-chip-text-color - Text color of the chip (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-chip-hover-background-color - Background color of the chip on hover (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-active-background-color - Background color of the chip when active (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-chip-selected-background-color - Background color of the selected chip (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-chip-selected-text-color - Text color of the selected chip (default: var(--dds-text-brand-subtle))\n * @cssproperty --dds-chip-selected-border-color - Border color of the selected chip (default: var(--dds-border-brand-base))\n * @cssproperty --dds-chip-disabled-background-color - Background color of the disabled chip (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-chip-disabled-text-color - Text color of the disabled chip (default: var(--dds-text-neutral-subtle))\n *\n */\nexport default class DapDSChip extends ChipBaseWithSized {\n  static tagName = 'dap-ds-chip'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */\n  private get chipSize(): ChipSize {\n    const s = this.effectiveSize\n    return s === 'lg' || s === 'md' ? 'lg' : 'sm'\n  }\n\n  /** Whether the chip is removeable */\n  @property({ type: Boolean }) removeable = false\n\n  /** Whether the chip is selectable */\n  @property({ type: Boolean }) selectable = false\n\n  /** Whether the chip is selected */\n  @property({ type: Boolean, reflect: true }) selected = false\n\n  /** Whether the chip is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The value of the chip */\n  @property({ type: String }) value?: string\n\n  /** The aria label for the delete button */\n  @property({ type: String }) deleteAriaLabel?: string\n\n  /** `data-testid` for the remove button. */\n  @property() removeButtonTestId = 'chip-remove-button'\n\n  @queryAssignedNodes({ slot: '', flatten: true })\n  private _slotNodes!: Node[]\n\n  @state() private _slotTextContent = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * Gets the text content from the slot nodes\n   */\n  private extractSlotTextContent(nodes: Node[]): string {\n    if (!nodes || nodes.length === 0) return ''\n    return nodes\n      .map(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          return node.textContent?.trim() || ''\n        }\n        if (node.nodeType === Node.ELEMENT_NODE) {\n          return (node as Element).textContent?.trim() || ''\n        }\n        return ''\n      })\n      .filter(text => text.length > 0)\n      .join(' ')\n  }\n\n  /**\n   * Handles slot content changes\n   */\n  private handleSlotChange(): void {\n    if (this._slotNodes) {\n      this._slotTextContent = this.extractSlotTextContent(this._slotNodes)\n    }\n  }\n\n  /**\n   * Gets the aria-label for the chip when removable\n   */\n  private getRemovableAriaLabel(): string {\n    const removableText = t('chip.removable')\n    return this._slotTextContent\n      ? `${this._slotTextContent}, ${removableText}`\n      : removableText\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties)\n\n    // Update slot text content when slot nodes are available\n    if (this._slotNodes && this._slotNodes.length > 0) {\n      this.handleSlotChange()\n    }\n\n    // Prevent removeable and selectable from being enabled together\n    if (\n      changedProperties.has('removeable') ||\n      changedProperties.has('selectable')\n    ) {\n      if (this.removeable && this.selectable) {\n        console.warn(\n          'Chip cannot be both removeable and selectable at the same time.',\n        )\n        // Disable selectable if removeable is set, or vice versa\n        if (changedProperties.has('removeable') && this.removeable) {\n          this.selectable = false\n        } else if (changedProperties.has('selectable') && this.selectable) {\n          this.removeable = false\n        }\n      }\n    }\n  }\n\n  private handleClick(event: Event): void {\n    event.stopPropagation()\n    if (!this.disabled && this.selectable) {\n      this.selected = !this.selected\n      this.emit('dds-select', { value: this.value, selected: this.selected })\n    }\n  }\n\n  private handleRemove(event: Event): void {\n    event.stopPropagation()\n    if (!this.disabled) {\n      this.emit('dds-remove', { value: this.value ?? '' })\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) {\n      return\n    }\n\n    if (\n      (event.key === 'Delete' || event.key === 'Backspace') &&\n      this.removeable\n    ) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.handleRemove(event)\n    }\n\n    if (event.key === 'Enter' && this.selectable) {\n      event.preventDefault()\n      event.stopPropagation()\n      this.handleClick(event)\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('chip', `chip--${this.chipSize}`, {\n          'chip--selected': this.selectable && this.selected,\n          'chip--disabled': this.disabled,\n          'chip--selectable': this.selectable,\n        })}\n        role=\"button\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${this.disabled}\n        aria-pressed=${this.selected}\n        aria-label=${this.removeable\n          ? this.getRemovableAriaLabel()\n          : (this.ariaLabel ?? nothing)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-stack direction=\"row\" spacing=\"200\" part=\"content-container\">\n          <slot part=\"content\" @slotchange=${this.handleSlotChange}></slot>\n          ${this.removeable\n            ? html`<dap-ds-icon-button\n                icon=\"close-line\"\n                part=\"remove-button\"\n                data-testid=${this.removeButtonTestId}\n                exportparts=\"base:remove-icon-base, icon:remove-icon, icon-base:remove-icon-base-base\"\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n                ?disabled=${this.disabled}\n                size=\"sm\"\n                aria-label=${this.deleteAriaLabel ?? t('chip.remove')}\n                @click=${this.handleRemove}></dap-ds-icon-button>`\n            : nothing}\n        </dap-ds-stack>\n      </div>\n    `\n  }\n}\n"],"names":["ChipBaseWithSized","SizedMixin","DdsElement","_DapDSChip","s","nodes","node","_a","_b","text","removableText","t","changedProperties","event","html","clsx","nothing","DapDSStack","DapDSIconButton","unsafeCSS","styles","DapDSChip","__decorateClass","property","queryAssignedNodes","state"],"mappings":"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"}