@odx/foundation 1.0.0-beta.185 → 1.0.0-beta.186

package/dist/components.js

@@ -522,8 +522,8 @@ class OdxActionGroup extends CustomElement {
       const prefixIcon = "icon" in item ? item.icon : item.querySelector("odx-icon")?.name;
       const suffixIcon = item.querySelector('odx-icon[slot="suffix"]')?.name;
       const variant = item.variant === MenuItemVariant.DANGER || item.variant === "danger-subtle" ? MenuItemVariant.DANGER : null;
-      const itemLabel = item.textContent || item.ariaLabel || item.getAttribute("label");
-      return html`<odx-menu-item icon="${optionalAttr(prefixIcon)}" variant="${optionalAttr(variant)}" ?disabled="${item.disabled}" @click="${() => !item.disabled && item.click()}">${itemLabel} ${when(suffixIcon, (icon) => html`<odx-icon name="${icon}" slot="suffix"></odx-icon>`)}</odx-menu-item>`;
+      const itemLabel = item.getAttribute("label") || item.textContent || item.ariaLabel;
+      return html`<odx-menu-item icon="${optionalAttr(prefixIcon)}" size="${item.size}" variant="${optionalAttr(variant)}" ?disabled="${item.disabled}" @click="${() => !item.disabled && item.click()}">${itemLabel} ${when(suffixIcon, (icon) => html`<odx-icon name="${icon}" slot="suffix"></odx-icon>`)}</odx-menu-item>`;
     })}</odx-menu>`;
   }
   updated(props) {
@@ -731,7 +731,7 @@ __decorateClass([
 ], _OdxTabBar.prototype, "vertical", 2);
 let OdxTabBar = _OdxTabBar;
 
-const styles$1b = ":host{display:flex;gap:var(--odx-spacing-sm)}odx-tab-bar{width:100%}:host([vertical]){odx-tab-bar{min-inline-size:15ch}}";
+const styles$1b = ":host{display:flex}odx-tab-bar{width:100%}:host([vertical]){odx-tab-bar{min-inline-size:15ch}}";
 
 const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
   constructor() {
@@ -1019,7 +1019,7 @@ __decorateClass([
 ], _OdxLink.prototype, "subtle", 2);
 let OdxLink = _OdxLink;
 
-const styles$14 = ":host{display:flex;flex-wrap:wrap;place-items:center;padding-block:var(--odx-spacing-sm);min-block-size:var(--odx-size-150)}::slotted(odx-link){display:inline-flex;gap:var(--odx-spacing-sm);align-items:center;padding-inline:var(--odx-spacing-control-x-sm)}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted(odx-link[hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:var(--odx-spacing-negative-25);color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
+const styles$14 = ":host{display:flex;flex-wrap:wrap;place-items:center;min-block-size:var(--odx-size-300)}::slotted(odx-link){display:inline-flex;gap:var(--odx-spacing-sm);align-items:center;padding-inline:var(--odx-spacing-control-x-md)}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted(odx-link[hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:calc(-1 * var(--odx-spacing-control-x-md));color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
 
 const breadcrumbsItemSeparator = (() => {
   const element = new OdxIconElement();
@@ -1172,7 +1172,7 @@ __decorateClass([
 ], _OdxCheckbox.prototype, "indeterminate", 2);
 let OdxCheckbox = _OdxCheckbox;
 
-const styles$10 = ":host{display:flex;column-gap:var(--odx-spacing-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-75)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-37);--spacing: var(--odx-spacing-37)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-75);inline-size:auto}";
+const styles$10 = ":host{display:flex;column-gap:var(--odx-spacing-sm)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-md)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-sm);--spacing: var(--odx-spacing-sm)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-sm);inline-size:auto}";
 
 const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
 const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
@@ -1611,7 +1611,7 @@ const _OdxDrawer = class _OdxDrawer extends CustomElement {
     this.popover = null;
   }
   render() {
-    return html`<div class="base"><slot></slot></div><odx-popover></odx-popover>`;
+    return html`<div class="base"><slot></slot></div>`;
   }
 };
 __decorateClass([
@@ -1888,7 +1888,7 @@ __decorateClass([
 ], _OdxGradientOverlay.prototype, "size", 2);
 let OdxGradientOverlay = _OdxGradientOverlay;
 
-const styles$T = ":host{display:block;position:relative;block-size:var(--odx-size-300)}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:var(--odx-z-level-foreground);padding-inline:var(--odx-spacing-lg);block-size:100%}.background{position:absolute;inset:0;z-index:var(--odx-z-level-base);box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-search-bar){flex:1 1 auto;max-inline-size:25ch}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}.actions{display:flex;flex:1 1 auto;flex-wrap:nowrap;gap:var(--odx-spacing-75);align-items:center;justify-content:flex-end;margin-inline-start:auto;block-size:100%}[slot=actions]::slotted(odx-separator){--size: var(--odx-size-150);--spacing: 0px}odx-logo.compact{display:none}:host([size=\"lg\"]){block-size:var(--odx-size-500)}@media screen and (width <= 600px){odx-logo{display:none}odx-logo.compact{display:block}}";
+const styles$T = ":host{display:block;position:relative;block-size:var(--odx-size-300)}.base{display:flex;position:relative;gap:var(--odx-spacing-md);place-items:center;z-index:var(--odx-z-level-foreground);padding-inline:var(--odx-spacing-lg);block-size:100%}.background{position:absolute;inset:0;z-index:var(--odx-z-level-base);box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-action-group){gap:var(--odx-spacing-sm)}::slotted(odx-search-bar){flex:1 1 auto;max-inline-size:25ch}::slotted(odx-separator){--size: var(--odx-size-125);--inner-spacing: 0px;--spacing: var(--odx-spacing-sm)}.actions{display:flex;flex-wrap:nowrap;gap:var(--odx-spacing-sm);align-items:center;margin-inline-start:auto;block-size:100%;max-width:60%}odx-logo.compact{display:none}:host([size=\"lg\"]){block-size:var(--odx-size-500);.base{gap:var(--odx-spacing-lg)}::slotted(odx-action-group),.actions{gap:var(--odx-spacing-md)}}@media screen and (width <= 600px){odx-logo{display:none}odx-logo.compact{display:block}}@media screen and (width <= 450px){odx-logo.compact{display:none}}";
 
 const HeaderSize = pick(Size, ["SM", "MD", "LG"]);
 const _OdxHeader = class _OdxHeader extends CustomElement {
@@ -2250,7 +2250,7 @@ __decorateClass([
 ], _OdxImage.prototype, "width", 2);
 let OdxImage = _OdxImage;
 
-const styles$P = ":host{display:flex;gap:var(--odx-spacing-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
+const styles$P = ":host{display:flex;gap:var(--odx-spacing-md);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-md) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
 
 const iconMap = {
   neutral: "core::info",
@@ -3147,7 +3147,7 @@ class OdxOption extends OptionControl {
   }
 }
 
-const styles$y = ":host{--_page-width: var(--odx-page-size, 1600px);--_page-sticky-offset: calc(var(--_page-header-size, 0) + var(--_page-subheader-size, 0));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky;z-index:var(--odx-z-level-sticky)}.subheader,.content{background-color:var(--odx-color-background-base);inline-size:100%;max-inline-size:var(--_page-width)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--_page-header-size, 0);grid-area:subheader;padding-block:calc(var(--odx-spacing-lg) / 2);padding-inline:var(--odx-spacing-lg)}.content{grid-area:content;padding-inline:var(--odx-spacing-lg);block-size:100%}.footer{grid-area:footer}:host([alignment=\"center\"]){.header,.subheader,.content{margin-inline:auto}.header{inline-size:100%;max-inline-size:var(--_page-width)}}:host([layout=\"narrow\"]){--_page-width: 1100px}:host([layout=\"wide\"]){--_page-width: 1600px}::slotted(odx-page-layout){min-block-size:100%}@media (width >= 750px){:host{padding-inline:var(--odx-spacing-lg)}}@media (width < 750px){:host{--odx-spacing-lg: var(--odx-spacing-75);--odx-spacing-md: var(--odx-spacing-50)}}";
+const styles$y = ":host{--_page-width: var(--odx-page-size, 1600px);--_page-sticky-offset: calc(var(--_page-header-size, 0) + var(--_page-subheader-size, 0));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky}.subheader,.content{background-color:var(--odx-color-background-base);inline-size:100%;max-inline-size:var(--_page-width)}.header{inset-block-start:0;grid-area:header;z-index:calc(var(--odx-z-level-sticky-foreground) + 1)}.subheader{inset-block-start:var(--_page-header-size, 0);grid-area:subheader;z-index:var(--odx-z-level-sticky-foreground);padding-block:calc(var(--odx-spacing-lg) / 2);padding-inline:var(--odx-spacing-lg)}.content{grid-area:content;padding-inline:var(--odx-spacing-lg);block-size:100%}.footer{grid-area:footer}:host([alignment=\"center\"]){.header,.subheader,.content{margin-inline:auto}.header{inline-size:100%;max-inline-size:var(--_page-width)}}:host([layout=\"narrow\"]){--_page-width: 1100px}:host([layout=\"wide\"]){--_page-width: 1600px}::slotted(odx-page-layout){min-block-size:100%}@media (width >= 750px){:host{padding-inline:var(--odx-spacing-lg)}}@media (width < 750px){:host{--odx-spacing-lg: var(--odx-spacing-75);--odx-spacing-md: var(--odx-spacing-50)}}";
 
 const PageAlignment = pick(Alignment, ["START", "CENTER"]);
 const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
@@ -3775,7 +3775,7 @@ __decorateClass([
 ], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
 let OdxSelect = _OdxSelect;
 
-const styles$m = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-75);--spacing: var(--odx-spacing-75);--inner-spacing: var(--odx-spacing-12);display:flex;align-items:center;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--spacing) - .5 * var(--odx-spacing-px));margin-inline:var(--inner-spacing);text-align:center}:before,:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--odx-size-px);content:\"\";pointer-events:none}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-37);min-inline-size:calc(var(--size) / 2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5 * var(--odx-spacing-px));:after,:before{block-size:calc(100% - 2 * var(--inner-spacing));min-block-size:calc(var(--size) / 2);inline-size:var(--odx-size-px)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([alignment=\"start\"]) :before{flex:0 0 var(--odx-spacing-37)}:host([alignment=\"end\"]) :after{flex:0 0 var(--odx-spacing-37)}";
+const styles$m = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-spacing-md);--spacing: var(--odx-spacing-sm);--inner-spacing: var(--odx-spacing-md);display:flex;align-items:center;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--spacing) - .5 * var(--odx-spacing-px));margin-inline:var(--inner-spacing);text-align:center}:before,:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--odx-size-px);content:\"\";pointer-events:none}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-sm);min-inline-size:calc(var(--size) / 2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5 * var(--odx-spacing-px));:after,:before{block-size:calc(100% - 2 * var(--inner-spacing));min-block-size:calc(var(--size) / 2);inline-size:var(--odx-size-px)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([alignment=\"start\"]) :before{flex:0 0 var(--odx-spacing-spacing-md)}:host([alignment=\"end\"]) :after{flex:0 0 var(--odx-spacing-spacing-md)}";
 
 const SeparatorAlignment = pick(Alignment, ["START", "CENTER", "END"]);
 const _OdxSeparator = class _OdxSeparator extends CustomElement {

package/dist/css.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
+@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}

package/dist/main.js

@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.185";
+const version = "1.0.0-beta.186";
 const pkg = {
   name,
   displayName,
@@ -111,7 +111,7 @@ function insertChildrenBetween(elements, newChild, shouldInsert) {
   }
 }
 
-const customElementStyles = "@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
+const customElementStyles = "@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
 
 async function loadCustomElements(loader) {
   const entries = await loader();
@@ -1060,7 +1060,7 @@ function optionalSlot(host, slotName, classNames) {
   return nothing;
 }
 
-const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-control-md);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-150);--_padding-block: var(--odx-spacing-control-y-md);--_padding-inline: var(--odx-spacing-control-x-md);position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:calc(var(--_padding-inline) - var(--odx-border-width-thin));block-size:100%;inline-size:100%;min-inline-size:var(--_block-size);overflow:hidden;text-align:inherit;text-decoration:none;line-height:min(calc(var(--_block-size) / 2),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--size: var(--_icon-size);color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:inherit;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}[part~=spinner],odx-icon,::slotted(odx-icon),::slotted(odx-avatar),slot:is([name=prefix],[name=suffix])::slotted(*){margin-inline:calc(-1 * var(--_padding-block))}slot:is([name=prefix],[name=suffix])::slotted([odx-button]){margin-inline:calc(-1 * var(--_padding-inline))}odx-icon,::slotted(odx-icon),::slotted(odx-avatar){--size: var(--_icon-size)}::slotted(odx-avatar){--size: var(--_icon-size);font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){position:absolute;inset-block-start:var(--odx-spacing-12);inset-inline-end:var(--odx-spacing-12);pointer-events:none;translate:var(--_padding-block) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--_padding-block) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-control-sm);--_padding-block: var(--odx-spacing-control-y-sm);--_padding-inline: var(--odx-spacing-control-x-sm);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}:host([size=\"lg\"]){--_block-size: var(--odx-size-control-lg);--_padding-block: var(--odx-spacing-control-y-lg);--_padding-inline: var(--odx-spacing-control-x-lg);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-size-200)}}";
+const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-foreground-hover: var(--_color-foreground);--_color-foreground-pressed: var(--_color-foreground-hover);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-control-md);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-150);--_padding-block: var(--odx-spacing-control-y-md);--_padding-inline: var(--odx-spacing-control-x-md);position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:calc(var(--_padding-inline) - var(--odx-border-width-thin));block-size:100%;inline-size:100%;min-inline-size:var(--_block-size);overflow:hidden;text-align:inherit;text-decoration:none;line-height:min(calc(var(--_block-size) / 2),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--size: var(--_icon-size);color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:inherit;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}[part~=spinner],odx-icon,::slotted(odx-icon),::slotted(odx-avatar),slot:is([name=prefix],[name=suffix])::slotted(*){margin-inline:calc(-1 * var(--_padding-block))}slot:is([name=prefix],[name=suffix])::slotted([odx-button]){margin-inline:calc(-1 * var(--_padding-inline))}odx-icon,::slotted(odx-icon),::slotted(odx-avatar){--size: var(--_icon-size)}::slotted(odx-avatar){--size: var(--_icon-size);font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){position:absolute;inset-block-start:var(--odx-spacing-12);inset-inline-end:var(--odx-spacing-12);z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_padding-block) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--_padding-block) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-control-sm);--_padding-block: var(--odx-spacing-control-y-sm);--_padding-inline: var(--odx-spacing-control-x-sm);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}:host([size=\"lg\"]){--_block-size: var(--odx-size-control-lg);--_padding-block: var(--odx-spacing-control-y-lg);--_padding-inline: var(--odx-spacing-control-x-lg);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-size-200)}}";
 
 class InteractiveLink extends CanBeDisabled(CustomElement) {
   constructor() {

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}
+@layer reset,base,variant,state,theme,utils;: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child){flex:1}.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-md);--_max-column-size: calc((100% - var(--gap) * (var(--max-columns) + 1)) / var(--max-columns));--_min-column-size: min(100%, max(var(--min-column-size), var(--_max-column-size)));--_column-size: minmax(var(--_min-column-size), 1fr);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{--gap: var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{--gap: var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{--gap: var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{--gap: var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{--gap: var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{--gap: var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{--gap: var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.185",
+  "version": "1.0.0-beta.186",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -34,9 +34,9 @@
     "stylelint": "16.23.0",
     "stylelint-config-concentric-order": "5.2.1",
     "stylelint-config-standard": "39.0.0",
-    "@odx/design-tokens": "1.1.0-rc.6",
-    "@odx/typescript-config": "0.0.0",
     "@odx/storybook-utils": "0.0.0",
+    "@odx/typescript-config": "0.0.0",
+    "@odx/design-tokens": "1.1.0-rc.6",
     "@odx/vite-config": "0.0.0"
   },
   "sideEffects": [