@odx/foundation 1.0.0-beta.248 → 1.0.0-beta.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/components/avatar/avatar.d.ts +2 -2
  2. package/dist/components/badge/badge.d.ts +3 -3
  3. package/dist/components/breadcrumbs/breadcrumbs.d.ts +2 -2
  4. package/dist/components/button/button.d.ts +2 -2
  5. package/dist/components/card/card.d.ts +2 -2
  6. package/dist/components/chip/chip.d.ts +3 -3
  7. package/dist/components/empty-state/empty-state.d.ts +3 -3
  8. package/dist/components/highlight/highlight.d.ts +2 -2
  9. package/dist/components/inline-message/inline-message.d.ts +2 -2
  10. package/dist/components/key-value/key-value.d.ts +2 -2
  11. package/dist/components/list-item/list-item.d.ts +15 -0
  12. package/dist/components/menu-item/menu-item.d.ts +2 -2
  13. package/dist/components/slider/slider-handle.d.ts +2 -2
  14. package/dist/components/status/status.d.ts +2 -2
  15. package/dist/components/text/text.d.ts +3 -3
  16. package/dist/components/tile/tile.d.ts +2 -2
  17. package/dist/components/toast/toast.d.ts +2 -2
  18. package/dist/components/toggle-button/toggle-button.d.ts +2 -2
  19. package/dist/components/tooltip/tooltip.d.ts +2 -2
  20. package/dist/components.js +17 -13
  21. package/dist/lib/models.d.ts +2 -2
  22. package/dist/main.js +3 -3
  23. package/dist/styles.css +1 -1
  24. package/package.json +2 -2
