dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,324 @@
+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;
+}, t;
+const n = (t = class extends f {
+  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);
+    this.inputId = `input-${t.nextId}-${e}`, this.labelId = `label-${t.nextId}-${e}`, this.descriptionId = `description-${t.nextId}-${e}`, this.feedbackId = `feedback-${t.nextId}-${e}`;
+  }
+  /**
+   * Validates property combinations and logs warnings for invalid states.
+   * @private
+   */
+  validateProperties() {
+    this.checked && this.indeterminate && console.warn(
+      "Checkbox: Cannot be both checked and indeterminate simultaneously. Indeterminate state will take precedence."
+    );
+  }
+  /**
+   * Gets the aria-describedby attribute value by combining description and feedback IDs.
+   * @returns {string | undefined} Space-separated IDs or undefined if none exist
+   * @private
+   */
+  getAriaDescribedBy() {
+    const e = [];
+    return this.description && e.push(this.descriptionId), this.feedback && e.push(this.feedbackId), e.length > 0 ? e.join(" ") : void 0;
+  }
+  /**
+   * Gets the aria-checked attribute value based on checkbox state.
+   * @returns {'true' | 'false' | 'mixed'} The appropriate aria-checked value
+   * @private
+   */
+  getAriaChecked() {
+    return this.indeterminate ? "mixed" : this.checked ? "true" : "false";
+  }
+  /**
+   * Handles click events on the checkbox.
+   * Manages the checked/indeterminate state transitions and emits change events.
+   * @private
+   */
+  handleClick(e) {
+    if (this.preventDefault || this.disabled || this.readonly) {
+      this.readonly && e && (e.preventDefault(), e.stopPropagation());
+      return;
+    }
+    this.validateProperties(), this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked;
+    const { checked: a, indeterminate: p, value: i, disabled: r } = this;
+    try {
+      this.emit("dds-change", {
+        checked: a,
+        indeterminate: p,
+        value: i || (a ? "on" : "off"),
+        disabled: r,
+        readonly: this.readonly,
+        type: "checkbox"
+      });
+    } catch (d) {
+      console.error("Error emitting checkbox change event:", d);
+    }
+    try {
+      this.setValidity();
+    } catch (d) {
+      console.error("Error setting checkbox validity:", d);
+    }
+  }
+  /**
+   * Handles input events on the checkbox.
+   * Emits the dds-input event with current checkbox state.
+   * @private
+   */
+  handleInput() {
+    const { checked: e, indeterminate: a, value: p, disabled: i } = this, r = new CustomEvent("dds-input", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: {
+        checked: e,
+        indeterminate: a,
+        value: p,
+        disabled: i,
+        readonly: this.readonly
+      }
+    });
+    this.dispatchEvent(r);
+  }
+  /**
+   * Handles keyboard events on the checkbox.
+   * Provides enhanced keyboard navigation and accessibility.
+   * @param {KeyboardEvent} event - The keyboard event
+   * @private
+   */
+  handleKeyDown(e) {
+    this.readonly || e.code !== "Space" && e.code === "Enter" && (e.preventDefault(), this.handleClick());
+  }
+  get focusElement() {
+    if (!this.input)
+      throw new Error(
+        "Checkbox input element not found. Component may not be properly initialized."
+      );
+    return this.input;
+  }
+  /**
+   * Programmatically focuses the checkbox input element.
+   * @public
+   */
+  focus() {
+    this.input && !this.disabled && !this.readonly && this.input.focus();
+  }
+  /**
+   * Programmatically blurs the checkbox input element.
+   * @public
+   */
+  blur() {
+    this.input && this.input.blur();
+  }
+  /**
+   * Renders the appropriate icon based on checkbox state.
+   * @returns {TemplateResult | null} The icon template or null if unchecked
+   * @private
+   */
+  renderIcon() {
+    return this.indeterminate ? l`
+        <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`
+        <dap-ds-icon-check-line2
+          class="checkbox__icon"
+          part="icon"
+          exportparts="base:icon-base"
+          size="16"
+          decorative></dap-ds-icon-check-line2>
+      ` : null;
+  }
+  /**
+   * Handles invalid events on the checkbox input.
+   * Prevents the default browser validation UI from showing and manages invalid state.
+   * @param {Event} event - The invalid event
+   * @private
+   */
+  handleInvalid(e) {
+    e.preventDefault(), this.invalid || (this.invalid = !0);
+  }
+  setValidity() {
+    if (!this.innerInput) return;
+    const { valid: e } = this.innerInput.validity;
+    e ? (this.required && (this.invalid = !1), this.internals.setValidity({})) : this.internals.setValidity(
+      this.innerInput.validity,
+      this.validationMessage,
+      this.innerInput
+    );
+  }
+  render() {
+    return l`
+      <div part="base">
+        <label
+          part="base-label"
+          class=${o("checkbox choice", `checkbox--${this.size}`, {
+      "checkbox--checked": this.checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--readonly": this.readonly,
+      "checkbox--indeterminate": this.indeterminate,
+      "checkbox--required": this.required,
+      "choice--readonly": this.readonly,
+      "choice--disabled": this.disabled,
+      "choice__label--right": this.labelPlacement === "right",
+      "choice__label--left": this.labelPlacement === "left"
+    })}>
+          <div
+            part="wrapper"
+            class=${o("input__wrapper", {
+      "input__wrapper--background": this.type === "background",
+      "input__wrapper--border": this.border
+    })}>
+            <input
+              part="input"
+              type="checkbox"
+              class=${o("input", {
+      "input--background": this.type === "background"
+    })}
+              name=${s(this.name ? this.name : void 0)}
+              id=${this.inputId}
+              .indeterminate=${this.indeterminate}
+              .checked=${this.checked}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              aria-labelledby=${s(
+      !this.ariaLabel && this.label ? this.labelId : void 0
+    )}
+              aria-describedby=${this.ariaLabel ? "" : s(this.getAriaDescribedBy())}
+              aria-checked=${this.getAriaChecked()}
+              .aria-invalid=${this.invalid ? "true" : null}
+              @invalid=${this.handleInvalid}
+              @click=${this.handleClick}
+              @input=${this.handleInput}
+              @keydown=${this.handleKeyDown}
+              @blur=${super.onBlur}
+              @focus=${super.onFocus} />
+
+            <span
+              part="control"
+              class=${o("input__control", `input__control--${this.size}`, {
+      "input__control--checked": this.checked,
+      "input__control--disabled": this.disabled,
+      "input__control--readonly": this.readonly,
+      "input__control--indeterminate": this.indeterminate,
+      "input__control--invalid": this.invalid
+    })}>
+              <span
+                part="high-contrast"
+                class=${o(
+      "input__control-high-contrast",
+      `input__control-high-contrast--${this.size}`,
+      {
+        "input__control-high-contrast--disabled": this.disabled,
+        "input__control-high-contrast--readonly": this.readonly
+      }
+    )}></span>
+              <slot name="iconcontent"> ${this.renderIcon()} </slot>
+            </span>
+
+            <div
+              part="label-container"
+              class=${o("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`
+                <dap-ds-typography
+                  class="description"
+                  variant="description"
+                  part="description"
+                  aria-hidden="true"
+                  size=${s(this.size)}
+                  id=${this.descriptionId}>
+                  ${this.description}
+                </dap-ds-typography>
+              `}
+            </div>
+          </div>
+          ${this.feedback && l`
+            <dap-ds-feedback
+              part="feedback"
+              feedbackType=${s(this.feedbackType)}
+              feedbackSize=${s(this.size)}
+              id="feedback"
+              .subtle=${this.subtle}>
+              ${this.feedback}
+            </dap-ds-feedback>
+          `}
+        </label>
+      </div>
+    `;
+  }
+}, 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")
+], n.prototype, "input");
+c([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "indeterminate");
+c([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "preventDefault");
+c([
+  h({ type: Boolean })
+], n.prototype, "border");
+c([
+  h({ type: Boolean, reflect: !0 })
+], n.prototype, "readonly");
+c([
+  h({ type: String })
+], n.prototype, "type");
+let j = n;
+export {
+  j as default
+};
+//# sourceMappingURL=checkbox.component.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;AAuFA,MAAqBA,KAArBC,IAAA,cAA2CC,EAAqB;AAAA,EAsC9D,cAAc;AACN,UAAA,GAnBoD,KAAA,gBAAA,IAGU,KAAA,iBAAA,IAGvB,KAAA,SAAA,IAGiB,KAAA,WAAA,IAKJ,KAAA,OAAA,UAM5CD,EAAA;AACd,UAAME,IACJ,OAAO,UAAW,eAAe,OAAO,aACpC,OAAO,WAAA,EAAa,MAAM,GAAG,CAAC,IAC9B,KAAK,IAAI,EAAE,SAAS,EAAE;AAC5B,SAAK,UAAU,SAASF,EAAc,MAAM,IAAIE,CAAY,IAC5D,KAAK,UAAU,SAASF,EAAc,MAAM,IAAIE,CAAY,IAC5D,KAAK,gBAAgB,eAAeF,EAAc,MAAM,IAAIE,CAAY,IAExE,KAAK,aAAa,YAAYF,EAAc,MAAM,IAAIE,CAAY;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5D,qBAA2B;AAE7B,IAAA,KAAK,WAAW,KAAK,iBACf,QAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQM,qBAAyC;AAC/C,UAAMC,IAAgB,CAAC;AAEvB,WAAI,KAAK,eACHA,EAAA,KAAK,KAAK,aAAa,GAGzB,KAAK,YACHA,EAAA,KAAK,KAAK,UAAW,GAGpBA,EAAI,SAAS,IAAIA,EAAI,KAAK,GAAG,IAAI;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlC,iBAA6C;AACnD,WAAI,KAAK,gBACA,UAEF,KAAK,UAAU,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQzB,YAAYC,GAAe;AAEjC,QAAI,KAAK,kBAAkB,KAAK,YAAY,KAAK,UAAU;AACrD,MAAA,KAAK,YAAYA,MACnBA,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AAExB;AAAA,IAAA;AAIF,SAAK,mBAAmB,GAGpB,KAAK,iBACP,KAAK,gBAAgB,IACrB,KAAK,UAAU,MAEV,KAAA,UAAU,CAAC,KAAK;AAGvB,UAAM,EAAE,SAAAC,GAAS,eAAAC,GAAe,OAAAC,GAAO,UAAAC,EAAa,IAAA;AAGhD,QAAA;AACF,WAAK,KAAK,cAAc;AAAA,QACtB,SAAAH;AAAA,QACA,eAAAC;AAAA,QACA,OAAOC,MAAUF,IAAU,OAAO;AAAA,QAClC,UAAAG;AAAA,QACA,UAAU,KAAK;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,aACMC,GAAO;AACN,cAAA,MAAM,yCAAyCA,CAAK;AAAA,IAAA;AAI1D,QAAA;AACF,WAAK,YAAY;AAAA,aACVA,GAAO;AACN,cAAA,MAAM,oCAAoCA,CAAK;AAAA,IAAA;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQM,cAAc;AACpB,UAAM,EAAE,SAAAJ,GAAS,eAAAC,GAAe,OAAAC,GAAO,UAAAC,EAAa,IAAA,MAE9CJ,IAAQ,IAAI,YAAY,aAAa;AAAA,MACzC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,QAAQ;AAAA,QACN,SAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,UAAAC;AAAA,QACA,UAAU,KAAK;AAAA,MAAA;AAAA,IACjB,CACD;AAED,SAAK,cAAcJ,CAAK;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlB,cAAcA,GAA4B;AAEhD,IAAI,KAAK,YAKLA,EAAM,SAAS,WAOfA,EAAM,SAAS,YACjBA,EAAM,eAAe,GACrB,KAAK,YAAY;AAAA,EACnB;AAAA,EAGF,IAAW,eAAiC;AACtC,QAAA,CAAC,KAAK;AACR,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAEF,WAAO,KAAK;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOP,QAAc;AACnB,IAAI,KAAK,SAAS,CAAC,KAAK,YAAY,CAAC,KAAK,YACxC,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOK,OAAa;AAClB,IAAI,KAAK,SACP,KAAK,MAAM,KAAK;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQF,aAAa;AACX,WAAI,KAAK,gBACAM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,UAUL,KAAK,UACAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,UAUF;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAST,cAAcN,GAAc;AAC1B,IAAAA,EAAM,eAAe,GAEhB,KAAK,YACR,KAAK,UAAU;AAAA,EACjB;AAAA,EAGF,cAAc;AACR,QAAA,CAAC,KAAK,WAAY;AACtB,UAAM,EAAE,OAAAO,EAAA,IAAW,KAAK,WAAgC;AACxD,IAAIA,KAIE,KAAK,aAAU,KAAK,UAAU,KAC7B,KAAA,UAAU,YAAY,EAAE,KAE7B,KAAK,UAAU;AAAA,MACZ,KAAK,WAAgC;AAAA,MACtC,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EACF;AAAA,EAGF,SAAS;AACA,WAAAD;AAAAA;AAAAA;AAAAA;AAAAA,kBAIOE,EAAK,mBAAmB,aAAa,KAAK,IAAI,IAAI;AAAA,MACxD,qBAAqB,KAAK;AAAA,MAC1B,sBAAsB,KAAK;AAAA,MAC3B,sBAAsB,KAAK;AAAA,MAC3B,2BAA2B,KAAK;AAAA,MAChC,sBAAsB,KAAK;AAAA,MAC3B,oBAAoB,KAAK;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,wBAAwB,KAAK,mBAAmB;AAAA,MAChD,uBAAuB,KAAK,mBAAmB;AAAA,IAAA,CAChD,CAAC;AAAA;AAAA;AAAA,oBAGQA,EAAK,kBAAkB;AAAA,MAC7B,8BAA8B,KAAK,SAAS;AAAA,MAC5C,0BAA0B,KAAK;AAAA,IAAA,CAChC,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIQA,EAAK,SAAS;AAAA,MACpB,qBAAqB,KAAK,SAAS;AAAA,IAAA,CACpC,CAAC;AAAA,qBACKC,EAAU,KAAK,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,mBAC9C,KAAK,OAAO;AAAA,+BACA,KAAK,aAAa;AAAA,yBACxB,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA,0BACb,KAAK,QAAQ;AAAA,gCACPA;AAAAA,MAChB,CAAC,KAAK,aAAa,KAAK,QAAQ,KAAK,UAAU;AAAA,IAChD,CAAA;AAAA,iCACmB,KAAK,YAErB,KADAA,EAAU,KAAK,mBAAoB,CAAA,CACjC;AAAA,6BACS,KAAK,eAAgB,CAAA;AAAA,8BACpB,KAAK,UAAU,SAAS,IAAI;AAAA,yBACjC,KAAK,aAAa;AAAA,uBACpB,KAAK,WAAW;AAAA,uBAChB,KAAK,WAAW;AAAA,yBACd,KAAK,aAAa;AAAA,sBACrB,MAAM,MAAM;AAAA,uBACX,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIdD,EAAK,kBAAkB,mBAAmB,KAAK,IAAI,IAAI;AAAA,MAC7D,2BAA2B,KAAK;AAAA,MAChC,4BAA4B,KAAK;AAAA,MACjC,4BAA4B,KAAK;AAAA,MACjC,iCAAiC,KAAK;AAAA,MACtC,2BAA2B,KAAK;AAAA,IAAA,CACjC,CAAC;AAAA;AAAA;AAAA,wBAGQA;AAAA,MACN;AAAA,MACA,iCAAiC,KAAK,IAAI;AAAA,MAC1C;AAAA,QACE,0CAA0C,KAAK;AAAA,QAC/C,0CAA0C,KAAK;AAAA,MAAA;AAAA,IACjD,CACD;AAAA,0CACyB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKrCA,EAAK,2BAA2B;AAAA,MACtC,qCAAqC,KAAK;AAAA,MAC1C,qCAAqC,KAAK;AAAA,MAC1C,yBAAyB,KAAK,yBAAyB;AAAA,MACvD,sBAAsB,KAAK,yBAAyB;AAAA,IAAA,CACrD,CAAC;AAAA,gBACA,KAAK,SACPF;AAAAA,qBACO,KAAK,OAAO;AAAA;AAAA;AAAA,wBAGT,KAAK,IAAI;AAAA,4BACL,KAAK,QAAQ;AAAA,iCACR,KAAK,aAAa;AAAA,4BACvB,KAAK,QAAQ;AAAA;AAAA,iCAER,KAAK,aAAa;AAAA,4BACvB,KAAK,YAAY,KAAK,QAAQ;AAAA,4BAC9B,KAAK,QAAQ;AAAA,6BACZ,KAAK,SAAS;AAAA,wBACnBG,EAAU,KAAK,KAAK,CAAC;AAAA;AAAA;AAAA,mCAGV;AAAA,gBACnB,KAAK,eACPH;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,yBAMWG,EAAU,KAAK,IAA6B,CAAC;AAAA,uBAC/C,KAAK,aAAa;AAAA,oBACrB,KAAK,WAAW;AAAA;AAAA,eAErB;AAAA;AAAA;AAAA,YAGH,KAAK,YACPH;AAAAA;AAAAA;AAAAA,6BAGmBG,EAAU,KAAK,YAAY,CAAC;AAAA,6BAC5BA,EAAU,KAAK,IAAI,CAAe;AAAA;AAAA,wBAEvC,KAAK,MAAM;AAAA,gBACnB,KAAK,QAAQ;AAAA;AAAA,WAElB;AAAA;AAAA;AAAA;AAAA,EAAA;AAKX,GA7ZEb,EAAO,UAAU,mBAEjBA,EAAO,eAAe;AAAA,EACpB,6BAA6Bc;AAAA,EAC7B,2BAA2BC;AAAA,EAC3B,qBAAqBC;AAAA,EACrB,qBAAqBC;AAAA,EACrB,mBAAmBC;AACrB,GAEAlB,EAAe,SAAS,GAyBRA,EAAA,SAASmB,EAAUC,CAAM,GApC3CpB;AAiBoCqB,EAAA;AAAA,EAAjCC,EAAM,QAAQ;AAAA,GAjBIvB,EAiBe,WAAA,OAAA;AAGUsB,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GApBvBxB,EAoByB,WAAA,eAAA;AAGAsB,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAvBvBxB,EAuByB,WAAA,gBAAA;AAGfsB,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA1BRxB,EA0BU,WAAA,QAAA;AAGesB,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GA7BvBxB,EA6ByB,WAAA,UAAA;AAKhBsB,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlCPxB,EAkCS,WAAA,MAAA;AAlC9B,IAAqByB,IAArBzB;"}

package/dist/components/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

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

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

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

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

@@ -1,4 +1,6 @@
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
+import { default as DapDSStack } from '../stack/stack.component';
 declare const ChipBaseWithSized: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -44,6 +46,11 @@ export type ChipSize = 'sm' | 'lg';
  *
  */
 export default class DapDSChip extends ChipBaseWithSized {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-stack': typeof DapDSStack;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+    };
     /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */
     private get chipSize();
     /** Whether the chip is removeable */

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

@@ -0,0 +1,138 @@
+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 "../../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 $ 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";
+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 {
+  constructor() {
+    super(...arguments), this.removeable = !1, this.selectable = !1, this.selected = !1, this.disabled = !1, this.removeButtonTestId = "chip-remove-button", this._slotTextContent = "";
+  }
+  /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */
+  get chipSize() {
+    const e = this.effectiveSize;
+    return e === "lg" || e === "md" ? "lg" : "sm";
+  }
+  /**
+   * Gets the text content from the slot nodes
+   */
+  extractSlotTextContent(e) {
+    return !e || e.length === 0 ? "" : e.map((t) => {
+      var r, i;
+      return t.nodeType === Node.TEXT_NODE ? ((r = t.textContent) == null ? void 0 : r.trim()) || "" : t.nodeType === Node.ELEMENT_NODE && ((i = t.textContent) == null ? void 0 : i.trim()) || "";
+    }).filter((t) => t.length > 0).join(" ");
+  }
+  /**
+   * Handles slot content changes
+   */
+  handleSlotChange() {
+    this._slotNodes && (this._slotTextContent = this.extractSlotTextContent(this._slotNodes));
+  }
+  /**
+   * Gets the aria-label for the chip when removable
+   */
+  getRemovableAriaLabel() {
+    const e = m("chip.removable");
+    return this._slotTextContent ? `${this._slotTextContent}, ${e}` : e;
+  }
+  updated(e) {
+    super.updated(e), this._slotNodes && this._slotNodes.length > 0 && this.handleSlotChange(), (e.has("removeable") || e.has("selectable")) && this.removeable && this.selectable && (console.warn(
+      "Chip cannot be both removeable and selectable at the same time."
+    ), e.has("removeable") && this.removeable ? this.selectable = !1 : e.has("selectable") && this.selectable && (this.removeable = !1));
+  }
+  handleClick(e) {
+    e.stopPropagation(), !this.disabled && this.selectable && (this.selected = !this.selected, this.emit("dds-select", { value: this.value, selected: this.selected }));
+  }
+  handleRemove(e) {
+    var t;
+    e.stopPropagation(), this.disabled || this.emit("dds-remove", { value: (t = this.value) != null ? t : "" });
+  }
+  handleKeyDown(e) {
+    this.disabled || ((e.key === "Delete" || e.key === "Backspace") && this.removeable && (e.preventDefault(), e.stopPropagation(), this.handleRemove(e)), e.key === "Enter" && this.selectable && (e.preventDefault(), e.stopPropagation(), this.handleClick(e)));
+  }
+  render() {
+    var e, t;
+    return c`
+      <div
+        part="base"
+        class=${b("chip", `chip--${this.chipSize}`, {
+      "chip--selected": this.selectable && this.selected,
+      "chip--disabled": this.disabled,
+      "chip--selectable": this.selectable
+    })}
+        role="button"
+        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}
+        @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
+                icon="close-line"
+                part="remove-button"
+                data-testid=${this.removeButtonTestId}
+                exportparts="base:remove-icon-base, icon:remove-icon, icon-base:remove-icon-base-base"
+                aria-hidden="true"
+                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}
+        </dap-ds-stack>
+      </div>
+    `;
+  }
+};
+l.tagName = "dap-ds-chip", l.dependencies = {
+  "dap-ds-stack": x,
+  "dap-ds-icon-button": g
+}, l.styles = T($);
+let s = l;
+o([
+  a({ type: Boolean })
+], s.prototype, "removeable");
+o([
+  a({ type: Boolean })
+], s.prototype, "selectable");
+o([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "selected");
+o([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+o([
+  a({ type: String })
+], s.prototype, "value");
+o([
+  a({ type: String })
+], s.prototype, "deleteAriaLabel");
+o([
+  a()
+], s.prototype, "removeButtonTestId");
+o([
+  u({ slot: "", flatten: !0 })
+], s.prototype, "_slotNodes");
+o([
+  f()
+], s.prototype, "_slotTextContent");
+export {
+  s as default
+};
+//# sourceMappingURL=chip.component.js.map

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

@@ -0,0 +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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"}

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

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

package/dist/components/chip/chip.js

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

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

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

package/dist/components/chip/chip.scss.js

@@ -0,0 +1,5 @@
+const d = ":host{display:inline-flex;--dds-chip-border: var(--dds-border-width-base) solid var(--dds-transparent-black-base);--dds-chip-border-radius: var(--dds-radius-small);--dds-chip-font-weight: var(--dds-font-weight-bold);--dds-chip-line-height: 1.5;--dds-chip-transition: all .2s ease-in-out;--dds-chip-padding-sm: var(--dds-spacing-100) var(--dds-spacing-200);--dds-chip-padding-lg: var(--dds-spacing-200) var(--dds-spacing-300);--dds-chip-font-size-sm: var(--dds-font-xs);--dds-chip-font-size-lg: var(--dds-font-xs);--dds-chip-background-color: var(--dds-background-neutral-base);--dds-chip-text-color: var(--dds-text-neutral-base);--dds-chip-hover-background-color: var(--dds-background-neutral-medium);--dds-chip-active-background-color: var(--dds-background-neutral-strong);--dds-chip-selected-background-color: var(--dds-background-brand-medium);--dds-chip-selected-text-color: var(--dds-text-brand-subtle);--dds-chip-selected-border-color: var(--dds-border-brand-base);--dds-chip-disabled-background-color: var(--dds-background-neutral-medium);--dds-chip-disabled-text-color: var(--dds-text-neutral-subtle)}.chip{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;align-items:center;transition:var(--dds-chip-transition);border:var(--dds-chip-border);border-radius:var(--dds-chip-border-radius);outline-offset:calc(-1 * var(--dds-spacing-50));background-color:var(--dds-chip-background-color);color:var(--dds-chip-text-color);font-weight:var(--dds-chip-font-weight);line-height:var(--dds-chip-line-height);cursor:pointer}.chip:focus-visible{outline-style:solid}.chip:not(:focus-visible){outline:none}.chip:hover:not(.chip--disabled){background-color:var(--dds-chip-hover-background-color)}.chip:active:not(.chip--disabled){background-color:var(--dds-chip-active-background-color)}.chip--sm{padding:var(--dds-chip-padding-sm);font-size:var(--dds-chip-font-size-sm)}.chip--lg{padding:var(--dds-chip-padding-lg);font-size:var(--dds-chip-font-size-lg)}.chip--selected{border-color:var(--dds-chip-selected-border-color);background-color:var(--dds-chip-selected-background-color);color:var(--dds-chip-selected-text-color)}.chip--disabled{background-color:var(--dds-chip-disabled-background-color);color:var(--dds-chip-disabled-text-color);cursor:not-allowed}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}";
+export {
+  d as default
+};
+//# sourceMappingURL=chip.scss.js.map

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

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

package/dist/components/code-puncher/code-puncher-slot.component.d.ts

@@ -10,6 +10,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @csspart input - The input element.
  */
 export default class DapDSCodePuncherSlot extends DdsElement {
+    static tagName: string;
     static readonly styles: import('lit').CSSResult;
     private _consumer;
     private _ctx;
@@ -29,5 +30,5 @@ export default class DapDSCodePuncherSlot extends DdsElement {
     private _handlePaste;
     private _onFocus;
     private _onBlur;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
 }