@odx/foundation 1.0.0-alpha.31 → 1.0.0-alpha.33

package/README.md

@@ -34,11 +34,11 @@ import '@odx/icons/core';
 
 ```js
 // JS
-import '@odx/foundation/fonts';
+import '@odx/design-tokens/fonts';
 import '@odx/foundation/styles';
 
 // CSS
-@import '@odx/foundation/dist/assets/fonts.css';
+@import '@odx/design-tokens/dist/assets/fonts.css';
 @import '@odx/foundation/dist/styles.css';
 ```
 

package/dist/components.js

@@ -12,7 +12,7 @@ import { g as clamp, R as RovingTabindexController, r as round, i as debounce, m
 import { styleMap } from 'lit/directives/style-map.js';
 import { createContext, consume, provide } from '@lit/context';
 
-const styles$1a = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+const styles$1a = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground-base);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([aria-disabled=\"true\"]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([aria-disabled=\"true\"]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
 
 var __defProp$1l = Object.defineProperty;
 var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
@@ -375,7 +375,7 @@ __decorateClass$1h([
   property()
 ], BaseLink.prototype, "download", 2);
 
-const styles$16 = ":host{--_color-foreground: var(--odx-palette-blue-50);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
+const styles$16 = ":host{--_color-foreground: var(--odx-palette-blue-50);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground-base);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
 
 var __defProp$1g = Object.defineProperty;
 var __getOwnPropDesc$1g = Object.getOwnPropertyDescriptor;
@@ -404,7 +404,7 @@ OdxLinkComponent = __decorateClass$1g([
   customElement("odx-link", [styles$16])
 ], OdxLinkComponent);
 
-const styles$15 = "@layer base{:host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;padding-inline:var(--odx-size-50);transition:var(--odx-transition-reduced);transition-property:border-color,color}}@layer state{odx-link[aria-current=true]{font-weight:var(--odx-typography-font-weight-medium);--_color-foreground: var(--odx-color-foreground)}}@layer variant{:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset)}odx-link[aria-current=true]{border-radius:0;text-decoration:underline}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-selection-control-stroke);odx-link{border-inline-start:inherit;margin-inline-start:calc(-1 * var(--odx-border-width-thick))}odx-link[aria-current=true]{border-inline-start-color:var(--odx-color-highlight-rest)}}}";
+const styles$15 = "@layer base{:host{display:flex;gap:var(--odx-size-50)}odx-link{display:block;padding-inline:var(--odx-size-50);transition:var(--odx-transition-reduced);transition-property:border-color,color}}@layer state{odx-link[aria-current=true]{font-weight:var(--odx-typography-font-weight-medium);--_color-foreground: var(--odx-color-foreground-base)}}@layer variant{:host(:not([vertical])){align-items:center;block-size:var(--odx-size-225);odx-link{--_outline-offset: var(--odx-focus-ring-offset)}odx-link[aria-current=true]{border-radius:0;text-decoration:underline}}:host([vertical]){flex-direction:column;border-inline-start:var(--odx-border-width-thick) solid var(--odx-color-selection-control-stroke);odx-link{border-inline-start:inherit;margin-inline-start:calc(-1 * var(--odx-border-width-thick))}odx-link[aria-current=true]{border-inline-start-color:var(--odx-color-highlight-rest)}}}";
 
 const ANCHOR_SELECTOR = "odx-anchor";
 class AnchorObserver {
@@ -880,7 +880,7 @@ OdxButtonGroup = __decorateClass$18([
   customElement("odx-button-group", [styles$_])
 ], OdxButtonGroup);
 
-const styles$Z = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground);--_color-foreground-hover: var(--odx-color-foreground);--_color-foreground-pressed: var(--odx-color-foreground);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto;inset:0}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"])) .base:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) .base:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
+const styles$Z = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto;inset:0}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline)}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"])) .base:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"])) .base:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
 
 var __defProp$17 = Object.defineProperty;
 var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
@@ -954,7 +954,7 @@ __decorateClass$17([
   property({ type: Number, attribute: "line-clamp" })
 ], BaseButton.prototype, "lineClamp", 2);
 
-const styles$Y = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
+const styles$Y = "@layer base{.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
 
 var __defProp$16 = Object.defineProperty;
 var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
@@ -1113,7 +1113,7 @@ const CheckboxGroupVariant = {
   LIST: "list"
 };
 
-const styles$V = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
+const styles$V = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground-base)}";
 
 var __defProp$13 = Object.defineProperty;
 var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
@@ -1166,7 +1166,7 @@ OdxCheckboxComponent = __decorateClass$13([
   customElement("odx-checkbox", [styles$V])
 ], OdxCheckboxComponent);
 
