dap-design-system 0.62.4 → 0.63.0

package/dist/components/password-input/password-input.component.js

@@ -1,25 +1,19 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f, html as n } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as b } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as w } from "../../node_modules/lit-html/directives/if-defined.js";
-import "../../localization/localization.js";
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as r, css as b, nothing as m, html as d } from "lit";
+import { state as f, property as u } from "lit/decorators.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
 import g from "../icon/icon.component.js";
 import y from "../icon-button/icon-button.component.js";
-import { InputBaseElement as d } from "../input/input-base-element.js";
+import { InputBaseElement as l } from "../input/input-base-element.js";
 import x from "../spinner/spinner.component.js";
-import $ from "../stack/stack.component.js";
-import V from "./password-input.scss.js";
-import { unsafeCSS as c, css as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var k = Object.defineProperty, h = (r, t, a, v) => {
-  for (var s = void 0, e = r.length - 1, p; e >= 0; e--)
-    (p = r[e]) && (s = p(t, a, s) || s);
-  return s && k(t, a, s), s;
+import V from "../stack/stack.component.js";
+import $ from "./password-input.scss.js";
+var _ = Object.defineProperty, c = (a, t, n, k) => {
+  for (var s = void 0, e = a.length - 1, p; e >= 0; e--)
+    (p = a[e]) && (s = p(t, n, s) || s);
+  return s && _(t, n, s), s;
 };
-const i = class i extends d {
+const i = class i extends l {
   constructor() {
     super(), this.passwordVisibile = !1, this.toggleButtonTestId = "password-input-toggle-button", this.type = "password";
   }
@@ -31,20 +25,20 @@ const i = class i extends d {
   }
   render() {
     return this.renderInput(
-      n` <span
+      d` <span
         part="postfix"
-        class=${m("input__addon-postfix password-input", {
+        class=${h("input__addon-postfix password-input", {
         "password-input--visible": this.passwordVisibile
       })}>
         <dap-ds-stack direction="row" slot="postfix">
-          ${this.loading ? n`<dap-ds-spinner size="lg"></dap-ds-spinner>` : f}
+          ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : m}
           <dap-ds-icon-button
             part="show-button"
             data-testid=${this.toggleButtonTestId}
             exportparts="base:show-button-base, content: show-button-content"
             size=${w(this.getIconSize(this.size))}
             role="switch"
-            arialabel="${this.passwordVisibile ? l("hide") : l("show")}"
+            arialabel="${this.passwordVisibile ? this.localize.t("hide") : this.localize.t("show")}"
             aria-checked=${this.passwordVisibile === !0 ? "true" : "false"}
             .disabled=${this.disabled}
             @click=${this._toggleVisibility}>
@@ -67,20 +61,20 @@ const i = class i extends d {
   }
 };
 i.tagName = "dap-ds-password-input", i.dependencies = {
-  "dap-ds-stack": $,
+  "dap-ds-stack": V,
   "dap-ds-spinner": x,
   "dap-ds-icon-button": y,
   "dap-ds-icon": g
-}, i.styles = _`
-    ${c(d.styles)}
-    ${c(V)}
+}, i.styles = b`
+    ${r(l.styles)}
+    ${r($)}
   `;
 let o = i;
-h([
-  u()
+c([
+  f()
 ], o.prototype, "passwordVisibile");
-h([
-  b()
+c([
+  u()
 ], o.prototype, "toggleButtonTestId");
 export {
   o as default

package/dist/components/password-input/password-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.component.js","sources":["../../../src/components/password-input/password-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { css, html, nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { translate } from '@/localization/localization'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\nimport style from './password-input.scss?inline'\n\n/**\n * `dap-ds-password-input`\n * @summary A password input a field for entering a password.\n * @element dap-ds-password-input\n * @title - Password input\n *\n * @property {string} label - The label of the password input.\n * @property {string} placeholder - The placeholder of the password input.\n * @property {string} description - The description of the password input.\n * @property {string} tooltip - The tooltip of the password input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} status - The status of the password input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the password input. Default is `sm`.\n * @property {string} name - The name of the password input.\n * @property {string} value - The value of the password input.\n * @property {boolean} disabled - The disabled state of the password input. Default is false.\n * @property {boolean} required - The required state of the password input. Default is false.\n * @property {boolean} readonly - The readonly state of the password input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the password input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the password input. Default is false.\n * @property {boolean} optional - The optional state of the password input.\n * @property {string} optionalLabel - The optional label of the password input.\n * @property {string} requiredLabel - The required indicator of the password input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @csspart postfix - The postfix of the password input.\n * @csspart password-input - The password input.\n * @csspart password-input--visible - The visible password input.\n * @csspart show-button - The show button of the password input.\n * @csspart show-button-base - The base of the show button.\n * @csspart show-button-content - The content of the show button.\n * @csspart show-icon - The show icon of the password input.\n * @csspart show-icon-base - The base of the show icon.\n * @csspart hide-button - The hide button of the password input.\n * @csspart hide-button-base - The base of the hide button.\n * @csspart hide-button-content - The content of the hide button.\n * @csspart hide-icon - The hide icon of the password input.\n * @csspart hide-icon-base - The base of the hide icon.\n */\nexport default class DapDSPasswordInput extends InputBaseElement {\n  static tagName = 'dap-ds-password-input'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  @state() passwordVisibile: boolean = false\n\n  /** `data-testid` for the show/hide toggle button. */\n  @property() toggleButtonTestId = 'password-input-toggle-button'\n\n  static readonly styles = css`\n    ${unsafeCSS(InputBaseElement.styles)}\n    ${unsafeCSS(style)}\n  `\n  constructor() {\n    super()\n    this.type = 'password'\n  }\n\n  private _toggleVisibility() {\n    this.passwordVisibile = !this.passwordVisibile\n    this.type = this.passwordVisibile ? 'text' : 'password'\n  }\n\n  private getIconSize(size: string) {\n    if (size === 'sm') {\n      return 'md'\n    }\n    return size\n  }\n\n  render() {\n    return this.renderInput(\n      html` <span\n        part=\"postfix\"\n        class=${clsx('input__addon-postfix password-input', {\n          'password-input--visible': this.passwordVisibile,\n        })}>\n        <dap-ds-stack direction=\"row\" slot=\"postfix\">\n          ${this.loading\n            ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n            : nothing}\n          <dap-ds-icon-button\n            part=\"show-button\"\n            data-testid=${this.toggleButtonTestId}\n            exportparts=\"base:show-button-base, content: show-button-content\"\n            size=${ifDefined(this.getIconSize(this.size)) as 'lg' | 'md' | 'sm'}\n            role=\"switch\"\n            arialabel=\"${this.passwordVisibile\n              ? translate('hide')\n              : translate('show')}\"\n            aria-checked=${this.passwordVisibile === true ? 'true' : 'false'}\n            .disabled=${this.disabled}\n            @click=${this._toggleVisibility}>\n            <slot name=\"icon\">\n              <dap-ds-icon\n                name=\"eye-line\"\n                class=\"input__icon-show\"\n                part=\"show-icon\"\n                exportparts=\"icon: show-icon, base: show-icon-base\"></dap-ds-icon>\n              <dap-ds-icon\n                name=\"eye-off-line\"\n                class=\"input__icon-hide\"\n                part=\"hide-icon\"\n                exportparts=\"icon: hide-icon, base: hide-icon-base\"></dap-ds-icon>\n            </slot>\n          </dap-ds-icon-button>\n        </dap-ds-stack>\n      </span>`,\n    )\n  }\n}\n"],"names":["_DapDSPasswordInput","InputBaseElement","size","html","clsx","nothing","ifDefined","translate","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","css","unsafeCSS","style","DapDSPasswordInput","__decorateClass","state","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmGA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAiB;AAAA,EAmB/D,cAAc;AACN,UAAA,GAV6B,KAAA,mBAAA,IAGJ,KAAA,qBAAA,gCAQ/B,KAAK,OAAO;AAAA,EAAA;AAAA,EAGN,oBAAoB;AACrB,SAAA,mBAAmB,CAAC,KAAK,kBACzB,KAAA,OAAO,KAAK,mBAAmB,SAAS;AAAA,EAAA;AAAA,EAGvC,YAAYC,GAAc;AAChC,WAAIA,MAAS,OACJ,OAEFA;AAAA,EAAA;AAAA,EAGT,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAAA;AAAAA,gBAEUC,EAAK,uCAAuC;AAAA,QAClD,2BAA2B,KAAK;AAAA,MAAA,CACjC,CAAC;AAAA;AAAA,YAEE,KAAK,UACHD,iDACAE,CAAO;AAAA;AAAA;AAAA,0BAGK,KAAK,kBAAkB;AAAA;AAAA,mBAE9BC,EAAU,KAAK,YAAY,KAAK,IAAI,CAAC,CAAuB;AAAA;AAAA,yBAEtD,KAAK,mBACdC,EAAU,MAAM,IAChBA,EAAU,MAAM,CAAC;AAAA,2BACN,KAAK,qBAAqB,KAAO,SAAS,OAAO;AAAA,wBACpD,KAAK,QAAQ;AAAA,qBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBvC;AAAA,EAAA;AAEJ;AA3EEP,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBQ;AAAA,EAChB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AACjB,GAOAX,EAAgB,SAASY;AAAAA,MACrBC,EAAUZ,EAAiB,MAAM,CAAC;AAAA,MAClCY,EAAUC,CAAK,CAAC;AAAA;AAjBtB,IAAqBC,IAArBf;AAUWgB,EAAA;AAAA,EAARC,EAAM;AAAA,GAVYF,EAUV,WAAA,kBAAA;AAGGC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAbSH,EAaP,WAAA,oBAAA;"}
+{"version":3,"file":"password-input.component.js","sources":["../../../src/components/password-input/password-input.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { css, html, nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport { InputBaseElement } from '../input/input-base-element'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\nimport style from './password-input.scss?inline'\n\n/**\n * `dap-ds-password-input`\n * @summary A password input a field for entering a password.\n * @element dap-ds-password-input\n * @title - Password input\n *\n * @property {string} label - The label of the password input.\n * @property {string} placeholder - The placeholder of the password input.\n * @property {string} description - The description of the password input.\n * @property {string} tooltip - The tooltip of the password input.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.\n * @property {string} status - The status of the password input. Can be `success` or `error`.\n * @property {'xs' | 'sm' | 'sm'} size - The size of the password input. Default is `sm`.\n * @property {string} name - The name of the password input.\n * @property {string} value - The value of the password input.\n * @property {boolean} disabled - The disabled state of the password input. Default is false.\n * @property {boolean} required - The required state of the password input. Default is false.\n * @property {boolean} readonly - The readonly state of the password input. Default is false.\n * @property {boolean} autofocus - The autofocus state of the password input. Default is false.\n * @property {string} feedback - The feedback of the input.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} loading - The loading state of the password input. Default is false.\n * @property {boolean} optional - The optional state of the password input.\n * @property {string} optionalLabel - The optional label of the password input.\n * @property {string} requiredLabel - The required indicator of the password input. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n *\n * @event {{ value: string }} dds-change - Fired when the input value changes.\n * @event {{ value: string }} dds-input - Fired when the input value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the input loses focus.\n * @event {{ void }} dds-focus - Emitted when the input gains focus.\n *\n * @cssproperty --dds-input-height-xs - The height of the extra small input. (default: var(--dds-spacing-800)).\n * @cssproperty --dds-input-height-sm - The height of the small input. (default: var(--dds-spacing-1000)).\n * @cssproperty --dds-input-height-lg - The height of the large input. (default: var(--dds-spacing-1200)).\n * @cssproperty --dds-input-padding-xs - The padding of the extra small input. (default: 0 var(--dds-spacing-200)).\n * @cssproperty --dds-input-padding-sm - The padding of the small input. (default: 0 var(--dds-spacing-300)).\n * @cssproperty --dds-input-padding-lg - The padding of the large input. (default: 0 var(--dds-spacing-400)).\n * @cssproperty --dds-input-font-size-xs - The font size of the extra small input. (default: var(--dds-font-sm)).\n * @cssproperty --dds-input-font-size-sm - The font size of the small input. (default: var(--dds-font-base)).\n * @cssproperty --dds-input-font-size-lg - The font size of the large input. (default: var(--dds-font-lg)).\n * @cssproperty --dds-input-border - The border of the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-background - The background color of the input. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-text-color - The text color of the input. (default: var(--dds-text-neutral-base)).\n * @cssproperty --dds-input-border-radius - The border radius of the input. (default: var(--dds-radius-base)).\n * @cssproperty --dds-input-disabled-border - The border of the disabled input. (default: 0 solid var(--dds-border-neutral-disabled)).\n * @cssproperty --dds-input-disabled-background - The background color of the disabled input. (default: var(--dds-fields-background-disabled)).\n * @cssproperty --dds-input-disabled-text - The text color of the disabled input. (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-input-readonly-border - The border of the readonly input. (default: 0 solid var(--dds-border-neutral-subtle)).\n * @cssproperty --dds-input-readonly-background - The background color of the readonly input. (default: var(--dds-fields-background-read-only)).\n * @cssproperty --dds-input-readonly-text - The text color of the readonly input. (default: var(--dds-text-neutral-subtle)).\n * @cssproperty --dds-input-success-border - The border of the success input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-error-border - The border of the error input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-background - The background color of the input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-success-background - The background color of the success input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-error-background - The background color of the error input addon. (default: var(--dds-fields-background-default)).\n * @cssproperty --dds-input-addon-border-before - The border of the addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-after - The border of the addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-neutral-base)).\n * @cssproperty --dds-input-addon-border-width-before - The border width of the addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-border-width-after - The border width of the addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-success-border - The border of the success addon. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-before - The border of the success addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-after - The border of the success addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-positive-base)).\n * @cssproperty --dds-input-addon-success-border-width-before - The border width of the success addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-success-border-width-after - The border width of the success addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n * @cssproperty --dds-input-addon-error-border-before - The border of the error addon before the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-after - The border of the error addon after the input. (default: var(--dds-border-width-base) solid var(--dds-border-negative-base)).\n * @cssproperty --dds-input-addon-error-border-width-before - The border width of the error addon before the input. (default: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base)).\n * @cssproperty --dds-input-addon-error-border-width-after - The border width of the error addon after the input. (default: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0).\n *\n * @csspart postfix - The postfix of the password input.\n * @csspart show-button - The show button of the password input.\n * @csspart show-button-base - The base of the show button.\n * @csspart show-button-content - The content of the show button.\n * @csspart show-icon - The show icon of the password input.\n * @csspart show-icon-base - The base of the show icon.\n * @csspart hide-icon - The hide icon of the password input.\n * @csspart hide-icon-base - The base of the hide icon.\n * @csspart base - The main input container.\n * @csspart input - The input element.\n * @csspart label - The label of the input.\n * @csspart description - The description of the input.\n * @csspart feedback - The feedback of the input.\n * @csspart tooltip - The tooltip of the input.\n * @csspart addon-before - The addon before the input.\n * @csspart addon-after - The addon after the input.\n * @csspart prefix - The prefix of the input.\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 */\nexport default class DapDSPasswordInput extends InputBaseElement {\n  static tagName = 'dap-ds-password-input'\n\n  static dependencies = {\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  @state() passwordVisibile: boolean = false\n\n  /** `data-testid` for the show/hide toggle button. */\n  @property() toggleButtonTestId = 'password-input-toggle-button'\n\n  static readonly styles = css`\n    ${unsafeCSS(InputBaseElement.styles)}\n    ${unsafeCSS(style)}\n  `\n  constructor() {\n    super()\n    this.type = 'password'\n  }\n\n  private _toggleVisibility() {\n    this.passwordVisibile = !this.passwordVisibile\n    this.type = this.passwordVisibile ? 'text' : 'password'\n  }\n\n  private getIconSize(size: string) {\n    if (size === 'sm') {\n      return 'md'\n    }\n    return size\n  }\n\n  render() {\n    return this.renderInput(\n      html` <span\n        part=\"postfix\"\n        class=${clsx('input__addon-postfix password-input', {\n          'password-input--visible': this.passwordVisibile,\n        })}>\n        <dap-ds-stack direction=\"row\" slot=\"postfix\">\n          ${this.loading\n            ? html`<dap-ds-spinner size=\"lg\"></dap-ds-spinner>`\n            : nothing}\n          <dap-ds-icon-button\n            part=\"show-button\"\n            data-testid=${this.toggleButtonTestId}\n            exportparts=\"base:show-button-base, content: show-button-content\"\n            size=${ifDefined(this.getIconSize(this.size)) as 'lg' | 'md' | 'sm'}\n            role=\"switch\"\n            arialabel=\"${this.passwordVisibile\n              ? this.localize.t('hide')\n              : this.localize.t('show')}\"\n            aria-checked=${this.passwordVisibile === true ? 'true' : 'false'}\n            .disabled=${this.disabled}\n            @click=${this._toggleVisibility}>\n            <slot name=\"icon\">\n              <dap-ds-icon\n                name=\"eye-line\"\n                class=\"input__icon-show\"\n                part=\"show-icon\"\n                exportparts=\"icon: show-icon, base: show-icon-base\"></dap-ds-icon>\n              <dap-ds-icon\n                name=\"eye-off-line\"\n                class=\"input__icon-hide\"\n                part=\"hide-icon\"\n                exportparts=\"icon: hide-icon, base: hide-icon-base\"></dap-ds-icon>\n            </slot>\n          </dap-ds-icon-button>\n        </dap-ds-stack>\n      </span>`,\n    )\n  }\n}\n"],"names":["_DapDSPasswordInput","InputBaseElement","size","html","clsx","nothing","ifDefined","DapDSStack","DapDSSpinner","DapDSIconButton","DapDSIcon","css","unsafeCSS","style","DapDSPasswordInput","__decorateClass","state","property"],"mappings":";;;;;;;;;;;;;;;AAwGA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAiB;AAAA,EAmB/D,cAAc;AACN,UAAA,GAV6B,KAAA,mBAAA,IAGJ,KAAA,qBAAA,gCAQ/B,KAAK,OAAO;AAAA,EAAA;AAAA,EAGN,oBAAoB;AACrB,SAAA,mBAAmB,CAAC,KAAK,kBACzB,KAAA,OAAO,KAAK,mBAAmB,SAAS;AAAA,EAAA;AAAA,EAGvC,YAAYC,GAAc;AAChC,WAAIA,MAAS,OACJ,OAEFA;AAAA,EAAA;AAAA,EAGT,SAAS;AACP,WAAO,KAAK;AAAA,MACVC;AAAA;AAAA,gBAEUC,EAAK,uCAAuC;AAAA,QAClD,2BAA2B,KAAK;AAAA,MAAA,CACjC,CAAC;AAAA;AAAA,YAEE,KAAK,UACHD,iDACAE,CAAO;AAAA;AAAA;AAAA,0BAGK,KAAK,kBAAkB;AAAA;AAAA,mBAE9BC,EAAU,KAAK,YAAY,KAAK,IAAI,CAAC,CAAuB;AAAA;AAAA,yBAEtD,KAAK,mBACd,KAAK,SAAS,EAAE,MAAM,IACtB,KAAK,SAAS,EAAE,MAAM,CAAC;AAAA,2BACZ,KAAK,qBAAqB,KAAO,SAAS,OAAO;AAAA,wBACpD,KAAK,QAAQ;AAAA,qBAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBvC;AAAA,EAAA;AAEJ;AA3EEN,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBO;AAAA,EAChB,kBAAkBC;AAAA,EAClB,sBAAsBC;AAAA,EACtB,eAAeC;AACjB,GAOAV,EAAgB,SAASW;AAAA,MACrBC,EAAUX,EAAiB,MAAM,CAAC;AAAA,MAClCW,EAAUC,CAAK,CAAC;AAAA;AAjBtB,IAAqBC,IAArBd;AAUWe,EAAA;AAAA,EAARC,EAAM;AAAA,GAVYF,EAUV,WAAA,kBAAA;AAGGC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAbSH,EAaP,WAAA,oBAAA;"}

package/dist/components/popup/popup-base-element.js

@@ -19,16 +19,12 @@ var g = (l, t, e) => new Promise((u, n) => {
 });
 import { autoUpdate as U, computePosition as W, offset as H, flip as N, shift as M, size as k, arrow as B } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
 import { clsx as S } 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 o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as A } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { html as b } from "../../node_modules/lit-html/static.js";
-import { SizedMixin as P } from "../../internal/mixin/sizedMixin.js";
-import { DdsElement as L } from "../../internal/dds-hu-element.js";
-import V from "./popup.scss.js";
-import { unsafeCSS as q } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as P } from "lit";
+import { query as C, property as o } from "lit/decorators.js";
+import { html as b } from "lit/static-html.js";
+import { SizedMixin as L } from "../../internal/mixin/sizedMixin.js";
+import { DdsElement as V } from "../../internal/dds-hu-element.js";
+import q from "./popup.scss.js";
 var D = Object.defineProperty, r = (l, t, e, u) => {
   for (var n = void 0, a = l.length - 1, h; a >= 0; a--)
     (h = l[a]) && (n = h(t, e, n) || n);
@@ -53,7 +49,7 @@ const I = /* @__PURE__ */ new Set([
   "image",
   "reset",
   "submit"
-]), c = class c extends P(L) {
+]), c = class c extends L(V) {
   constructor() {
     super(...arguments), this.triggerElement = null, this.intersectionObserver = null, this.disabled = !1, this.opened = !1, this.placement = "bottom", this.floatingStrategy = "absolute", this.offset = 0, this.maxHeight = 250, this.maxWidth = "auto", this.disableViewportAutoClose = !1;
   }
@@ -63,7 +59,7 @@ const I = /* @__PURE__ */ new Set([
     });
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.syncTriggerAria();
+    super.firstUpdated(t), this.triggerElement || this._handleTriggerSlotChange(), this.syncTriggerAria();
   }
   /**
    * Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the
@@ -100,7 +96,7 @@ const I = /* @__PURE__ */ new Set([
   }
   startUpdate() {
     var t;
-    this.triggerElement && ((t = this.intersectionObserver) == null || t.disconnect(), this.intersectionObserver = new IntersectionObserver(
+    !this.triggerElement || !this.popup || ((t = this.intersectionObserver) == null || t.disconnect(), this.intersectionObserver = new IntersectionObserver(
       (e) => {
         e[0] && !e[0].isIntersecting && this.opened && !this.disableViewportAutoClose && (this.opened = !1, this.emit("dds-close"));
       },
@@ -122,7 +118,7 @@ const I = /* @__PURE__ */ new Set([
   updatePosition() {
     return g(this, null, function* () {
       var d;
-      if (this.disabled || !this.triggerElement)
+      if (this.disabled || !this.triggerElement || !this.popup)
         return;
       const t = this.triggerElement.getBoundingClientRect();
       if (!(t.top < window.innerHeight && t.bottom > 0 && t.left < window.innerWidth && t.right > 0)) {
@@ -140,11 +136,11 @@ const I = /* @__PURE__ */ new Set([
             N(),
             M(),
             k({
-              apply: ({ rects: s, availableHeight: p, availableWidth: m, elements: f }) => {
-                const w = Math.max(0, p), x = Math.max(0, m), C = this.sync;
-                this.popup.style.width = C ? `${s.reference.width}px` : "";
+              apply: ({ rects: s, availableHeight: p, availableWidth: f, elements: m }) => {
+                const w = Math.max(0, p), x = Math.max(0, f), A = this.sync;
+                this.popup.style.width = A ? `${s.reference.width}px` : "";
                 const v = typeof this.maxHeight == "number" ? this.maxHeight : void 0, E = v != null ? Math.min(v, w) : w;
-                this.popup.style.maxHeight = E >= f.floating.scrollHeight ? "" : `${E}px`;
+                this.popup.style.maxHeight = E >= m.floating.scrollHeight ? "" : `${E}px`;
                 const _ = typeof this.maxWidth == "number" ? this.maxWidth : void 0, T = _ != null ? Math.min(_, x) : x;
                 this.popup.style.maxWidth = `${T}px`, this.fullWidth && (this.popup.style.width = "100vw");
               }
@@ -157,22 +153,22 @@ const I = /* @__PURE__ */ new Set([
         left: `${u}px`,
         top: `${n}px`
       }), this.arrowElement) {
-        const { x: s, y: p } = h.arrow, [m] = a.split("-"), f = (d = {
+        const { x: s, y: p } = h.arrow, [f] = a.split("-"), m = (d = {
           top: "bottom",
           right: "left",
           bottom: "top",
           left: "right"
-        }[m]) != null ? d : "";
+        }[f]) != null ? d : "";
         Object.assign(this.arrowElement.style, {
           left: s != null ? `${s}px` : "",
           top: p != null ? `${p}px` : "",
-          [f]: "-5px"
+          [m]: "-5px"
         }), this.arrowElement.classList.remove(
           "popup__arrow--top",
           "popup__arrow--right",
           "popup__arrow--bottom",
           "popup__arrow--left"
-        ), this.arrowElement.classList.add(`popup__arrow--${m}`);
+        ), this.arrowElement.classList.add(`popup__arrow--${f}`);
       }
     });
   }
@@ -204,13 +200,13 @@ const I = /* @__PURE__ */ new Set([
     `;
   }
 };
-c.styles = q(V);
+c.styles = P(q);
 let i = c;
 r([
-  A(".popup")
+  C(".popup")
 ], i.prototype, "popup");
 r([
-  A(".popup__arrow")
+  C(".popup__arrow")
 ], i.prototype, "arrowElement");
 r([
   o({ reflect: !0, type: Boolean })

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

@@ -1 +1 @@
-{"version":3,"file":"popup-base-element.js","sources":["../../../src/components/popup/popup-base-element.ts"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  Coords,\n  flip,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom'\nimport { clsx } from 'clsx'\nimport { TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport { FloatingStrategy, PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './popup.scss?inline'\n\n// Roles on which ARIA 1.2 permits aria-expanded; on any other role axe reports aria-allowed-attr\nconst EXPANDABLE_ROLES = new Set([\n  'application',\n  'button',\n  'checkbox',\n  'columnheader',\n  'combobox',\n  'gridcell',\n  'link',\n  'menuitem',\n  'row',\n  'rowheader',\n  'tab',\n  'treeitem',\n])\n\nconst EXPANDABLE_INPUT_TYPES = new Set([\n  'button',\n  'checkbox',\n  'image',\n  'reset',\n  'submit',\n])\n\nexport default class PopupBaseElement extends SizedMixin(DdsElement) {\n  static readonly styles = unsafeCSS(styles)\n\n  protected triggerElement: Element | null = null\n  private cleanup: ReturnType<typeof autoUpdate> | undefined\n  private intersectionObserver: IntersectionObserver | null = null\n\n  @query('.popup') protected readonly popup!: HTMLDivElement\n  @query('.popup__arrow') private readonly arrowElement?: HTMLDivElement\n\n  /** The disabled state of the popup. */\n  @property({ reflect: true, type: Boolean }) disabled? = false\n\n  /** The open state of the popup. */\n  @property({ reflect: true, type: Boolean }) opened? = false\n\n  /** The placement of the popup.\n   * @type {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** The floating strategy of the popup.\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true })\n  floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** The offset of the popup. */\n  @property({ type: Number }) offset = 0\n\n  /** Whether the popup should sync its width with the trigger. */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** The maximum height of the popup. */\n  @property({ type: Number }) maxHeight: number | 'auto' = 250\n\n  /** The maximum width of the popup. */\n  @property({ type: Number }) maxWidth: number | 'auto' = 'auto'\n\n  /** Whether the popup has an arrow. */\n  @property({ type: Boolean }) hasArrow: boolean\n\n  /** Whether the popup should overflow. */\n  @property({ type: Boolean }) overflow: boolean\n\n  /** Whether the popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.startUpdate()\n  }\n\n  protected firstUpdated(changedProps: Map<string, unknown>) {\n    super.firstUpdated(changedProps)\n\n    this.syncTriggerAria()\n  }\n\n  /**\n   * Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the\n   * combobox/datepicker field frame) expose state on their own inner control.\n   */\n  private triggerSupportsExpanded(el: Element): boolean {\n    const role = el.getAttribute('role')\n    if (role) {\n      return EXPANDABLE_ROLES.has(role)\n    }\n    if (el.tagName === 'BUTTON') {\n      return true\n    }\n    if (el.tagName === 'A') {\n      return el.hasAttribute('href')\n    }\n    if (el.tagName === 'INPUT') {\n      return EXPANDABLE_INPUT_TYPES.has((el as HTMLInputElement).type)\n    }\n    return false\n  }\n\n  private syncTriggerAria() {\n    const trigger = this.triggerElement\n    if (!trigger || !this.triggerSupportsExpanded(trigger)) {\n      return\n    }\n    // Keep a trigger's own aria-controls (e.g. select points at its option list)\n    if (!trigger.hasAttribute('aria-controls')) {\n      trigger.setAttribute('aria-controls', 'popup')\n    }\n    trigger.setAttribute('aria-expanded', String(!!this.opened))\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps)\n\n    if (changedProps.has('opened')) {\n      if (this.opened) {\n        this.startUpdate()\n        this.syncTriggerAria()\n        this.emit('dds-opened')\n      } else {\n        this.stopUpdate()\n        this.syncTriggerAria()\n        this.emit('dds-closed')\n      }\n    }\n\n    if (changedProps.has('anchor')) {\n      this._handleTriggerSlotChange()\n    }\n\n    if (this.opened) {\n      await this.updateComplete\n      this.updatePosition()\n    }\n  }\n\n  async _handleTriggerSlotChange(e?: Event | undefined) {\n    this._handleTriggerSlotChangeCallback(e)\n\n    await this.stopUpdate()\n\n    // Use :scope > to only match direct children, not descendants\n    this.triggerElement = this.querySelector<HTMLElement>(\n      ':scope > [slot=\"trigger\"]',\n    )\n\n    if (!this.triggerElement) {\n      this.triggerElement = this.shadowRoot?.querySelector(\n        'slot[name=\"trigger\"] *',\n      ) as HTMLElement\n    }\n\n    if (this.triggerElement instanceof HTMLSlotElement) {\n      this.triggerElement = this.triggerElement.assignedElements({\n        flatten: true,\n      })[0] as HTMLElement\n    }\n\n    if (this.triggerElement) {\n      this.startUpdate()\n    }\n  }\n\n  public _handleTriggerSlotChangeCallback(_e?: Event) {\n    return\n  }\n\n  public _handleContentSlotChange(_e: Event) {\n    return\n  }\n\n  public startUpdate() {\n    if (!this.triggerElement) {\n      return\n    }\n\n    // Create IntersectionObserver to detect when trigger is out of viewport\n    this.intersectionObserver?.disconnect()\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        // If trigger is not intersecting (out of viewport), close the popup\n        if (\n          entries[0] &&\n          !entries[0].isIntersecting &&\n          this.opened &&\n          !this.disableViewportAutoClose\n        ) {\n          this.opened = false\n          this.emit('dds-close')\n        }\n      },\n      { threshold: 0 },\n    )\n    this.intersectionObserver.observe(this.triggerElement)\n\n    this.cleanup = autoUpdate(this.triggerElement, this.popup, () => {\n      this.updatePosition()\n    })\n  }\n\n  public async stopUpdate(): Promise<void> {\n    return new Promise(resolve => {\n      if (this.intersectionObserver) {\n        this.intersectionObserver.disconnect()\n        this.intersectionObserver = null\n      }\n\n      if (this.cleanup) {\n        this.cleanup()\n        this.cleanup = undefined\n        requestAnimationFrame(() => resolve())\n      } else {\n        resolve()\n      }\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    // Clean up the IntersectionObserver\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect()\n      this.intersectionObserver = null\n    }\n\n    this.stopUpdate()\n  }\n\n  protected async updatePosition() {\n    if (this.disabled || !this.triggerElement) {\n      return\n    }\n\n    // Check if trigger element is visible in viewport\n    const triggerRect = this.triggerElement.getBoundingClientRect()\n    const isVisible =\n      triggerRect.top < window.innerHeight &&\n      triggerRect.bottom > 0 &&\n      triggerRect.left < window.innerWidth &&\n      triggerRect.right > 0\n\n    if (!isVisible) {\n      if (this.opened && !this.disableViewportAutoClose) {\n        this.opened = false\n        this.emit('dds-close')\n      }\n      return\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(\n      this.triggerElement,\n      this.popup,\n      {\n        placement: this.placement,\n        strategy: this.floatingStrategy,\n        middleware: [\n          offset(this.offset),\n          flip(),\n          shift(),\n          size({\n            apply: ({ rects, availableHeight, availableWidth, elements }) => {\n              const safeAvailableHeight = Math.max(0, availableHeight)\n              const safeAvailableWidth = Math.max(0, availableWidth)\n              const syncWidth = this.sync\n              this.popup.style.width = syncWidth\n                ? `${rects.reference.width}px`\n                : ''\n\n              const configuredMaxHeight =\n                typeof this.maxHeight === 'number' ? this.maxHeight : undefined\n              const effectiveMaxHeight =\n                configuredMaxHeight != null\n                  ? Math.min(configuredMaxHeight, safeAvailableHeight)\n                  : safeAvailableHeight\n              this.popup.style.maxHeight =\n                effectiveMaxHeight >= elements.floating.scrollHeight\n                  ? ''\n                  : `${effectiveMaxHeight}px`\n\n              const configuredMaxWidth =\n                typeof this.maxWidth === 'number' ? this.maxWidth : undefined\n              const effectiveMaxWidth =\n                configuredMaxWidth != null\n                  ? Math.min(configuredMaxWidth, safeAvailableWidth)\n                  : safeAvailableWidth\n              this.popup.style.maxWidth = `${effectiveMaxWidth}px`\n\n              if (this.fullWidth) {\n                this.popup.style.width = '100vw'\n              }\n            },\n          }),\n          ...(this.arrowElement\n            ? [arrow({ element: this.arrowElement, padding: 8 })]\n            : []),\n        ],\n      },\n    )\n\n    Object.assign(this.popup.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    })\n\n    if (this.arrowElement) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow as Coords\n      const [side] = placement.split('-')\n      const staticSide =\n        {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[side] ?? ''\n\n      Object.assign(this.arrowElement.style, {\n        left: arrowX != null ? `${arrowX}px` : '',\n        top: arrowY != null ? `${arrowY}px` : '',\n        [staticSide]: `-5px`,\n      })\n\n      this.arrowElement.classList.remove(\n        'popup__arrow--top',\n        'popup__arrow--right',\n        'popup__arrow--bottom',\n        'popup__arrow--left',\n      )\n      this.arrowElement.classList.add(`popup__arrow--${side}`)\n    }\n  }\n\n  renderTrigger(): TemplateResult {\n    return html``\n  }\n\n  renderPopup() {\n    return html`\n      <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}>\n        ${this.renderTrigger()}\n      </slot>\n      <div\n        part=\"popup\"\n        id=\"popup\"\n        ?inert=${!this.opened}\n        class=${clsx('popup', `popup--${this.size}`, {\n          'popup--opened': this.opened,\n          'popup--fixed': this.floatingStrategy === 'fixed',\n          'popup--has-arrow': this.hasArrow,\n          'popup--overflow': this.overflow,\n          'popup--full-width': this.fullWidth,\n        })}>\n        <slot @slotchange=${this._handleContentSlotChange}></slot>\n        ${this.hasArrow\n          ? html`<div\n              part=\"arrow\"\n              class=${clsx('popup__arrow')}\n              role=\"presentation\"></div>`\n          : ''}\n      </div>\n    `\n  }\n}\n"],"names":["EXPANDABLE_ROLES","EXPANDABLE_INPUT_TYPES","_PopupBaseElement","SizedMixin","DdsElement","__async","__superGet","changedProps","el","role","trigger","e","_a","_e","entries","autoUpdate","resolve","triggerRect","x","y","placement","middlewareData","computePosition","offset","flip","shift","size","rects","availableHeight","availableWidth","elements","safeAvailableHeight","safeAvailableWidth","syncWidth","configuredMaxHeight","effectiveMaxHeight","configuredMaxWidth","effectiveMaxWidth","arrow","arrowX","arrowY","side","staticSide","html","clsx","unsafeCSS","styles","PopupBaseElement","__decorateClass","query","property"],"mappings":"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"}
+{"version":3,"file":"popup-base-element.js","sources":["../../../src/components/popup/popup-base-element.ts"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  Coords,\n  flip,\n  offset,\n  shift,\n  size,\n} from '@floating-ui/dom'\nimport { clsx } from 'clsx'\nimport { TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport { FloatingStrategy, PopupPlacement } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './popup.scss?inline'\n\n// Roles on which ARIA 1.2 permits aria-expanded; on any other role axe reports aria-allowed-attr\nconst EXPANDABLE_ROLES = new Set([\n  'application',\n  'button',\n  'checkbox',\n  'columnheader',\n  'combobox',\n  'gridcell',\n  'link',\n  'menuitem',\n  'row',\n  'rowheader',\n  'tab',\n  'treeitem',\n])\n\nconst EXPANDABLE_INPUT_TYPES = new Set([\n  'button',\n  'checkbox',\n  'image',\n  'reset',\n  'submit',\n])\n\nexport default class PopupBaseElement extends SizedMixin(DdsElement) {\n  static readonly styles = unsafeCSS(styles)\n\n  protected triggerElement: Element | null = null\n  private cleanup: ReturnType<typeof autoUpdate> | undefined\n  private intersectionObserver: IntersectionObserver | null = null\n\n  @query('.popup') protected readonly popup!: HTMLDivElement\n  @query('.popup__arrow') private readonly arrowElement?: HTMLDivElement\n\n  /** The disabled state of the popup. */\n  @property({ reflect: true, type: Boolean }) disabled? = false\n\n  /** The open state of the popup. */\n  @property({ reflect: true, type: Boolean }) opened? = false\n\n  /** The placement of the popup.\n   * @type {'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'}\n   */\n  @property({ reflect: true }) placement: PopupPlacement = 'bottom'\n\n  /** The floating strategy of the popup.\n   * @type {'absolute' | 'fixed'}\n   */\n  @property({ reflect: true })\n  floatingStrategy: FloatingStrategy = 'absolute'\n\n  /** The offset of the popup. */\n  @property({ type: Number }) offset = 0\n\n  /** Whether the popup should sync its width with the trigger. */\n  @property({ type: Boolean }) sync?: boolean\n\n  /** The maximum height of the popup. */\n  @property({ type: Number }) maxHeight: number | 'auto' = 250\n\n  /** The maximum width of the popup. */\n  @property({ type: Number }) maxWidth: number | 'auto' = 'auto'\n\n  /** Whether the popup has an arrow. */\n  @property({ type: Boolean }) hasArrow: boolean\n\n  /** Whether the popup should overflow. */\n  @property({ type: Boolean }) overflow: boolean\n\n  /** Whether the popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean\n\n  /** Whether to keep popup open when trigger leaves viewport. */\n  @property({ type: Boolean }) disableViewportAutoClose: boolean = false\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.startUpdate()\n  }\n\n  protected firstUpdated(changedProps: Map<string, unknown>) {\n    super.firstUpdated(changedProps)\n\n    // Resolve the trigger element on first render. Normally this happens via the\n    // trigger slot's `slotchange` event, but that event does NOT fire when the\n    // slotted trigger is server-rendered (declarative shadow DOM) and the\n    // component hydrates. Without this, the popup never finds its anchor and\n    // floating-ui positions it at (0,0) — e.g. datepicker/select dropdowns\n    // appearing in the top-left corner under SSR.\n    if (!this.triggerElement) {\n      void this._handleTriggerSlotChange()\n    }\n\n    this.syncTriggerAria()\n  }\n\n  /**\n   * Whether the trigger can carry aria-expanded. Role-less wrappers (e.g. the\n   * combobox/datepicker field frame) expose state on their own inner control.\n   */\n  private triggerSupportsExpanded(el: Element): boolean {\n    const role = el.getAttribute('role')\n    if (role) {\n      return EXPANDABLE_ROLES.has(role)\n    }\n    if (el.tagName === 'BUTTON') {\n      return true\n    }\n    if (el.tagName === 'A') {\n      return el.hasAttribute('href')\n    }\n    if (el.tagName === 'INPUT') {\n      return EXPANDABLE_INPUT_TYPES.has((el as HTMLInputElement).type)\n    }\n    return false\n  }\n\n  private syncTriggerAria() {\n    const trigger = this.triggerElement\n    if (!trigger || !this.triggerSupportsExpanded(trigger)) {\n      return\n    }\n    // Keep a trigger's own aria-controls (e.g. select points at its option list)\n    if (!trigger.hasAttribute('aria-controls')) {\n      trigger.setAttribute('aria-controls', 'popup')\n    }\n    trigger.setAttribute('aria-expanded', String(!!this.opened))\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps)\n\n    if (changedProps.has('opened')) {\n      if (this.opened) {\n        this.startUpdate()\n        this.syncTriggerAria()\n        this.emit('dds-opened')\n      } else {\n        this.stopUpdate()\n        this.syncTriggerAria()\n        this.emit('dds-closed')\n      }\n    }\n\n    if (changedProps.has('anchor')) {\n      this._handleTriggerSlotChange()\n    }\n\n    if (this.opened) {\n      await this.updateComplete\n      this.updatePosition()\n    }\n  }\n\n  async _handleTriggerSlotChange(e?: Event | undefined) {\n    this._handleTriggerSlotChangeCallback(e)\n\n    await this.stopUpdate()\n\n    // Use :scope > to only match direct children, not descendants\n    this.triggerElement = this.querySelector<HTMLElement>(\n      ':scope > [slot=\"trigger\"]',\n    )\n\n    if (!this.triggerElement) {\n      this.triggerElement = this.shadowRoot?.querySelector(\n        'slot[name=\"trigger\"] *',\n      ) as HTMLElement\n    }\n\n    if (this.triggerElement instanceof HTMLSlotElement) {\n      this.triggerElement = this.triggerElement.assignedElements({\n        flatten: true,\n      })[0] as HTMLElement\n    }\n\n    if (this.triggerElement) {\n      this.startUpdate()\n    }\n  }\n\n  public _handleTriggerSlotChangeCallback(_e?: Event) {\n    return\n  }\n\n  public _handleContentSlotChange(_e: Event) {\n    return\n  }\n\n  public startUpdate() {\n    // `this.popup` (the floating element) is required by floating-ui's\n    // autoUpdate. Subclasses that delegate to a nested popup (e.g. command) have\n    // no local `.popup`, and it may not exist yet during firstUpdated — bail\n    // rather than calling autoUpdate with a null floating element.\n    if (!this.triggerElement || !this.popup) {\n      return\n    }\n\n    // Create IntersectionObserver to detect when trigger is out of viewport\n    this.intersectionObserver?.disconnect()\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        // If trigger is not intersecting (out of viewport), close the popup\n        if (\n          entries[0] &&\n          !entries[0].isIntersecting &&\n          this.opened &&\n          !this.disableViewportAutoClose\n        ) {\n          this.opened = false\n          this.emit('dds-close')\n        }\n      },\n      { threshold: 0 },\n    )\n    this.intersectionObserver.observe(this.triggerElement)\n\n    this.cleanup = autoUpdate(this.triggerElement, this.popup, () => {\n      this.updatePosition()\n    })\n  }\n\n  public async stopUpdate(): Promise<void> {\n    return new Promise(resolve => {\n      if (this.intersectionObserver) {\n        this.intersectionObserver.disconnect()\n        this.intersectionObserver = null\n      }\n\n      if (this.cleanup) {\n        this.cleanup()\n        this.cleanup = undefined\n        requestAnimationFrame(() => resolve())\n      } else {\n        resolve()\n      }\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    // Clean up the IntersectionObserver\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect()\n      this.intersectionObserver = null\n    }\n\n    this.stopUpdate()\n  }\n\n  protected async updatePosition() {\n    // `this.popup` (the floating element) can be null on subclasses that\n    // delegate to a nested popup (e.g. command) — see startUpdate. Without this\n    // guard computePosition passes null to floating-ui, whose isRTL calls\n    // getComputedStyle(null) and throws \"not of type Element\" under jsdom.\n    if (this.disabled || !this.triggerElement || !this.popup) {\n      return\n    }\n\n    // Check if trigger element is visible in viewport\n    const triggerRect = this.triggerElement.getBoundingClientRect()\n    const isVisible =\n      triggerRect.top < window.innerHeight &&\n      triggerRect.bottom > 0 &&\n      triggerRect.left < window.innerWidth &&\n      triggerRect.right > 0\n\n    if (!isVisible) {\n      if (this.opened && !this.disableViewportAutoClose) {\n        this.opened = false\n        this.emit('dds-close')\n      }\n      return\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(\n      this.triggerElement,\n      this.popup,\n      {\n        placement: this.placement,\n        strategy: this.floatingStrategy,\n        middleware: [\n          offset(this.offset),\n          flip(),\n          shift(),\n          size({\n            apply: ({ rects, availableHeight, availableWidth, elements }) => {\n              const safeAvailableHeight = Math.max(0, availableHeight)\n              const safeAvailableWidth = Math.max(0, availableWidth)\n              const syncWidth = this.sync\n              this.popup.style.width = syncWidth\n                ? `${rects.reference.width}px`\n                : ''\n\n              const configuredMaxHeight =\n                typeof this.maxHeight === 'number' ? this.maxHeight : undefined\n              const effectiveMaxHeight =\n                configuredMaxHeight != null\n                  ? Math.min(configuredMaxHeight, safeAvailableHeight)\n                  : safeAvailableHeight\n              this.popup.style.maxHeight =\n                effectiveMaxHeight >= elements.floating.scrollHeight\n                  ? ''\n                  : `${effectiveMaxHeight}px`\n\n              const configuredMaxWidth =\n                typeof this.maxWidth === 'number' ? this.maxWidth : undefined\n              const effectiveMaxWidth =\n                configuredMaxWidth != null\n                  ? Math.min(configuredMaxWidth, safeAvailableWidth)\n                  : safeAvailableWidth\n              this.popup.style.maxWidth = `${effectiveMaxWidth}px`\n\n              if (this.fullWidth) {\n                this.popup.style.width = '100vw'\n              }\n            },\n          }),\n          ...(this.arrowElement\n            ? [arrow({ element: this.arrowElement, padding: 8 })]\n            : []),\n        ],\n      },\n    )\n\n    Object.assign(this.popup.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    })\n\n    if (this.arrowElement) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow as Coords\n      const [side] = placement.split('-')\n      const staticSide =\n        {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[side] ?? ''\n\n      Object.assign(this.arrowElement.style, {\n        left: arrowX != null ? `${arrowX}px` : '',\n        top: arrowY != null ? `${arrowY}px` : '',\n        [staticSide]: `-5px`,\n      })\n\n      this.arrowElement.classList.remove(\n        'popup__arrow--top',\n        'popup__arrow--right',\n        'popup__arrow--bottom',\n        'popup__arrow--left',\n      )\n      this.arrowElement.classList.add(`popup__arrow--${side}`)\n    }\n  }\n\n  renderTrigger(): TemplateResult {\n    return html``\n  }\n\n  renderPopup() {\n    return html`\n      <slot name=\"trigger\" @slotchange=${this._handleTriggerSlotChange}>\n        ${this.renderTrigger()}\n      </slot>\n      <div\n        part=\"popup\"\n        id=\"popup\"\n        ?inert=${!this.opened}\n        class=${clsx('popup', `popup--${this.size}`, {\n          'popup--opened': this.opened,\n          'popup--fixed': this.floatingStrategy === 'fixed',\n          'popup--has-arrow': this.hasArrow,\n          'popup--overflow': this.overflow,\n          'popup--full-width': this.fullWidth,\n        })}>\n        <slot @slotchange=${this._handleContentSlotChange}></slot>\n        ${this.hasArrow\n          ? html`<div\n              part=\"arrow\"\n              class=${clsx('popup__arrow')}\n              role=\"presentation\"></div>`\n          : ''}\n      </div>\n    `\n  }\n}\n"],"names":["EXPANDABLE_ROLES","EXPANDABLE_INPUT_TYPES","_PopupBaseElement","SizedMixin","DdsElement","__async","__superGet","changedProps","el","role","trigger","e","_a","_e","entries","autoUpdate","resolve","triggerRect","x","y","placement","middlewareData","computePosition","offset","flip","shift","size","rects","availableHeight","availableWidth","elements","safeAvailableHeight","safeAvailableWidth","syncWidth","configuredMaxHeight","effectiveMaxHeight","configuredMaxWidth","effectiveMaxWidth","arrow","arrowX","arrowY","side","staticSide","html","clsx","unsafeCSS","styles","PopupBaseElement","__decorateClass","query","property"],"mappings":"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"}

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

@@ -1,19 +1,15 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as o } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as t } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { translate as l } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
-import { SizedMixin as f } from "../../internal/mixin/sizedMixin.js";
-import v from "./progress.scss.js";
-import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, i = (h, a, s, p) => {
-  for (var r = void 0, d = h.length - 1, g; d >= 0; d--)
-    (g = h[d]) && (r = g(a, s, r) || r);
-  return r && $(a, s, r), r;
+import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as u, html as n, nothing as o } from "lit";
+import { property as t } from "lit/decorators.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
+import f from "./progress.scss.js";
+var y = Object.defineProperty, i = (h, a, s, c) => {
+  for (var r = void 0, p = h.length - 1, d; p >= 0; p--)
+    (d = h[p]) && (r = d(a, s, r) || r);
+  return r && y(a, s, r), r;
 };
-const _ = f(u), c = class c extends _ {
+const $ = v(m), l = class l extends $ {
   constructor() {
     super(...arguments), this.variant = "linear", this.color = "brand", this.max = 100, this.indeterminate = !1, this.showPercentage = !1, this.ariaLive = "polite";
   }
@@ -88,12 +84,12 @@ const _ = f(u), c = class c extends _ {
     `;
   }
   render() {
-    var p, r;
+    var c, r;
     const a = this.indeterminate ? "status" : "progressbar", s = this.indeterminate ? "true" : "false";
     return n`
       <div
         part="base"
-        class=${m(
+        class=${g(
       "progress",
       `progress--${this.variant}`,
       `progress--${this.color}`,
@@ -104,7 +100,7 @@ const _ = f(u), c = class c extends _ {
     )}
         role=${a}
         aria-busy=${s}
-        aria-label=${(r = (p = this.ariaLabel) != null ? p : this.label) != null ? r : this.indeterminate ? l("progress.loading") : l("progress.progress", {
+        aria-label=${(r = (c = this.ariaLabel) != null ? c : this.label) != null ? r : this.indeterminate ? this.localize.t("progress.loading") : this.localize.t("progress.progress", {
       percentage: Math.round(this.percentage)
     })}
         aria-live=${this.ariaLive}
@@ -120,7 +116,7 @@ const _ = f(u), c = class c extends _ {
 
         <!-- Screen reader announcements -->
         <div class="sr-only" aria-live=${this.ariaLive} aria-atomic="true">
-          ${this.indeterminate ? l("progress.loading") : l("progress.progress", {
+          ${this.indeterminate ? this.localize.t("progress.loading") : this.localize.t("progress.progress", {
       percentage: Math.round(this.percentage)
     })}
         </div>
@@ -128,8 +124,8 @@ const _ = f(u), c = class c extends _ {
     `;
   }
 };
-c.tagName = "dap-ds-progress", c.styles = y(v);
-let e = c;
+l.tagName = "dap-ds-progress", l.styles = u(f);
+let e = l;
 i([
   t({ type: String, reflect: !0 })
 ], e.prototype, "variant");

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
 };