dap-design-system 0.60.2 → 0.61.0

package/dist/components/radio-button/radio-button.component.d.ts

@@ -1,5 +1,8 @@
 import { PropertyValueMap } from 'lit';
 import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement';
+import { default as DapDSFeedback } from '../feedback/feedback.component';
+import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
+import { default as DapDSTypography } from '../typography/typography.component';
 /**
  * `dap-ds-radio-button`
  * @summary A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.
@@ -74,6 +77,12 @@ import { LabeledChoiceElement } from '../../internal/mixin/labeledChoiceElement'
  * @cssproperty --dds-radio-readonly-icon-color - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base))
  */
 export default class DapDSRadioButton extends LabeledChoiceElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-form-label': typeof DapDSFormLabel;
+        'dap-ds-typography': typeof DapDSTypography;
+        'dap-ds-feedback': typeof DapDSFeedback;
+    };
     private static nextId;
     private readonly inputId;
     private readonly labelId;

package/dist/components/radio-button/radio-button.component.js

@@ -0,0 +1,265 @@
+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 l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as b } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as h } from "../../node_modules/lit-html/static.js";
+import { LabeledChoiceElement as y } from "../../internal/mixin/labeledChoiceElement.js";
+import f from "../feedback/feedback.component.js";
+import m from "../form/form-label/form-label.component.js";
+import k from "../typography/typography.component.js";
+import v from "./_styles/radio-button.scss.js";
+import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var _ = Object.defineProperty, n = (p, e, t, a) => {
+  for (var s = void 0, c = p.length - 1, u; c >= 0; c--)
+    (u = p[c]) && (s = u(e, t, s) || s);
+  return s && _(e, t, s), s;
+};
+const I = typeof ElementInternals != "undefined" && "ariaDescription" in ElementInternals.prototype;
+var i;
+const r = (i = class extends y {
+  constructor() {
+    super(), this.focusable = !1, this.preventDefault = !1, this.readonly = !1, this.border = !1, this.type = "normal", this._onHostKeydown = (t) => {
+      t.key === "Enter" && (t.preventDefault(), HTMLElement.prototype.click.apply(this));
+    }, i.nextId++;
+    const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
+    this.inputId = `input-${i.nextId}-${e}`, this.labelId = `label-${i.nextId}-${e}`, this.descriptionId = `description-${i.nextId}-${e}`, this.feedbackId = `feedback-${i.nextId}-${e}`, this.internals.role = "radio";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "radio"), this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("keydown", this._onHostKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", this.onFocus), this.removeEventListener("blur", this.onBlur), this.removeEventListener("keydown", this._onHostKeydown);
+  }
+  _syncHostAria() {
+    const e = this.checked ? "true" : "false";
+    this.internals.ariaChecked = e, this.setAttribute("aria-checked", e), this.posInSet != null ? this.setAttribute("aria-posinset", String(this.posInSet)) : this.removeAttribute("aria-posinset"), this.setSize != null ? this.setAttribute("aria-setsize", String(this.setSize)) : this.removeAttribute("aria-setsize"), this.internals.ariaPosInSet = this.posInSet != null ? String(this.posInSet) : null, this.internals.ariaSetSize = this.setSize != null ? String(this.setSize) : null, this.internals.ariaDisabled = this.disabled ? "true" : null, this.internals.ariaRequired = this.required ? "true" : null;
+    let t;
+    I ? (this.internals.ariaLabel = this.label || null, this.internals.ariaDescription = this.description || null, t = this.label || "") : (t = [this.label, this.description].filter(Boolean).join(". "), this.internals.ariaLabel = t || null), t ? this.setAttribute("aria-label", t) : this.removeAttribute("aria-label");
+    const a = (this.focusable || this.checked) && !this.disabled;
+    this.setAttribute("tabindex", a ? "0" : "-1");
+  }
+  /**
+   * Handles click events on the radio button.
+   * Manages the checked state and emits change events.
+   * @private
+   */
+  handleClick() {
+    if (this.preventDefault || this.disabled || this.readonly)
+      return;
+    this.checked = !0;
+    const { checked: e, value: t, disabled: a } = this;
+    try {
+      this.emit("dds-change", {
+        checked: e,
+        // `?? ''` not `|| ''` — a radio may legitimately carry `false` or `0`
+        value: t != null ? t : "",
+        disabled: a,
+        readonly: this.readonly,
+        type: "radio"
+      });
+    } catch (s) {
+      console.error("Error emitting radio button change event:", s);
+    }
+    try {
+      this.setValidity();
+    } catch (s) {
+      console.error("Error setting radio button validity:", s);
+    }
+  }
+  formResetCallback() {
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.checked = this.defaultValue === this.value;
+  }
+  /**
+   * Handles input events on the radio button.
+   * Emits the dds-input event with current radio button state.
+   * @private
+   */
+  handleInput() {
+    const { checked: e, value: t, disabled: a } = this, s = new CustomEvent("dds-input", {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: { checked: e, value: t, disabled: a, readonly: this.readonly }
+    });
+    this.dispatchEvent(s);
+  }
+  get focusElement() {
+    if (!this.input)
+      throw new Error(
+        "Radio button input element not found. Component may not be properly initialized."
+      );
+    return this.input;
+  }
+  focus() {
+    !this.disabled && !this.readonly && HTMLElement.prototype.focus.apply(this);
+  }
+  blur() {
+    HTMLElement.prototype.blur.apply(this);
+  }
+  /**
+   * Handles invalid events on the radio button 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);
+  }
+  updated(e) {
+    if (super.updated(e), this._syncHostAria(), !(this.closest("dap-ds-radio-group") !== null) && (e.has("required") || e.has("checked") || e.has("disabled")) && this.innerInput && this.innerInput instanceof HTMLInputElement) {
+      const a = !this.innerInput.checkValidity();
+      this.invalid !== a && (this.invalid = a);
+    }
+  }
+  render() {
+    return h`
+      <div part="base">
+        <label
+          part="base-label"
+          class=${o("radio choice", `radio--${this.size}`, {
+      "radio--checked": this.checked,
+      "radio--disabled": this.disabled,
+      "radio--readonly": this.readonly,
+      "radio--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="radio"
+              class=${o("radio__input", {
+      "radio__input--background": this.type === "background"
+    })}
+              id=${this.inputId}
+              value=${d(this.value)}
+              .checked=${this.checked}
+              .disabled=${this.disabled}
+              .required=${this.required}
+              ?readonly=${this.readonly}
+              tabindex="-1"
+              aria-hidden="true"
+              aria-checked=${this.checked ? "true" : "false"}
+              @invalid=${this.handleInvalid}
+              @click=${this.handleClick}
+              @input=${this.handleInput} />
+            <span
+              part="control"
+              class=${o("input__control", {
+      "input__control--disabled": this.disabled,
+      "input__control--readonly": this.readonly,
+      "input__control--invalid": this.invalid,
+      "input__control--checked": this.checked
+    })}>
+              <slot name="iconcontent">
+                <span class="radio__icon"></span>
+              </slot>
+              <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>
+            </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 && h`<dap-ds-form-label
+                id=${this.labelId}
+                class="label"
+                part="label"
+                .size=${this.size}
+                .required=${this.required}
+                .requiredLabel=${this.requiredLabel}
+                .optional=${this.optional}
+                .optionalLabel=${this.optionalLabel}
+                aria-hidden="true"
+                .disabled=${this.disabled || this.readonly}
+                .readonly=${this.readonly}
+                .hideLabel=${this.hideLabel}
+                label=${d(this.label)}
+                subtle
+                .noMargin=${!0}
+                renderAs="span">
+              </dap-ds-form-label>`}
+              ${this.description && h`
+                <dap-ds-typography
+                  class="description"
+                  variant="description"
+                  part="description"
+                  aria-hidden="true"
+                  size=${d(this.size)}
+                  id=${this.descriptionId}>
+                  ${this.description}
+                </dap-ds-typography>
+              `}
+            </div>
+          </div>
+          ${this.feedback && h`
+            <dap-ds-feedback
+              part="feedback"
+              feedbackType=${d(this.feedbackType)}
+              feedbackSize=${d(this.size)}
+              id="feedback"
+              .subtle=${this.subtle}>
+              ${this.feedback}
+            </dap-ds-feedback>
+          `}
+        </label>
+      </div>
+    `;
+  }
+}, i.tagName = "dap-ds-radio-button", i.dependencies = {
+  "dap-ds-form-label": m,
+  "dap-ds-typography": k,
+  "dap-ds-feedback": f
+}, i.nextId = 0, i.styles = $(v), i);
+n([
+  b(".radio__input")
+], r.prototype, "input");
+n([
+  l({ type: Boolean })
+], r.prototype, "focusable");
+n([
+  l({ type: Number })
+], r.prototype, "posInSet");
+n([
+  l({ type: Number })
+], r.prototype, "setSize");
+n([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "preventDefault");
+n([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "readonly");
+n([
+  l({ type: Boolean })
+], r.prototype, "border");
+n([
+  l({ type: String })
+], r.prototype, "type");
+let P = r;
+export {
+  P as default
+};
+//# sourceMappingURL=radio-button.component.js.map

package/dist/components/radio-button/radio-button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.component.js","sources":["../../../src/components/radio-button/radio-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, 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 DapDSTypography from '../typography/typography.component'\nimport styles from './_styles/radio-button.scss?inline'\n\n// Detected once at module load — avoids per-update property lookup.\nconst SUPPORTS_ARIA_DESCRIPTION =\n  typeof ElementInternals !== 'undefined' &&\n  'ariaDescription' in ElementInternals.prototype\n\n/**\n * `dap-ds-radio-button`\n * @summary A radio button is a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options.\n * @element dap-ds-radio-button\n * @title - Radio button\n *\n * @event {{ checked: boolean, value: string, disabled: boolean, readonly: boolean, type: 'radio' }} dds-change - Fired when the radio button is checked.\n * @event {{ void }} dds-blur - Emitted when the radio button loses focus.\n * @event {{ void }} dds-focus - Emitted when the radio button gains focus.\n * @event {{ checked: boolean, value: string, disabled: boolean, readonly: boolean }} dds-input - Emitted when the radio button receives input.\n *\n * @property {string} name - The name of the radio button.\n * @property {string} value - The value of the radio button.\n * @property {boolean} checked - Whether the radio button is checked.\n * @property {string} label - The label of the radio button.\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 radio button.\n * @property {boolean} disabled - Whether the radio button is disabled.\n * @property {boolean} readonly - Whether the radio button is readonly (cannot be changed but value is submitted with form).\n * @property {boolean} required - Whether the radio button is required.\n * @property {'xs' | 'sm' | 'lg'} size - The size of the radio button. Default is 'sm'.\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 radio button.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio button.\n * @property {boolean} invalid - The invalid state of the radio button.\n * @property {boolean} optional - The optional state of the radio button.\n * @property {string} optionalLabel - The optional label of the radio button.\n * @property {string} requiredLabel - The required indicator of the radio button. (default: '*')\n * @property {boolean} preventDefault - Whether the radio button should prevent the default action.\n * @property {boolean} focusable - Whether the radio button is focusable.\n * @property {'normal' | 'background'} type - The type of the radio button.\n * @property {boolean} border - This sets up a border around the radio button, when true.\n *\n * @csspart base - The main radio button container.\n * @csspart wrapper - The wrapper of the radio button.\n * @csspart base-label - The main label container.\n * @csspart label - The label of the radio button.\n * @csspart input - The native input of the radio button.\n * @csspart control - The control of the radio button.\n * @csspart label-container - The label container of the radio button.\n * @csspart description - The description of the radio button.\n *\n * @cssproperty --dds-radio-size - Sets the size of the radio button. (default: var(--dds-spacing-600))\n * @cssproperty --dds-radio-border-width - Sets the border width of the radio button. (default: var(--dds-border-width-large))\n * @cssproperty --dds-radio-border-radius - Sets the border radius of the radio button. (default: var(--dds-radius-rounded))\n * @cssproperty --dds-radio-border-color - Sets the border color of the radio button. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-radio-background-color - Sets the background color of the radio button. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-radio-hover-border-color - Sets the border color of the radio button on hover. (default: var(--dds-border-neutral-medium))\n * @cssproperty --dds-radio-hover-background-color - Sets the background color of the radio button on hover. (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-radio-active-border-color - Sets the border color of the radio button when active. (default: var(--dds-border-neutral-strong))\n * @cssproperty --dds-radio-active-background-color - Sets the background color of the radio button when active. (default: var(--dds-background-neutral-strong))\n * @cssproperty --dds-radio-checked-background-color - Sets the background color of the checked radio button. (default: var(--dds-background-brand-base-inverted))\n * @cssproperty --dds-radio-checked-hover-background-color - Sets the background color of the checked radio button on hover. (default: var(--dds-background-brand-medium-inverted))\n * @cssproperty --dds-radio-checked-active-background-color - Sets the background color of the checked radio button when active. (default: var(--dds-background-brand-strong-inverted))\n * @cssproperty --dds-radio-disabled-background-color - Sets the background color of the disabled radio button. (default: var(--dds-background-neutral-disabled))\n * @cssproperty --dds-radio-icon-background-color - Sets the background color of the radio button icon. (default: var(--dds-transparent-white-strong-static))\n * @cssproperty --dds-radio-disabled-icon-background-color - Sets the background color of the disabled radio button icon. (default: var(--dds-background-neutral-stronger))\n * @cssproperty --dds-radio-invalid-border-color - Sets the border color of the invalid radio button. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-radio-invalid-background-color - Sets the background color of the invalid radio button. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-radio-invalid-hover-border-color - Sets the border color of the invalid radio button on hover. (default: var(--dds-border-negative-medium))\n * @cssproperty --dds-radio-invalid-hover-background-color - Sets the background color of the invalid radio button on hover. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-radio-invalid-active-border-color - Sets the border color of the invalid radio button when active. (default: var(--dds-border-negative-strong))\n * @cssproperty --dds-radio-invalid-active-background-color - Sets the background color of the invalid radio button when active. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-radio-invalid-checked-background-color - Sets the background color of the invalid checked radio button. (default: var(--dds-background-negative-base-inverted))\n * @cssproperty --dds-radio-invalid-checked-hover-background-color - Sets the background color of the invalid checked radio button on hover. (default: var(--dds-background-negative-medium-inverted))\n * @cssproperty --dds-radio-invalid-checked-active-background-color - Sets the background color of the invalid checked radio button when active. (default: var(--dds-background-negative-strong-inverted))\n * @cssproperty --dds-radio-icon-size - Sets the size of the radio button icon. (default: var(--dds-spacing-300))\n * @cssproperty --dds-radio-readonly-border-color - Sets the border color when the radio button is readonly. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-radio-readonly-background-color - Sets the background color when the radio button is readonly. (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-radio-readonly-icon-color - Sets the color of the radio button icon when readonly. (default: var(--dds-text-neutral-base))\n */\nexport default class DapDSRadioButton extends LabeledChoiceElement {\n  static tagName = 'dap-ds-radio-button'\n\n  static dependencies = {\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('.radio__input') private readonly input!: HTMLInputElement\n\n  /** Whether the radio button is focusable */\n  @property({ type: Boolean }) focusable = false\n\n  /** Position in set — set by radio-group for correct screen reader counting */\n  @property({ type: Number }) posInSet?: number\n\n  /** Set size — set by radio-group for correct screen reader counting */\n  @property({ type: Number }) setSize?: number\n\n  /** Whether the radio button should prevent the default action */\n  @property({ type: Boolean, reflect: true }) preventDefault: boolean = false\n\n  /** Whether the radio button is readonly */\n  @property({ type: Boolean, reflect: true }) readonly: boolean = false\n\n  /** This sets up a border around the radio button, when true. */\n  @property({ type: Boolean }) border: boolean = false\n\n  /** The type of the radio button\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    DapDSRadioButton.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-${DapDSRadioButton.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSRadioButton.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSRadioButton.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSRadioButton.nextId}-${uniqueSuffix}`\n    // Set host as the ARIA radio node so screen readers get correct posinset/setsize.\n    // Native <input type=\"radio\"> inside shadow DOM cannot be grouped across shadow\n    // boundaries, causing browsers to compute \"1 of 1\" regardless of aria-posinset.\n    this.internals.role = 'radio'\n    // NOTE: setAttribute('role') cannot be called here — the custom element spec\n    // forbids adding attributes in the constructor (React throws NotSupportedError\n    // via document.createElement). Moved to connectedCallback instead.\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Explicit role attribute for screen readers that don't honour ElementInternals.\n    // Must be set here, not in the constructor (spec forbids constructor attributes).\n    this.setAttribute('role', 'radio')\n    this.addEventListener('focus', this.onFocus)\n    this.addEventListener('blur', this.onBlur)\n    this.addEventListener('keydown', this._onHostKeydown)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('focus', this.onFocus)\n    this.removeEventListener('blur', this.onBlur)\n    this.removeEventListener('keydown', this._onHostKeydown)\n  }\n\n  private _onHostKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault()\n      // Dispatch click on host so the radio-group's click handler selects this radio\n      HTMLElement.prototype.click.apply(this)\n    }\n  }\n\n  private _syncHostAria(): void {\n    // Explicit aria-checked on host — internals alone not read by all SRs.\n    const checkedStr = this.checked ? 'true' : 'false'\n    this.internals.ariaChecked = checkedStr\n    this.setAttribute('aria-checked', checkedStr)\n\n    // Chrome overrides internals posInSet/setSize for elements with shadow-DOM\n    // same-name radio inputs (computing \"1 of 1\" per shadow scope). Explicit\n    // HTML attributes take precedence and work correctly in all browsers.\n    if (this.posInSet != null) {\n      this.setAttribute('aria-posinset', String(this.posInSet))\n    } else {\n      this.removeAttribute('aria-posinset')\n    }\n    if (this.setSize != null) {\n      this.setAttribute('aria-setsize', String(this.setSize))\n    } else {\n      this.removeAttribute('aria-setsize')\n    }\n    this.internals.ariaPosInSet =\n      this.posInSet != null ? String(this.posInSet) : null\n    this.internals.ariaSetSize =\n      this.setSize != null ? String(this.setSize) : null\n\n    this.internals.ariaDisabled = this.disabled ? 'true' : null\n    this.internals.ariaRequired = this.required ? 'true' : null\n\n    // aria-description is ARIA 1.3 and not yet supported in Safari/WebKit.\n    // Fall back to merging description into the accessible name for those browsers.\n    // Always set explicit aria-label on the host for SRs that don't read internals.\n    let accessibleName: string\n    if (SUPPORTS_ARIA_DESCRIPTION) {\n      this.internals.ariaLabel = this.label || null\n      this.internals.ariaDescription = this.description || null\n      accessibleName = this.label || ''\n    } else {\n      const combined = [this.label, this.description].filter(Boolean)\n      accessibleName = combined.join('. ')\n      this.internals.ariaLabel = accessibleName || null\n    }\n    if (accessibleName) {\n      this.setAttribute('aria-label', accessibleName)\n    } else {\n      this.removeAttribute('aria-label')\n    }\n\n    // Tabindex lives on the host (not the hidden inner input) so the host is\n    // the keyboard focus target and screen readers track focus correctly.\n    const focusable = (this.focusable || this.checked) && !this.disabled\n    this.setAttribute('tabindex', focusable ? '0' : '-1')\n  }\n\n  /**\n   * Handles click events on the radio button.\n   * Manages the checked state and emits change events.\n   * @private\n   */\n  private handleClick() {\n    // Early return if click should be prevented, component is disabled, or readonly\n    if (this.preventDefault || this.disabled || this.readonly) {\n      return\n    }\n\n    this.checked = true\n\n    const { checked, value, disabled } = this\n\n    // Emit change event with null safety\n    try {\n      this.emit('dds-change', {\n        checked,\n        // `?? ''` not `|| ''` — a radio may legitimately carry `false` or `0`\n        value: value ?? '',\n        disabled,\n        readonly: this.readonly,\n        type: 'radio',\n      })\n    } catch (error) {\n      console.error('Error emitting radio button 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 radio button validity:', error)\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue)\n    this.value = this.defaultValue\n    this.checked = this.defaultValue === this.value\n  }\n\n  /**\n   * Handles input events on the radio button.\n   * Emits the dds-input event with current radio button state.\n   * @private\n   */\n  private handleInput() {\n    const { checked, value, disabled } = this\n\n    const event = new CustomEvent('dds-input', {\n      bubbles: true,\n      cancelable: false,\n      composed: true,\n      detail: { checked, value, disabled, readonly: this.readonly },\n    })\n\n    this.dispatchEvent(event)\n  }\n\n  public get focusElement(): HTMLInputElement {\n    if (!this.input) {\n      throw new Error(\n        'Radio button input element not found. Component may not be properly initialized.',\n      )\n    }\n    return this.input\n  }\n\n  public focus(): void {\n    if (!this.disabled && !this.readonly) {\n      HTMLElement.prototype.focus.apply(this)\n    }\n  }\n\n  public blur(): void {\n    HTMLElement.prototype.blur.apply(this)\n  }\n\n  /**\n   * Handles invalid events on the radio button 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  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    this._syncHostAria()\n\n    // Update invalid state during the update cycle when required or checked changes\n    // This prevents scheduling an update after updateComplete\n    // Only do this for standalone radio buttons, not when inside a radio-group\n    // (radio-groups manage the invalid state of their children)\n    const isInRadioGroup = this.closest('dap-ds-radio-group') !== null\n    if (\n      !isInRadioGroup &&\n      (changedProperties.has('required') ||\n        changedProperties.has('checked') ||\n        changedProperties.has('disabled')) &&\n      this.innerInput &&\n      this.innerInput instanceof HTMLInputElement\n    ) {\n      // Use checkValidity to determine if input is invalid\n      // Only update if the value would actually change to avoid unnecessary updates\n      const shouldBeInvalid = !this.innerInput.checkValidity()\n      if (this.invalid !== shouldBeInvalid) {\n        this.invalid = shouldBeInvalid\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div part=\"base\">\n        <label\n          part=\"base-label\"\n          class=${clsx('radio choice', `radio--${this.size}`, {\n            'radio--checked': this.checked,\n            'radio--disabled': this.disabled,\n            'radio--readonly': this.readonly,\n            'radio--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=\"radio\"\n              class=${clsx('radio__input', {\n                'radio__input--background': this.type === 'background',\n              })}\n              id=${this.inputId}\n              value=${ifDefined(this.value)}\n              .checked=${this.checked}\n              .disabled=${this.disabled}\n              .required=${this.required}\n              ?readonly=${this.readonly}\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              aria-checked=${this.checked ? 'true' : 'false'}\n              @invalid=${this.handleInvalid}\n              @click=${this.handleClick}\n              @input=${this.handleInput} />\n            <span\n              part=\"control\"\n              class=${clsx('input__control', {\n                'input__control--disabled': this.disabled,\n                'input__control--readonly': this.readonly,\n                'input__control--invalid': this.invalid,\n                'input__control--checked': this.checked,\n              })}>\n              <slot name=\"iconcontent\">\n                <span class=\"radio__icon\"></span>\n              </slot>\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            </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                .optionalLabel=${this.optionalLabel}\n                aria-hidden=\"true\"\n                .disabled=${this.disabled || this.readonly}\n                .readonly=${this.readonly}\n                .hideLabel=${this.hideLabel}\n                label=${ifDefined(this.label)}\n                subtle\n                .noMargin=${true}\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":["SUPPORTS_ARIA_DESCRIPTION","_DapDSRadioButton","_a","LabeledChoiceElement","event","uniqueSuffix","checkedStr","accessibleName","focusable","checked","value","disabled","error","changedProperties","shouldBeInvalid","html","clsx","ifDefined","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSRadioButton"],"mappings":"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"}

package/dist/components/radio-button/radio-button.d.ts

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

package/dist/components/radio-button/radio-button.js

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

package/dist/components/radio-button/radio-button.js.map

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

package/dist/components/rating/_styles/rating.scss.js

@@ -0,0 +1,5 @@
+const r = ":host{display:inline-block;--star-size: 24px;--star-color: #ccc;--star-active-color: #ffb400;--star-hover-color: #ffdd74}.star{width:var(--star-size);height:var(--star-size);transition:color .2s ease;color:var(--star-color);cursor:pointer}.star--active{color:var(--star-active-color)}.star--hover{color:var(--star-hover-color)}.star--readonly,.star--disabled{cursor:default}.star--readonly{pointer-events:none}.star--disabled{opacity:.5}.rating-container{display:flex;flex-direction:column;align-items:flex-start}.stars-container{display:flex;gap:4px}.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 {
+  r as default
+};
+//# sourceMappingURL=rating.scss.js.map

package/dist/components/rating/_styles/rating.scss.js.map

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

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

@@ -1,4 +1,5 @@
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
+import { default as DapDSIcon } from '../icon/icon.component';
 /**
  * `dap-ds-rating`
  * @summary Rating is a component that allows users to rate a product or service.
@@ -13,6 +14,10 @@ import { GenericFormElement } from '../../internal/mixin/genericFormElement';
  * @csspart icon - The icon of the star.
  */
 export default class DapDSRating extends GenericFormElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     /** Reference to the live region for screen reader announcements */
     private readonly _liveRegion;
     constructor();

package/dist/components/rating/rating.component.js

@@ -0,0 +1,179 @@
+import { clsx as m } 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 u } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as l } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { query as p } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { html as c } from "../../node_modules/lit-html/static.js";
+import { GenericFormElement as _ } from "../../internal/mixin/genericFormElement.js";
+import f from "../icon/icon.component.js";
+import v from "./_styles/rating.scss.js";
+import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var y = Object.defineProperty, i = (d, e, t, n) => {
+  for (var a = void 0, o = d.length - 1, h; o >= 0; o--)
+    (h = d[o]) && (a = h(e, t, a) || a);
+  return a && y(e, t, a), a;
+};
+const r = class r extends _ {
+  constructor() {
+    super(), this.max = 5, this._ratingContainer = null, this._hasFocus = !1, this._hoverValue = 0, this._uniqueId = `star-rating-${window.crypto.randomUUID()}`, this._handleContainerFocus = () => {
+      this._hasFocus = !0, this._announceRating();
+    }, this._handleContainerBlur = () => {
+      this._hasFocus = !1;
+    }, this._handleContainerKeyDown = (e) => {
+      if (!(this.disabled || this.readonly))
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowUp":
+            e.preventDefault(), this._incrementRating();
+            break;
+          case "ArrowLeft":
+          case "ArrowDown":
+            e.preventDefault(), this._decrementRating();
+            break;
+          case "Home":
+            e.preventDefault(), this._setRating(1);
+            break;
+          case "End":
+            e.preventDefault(), this._setRating(this.max);
+            break;
+          default:
+            return;
+        }
+    }, this._handleKeyDown = (e) => {
+      if (this.disabled || this.readonly) return;
+      if (this.contains(e.target) && this._hasFocus)
+        switch (e.key) {
+          case "ArrowRight":
+          case "ArrowUp":
+          case "ArrowLeft":
+          case "ArrowDown":
+          case "Home":
+          case "End":
+            break;
+          default:
+            return;
+        }
+    }, this.value = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeyDown), this._ratingContainer && this._ratingContainer.removeEventListener("focus", () => {
+    });
+  }
+  firstUpdated() {
+    this._ratingContainer = this.renderRoot.querySelector(".rating-container");
+  }
+  _incrementRating() {
+    const e = Math.min(this.value + 1, this.max);
+    this._setRating(e);
+  }
+  _decrementRating() {
+    const e = Math.max(this.value - 1, 0);
+    this._setRating(e);
+  }
+  _setRating(e) {
+    const t = this.value;
+    this.value = e, t !== e && (this._announceRating(), this.emit("dds-change", { value: e }));
+  }
+  /**
+   * Announce the current rating to screen readers
+   */
+  _announceRating() {
+    if (this._liveRegion) {
+      const e = this.value === 0 ? "Rating cleared" : `${this.value} of ${this.max} stars selected`;
+      this._liveRegion.textContent = e;
+    }
+  }
+  _handleStarClick(e) {
+    if (this.disabled || this.readonly) return;
+    const t = this.value === e ? 0 : e;
+    this._setRating(t);
+  }
+  _handleStarHover(e) {
+    this.disabled || this.readonly || (this._hoverValue = e);
+  }
+  _handleStarLeave() {
+    this.disabled || this.readonly || (this._hoverValue = 0);
+  }
+  render() {
+    const e = [];
+    for (let t = 1; t <= this.max; t++) {
+      const n = t <= this.value, a = !this.disabled && !this.readonly && t <= this._hoverValue;
+      e.push(c`
+        <span
+          part="star"
+          class=${m("star", {
+        "star--active": n,
+        "star--hover": a,
+        "star--readonly": this.readonly,
+        "star--disabled": this.disabled
+      })}
+          @click=${() => this._handleStarClick(t)}
+          @mouseenter=${() => this._handleStarHover(t)}
+          @mouseleave=${() => this._handleStarLeave()}
+          tabindex=${this.disabled ? "-1" : "0"}
+          role="radio"
+          aria-checked=${n}
+          aria-disabled=${this.disabled}
+          aria-posinset=${t}
+          aria-setsize=${this.max}>
+          <dap-ds-icon part="icon" name="star-fill"></dap-ds-icon>
+          <span class="sr-only">${t} star${t === 1 ? "" : "s"}</span>
+        </span>
+      `);
+    }
+    return c`
+      <div
+        class="rating-container"
+        part="base"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @focus=${this._handleContainerFocus}
+        @blur=${this._handleContainerBlur}
+        @keydown=${this._handleContainerKeyDown}
+        aria-labelledby="rating-label-${this._uniqueId}">
+        ${this.renderLabel(`rating-label-${this._uniqueId}`)}
+        <div
+          class="stars-container"
+          part="stars-container"
+          role="radiogroup"
+          aria-labelledby="rating-label-${this._uniqueId}"
+          aria-disabled=${this.disabled}
+          aria-readonly=${this.readonly}>
+          ${e}
+        </div>
+        <!-- Live region for screen reader announcements -->
+        <div class="sr-announcement sr-only" aria-live="assertive"></div>
+      </div>
+    `;
+  }
+};
+r.tagName = "dap-ds-rating", r.dependencies = {
+  "dap-ds-icon": f
+}, r.styles = b(v);
+let s = r;
+i([
+  p(".sr-announcement")
+], s.prototype, "_liveRegion");
+i([
+  u({ reflect: !0 })
+], s.prototype, "label");
+i([
+  u({ type: Number })
+], s.prototype, "max");
+i([
+  l()
+], s.prototype, "_hasFocus");
+i([
+  l()
+], s.prototype, "_hoverValue");
+i([
+  l()
+], s.prototype, "_uniqueId");
+export {
+  s as default
+};
+//# sourceMappingURL=rating.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.component.js","sources":["../../../src/components/rating/rating.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './_styles/rating.scss?inline'\n\n/**\n * `dap-ds-rating`\n * @summary Rating is a component that allows users to rate a product or service.\n * @element dap-ds-rating\n * @title - Rating\n *\n * @event {{ value: number }} dds-change - Event fired when the rating value changes.\n *\n * @csspart base - The main rating container.\n * @csspart star - The star element.\n * @csspart stars-container - The container of the stars.\n * @csspart icon - The icon of the star.\n */\nexport default class DapDSRating extends GenericFormElement {\n  static tagName = 'dap-ds-rating'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** Reference to the live region for screen reader announcements */\n  @query('.sr-announcement') private readonly _liveRegion: HTMLElement | null\n\n  constructor() {\n    super()\n\n    this.value = 0\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The label of the rating */\n  @property({ reflect: true }) label: string\n\n  /** The maximum number of stars */\n  @property({ type: Number }) max = 5\n\n  private _ratingContainer: HTMLElement | null = null\n  @state() private _hasFocus = false\n  @state() private _hoverValue = 0\n  @state() private readonly _uniqueId =\n    `star-rating-${window.crypto.randomUUID()}`\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Add event listener at document level to ensure we catch all keyboard events\n    document.addEventListener('keydown', this._handleKeyDown)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    document.removeEventListener('keydown', this._handleKeyDown)\n\n    if (this._ratingContainer) {\n      this._ratingContainer.removeEventListener('focus', () => {})\n    }\n  }\n\n  firstUpdated() {\n    // Set a reference to the container element for easier access\n    this._ratingContainer = this.renderRoot.querySelector('.rating-container')\n  }\n\n  _handleContainerFocus = () => {\n    this._hasFocus = true\n\n    // Announce current rating for initial focus\n    this._announceRating()\n  }\n\n  _handleContainerBlur = () => {\n    this._hasFocus = false\n  }\n\n  _handleContainerKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        this._incrementRating()\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        this._decrementRating()\n        break\n      case 'Home':\n        event.preventDefault()\n        this._setRating(1)\n        break\n      case 'End':\n        event.preventDefault()\n        this._setRating(this.max)\n        break\n      default:\n        return\n    }\n  }\n\n  /**\n   * Handle keyboard events for the entire component\n   * This is a backup to catch keyboard events if they bubble up\n   */\n  _handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n\n    // Only process keyboard events if:\n    // 1. The event target is this component or its children\n    // 2. The component currently has focus\n    const isTargetWithin = this.contains(event.target as Node)\n\n    if (isTargetWithin && this._hasFocus) {\n      // The container's direct keydown handler should handle this,\n      // but this is a backup in case the event bubbles up\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n        case 'ArrowLeft':\n        case 'ArrowDown':\n        case 'Home':\n        case 'End':\n          // Let the container's direct keydown handler process these\n          break\n        default:\n          return\n      }\n    }\n  }\n\n  _incrementRating() {\n    const newValue = Math.min(this.value + 1, this.max)\n    this._setRating(newValue)\n  }\n\n  _decrementRating() {\n    const newValue = Math.max(this.value - 1, 0)\n    this._setRating(newValue)\n  }\n\n  _setRating(value: number) {\n    const oldValue = this.value\n    this.value = value\n\n    // Only announce if the value actually changed\n    if (oldValue !== value) {\n      this._announceRating()\n      this.emit('dds-change', { value })\n    }\n  }\n\n  /**\n   * Announce the current rating to screen readers\n   */\n  _announceRating() {\n    if (this._liveRegion) {\n      const message =\n        this.value === 0\n          ? `Rating cleared`\n          : `${this.value} of ${this.max} stars selected`\n\n      // Update the live region with the current rating\n      this._liveRegion.textContent = message\n    }\n  }\n\n  _handleStarClick(value: number) {\n    if (this.disabled || this.readonly) return\n\n    // Toggle the value if the same star is clicked twice\n    const newValue = this.value === value ? 0 : value\n    this._setRating(newValue)\n  }\n\n  _handleStarHover(value: number) {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = value\n  }\n\n  _handleStarLeave() {\n    if (this.disabled || this.readonly) return\n    this._hoverValue = 0\n  }\n\n  render() {\n    const stars = []\n\n    for (let i = 1; i <= this.max; i++) {\n      const isActive = i <= this.value\n      const isHovered =\n        !this.disabled && !this.readonly && i <= this._hoverValue\n\n      stars.push(html`\n        <span\n          part=\"star\"\n          class=${clsx('star', {\n            'star--active': isActive,\n            'star--hover': isHovered,\n            'star--readonly': this.readonly,\n            'star--disabled': this.disabled,\n          })}\n          @click=${() => this._handleStarClick(i)}\n          @mouseenter=${() => this._handleStarHover(i)}\n          @mouseleave=${() => this._handleStarLeave()}\n          tabindex=${this.disabled ? '-1' : '0'}\n          role=\"radio\"\n          aria-checked=${isActive}\n          aria-disabled=${this.disabled}\n          aria-posinset=${i}\n          aria-setsize=${this.max}>\n          <dap-ds-icon part=\"icon\" name=\"star-fill\"></dap-ds-icon>\n          <span class=\"sr-only\">${i} star${i === 1 ? '' : 's'}</span>\n        </span>\n      `)\n    }\n\n    return html`\n      <div\n        class=\"rating-container\"\n        part=\"base\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        @focus=${this._handleContainerFocus}\n        @blur=${this._handleContainerBlur}\n        @keydown=${this._handleContainerKeyDown}\n        aria-labelledby=\"rating-label-${this._uniqueId}\">\n        ${(this, this.renderLabel(`rating-label-${this._uniqueId}`))}\n        <div\n          class=\"stars-container\"\n          part=\"stars-container\"\n          role=\"radiogroup\"\n          aria-labelledby=\"rating-label-${this._uniqueId}\"\n          aria-disabled=${this.disabled}\n          aria-readonly=${this.readonly}>\n          ${stars}\n        </div>\n        <!-- Live region for screen reader announcements -->\n        <div class=\"sr-announcement sr-only\" aria-live=\"assertive\"></div>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSRating","GenericFormElement","event","newValue","value","oldValue","message","stars","i","isActive","isHovered","html","clsx","DapDSIcon","unsafeCSS","styles","DapDSRating","__decorateClass","query","property","state"],"mappings":"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"}

package/dist/components/rating/rating.d.ts

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

package/dist/components/rating/rating.js

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

package/dist/components/rating/rating.js.map

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

package/dist/components/scroll-area/scroll-area.component.d.ts

@@ -21,6 +21,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssprop --dds-scroll-area-scrollbar-size - The width/height of the scrollbar (default: 10px)
  */
 export default class DapDSScrollArea extends DdsElement {
+    static tagName: string;
     /**
      * The orientation of the scrollbar.
      * @type {'vertical' | 'horizontal' | 'both'}