package/dist/components/avatar/avatar.d.ts CHANGED
@@ -23,14 +23,14 @@ export declare const AvatarSize: Pick<{
23
23
  export type AvatarVariant = ValuesOf<typeof AvatarVariant>;
24
24
  export declare const AvatarVariant: Pick<{
25
25
  readonly NEUTRAL: "neutral";
26
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
27
26
  readonly PRIMARY: "primary";
28
27
  readonly ACCENT: "accent";
29
- readonly ACCENT_GHOST: "accent-ghost";
30
28
  readonly SUCCESS: "success";
31
29
  readonly WARNING: "warning";
32
30
  readonly DANGER: "danger";
31
+ readonly ACCENT_GHOST: "accent-ghost";
33
32
  readonly DANGER_GHOST: "danger-ghost";
33
+ readonly SUBTLE: "subtle";
34
34
  readonly GHOST: "ghost";
35
35
  }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "GHOST">;
36
36
  export declare class OdxAvatar extends CustomElement {
package/dist/components/badge/badge.d.ts CHANGED
@@ -18,16 +18,16 @@ export declare const BadgeSize: Pick<{
18
18
  export type BadgeVariant = ValuesOf<typeof BadgeVariant>;
19
19
  export declare const BadgeVariant: Pick<{
20
20
  readonly NEUTRAL: "neutral";
21
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
22
21
  readonly PRIMARY: "primary";
23
22
  readonly ACCENT: "accent";
24
- readonly ACCENT_GHOST: "accent-ghost";
25
23
  readonly SUCCESS: "success";
26
24
  readonly WARNING: "warning";
27
25
  readonly DANGER: "danger";
26
+ readonly ACCENT_GHOST: "accent-ghost";
28
27
  readonly DANGER_GHOST: "danger-ghost";
28
+ readonly SUBTLE: "subtle";
29
29
  readonly GHOST: "ghost";
30
- }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "ACCENT_GHOST" | "SUCCESS" | "WARNING" | "DANGER" | "DANGER_GHOST">;
30
+ }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER" | "ACCENT_GHOST" | "DANGER_GHOST">;
31
31
  export declare class OdxBadge extends CustomElement {
32
32
  #private;
33
33
  animated: boolean;
package/dist/components/breadcrumbs/breadcrumbs.d.ts CHANGED
@@ -14,14 +14,14 @@ declare global {
14
14
  export type BreadcrumbsVariant = ValuesOf<typeof BreadcrumbsVariant>;
15
15
  export declare const BreadcrumbsVariant: Pick<{
16
16
  readonly NEUTRAL: "neutral";
17
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
18
17
  readonly PRIMARY: "primary";
19
18
  readonly ACCENT: "accent";
20
- readonly ACCENT_GHOST: "accent-ghost";
21
19
  readonly SUCCESS: "success";
22
20
  readonly WARNING: "warning";
23
21
  readonly DANGER: "danger";
22
+ readonly ACCENT_GHOST: "accent-ghost";
24
23
  readonly DANGER_GHOST: "danger-ghost";
24
+ readonly SUBTLE: "subtle";
25
25
  readonly GHOST: "ghost";
26
26
  }, "PRIMARY" | "GHOST">;
27
27
  export declare class OdxBreadcrumbs extends CustomElement {
package/dist/components/button/button.d.ts CHANGED
@@ -16,14 +16,14 @@ export declare const ButtonBadgePosition: Pick<{
16
16
  export type ButtonVariant = ValuesOf<typeof ButtonVariant>;
17
17
  export declare const ButtonVariant: Pick<{
18
18
  readonly NEUTRAL: "neutral";
19
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
20
19
  readonly PRIMARY: "primary";
21
20
  readonly ACCENT: "accent";
22
- readonly ACCENT_GHOST: "accent-ghost";
23
21
  readonly SUCCESS: "success";
24
22
  readonly WARNING: "warning";
25
23
  readonly DANGER: "danger";
24
+ readonly ACCENT_GHOST: "accent-ghost";
26
25
  readonly DANGER_GHOST: "danger-ghost";
26
+ readonly SUBTLE: "subtle";
27
27
  readonly GHOST: "ghost";
28
28
  }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER" | "DANGER_GHOST" | "GHOST">;
29
29
  export declare class OdxButton extends LinkControlElement {
package/dist/components/card/card.d.ts CHANGED
@@ -9,14 +9,14 @@ declare global {
9
9
  export type CardVariant = ValuesOf<typeof CardVariant>;
10
10
  export declare const CardVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
12
  readonly PRIMARY: "primary";
14
13
  readonly ACCENT: "accent";
15
- readonly ACCENT_GHOST: "accent-ghost";
16
14
  readonly SUCCESS: "success";
17
15
  readonly WARNING: "warning";
18
16
  readonly DANGER: "danger";
17
+ readonly ACCENT_GHOST: "accent-ghost";
19
18
  readonly DANGER_GHOST: "danger-ghost";
19
+ readonly SUBTLE: "subtle";
20
20
  readonly GHOST: "ghost";
21
21
  }, "NEUTRAL" | "GHOST">;
22
22
  declare const OdxCard_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
package/dist/components/chip/chip.d.ts CHANGED
@@ -9,16 +9,16 @@ declare global {
9
9
  export type ChipVariant = ValuesOf<typeof ChipVariant>;
10
10
  export declare const ChipVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
12
  readonly PRIMARY: "primary";
14
13
  readonly ACCENT: "accent";
15
- readonly ACCENT_GHOST: "accent-ghost";
16
14
  readonly SUCCESS: "success";
17
15
  readonly WARNING: "warning";
18
16
  readonly DANGER: "danger";
17
+ readonly ACCENT_GHOST: "accent-ghost";
19
18
  readonly DANGER_GHOST: "danger-ghost";
19
+ readonly SUBTLE: "subtle";
20
20
  readonly GHOST: "ghost";
21
- }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
21
+ }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
22
22
  declare const OdxChip_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
23
23
  export declare class OdxChip extends OdxChip_base {
24
24
  #private;
package/dist/components/empty-state/empty-state.d.ts CHANGED
@@ -25,16 +25,16 @@ export declare const EmptyStateSize: Pick<{
25
25
  export type EmptyStateVariant = ValuesOf<typeof EmptyStateVariant>;
26
26
  export declare const EmptyStateVariant: Pick<{
27
27
  readonly NEUTRAL: "neutral";
28
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
29
28
  readonly PRIMARY: "primary";
30
29
  readonly ACCENT: "accent";
31
- readonly ACCENT_GHOST: "accent-ghost";
32
30
  readonly SUCCESS: "success";
33
31
  readonly WARNING: "warning";
34
32
  readonly DANGER: "danger";
33
+ readonly ACCENT_GHOST: "accent-ghost";
35
34
  readonly DANGER_GHOST: "danger-ghost";
35
+ readonly SUBTLE: "subtle";
36
36
  readonly GHOST: "ghost";
37
- }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "DANGER">;
37
+ }, "NEUTRAL" | "DANGER" | "SUBTLE">;
38
38
  export declare class OdxEmptyState extends CustomElement {
39
39
  static observeSlots: boolean;
40
40
  alignment: EmptyStateAlignment;
package/dist/components/highlight/highlight.d.ts CHANGED
@@ -13,14 +13,14 @@ declare global {
13
13
  export type HighlightVariant = ValuesOf<typeof HighlightVariant>;
14
14
  export declare const HighlightVariant: Pick<{
15
15
  readonly NEUTRAL: "neutral";
16
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
17
16
  readonly PRIMARY: "primary";
18
17
  readonly ACCENT: "accent";
19
- readonly ACCENT_GHOST: "accent-ghost";
20
18
  readonly SUCCESS: "success";
21
19
  readonly WARNING: "warning";
22
20
  readonly DANGER: "danger";
21
+ readonly ACCENT_GHOST: "accent-ghost";
23
22
  readonly DANGER_GHOST: "danger-ghost";
23
+ readonly SUBTLE: "subtle";
24
24
  readonly GHOST: "ghost";
25
25
  }, "NEUTRAL" | "ACCENT" | "DANGER">;
26
26
  declare const OdxHighlight_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
package/dist/components/inline-message/inline-message.d.ts CHANGED
@@ -19,14 +19,14 @@ export declare const InlineMessageSize: Pick<{
19
19
  export type InlineMessageVariant = ValuesOf<typeof InlineMessageVariant>;
20
20
  export declare const InlineMessageVariant: Pick<{
21
21
  readonly NEUTRAL: "neutral";
22
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
23
22
  readonly PRIMARY: "primary";
24
23
  readonly ACCENT: "accent";
25
- readonly ACCENT_GHOST: "accent-ghost";
26
24
  readonly SUCCESS: "success";
27
25
  readonly WARNING: "warning";
28
26
  readonly DANGER: "danger";
27
+ readonly ACCENT_GHOST: "accent-ghost";
29
28
  readonly DANGER_GHOST: "danger-ghost";
29
+ readonly SUBTLE: "subtle";
30
30
  readonly GHOST: "ghost";
31
31
  }, "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
32
32
  export declare class OdxInlineMessage extends CustomElement {
package/dist/components/key-value/key-value.d.ts CHANGED
@@ -29,14 +29,14 @@ export declare const KeyValueSize: Pick<{
29
29
  export type KeyValueVariant = ValuesOf<typeof KeyValueVariant>;
30
30
  export declare const KeyValueVariant: Pick<{
31
31
  readonly NEUTRAL: "neutral";
32
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
33
32
  readonly PRIMARY: "primary";
34
33
  readonly ACCENT: "accent";
35
- readonly ACCENT_GHOST: "accent-ghost";
36
34
  readonly SUCCESS: "success";
37
35
  readonly WARNING: "warning";
38
36
  readonly DANGER: "danger";
37
+ readonly ACCENT_GHOST: "accent-ghost";
39
38
  readonly DANGER_GHOST: "danger-ghost";
39
+ readonly SUBTLE: "subtle";
40
40
  readonly GHOST: "ghost";
41
41
  }, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER">;
42
42
  export declare class OdxKeyValue extends CustomElement {
package/dist/components/list-item/list-item.d.ts CHANGED
@@ -1,10 +1,24 @@
1
1
  import { CanBeExpanded, LinkControlElement } from '../../main.js';
2
+ import { ValuesOf } from '../../utils/main.js';
2
3
  import { PropertyValues, TemplateResult } from 'lit';
3
4
  declare global {
4
5
  interface HTMLElementTagNameMap {
5
6
  'odx-list-item': OdxListItem;
6
7
  }
7
8
  }
9
+ export type ListItemVariant = ValuesOf<typeof ListItemVariant>;
10
+ export declare const ListItemVariant: Pick<{
11
+ readonly NEUTRAL: "neutral";
12
+ readonly PRIMARY: "primary";
13
+ readonly ACCENT: "accent";
14
+ readonly SUCCESS: "success";
15
+ readonly WARNING: "warning";
16
+ readonly DANGER: "danger";
17
+ readonly ACCENT_GHOST: "accent-ghost";
18
+ readonly DANGER_GHOST: "danger-ghost";
19
+ readonly SUBTLE: "subtle";
20
+ readonly GHOST: "ghost";
21
+ }, "NEUTRAL" | "WARNING" | "DANGER">;
8
22
  declare const OdxListItem_base: import('../../utils/main.js').Constructor<CanBeExpanded> & typeof LinkControlElement;
9
23
  export declare class OdxListItem extends OdxListItem_base {
10
24
  #private;
@@ -12,6 +26,7 @@ export declare class OdxListItem extends OdxListItem_base {
12
26
  expandControl?: HTMLElement;
13
27
  muted: boolean;
14
28
  selected: boolean;
29
+ variant: ListItemVariant;
15
30
  isExpandable(): boolean;
16
31
  connectedCallback(): void;
17
32
  protected render(): TemplateResult;
package/dist/components/menu-item/menu-item.d.ts CHANGED
@@ -17,14 +17,14 @@ export declare const MenuItemSize: Pick<Pick<{
17
17
  export type MenuItemVariant = ValuesOf<typeof MenuItemVariant>;
18
18
  export declare const MenuItemVariant: Pick<{
19
19
  readonly NEUTRAL: "neutral";
20
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
21
20
  readonly PRIMARY: "primary";
22
21
  readonly ACCENT: "accent";
23
- readonly ACCENT_GHOST: "accent-ghost";
24
22
  readonly SUCCESS: "success";
25
23
  readonly WARNING: "warning";
26
24
  readonly DANGER: "danger";
25
+ readonly ACCENT_GHOST: "accent-ghost";
27
26
  readonly DANGER_GHOST: "danger-ghost";
27
+ readonly SUBTLE: "subtle";
28
28
  readonly GHOST: "ghost";
29
29
  }, "NEUTRAL" | "DANGER">;
30
30
  export declare class OdxMenuItem extends LinkControlElement {
package/dist/components/slider/slider-handle.d.ts CHANGED
@@ -10,14 +10,14 @@ declare global {
10
10
  export type SliderHandleVariant = ValuesOf<typeof Variant>;
11
11
  export declare const SliderHandleVariant: Pick<{
12
12
  readonly NEUTRAL: "neutral";
13
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
14
13
  readonly PRIMARY: "primary";
15
14
  readonly ACCENT: "accent";
16
- readonly ACCENT_GHOST: "accent-ghost";
17
15
  readonly SUCCESS: "success";
18
16
  readonly WARNING: "warning";
19
17
  readonly DANGER: "danger";
18
+ readonly ACCENT_GHOST: "accent-ghost";
20
19
  readonly DANGER_GHOST: "danger-ghost";
20
+ readonly SUBTLE: "subtle";
21
21
  readonly GHOST: "ghost";
22
22
  }, "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
23
23
  declare const OdxSliderHandle_base: import('../../utils/main.js').Constructor<IsDraggable> & import('../../utils/main.js').Constructor<NumberFormControl> & typeof CustomElement;
package/dist/components/status/status.d.ts CHANGED
@@ -9,14 +9,14 @@ declare global {
9
9
  export type StatusVariant = ValuesOf<typeof StatusVariant>;
10
10
  export declare const StatusVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
12
  readonly PRIMARY: "primary";
14
13
  readonly ACCENT: "accent";
15
- readonly ACCENT_GHOST: "accent-ghost";
16
14
  readonly SUCCESS: "success";
17
15
  readonly WARNING: "warning";
18
16
  readonly DANGER: "danger";
17
+ readonly ACCENT_GHOST: "accent-ghost";
19
18
  readonly DANGER_GHOST: "danger-ghost";
19
+ readonly SUBTLE: "subtle";
20
20
  readonly GHOST: "ghost";
21
21
  }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
22
22
  export declare class OdxStatus extends CustomElement {
package/dist/components/text/text.d.ts CHANGED
@@ -17,16 +17,16 @@ export declare const TextSize: Pick<{
17
17
  export type TextVariant = ValuesOf<typeof TextVariant>;
18
18
  export declare const TextVariant: Pick<{
19
19
  readonly NEUTRAL: "neutral";
20
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
21
20
  readonly PRIMARY: "primary";
22
21
  readonly ACCENT: "accent";
23
- readonly ACCENT_GHOST: "accent-ghost";
24
22
  readonly SUCCESS: "success";
25
23
  readonly WARNING: "warning";
26
24
  readonly DANGER: "danger";
25
+ readonly ACCENT_GHOST: "accent-ghost";
27
26
  readonly DANGER_GHOST: "danger-ghost";
27
+ readonly SUBTLE: "subtle";
28
28
  readonly GHOST: "ghost";
29
- }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "ACCENT" | "SUCCESS" | "DANGER">;
29
+ }, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER" | "SUBTLE">;
30
30
  export declare class OdxText extends CustomElement {
31
31
  strong: boolean;
32
32
  inline: boolean;
package/dist/components/tile/tile.d.ts CHANGED
@@ -9,14 +9,14 @@ declare global {
9
9
  export type TileVariant = ValuesOf<typeof TileVariant>;
10
10
  export declare const TileVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
12
  readonly PRIMARY: "primary";
14
13
  readonly ACCENT: "accent";
15
- readonly ACCENT_GHOST: "accent-ghost";
16
14
  readonly SUCCESS: "success";
17
15
  readonly WARNING: "warning";
18
16
  readonly DANGER: "danger";
17
+ readonly ACCENT_GHOST: "accent-ghost";
19
18
  readonly DANGER_GHOST: "danger-ghost";
19
+ readonly SUBTLE: "subtle";
20
20
  readonly GHOST: "ghost";
21
21
  }, "NEUTRAL">;
22
22
  export type TileAlignment = ValuesOf<typeof TileAlignment>;
package/dist/components/toast/toast.d.ts CHANGED
@@ -10,14 +10,14 @@ declare global {
10
10
  export type ToastVariant = ValuesOf<typeof ToastVariant>;
11
11
  export declare const ToastVariant: Pick<{
12
12
  readonly NEUTRAL: "neutral";
13
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
14
13
  readonly PRIMARY: "primary";
15
14
  readonly ACCENT: "accent";
16
- readonly ACCENT_GHOST: "accent-ghost";
17
15
  readonly SUCCESS: "success";
18
16
  readonly WARNING: "warning";
19
17
  readonly DANGER: "danger";
18
+ readonly ACCENT_GHOST: "accent-ghost";
20
19
  readonly DANGER_GHOST: "danger-ghost";
20
+ readonly SUBTLE: "subtle";
21
21
  readonly GHOST: "ghost";
22
22
  }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
23
23
  export declare class OdxToast extends CustomElement {
package/dist/components/toggle-button/toggle-button.d.ts CHANGED
@@ -11,14 +11,14 @@ declare global {
11
11
  export type ToggleButtonVariant = ValuesOf<typeof ToggleButtonVariant>;
12
12
  export declare const ToggleButtonVariant: Pick<{
13
13
  readonly NEUTRAL: "neutral";
14
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
15
14
  readonly PRIMARY: "primary";
16
15
  readonly ACCENT: "accent";
17
- readonly ACCENT_GHOST: "accent-ghost";
18
16
  readonly SUCCESS: "success";
19
17
  readonly WARNING: "warning";
20
18
  readonly DANGER: "danger";
19
+ readonly ACCENT_GHOST: "accent-ghost";
21
20
  readonly DANGER_GHOST: "danger-ghost";
21
+ readonly SUBTLE: "subtle";
22
22
  readonly GHOST: "ghost";
23
23
  }, "ACCENT" | "GHOST">;
24
24
  declare const OdxToggleButton_base: import('../../utils/main.js').Constructor<CheckboxControl> & typeof InteractiveControlElement;
package/dist/components/tooltip/tooltip.d.ts CHANGED
@@ -33,14 +33,14 @@ export declare const TooltipSize: Pick<{
33
33
  export type TooltipVariant = ValuesOf<typeof TooltipVariant>;
34
34
  export declare const TooltipVariant: Pick<{
35
35
  readonly NEUTRAL: "neutral";
36
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
37
36
  readonly PRIMARY: "primary";
38
37
  readonly ACCENT: "accent";
39
- readonly ACCENT_GHOST: "accent-ghost";
40
38
  readonly SUCCESS: "success";
41
39
  readonly WARNING: "warning";
42
40
  readonly DANGER: "danger";
41
+ readonly ACCENT_GHOST: "accent-ghost";
43
42
  readonly DANGER_GHOST: "danger-ghost";
43
+ readonly SUBTLE: "subtle";
44
44
  readonly GHOST: "ghost";
45
45
  }, "NEUTRAL" | "ACCENT" | "DANGER">;
46
46
  export declare class OdxTooltip extends PopoverHost {
package/dist/components.js CHANGED
@@ -1709,9 +1709,9 @@ __decorateClass([
1709
1709
  ], _OdxCheckboxGroup.prototype, "layout", 2);
1710
1710
  let OdxCheckboxGroup = _OdxCheckboxGroup;
1711
1711
 
1712
- const styles$Y = ":host{--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed);--_color-foreground:var(--odx-color-foreground-rest);--_height:var(--odx-size-150);--_border-radius:var(--_height);--_spacing-inline:var(--odx-control-spacing-inline-md);gap:var(--odx-control-spacing-sm);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_spacing-inline);height:var(--_height);color:var(--_color-foreground);place-items:center;display:inline-flex}:host,#base{transition:var(--odx-transition-reduced);transition-property:color,background-color}#base{min-width:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}::slotted(odx-icon){font-size:var(--odx-typography-font-size-text-md)}#action{--_height:var(--odx-control-addon-size-md);--_spacing-inline:var(--odx-control-spacing-sm);--_addon-size:var(--odx-control-addon-size-xs);border-radius:inherit}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([variant=primary],[variant=accent],[variant=success],[variant=warning],[variant=danger]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([variant=neutral-subtle]){--_color-background:var(--odx-color-background-neutral-subtle)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-background-hover:var(--odx-color-background-success-hover);--_color-background-pressed:var(--odx-color-background-success-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);#action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background:var(--_color-background-hover)}:host([interactive]:active){--_color-background:var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background:var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
1712
+ const styles$Y = ":host{--_color-background:var(--odx-color-background-neutral-rest);--_color-background-hover:var(--odx-color-background-neutral-hover);--_color-background-pressed:var(--odx-color-background-neutral-pressed);--_color-foreground:var(--odx-color-foreground-rest);--_height:var(--odx-size-150);--_border-radius:var(--_height);--_spacing-inline:var(--odx-control-spacing-inline-md);gap:var(--odx-control-spacing-sm);border-radius:var(--_border-radius);background-color:var(--_color-background);cursor:inherit;padding-inline:var(--_spacing-inline);height:var(--_height);color:var(--_color-foreground);place-items:center;display:inline-flex}:host,#base{transition:var(--odx-transition-reduced);transition-property:color,background-color}#base{min-width:var(--odx-size-150);text-align:center;line-height:inherit;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}::slotted(odx-icon){font-size:var(--odx-typography-font-size-text-md)}#action{--_height:var(--odx-control-addon-size-md);--_spacing-inline:var(--odx-control-spacing-sm);--_addon-size:var(--odx-control-addon-size-xs);border-radius:inherit}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}:host(:is([variant=primary],[variant=accent],[variant=success],[variant=warning],[variant=danger]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([variant=primary]){--_color-background:var(--odx-color-background-primary-rest);--_color-background-hover:var(--odx-color-background-primary-hover);--_color-background-pressed:var(--odx-color-background-primary-pressed);--_color-foreground:var(--odx-color-foreground-inverse)}:host([variant=accent]){--_color-background:var(--odx-color-background-accent-rest);--_color-background-hover:var(--odx-color-background-accent-hover);--_color-background-pressed:var(--odx-color-background-accent-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([variant=success]){--_color-background:var(--odx-color-background-success-rest);--_color-background-hover:var(--odx-color-background-success-hover);--_color-background-pressed:var(--odx-color-background-success-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-rest);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-foreground:var(--odx-color-foreground-rest-static)}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-rest);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-inverse-static)}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);#action{pointer-events:none}}:host([interactive]){cursor:pointer}:host([interactive]:hover){--_color-background:var(--_color-background-hover)}:host([interactive]:active){--_color-background:var(--_color-background-pressed)}:host([disabled][interactive]){--_color-background:var(--odx-color-background-disabled-rest);cursor:not-allowed}:host([removable]){padding-inline-end:0}";
1713
1713
 
1714
- const ChipVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
1714
+ const ChipVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
1715
1715
  const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
1716
1716
  constructor() {
1717
1717
  super(...arguments);
@@ -1789,11 +1789,11 @@ __decorateClass([
1789
1789
  ], _OdxDrawer.prototype, "position", 2);
1790
1790
  let OdxDrawer = _OdxDrawer;
1791
1791
 
1792
- const styles$W = ":host{--max-width:var(--odx-layout-width-md);--icon-size:var(--odx-size-225);--_content-gap:var(--odx-layout-spacing-sm);text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;margin-inline:auto;display:flex}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-width:var(--max-width)}.icon{font-size:var(--icon-size)}:host([alignment=start]){justify-content:flex-start}:host,:host([size=md]){gap:var(--odx-layout-spacing-lg);padding:var(--odx-layout-spacing-lg)}:host([size=sm]){--max-width:var(--odx-layout-width-sm);--icon-size:var(--odx-size-150);--_content-gap:var(--odx-spacing-12);gap:var(--odx-layout-spacing-md);padding:var(--odx-layout-spacing-md);.description{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}}:host([size=md]){.description{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--max-width:var(--odx-layout-width-lg);--icon-size:var(--odx-size-300);--_content-gap:var(--odx-layout-spacing-md);.title{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}}:host([variant=neutral-subtle]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=danger]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
1792
+ const styles$W = ":host{--max-width:var(--odx-layout-width-md);--icon-size:var(--odx-size-225);--_content-gap:var(--odx-layout-spacing-sm);text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;margin-inline:auto;display:flex}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-width:var(--max-width)}.icon{font-size:var(--icon-size)}:host([alignment=start]){justify-content:flex-start}:host,:host([size=md]){gap:var(--odx-layout-spacing-lg);padding:var(--odx-layout-spacing-lg)}:host([size=sm]){--max-width:var(--odx-layout-width-sm);--icon-size:var(--odx-size-150);--_content-gap:var(--odx-spacing-12);gap:var(--odx-layout-spacing-md);padding:var(--odx-layout-spacing-md);.description{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}}:host([size=md]){.description{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}}:host([size=lg]){--max-width:var(--odx-layout-width-lg);--icon-size:var(--odx-size-300);--_content-gap:var(--odx-layout-spacing-md);.title{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}}:host([variant=subtle]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=danger]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
1793
1793
 
1794
1794
  const EmptyStateAlignment = pick(Alignment, ["START", "CENTER"]);
1795
1795
  const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
1796
- const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
1796
+ const EmptyStateVariant = pick(Variant, ["NEUTRAL", "SUBTLE", "DANGER"]);
1797
1797
  const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
1798
1798
  constructor() {
1799
1799
  super(...arguments);
@@ -2694,13 +2694,15 @@ __decorateClass([
2694
2694
  ], _OdxLineClamp.prototype, "max", 2);
2695
2695
  let OdxLineClamp = _OdxLineClamp;
2696
2696
 
2697
- const styles$J = "@layer base{:host{--_indent-level:1;place-items:initial;max-width:100%;height:auto;min-height:var(--_height);flex-direction:column;display:flex}#base{z-index:var(--odx-z-level-interactive);padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-transition-default)}odx-toggle-content{width:100%}::slotted(odx-list){--_item-indent-level:calc(var(--_indent-level) + 1)}:host(:last-of-type) #separator{opacity:0}}@layer variant{#base:has(#separator:active){--_color-background-pressed:var(--_color-background-hover)}}@layer state{:host(:not([muted],[data-odx-expandable]):hover):after{opacity:0}:host([muted]:not([disabled],[data-odx-expandable])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--_color-background-hover)}:host([selected][disabled]){--_color-background:var(--odx-color-background-disabled-selected);--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-foreground:var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){#separator{opacity:1}#expand-control{--icon-rotate:180deg}}:host(:is(:not([size]),[size=md],[size=sm])){--_icon-spacing:var(--odx-spacing-12)}:host([size=sm]){--_addon-size:var(--odx-control-addon-size-md)}:host([size=lg]){--_icon-spacing:var(--odx-spacing-25)}}";
2697
+ const styles$J = "@layer base{:host{--_color-background-selected:var(--odx-color-background-transparent-selected);--_color-background-selected-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground-selected:var(--_color-foreground);--_color-stroke-selected:transparent;--_indent-level:1;place-items:initial;max-width:100%;height:auto;min-height:var(--_height);flex-direction:column;display:flex}#base{z-index:var(--odx-z-level-interactive);padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#separator{--spacing:0px;--inner-spacing:var(--odx-spacing-25)}#expand-control::part(icon){transition:var(--odx-transition-default)}odx-toggle-content{width:100%}::slotted(odx-list){--_item-indent-level:calc(var(--_indent-level) + 1)}:host(:last-of-type) #separator{opacity:0}}@layer state{:host(:not([muted],[data-odx-expandable]):hover):after{opacity:0}:host([muted]:not([disabled],[data-odx-expandable])){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);cursor:default}:host([expanded]){#separator{opacity:1}#expand-control{--icon-rotate:180deg}}:host(:is(:not([size]),[size=md],[size=sm])){--_icon-spacing:var(--odx-spacing-12)}:host([size=sm]){--_addon-size:var(--odx-control-addon-size-md)}:host([size=lg]){--_icon-spacing:var(--odx-spacing-25)}}@layer variant{:host(:is([variant=danger],[variant=warning]):not([disabled])){font-weight:var(--odx-typography-font-weight-medium);#base:focus-visible{box-shadow:var(--odx-focus-ring-inner)}}:host([variant=danger]){--_color-background:var(--odx-color-background-danger-hover);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-background-selected:var(--odx-color-background-danger-rest);--_color-background-selected-hover:var(--odx-color-background-danger-rest);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-foreground-selected:var(--odx-color-foreground-inverse-static)}:host([variant=warning]){--_color-background:var(--odx-color-background-warning-hover);--_color-background-hover:var(--odx-color-background-warning-hover);--_color-background-pressed:var(--odx-color-background-warning-pressed);--_color-background-selected:var(--odx-color-background-warning-rest);--_color-background-selected-hover:var(--odx-color-background-warning-rest);--_color-foreground:var(--odx-color-foreground-rest-static);--_color-foreground-selected:var(--odx-color-foreground-rest-static)}}@layer overrides{:host([disabled]){--_color-background:transparent;--_color-stroke:transparent}:host([selected]){--_color-background:var(--_color-background-selected);--_color-background-hover:var(--_color-background-selected-hover);--_color-background-pressed:var(--_color-background-hover);--_color-foreground:var(--_color-foreground-selected);--_color-stroke:var(--_color-stroke-selected)}:host([disabled][selected]){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}}";
2698
2698
 
2699
+ const ListItemVariant = pick(Variant, ["NEUTRAL", "DANGER", "WARNING"]);
2699
2700
  const _OdxListItem = class _OdxListItem extends CanBeExpanded(LinkControlElement) {
2700
2701
  constructor() {
2701
2702
  super(...arguments);
2702
2703
  this.muted = false;
2703
2704
  this.selected = false;
2705
+ this.variant = ListItemVariant.NEUTRAL;
2704
2706
  }
2705
2707
  static {
2706
2708
  customElement("odx-list-item", styles$J)(_OdxListItem);
@@ -2764,6 +2766,9 @@ __decorateClass([
2764
2766
  __decorateClass([
2765
2767
  property({ type: Boolean, reflect: true, useDefault: true })
2766
2768
  ], _OdxListItem.prototype, "selected", 2);
2769
+ __decorateClass([
2770
+ property({ reflect: true, useDefault: true })
2771
+ ], _OdxListItem.prototype, "variant", 2);
2767
2772
  let OdxListItem = _OdxListItem;
2768
2773
 
2769
2774
  const styles$I = ":host{--_item-indent-level:1;display:block}::slotted(odx-list-item){--_indent-level:var(--_item-indent-level)}";
@@ -3192,7 +3197,7 @@ __decorateClass([
3192
3197
  ], _OdxNavigation.prototype, "size", 2);
3193
3198
  let OdxNavigation = _OdxNavigation;
3194
3199
 
3195
- const styles$z = ":host{--_page-width:var(--odx-page-size,1400px);--_page-content-width:var(--odx-page-content-size,auto);--page-header-height:0px;--page-subheader-height:0px;--page-offset-top:calc(var(--page-header-height) + var(--page-subheader-height));background-color:var(--odx-color-background-base);grid-template:\"header header\"minmax(0,auto)\"sidebar subheader\"minmax(0,auto)\"sidebar content\"minmax(0,1fr)\"footer footer\"minmax(0,auto)/minmax(0,auto) minmax(0,100%);min-height:100dvh;display:grid}#header,#subheader,#sidebar{position:sticky}#subheader,#sidebar{z-index:var(--odx-z-level-sticky-foreground);inset-block-start:var(--page-header-height)}#subheader,#content{background-color:inherit;width:100%;max-width:var(--_page-width)}#header{z-index:calc(var(--odx-z-level-sticky-foreground) + 1);grid-area:header;inset-block-start:0}#subheader{padding-block:calc(var(--odx-layout-spacing-lg)/2);padding-inline:var(--odx-layout-spacing-lg);grid-area:subheader}#sidebar{height:calc(100dvh - var(--page-header-height));grid-area:sidebar;display:flex}#content{padding-inline:var(--odx-layout-spacing-lg);grid-area:content;height:100%}#footer{grid-area:footer}::slotted([slot=sidebar]),::slotted(odx-page-layout){min-height:100%}:host([alignment=center]){#header,#subheader,#content{margin-inline:auto}#header{width:100%}::slotted(odx-header){justify-content:center}}:host([layout=narrow]){--odx-page-size:1200px;--odx-page-content-size:var(--odx-page-content-size,80ch)}:host([layout=wide]){--odx-page-size:1800px;--odx-page-content-size:var(--odx-page-content-size,120ch)}:host([layout=full]){--odx-page-size:auto;--odx-page-content-size:auto}@media(width<1000px){:host{--odx-layout-spacing-lg:var(--odx-layout-spacing-md)}}";
3200
+ const styles$z = ":host{--_page-width:var(--odx-page-size,1400px);--_page-content-width:var(--odx-page-content-size,auto);--page-header-height:0px;--page-offset-top:var(--page-header-height);background-color:var(--odx-color-background-base);grid-template:\"header header\"minmax(0,auto)\"start content\"minmax(0,1fr)\"footer footer\"minmax(0,auto)/minmax(0,auto) minmax(0,1fr);min-height:100dvh;display:grid}#header,.panel{position:sticky}#header{z-index:calc(var(--odx-z-level-sticky-foreground) + 1);grid-area:header;inset-block-start:0}#content{background-color:inherit;padding-inline:var(--odx-layout-spacing-lg);width:100%;max-width:var(--_page-width);grid-area:content;height:100%}#footer{grid-area:footer}.panel{z-index:var(--odx-z-level-sticky-foreground);height:calc(100dvh - var(--page-header-height));grid-area:start;display:flex;inset-block-start:var(--page-offset-top);& slot::slotted(*){max-height:100%}}::slotted([slot=start]),::slotted(odx-page-layout){min-height:100%}:host([alignment=center]){#header,#content{margin-inline:auto}#header{width:100%}::slotted(odx-header){justify-content:center}}:host([layout=narrow]){--odx-page-size:1200px;--odx-page-content-size:var(--odx-page-content-size,80ch)}:host([layout=wide]){--odx-page-size:1800px;--odx-page-content-size:var(--odx-page-content-size,120ch)}:host([layout=full]){--odx-page-size:auto;--odx-page-content-size:auto}@media(width<1000px){:host{--odx-layout-spacing-lg:var(--odx-layout-spacing-md)}}";
3196
3201
 
3197
3202
  const PageAlignment = pick(Alignment, ["START", "CENTER"]);
3198
3203
  const PageLayout = { DEFAULT: "default", NARROW: "narrow", WIDE: "wide", FULL: "full" };
@@ -3209,7 +3214,6 @@ const _OdxPage = class _OdxPage extends CustomElement {
3209
3214
  super.firstUpdated(props);
3210
3215
  observeElementResize(this, () => {
3211
3216
  this.style.setProperty("--page-header-height", toPx(this.headerElement.offsetHeight));
3212
- this.style.setProperty("--page-subheader-height", toPx(this.subheaderElement.offsetHeight));
3213
3217
  });
3214
3218
  }
3215
3219
  disconnectedCallback() {
@@ -3217,7 +3221,7 @@ const _OdxPage = class _OdxPage extends CustomElement {
3217
3221
  unobserveElementResize(this);
3218
3222
  }
3219
3223
  render() {
3220
- return html`<div id="header"><slot name="header"></slot></div><div id="subheader"><slot name="subheader"></slot></div><div id="sidebar"><slot name="sidebar"></slot></div><div id="content"><slot></slot></div><div id="footer"><slot name="footer"></slot></div>`;
3224
+ return html`<div id="header"><slot name="header"></slot></div><div id="start" class="panel"><slot name="start"></slot></div><div id="content"><slot></slot></div><div id="footer"><slot name="footer"></slot></div>`;
3221
3225
  }
3222
3226
  };
3223
3227
  __decorateClass([
@@ -3234,7 +3238,7 @@ __decorateClass([
3234
3238
  ], _OdxPage.prototype, "layout", 2);
3235
3239
  let OdxPage = _OdxPage;
3236
3240
 
3237
- const styles$y = ":host{--page-layout-offset-top:var(--page-offset-top,0px);background-color:var(--odx-color-background-base);grid-template:\"panel-start header panel-end\"minmax(0,auto)\"panel-start content panel-end\"minmax(0,1fr)\"panel-start footer panel-end\"minmax(0,auto)/minmax(0,auto) minmax(0,100%) minmax(0,auto);padding-block-end:var(--odx-layout-spacing-lg);display:grid}#header,#content,#footer,.panel{flex-direction:column;display:flex}#header,#footer,.panel{z-index:var(--odx-z-level-sticky);background-color:inherit;position:sticky}#header,.panel{inset-block-start:var(--page-layout-offset-top)}#header,.content{max-width:var(--_page-content-width,auto)}#header{margin-inline:calc(-1*var(--odx-layout-spacing-lg));padding-inline:var(--odx-layout-spacing-lg);grid-area:header}#content{grid-area:content}#footer{grid-area:footer;margin-block-end:calc(-1*var(--odx-layout-spacing-lg));padding-block-start:0;position:sticky;inset-block:auto 0}.panel{max-height:calc(100dvh - var(--page-layout-offset-top) - var(--odx-layout-spacing-lg));flex:1;overflow:hidden auto;& slot::slotted(*){max-height:100%}}#panel-start{grid-area:panel-start}#panel-end{grid-area:panel-end}::slotted([slot=panel-start]){margin-inline-end:var(--odx-layout-spacing-lg)}::slotted([slot=panel-end]){margin-inline-start:var(--odx-layout-spacing-lg)}::slotted(odx-page-layout){padding-block-end:0}";
3241
+ const styles$y = ":host{--page-layout-offset-top:var(--page-offset-top,0px);--_spacing:var(--odx-layout-spacing-lg);background-color:var(--odx-color-background-base);grid-template:\"header header header\"minmax(0,auto)\"panel-start content-header panel-end\"minmax(0,auto)\"panel-start content panel-end\"minmax(0,1fr)\"panel-start footer panel-end\"minmax(0,auto)/minmax(0,auto) minmax(0,1fr) minmax(0,auto);display:grid}#header,#content,#footer,.panel{flex-direction:column;display:flex}#content-header,#footer,.panel{z-index:var(--odx-z-level-sticky);background-color:inherit;position:sticky}#content-header,.content{max-width:var(--_page-content-width,auto)}#header{z-index:var(--odx-z-level-sticky-foreground);grid-area:header}#content-header{z-index:var(--odx-z-level-sticky);margin-block-end:0;margin-inline:calc(-1*var(--_spacing));padding-block-end:0;padding-inline:var(--_spacing);grid-area:content-header;inset-block-start:var(--page-layout-offset-top)}#content{grid-area:content}#footer{grid-area:footer;position:sticky;inset-block:auto 0}.panel{max-height:calc(100dvh - var(--page-layout-offset-top) - var(--_spacing));flex:1;inset-block-start:calc(var(--page-layout-offset-top) + var(--_spacing));overflow:hidden auto;& slot::slotted(*){max-height:100%}}#panel-start{grid-area:panel-start}#panel-end{grid-area:panel-end}::slotted([slot=panel-start]){margin-inline-end:var(--_spacing)}::slotted([slot=panel-end]){margin-inline-start:var(--_spacing)}";
3238
3242
 
3239
3243
  const PageLayoutAlignment = pick(Alignment, ["START", "CENTER", "END"]);
3240
3244
  const _OdxPageLayout = class _OdxPageLayout extends CustomElement {
@@ -3249,7 +3253,7 @@ const _OdxPageLayout = class _OdxPageLayout extends CustomElement {
3249
3253
  this.observeSlots = true;
3250
3254
  }
3251
3255
  render() {
3252
- return html`${this.whenSlotted("panel-start", (slot) => html`<div id="panel-start" class="panel">${slot}</div>`)} ${this.whenSlotted("header", (slot) => html`<div id="header">${slot}</div>`)}<div id="content"><slot></slot></div>${this.whenSlotted("panel-end", (slot) => html`<div id="panel-end" class="panel">${slot}</div>`)} ${this.whenSlotted("footer", (slot) => html`<div id="footer">${slot}</div>`)}`;
3256
+ return html`${this.whenSlotted("panel-start", (slot) => html`<div id="panel-start" class="panel">${slot}</div>`)} ${this.whenSlotted("header", (slot) => html`<div id="header">${slot}</div>`)} ${this.whenSlotted("content-header", (slot) => html`<div id="content-header">${slot}</div>`)}<div id="content"><slot></slot></div>${this.whenSlotted("panel-end", (slot) => html`<div id="panel-end" class="panel">${slot}</div>`)} ${this.whenSlotted("footer", (slot) => html`<div id="footer">${slot}</div>`)}`;
3253
3257
  }
3254
3258
  };
3255
3259
  __decorateClass([
@@ -4587,10 +4591,10 @@ __decorateClass([
4587
4591
  ], _OdxTable.prototype, "items", 2);
4588
4592
  let OdxTable = _OdxTable;
4589
4593
 
4590
- const styles$7 = "@layer variant{:host([variant=neutral]){color:var(--odx-color-foreground-rest)}:host([variant=neutral-subtle]){color:var(--odx-color-foreground-rest-subtle)}:host([variant=accent]){color:var(--odx-color-background-accent-rest)}:host([variant=success]){color:var(--odx-color-background-success-rest)}:host([variant=danger]){color:var(--odx-color-foreground-danger-rest)}}";
4594
+ const styles$7 = "@layer variant{:host([variant=neutral]){color:var(--odx-color-foreground-rest)}:host([variant=accent]){color:var(--odx-color-foreground-accent-rest)}:host([variant=success]){color:var(--odx-color-foreground-success-rest)}:host([variant=danger]){color:var(--odx-color-foreground-danger-rest)}:host([variant=subtle]){color:var(--odx-color-foreground-rest-subtle)}}";
4591
4595
 
4592
4596
  const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
4593
- const TextVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "ACCENT", "SUCCESS", "DANGER"]);
4597
+ const TextVariant = pick(Variant, ["NEUTRAL", "SUBTLE", "ACCENT", "SUCCESS", "DANGER"]);
4594
4598
  const _OdxText = class _OdxText extends CustomElement {
4595
4599
  constructor() {
4596
4600
  super(...arguments);
@@ -4943,4 +4947,4 @@ __decorateClass([
4943
4947
  ], _OdxTranslate.prototype, "context", 2);
4944
4948
  let OdxTranslate = _OdxTranslate;
4945
4949
 
4946
- export { AccordionIndicatorPosition, 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, InlineMessageSize, 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, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, createModal, scrollContainerNext, scrollContainerPrevious, sliderContext };
4950
+ export { AccordionIndicatorPosition, 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, InlineMessageSize, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, ListItemVariant, 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, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, createModal, scrollContainerNext, scrollContainerPrevious, sliderContext };
package/dist/lib/models.d.ts CHANGED
@@ -32,14 +32,14 @@ export declare const Size: {
32
32
  export type Variant = ValuesOf<typeof Variant>;
33
33
  export declare const Variant: {
34
34
  readonly NEUTRAL: "neutral";
35
- readonly NEUTRAL_SUBTLE: "neutral-subtle";
36
35
  readonly PRIMARY: "primary";
37
36
  readonly ACCENT: "accent";
38
- readonly ACCENT_GHOST: "accent-ghost";
39
37
  readonly SUCCESS: "success";
40
38
  readonly WARNING: "warning";
41
39
  readonly DANGER: "danger";
40
+ readonly ACCENT_GHOST: "accent-ghost";
42
41
  readonly DANGER_GHOST: "danger-ghost";
42
+ readonly SUBTLE: "subtle";
43
43
  readonly GHOST: "ghost";
44
44
  };
45
45
  //# sourceMappingURL=models.d.ts.map
package/dist/main.js CHANGED
@@ -279,7 +279,7 @@ const CheckboxControl = (superClass) => {
279
279
  return CheckboxControlBehavior;
280
280
  };
281
281
 
282
- const styles$3 = "@layer reset{html{box-sizing:border-box}html,body{tab-size:4;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}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}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{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);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;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],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),\"Noto Sans\",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,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,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,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,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,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,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{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}.odx-content{:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}}[data-odx-control]:has([data-odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[data-odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}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}}";
282
+ const styles$3 = "@layer reset{html{box-sizing:border-box}html,body{tab-size:4;min-height:100vh;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(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;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{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);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;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],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),\"Noto Sans\",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,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,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,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,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,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,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{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}.odx-content{:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}}[data-odx-control]:has([data-odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[data-odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}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}}";
283
283
 
284
284
  function customElement(tagName, ...styles2) {
285
285
  return (target) => {
@@ -939,15 +939,15 @@ const Size = {
939
939
  };
940
940
  const Variant = {
941
941
  NEUTRAL: "neutral",
942
- NEUTRAL_SUBTLE: "neutral-subtle",
943
942
  PRIMARY: "primary",
944
943
  // TODO: Propose to rename to 'brand'
945
944
  ACCENT: "accent",
946
- ACCENT_GHOST: "accent-ghost",
947
945
  SUCCESS: "success",
948
946
  WARNING: "warning",
949
947
  DANGER: "danger",
948
+ ACCENT_GHOST: "accent-ghost",
950
949
  DANGER_GHOST: "danger-ghost",
950
+ SUBTLE: "subtle",
951
951
  GHOST: "ghost"
952
952
  };
953
953
 
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @layer odx.reset{html{box-sizing:border-box}html,body{tab-size:4;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}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}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer odx.base{.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);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& 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)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.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)}.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);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;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],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),"Noto Sans",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,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,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,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,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,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,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{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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)}}}@layer odx.variant,odx.state,odx.theme;@layer odx.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}}@layer base{html,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)}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}.odx-content{:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}}[data-odx-control]:has([data-odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[data-odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}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}}
1
+ @layer odx.reset{html{box-sizing:border-box}html,body{tab-size:4;min-height:100vh;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(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;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer odx.base{.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);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-control-color-background-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& 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)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.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)}.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);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;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],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),"Noto Sans",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;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,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,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,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,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,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,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{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;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)}}}@layer odx.variant,odx.state,odx.theme;@layer odx.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}}@layer base{html,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)}html{scroll-behavior:smooth;scrollbar-color:var(--odx-color-scrollbar)transparent}::selection{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-lg))}}.odx-content{:is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}}[data-odx-control]:has([data-odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[data-odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@odx/foundation",
3
3
  "displayName": "ODX Design System Foundation",
4
4
  "description": "A library of Web Component building blocks for ODX",
5
- "version": "1.0.0-beta.248",
5
+ "version": "1.0.0-beta.249",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -33,8 +33,8 @@
33
33
  "stylelint": "16.25.0",
34
34
  "tinyglobby": "0.2.15",
35
35
  "@odx-internal/config-stylelint": "0.0.0",
36
- "@odx-internal/config-vite": "0.0.0",
37
36
  "@odx-internal/config-typescript": "0.0.0",
37
+ "@odx-internal/config-vite": "0.0.0",
38
38
  "@odx-internal/utils-storybook": "0.0.0",
39
39
  "@odx/design-tokens": "2.5.0"
40
40
  },