@odx/foundation 1.0.0-beta.207 → 1.0.0-beta.209

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 +1 -5
  2. package/dist/components/badge/badge.d.ts +0 -4
  3. package/dist/components/button/button.d.ts +14 -11
  4. package/dist/components/button-group/button-group.d.ts +3 -2
  5. package/dist/components/chip/chip.d.ts +0 -4
  6. package/dist/components/empty-state/empty-state.d.ts +0 -4
  7. package/dist/components/highlight/highlight.d.ts +1 -5
  8. package/dist/components/inline-message/inline-message.d.ts +0 -4
  9. package/dist/components/key-value/key-value.d.ts +0 -4
  10. package/dist/components/menu-item/menu-item.d.ts +0 -4
  11. package/dist/components/select/select.d.ts +1 -3
  12. package/dist/components/status/status.d.ts +0 -4
  13. package/dist/components/text/text.d.ts +0 -4
  14. package/dist/components/tile/tile.d.ts +0 -4
  15. package/dist/components/toast/toast.d.ts +0 -4
  16. package/dist/components/toggle-button/toggle-button.d.ts +6 -6
  17. package/dist/components/tooltip/tooltip.d.ts +0 -4
  18. package/dist/components.js +54 -47
  19. package/dist/lib/behaviors/listbox-control.d.ts +1 -4
  20. package/dist/lib/behaviors/option-control.d.ts +1 -1
  21. package/dist/lib/link-control-element.d.ts +0 -1
  22. package/dist/lib/models/variant.d.ts +0 -4
  23. package/dist/main.js +14 -43
  24. package/package.json +3 -3
