@odx/foundation 1.0.0-beta.230 → 1.0.0-beta.232

package/README.md

@@ -54,22 +54,6 @@ import '@odx/foundation/styles';
 
 ```
 
-#### Native Styles
-
-The `@odx/foundation` package provides native styles that can be used to apply the ODX Design System's visual language to native HTML elements. These styles ensure that your application maintains a consistent look and feel across all components, whether they are custom web components or standard HTML elements.
-
-In order to use the native styles, you need to import the `styles.css` file from the `@odx/foundation` package. This file contains all the necessary CSS rules to style native HTML elements according to the ODX Design System.
-
-```js
-// Load styles (in JS)
-import '@odx/foundation/styles-native'; // JS
-```
-
-```css
-/* Load styles (in CSS) */
-@import '@odx/foundation/dist/styles-native.css';
-```
-
 ### Framework integration
 
 We currently do not provide any framework specific integration for the `@odx/foundation` package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.

package/dist/components/badge/badge.d.ts

@@ -27,8 +27,9 @@ export declare const BadgeVariant: Pick<{
     readonly DANGER: "danger";
     readonly DANGER_GHOST: "danger-ghost";
     readonly GHOST: "ghost";
-}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
+}, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST">;
 export declare class OdxBadge extends CustomElement {
+    #private;
     animated: boolean;
     compact: boolean;
     contrast: boolean;

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

@@ -1,3 +1,5 @@
+import { PresetsConfig } from '../../main.js';
+import { ValuesOf } from '../../utils/main.js';
 import { OdxIconName } from '@odx/icons';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OdxButton } from '../button/button.js';
@@ -7,8 +9,16 @@ declare global {
         'odx-icon-button': OdxIconButton;
     }
 }
-export declare class OdxIconButton extends OdxButton {
+export type IconButtonPreset = ValuesOf<typeof IconButtonPreset>;
+export declare const IconButtonPreset: {
+    readonly CLOSE: "close";
+    readonly CLEAR: "clear";
+};
+declare const OdxIconButton_base: import('../../utils/main.js').Constructor<import('../../main.js').HasPresets<OdxButton>> & typeof OdxButton;
+export declare class OdxIconButton extends OdxIconButton_base {
     #private;
+    readonly presets: PresetsConfig<OdxIconButton>;
+    preset?: IconButtonPreset;
     activeIcon?: OdxIconName;
     activeLabel?: string;
     float: boolean;
@@ -21,4 +31,5 @@ export declare class OdxIconButton extends OdxButton {
     protected renderContent(): TemplateResult;
     protected renderLabel(label: TemplateResult | string): TemplateResult;
 }
+export {};
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components.js

@@ -1,5 +1,5 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
-import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Size, Variant, LinkControlElement, activeDirective, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
+import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Size, Variant, LinkControlElement, activeDirective, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, WithPresets, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
 import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, isToggleOpen } from '@odx/foundation/utils';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -131,20 +131,10 @@ __decorateClass([
 ], _OdxAccordion.prototype, "size", 2);
 let OdxAccordion = _OdxAccordion;
 
-const styles$1i = ":host{--_height:var(--odx-control-addon-size-sm);column-gap:var(--odx-spacing-12);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-control-spacing-inline-md);min-width:var(--_height);height:var(--_height);vertical-align:middle;text-align:center;line-height:var(--odx-typography-line-height-text-xs);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-text-xs);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}odx-loading-spinner{--size:var(--odx-typography-font-size-text-sm);margin-inline:var(--odx-spacing-negative-25)}::slotted(odx-icon){--size:var(--odx-typography-font-size-text-md)}:host([size=sm]){--_height:var(--odx-control-addon-size-xs);padding-inline:var(--odx-control-spacing-sm);& odx-loading-spinner{--size:var(--odx-typography-font-size-text-xs)}::slotted(odx-icon){--size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--_height:var(--odx-control-addon-size-md);padding-inline:var(--odx-control-spacing-lg);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);& odx-loading-spinner{--size:var(--odx-typography-font-size-text-md)}}:host,:host([variant=neutral]){--_color-background:var(--odx-color-background-neutral-rest);--_color-foreground:var(--odx-color-foreground-rest)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=accent-ghost]){--_color-background:transparent;--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger-ghost]){--_color-background:transparent;--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=ghost]){--_color-background:transparent}:host([animated]){animation:1.25s infinite badge-animation}:host([compact]){--_height:var(--odx-size-75);margin:var(--odx-spacing-12);width:var(--_height);padding:0}:host([contrast]){outline:var(--odx-border-width-thin)solid var(--odx-color-foreground-inverse)}@keyframes badge-animation{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 #0000}}";
+const styles$1i = ":host{--_height:var(--odx-control-addon-size-sm);column-gap:var(--odx-spacing-12);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);cursor:default;padding-inline:var(--odx-control-spacing-md);min-width:var(--_height);height:var(--_height);vertical-align:middle;text-align:center;line-height:var(--odx-typography-line-height-text-xs);color:var(--_color-foreground);font-size:var(--odx-typography-font-size-text-xs);font-weight:var(--odx-typography-font-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}odx-loading-spinner{--size:var(--odx-typography-font-size-text-sm);margin-inline:var(--odx-spacing-negative-25)}::slotted(odx-icon){--size:var(--odx-control-addon-size-xs)}:host([size=sm]){--_height:var(--odx-control-addon-size-xs);& odx-loading-spinner{--size:var(--odx-typography-font-size-text-xs)}::slotted(odx-icon){--size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--_height:var(--odx-control-addon-size-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);::slotted(odx-icon){--size:var(--odx-control-addon-size-sm)}& odx-loading-spinner{--size:var(--odx-typography-font-size-text-md)}}:host,:host([variant=neutral]){--_color-background:var(--odx-color-background-neutral-rest);--_color-foreground:var(--odx-color-foreground-rest)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=accent-ghost]){--_color-background:var(--odx-color-background-accent-subtle);--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=danger-ghost]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([animated]){animation:1.25s infinite badge-animation}:host([compact]){--_height:var(--odx-size-75);margin:var(--odx-spacing-12);width:var(--_height);padding:0}:host([contrast]){outline:var(--odx-border-width-thin)solid var(--odx-color-foreground-inverse)}:host([icon-only]){width:var(--_height)}@keyframes badge-animation{0%{box-shadow:0 0 0 0 var(--_color-background)}70%{box-shadow:0 0 0 var(--odx-size-37) transparent}to{box-shadow:0 0 #0000}}";
 
 const BadgeSize = pick(Size, ["SM", "MD", "LG"]);
-const BadgeVariant = pick(Variant, [
-  "NEUTRAL",
-  "PRIMARY",
-  "ACCENT",
-  "ACCENT_GHOST",
-  "SUCCESS",
-  "WARNING",
-  "DANGER",
-  "DANGER_GHOST",
-  "GHOST"
-]);
+const BadgeVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "ACCENT_GHOST", "SUCCESS", "WARNING", "DANGER", "DANGER_GHOST"]);
 const _OdxBadge = class _OdxBadge extends CustomElement {
   constructor() {
     super(...arguments);
@@ -154,6 +144,11 @@ const _OdxBadge = class _OdxBadge extends CustomElement {
     this.loading = false;
     this.size = BadgeSize.MD;
     this.variant = BadgeVariant.NEUTRAL;
+    this.#handleSlotChange = () => {
+      const elements = getAssignedElements(this.renderRoot, { flatten: true });
+      const isIconOnly = elements.length === 1 && elements[0] instanceof OdxIconElement && this.textContent?.trim() === "";
+      this.toggleAttribute("icon-only", isIconOnly);
+    };
   }
   static {
     customElement("odx-badge", styles$1i)(_OdxBadge);
@@ -165,8 +160,9 @@ const _OdxBadge = class _OdxBadge extends CustomElement {
     if (this.loading) {
       return html`<odx-loading-spinner></odx-loading-spinner><span class="odx-visually-hidden-force"><slot></slot></span>`;
     }
-    return html`<slot></slot>`;
+    return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
   }
+  #handleSlotChange;
 };
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
@@ -1728,7 +1724,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
   render() {
     return html`<odx-text class="odx-no-overflow" part="base" size="sm" strong><slot></slot></odx-text>${when(
       this.removable,
-      () => html`<odx-icon-button class="action" icon="core::close" ?disabled="${this.disabled}" @click="${this.#handleActionClick}" variant="ghost" size="sm"></odx-icon-button>`
+      () => html`<odx-icon-button class="action" preset="close" size="sm" ?disabled="${this.disabled}" @click="${this.#handleActionClick}"></odx-icon-button>`
     )}`;
   }
   willUpdate(props) {
@@ -2252,9 +2248,14 @@ let OdxTooltip = _OdxTooltip;
 
 const styles$R = ":host{--icon-rotate:0deg;--_min-width:var(--_height)}odx-icon{--rotate:var(--icon-rotate);transition:inherit}odx-tooltip{text-align:center}:host([float]){border-radius:var(--odx-border-radius-circle);box-shadow:var(--odx-elevation-shadow-level-2)}";
 
-const _OdxIconButton = class _OdxIconButton extends OdxButton {
+const IconButtonPreset = { CLOSE: "close", CLEAR: "clear" };
+const _OdxIconButton = class _OdxIconButton extends WithPresets(OdxButton) {
   constructor() {
     super(...arguments);
+    this.presets = {
+      [IconButtonPreset.CLEAR]: { icon: "core::cancel", variant: ButtonVariant.GHOST },
+      [IconButtonPreset.CLOSE]: { icon: "core::close", variant: ButtonVariant.GHOST }
+    };
     this.float = false;
   }
   static {
@@ -2296,6 +2297,9 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
     return TooltipVariant.NEUTRAL;
   }
 };
+__decorateClass([
+  property()
+], _OdxIconButton.prototype, "preset", 2);
 __decorateClass([
   property({ attribute: "active-icon" })
 ], _OdxIconButton.prototype, "activeIcon", 2);
@@ -2444,7 +2448,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
   }
   render() {
     const resolvedIcon = this.icon == null ? this.variant ? iconMap[this.variant] : null : this.icon;
-    return html`${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name="${icon}"></odx-icon>`)}<div class="base"><slot></slot></div>${when(this.dismissible, () => html`<odx-icon-button class="action" icon="core::close" variant="ghost" @click="${() => this.hide()}"></odx-icon-button>`)}`;
+    return html`${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name="${icon}"></odx-icon>`)}<div class="base"><slot></slot></div>${when(this.dismissible, () => html`<odx-icon-button class="action" preset="close" @click="${() => this.hide()}"></odx-icon-button>`)}`;
   }
 };
 __decorateClass([
@@ -3039,10 +3043,7 @@ class OdxModal extends DialogElement {
     customElement("odx-modal", styles$C)(OdxModal);
   }
   renderContent() {
-    return html`<odx-card class="odx-content-box"><odx-area-header><slot name="header" slot="header"></slot><slot name="actions" slot="suffix"></slot>${when(
-      this.dismissible,
-      () => html`<odx-icon-button icon="core::close" variant="ghost" slot="suffix" @click="${this.dismiss}"></odx-icon-button>`
-    )}</odx-area-header><slot></slot><odx-area-footer class="odx-align-end" alignment="end" slot="footer"><slot name="footer"></slot></odx-area-footer></odx-card>`;
+    return html`<odx-card class="odx-content-box"><odx-area-header><slot name="header" slot="header"></slot><slot name="actions" slot="suffix"></slot>${when(this.dismissible, () => html`<odx-icon-button preset="close" slot="suffix" @click="${this.dismiss}"></odx-icon-button>`)}</odx-area-header><slot></slot><odx-area-footer class="odx-align-end" alignment="end" slot="footer"><slot name="footer"></slot></odx-area-footer></odx-card>`;
   }
   update(props) {
     super.update(props);
@@ -3708,7 +3709,7 @@ const _OdxSelect = class _OdxSelect extends ListboxControl {
       () => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
     )}</div>${when(
       this.#isClearable(),
-      () => html`<odx-icon-button class="action clear" icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click="${this.#handleClear}"></odx-icon-button>`,
+      () => html`<odx-icon-button class="action clear" preset="clear" size="sm" tabindex="-1" @click="${this.#handleClear}"></odx-icon-button>`,
       () => html`<odx-icon class="indicator" name="core::chevron-down"></odx-icon>`
     )}</div><odx-dropdown class="dropdown" role="listbox" aria-multiselectable="${toAriaBooleanAttribute(this.multiple, false)}" ?disabled="${dropdownDisabled}" match-reference-width focus-disabled @toggle="${this.#handleDropdownToggle}"><slot @slotchange="${this.#handleSlotChange}"></slot></odx-dropdown>`;
   }