-const styles$U = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
+const styles$U = ":host{--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-neutral-text);--_font-size: var(--odx-font-size-text-sm);--_block-size: var(--odx-size-150);--_border-radius: var(--_block-size);--_padding-inline: var(--odx-size-50);display:inline-flex;place-items:center;background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_padding-inline);gap:var(--odx-size-25);block-size:var(--_block-size);border-radius:var(--_border-radius);color:var(--_color-foreground);outline-offset:var(--odx-focus-ring-offset)}:host,.content,.action{transition:var(--odx-transition-reduced);transition-property:color background-color outline-color}:host,.action{outline:var(--odx-focus-ring-outline)}:host(:focus-visible),.action:focus-visible{outline-color:var(--odx-focus-ring-color)}.content{min-inline-size:var(--odx-size-150);user-select:none;text-align:center}.action,::slotted(odx-icon){font-size:var(--odx-font-size-text-md);block-size:var(--_block-size);inline-size:var(--_block-size);color:inherit;outline-offset:calc(-1 * var(--odx-focus-ring-offset))}.action{background-color:var(--_color-background);border:none;border-radius:var(--_border-radius);cursor:pointer;margin-inline-end:calc(-1 * var(--_padding-inline));padding:0}.action:hover{background-color:var(--_color-background-hover)}:host([variant=\"neutral\"]){--_color-background: var(--odx-color-neutral-rest);--_color-background-hover: var(--odx-color-neutral-hover);--_color-foreground: var(--odx-color-foreground-base)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-foreground: var(--odx-color-success-text)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-background-hover: var(--odx-color-warning-hover);--_color-foreground: var(--odx-color-warning-text)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-foreground: var(--odx-color-foreground-light)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);.action{pointer-events:none}}:host([interactive]:not([interactive=\"false\"])){cursor:pointer}:host([interactive]:not([interactive=\"false\"]):hover){--_color-background: var(--_color-background-hover)}:host([aria-disabled=\"true\"][interactive]:not([interactive=\"false\"])){--_color-background: var(--odx-color-disabled-fill);cursor:not-allowed}";
 
 var __defProp$12 = Object.defineProperty;
 var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
@@ -2016,7 +2016,7 @@ OdxIconButton = __decorateClass$P([
   customElement("odx-icon-button")
 ], OdxIconButton);
 
-const styles$K = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
+const styles$K = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
 
 var __defProp$O = Object.defineProperty;
 var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
@@ -2819,7 +2819,7 @@ OdxMenu = __decorateClass$z([
   customElement("odx-menu", [styles$y])
 ], OdxMenu);
 
-const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150-responsive);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{background:transparent;border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);color:var(--odx-color-foreground);margin-block-start:var(--margin-block-start);overflow:unset;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;&::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));background-color:var(--odx-color-backdrop);transition-property:opacity}}.inner{display:flex;flex-direction:column;background-color:var(--odx-color-background-main);border-radius:inherit;padding:var(--odx-breakpoint-spacing-50) var(--odx-breakpoint-spacing-150-responsive);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-breakpoint-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150-responsive)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{&,&::backdrop{opacity:1;@starting-style{opacity:0}}transform:translate(0);@starting-style{transform:translateY(var(--odx-size-100))}}}";
+const styles$x = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150-responsive);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{background:transparent;border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);color:var(--odx-color-foreground-base);margin-block-start:var(--margin-block-start);overflow:unset;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;&::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));background-color:var(--odx-color-backdrop);transition-property:opacity}}.inner{display:flex;flex-direction:column;background-color:var(--odx-color-background-main);border-radius:inherit;padding:var(--odx-breakpoint-spacing-50) var(--odx-breakpoint-spacing-150-responsive);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.header{padding-inline-end:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{position:absolute;inset-block-start:var(--odx-breakpoint-spacing-50);inset-inline-end:var(--odx-breakpoint-spacing-150-responsive)}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-focus-ring-color)}.base[open]{&,&::backdrop{opacity:1;@starting-style{opacity:0}}transform:translate(0);@starting-style{transform:translateY(var(--odx-size-100))}}}";
 
 var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
@@ -3295,7 +3295,7 @@ const ProgressState = {
   ERROR: "error"
 };
 
