dap-design-system 0.62.3 → 0.63.0

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

@@ -1 +1 @@
-{"version":3,"file":"progress.component.js","sources":["../../../src/components/progress/progress.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { translate } from 'lit-i18n'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './progress.scss?inline'\n\nconst ProgressBaseWithSized = SizedMixin(DdsElement)\n\nexport type ProgressVariant = 'linear' | 'circular'\n\nexport type ProgressColor =\n  | 'neutral'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'inverted'\n\n/**\n * `dap-ds-progress`\n * @summary Progress indicator component with linear and circular variants.\n * @element dap-ds-progress\n * @title - Progress\n *\n * @csspart base - The main progress container.\n * @csspart track - The progress track (background).\n * @csspart fill - The progress fill (bar for linear, circle for circular).\n * @csspart label - The progress label text.\n * @csspart percentage - The percentage text (circular variant only).\n * @csspart background - The background circle (circular variant only).\n *\n * @slot label - Custom label content for the progress indicator.\n *\n * @cssprop --dds-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))\n * @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssprop --dds-progress-fill-color-brand - Fill color for brand variant (default: var(--dds-icon-brand-subtle))\n * @cssprop --dds-progress-fill-color-negative - Fill color for negative variant (default: var(--dds-icon-negative-subtle))\n * @cssprop --dds-progress-fill-color-positive - Fill color for positive variant (default: var(--dds-icon-positive-subtle))\n * @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted))\n * @cssprop --dds-progress-height-xs - Height for extra small linear progress (default: var(--dds-spacing-50))\n * @cssprop --dds-progress-height-sm - Height for small linear progress (default: var(--dds-spacing-100))\n * @cssprop --dds-progress-height-md - Height for medium linear progress (default: var(--dds-spacing-150))\n * @cssprop --dds-progress-height-lg - Height for large linear progress (default: var(--dds-spacing-200))\n * @cssprop --dds-progress-height-xl - Height for extra large linear progress (default: var(--dds-spacing-300))\n * @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress (default: var(--dds-spacing-400))\n * @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress (default: var(--dds-spacing-600))\n * @cssprop --dds-progress-diameter-sm - Diameter for small circular progress (default: var(--dds-spacing-800))\n * @cssprop --dds-progress-diameter-md - Diameter for medium circular progress (default: var(--dds-spacing-1200))\n * @cssprop --dds-progress-diameter-lg - Diameter for large circular progress (default: var(--dds-spacing-1600))\n * @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress (default: var(--dds-spacing-2000))\n * @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400))\n * @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200))\n * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s)\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSProgress extends ProgressBaseWithSized {\n  static tagName = 'dap-ds-progress'\n\n  /**\n   * The variant of the progress indicator.\n   * @type {\"linear\" | \"circular\"}\n   */\n  @property({ type: String, reflect: true }) variant: ProgressVariant = 'linear'\n\n  /**\n   * The color variant of the progress indicator.\n   * @type {\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"}\n   */\n  @property({ type: String, reflect: true }) color: ProgressColor = 'brand'\n\n  /**\n   * Current progress value (0-100 for percentage, or 0-max).\n   */\n  @property({ type: Number }) value?: number\n\n  /**\n   * Maximum value for the progress indicator.\n   */\n  @property({ type: Number }) max = 100\n\n  /**\n   * Whether to show the progress as indeterminate (loading animation).\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false\n\n  /**\n   * Whether to show percentage text in the center (circular variant only).\n   */\n  @property({ type: Boolean }) showPercentage = false\n\n  /**\n   * Label text for the progress indicator.\n   */\n  @property({ type: String }) label?: string\n\n  /**\n   * The aria-live politeness level for screen readers.\n   * @type {\"polite\" | \"assertive\" | \"off\"}\n   */\n  @property({ type: String, attribute: 'aria-live' })\n  ariaLive: 'polite' | 'assertive' | 'off' = 'polite'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */\n  private get progressSize(): string {\n    return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n  }\n\n  /**\n   * Calculate the percentage value (0-100).\n   */\n  private get percentage(): number {\n    if (this.value === undefined || this.indeterminate) {\n      return 0\n    }\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100))\n  }\n\n  /**\n   * Calculate the stroke-dashoffset for circular progress.\n   * Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100)\n   */\n  private get circleOffset(): number {\n    const radius = 45\n    const circumference = 2 * Math.PI * radius\n    return circumference * (1 - this.percentage / 100)\n  }\n\n  /**\n   * Render the linear progress variant.\n   */\n  private renderLinear() {\n    return html`\n      <div part=\"track\" class=\"progress__track\" role=\"presentation\">\n        <div\n          part=\"fill\"\n          class=\"progress__fill\"\n          style=${this.indeterminate ? '' : `width: ${this.percentage}%`}></div>\n      </div>\n    `\n  }\n\n  /**\n   * Render the circular progress variant.\n   */\n  private renderCircular() {\n    const radius = 45\n    const circumference = 2 * Math.PI * radius\n\n    return html`\n      <svg\n        part=\"track\"\n        class=\"progress__svg\"\n        viewBox=\"0 0 100 100\"\n        role=\"presentation\">\n        <!-- Background circle -->\n        <circle\n          part=\"background\"\n          class=\"progress__circle progress__circle--background\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"${radius}\"\n          fill=\"none\"\n          stroke-width=\"8\" />\n        <!-- Progress circle -->\n        <circle\n          part=\"fill\"\n          class=\"progress__circle progress__circle--progress\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"${radius}\"\n          fill=\"none\"\n          stroke-width=\"8\"\n          stroke-dasharray=\"${circumference}\"\n          stroke-dashoffset=\"${this.indeterminate ? 0 : this.circleOffset}\"\n          transform=\"rotate(-90 50 50)\" />\n      </svg>\n      ${this.showPercentage && !this.indeterminate\n        ? html`\n            <span part=\"percentage\" class=\"progress__percentage\">\n              ${Math.round(this.percentage)}%\n            </span>\n          `\n        : nothing}\n    `\n  }\n\n  render() {\n    const role = this.indeterminate ? 'status' : 'progressbar'\n    const ariaBusy = this.indeterminate ? 'true' : 'false'\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'progress',\n          `progress--${this.variant}`,\n          `progress--${this.color}`,\n          `progress--${this.progressSize}`,\n          {\n            'progress--indeterminate': this.indeterminate,\n          },\n        )}\n        role=${role}\n        aria-busy=${ariaBusy}\n        aria-label=${this.ariaLabel ??\n        this.label ??\n        (this.indeterminate\n          ? translate('progress.loading')\n          : translate('progress.progress', {\n              percentage: Math.round(this.percentage),\n            }))}\n        aria-live=${this.ariaLive}\n        aria-valuenow=${this.indeterminate\n          ? nothing\n          : Math.round(this.percentage)}\n        aria-valuemin=${this.indeterminate ? nothing : 0}\n        aria-valuemax=${this.indeterminate ? nothing : 100}>\n        ${this.label\n          ? html`<div part=\"label\" class=\"progress__label\">${this.label}</div>`\n          : nothing}\n        <slot name=\"label\"></slot>\n\n        <div class=\"progress__indicator\">\n          ${this.variant === 'circular'\n            ? this.renderCircular()\n            : this.renderLinear()}\n        </div>\n\n        <!-- Screen reader announcements -->\n        <div class=\"sr-only\" aria-live=${this.ariaLive} aria-atomic=\"true\">\n          ${this.indeterminate\n            ? translate('progress.loading')\n            : translate('progress.progress', {\n                percentage: Math.round(this.percentage),\n              })}\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["ProgressBaseWithSized","SizedMixin","DdsElement","_DapDSProgress","html","circumference","nothing","role","ariaBusy","clsx","_b","_a","translate","unsafeCSS","styles","DapDSProgress","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"progress.component.js","sources":["../../../src/components/progress/progress.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport styles from './progress.scss?inline'\n\nconst ProgressBaseWithSized = SizedMixin(DdsElement)\n\nexport type ProgressVariant = 'linear' | 'circular'\n\nexport type ProgressColor =\n  | 'neutral'\n  | 'brand'\n  | 'negative'\n  | 'positive'\n  | 'inverted'\n\n/**\n * `dap-ds-progress`\n * @summary Progress indicator component with linear and circular variants.\n * @element dap-ds-progress\n * @title - Progress\n *\n * @csspart base - The main progress container.\n * @csspart track - The progress track (background).\n * @csspart fill - The progress fill (bar for linear, circle for circular).\n * @csspart label - The progress label text.\n * @csspart percentage - The percentage text (circular variant only).\n * @csspart background - The background circle (circular variant only).\n *\n * @slot label - Custom label content for the progress indicator.\n *\n * @cssprop --dds-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))\n * @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssprop --dds-progress-fill-color-brand - Fill color for brand variant (default: var(--dds-icon-brand-subtle))\n * @cssprop --dds-progress-fill-color-negative - Fill color for negative variant (default: var(--dds-icon-negative-subtle))\n * @cssprop --dds-progress-fill-color-positive - Fill color for positive variant (default: var(--dds-icon-positive-subtle))\n * @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted))\n * @cssprop --dds-progress-height-xs - Height for extra small linear progress (default: var(--dds-spacing-50))\n * @cssprop --dds-progress-height-sm - Height for small linear progress (default: var(--dds-spacing-100))\n * @cssprop --dds-progress-height-md - Height for medium linear progress (default: var(--dds-spacing-150))\n * @cssprop --dds-progress-height-lg - Height for large linear progress (default: var(--dds-spacing-200))\n * @cssprop --dds-progress-height-xl - Height for extra large linear progress (default: var(--dds-spacing-300))\n * @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress (default: var(--dds-spacing-400))\n * @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress (default: var(--dds-spacing-600))\n * @cssprop --dds-progress-diameter-sm - Diameter for small circular progress (default: var(--dds-spacing-800))\n * @cssprop --dds-progress-diameter-md - Diameter for medium circular progress (default: var(--dds-spacing-1200))\n * @cssprop --dds-progress-diameter-lg - Diameter for large circular progress (default: var(--dds-spacing-1600))\n * @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress (default: var(--dds-spacing-2000))\n * @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400))\n * @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200))\n * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s)\n *\n * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\"); see SizedMixin.\n */\nexport default class DapDSProgress extends ProgressBaseWithSized {\n  static tagName = 'dap-ds-progress'\n\n  /**\n   * The variant of the progress indicator.\n   * @type {\"linear\" | \"circular\"}\n   */\n  @property({ type: String, reflect: true }) variant: ProgressVariant = 'linear'\n\n  /**\n   * The color variant of the progress indicator.\n   * @type {\"neutral\" | \"brand\" | \"negative\" | \"positive\" | \"inverted\"}\n   */\n  @property({ type: String, reflect: true }) color: ProgressColor = 'brand'\n\n  /**\n   * Current progress value (0-100 for percentage, or 0-max).\n   */\n  @property({ type: Number }) value?: number\n\n  /**\n   * Maximum value for the progress indicator.\n   */\n  @property({ type: Number }) max = 100\n\n  /**\n   * Whether to show the progress as indeterminate (loading animation).\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false\n\n  /**\n   * Whether to show percentage text in the center (circular variant only).\n   */\n  @property({ type: Boolean }) showPercentage = false\n\n  /**\n   * Label text for the progress indicator.\n   */\n  @property({ type: String }) label?: string\n\n  /**\n   * The aria-live politeness level for screen readers.\n   * @type {\"polite\" | \"assertive\" | \"off\"}\n   */\n  @property({ type: String, attribute: 'aria-live' })\n  ariaLive: 'polite' | 'assertive' | 'off' = 'polite'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Maps effectiveSize from SizedMixin to progress visual size class (xs–lg; xxs maps to xs). */\n  private get progressSize(): string {\n    return this.effectiveSize === 'xxs' ? 'xs' : this.effectiveSize\n  }\n\n  /**\n   * Calculate the percentage value (0-100).\n   */\n  private get percentage(): number {\n    if (this.value === undefined || this.indeterminate) {\n      return 0\n    }\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100))\n  }\n\n  /**\n   * Calculate the stroke-dashoffset for circular progress.\n   * Circle circumference = 2πr where r = 45 (radius of circle with center at 50,50 in viewBox 0 0 100 100)\n   */\n  private get circleOffset(): number {\n    const radius = 45\n    const circumference = 2 * Math.PI * radius\n    return circumference * (1 - this.percentage / 100)\n  }\n\n  /**\n   * Render the linear progress variant.\n   */\n  private renderLinear() {\n    return html`\n      <div part=\"track\" class=\"progress__track\" role=\"presentation\">\n        <div\n          part=\"fill\"\n          class=\"progress__fill\"\n          style=${this.indeterminate ? '' : `width: ${this.percentage}%`}></div>\n      </div>\n    `\n  }\n\n  /**\n   * Render the circular progress variant.\n   */\n  private renderCircular() {\n    const radius = 45\n    const circumference = 2 * Math.PI * radius\n\n    return html`\n      <svg\n        part=\"track\"\n        class=\"progress__svg\"\n        viewBox=\"0 0 100 100\"\n        role=\"presentation\">\n        <!-- Background circle -->\n        <circle\n          part=\"background\"\n          class=\"progress__circle progress__circle--background\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"${radius}\"\n          fill=\"none\"\n          stroke-width=\"8\" />\n        <!-- Progress circle -->\n        <circle\n          part=\"fill\"\n          class=\"progress__circle progress__circle--progress\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"${radius}\"\n          fill=\"none\"\n          stroke-width=\"8\"\n          stroke-dasharray=\"${circumference}\"\n          stroke-dashoffset=\"${this.indeterminate ? 0 : this.circleOffset}\"\n          transform=\"rotate(-90 50 50)\" />\n      </svg>\n      ${this.showPercentage && !this.indeterminate\n        ? html`\n            <span part=\"percentage\" class=\"progress__percentage\">\n              ${Math.round(this.percentage)}%\n            </span>\n          `\n        : nothing}\n    `\n  }\n\n  render() {\n    const role = this.indeterminate ? 'status' : 'progressbar'\n    const ariaBusy = this.indeterminate ? 'true' : 'false'\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'progress',\n          `progress--${this.variant}`,\n          `progress--${this.color}`,\n          `progress--${this.progressSize}`,\n          {\n            'progress--indeterminate': this.indeterminate,\n          },\n        )}\n        role=${role}\n        aria-busy=${ariaBusy}\n        aria-label=${this.ariaLabel ??\n        this.label ??\n        (this.indeterminate\n          ? this.localize.t('progress.loading')\n          : this.localize.t('progress.progress', {\n              percentage: Math.round(this.percentage),\n            }))}\n        aria-live=${this.ariaLive}\n        aria-valuenow=${this.indeterminate\n          ? nothing\n          : Math.round(this.percentage)}\n        aria-valuemin=${this.indeterminate ? nothing : 0}\n        aria-valuemax=${this.indeterminate ? nothing : 100}>\n        ${this.label\n          ? html`<div part=\"label\" class=\"progress__label\">${this.label}</div>`\n          : nothing}\n        <slot name=\"label\"></slot>\n\n        <div class=\"progress__indicator\">\n          ${this.variant === 'circular'\n            ? this.renderCircular()\n            : this.renderLinear()}\n        </div>\n\n        <!-- Screen reader announcements -->\n        <div class=\"sr-only\" aria-live=${this.ariaLive} aria-atomic=\"true\">\n          ${this.indeterminate\n            ? this.localize.t('progress.loading')\n            : this.localize.t('progress.progress', {\n                percentage: Math.round(this.percentage),\n              })}\n        </div>\n      </div>\n    `\n  }\n}\n"],"names":["ProgressBaseWithSized","SizedMixin","DdsElement","_DapDSProgress","html","circumference","nothing","role","ariaBusy","clsx","_b","_a","unsafeCSS","styles","DapDSProgress","__decorateClass","property"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-const o = ':root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-radio-size: var(--dds-spacing-600);--dds-radio-border-width: var(--dds-border-width-large);--dds-radio-border-radius: var(--dds-radius-rounded);--dds-radio-border-color: var(--dds-border-neutral-base);--dds-radio-background-color: var(--dds-background-neutral-base);--dds-radio-hover-border-color: var(--dds-border-neutral-medium);--dds-radio-hover-background-color: var(--dds-background-neutral-medium);--dds-radio-active-border-color: var(--dds-border-neutral-strong);--dds-radio-active-background-color: var(--dds-background-neutral-strong);--dds-radio-checked-background-color: var( --dds-background-brand-base-inverted );--dds-radio-checked-hover-background-color: var( --dds-background-brand-medium-inverted );--dds-radio-checked-active-background-color: var( --dds-background-brand-strong-inverted );--dds-radio-disabled-background-color: var(--dds-background-neutral-disabled);--dds-radio-icon-background-color: var(--dds-transparent-white-strong-static);--dds-radio-disabled-icon-background-color: var( --dds-background-neutral-stronger );--dds-radio-invalid-border-color: var(--dds-border-negative-base);--dds-radio-invalid-background-color: var(--dds-background-negative-base);--dds-radio-invalid-hover-border-color: var(--dds-border-negative-medium);--dds-radio-invalid-hover-background-color: var( --dds-background-negative-medium );--dds-radio-invalid-active-border-color: var(--dds-border-negative-strong);--dds-radio-invalid-active-background-color: var( --dds-background-negative-strong );--dds-radio-invalid-checked-background-color: var( --dds-background-negative-base-inverted );--dds-radio-invalid-checked-hover-background-color: var( --dds-background-negative-medium-inverted );--dds-radio-invalid-checked-active-background-color: var( --dds-background-negative-strong-inverted );--dds-radio-icon-size: var(--dds-spacing-300);--dds-radio-readonly-border-color: var(--dds-border-neutral-subtle);--dds-radio-readonly-background-color: var(--dds-background-neutral-disabled);--dds-radio-readonly-icon-background-color: var( --dds-background-neutral-stronger )}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-radio-size);min-width:var(--dds-radio-size);height:var(--dds-radio-size);border:var(--dds-radio-border-width) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radio-border-radius)}.input__control-high-contrast:hover{border-width:var(--dds-radio-border-width)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:default}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-spacing-400);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)}.radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}.radio__input[readonly]{pointer-events:none}.radio__icon{width:var(--dds-radio-icon-size);height:var(--dds-radio-icon-size);border-radius:var(--dds-radio-border-radius);opacity:0;background-color:var(--dds-radio-icon-background-color)}:host(:focus-visible) .input__wrapper:not(.input__wrapper--background) .input__control{outline-style:solid}:host(:focus-visible) .input__wrapper--background{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--dds-radio-size);min-width:var(--dds-radio-size);height:var(--dds-radio-size);border-width:var(--dds-radio-border-width);border-style:solid;border-radius:var(--dds-radio-border-radius);border-color:var(--dds-radio-border-color);background-color:var(--dds-radio-background-color)}.input__control:hover{border-color:var(--dds-radio-hover-border-color);background-color:var(--dds-radio-hover-background-color)}.input__control:active{border-color:var(--dds-radio-active-border-color);background-color:var(--dds-radio-active-background-color)}.input__control.input__control--checked{border-width:0;background-color:var(--dds-radio-checked-background-color)}.input__control.input__control--checked:hover{background-color:var(--dds-radio-checked-hover-background-color)}.input__control.input__control--checked:active{background-color:var(--dds-radio-checked-active-background-color)}.input__control.input__control--checked .radio__icon{opacity:1}.input__control[disabled],.input__control:disabled,.input__control.input__control--disabled{border-width:0;background-color:var(--dds-radio-disabled-background-color);cursor:not-allowed;pointer-events:none}.input__control[disabled] .radio__icon,.input__control:disabled .radio__icon,.input__control.input__control--disabled .radio__icon{background-color:var(--dds-radio-disabled-icon-background-color)}.input__control[readonly],.input__control.input__control--readonly{border-width:0;background-color:var(--dds-radio-readonly-background-color);cursor:not-allowed;pointer-events:none}.input__control[readonly] .radio__icon,.input__control.input__control--readonly .radio__icon{background-color:var(--dds-radio-readonly-icon-background-color)}.input__control.dds-radiobutton--invalid,.input__control[invalid],.input__control:invalid,.input__control.input__control--invalid{border-color:var(--dds-radio-invalid-border-color);background-color:var(--dds-radio-invalid-background-color)}.input__control.dds-radiobutton--invalid:hover,.input__control[invalid]:hover,.input__control:invalid:hover,.input__control.input__control--invalid:hover{border-color:var(--dds-radio-invalid-hover-border-color);background-color:var(--dds-radio-invalid-hover-background-color)}.input__control.dds-radiobutton--invalid:active,.input__control[invalid]:active,.input__control:invalid:active,.input__control.input__control--invalid:active{border-color:var(--dds-radio-invalid-active-border-color);background-color:var(--dds-radio-invalid-active-background-color)}.input__control:invalid:checked,.input__control[invalid][checked],.input__control:invalid[checked],.input__control[invalid]:checked,.input__control.dds-radiobutton--invalid[checked],.input__control.dds-radiobutton--invalid:checked,.input__control.input__control--invalid.input__control--checked{border-width:0;background-color:var(--dds-radio-invalid-checked-background-color)}.input__control:invalid:checked:hover,.input__control[invalid][checked]:hover,.input__control:invalid[checked]:hover,.input__control[invalid]:checked:hover,.input__control.dds-radiobutton--invalid[checked]:hover,.input__control.dds-radiobutton--invalid:checked:hover,.input__control.input__control--invalid.input__control--checked:hover{background-color:var(--dds-radio-invalid-checked-hover-background-color)}.input__control:invalid:checked:active,.input__control[invalid][checked]:active,.input__control:invalid[checked]:active,.input__control[invalid]:checked:active,.input__control.dds-radiobutton--invalid[checked]:active,.input__control.dds-radiobutton--invalid:checked:active,.input__control.input__control--invalid.input__control--checked:active{background-color:var(--dds-radio-invalid-checked-active-background-color)}.radio--checked .input__wrapper--background{border-color:var(--dds-background-brand-base-inverted)}.radio--xs .label{margin-top:1px}.radio--disabled .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}.radio--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}';
+const o = ':root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-radio-size: var(--dds-spacing-600);--dds-radio-border-width: var(--dds-border-width-large);--dds-radio-border-radius: var(--dds-radius-rounded);--dds-radio-border-color: var(--dds-border-neutral-base);--dds-radio-background-color: var(--dds-background-neutral-base);--dds-radio-hover-border-color: var(--dds-border-neutral-medium);--dds-radio-hover-background-color: var(--dds-background-neutral-medium);--dds-radio-active-border-color: var(--dds-border-neutral-strong);--dds-radio-active-background-color: var(--dds-background-neutral-strong);--dds-radio-checked-background-color: var( --dds-background-brand-base-inverted );--dds-radio-checked-hover-background-color: var( --dds-background-brand-medium-inverted );--dds-radio-checked-active-background-color: var( --dds-background-brand-strong-inverted );--dds-radio-disabled-background-color: var(--dds-background-neutral-disabled);--dds-radio-icon-background-color: var(--dds-transparent-white-strong-static);--dds-radio-disabled-icon-background-color: var( --dds-background-neutral-stronger );--dds-radio-invalid-border-color: var(--dds-border-negative-base);--dds-radio-invalid-background-color: var(--dds-background-negative-base);--dds-radio-invalid-hover-border-color: var(--dds-border-negative-medium);--dds-radio-invalid-hover-background-color: var( --dds-background-negative-medium );--dds-radio-invalid-active-border-color: var(--dds-border-negative-strong);--dds-radio-invalid-active-background-color: var( --dds-background-negative-strong );--dds-radio-invalid-checked-background-color: var( --dds-background-negative-base-inverted );--dds-radio-invalid-checked-hover-background-color: var( --dds-background-negative-medium-inverted );--dds-radio-invalid-checked-active-background-color: var( --dds-background-negative-strong-inverted );--dds-radio-icon-size: var(--dds-spacing-300);--dds-radio-readonly-border-color: var(--dds-border-neutral-subtle);--dds-radio-readonly-background-color: var(--dds-background-neutral-disabled);--dds-radio-readonly-icon-background-color: var( --dds-background-neutral-stronger )}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-radio-size);min-width:var(--dds-radio-size);height:var(--dds-radio-size);border:var(--dds-radio-border-width) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radio-border-radius)}.input__control-high-contrast:hover{border-width:var(--dds-radio-border-width)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-disabled);background-color:var(--dds-button-primary-background-disabled);cursor:default}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-spacing-400);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)}.radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}.radio__input[readonly]{pointer-events:none}.radio__icon{width:var(--dds-radio-icon-size);height:var(--dds-radio-icon-size);border-radius:var(--dds-radio-border-radius);opacity:0;background-color:var(--dds-radio-icon-background-color)}:host(:focus-visible) .input__wrapper:not(.input__wrapper--background) .input__control{outline-style:solid}:host(:focus-visible) .input__wrapper--background{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;width:var(--dds-radio-size);min-width:var(--dds-radio-size);height:var(--dds-radio-size);border-width:var(--dds-radio-border-width);border-style:solid;border-radius:var(--dds-radio-border-radius);border-color:var(--dds-radio-border-color);background-color:var(--dds-radio-background-color)}.input__control:hover{border-color:var(--dds-radio-hover-border-color);background-color:var(--dds-radio-hover-background-color)}.input__control:active{border-color:var(--dds-radio-active-border-color);background-color:var(--dds-radio-active-background-color)}.input__control.input__control--checked{border-width:0;background-color:var(--dds-radio-checked-background-color)}.input__control.input__control--checked:hover{background-color:var(--dds-radio-checked-hover-background-color)}.input__control.input__control--checked:active{background-color:var(--dds-radio-checked-active-background-color)}.input__control.input__control--checked .radio__icon{opacity:1}.input__control[disabled],.input__control:disabled,.input__control.input__control--disabled{border-width:0;background-color:var(--dds-radio-disabled-background-color);cursor:not-allowed;pointer-events:none}.input__control[disabled] .radio__icon,.input__control:disabled .radio__icon,.input__control.input__control--disabled .radio__icon{background-color:var(--dds-radio-disabled-icon-background-color)}.input__control[readonly],.input__control.input__control--readonly{border-width:0;background-color:var(--dds-radio-readonly-background-color);cursor:not-allowed;pointer-events:none}.input__control[readonly] .radio__icon,.input__control.input__control--readonly .radio__icon{background-color:var(--dds-radio-readonly-icon-background-color)}.input__control.dds-radiobutton--invalid,.input__control[invalid],.input__control:invalid,.input__control.input__control--invalid{border-color:var(--dds-radio-invalid-border-color);background-color:var(--dds-radio-invalid-background-color)}.input__control.dds-radiobutton--invalid:hover,.input__control[invalid]:hover,.input__control:invalid:hover,.input__control.input__control--invalid:hover{border-color:var(--dds-radio-invalid-hover-border-color);background-color:var(--dds-radio-invalid-hover-background-color)}.input__control.dds-radiobutton--invalid:active,.input__control[invalid]:active,.input__control:invalid:active,.input__control.input__control--invalid:active{border-color:var(--dds-radio-invalid-active-border-color);background-color:var(--dds-radio-invalid-active-background-color)}.input__control:invalid:checked,.input__control[invalid][checked],.input__control:invalid[checked],.input__control[invalid]:checked,.input__control.dds-radiobutton--invalid[checked],.input__control.dds-radiobutton--invalid:checked,.input__control.input__control--invalid.input__control--checked{border-width:0;background-color:var(--dds-radio-invalid-checked-background-color)}.input__control:invalid:checked:hover,.input__control[invalid][checked]:hover,.input__control:invalid[checked]:hover,.input__control[invalid]:checked:hover,.input__control.dds-radiobutton--invalid[checked]:hover,.input__control.dds-radiobutton--invalid:checked:hover,.input__control.input__control--invalid.input__control--checked:hover{background-color:var(--dds-radio-invalid-checked-hover-background-color)}.input__control:invalid:checked:active,.input__control[invalid][checked]:active,.input__control:invalid[checked]:active,.input__control[invalid]:checked:active,.input__control.dds-radiobutton--invalid[checked]:active,.input__control.dds-radiobutton--invalid:checked:active,.input__control.input__control--invalid.input__control--checked:active{background-color:var(--dds-radio-invalid-checked-active-background-color)}.radio--checked .input__wrapper--background{border-color:var(--dds-background-brand-base-inverted)}.radio--xs .label{margin-top:1px}.radio--disabled .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}.radio--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}';
 export {
   o as default
 };

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

@@ -46,6 +46,11 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart control - The control of the radio button.
  * @csspart label-container - The label container of the radio button.
  * @csspart description - The description of the radio button.
+ * @csspart feedback - The feedback of the radio button.
+ * @csspart high-contrast - The high contrast indicator of the radio button.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-radio-size - Sets the size of the radio button. (default: var(--dds-spacing-600))
  * @cssproperty --dds-radio-border-width - Sets the border width of the radio button. (default: var(--dds-border-width-large))

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

@@ -1,25 +1,22 @@
-import { clsx as o } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as 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;
+import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as b } from "lit";
+import { query as y, property as o } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { html as c } from "lit/static-html.js";
+import { LabeledChoiceElement as f } from "../../internal/mixin/labeledChoiceElement.js";
+import { formLabelTemplate as m } from "../../internal/templates/formLabel.js";
+import k from "../feedback/feedback.component.js";
+import v from "../form/form-label/form-label.component.js";
+import _ from "../typography/typography.component.js";
+import I from "./_styles/radio-button.scss.js";
+var $ = Object.defineProperty, n = (p, e, t, a) => {
+  for (var s = void 0, h = p.length - 1, u; h >= 0; h--)
+    (u = p[h]) && (s = u(e, t, s) || s);
+  return s && $(e, t, s), s;
 };
-const I = typeof ElementInternals != "undefined" && "ariaDescription" in ElementInternals.prototype;
+const S = typeof ElementInternals != "undefined" && "ariaDescription" in ElementInternals.prototype;
 var i;
-const r = (i = class extends y {
+const r = (i = class extends f {
   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));
@@ -37,7 +34,7 @@ const r = (i = class extends y {
     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");
+    S ? (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");
   }
@@ -115,11 +112,11 @@ const r = (i = class extends y {
     }
   }
   render() {
-    return h`
+    return c`
       <div part="base">
         <label
           part="base-label"
-          class=${o("radio choice", `radio--${this.size}`, {
+          class=${l("radio choice", `radio--${this.size}`, {
       "radio--checked": this.checked,
       "radio--disabled": this.disabled,
       "radio--readonly": this.readonly,
@@ -131,14 +128,14 @@ const r = (i = class extends y {
     })}>
           <div
             part="wrapper"
-            class=${o("input__wrapper", {
+            class=${l("input__wrapper", {
       "input__wrapper--background": this.type === "background",
       "input__wrapper--border": this.border
     })}>
             <input
               part="input"
               type="radio"
-              class=${o("radio__input", {
+              class=${l("radio__input", {
       "radio__input--background": this.type === "background"
     })}
               id=${this.inputId}
@@ -155,7 +152,7 @@ const r = (i = class extends y {
               @input=${this.handleInput} />
             <span
               part="control"
-              class=${o("input__control", {
+              class=${l("input__control", {
       "input__control--disabled": this.disabled,
       "input__control--readonly": this.readonly,
       "input__control--invalid": this.invalid,
@@ -166,7 +163,7 @@ const r = (i = class extends y {
               </slot>
               <span
                 part="high-contrast"
-                class=${o(
+                class=${l(
       "input__control-high-contrast",
       `input__control-high-contrast--${this.size}`,
       {
@@ -178,31 +175,30 @@ const r = (i = class extends y {
 
             <div
               part="label-container"
-              class=${o("choice__label-container", {
+              class=${l("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`
+              ${m({
+      label: this.label,
+      id: this.labelId,
+      size: this.size,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled || this.readonly,
+      hideLabel: this.hideLabel,
+      subtle: !0,
+      noMargin: !0,
+      // Decorative <span> (not a <label>): radio-button wraps its input in
+      // an outer <label>; the name comes from aria-labelledby=${labelId}.
+      as: "span",
+      ariaHidden: !0
+    })}
+              ${this.description && c`
                 <dap-ds-typography
                   class="description"
                   variant="description"
@@ -215,7 +211,7 @@ const r = (i = class extends y {
               `}
             </div>
           </div>
-          ${this.feedback && h`
+          ${this.feedback && c`
             <dap-ds-feedback
               part="feedback"
               feedbackType=${d(this.feedbackType)}
@@ -230,36 +226,36 @@ const r = (i = class extends y {
     `;
   }
 }, 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);
+  "dap-ds-form-label": v,
+  "dap-ds-typography": _,
+  "dap-ds-feedback": k
+}, i.nextId = 0, i.styles = b(I), i);
 n([
-  b(".radio__input")
+  y(".radio__input")
 ], r.prototype, "input");
 n([
-  l({ type: Boolean })
+  o({ type: Boolean })
 ], r.prototype, "focusable");
 n([
-  l({ type: Number })
+  o({ type: Number })
 ], r.prototype, "posInSet");
 n([
-  l({ type: Number })
+  o({ type: Number })
 ], r.prototype, "setSize");
 n([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "preventDefault");
 n([
-  l({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "readonly");
 n([
-  l({ type: Boolean })
+  o({ type: Boolean })
 ], r.prototype, "border");
 n([
-  l({ type: String })
+  o({ type: String })
 ], r.prototype, "type");
-let P = r;
+let T = r;
 export {
-  P as default
+  T as default
 };
 //# sourceMappingURL=radio-button.component.js.map

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

@@ -1 +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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"}
+{"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'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\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 * @csspart feedback - The feedback of the radio button.\n * @csspart high-contrast - The high contrast indicator of the radio button.\n * @csspart label-base - The base of the label.\n * @csspart label-required - The required indicator of the label.\n * @csspart label-optional - The optional indicator of the label.\n *\n * @cssproperty --dds-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              ${formLabelTemplate({\n                label: this.label,\n                id: this.labelId,\n                size: this.size,\n                required: this.required,\n                requiredLabel: this.requiredLabel,\n                optional: this.optional,\n                optionalLabel: this.optionalLabel,\n                disabled: this.disabled || this.readonly,\n                hideLabel: this.hideLabel,\n                subtle: true,\n                noMargin: true,\n                // Decorative <span> (not a <label>): radio-button wraps its input in\n                // an outer <label>; the name comes from aria-labelledby=${labelId}.\n                as: 'span',\n                ariaHidden: true,\n              })}\n              ${this.description &&\n              html`\n                <dap-ds-typography\n                  class=\"description\"\n                  variant=\"description\"\n                  part=\"description\"\n                  aria-hidden=\"true\"\n                  size=${ifDefined(this.size as CommonFormElementSize)}\n                  id=${this.descriptionId}>\n                  ${this.description}\n                </dap-ds-typography>\n              `}\n            </div>\n          </div>\n          ${this.feedback &&\n          html`\n            <dap-ds-feedback\n              part=\"feedback\"\n              feedbackType=${ifDefined(this.feedbackType)}\n              feedbackSize=${ifDefined(this.size) as CommonSize}\n              id=\"feedback\"\n              .subtle=${this.subtle}>\n              ${this.feedback}\n            </dap-ds-feedback>\n          `}\n        </label>\n      </div>\n    `\n  }\n}\n"],"names":["SUPPORTS_ARIA_DESCRIPTION","_DapDSRadioButton","_a","LabeledChoiceElement","event","uniqueSuffix","checkedStr","accessibleName","focusable","checked","value","disabled","error","changedProperties","shouldBeInvalid","html","clsx","ifDefined","formLabelTemplate","DapDSFormLabel","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","DapDSRadioButton"],"mappings":"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"}

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

@@ -1,5 +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}";
+const d = ":host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{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
+  d as default
 };
 //# sourceMappingURL=rating.scss.js.map