@@ -4876,4 +4877,4 @@ __decorateClass([
 ], _OdxTranslate.prototype, "context", 2);
 let OdxTranslate = _OdxTranslate;
 
-export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };
+export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePosition, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, scrollContainerNext, scrollContainerPrevious, sliderContext, tableContext };

package/dist/lib/behaviors/{checkbox-control-group.d.ts → checkbox-group-control.d.ts}

@@ -5,17 +5,18 @@ import { FormAssociated } from './form-associated.js';
 declare const CheckboxControlGroup_base: import('../../utils/main.js').Constructor<FormAssociated<string[]>> & typeof CustomElement;
 export declare class CheckboxControlGroup extends CheckboxControlGroup_base {
     #private;
-    value: string[];
+    private selection;
+    set value(value: string[]);
+    get value(): string[];
+    get selectedIndex(): number;
     constructor();
-    isSelected(control: CheckboxControl): boolean;
     getControls(): CheckboxControl[];
     getGroupControl(): CheckboxControl | undefined;
-    toggle(control: CheckboxControl | CheckboxControl[], emitEvent?: boolean): void;
+    toggle(control: CheckboxControl, state?: boolean, emitEvent?: boolean): void;
     toggleAll(state?: boolean, emitEvent?: boolean): void;
     clear(): void;
     toFormValue(): FormData;
-    protected updateValue(controls: CheckboxControl[], state?: boolean): void;
     protected updated(props: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=checkbox-control-group.d.ts.map
+//# sourceMappingURL=checkbox-group-control.d.ts.map

package/dist/lib/behaviors/form-associated.d.ts

@@ -13,10 +13,10 @@ export interface FormAssociated<V extends string | number | string[] = string> e
     get validationMessage(): string;
     get willValidate(): boolean;
     clear(): void;
-    toFormValue(): string | File | FormData | null;
     checkValidity(): boolean;
     reportValidity(): void;
     setValidity(flags?: ValidityStateFlags, target?: HTMLElement): void;
+    toFormValue(): string | File | FormData | null;
 }
 export declare const FormAssociated: <T extends Constructor<CustomElement>, V extends string | number | string[] = string>(superClass: T) => Constructor<FormAssociated<V>> & T;
 //# sourceMappingURL=form-associated.d.ts.map

package/dist/lib/behaviors/radio-group-control.d.ts

@@ -4,8 +4,8 @@ import { CheckboxControl } from './checkbox-control.js';
 import { FormAssociated } from './form-associated.js';
 export interface RadioGroupControl<Control extends CheckboxControl> extends FormAssociated<string> {
     value: string;
+    get selectedIndex(): number;
     getControls(): Control[];
-    getSelectedIndex(): number;
     isControl(element: HTMLElement): element is Control;
 }
 export declare const RadioGroupControl: <Control extends CheckboxControl, T extends Constructor<CustomElement>>(superClass: T) => Constructor<RadioGroupControl<Control>> & T;

package/dist/lib/behaviors/with-presets.d.ts

@@ -0,0 +1,12 @@
+import { Constructor } from '../../utils/main.js';
+import { TemplateResult } from 'lit';
+import { CustomElement } from '../custom-element.js';
+export type PresetsConfig<T extends CustomElement> = Record<string, Partial<T> & {
+    render?: () => TemplateResult;
+}>;
+export interface HasPresets<T extends CustomElement> extends CustomElement {
+    readonly presets: PresetsConfig<T>;
+    preset?: string;
+}
+export declare const WithPresets: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<HasPresets<InstanceType<T>>> & T;
+//# sourceMappingURL=with-presets.d.ts.map

package/dist/main.d.ts

@@ -2,13 +2,14 @@ export * from './lib/behaviors/can-be-collapsed.js';
 export * from './lib/behaviors/can-be-disabled.js';
 export * from './lib/behaviors/can-be-expanded.js';
 export * from './lib/behaviors/checkbox-control.js';
-export * from './lib/behaviors/checkbox-control-group.js';
+export * from './lib/behaviors/checkbox-group-control.js';
 export * from './lib/behaviors/form-associated.js';
 export * from './lib/behaviors/is-draggable.js';
 export * from './lib/behaviors/listbox-control.js';
 export * from './lib/behaviors/number-form-control.js';
 export * from './lib/behaviors/option-control.js';
 export * from './lib/behaviors/radio-group-control.js';
+export * from './lib/behaviors/with-presets.js';
 export * from './lib/control-element.js';
 export * from './lib/controllers/active-descendants-controller.js';
 export * from './lib/controllers/drag.controller.js';

package/dist/main.js

@@ -1,7 +1,7 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import { createToggleEvent, toAriaBooleanAttribute, booleanAttributeDirective, getKeyInfo, setFocusable, getAssignedElements, getElementFromEvent, optionalAttr, interactionResponse, createCustomEvent, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener } from '@odx/foundation/utils';
 import { property, query } from 'lit/decorators.js';
-import { unsafeCSS, LitElement, html, isServer } from 'lit';
+import { unsafeCSS, LitElement, html, isServer, render } from 'lit';
 import { u as uniqBy, R as RovingTabindexController, p as pick, m as minBy } from './vendor.js';
 
 const CanBeCollapsed = (superClass) => {
@@ -120,12 +120,15 @@ const FormAssociated = (superClass) => {
     get willValidate() {
       return this.internals.willValidate;
     }
-    toFormValue() {
-      return this.value ? String(this.value) : null;
+    clear() {
+      this.value = "";
     }
     checkValidity() {
       return this.internals.checkValidity();
     }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
     setValidity(flags, target = this) {
       if (!flags) {
         this.internals.setValidity({});
@@ -134,11 +137,8 @@ const FormAssociated = (superClass) => {
       const errorKey = Object.keys(flags).find((key) => flags?.[key] === true);
       this.internals.setValidity(flags, errorKey ?? "unknown error", target);
     }
-    reportValidity() {
-      this.internals.reportValidity();
-    }
-    clear() {
-      this.value = "";
+    toFormValue() {
+      return this.value ? String(this.value) : null;
     }
     willUpdate(props) {
       super.willUpdate(props);
@@ -192,13 +192,13 @@ const CheckboxControl = (superClass) => {
       });
     }
     toggle(state, emitEvent = false) {
-      if (this.disabled || this.readonly) return false;
       const currentState = this.checked;
       const newState = state ?? !currentState;
-      if (newState === currentState) return false;
+      if (newState === currentState || this.disabled || this.readonly) return false;
       this.checked = newState;
-      if (emitEvent && this.emit("change", { bubbles: true })) {
+      if (emitEvent && this.emit("change")) {
         this.checked = currentState;
+        return false;
       }
       return true;
     }
@@ -209,7 +209,7 @@ const CheckboxControl = (superClass) => {
       checkboxControlDirective.toggle(this, true);
     }
     clear() {
-      this.checked = false;
+      this.toggle(false);
     }
     toFormValue() {
       return this.checked ? this.value || "on" : null;
@@ -258,7 +258,7 @@ const CheckboxControl = (superClass) => {
   return CheckboxControlBehavior;
 };
 
-const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;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,dl,dt,dd,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;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow: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),.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-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);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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 variant,state,theme,utils;@layer utilities{.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-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
+const styles$3 = "@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;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,dl,dt,dd,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;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow: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),.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-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);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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 variant,state,theme,utils;@layer utilities{.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-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}";
 
 function customElement(tagName, ...styles2) {
   return (target) => {
@@ -305,18 +305,17 @@ async function loadCustomElements(loader) {
 class CheckboxControlGroup extends FormAssociated(CustomElement) {
   constructor() {
     super();
-    this.#selection = /* @__PURE__ */ new Set();
-    this.value = [];
+    this.selection = /* @__PURE__ */ new Set();
     this.#handleMouseEvent = ((event) => {
       if (!checkboxControlDirective.applied(event.target)) return;
-      this.toggle(event.target, true);
+      this.toggle(event.target, void 0, true);
     });
     this.#handleKeyboardEvent = ((event) => {
       const key = getKeyInfo(event);
       if (!(key.enter || key.space)) return;
       event.preventDefault();
       if (event.type === "keydown" || !checkboxControlDirective.applied(event.target)) return;
-      this.toggle(event.target, true);
+      this.toggle(event.target, void 0, true);
     });
     if (!isServer) {
       this.addEventListener("click", this.#handleMouseEvent);
@@ -324,9 +323,17 @@ class CheckboxControlGroup extends FormAssociated(CustomElement) {
       this.addEventListener("keyup", this.#handleKeyboardEvent);
     }
   }
-  #selection;
-  isSelected(control) {
-    return this.#selection.has(control.value);
+  set value(value) {
+    this.selection = new Set(value);
+  }
+  get value() {
+    return Array.from(this.selection ?? []);
+  }
+  get selectedIndex() {
+    const controls = this.getControls();
+    const selectedIndex = controls.findIndex((c) => this.selection.has(c.value));
+    const firstEnabledIndex = controls.findIndex((c) => !c.disabled);
+    return Math.max(selectedIndex, firstEnabledIndex);
   }
   getControls() {
     return getAssignedElements(this.renderRoot, { selector: (element) => checkboxControlDirective.applied(element) });
@@ -337,22 +344,29 @@ class CheckboxControlGroup extends FormAssociated(CustomElement) {
       selector: (element) => checkboxControlDirective.applied(element)
     })[0];
   }
-  toggle(control, emitEvent = false) {
+  toggle(control, state, emitEvent = false) {
+    if (!control.toggle(state)) return;
     if (control === this.getGroupControl()) {
-      if (!control.toggle()) return;
       this.toggleAll(control.indeterminate || control.checked, emitEvent);
       return;
     }
-    const controls = Array.isArray(control) ? control : [control];
-    if (controls.every((control2) => !control2.toggle())) return;
-    this.updateValue(controls);
+    if (control.checked) {
+      this.selection.add(control.value);
+    } else {
+      this.selection.delete(control.value);
+    }
+    emitEvent && this.emit("change");
+    this.requestUpdate("value");
   }
   toggleAll(state, emitEvent = false) {
-    this.updateValue(this.getControls(), state);
+    for (const control of this.getControls()) {
+      this.toggle(control, state);
+    }
     emitEvent && this.emit("change");
   }
   clear() {
-    this.#selection.clear();
+    this.selection.clear();
+    this.requestUpdate("value");
   }
   toFormValue() {
     const formData = new FormData();
@@ -361,24 +375,10 @@ class CheckboxControlGroup extends FormAssociated(CustomElement) {
     });
     return formData;
   }
-  updateValue(controls, state) {
-    let hasChanges = false;
-    for (const control of controls) {
-      const newState = state ?? !this.isSelected(control);
-      if (newState === this.isSelected(control)) continue;
-      hasChanges = true;
-      if (newState) {
-        this.#selection.add(control.value);
-      } else {
-        this.#selection.delete(control.value);
-      }
-    }
-    if (!hasChanges) return;
-    this.value = Array.from(this.#selection);
-  }
   updated(props) {
     super.updated(props);
     const controls = this.getControls();
+    const groupControl = this.getGroupControl();
     for (const control of controls) {
       control.controlled = true;
       if (props.has("disabled")) {
@@ -391,11 +391,9 @@ class CheckboxControlGroup extends FormAssociated(CustomElement) {
         control.readonly = this.readonly;
       }
       if (props.has("value")) {
-        this.#selection = new Set(this.value);
-        control.checked = this.isSelected(control);
+        control.checked = this.selection.has(control.value);
       }
     }
-    const groupControl = this.getGroupControl();
     if (!groupControl) return;
     groupControl.controlled = true;
     if (props.has("disabled")) {
@@ -414,7 +412,7 @@ class CheckboxControlGroup extends FormAssociated(CustomElement) {
 }
 __decorateClass([
   property({ type: Array })
-], CheckboxControlGroup.prototype, "value", 2);
+], CheckboxControlGroup.prototype, "value", 1);
 
 const dragActiveDirective = booleanAttributeDirective({
   name: "odx-drag-active",
@@ -770,19 +768,18 @@ const RadioGroupControl = (superClass) => {
         new RovingTabindexController(this, {
           direction: "both",
           hostDelegatesFocus: true,
-          isFocusableElement: (element) => !element.disabled && this.isControl(element),
+          isFocusableElement: (element) => !element.disabled,
           elements: () => this.getControls(),
           elementEnterAction: (element) => element.click(),
-          focusInIndex: () => this.getSelectedIndex()
+          focusInIndex: () => this.selectedIndex
         });
       }
     }
-    getSelectedIndex() {
+    get selectedIndex() {
       const controls = this.getControls();
-      return Math.max(
-        controls.findIndex((c) => this.value === c.value),
-        controls.findIndex((c) => !c.disabled)
-      );
+      const selectedIndex = controls.findIndex((c) => this.value === c.value);
+      const firstEnabledIndex = controls.findIndex((c) => !c.disabled);
+      return Math.max(selectedIndex, firstEnabledIndex);
     }
     getControls(filter) {
       return getAssignedElements(this.renderRoot).filter((element) => this.isControl(element) && (filter?.(element) ?? true));
@@ -794,28 +791,26 @@ const RadioGroupControl = (superClass) => {
       super.connectedCallback();
       this.role ||= "radiogroup";
     }
-    willUpdate(changes) {
-      super.update(changes);
-      this.getControls().forEach((control, index) => {
-        this.#updateControl(control, changes, index);
-      });
-    }
-    #updateControl(control, changes, index) {
-      if (changes.has("name")) {
-        control.name = this.name;
-      }
-      if (changes.has("disabled")) {
-        control.disabled = this.disabled;
-      }
-      if (changes.has("readonly")) {
-        control.readonly = this.readonly;
-      }
-      if (changes.has("value")) {
-        control.checked = this.value === control.value;
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Needed for mixin
+    updated(props) {
+      super.updated(props);
+      const controls = this.getControls();
+      for (const control of controls) {
+        if (props.has("name")) {
+          control.name = this.name;
+        }
+        if (props.has("disabled")) {
+          control.disabled = this.disabled;
+        }
+        if (props.has("readonly")) {
+          control.readonly = this.readonly;
+        }
+        if (props.has("value")) {
+          control.checked = this.value === control.value;
+        }
       }
-      if (changes.has("value") || changes.has("required")) {
-        if (index > 0) return;
-        this.setValidity({ valueMissing: this.required && this.value.length === 0 }, control);
+      if ((props.has("required") || props.has("value")) && controls[0]) {
+        this.setValidity({ valueMissing: this.required && this.value.length === 0 }, controls[0]);
       }
     }
     #handleChange;
@@ -826,6 +821,34 @@ const RadioGroupControl = (superClass) => {
   return RadioGroupControlBehavior;
 };
 
+const WithPresets = (superClass) => {
+  class WithPresetsMixin extends superClass {
+    constructor() {
+      super(...arguments);
+      this.presets = {};
+    }
+    willUpdate(props) {
+      super.willUpdate(props);
+      if (props.has("preset") && this.preset) {
+        const host = this;
+        for (const [propName, propValue] of Object.entries(this.presets[this.preset] ?? {})) {
+          if (props.has(propName) && host[propName]) continue;
+          host[propName] = propValue;
+        }
+      }
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("preset") && this.preset) {
+        const renderResult = this.presets[this.preset]?.render?.();
+        if (!renderResult) return;
+        render(renderResult, this);
+      }
+    }
+  }
+  return WithPresetsMixin;
+};
+
 const styles$2 = "@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;--_height:var(--odx-control-height-md);--_min-width:auto;--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);transition:var(--odx-transition-reduced);border-radius:var(--odx-control-border-radius);cursor:pointer;min-width:var(--_min-width);max-width:100%;height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;margin:0;transition-property:border-color;position:relative}:host,.base{place-items:center;display:inline-flex}.base{column-gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border:var(--odx-control-border-width)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-control-border-width));padding-inline:calc(var(--_spacing-inline) - var(--odx-control-border-width));width:100%;min-width:var(--_height);height:100%;text-align:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;overflow:hidden;&,&:hover,&:active{color:inherit}}.label{min-width:0;text-align:inherit;pointer-events:none;flex:1}odx-loading-spinner{--size:calc(var(--_addon-size) - var(--odx-spacing-25));margin-inline:var(--odx-spacing-12);color:var(--_color-foreground)}::slotted(odx-badge:not([slot=badge])){margin-inline:var(--odx-spacing-12)}:is(odx-avatar,odx-icon):not([size]),::slotted(:is(odx-avatar,odx-icon):not([size])){--size:var(--_addon-size)}odx-avatar:not([size]),::slotted(odx-avatar:not([size])){font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}.base>odx-icon:not([slot]),::slotted(odx-icon:not([slot])){margin-inline:calc(-1*var(--_spacing-inline))}::slotted(:not([slot])){line-height:inherit}[odx-control],::slotted([odx-control]){margin-inline:calc(-1*var(--_spacing))}:host(:not([loading])) .base{&:hover{--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed)}&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}}@layer state{:host([disabled]) .base{pointer-events:none;-webkit-user-select:none;user-select:none}: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]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);::slotted(odx-avatar:not([size])),odx-avatar:not([size]){font-size:var(--odx-typography-font-size-text-md)}}}";
 
 const Size = {
@@ -1289,4 +1312,4 @@ const Variant = {
   GHOST: "ghost"
 };
 
-export { ActiveDescendantsController, Alignment, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxControlGroup, ControlElement, ControlSize, CustomElement, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DialogSize, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, Justify, LinkControlElement, ListboxControl, NumberFormControl, OptionControl, OptionType, Placement, RadioGroupControl, Shape, Size, Spacing, Variant, activeDirective, checkboxControlDirective, controlDirective, customElement, dialogDirective, dragActiveDirective, loadCustomElements, optionControlDirection };
+export { ActiveDescendantsController, Alignment, CanBeCollapsed, CanBeDisabled, CanBeExpanded, CheckboxControl, CheckboxControlGroup, ControlElement, ControlSize, CustomElement, DialogAfterCloseEvent, DialogAfterOpenEvent, DialogCloseCommand, DialogCloseEvent, DialogElement, DialogLayer, DialogOpenEvent, DialogShowCommand, DialogSize, DragController, DragControllerOptions, ExpandableItemManager, FormAssociated, InteractiveControlElement, IsDraggable, Justify, LinkControlElement, ListboxControl, NumberFormControl, OptionControl, OptionType, Placement, RadioGroupControl, Shape, Size, Spacing, Variant, WithPresets, activeDirective, checkboxControlDirective, controlDirective, customElement, dialogDirective, dragActiveDirective, loadCustomElements, optionControlDirection };

package/dist/styles.css

@@ -1 +1 @@
-@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;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,dl,dt,dd,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;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow: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),.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-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);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}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)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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 variant,state,theme;@layer utils{.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-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-focus-ring-outer:var(--odx-border-width-thick)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:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--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}
+@layer reset{:where(*):not(:defined){display:none}:where(*){scrollbar-width:thin;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,dl,dt,dd,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;border:0;margin:0;padding:0}:where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:break-word}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p){text-wrap:pretty}:where(img,picture,video,canvas,embed,iframe,object){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where([popover]){border:none;outline:none}:where([hidden]){display:none!important}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{:where(.odx-content){--_content-spacing-sm:var(--odx-layout-spacing-sm);--_content-spacing-md:var(--odx-layout-spacing-md);--_content-spacing-lg:var(--odx-layout-spacing-lg);line-height:var(--odx-typography-line-height-text-md);:where(table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe){margin:var(--_content-spacing-md)0}>:where(odx-title,[class*=odx-title]),>:where(.odx-text,odx-text),:where(li>:is(ul,ol,dl)),:where(h1,h2,h3,h4,h5,h6,p,li){margin:var(--_content-spacing-sm)0}:where(h1,h2,h3,h4,h5,h6){margin-block-start:var(--_content-spacing-lg)}:where(table,ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(code,pre,mark){border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}:where(code,pre){background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(dt),:where(a){font-weight:var(--odx-typography-font-weight-medium)}:where(del){color:var(--odx-color-foreground-danger-rest)}:where(figure){flex-direction:column;display:flex}:where(figcaption){border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(ins){color:var(--odx-color-foreground-success-rest);text-decoration:none}:where(mark){background-color:var(--odx-color-background-accent-rest);color:var(--odx-color-foreground-inverse-static)}:where(pre){padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}:where(small){font-size:var(--odx-typography-font-size-text-sm)}:where(var){font-weight:var(--odx-typography-font-weight-medium)}}:where(.odx-content-sm){--_content-spacing-md:var(--odx-layout-spacing-sm);--_content-spacing-lg:var(--odx-layout-spacing-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-lg)}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;text-decoration:underline;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow: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),.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}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-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);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}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)}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}:where(.odx-content-box){>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}:where(.odx-content){& odx-key-value-list,odx-list{margin-block:var(--_content-spacing-md)}}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-breadcrumbs>:is(a,odx-link):not([disabled]){color:var(--odx-color-foreground-rest);text-decoration:none;&:hover{text-decoration:underline}&:last-of-type{font-weight:var(--odx-typography-font-weight-medium);text-decoration:none}odx-breadcrumbs[variant=primary] &{color:var(--odx-color-foreground-inverse-static)}}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 variant,state,theme;@layer utils{.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-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}

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.230",
+  "version": "1.0.0-beta.232",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "@odx/icons": "^4.0.0-rc.47",
-    "@odx/design-tokens": "^2.1.0"
+    "@odx/design-tokens": "^2.2.0"
   },
   "devDependencies": {
     "@floating-ui/dom": "1.7.4",
@@ -29,20 +29,19 @@
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
     "@odx/icons": "4.0.0-rc.47",
     "@spectrum-web-components/reactive-controllers": "1.8.0",
-    "es-toolkit": "1.39.10",
+    "es-toolkit": "1.40.0",
     "sass-embedded": "1.93.2",
     "stylelint": "16.25.0",
     "@odx-internal/config-stylelint": "0.0.0",
-    "@odx-internal/utils-storybook": "0.0.0",
     "@odx-internal/config-typescript": "0.0.0",
     "@odx-internal/config-vite": "0.0.0",
-    "@odx/design-tokens": "2.1.0"
+    "@odx-internal/utils-storybook": "0.0.0",
+    "@odx/design-tokens": "2.2.0"
   },
   "sideEffects": [
     "dist/components-loader.js",
     "dist/i18n.js",
-    "dist/styles.css",
-    "dist/styles-native.css"
+    "dist/styles.css"
   ],
   "exports": {
     ".": {
@@ -73,8 +72,7 @@
       "types": "./dist/utils/main.d.ts"
     },
     "./utils/*": null,
-    "./styles": "./dist/styles.css",
-    "./styles-native": "./dist/styles-native.css"
+    "./styles": "./dist/styles.css"
   },
   "publishConfig": {
     "access": "public",

package/dist/styles-native.css

@@ -1 +0,0 @@
-@layer base{table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& td{height:var(--cell-size);vertical-align:middle}& th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th{cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}}