-const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-light) inset}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-disabled-foreground-selected) inset}}}";
+const styles$q = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-stroke-width: var(--odx-border-width-thin);--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);padding:var(--_indicator-space)}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-circle);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);border-width:var(--_indicator-stroke-width);transition-property:background-color,border-color,outline-color,border-width,box-shadow;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}}@layer state{:host(:empty) .content{display:none}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:hover){--_indicator-color-background: var(--odx-color-selection-control-fill-hover);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-focus-ring-color)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-foreground: var(--odx-color-selection-control-foreground-readonly);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-color-disabled-foreground);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-stroke-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-25)}:host([aria-checked=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_indicator-color-stroke: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-checked=\"true\"][aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-foreground-light) inset}}:host([aria-checked=\"true\"][aria-disabled=\"true\"]){--_indicator-color-stroke: var(--odx-color-disabled-fill-selected);--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-stroke-width: var(--odx-size-px);.indicator{box-shadow:0 0 0 var(--odx-size-37) var(--odx-color-disabled-foreground-selected) inset}}}";
 
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
@@ -3544,7 +3544,7 @@ OdxSearchBarComponent = __decorateClass$o([
   customElement("odx-search-bar", [styles$n])
 ], OdxSearchBarComponent);
 
-const styles$m = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
+const styles$m = ":host{display:block;--_color-background: var(--odx-color-input-control-fill);--_color-foreground: var(--odx-color-foreground-base);--_color-stroke: var(--odx-color-input-control-stroke);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);border-radius:var(--odx-border-radius-controls);color:var(--_color-foreground);max-inline-size:320px}.base{display:flex;cursor:pointer;text-align:start;padding:var(--_padding-block) var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);min-width:200px;min-block-size:var(--odx-size-225);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;gap:var(--odx-padding-inline);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);user-select:none;overflow:hidden;&:focus-visible{outline-color:var(--odx-color-outline-focus)}}.value{display:flex;gap:var(--_padding-block)}.indicator{font-size:var(--odx-size-150);margin-left:auto}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}:host(:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}slot[name=placeholder]{color:var(--odx-color-foreground-muted)}";
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -4108,7 +4108,7 @@ OdxSpacerComponent = __decorateClass$h([
   customElement("odx-spacer", [styles$g])
 ], OdxSpacerComponent);
 
-const styles$f = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
+const styles$f = ":host{--_color-background: var(--odx-color-input-control-fill);--_color-stroke: var(--odx-color-input-control-stroke);--_color-foreground: var(--odx-color-foreground-base);display:grid;width:min-content;grid-template-columns:auto 1fr auto;grid-template-areas:\"decrement input increment\"}[part~=action],::slotted(input){border:var(--odx-border-width-thin) solid var(--_color-stroke);background-color:var(--_color-background);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);block-size:var(--odx-size-225);color:var(--_color-foreground);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,outline-color}::slotted(input){grid-area:input;min-width:auto;padding:0 var(--odx-size-75)!important;text-align:center;min-inline-size:var(--odx-size-400);appearance:textfield;font-weight:var(--odx-typography-font-weight-medium)!important}[part~=action]{display:flex;place-content:center;place-items:center;inline-size:var(--odx-size-225);cursor:pointer;border-radius:var(--odx-border-radius-controls);font-size:var(--odx-typography-font-size-3)}[part~=action-increment]{grid-area:increment;border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}[part~=action-decrement]{grid-area:decrement;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}[part~=action]:hover,::slotted(input:hover){--_color-background: var(--odx-color-input-control-fill-hover)}::slotted(input:hover){--_color-stroke: var(--odx-color-input-control-stroke-hover)}[part~=action]:focus-visible,::slotted(input:focus-visible){outline-color:var(--odx-focus-ring-color);z-index:1}:host([aria-disabled=\"true\"]) ::slotted(input),[part~=action]:disabled{--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([compact]:not([compact=\"false\"])){grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:\"input increment\" \"input decrement\";[part~=action]{block-size:calc(var(--odx-size-225) / 2);font-size:var(--odx-typography-font-size-1);border-inline-end:var(--odx-border-width-thin) solid var(--odx-color-input-control-stroke);border-inline-start:none;border-radius:var(--odx-border-radius-controls)}[part~=action-increment]{border-block-end:none;border-start-start-radius:0;border-end-start-radius:0;border-end-end-radius:0}[part~=action-decrement]{border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:0}::slotted(input){border-start-start-radius:var(--odx-border-radius-controls);border-end-start-radius:var(--odx-border-radius-controls)}}";
 
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
@@ -4261,7 +4261,7 @@ const StackJustify = {
   SPACE_EVENLY: "space-evenly"
 };
 
-const styles$d = "*{box-sizing:border-box}:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-track-color-background: var(--odx-color-selection-control-fill);--_label-color-foreground: var(--odx-color-foreground);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);transition-property:background-color,border-color,outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}.indicator:before,.indicator:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit;border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke)}.indicator:before{background-color:var(--_indicator-track-color-background);block-size:var(--odx-size-37);inline-size:var(--odx-size-225)}.indicator:after{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;background-color:var(--_indicator-color-background);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,transform;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}.label{display:inline-block;cursor:inherit}.content{margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);--_indicator-track-color-background: var(--odx-color-selection-control-fill-selected);.indicator:after{transform:translate(var(--odx-size-225)) translate(-100%)}}:host([aria-checked=\"true\"]:not([aria-disabled]):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_indicator-track-color-background: var(--odx-color-disabled-fill);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-stroke: var(--_indicator-color-background);--_indicator-track-color-background: var(--odx-color-disabled-fill-selected)}";
+const styles$d = "*{box-sizing:border-box}:host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-track-color-background: var(--odx-color-selection-control-fill);--_label-color-foreground: var(--odx-color-foreground-base);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);transition-property:background-color,border-color,outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-items:center;block-size:var(--odx-size-150);position:relative}.indicator:before,.indicator:after{content:\"\";display:block;border-radius:var(--odx-size-225);box-sizing:border-box;transition:inherit;border-radius:var(--odx-border-radius-circle);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke)}.indicator:before{background-color:var(--_indicator-track-color-background);block-size:var(--odx-size-37);inline-size:var(--odx-size-225)}.indicator:after{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;background-color:var(--_indicator-color-background);color:var(--_indicator-color-foreground);transition-property:background-color,border-color,transform;position:absolute;inset-inline-start:0;box-shadow:var(--odx-shadow-level-0)}.label{display:inline-block;cursor:inherit}.content{margin-inline-start:var(--odx-size-75);padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground);transition-property:color}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected);--_indicator-track-color-background: var(--odx-color-selection-control-fill-selected);.indicator:after{transform:translate(var(--odx-size-225)) translate(-100%)}}:host([aria-checked=\"true\"]:not([aria-disabled]):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-stroke: var(--odx-color-disabled-stroke);--_indicator-track-color-background: var(--odx-color-disabled-fill);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"][aria-checked=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-stroke: var(--_indicator-color-background);--_indicator-track-color-background: var(--odx-color-disabled-fill-selected)}";
 
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
@@ -4761,7 +4761,7 @@ const ToastVariant = {
   DANGER: "danger"
 };
 
-const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
+const styles$3 = ":host{--_border-radius: var(--odx-border-radius-sm);--_color-background: transparent;--_color-stroke: var(--odx-color-selection-control-stroke);--_color-foreground: var(--odx-color-foreground-base);--_size: var(--odx-size-225);--_padding-inline: var(--odx-size-75);display:inline-flex;cursor:pointer;user-select:none;position:relative;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);padding-inline:var(--_padding-inline);margin:var(--odx-size-37);transition:var(--odx-transition-default);transition-property:color,background-color,border-color,outline-color;background-color:var(--_color-background);outline-color:var(--_color-stroke);block-size:var(--_size);place-items:center;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}:host::part(label){display:inline-block}:host(:empty)::part(content){display:none}:host(:hover){--_color-background: var(--odx-color-selection-control-fill-hover);--_color-stroke: var(--odx-color-selection-control-stroke-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host([aria-pressed=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-selected);--_color-foreground: var(--odx-color-foreground-light);--_color-stroke: var(--odx-color-selection-control-stroke-selected)}:host([aria-pressed=\"true\"]:not(:is([aria-readonly],[aria-disabled])):hover){--_color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([aria-readonly=\"true\"]){--_color-background: var(--odx-color-selection-control-fill-readonly);--_color-foreground: var(--odx-color-selection-control-foreground-readonly);--_color-stroke: var(--odx-color-selection-control-stroke-readonly);cursor:default}:host([aria-pressed=\"true\"][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected)}:host(:not(:last-child)):host-context(odx-button-group[connected]){margin-inline-end:calc(-1 * var(--odx-size-12))!important}";
 
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*),:before,:after{box-sizing:border-box}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@layer base{:root{--odx-border-radius-circle: 9999px;--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-border-radius-md: 5px;--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-none: 0;--odx-border-radius-sm: 3px;--odx-border-width-none: 0;--odx-border-width-thick: 2px;--odx-border-width-thickest: var(--odx-size-25);--odx-border-width-thin: var(--odx-size-px);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0;--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-foreground: var(--odx-palette-blue-80);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-overlay: var(--odx-palette-white-60);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-transparent: color(srgb 0 0 0 / 0);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-elevation-blur: var(--odx-size-12);--odx-experience-color-secondary-foreground: var(--odx-color-foreground);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-focus-ring-color: var(--odx-color-focus-outer);--odx-focus-ring-offset: var(--odx-size-12);--odx-focus-ring-outline: var(--odx-border-width-thick) solid color(srgb 0 0 0 / 0);--odx-motion-duration-default: 275ms;--odx-motion-duration-fast: .15s;--odx-motion-duration-slow: 375ms;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-palette-black: hsl(220 50% 5%);--odx-palette-black-60: hsl(220 50% 5% / .6);--odx-palette-blue-00: hsl(219 70% 96%);--odx-palette-blue-10: hsl(216 65% 90%);--odx-palette-blue-20: hsl(217 71% 80%);--odx-palette-blue-30: hsl(217 75% 70%);--odx-palette-blue-40: hsl(217 80% 60%);--odx-palette-blue-50: hsl(217 75% 48%);--odx-palette-blue-60: hsl(217 90% 40%);--odx-palette-blue-70: hsl(217 95% 30%);--odx-palette-blue-80: hsl(217 100% 20%);--odx-palette-blue-80-5: hsl(217 100% 20% / .05);--odx-palette-blue-80-15: hsl(217 100% 20% / .1);--odx-palette-blue-80-60: hsl(217 100% 20% / .6);--odx-palette-blue-90: hsl(216 100% 10%);--odx-palette-blue-100: hsl(216 100% 1%);--odx-palette-blue-100-30: hsl(216 100% 1% / .3);--odx-palette-coolgray-00: hsl(210 20% 98%);--odx-palette-coolgray-10: hsl(216 20% 95%);--odx-palette-coolgray-20: hsl(213 18% 90%);--odx-palette-coolgray-30: hsl(212 15% 83%);--odx-palette-coolgray-40: hsl(213 15% 76%);--odx-palette-coolgray-50: hsl(210 14.000000000000002% 69%);--odx-palette-coolgray-60: hsl(208 13% 62%);--odx-palette-coolgray-70: hsl(207 12% 55.00000000000001%);--odx-palette-coolgray-80: hsl(208 11% 47%);--odx-palette-coolgray-90: hsl(205 10% 39%);--odx-palette-coolgray-100: hsl(205 16% 31%);--odx-palette-coolgray-110: hsl(210 17% 27%);--odx-palette-coolgray-120: hsl(207 19% 23%);--odx-palette-coolgray-130: hsl(210 20% 20%);--odx-palette-coolgray-140: hsl(210 20% 16%);--odx-palette-coolgray-150: hsl(207 20% 9%);--odx-palette-cyan-00: hsl(200 90% 96%);--odx-palette-cyan-10: hsl(200 100% 92%);--odx-palette-cyan-10-5: hsl(200 100% 92% / .05);--odx-palette-cyan-10-15: hsl(200 100% 92% / .15);--odx-palette-cyan-20: hsl(201 100% 84%);--odx-palette-cyan-30: hsl(201 100% 74%);--odx-palette-cyan-40: hsl(201 100% 65%);--odx-palette-cyan-50: hsl(201 100% 55.00000000000001%);--odx-palette-cyan-60: hsl(205 100% 48%);--odx-palette-cyan-60-15: hsl(205 100% 48% / .15);--odx-palette-cyan-60-20: hsl(205 100% 48% / .2);--odx-palette-cyan-60-25: hsl(205 100% 48% / .25);--odx-palette-cyan-70: hsl(205 100% 40%);--odx-palette-cyan-80: hsl(205 100% 34%);--odx-palette-cyan-90: hsl(205 100% 27%);--odx-palette-cyan-100: hsl(205 100% 20%);--odx-palette-green-00: hsl(138 100% 91%);--odx-palette-green-10: hsl(133 100% 86%);--odx-palette-green-20: hsl(133 100% 79%);--odx-palette-green-30: hsl(133 100% 71%);--odx-palette-green-40: hsl(133 100% 61%);--odx-palette-green-50: hsl(133 91% 50%);--odx-palette-green-60: hsl(133 100% 43%);--odx-palette-green-70: hsl(133 100% 39%);--odx-palette-green-80: hsl(133 100% 33%);--odx-palette-green-90: hsl(133 100% 26%);--odx-palette-green-100: hsl(133 100% 20%);--odx-palette-orange-00: hsl(30 100% 96%);--odx-palette-orange-10: hsl(31 100% 92%);--odx-palette-orange-20: hsl(30 100% 83%);--odx-palette-orange-30: hsl(30 100% 74%);--odx-palette-orange-40: hsl(30 100% 65%);--odx-palette-orange-50: hsl(30 100% 56.00000000000001%);--odx-palette-orange-60: hsl(30 100% 48%);--odx-palette-orange-70: hsl(30 100% 40%);--odx-palette-orange-80: hsl(30 100% 32%);--odx-palette-orange-90: hsl(30 100% 24%);--odx-palette-orange-100: hsl(30 100% 16%);--odx-palette-red-00: hsl(354 100% 96%);--odx-palette-red-10: hsl(0 100% 92%);--odx-palette-red-20: hsl(0 100% 84%);--odx-palette-red-30: hsl(0 100% 74%);--odx-palette-red-40: hsl(0 100% 68%);--odx-palette-red-50: hsl(0 100% 60%);--odx-palette-red-60: hsl(0 100% 46%);--odx-palette-red-70: hsl(0 98% 43%);--odx-palette-red-80: hsl(0 100% 37%);--odx-palette-red-90: hsl(0 100% 30%);--odx-palette-red-100: hsl(0 100% 22%);--odx-palette-sandgray-00: hsl(90 20% 98%);--odx-palette-sandgray-10: hsl(90 18% 96%);--odx-palette-sandgray-20: hsl(90 15% 92%);--odx-palette-sandgray-30: hsl(86 10% 87%);--odx-palette-sandgray-40: hsl(80 7.000000000000001% 84%);--odx-palette-sandgray-50: hsl(82 7.000000000000001% 78%);--odx-palette-sandgray-60: hsl(78 7.000000000000001% 73%);--odx-palette-sandgray-70: hsl(80 7.000000000000001% 67%);--odx-palette-sandgray-80: hsl(80 8% 61%);--odx-palette-sandgray-90: hsl(80 7.000000000000001% 51%);--odx-palette-sandgray-100: hsl(78 6% 41%);--odx-palette-sandgray-110: hsl(80 7.000000000000001% 36%);--odx-palette-sandgray-120: hsl(78 6% 31%);--odx-palette-sandgray-130: hsl(75 6% 26%);--odx-palette-sandgray-140: hsl(77 6% 23%);--odx-palette-sandgray-150: hsl(72 6% 16%);--odx-palette-transparent: hsl(0 0% 100% / 0);--odx-palette-warmgray-00: hsl(0 9% 98%);--odx-palette-warmgray-10: hsl(0 9% 96%);--odx-palette-warmgray-20: hsl(0 10% 90%);--odx-palette-warmgray-30: hsl(0 7.000000000000001% 85%);--odx-palette-warmgray-40: hsl(0 7.000000000000001% 78%);--odx-palette-warmgray-50: hsl(0 3% 70%);--odx-palette-warmgray-60: hsl(0 3% 63%);--odx-palette-warmgray-70: hsl(0 2% 56.00000000000001%);--odx-palette-warmgray-80: hsl(0 2% 48%);--odx-palette-warmgray-90: hsl(0 2% 40%);--odx-palette-warmgray-100: hsl(0 2% 31%);--odx-palette-warmgray-120: hsl(0 2% 26%);--odx-palette-warmgray-130: hsl(0 2% 22%);--odx-palette-warmgray-140: hsl(0 2% 20%);--odx-palette-warmgray-150: hsl(0 2% 16%);--odx-palette-white: hsl(0 0% 100%);--odx-palette-white-05: hsl(0 0% 100% / .05);--odx-palette-white-60: hsl(0 0% 100% / .6);--odx-palette-yellow-00: hsl(53 100% 92%);--odx-palette-yellow-10: hsl(53 100% 86%);--odx-palette-yellow-20: hsl(53 100% 81%);--odx-palette-yellow-30: hsl(52 100% 75%);--odx-palette-yellow-40: hsl(53 100% 64%);--odx-palette-yellow-50: hsl(53 100% 50%);--odx-palette-yellow-60: hsl(53 100% 45%);--odx-palette-yellow-70: hsl(53 100% 37%);--odx-palette-yellow-80: hsl(53 100% 30%);--odx-palette-yellow-90: hsl(53 100% 24%);--odx-palette-yellow-100: hsl(53 100% 18%);--odx-shadow-level-0: 0 1px 2px 0 color(srgb 0 0 0 / .2);--odx-shadow-level-1: 0 2px 6px 0 color(srgb 0 0 0 / .2);--odx-shadow-level-2: 0 4px 12px 0 color(srgb 0 0 0 / .2);--odx-size-12: 2px;--odx-size-25: 4px;--odx-size-37: 6px;--odx-size-50: 8px;--odx-size-75: 12px;--odx-size-100: 16px;--odx-size-125: 20px;--odx-size-150: 24px;--odx-size-175: 28px;--odx-size-200: 32px;--odx-size-225: 36px;--odx-size-250: 40px;--odx-size-300: 48px;--odx-size-350: 56px;--odx-size-400: 64px;--odx-size-450: 72px;--odx-size-500: 80px;--odx-size-600: 96px;--odx-size-700: 112px;--odx-size-800: 128px;--odx-size-900: 144px;--odx-size-1000: 160px;--odx-size-base: 16px;--odx-size-px: 1px;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-size-1: 12px;--odx-typography-font-size-2: 14px;--odx-typography-font-size-3: 16px;--odx-typography-font-size-4: 18px;--odx-typography-font-size-5: 20px;--odx-typography-font-size-6: 24px;--odx-typography-font-size-7: 30px;--odx-typography-font-size-8: 40px;--odx-typography-font-size-9: 48px;--odx-typography-font-size-10: 54px;--odx-typography-font-size-11: 68px;--odx-typography-font-size-12: 76px;--odx-typography-font-size-13: 94px;--odx-typography-font-size-base: 16px;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-semibold: 600;--odx-typography-line-height-1: 14px;--odx-typography-line-height-2: 19px;--odx-typography-line-height-3: 22px;--odx-typography-line-height-4: 24px;--odx-typography-line-height-5: 26px;--odx-typography-line-height-6: 31px;--odx-typography-line-height-7: 39px;--odx-typography-line-height-8: 49px;--odx-typography-line-height-9: 59px;--odx-typography-line-height-10: 64px;--odx-typography-line-height-11: 80px;--odx-typography-line-height-12: 89px;--odx-typography-line-height-13: 110px;--odx-typography-line-height-base: 24px;--odx-typography-weight-fontWeightMedium: Medium;--odx-typography-weight-fontWeightNormal: Regular;--odx-typography-weight-fontWeightSemibold: Semibold}@media (min-width: 479px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 0;--odx-breakpoint-visibility-sm-down-show: 1;--odx-breakpoint-visibility-sm-show: 1;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 768px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 0;--odx-breakpoint-visibility-md-down-show: 1;--odx-breakpoint-visibility-md-show: 1;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 990px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-xl: var(--odx-typography-font-size-12);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-150);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-200);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-250);--odx-breakpoint-visibility-lg-down-hide: 0;--odx-breakpoint-visibility-lg-down-show: 1;--odx-breakpoint-visibility-lg-show: 1;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 0}}@media (min-width: 1280px){:root{--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-12);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-13);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-12);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-13);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-150-responsive: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-200-responsive: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-250-responsive: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-300-responsive: var(--odx-size-300);--odx-breakpoint-visibility-lg-down-hide: 1;--odx-breakpoint-visibility-lg-down-show: 0;--odx-breakpoint-visibility-lg-show: 0;--odx-breakpoint-visibility-md-down-hide: 1;--odx-breakpoint-visibility-md-down-show: 0;--odx-breakpoint-visibility-md-show: 0;--odx-breakpoint-visibility-sm-down-hide: 1;--odx-breakpoint-visibility-sm-down-show: 0;--odx-breakpoint-visibility-sm-show: 0;--odx-breakpoint-visibility-xl-show: 1}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-primary-rest) var(--odx-palette-transparent);scrollbar-width:thin}html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0;max-block-size:100dvh}}
+@layer reset,base,variant,state,theme;@layer reset{:is(*),:before,:after{box-sizing:border-box}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@layer base{:root{--odx-palette-blue-10: #d5e2f6;--odx-palette-blue-20: #a8c4f0;--odx-palette-blue-30: #79a5ec;--odx-palette-blue-40: #4786eb;--odx-palette-blue-50: #1f65d6;--odx-palette-blue-60: #0a51c2;--odx-palette-blue-70: #043c95;--odx-palette-blue-80: #002766;--odx-palette-blue-90: #001433;--odx-palette-blue-100: #000205;--odx-palette-blue-00: #eef3fc;--odx-palette-blue-80-60: rgba(0, 39, 102, .6);--odx-palette-blue-80-15: rgba(0, 39, 102, .1);--odx-palette-blue-100-30: rgba(0, 2, 5, .3);--odx-palette-blue-80-5: rgba(0, 39, 102, .05);--odx-palette-cyan-10: #d6f1ff;--odx-palette-cyan-20: #ade2ff;--odx-palette-cyan-30: #7ad1ff;--odx-palette-cyan-40: #4dc1ff;--odx-palette-cyan-50: #1aafff;--odx-palette-cyan-60: #008ff5;--odx-palette-cyan-70: #0077cc;--odx-palette-cyan-80: #0065ad;--odx-palette-cyan-90: #00508a;--odx-palette-cyan-100: #003c66;--odx-palette-cyan-00: #ecf8fe;--odx-palette-cyan-10-5: rgba(214, 241, 255, .05);--odx-palette-cyan-10-15: rgba(214, 241, 255, .15);--odx-palette-cyan-60-15: rgba(0, 143, 245, .15);--odx-palette-cyan-60-20: rgba(0, 143, 245, .2);--odx-palette-cyan-60-25: rgba(0, 143, 245, .25);--odx-palette-coolgray-10: #f0f2f5;--odx-palette-coolgray-20: #e1e5ea;--odx-palette-coolgray-30: #cdd3da;--odx-palette-coolgray-40: #b9c1cb;--odx-palette-coolgray-50: #a5b0bb;--odx-palette-coolgray-60: #929fab;--odx-palette-coolgray-70: #7e8e9a;--odx-palette-coolgray-80: #6b7985;--odx-palette-coolgray-90: #5a656d;--odx-palette-coolgray-100: #42515c;--odx-palette-coolgray-110: #394551;--odx-palette-coolgray-120: #303c46;--odx-palette-coolgray-130: #29333d;--odx-palette-coolgray-140: #212931;--odx-palette-coolgray-150: #12171c;--odx-palette-coolgray-00: #f9fafb;--odx-palette-red-10: #ffd6d6;--odx-palette-red-20: #ffadad;--odx-palette-red-30: #ff7a7a;--odx-palette-red-40: #ff5c5c;--odx-palette-red-50: #ff3333;--odx-palette-red-60: #eb0000;--odx-palette-red-70: #d90202;--odx-palette-red-80: #bd0000;--odx-palette-red-90: #990000;--odx-palette-red-100: #700000;--odx-palette-red-00: #ffebed;--odx-palette-green-10: #b8ffc7;--odx-palette-green-20: #94ffab;--odx-palette-green-30: #6bff8b;--odx-palette-green-40: #38ff63;--odx-palette-green-50: #0bf43e;--odx-palette-green-60: #00db30;--odx-palette-green-70: #00c72b;--odx-palette-green-80: #00a824;--odx-palette-green-90: #00851d;--odx-palette-green-100: #006616;--odx-palette-green-00: #d1ffdf;--odx-palette-yellow-10: #fff7b8;--odx-palette-yellow-20: #fff49e;--odx-palette-yellow-30: #ffee80;--odx-palette-yellow-40: #ffea47;--odx-palette-yellow-50: #ffe100;--odx-palette-yellow-60: #e6cb00;--odx-palette-yellow-70: #bda700;--odx-palette-yellow-80: #998700;--odx-palette-yellow-90: #7a6c00;--odx-palette-yellow-100: #5c5100;--odx-palette-yellow-00: #fffad6;--odx-palette-orange-10: #ffebd6;--odx-palette-orange-20: #ffd4a8;--odx-palette-orange-30: #ffbd7a;--odx-palette-orange-40: #ffa64d;--odx-palette-orange-50: #ff8f1f;--odx-palette-orange-60: #f57a00;--odx-palette-orange-70: #cc6600;--odx-palette-orange-80: #a35200;--odx-palette-orange-90: #7a3d00;--odx-palette-orange-100: #522900;--odx-palette-orange-00: #fff5eb;--odx-palette-white: #ffffff;--odx-palette-black: #060b13;--odx-palette-warmgray-10: #f6f4f4;--odx-palette-warmgray-20: #e8e3e3;--odx-palette-warmgray-30: #dbd6d6;--odx-palette-warmgray-40: #cbc3c3;--odx-palette-warmgray-50: #b5b0b0;--odx-palette-warmgray-60: #a39e9e;--odx-palette-warmgray-70: #918d8d;--odx-palette-warmgray-80: #7d7878;--odx-palette-warmgray-90: #686464;--odx-palette-warmgray-100: #514d4d;--odx-palette-warmgray-120: #444141;--odx-palette-warmgray-130: #393737;--odx-palette-warmgray-140: #343232;--odx-palette-warmgray-150: #2a2828;--odx-palette-warmgray-00: #faf9f9;--odx-palette-sandgray-10: #f5f7f3;--odx-palette-sandgray-20: #ebeee8;--odx-palette-sandgray-30: #dee1db;--odx-palette-sandgray-40: #d7d9d3;--odx-palette-sandgray-50: #c8cbc3;--odx-palette-sandgray-60: #bcbfb5;--odx-palette-sandgray-70: #adb1a5;--odx-palette-sandgray-80: #9ea494;--odx-palette-sandgray-90: #858b79;--odx-palette-sandgray-100: #6b6f62;--odx-palette-sandgray-110: #5e6255;--odx-palette-sandgray-120: #51544a;--odx-palette-sandgray-130: #44463e;--odx-palette-sandgray-140: #3c3e37;--odx-palette-sandgray-150: #2a2b26;--odx-palette-sandgray-00: #fafbf9;--odx-palette-transparent: rgba(255, 255, 255, 0);--odx-palette-white-60: rgba(255, 255, 255, .6);--odx-palette-black-60: rgba(6, 11, 19, .6);--odx-palette-white-05: rgba(255, 255, 255, .05);--odx-typography-font-size-1: .75rem;--odx-typography-font-size-2: .875rem;--odx-typography-font-size-3: 1rem;--odx-typography-font-size-4: 1.125rem;--odx-typography-font-size-5: 1.25rem;--odx-typography-font-size-6: 1.5rem;--odx-typography-font-size-7: 1.875rem;--odx-typography-font-size-8: 2.5rem;--odx-typography-font-size-9: 3rem;--odx-typography-font-size-10: 3.375rem;--odx-typography-font-size-11: 4.25rem;--odx-typography-font-size-12: 4.75rem;--odx-typography-font-size-13: 5.875rem;--odx-typography-font-size-base: 1rem;--odx-typography-weight-font-weight-normal: Regular;--odx-typography-weight-font-weight-medium: Medium;--odx-typography-weight-font-weight-semibold: Semibold;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-line-height-1: .875rem;--odx-typography-line-height-2: 1.1875rem;--odx-typography-line-height-3: 1.375rem;--odx-typography-line-height-4: 1.5rem;--odx-typography-line-height-5: 1.625rem;--odx-typography-line-height-6: 1.9375rem;--odx-typography-line-height-7: 2.4375rem;--odx-typography-line-height-8: 3.0625rem;--odx-typography-line-height-9: 3.6875rem;--odx-typography-line-height-10: 4rem;--odx-typography-line-height-11: 5rem;--odx-typography-line-height-12: 5.5625rem;--odx-typography-line-height-13: 6.875rem;--odx-typography-line-height-base: 1.5rem;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-semibold: 600;--odx-size-12: .125rem;--odx-size-25: .25rem;--odx-size-37: .375rem;--odx-size-50: .5rem;--odx-size-75: .75rem;--odx-size-100: 1rem;--odx-size-125: 1.25rem;--odx-size-150: 1.5rem;--odx-size-175: 1.75rem;--odx-size-200: 2rem;--odx-size-225: 2.25rem;--odx-size-250: 2.5rem;--odx-size-300: 3rem;--odx-size-350: 3.5rem;--odx-size-400: 4rem;--odx-size-450: 4.5rem;--odx-size-500: 5rem;--odx-size-600: 6rem;--odx-size-700: 7rem;--odx-size-800: 8rem;--odx-size-900: 9rem;--odx-size-1000: 10rem;--odx-size-px: .0625rem;--odx-size-base: 1rem;--odx-color-transparent: rgba(0, 0, 0, 0);--odx-breakpoint-visibility-sm-down-show: true;--odx-breakpoint-visibility-md-down-show: true;--odx-breakpoint-visibility-lg-down-show: true;--odx-breakpoint-visibility-sm-down-hide: false;--odx-breakpoint-visibility-md-down-hide: false;--odx-breakpoint-visibility-lg-down-hide: false;--odx-breakpoint-visibility-sm-show: true;--odx-breakpoint-visibility-md-show: false;--odx-breakpoint-visibility-lg-show: false;--odx-breakpoint-visibility-xl-show: false;--odx-motion-duration-default: 275ms;--odx-motion-duration-slow: 375ms;--odx-motion-duration-fast: .15s;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-border-width-none: 0;--odx-border-width-thick: .125rem;--odx-border-radius-none: 0;--odx-border-radius-sm: .1875rem;--odx-border-radius-md: .3125rem;--odx-border-radius-circle: 624.9375rem;--odx-focus-ring-outline-color: rgba(0, 0, 0, 0);--odx-focus-ring-outline-style: solid;--odx-shadow-level-0-offset-x: 0;--odx-shadow-level-0-offset-y: .0625rem;--odx-shadow-level-0-blur: .125rem;--odx-shadow-level-0-color: rgba(0, 0, 0, .2);--odx-shadow-level-1-offset-x: 0;--odx-shadow-level-1-offset-y: .125rem;--odx-shadow-level-1-blur: .375rem;--odx-shadow-level-1-color: rgba(0, 0, 0, .2);--odx-shadow-level-2-offset-x: 0;--odx-shadow-level-2-offset-y: .25rem;--odx-shadow-level-2-blur: .75rem;--odx-shadow-level-2-color: rgba(0, 0, 0, .2);--odx-color-foreground-base: var(--odx-palette-blue-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-overlay: var(--odx-palette-white-60);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-border-width-thin: var(--odx-size-px);--odx-border-width-thickest: var(--odx-size-25);--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-focus-ring-outline-width: var(--odx-border-width-thick);--odx-focus-ring-offset: var(--odx-size-12);--odx-elevation-blur: var(--odx-size-12);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground-base);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-foreground: var(--odx-color-foreground-base);--odx-focus-ring-color: var(--odx-color-focus-outer)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height);color:inherit}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-primary-rest) var(--odx-palette-transparent);scrollbar-width:thin}html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground-base);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0;max-block-size:100dvh}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.33",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@lit-labs/preact-signals": "~1.0.3",
     "@lit/context": "~1.1.4",
-    "@odx/design-tokens": "^1.0.0-alpha.1",
+    "@odx/design-tokens": "^1.0.0-alpha.3",
     "lit": "~3.2.1"
   },
   "devDependencies": {
@@ -50,8 +50,7 @@
       "import": "./dist/i18n.js",
       "types": "./dist/i18n/main.d.ts"
     },
-    "./styles": "./dist/styles.css",
-    "./fonts": "./dist/assets/fonts.css"
+    "./styles": "./dist/styles.css"
   },
   "publishConfig": {
     "access": "public",

package/dist/assets/fonts.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./draeger-pangea-text-regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./draeger-pangea-text-medium.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./draeger-pangea-text-semibold.woff2") format("woff2");
-}

package/public/assets/fonts.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./draeger-pangea-text-regular.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./draeger-pangea-text-medium.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Draeger Pangea Text";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./draeger-pangea-text-semibold.woff2") format("woff2");
-}