package/dist/components/avatar/avatar.d.ts CHANGED
@@ -25,15 +25,11 @@ export declare const AvatarVariant: Pick<{
25
25
  readonly NEUTRAL: "neutral";
26
26
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
27
27
  readonly PRIMARY: "primary";
28
- readonly PRIMARY_SUBTLE: "primary-subtle";
29
28
  readonly ACCENT: "accent";
30
- readonly ACCENT_SUBTLE: "accent-subtle";
31
29
  readonly SUCCESS: "success";
32
30
  readonly WARNING: "warning";
33
31
  readonly DANGER: "danger";
34
- readonly DANGER_SUBTLE: "danger-subtle";
35
- readonly GHOST: "ghost";
36
- }, "GHOST" | "NEUTRAL" | "PRIMARY" | "ACCENT">;
32
+ }, "NEUTRAL" | "PRIMARY" | "ACCENT">;
37
33
  export declare class OdxAvatar extends CustomElement {
38
34
  interactive: boolean;
39
35
  name: string;
package/dist/components/badge/badge.d.ts CHANGED
@@ -26,14 +26,10 @@ export declare const BadgeVariant: Pick<{
26
26
  readonly NEUTRAL: "neutral";
27
27
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
28
28
  readonly PRIMARY: "primary";
29
- readonly PRIMARY_SUBTLE: "primary-subtle";
30
29
  readonly ACCENT: "accent";
31
- readonly ACCENT_SUBTLE: "accent-subtle";
32
30
  readonly SUCCESS: "success";
33
31
  readonly WARNING: "warning";
34
32
  readonly DANGER: "danger";
35
- readonly DANGER_SUBTLE: "danger-subtle";
36
- readonly GHOST: "ghost";
37
33
  }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
38
34
  export declare class OdxBadge extends CustomElement {
39
35
  appearance: BadgeAppearance;
package/dist/components/button/button.d.ts CHANGED
@@ -7,30 +7,33 @@ declare global {
7
7
  }
8
8
  }
9
9
  export declare const buttonDirective: import('../../utils/main.js').BooleanAttributeDirective<"odx-button">;
10
+ export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
11
+ export declare const ButtonAppearance: Pick<{
12
+ readonly FILL: "fill";
13
+ readonly SUBTLE: "subtle";
14
+ readonly GHOST: "ghost";
15
+ }, "FILL" | "GHOST">;
16
+ export type ButtonBadgePosition = ValuesOf<typeof ButtonBadgePosition>;
17
+ export declare const ButtonBadgePosition: Pick<{
18
+ readonly START: "start";
19
+ readonly CENTER: "center";
20
+ readonly END: "end";
21
+ }, "START" | "END">;
10
22
  export type ButtonVariant = ValuesOf<typeof ButtonVariant>;
11
23
  export declare const ButtonVariant: Pick<{
12
24
  readonly NEUTRAL: "neutral";
13
25
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
14
26
  readonly PRIMARY: "primary";
15
- readonly PRIMARY_SUBTLE: "primary-subtle";
16
27
  readonly ACCENT: "accent";
17
- readonly ACCENT_SUBTLE: "accent-subtle";
18
28
  readonly SUCCESS: "success";
19
29
  readonly WARNING: "warning";
20
30
  readonly DANGER: "danger";
21
- readonly DANGER_SUBTLE: "danger-subtle";
22
- readonly GHOST: "ghost";
23
- }, "GHOST" | "NEUTRAL" | "PRIMARY" | "ACCENT" | "DANGER" | "DANGER_SUBTLE">;
24
- export type ButtonBadgePosition = ValuesOf<typeof ButtonBadgePosition>;
25
- export declare const ButtonBadgePosition: Pick<{
26
- readonly START: "start";
27
- readonly CENTER: "center";
28
- readonly END: "end";
29
- }, "START" | "END">;
31
+ }, "NEUTRAL" | "PRIMARY" | "ACCENT" | "WARNING" | "DANGER">;
30
32
  export declare class OdxButton extends LinkControlElement {
31
33
  #private;
32
34
  static readonly formAssociated = true;
33
35
  active: boolean;
36
+ appearance: ButtonAppearance;
34
37
  badgePosition: ButtonBadgePosition;
35
38
  /**
36
39
  * The type of the button.
package/dist/components/button-group/button-group.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import { ControlSize, CustomElement } from '../../main.js';
2
2
  import { PropertyValues, TemplateResult } from 'lit';
3
- import { ButtonVariant } from '../button/button.js';
3
+ import { ButtonAppearance, ButtonVariant } from '../button/button.js';
4
4
  declare global {
5
5
  interface HTMLElementTagNameMap {
6
6
  'odx-button-group': OdxButtonGroup;
7
7
  }
8
8
  }
9
9
  export declare class OdxButtonGroup extends CustomElement {
10
+ appearance?: ButtonAppearance;
10
11
  size: ControlSize;
11
- variant: ButtonVariant;
12
+ variant?: ButtonVariant;
12
13
  vertical: boolean;
13
14
  connectedCallback(): void;
14
15
  protected render(): TemplateResult;
package/dist/components/chip/chip.d.ts CHANGED
@@ -11,14 +11,10 @@ export declare const ChipVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
12
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
13
  readonly PRIMARY: "primary";
14
- readonly PRIMARY_SUBTLE: "primary-subtle";
15
14
  readonly ACCENT: "accent";
16
- readonly ACCENT_SUBTLE: "accent-subtle";
17
15
  readonly SUCCESS: "success";
18
16
  readonly WARNING: "warning";
19
17
  readonly DANGER: "danger";
20
- readonly DANGER_SUBTLE: "danger-subtle";
21
- readonly GHOST: "ghost";
22
18
  }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "PRIMARY" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
23
19
  declare const OdxChip_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
24
20
  export declare class OdxChip extends OdxChip_base {
package/dist/components/empty-state/empty-state.d.ts CHANGED
@@ -27,14 +27,10 @@ export declare const EmptyStateVariant: Pick<{
27
27
  readonly NEUTRAL: "neutral";
28
28
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
29
29
  readonly PRIMARY: "primary";
30
- readonly PRIMARY_SUBTLE: "primary-subtle";
31
30
  readonly ACCENT: "accent";
32
- readonly ACCENT_SUBTLE: "accent-subtle";
33
31
  readonly SUCCESS: "success";
34
32
  readonly WARNING: "warning";
35
33
  readonly DANGER: "danger";
36
- readonly DANGER_SUBTLE: "danger-subtle";
37
- readonly GHOST: "ghost";
38
34
  }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "DANGER">;
39
35
  export declare class OdxEmptyState extends CustomElement {
40
36
  alignment: EmptyStateAlignment;
package/dist/components/highlight/highlight.d.ts CHANGED
@@ -15,15 +15,11 @@ export declare const HighlightVariant: Pick<{
15
15
  readonly NEUTRAL: "neutral";
16
16
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
17
17
  readonly PRIMARY: "primary";
18
- readonly PRIMARY_SUBTLE: "primary-subtle";
19
18
  readonly ACCENT: "accent";
20
- readonly ACCENT_SUBTLE: "accent-subtle";
21
19
  readonly SUCCESS: "success";
22
20
  readonly WARNING: "warning";
23
21
  readonly DANGER: "danger";
24
- readonly DANGER_SUBTLE: "danger-subtle";
25
- readonly GHOST: "ghost";
26
- }, "NEUTRAL" | "ACCENT" | "ACCENT_SUBTLE" | "DANGER" | "DANGER_SUBTLE">;
22
+ }, "NEUTRAL" | "ACCENT" | "DANGER">;
27
23
  declare const OdxHighlight_base: import('../../utils/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
28
24
  export declare class OdxHighlight extends OdxHighlight_base {
29
25
  #private;
package/dist/components/inline-message/inline-message.d.ts CHANGED
@@ -12,14 +12,10 @@ export declare const InlineMessageVariant: Pick<{
12
12
  readonly NEUTRAL: "neutral";
13
13
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
14
14
  readonly PRIMARY: "primary";
15
- readonly PRIMARY_SUBTLE: "primary-subtle";
16
15
  readonly ACCENT: "accent";
17
- readonly ACCENT_SUBTLE: "accent-subtle";
18
16
  readonly SUCCESS: "success";
19
17
  readonly WARNING: "warning";
20
18
  readonly DANGER: "danger";
21
- readonly DANGER_SUBTLE: "danger-subtle";
22
- readonly GHOST: "ghost";
23
19
  }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
24
20
  export declare class OdxInlineMessage extends CustomElement {
25
21
  dismissible: boolean;
package/dist/components/key-value/key-value.d.ts CHANGED
@@ -31,14 +31,10 @@ export declare const KeyValueVariant: Pick<{
31
31
  readonly NEUTRAL: "neutral";
32
32
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
33
33
  readonly PRIMARY: "primary";
34
- readonly PRIMARY_SUBTLE: "primary-subtle";
35
34
  readonly ACCENT: "accent";
36
- readonly ACCENT_SUBTLE: "accent-subtle";
37
35
  readonly SUCCESS: "success";
38
36
  readonly WARNING: "warning";
39
37
  readonly DANGER: "danger";
40
- readonly DANGER_SUBTLE: "danger-subtle";
41
- readonly GHOST: "ghost";
42
38
  }, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER">;
43
39
  export declare class OdxKeyValue extends CustomElement {
44
40
  alignment: KeyValueAlignment;
package/dist/components/menu-item/menu-item.d.ts CHANGED
@@ -21,14 +21,10 @@ export declare const MenuItemVariant: Pick<{
21
21
  readonly NEUTRAL: "neutral";
22
22
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
23
23
  readonly PRIMARY: "primary";
24
- readonly PRIMARY_SUBTLE: "primary-subtle";
25
24
  readonly ACCENT: "accent";
26
- readonly ACCENT_SUBTLE: "accent-subtle";
27
25
  readonly SUCCESS: "success";
28
26
  readonly WARNING: "warning";
29
27
  readonly DANGER: "danger";
30
- readonly DANGER_SUBTLE: "danger-subtle";
31
- readonly GHOST: "ghost";
32
28
  }, "NEUTRAL" | "DANGER">;
33
29
  export declare class OdxMenuItem extends LinkControlElement {
34
30
  protected loadingSpinnerSlot: "prefix";
package/dist/components/select/select.d.ts CHANGED
@@ -12,11 +12,9 @@ export declare class OdxSelect extends ListboxControl<OdxOption> {
12
12
  static shadowRootOptions: ShadowRootInit;
13
13
  private dropdownOpen;
14
14
  protected readonly dropdown: OdxDropdown;
15
- maxVisibleSelectedOptions: number;
15
+ clearable: boolean;
16
16
  constructor();
17
17
  clear(): void;
18
- showDropdown(): void;
19
- hideDropdown(): void;
20
18
  connectedCallback(): void;
21
19
  firstUpdated(props: PropertyValues<this>): void;
22
20
  protected canSelect(option: OdxOption): boolean;
package/dist/components/status/status.d.ts CHANGED
@@ -11,14 +11,10 @@ export declare const StatusVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
12
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
13
  readonly PRIMARY: "primary";
14
- readonly PRIMARY_SUBTLE: "primary-subtle";
15
14
  readonly ACCENT: "accent";
16
- readonly ACCENT_SUBTLE: "accent-subtle";
17
15
  readonly SUCCESS: "success";
18
16
  readonly WARNING: "warning";
19
17
  readonly DANGER: "danger";
20
- readonly DANGER_SUBTLE: "danger-subtle";
21
- readonly GHOST: "ghost";
22
18
  }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
23
19
  export declare class OdxStatus extends CustomElement {
24
20
  animated: boolean;
package/dist/components/text/text.d.ts CHANGED
@@ -19,14 +19,10 @@ export declare const TextVariant: Pick<{
19
19
  readonly NEUTRAL: "neutral";
20
20
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
21
21
  readonly PRIMARY: "primary";
22
- readonly PRIMARY_SUBTLE: "primary-subtle";
23
22
  readonly ACCENT: "accent";
24
- readonly ACCENT_SUBTLE: "accent-subtle";
25
23
  readonly SUCCESS: "success";
26
24
  readonly WARNING: "warning";
27
25
  readonly DANGER: "danger";
28
- readonly DANGER_SUBTLE: "danger-subtle";
29
- readonly GHOST: "ghost";
30
26
  }, "NEUTRAL" | "NEUTRAL_SUBTLE" | "ACCENT" | "SUCCESS" | "DANGER">;
31
27
  export declare class OdxText extends CustomElement {
32
28
  strong: boolean;
package/dist/components/tile/tile.d.ts CHANGED
@@ -11,14 +11,10 @@ export declare const TileVariant: Pick<{
11
11
  readonly NEUTRAL: "neutral";
12
12
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
13
13
  readonly PRIMARY: "primary";
14
- readonly PRIMARY_SUBTLE: "primary-subtle";
15
14
  readonly ACCENT: "accent";
16
- readonly ACCENT_SUBTLE: "accent-subtle";
17
15
  readonly SUCCESS: "success";
18
16
  readonly WARNING: "warning";
19
17
  readonly DANGER: "danger";
20
- readonly DANGER_SUBTLE: "danger-subtle";
21
- readonly GHOST: "ghost";
22
18
  }, "NEUTRAL">;
23
19
  export type TileAlignment = ValuesOf<typeof TileAlignment>;
24
20
  export declare const TileAlignment: Pick<{
package/dist/components/toast/toast.d.ts CHANGED
@@ -12,14 +12,10 @@ export declare const ToastVariant: Pick<{
12
12
  readonly NEUTRAL: "neutral";
13
13
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
14
14
  readonly PRIMARY: "primary";
15
- readonly PRIMARY_SUBTLE: "primary-subtle";
16
15
  readonly ACCENT: "accent";
17
- readonly ACCENT_SUBTLE: "accent-subtle";
18
16
  readonly SUCCESS: "success";
19
17
  readonly WARNING: "warning";
20
18
  readonly DANGER: "danger";
21
- readonly DANGER_SUBTLE: "danger-subtle";
22
- readonly GHOST: "ghost";
23
19
  }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
24
20
  export declare class OdxToast extends CustomElement {
25
21
  icon?: OdxIconName;
package/dist/components/toggle-button/toggle-button.d.ts CHANGED
@@ -8,6 +8,12 @@ declare global {
8
8
  'odx-toggle-button': OdxToggleButton;
9
9
  }
10
10
  }
11
+ export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
12
+ export declare const ToggleButtonAppearance: Pick<{
13
+ readonly FILL: "fill";
14
+ readonly SUBTLE: "subtle";
15
+ readonly GHOST: "ghost";
16
+ }, "FILL" | "GHOST">;
11
17
  export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
12
18
  export declare const ToggleButtonSize: Pick<{
13
19
  readonly XS: "xs";
@@ -17,12 +23,6 @@ export declare const ToggleButtonSize: Pick<{
17
23
  readonly XL: "xl";
18
24
  readonly XXL: "xxl";
19
25
  }, "SM" | "MD" | "LG">;
20
- export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
21
- export declare const ToggleButtonAppearance: Pick<{
22
- readonly FILL: "fill";
23
- readonly SUBTLE: "subtle";
24
- readonly GHOST: "ghost";
25
- }, "FILL" | "GHOST">;
26
26
  declare const OdxToggleButton_base: import('../../utils/main.js').Constructor<CheckboxControl> & typeof CustomElement;
27
27
  export declare class OdxToggleButton extends OdxToggleButton_base {
28
28
  appearance: ToggleButtonAppearance;
package/dist/components/tooltip/tooltip.d.ts CHANGED
@@ -35,14 +35,10 @@ export declare const TooltipVariant: Pick<{
35
35
  readonly NEUTRAL: "neutral";
36
36
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
37
37
  readonly PRIMARY: "primary";
38
- readonly PRIMARY_SUBTLE: "primary-subtle";
39
38
  readonly ACCENT: "accent";
40
- readonly ACCENT_SUBTLE: "accent-subtle";
41
39
  readonly SUCCESS: "success";
42
40
  readonly WARNING: "warning";
43
41
  readonly DANGER: "danger";
44
- readonly DANGER_SUBTLE: "danger-subtle";
45
- readonly GHOST: "ghost";
46
42
  }, "NEUTRAL" | "DANGER">;
47
43
  export declare class OdxTooltip extends PopoverHost {
48
44
  #private;
package/dist/components.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
2
- import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, Appearance, CheckboxControl, CheckboxControlGroup, DialogElement, ProgressVariant, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
2
+ import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Appearance, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, ProgressVariant, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
3
3
  import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, toPx, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, observeElementResize, unobserveElementResize, isToggleOpen } from '@odx/foundation/utils';
4
4
  import { html, isServer, unsafeCSS, css, nothing } from 'lit';
5
5
  import { property, query, state } from 'lit/decorators.js';
@@ -131,16 +131,18 @@ __decorateClass([
131
131
  ], _OdxAccordion.prototype, "size", 2);
132
132
  let OdxAccordion = _OdxAccordion;
133
133
 
134
- const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=neutral],:not([variant]))){--_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)}:host(:is([variant=neutral],:not([variant]))[loading]){--_color-stroke:var(--odx-color-stroke-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=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([variant=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([variant=danger-subtle]){--_color-background:var(--odx-color-background-danger-subtle);--_color-background-hover:var(--odx-color-background-danger-hover);--_color-background-pressed:var(--odx-color-background-danger-pressed);--_color-foreground:var(--odx-color-foreground-danger-rest);--_color-foreground-hover:var(--odx-color-foreground-inverse-static)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle][loading]){--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle][loading]),:host([variant=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest)}}@layer state{:host(:is([active],[odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-position=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}";
134
+ const styles$1i = "@layer base{:host{font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=label]{flex:initial;text-align:center}::slotted([slot=badge]){--_spacing-badge:25%;inset:0 0 auto auto;z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_spacing-badge)calc(-1*var(--_spacing-badge));position:absolute;inset-inline-end:0}}@layer variant{:host([size=lg]){--_font-size:var(--odx-control-font-size-lg)}:host(:is(:not([variant]),[variant=neutral],[variant=primary],[variant=accent],[variant=danger])) [part~=base]:focus-visible{box-shadow:var(--odx-focus-ring-inner)}:host(:is([variant=neutral],:not([variant]))){--_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)}: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=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([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([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:var(--odx-color-foreground-rest)}:host([variant=primary][appearance=ghost]){--_color-background-hover:var(--odx-color-background-primary-subtle);--_color-background-pressed:var(--odx-color-background-primary-subtle)}:host([variant=accent][appearance=ghost]){--_color-background-hover:var(--odx-color-background-accent-subtle);--_color-background-pressed:var(--odx-color-background-accent-subtle);--_color-foreground:var(--odx-color-foreground-accent-rest)}:host([variant=danger][appearance=ghost]){--_color-background-hover:var(--odx-color-background-danger-subtle);--_color-background-pressed:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][appearance=ghost]){--_color-background-hover:var(--odx-color-background-warning-subtle);--_color-background-pressed:var(--odx-color-background-warning-subtle)}:host([loading]){--_color-background:var(--odx-color-background-neutral-subtle);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=primary][loading]){--_color-background:var(--odx-color-background-primary-subtle)}:host([variant=accent][loading]){--_color-background:var(--odx-color-background-accent-subtle)}:host([variant=danger][loading]){--_color-background:var(--odx-color-background-danger-subtle);--_color-foreground:var(--odx-color-foreground-danger-rest)}:host([variant=warning][loading]){--_color-background:var(--odx-color-background-warning-subtle)}:host([appearance=ghost][loading]){--_color-background:var(--odx-color-background-transparent-rest);--_color-foreground:var(--odx-color-foreground-rest-subtle)}:host([variant=danger][appearance=ghost][loading]){--_color-foreground:var(--odx-color-foreground-danger-rest)}}@layer state{:host(:is([active],[odx-active])){--_color-background:var(--_color-background-pressed);--_color-background-hover:var(--_color-background-pressed)}:host([badge-position=end]) ::slotted([slot=badge]){translate:var(--_spacing-badge)var(--_spacing-badge);inset-block:auto 0}}";
135
135
 
136
136
  const buttonDirective = booleanAttributeDirective({ name: "odx-button" });
137
- const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "DANGER_SUBTLE", "GHOST"]);
137
+ const ButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
138
138
  const ButtonBadgePosition = pick(Alignment, ["START", "END"]);
139
+ const ButtonVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "DANGER", "WARNING"]);
139
140
  const _OdxButton = class _OdxButton extends LinkControlElement {
140
141
  constructor() {
141
142
  super();
142
143
  this.#internals = this.attachInternals();
143
144
  this.active = false;
145
+ this.appearance = ButtonAppearance.FILL;
144
146
  this.badgePosition = ButtonBadgePosition.START;
145
147
  this.type = "button";
146
148
  this.variant = ButtonVariant.NEUTRAL;
@@ -180,6 +182,9 @@ const _OdxButton = class _OdxButton extends LinkControlElement {
180
182
  __decorateClass([
181
183
  property({ type: Boolean, reflect: true, useDefault: true })
182
184
  ], _OdxButton.prototype, "active", 2);
185
+ __decorateClass([
186
+ property({ reflect: true, useDefault: true })
187
+ ], _OdxButton.prototype, "appearance", 2);
183
188
  __decorateClass([
184
189
  property({ reflect: true, attribute: "badge-position", useDefault: true })
185
190
  ], _OdxButton.prototype, "badgePosition", 2);
@@ -359,7 +364,7 @@ class OdxActionGroup extends CustomElement {
359
364
  return html`<slot name="menu-trigger" @slotchange="${this.#handleMenuTriggerSlotChange}"></slot><odx-menu>${items.map((item) => {
360
365
  const prefixIcon = "icon" in item ? item.icon : item.querySelector("odx-icon")?.name;
361
366
  const suffixIcon = item.querySelector('odx-icon[slot="suffix"]')?.name;
362
- const variant = item.variant === MenuItemVariant.DANGER || item.variant === "danger-subtle" ? MenuItemVariant.DANGER : null;
367
+ const variant = item.variant === MenuItemVariant.DANGER ? MenuItemVariant.DANGER : null;
363
368
  const itemLabel = item.getAttribute("label") || item.textContent || item.ariaLabel;
364
369
  return html`<odx-menu-item icon="${optionalAttr(prefixIcon)}" size="${item.size}" variant="${optionalAttr(variant)}" ?disabled="${item.disabled}" @click="${() => !item.disabled && item.click()}">${itemLabel} ${when(suffixIcon, (icon) => html`<odx-icon name="${icon}" slot="suffix"></odx-icon>`)}</odx-menu-item>`;
365
370
  })}</odx-menu>`;
@@ -516,7 +521,7 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
516
521
  if (this.vertical) {
517
522
  return html`<odx-navigation class="container" part="stage"><slot></slot>${indicator}</odx-navigation>`;
518
523
  }
519
- return html`<odx-scroll-container class="container" @change="${this.#handleScrollChange}" exportparts="stage"><odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left" tabindex="-1"></odx-icon-button><slot></slot>${indicator}<odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right" tabindex="-1"></odx-icon-button></odx-scroll-container>`;
524
+ return html`<odx-scroll-container class="container" @change="${this.#handleScrollChange}" exportparts="stage"><odx-icon-button icon="core::chevron-left" appearance="ghost" slot="scroll-action-left" tabindex="-1"></odx-icon-button><slot></slot>${indicator}<odx-icon-button icon="core::chevron-right" appearance="ghost" slot="scroll-action-right" tabindex="-1"></odx-icon-button></odx-scroll-container>`;
520
525
  }
521
526
  updated(props) {
522
527
  super.updated(props);
@@ -653,7 +658,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
653
658
  const activeIndex = this.activeItem.value ? this.#items.value.indexOf(this.activeItem.value) : -1;
654
659
  const alignment = this.vertical ? TabBarAlignment.END : TabBarAlignment.START;
655
660
  const indicatorDisabled = this.#items.value.some((item) => item.appearance === NavigationItemAppearance.LINK);
656
- return html`<odx-tab-bar alignment="${alignment}" ?indicator-disabled="${indicatorDisabled}" controlled .selectedIndex="${activeIndex}" ?vertical="${this.vertical}" part="base"><odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left"></odx-icon-button><slot @slotchange="${this.#handleSlotChange}"></slot><odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right"></odx-icon-button></odx-tab-bar>`;
661
+ return html`<odx-tab-bar alignment="${alignment}" ?indicator-disabled="${indicatorDisabled}" controlled .selectedIndex="${activeIndex}" ?vertical="${this.vertical}" part="base"><odx-icon-button icon="core::chevron-left" appearance="ghost" slot="scroll-action-left"></odx-icon-button><slot @slotchange="${this.#handleSlotChange}"></slot><odx-icon-button icon="core::chevron-right" appearance="ghost" slot="scroll-action-right"></odx-icon-button></odx-tab-bar>`;
657
662
  }
658
663
  updated(props) {
659
664
  if (props.has("root") || props.has("rootMargin") || props.has("threshold")) {
@@ -1126,10 +1131,10 @@ __decorateClass([
1126
1131
  ], _OdxDropdown.prototype, "placement", 2);
1127
1132
  let OdxDropdown = _OdxDropdown;
1128
1133
 
1129
- const styles$17 = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=accent]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}:host([variant=accent-subtle]) ::highlight(odx-highlight){color:var(--odx-color-foreground-accent-rest);background-color:#0000}:host([variant=danger]) ::highlight(odx-highlight){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=danger-subtle]) ::highlight(odx-highlight){color:var(--odx-color-foreground-danger-rest);background-color:#0000}";
1134
+ const styles$17 = "::highlight(odx-highlight){background-color:var(--odx-color-foreground-accent-rest);color:var(--odx-color-foreground-inverse-static)}:host([variant=accent]) ::highlight(odx-highlight){background-color:var(--odx-color-background-accent-subtle);color:var(--odx-color-foreground-accent-rest)}:host([variant=danger]) ::highlight(odx-highlight){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}";
1130
1135
 
1131
1136
  const highlightAttribute = "odx-highlight";
1132
- const HighlightVariant = pick(Variant, ["NEUTRAL", "ACCENT", "ACCENT_SUBTLE", "DANGER", "DANGER_SUBTLE"]);
1137
+ const HighlightVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER"]);
1133
1138
  const _OdxHighlight = class _OdxHighlight extends CanBeDisabled(CustomElement) {
1134
1139
  constructor() {
1135
1140
  super(...arguments);
@@ -1384,11 +1389,11 @@ __decorateClass([
1384
1389
  ], _OdxAutocomplete.prototype, "minQueryLength", 2);
1385
1390
  let OdxAutocomplete = _OdxAutocomplete;
1386
1391
 
1387
- const styles$14 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_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);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}odx-icon,::slotted(odx-icon){font-size:inherit}:host([interactive]){cursor:pointer}:host([interactive]:hover){background-color:var(--_color-background-hover)}:host([interactive]:active){background-color:var(--_color-background-pressed)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-focus-ring-inner)}:host([shape=rectangle]){--_border-radius:var(--odx-border-radius-sm)}: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: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:var(--odx-color-foreground-inverse-static)}:host([variant=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([size=xs]){--size:var(--odx-size-150);font-size:var(--odx-font-size-text-xs)}:host([size=sm]){--size:var(--odx-size-200);font-size:var(--odx-font-size-text-sm)}:host([size=lg]){--size:var(--odx-size-300);font-size:var(--odx-font-size-text-lg)}:host([size=xl]){--size:var(--odx-size-350);font-size:var(--odx-font-size-heading-lg)}:host([size=xxl]){--size:var(--odx-size-400);font-size:var(--odx-font-size-heading-xl)}";
1392
+ const styles$14 = ":host{--size:var(--odx-size-225);--_border-radius:var(--odx-border-radius-circle);--_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);transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid transparent;border-radius:var(--_border-radius);background-color:var(--_color-background);width:var(--size);height:var(--size);vertical-align:middle;color:inherit;font-size:var(--odx-font-size-text-md);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;flex-direction:column;flex:none;place-content:center;place-items:center;transition-property:background-color,border-color;display:flex;position:relative;overflow:clip}::slotted(img){border-radius:var(--_border-radius);width:calc(100% - var(--odx-spacing-12));pointer-events:none;object-fit:cover}odx-icon,::slotted(odx-icon){font-size:inherit}:host([interactive]){cursor:pointer}:host([interactive]:hover){background-color:var(--_color-background-hover)}:host([interactive]:active){background-color:var(--_color-background-pressed)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-focus-ring-inner)}:host([shape=rectangle]){--_border-radius:var(--odx-border-radius-sm)}: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: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:var(--odx-color-foreground-inverse-static)}:host([appearance=ghost]){--_color-background:var(--odx-color-background-transparent-rest);--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed)}:host([size=xs]){--size:var(--odx-size-150);font-size:var(--odx-font-size-text-xs)}:host([size=sm]){--size:var(--odx-size-200);font-size:var(--odx-font-size-text-sm)}:host([size=lg]){--size:var(--odx-size-300);font-size:var(--odx-font-size-text-lg)}:host([size=xl]){--size:var(--odx-size-350);font-size:var(--odx-font-size-heading-lg)}:host([size=xxl]){--size:var(--odx-size-400);font-size:var(--odx-font-size-heading-xl)}";
1388
1393
 
1389
1394
  const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
1390
1395
  const AvatarSize = pick(Size, ["XS", "SM", "MD", "LG", "XL", "XXL"]);
1391
- const AvatarVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT", "GHOST"]);
1396
+ const AvatarVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "ACCENT"]);
1392
1397
  const _OdxAvatar = class _OdxAvatar extends CustomElement {
1393
1398
  constructor() {
1394
1399
  super(...arguments);
@@ -1469,7 +1474,7 @@ __decorateClass([
1469
1474
  ], _OdxBadge.prototype, "variant", 2);
1470
1475
  let OdxBadge = _OdxBadge;
1471
1476
 
1472
- const styles$12 = ":host{display:inline-block}";
1477
+ const styles$12 = ":host{display:inline-block}:host([disabled]){cursor:not-allowed}";
1473
1478
 
1474
1479
  const _OdxLink = class _OdxLink extends CanBeDisabled(CustomElement) {
1475
1480
  constructor() {
@@ -1594,7 +1599,6 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CustomElement {
1594
1599
  constructor() {
1595
1600
  super(...arguments);
1596
1601
  this.size = ControlSize.MD;
1597
- this.variant = ButtonVariant.NEUTRAL;
1598
1602
  this.vertical = false;
1599
1603
  }
1600
1604
  static {
@@ -1611,22 +1615,30 @@ const _OdxButtonGroup = class _OdxButtonGroup extends CustomElement {
1611
1615
  super.updated(props);
1612
1616
  for (const button of getAssignedElements(this.renderRoot, { selector: (element) => buttonDirective.applied(element) })) {
1613
1617
  button.size = this.size;
1614
- button.variant = this.variant;
1618
+ if (props.has("appearance") && this.appearance) {
1619
+ button.appearance = this.appearance;
1620
+ }
1621
+ if (props.has("variant") && this.variant) {
1622
+ button.variant = this.variant;
1623
+ }
1615
1624
  }
1616
1625
  }
1617
1626
  };
1627
+ __decorateClass([
1628
+ property({ reflect: true })
1629
+ ], _OdxButtonGroup.prototype, "appearance", 2);
1618
1630
  __decorateClass([
1619
1631
  property({ reflect: true, useDefault: true })
1620
1632
  ], _OdxButtonGroup.prototype, "size", 2);
1621
1633
  __decorateClass([
1622
- property({ reflect: true, useDefault: true })
1634
+ property({ reflect: true })
1623
1635
  ], _OdxButtonGroup.prototype, "variant", 2);
1624
1636
  __decorateClass([
1625
1637
  property({ type: Boolean, reflect: true, useDefault: true })
1626
1638
  ], _OdxButtonGroup.prototype, "vertical", 2);
1627
1639
  let OdxButtonGroup = _OdxButtonGroup;
1628
1640
 
1629
- const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([variant=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-2);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
1641
+ const styles$$ = ":host{transition:var(--odx-transition-reduced);border:var(--odx-border-width-thin)solid transparent;padding:calc(var(--odx-spacing-lg) - var(--odx-border-width-thin));grid-template:\"image\"minmax(0,auto)\"avatar\"minmax(0,auto)\"header\"minmax(0,auto)\"content\"1fr\"footer\"minmax(0,auto)/1fr;place-content:stretch;max-width:100%;transition-property:box-shadow,transform,border-color;display:grid;overflow:clip}.header,.actions{gap:var(--odx-spacing-sm);justify-content:stretch;align-items:center;display:flex}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{grid-area:avatar;place-items:flex-end;display:flex}.image{margin:calc(-1*var(--odx-spacing-md));grid-area:image;position:relative}.image:after{transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur));position:absolute;inset:0}.content{grid-area:content;overflow:hidden auto}.footer{gap:var(--odx-spacing-md);flex-direction:row;grid-area:footer;justify-content:flex-end;margin-block-start:var(--odx-spacing-md);display:flex}.image+*{margin-block-start:var(--odx-spacing-md)}.image+.avatar{height:0}slot[name=header]::slotted(*){flex:1}slot[name=image]::slotted(*){pointer-events:none;object-fit:cover;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;width:100%;max-height:100%}slot[name=avatar]::slotted(*){margin:0}:host(:is(:not([variant]),[variant=neutral])){border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1)}:host([appearance=ghost]){border-radius:inherit;background-color:var(--odx-color-background-transparent)}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;-webkit-user-select:none;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(var(--odx-spacing-negative-12));box-shadow:var(--odx-shadow-level-2);border-color:#0000;.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host([interactive]:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}";
1630
1642
 
1631
1643
  const CardAppearance = pick(Appearance, ["FILL", "GHOST"]);
1632
1644
  const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
@@ -1726,7 +1738,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
1726
1738
  render() {
1727
1739
  return html`<odx-text class="odx-no-overflow" part="base" size="sm" strong><slot></slot></odx-text>${when(
1728
1740
  this.removable,
1729
- () => html`<odx-icon-button class="action" icon="core::close" ?disabled="${this.disabled}" @click="${this.#handleActionClick}" variant="ghost" size="sm"></odx-icon-button>`
1741
+ () => html`<odx-icon-button class="action" icon="core::close" ?disabled="${this.disabled}" @click="${this.#handleActionClick}" appearance="ghost" size="sm"></odx-icon-button>`
1730
1742
  )}`;
1731
1743
  }
1732
1744
  willUpdate(props) {
@@ -2283,7 +2295,7 @@ const _OdxIconButton = class _OdxIconButton extends OdxButton {
2283
2295
  if (this.labelVariant) {
2284
2296
  return this.labelVariant;
2285
2297
  }
2286
- if (this.variant === ButtonVariant.DANGER || this.variant === ButtonVariant.DANGER_SUBTLE) {
2298
+ if (this.variant === ButtonVariant.DANGER) {
2287
2299
  return TooltipVariant.DANGER;
2288
2300
  }
2289
2301
  return TooltipVariant.NEUTRAL;
@@ -2437,7 +2449,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
2437
2449
  }
2438
2450
  render() {
2439
2451
  const resolvedIcon = this.icon == null ? this.variant ? iconMap[this.variant] : null : this.icon;
2440
- return html`${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name="${icon}"></odx-icon>`)}<div class="base"><slot></slot></div>${when(this.dismissible, () => html`<odx-icon-button class="action" icon="core::close" variant="ghost" @click="${() => this.hide()}"></odx-icon-button>`)}`;
2452
+ return html`${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name="${icon}"></odx-icon>`)}<div class="base"><slot></slot></div>${when(this.dismissible, () => html`<odx-icon-button class="action" icon="core::close" appearance="ghost" @click="${() => this.hide()}"></odx-icon-button>`)}`;
2441
2453
  }
2442
2454
  };
2443
2455
  __decorateClass([
@@ -2537,10 +2549,10 @@ const _OdxInput = class _OdxInput extends FormAssociated(ControlElement) {
2537
2549
  }
2538
2550
  renderControl(type, icon, listener, disabled, slot = "suffix") {
2539
2551
  if (this.hideControls || this.readonly) return nothing;
2540
- return html`<odx-icon-button class="control-${type}" icon="${icon}" size="sm" tabindex="-1" variant="ghost" ?disabled="${disabled}" @click="${listener}" aria-label="${type}" slot="${slot}"></odx-icon-button>`;
2552
+ return html`<odx-icon-button class="control-${type}" icon="${icon}" size="sm" tabindex="-1" appearance="ghost" ?disabled="${disabled}" @click="${listener}" aria-label="${type}" slot="${slot}"></odx-icon-button>`;
2541
2553
  }
2542
2554
  #isClearable() {
2543
- return this.clearable && !this.disabled && !this.readonly && !this.required && Boolean(this.value);
2555
+ return this.clearable && !this.disabled && !this.readonly && Boolean(this.value);
2544
2556
  }
2545
2557
  #handleClear;
2546
2558
  #handleInput;
@@ -2716,7 +2728,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(LinkControlElement
2716
2728
  renderContent() {
2717
2729
  return html`${super.renderContent()} ${when(
2718
2730
  this.isExpandable(),
2719
- () => html`<odx-icon-button class="expand-control" icon="core::chevron-down" variant="ghost" size="${this.size === ControlSize.LG ? ControlSize.LG : ControlSize.SM}" ?disabled="${this.disabled}" .inert="${!this.withExpandControl}"></odx-icon-button>`
2731
+ () => html`<odx-icon-button class="expand-control" icon="core::chevron-down" appearance="ghost" size="${this.size === ControlSize.LG ? ControlSize.LG : ControlSize.SM}" ?disabled="${this.disabled}" .inert="${!this.withExpandControl}"></odx-icon-button>`
2720
2732
  )}`;
2721
2733
  }
2722
2734
  willUpdate(props) {
@@ -2940,7 +2952,7 @@ const _OdxMainMenuButton = class _OdxMainMenuButton extends CustomElement {
2940
2952
  super.connectedCallback();
2941
2953
  }
2942
2954
  render() {
2943
- return html`<odx-icon-button aria-label="Open main menu" label="${optionalAttr(this.label)}" icon="core::menu" variant="ghost"></odx-icon-button>`;
2955
+ return html`<odx-icon-button aria-label="Open main menu" label="${optionalAttr(this.label)}" icon="core::menu" appearance="ghost"></odx-icon-button>`;
2944
2956
  }
2945
2957
  };
2946
2958
  __decorateClass([
@@ -3048,7 +3060,7 @@ class OdxModal extends DialogElement {
3048
3060
  renderContent() {
3049
3061
  return html`<odx-card class="odx-content-box"><odx-area-header><slot name="header" slot="header"></slot><slot name="actions" slot="suffix"></slot>${when(
3050
3062
  this.dismissible,
3051
- () => html`<odx-icon-button icon="core::close" variant="ghost" slot="suffix" @click="${this.dismiss}"></odx-icon-button>`
3063
+ () => html`<odx-icon-button icon="core::close" appearance="ghost" slot="suffix" @click="${this.dismiss}"></odx-icon-button>`
3052
3064
  )}</odx-area-header><slot></slot><odx-area-footer class="odx-align-end" alignment="end" slot="footer"><slot name="footer"></slot></odx-area-footer></odx-card>`;
3053
3065
  }
3054
3066
  update(props) {
@@ -3250,7 +3262,7 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
3250
3262
  this.page = this.totalPages - 1;
3251
3263
  }
3252
3264
  render() {
3253
- return html`<p class="odx-no-overflow">${this.t(`odx.pagination.summary.${this.compact ? "compact" : "default"}`, this.paginationContext)}</p><div class="odx-cluster odx-g-sm odx-nowrap"><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.firstPage")}" icon="core::chevron-left-end" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.firstPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.previousPage")}" icon="core::chevron-left" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.previousPage()}"></odx-icon-button></odx-button-group><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.nextPage")}" icon="core::chevron-right" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.nextPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.lastPage")}" icon="core::chevron-right-end" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.lastPage()}"></odx-icon-button></odx-button-group></div>`;
3265
+ return html`<p class="odx-no-overflow">${this.t(`odx.pagination.summary.${this.compact ? "compact" : "default"}`, this.paginationContext)}</p><div class="odx-cluster odx-g-sm odx-nowrap"><odx-button-group size="sm" appearance="ghost"><odx-icon-button label="${this.t("odx.pagination.firstPage")}" icon="core::chevron-left-end" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.firstPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.previousPage")}" icon="core::chevron-left" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.previousPage()}"></odx-icon-button></odx-button-group><odx-button-group size="sm" appearance="ghost"><odx-icon-button label="${this.t("odx.pagination.nextPage")}" icon="core::chevron-right" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.nextPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.lastPage")}" icon="core::chevron-right-end" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.lastPage()}"></odx-icon-button></odx-button-group></div>`;
3254
3266
  }
3255
3267
  updated(props) {
3256
3268
  super.updated(props);
@@ -3634,28 +3646,31 @@ __decorateClass([
3634
3646
  ], _OdxSearchBar.prototype, "value", 2);
3635
3647
  let OdxSearchBar = _OdxSearchBar;
3636
3648
 
3637
- const styles$o = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;min-width:15ch;max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-stroke-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline) + var(--_spacing-offset))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--_popover-spacing-inner:0;--_popover-offset:0}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}::slotted(odx-link){margin:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md)}:host(:hover){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-stroke:var(--odx-color-stroke-control-readonly);cursor:default;& odx-chip{--_color-background:var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
3649
+ const styles$o = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_height:var(--odx-control-height-md);--_spacing-inline:var(--odx-control-spacing-inline-md);border-radius:var(--odx-border-radius-controls);cursor:pointer;min-width:15ch;max-width:30ch;color:var(--_color-foreground);display:block;overflow:hidden}.base{--_spacing-offset:var(--odx-spacing-12);gap:var(--_spacing-inline);transition:var(--odx-transition-reduced);border-bottom:var(--odx-control-stroke-width)solid var(--_color-stroke);background-color:var(--_color-background);padding-block-start:var(--odx-border-width-thin);padding-inline:calc(2*var(--_spacing-inline))calc(var(--_spacing-inline) + var(--_spacing-offset));height:var(--_height);text-align:start;-webkit-user-select:none;user-select:none;align-items:center;transition-property:background-color,border-color;display:flex;position:relative;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}.value{font-weight:var(--odx-typography-font-weight-medium);margin-inline-end:auto}.indicator{font-size:var(--odx-control-addon-size-md);margin-inline-end:var(--odx-spacing-negative-12)}.action.clear{margin-inline-end:calc(-1*var(--_spacing-inline))}.dropdown{--_popover-spacing-inner:0;--_popover-offset:0}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host(.odx-fill){max-width:100%}:host:has(.dropdown[open]){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}::slotted(odx-link){margin:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md)}:host(:hover){--_color-background:var(--odx-color-background-control-hover);--_color-stroke:var(--odx-color-stroke-control-hover)}}@layer state{:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_spacing-inline)}:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-danger-subtle);--_color-stroke:var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed;& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-stroke:var(--odx-color-stroke-control-readonly);cursor:default;& odx-chip{--_color-background:var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}:host([readonly][invalid]){--_color-stroke:var(--odx-color-stroke-danger-rest)}}";
3638
3650
 
3639
3651
  const _OdxSelect = class _OdxSelect extends ListboxControl {
3640
3652
  constructor() {
3641
3653
  super();
3642
3654
  this.dropdownOpen = false;
3643
- this.maxVisibleSelectedOptions = 2;
3655
+ this.clearable = false;
3644
3656
  this.#handleSlotChange = () => {
3645
- super.handleSlotChange();
3646
3657
  const optionType = this.multiple ? OptionType.CHECKBOX : void 0;
3658
+ const selectedOptions = this.getSelectedOptions();
3647
3659
  for (const option of this.getOptions()) {
3648
3660
  option.type = optionType;
3649
3661
  }
3662
+ this.value ||= this.multiple ? selectedOptions.map((option) => option.value) : selectedOptions[0]?.value ?? "";
3663
+ this.requestUpdate("value");
3650
3664
  };
3651
3665
  this.#handleDropdownToggle = (event) => {
3652
3666
  this.dropdownOpen = isToggleOpen(event);
3653
3667
  if (!isToggleOpen(event)) return;
3654
3668
  const [selectedOption] = this.getSelectedOptions();
3655
- selectedOption?.scrollIntoView({ behavior: "instant" });
3669
+ if (!selectedOption) return;
3670
+ selectedOption.scrollIntoView({ behavior: "instant" });
3656
3671
  };
3657
3672
  this.#handleBlur = () => {
3658
- this.hideDropdown();
3673
+ this.dropdown.hidePopover();
3659
3674
  };
3660
3675
  this.#handleClear = (event) => {
3661
3676
  if (!this.#isClearable()) return;
@@ -3675,7 +3690,7 @@ const _OdxSelect = class _OdxSelect extends ListboxControl {
3675
3690
  };
3676
3691
  this.#handleSelect = () => {
3677
3692
  if (this.multiple) return;
3678
- this.hideDropdown();
3693
+ this.dropdown.hidePopover();
3679
3694
  };
3680
3695
  if (!isServer) {
3681
3696
  this.addEventListener("select", this.#handleSelect);
@@ -3695,12 +3710,6 @@ const _OdxSelect = class _OdxSelect extends ListboxControl {
3695
3710
  clear() {
3696
3711
  this.value = this.multiple ? [] : "";
3697
3712
  }
3698
- showDropdown() {
3699
- this.dropdown.showPopover();
3700
- }
3701
- hideDropdown() {
3702
- this.dropdown.hidePopover();
3703
- }
3704
3713
  connectedCallback() {
3705
3714
  super.connectedCallback();
3706
3715
  this.role = null;
@@ -3721,12 +3730,12 @@ const _OdxSelect = class _OdxSelect extends ListboxControl {
3721
3730
  () => when(!(this.disabled || this.readonly), () => html`<slot name="placeholder">${this.placeholder}</slot>`)
3722
3731
  )}</div>${when(
3723
3732
  this.#isClearable(),
3724
- () => html`<odx-icon-button class="action clear" icon="core::cancel" size="sm" tabindex="-1" variant="ghost" @click="${this.#handleClear}"></odx-icon-button>`,
3733
+ () => html`<odx-icon-button class="action clear" icon="core::cancel" size="sm" tabindex="-1" appearance="ghost" @click="${this.#handleClear}"></odx-icon-button>`,
3725
3734
  () => html`<odx-icon class="indicator" name="core::chevron-down"></odx-icon>`
3726
3735
  )}</div><odx-dropdown class="dropdown" role="listbox" aria-multiselectable="${toAriaBooleanAttribute(this.multiple, false)}" ?disabled="${dropdownDisabled}" match-reference-width focus-disabled @toggle="${this.#handleDropdownToggle}"><slot @slotchange="${this.#handleSlotChange}"></slot></odx-dropdown>`;
3727
3736
  }
3728
3737
  #isClearable() {
3729
- return !(this.disabled || this.readonly || this.required) && this.getSelectedOptions().length > 0;
3738
+ return this.clearable && !this.disabled && !this.readonly && this.getSelectedOptions().length > 0;
3730
3739
  }
3731
3740
  #handleSlotChange;
3732
3741
  #handleDropdownToggle;
@@ -3742,8 +3751,8 @@ __decorateClass([
3742
3751
  query(OdxDropdown.tagName, true)
3743
3752
  ], _OdxSelect.prototype, "dropdown", 2);
3744
3753
  __decorateClass([
3745
- property({ type: Number })
3746
- ], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
3754
+ property({ type: Boolean, reflect: true, useDefault: true })
3755
+ ], _OdxSelect.prototype, "clearable", 2);
3747
3756
  let OdxSelect = _OdxSelect;
3748
3757
 
3749
3758
  const styles$n = ":host{--color:var(--odx-color-stroke-neutral-subtle);--size:var(--odx-spacing-md);--spacing:var(--odx-spacing-sm);--inner-spacing:var(--odx-spacing-md);transition:var(--odx-transition-default);margin-block:calc(var(--spacing) - .5*var(--odx-spacing-px));margin-inline:var(--inner-spacing);text-align:center;align-items:center;transition-property:opacity;display:flex}:before,:after{background-color:var(--color);height:var(--odx-size-px);content:\"\";pointer-events:none;flex:auto;display:block}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-sm);min-width:calc(var(--size)/2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5*var(--odx-spacing-px));flex-direction:column;:after,:before{width:var(--odx-size-px);height:calc(100% - 2*var(--inner-spacing));min-height:calc(var(--size)/2)}}:host([strong]){--color:var(--odx-color-stroke-neutral-strong)}:host([alignment=start]) :before,:host([alignment=end]) :after{flex:0 0 var(--odx-spacing-spacing-md)}";
@@ -4197,7 +4206,7 @@ const _OdxSpinbox = class _OdxSpinbox extends FormAssociated(CustomElement) {
4197
4206
  super.connectedCallback();
4198
4207
  }
4199
4208
  render() {
4200
- return html`${when(!this.readonly, () => html`<odx-icon-button icon="core::chevron-left" variant="ghost" ?disabled="${this.disabled || this.readonly}" @click="${() => this.previous()}" focus-disabled></odx-icon-button>`)}<slot></slot>${when(!this.readonly, () => html`<odx-icon-button icon="core::chevron-right" variant="ghost" ?disabled="${this.disabled || this.readonly}" @click="${() => this.next()}" focus-disabled></odx-icon-button>`)}`;
4209
+ return html`${when(!this.readonly, () => html`<odx-icon-button icon="core::chevron-left" appearance="ghost" ?disabled="${this.disabled || this.readonly}" @click="${() => this.previous()}" focus-disabled></odx-icon-button>`)}<slot></slot>${when(!this.readonly, () => html`<odx-icon-button icon="core::chevron-right" appearance="ghost" ?disabled="${this.disabled || this.readonly}" @click="${() => this.next()}" focus-disabled></odx-icon-button>`)}`;
4201
4210
  }
4202
4211
  #handleInteraction() {
4203
4212
  if (this.disabled || !this.interactive || this.readonly) return;
@@ -4692,8 +4701,8 @@ let OdxToast = _OdxToast;
4692
4701
 
4693
4702
  const styles$3 = "@layer base{:host{--_border-radius:var(--odx-border-radius-sm);--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-foreground:var(--odx-color-foreground-rest);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);column-gap:calc(2*var(--_spacing-inline));transition:var(--odx-transition-default);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding-block:var(--_spacing);padding-inline:calc(2*var(--_spacing-inline));min-width:var(--_height);height:var(--_height);white-space:nowrap;color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition-property:color,background-color,border-color;display:inline-flex;position:relative;overflow:hidden}:host(:hover){border-color:var(--_color-stroke-hover);background-color:var(--_color-background-hover)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}odx-icon,::slotted(odx-icon){--size:var(--_addon-size);margin-inline:calc(-1*var(--_spacing-inline))}[part~=label]{display:inline-block}}@layer state{:host([disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-foreground:var(--odx-color-foreground-rest-subtle);cursor:default}:host([checked][disabled]:not([readonly])){--_color-background:var(--odx-color-background-disabled-selected);--_color-foreground:var(--odx-color-foreground-disabled-selected)}:host([checked]),:host([checked][readonly]){--_color-background:var(--odx-color-background-control-selected);--_color-background-hover:var(--odx-color-background-control-selected-hover);--_color-foreground:var(--odx-color-foreground-inverse-static);--_color-stroke:var(--odx-color-stroke-control-selected);--_color-stroke-hover:var(--odx-color-stroke-control-selected)}:host([checked][required]){cursor:default}:host([appearance=ghost][checked]),:host([appearance=ghost][readonly]){--_color-stroke:transparent}:host([appearance=ghost][checked]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-foreground:var(--odx-color-foreground-rest)}}@layer variant{:host(:is(:not([appearance]),[appearance=fill]):focus-visible){box-shadow:var(--odx-focus-ring-inner)}:host([appearance=ghost]){--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent}:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg)}}";
4694
4703
 
4695
- const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
4696
4704
  const ToggleButtonAppearance = pick(Appearance, ["FILL", "GHOST"]);
4705
+ const ToggleButtonSize = pick(Size, ["SM", "MD", "LG"]);
4697
4706
  const _OdxToggleButton = class _OdxToggleButton extends CheckboxControl(CustomElement) {
4698
4707
  constructor() {
4699
4708
  super(...arguments);
@@ -4824,10 +4833,8 @@ let OdxToggleContent = _OdxToggleContent;
4824
4833
  const styles = ":host{gap:var(--odx-spacing-37);transition:var(--odx-transition-default);border-radius:var(--odx-border-radius-md);padding:var(--odx-spacing-37);font-size:var(--odx-font-size-text-md);align-items:center;transition-property:color,background-color,box-shadow;display:flex;overflow-x:auto}:host([float]){box-shadow:var(--odx-shadow-level-1);background-color:var(--odx-color-background-level-1)}::slotted(:is(odx-title,odx-label,odx-text,odx-icon)){margin-inline:var(--odx-spacing-37)}::slotted(odx-separator){--size:var(--odx-size-150);--spacing:var(--odx-spacing-37);--inner-spacing:0px}:host([size=sm]){padding:var(--odx-spacing-12);font-size:var(--odx-font-size-text-sm);::slotted(odx-separator){--size:var(--odx-size-125)}}";
4825
4834
 
4826
4835
  const ALLOWED_BUTTON_VARIANTS = {
4827
- [ButtonVariant.GHOST]: true,
4828
4836
  [ButtonVariant.PRIMARY]: true,
4829
- [ButtonVariant.DANGER]: true,
4830
- [ButtonVariant.DANGER_SUBTLE]: true
4837
+ [ButtonVariant.DANGER]: true
4831
4838
  };
4832
4839
  const _OdxToolbar = class _OdxToolbar extends CustomElement {
4833
4840
  constructor() {
@@ -4847,7 +4854,7 @@ const _OdxToolbar = class _OdxToolbar extends CustomElement {
4847
4854
  for (const button of buttons) {
4848
4855
  button.size = this.size;
4849
4856
  if (ALLOWED_BUTTON_VARIANTS[button.variant]) continue;
4850
- button.variant = ButtonVariant.GHOST;
4857
+ button.appearance = ButtonAppearance.GHOST;
4851
4858
  }
4852
4859
  }
4853
4860
  };
@@ -4885,4 +4892,4 @@ __decorateClass([
4885
4892
  ], _OdxTranslate.prototype, "context", 2);
4886
4893
  let OdxTranslate = _OdxTranslate;
4887
4894
 
4888
- export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeAppearance, BadgeSize, BadgeVariant, BaseFormat, ButtonBadgePosition, ButtonVariant, CardAppearance, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonAppearance, ToggleButtonSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, sliderContext, tableContext };
4895
+ export { AccordionItemIndicatorPosition, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeAppearance, BadgeSize, BadgeVariant, BaseFormat, ButtonAppearance, ButtonBadgePosition, ButtonVariant, CardAppearance, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LoadingSpinnerType, LogoSize, MenuItemSize, MenuItemVariant, ModalLayout, NavigationItemAppearance, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SidebarPosition, SidebarSize, SkeletonType, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonAppearance, ToggleButtonSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, computePopoverPlacement, sliderContext, tableContext };
package/dist/lib/behaviors/listbox-control.d.ts CHANGED
@@ -14,13 +14,10 @@ export declare class ListboxControl<Option extends OptionControl = OptionControl
14
14
  constructor();
15
15
  getOptions(): Option[];
16
16
  getSelectedOptions(): Option[];
17
- getSelectedIndices(): number[];
18
- protected canAutoSelect(option: Option): boolean;
19
- protected canSelect(option: Option): boolean;
20
17
  toggleOption(option: Option, state?: boolean): void;
21
18
  clear(): void;
22
19
  connectedCallback(): void;
23
- protected handleSlotChange(): Promise<void>;
20
+ protected canSelect(option: Option): boolean;
24
21
  protected updateValue(option?: Option): void;
25
22
  protected willUpdate(props: PropertyValues<this>): void;
26
23
  protected updated(props: PropertyValues<this>): void;
package/dist/lib/behaviors/option-control.d.ts CHANGED
@@ -7,7 +7,7 @@ export type OptionType = ValuesOf<typeof OptionType>;
7
7
  export declare const OptionType: {
8
8
  readonly CHECKBOX: "checkbox";
9
9
  };
10
- export interface OptionControl extends ActiveDescendant, CustomElement {
10
+ export interface OptionControl extends ActiveDescendant, CustomElement, CanBeDisabled {
11
11
  label: string;
12
12
  type?: OptionType;
13
13
  readonly: boolean;
package/dist/lib/link-control-element.d.ts CHANGED
@@ -10,7 +10,6 @@ import { InteractiveControlElement } from './interactive-control-element.js';
10
10
  * @slot - Default slot
11
11
  */
12
12
  export declare class LinkControlElement extends InteractiveControlElement {
13
- static shadowRootOptions: ShadowRootInit;
14
13
  href: string;
15
14
  target: '_blank' | '_parent' | '_self' | '_top' | '';
16
15
  rel: string;
package/dist/lib/models/variant.d.ts CHANGED
@@ -4,14 +4,10 @@ export declare const Variant: {
4
4
  readonly NEUTRAL: "neutral";
5
5
  readonly NEUTRAL_SUBTLE: "neutral-subtle";
6
6
  readonly PRIMARY: "primary";
7
- readonly PRIMARY_SUBTLE: "primary-subtle";
8
7
  readonly ACCENT: "accent";
9
- readonly ACCENT_SUBTLE: "accent-subtle";
10
8
  readonly SUCCESS: "success";
11
9
  readonly WARNING: "warning";
12
10
  readonly DANGER: "danger";
13
- readonly DANGER_SUBTLE: "danger-subtle";
14
- readonly GHOST: "ghost";
15
11
  };
16
12
  export type ProgressVariant = ValuesOf<typeof ProgressVariant>;
17
13
  export declare const ProgressVariant: {
package/dist/main.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
2
- import { createToggleEvent, toAriaBooleanAttribute, booleanAttributeDirective, getKeyInfo, setFocusable, getAssignedElements, getElementFromEvent, getUniqueId, optionalAttr, interactionResponse, createCustomEvent, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener } from '@odx/foundation/utils';
2
+ import { createToggleEvent, toAriaBooleanAttribute, booleanAttributeDirective, getKeyInfo, setFocusable, getAssignedElements, getElementFromEvent, optionalAttr, interactionResponse, createCustomEvent, commandDirective, clickedOutside, addGlobalEventListener, removeGlobalEventListener } from '@odx/foundation/utils';
3
3
  import { property, query } from 'lit/decorators.js';
4
4
  import { unsafeCSS, LitElement, html, isServer } from 'lit';
5
5
  import { u as uniqBy, R as RovingTabindexController, p as pick, m as minBy } from './vendor.js';
6
6
 
7
7
  const name = "@odx/foundation";
8
8
  const displayName = "ODX Design System Foundation";
9
- const version = "1.0.0-beta.207";
9
+ const version = "1.0.0-beta.209";
10
10
  const pkg = {
11
11
  name,
12
12
  displayName,
@@ -591,7 +591,8 @@ class ListboxControl extends FormAssociated(
591
591
  this.activeDescendants = new ActiveDescendantsController(this, {
592
592
  getItems: () => this.getOptions(),
593
593
  onChange: (_, option) => {
594
- if (!(option && this.canAutoSelect(option)) || option.selected) return;
594
+ const canAutoSelect = this.autoSelect && !this.multiple && option && !option.selected && this.canSelect(option);
595
+ if (!canAutoSelect) return;
595
596
  this.toggleOption(option, true);
596
597
  }
597
598
  });
@@ -599,30 +600,27 @@ class ListboxControl extends FormAssociated(
599
600
  this.multiple = false;
600
601
  this.placeholder = "";
601
602
  this.value = "";
602
- this.#handleBlur = (_event) => {
603
- this.activeDescendants.deactivate();
604
- };
605
603
  this.#handleClick = (event) => {
606
604
  const option = getElementFromEvent(event, (node) => node.role === "option");
607
605
  if (!option) return;
608
606
  this.toggleOption(option);
609
- this.#handleOptionSelection(option);
607
+ if (!option.selected) return;
608
+ this.emit("select", { detail: option });
610
609
  };
611
610
  this.#handleFocus = (_event) => {
612
- const [selectedIndex] = this.getSelectedIndices();
611
+ const selectedIndex = this.getOptions().findIndex((option) => !option.disabled && option.selected);
613
612
  this.activeDescendants.activate(selectedIndex);
614
613
  };
615
614
  this.#handleKeydown = (event) => {
616
615
  if (event.target !== this) return;
617
616
  const activeOption = this.activeDescendants.activeItem;
618
- if (!activeOption) return;
619
617
  const key = getKeyInfo(event);
620
- if (!(key.enter || key.space)) return;
618
+ if (!(activeOption && (key.enter || key.space))) return;
621
619
  this.toggleOption(activeOption);
622
- this.#handleOptionSelection(activeOption);
620
+ if (!activeOption.selected) return;
621
+ this.emit("select", { detail: activeOption });
623
622
  };
624
623
  if (!isServer) {
625
- this.addEventListener("focusout", this.#handleBlur);
626
624
  this.addEventListener("focusin", this.#handleFocus);
627
625
  this.addEventListener("click", this.#handleClick);
628
626
  this.addEventListener("keydown", this.#handleKeydown);
@@ -634,15 +632,6 @@ class ListboxControl extends FormAssociated(
634
632
  getSelectedOptions() {
635
633
  return this.getOptions().filter((option) => option.selected);
636
634
  }
637
- getSelectedIndices() {
638
- return this.getOptions().reduce((indices, option, index) => option.selected ? indices.concat(index) : indices, []);
639
- }
640
- canAutoSelect(option) {
641
- return this.autoSelect && !this.multiple && this.canSelect(option);
642
- }
643
- canSelect(option) {
644
- return option.canActivate();
645
- }
646
635
  toggleOption(option, state) {
647
636
  if (!this.canSelect(option)) return;
648
637
  const newState = state ?? !(this.multiple && option.selected);
@@ -656,12 +645,9 @@ class ListboxControl extends FormAssociated(
656
645
  connectedCallback() {
657
646
  super.connectedCallback();
658
647
  this.role ||= "listbox";
659
- this.id ||= getUniqueId(this.localName);
660
648
  }
661
- async handleSlotChange() {
662
- const selectedOptions = this.getSelectedOptions();
663
- this.value ||= this.multiple ? selectedOptions.map((option) => option.value) : selectedOptions[0]?.value ?? "";
664
- this.requestUpdate("value");
649
+ canSelect(option) {
650
+ return option.canActivate();
665
651
  }
666
652
  updateValue(option) {
667
653
  const oldValue = this.value;
@@ -686,7 +672,7 @@ class ListboxControl extends FormAssociated(
686
672
  if (props.has("readonly")) {
687
673
  option.readonly = this.readonly;
688
674
  }
689
- if (props.has("value") && this.canSelect(option)) {
675
+ if (props.has("value") && !option.disabled) {
690
676
  option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
691
677
  }
692
678
  }
@@ -701,11 +687,6 @@ class ListboxControl extends FormAssociated(
701
687
  this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
702
688
  }
703
689
  }
704
- #handleOptionSelection(option) {
705
- if (!option.selected) return;
706
- this.emit("select", { detail: option });
707
- }
708
- #handleBlur;
709
690
  #handleClick;
710
691
  #handleFocus;
711
692
  #handleKeydown;
@@ -1235,12 +1216,6 @@ class LinkControlElement extends InteractiveControlElement {
1235
1216
  this.target = "";
1236
1217
  this.rel = "";
1237
1218
  }
1238
- static {
1239
- this.shadowRootOptions = {
1240
- ...InteractiveControlElement.shadowRootOptions,
1241
- delegatesFocus: true
1242
- };
1243
- }
1244
1219
  render() {
1245
1220
  if (!this.href) return super.render();
1246
1221
  const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
@@ -1318,14 +1293,10 @@ const Variant = {
1318
1293
  NEUTRAL: "neutral",
1319
1294
  NEUTRAL_SUBTLE: "neutral-subtle",
1320
1295
  PRIMARY: "primary",
1321
- PRIMARY_SUBTLE: "primary-subtle",
1322
1296
  ACCENT: "accent",
1323
- ACCENT_SUBTLE: "accent-subtle",
1324
1297
  SUCCESS: "success",
1325
1298
  WARNING: "warning",
1326
- DANGER: "danger",
1327
- DANGER_SUBTLE: "danger-subtle",
1328
- GHOST: "ghost"
1299
+ DANGER: "danger"
1329
1300
  };
1330
1301
  const ProgressVariant = {
1331
1302
  ...pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]),
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.207",
5
+ "version": "1.0.0-beta.209",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -34,10 +34,10 @@
34
34
  "stylelint": "16.23.1",
35
35
  "stylelint-config-concentric-order": "5.2.1",
36
36
  "stylelint-config-standard": "39.0.0",
37
- "@odx-internal/config-vite": "0.0.0",
37
+ "@odx/design-tokens": "1.1.0-rc.8",
38
38
  "@odx-internal/config-typescript": "0.0.0",
39
39
  "@odx-internal/utils-storybook": "0.0.0",
40
- "@odx/design-tokens": "1.1.0-rc.8"
40
+ "@odx-internal/config-vite": "0.0.0"
41
41
  },
42
42
  "sideEffects": [
43
43
  "dist/components-loader.js",