@odx/foundation 1.0.0-beta.147 → 1.0.0-beta.149

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 (8) hide show
  1. package/dist/components/accordion-item/accordion-item.d.ts +2 -1
  2. package/dist/components/accordion-panel/accordion-panel.d.ts +1 -1
  3. package/dist/components/input/input.d.ts +1 -0
  4. package/dist/components/toggle-content/toggle-content.d.ts +3 -2
  5. package/dist/components.js +57 -46
  6. package/dist/main.js +2 -2
  7. package/dist/styles.css +1 -1
  8. package/package.json +2 -2
package/dist/components/accordion-item/accordion-item.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { CanBeExpanded, InteractiveElement, ValuesOf } from '../../lib/main.js';
2
2
  import { PropertyValues, TemplateResult } from 'lit';
3
+ import { OdxAccordionPanel } from '../accordion-panel/accordion-panel.js';
3
4
  declare global {
4
5
  interface HTMLElementTagNameMap {
5
6
  'odx-accordion-item': OdxAccordionItem;
@@ -18,7 +19,7 @@ declare const OdxAccordionItem_base: import('../../lib/main.js').Constructor<Can
18
19
  export declare class OdxAccordionItem extends OdxAccordionItem_base {
19
20
  #private;
20
21
  size: AccordionItemSize;
21
- get panel(): HTMLElement | null;
22
+ get panel(): OdxAccordionPanel | null;
22
23
  protected renderContent(): TemplateResult;
23
24
  protected willUpdate(props: PropertyValues<this>): void;
24
25
  }
package/dist/components/accordion-panel/accordion-panel.d.ts CHANGED
@@ -6,7 +6,7 @@ declare global {
6
6
  }
7
7
  }
8
8
  export declare class OdxAccordionPanel extends CustomElement {
9
- hidden: boolean;
9
+ expanded: boolean;
10
10
  connectedCallback(): void;
11
11
  protected render(): TemplateResult;
12
12
  }
package/dist/components/input/input.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare class OdxInput extends FormControl<string> {
20
20
  step?: number;
21
21
  type: HTMLInputElement['type'];
22
22
  value: string;
23
+ focus(options?: FocusOptions): void;
23
24
  stepUp(): void;
24
25
  stepDown(): void;
25
26
  protected willUpdate(props: PropertyValues<this>): void;
package/dist/components/toggle-content/toggle-content.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import { CustomElement } from '../../lib/main.js';
2
- import { TemplateResult } from 'lit';
2
+ import { PropertyValues, TemplateResult } from 'lit';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
5
  'odx-toggle-content': OdxToggleContent;
6
6
  }
7
7
  }
8
8
  export declare class OdxToggleContent extends CustomElement {
9
- hidden: boolean;
9
+ expanded: boolean;
10
+ protected willUpdate(props: PropertyValues<this>): void;
10
11
  protected render(): TemplateResult;
11
12
  }
package/dist/components.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
2
- import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, Shape, InteractiveLink, getAssignedElement, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
2
+ import { CustomElement, ExpandableItemManager, customElement, getAssignedElements, getUniqueId, CanBeExpanded, InteractiveElement, toAriaBooleanAttribute, Size, Variant, optionalAttr, getIdFromHref, getElementFromEvent, Shape, InteractiveLink, getAssignedElement, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, parseDate, toPx, forwardEvent, OptionControl, SharedResizeObserver, ProgressVariant, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController, clickedOutside, supportsHover } from '@odx/foundation';
3
3
  import { property, query, state } from 'lit/decorators.js';
4
4
  import { html, isServer, unsafeCSS, css, nothing } from 'lit';
5
5
  import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
@@ -49,7 +49,35 @@ __decorateClass([
49
49
  ], _OdxAccordion.prototype, "size", 2);
50
50
  let OdxAccordion = _OdxAccordion;
51
51
 
52
- const styles$1g = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-spacing-37)}:host([size=\"sm\"]){margin-block:0}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([expanded]) [part~=indicator]{--rotate: 180deg}";
52
+ const styles$1g = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
53
+
54
+ const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
55
+ constructor() {
56
+ super(...arguments);
57
+ this.expanded = false;
58
+ }
59
+ static {
60
+ customElement("odx-accordion-panel", styles$1g)(_OdxAccordionPanel);
61
+ }
62
+ connectedCallback() {
63
+ super.connectedCallback();
64
+ this.id ||= getUniqueId(this.localName);
65
+ this.role ||= "region";
66
+ }
67
+ render() {
68
+ return html`
69
+ <odx-toggle-content ?expanded=${this.expanded}>
70
+ <div class="content"><slot></slot></div>
71
+ </odx-toggle-content>
72
+ `;
73
+ }
74
+ };
75
+ __decorateClass([
76
+ property({ type: Boolean, reflect: true, useDefault: true })
77
+ ], _OdxAccordionPanel.prototype, "expanded", 2);
78
+ let OdxAccordionPanel = _OdxAccordionPanel;
79
+
80
+ const styles$1f = ":host{display:block;margin-block:var(--odx-spacing-37);block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-spacing-37)}:host([size=\"sm\"]){margin-block:0}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}:host([disabled]){--_color-background: transparent;--_color-background-hover: transparent}:host([disabled]) ::slotted(*){pointer-events:none}:host([expanded]) [part~=indicator]{--rotate: 180deg}";
53
81
 
54
82
  const AccordionItemSize = pick(Size, ["SM", "MD", "LG"]);
55
83
  const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
@@ -58,10 +86,10 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
58
86
  this.size = AccordionItemSize.MD;
59
87
  }
60
88
  static {
61
- customElement("odx-accordion-item", styles$1g)(_OdxAccordionItem);
89
+ customElement("odx-accordion-item", styles$1f)(_OdxAccordionItem);
62
90
  }
63
91
  get panel() {
64
- if (this.nextElementSibling?.role === "region") {
92
+ if (this.nextElementSibling instanceof OdxAccordionPanel) {
65
93
  return this.nextElementSibling;
66
94
  }
67
95
  return null;
@@ -84,8 +112,8 @@ const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(Interact
84
112
  this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
85
113
  this.setAttribute("aria-controls", this.panel.id);
86
114
  this.panel.setAttribute("aria-labelledby", this.id);
87
- this.panel.hidden = this.disabled || !this.expanded;
88
- if (this.expanded) return;
115
+ this.panel.expanded = !this.disabled && this.expanded;
116
+ if (!this.expanded) return;
89
117
  this.panel.querySelector("odx-accordion")?.toggleAll(false);
90
118
  }
91
119
  };
@@ -94,34 +122,6 @@ __decorateClass([
94
122
  ], _OdxAccordionItem.prototype, "size", 2);
95
123
  let OdxAccordionItem = _OdxAccordionItem;
96
124
 
97
- const styles$1f = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-spacing-50);padding-block-start:var(--odx-spacing-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-spacing-37));margin-inline-end:calc(-1 * var(--odx-spacing-50))}";
98
-
99
- const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
100
- constructor() {
101
- super(...arguments);
102
- this.hidden = true;
103
- }
104
- static {
105
- customElement("odx-accordion-panel", styles$1f)(_OdxAccordionPanel);
106
- }
107
- connectedCallback() {
108
- super.connectedCallback();
109
- this.id ||= getUniqueId(this.localName);
110
- this.role ||= "region";
111
- }
112
- render() {
113
- return html`
114
- <odx-toggle-content ?hidden=${this.hidden}>
115
- <div class="content"><slot></slot></div>
116
- </odx-toggle-content>
117
- `;
118
- }
119
- };
120
- __decorateClass([
121
- property({ type: Boolean, reflect: true, useDefault: true })
122
- ], _OdxAccordionPanel.prototype, "hidden", 2);
123
- let OdxAccordionPanel = _OdxAccordionPanel;
124
-
125
125
  const styles$1e = "@layer base{:host{--_padding-inline: var(--odx-spacing-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));font-weight:var(--odx-typography-font-weight-medium)}:host,[part~=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset)}[part~=label]{flex:initial;text-align:center}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-spacing-12) + var(--odx-size-px));--_padding-inline: var(--odx-spacing-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125);::slotted(odx-avatar){--_size: var(--odx-size-175);--_spacing: calc(var(--odx-spacing-25) + var(--odx-size-px));font-size:var(--odx-typography-font-size-2)}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-spacing-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_spacing: calc(var(--odx-spacing-75) + var(--odx-size-px));font-size:var(--odx-typography-font-size-3)}}: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])):not([disabled])){--_color-stroke-hover: var(--odx-color-stroke-control-hover);--_color-stroke-pressed: var(--odx-color-stroke-control-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(:is([variant=\"danger-ghost\"],[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);[part~=base]{outline-offset:0}}:host([variant=\"danger-ghost\"]){--_color-foreground: var(--odx-color-foreground-danger-rest)}: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)}:host([variant=\"danger-ghost\"][loading]),:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
126
126
 
127
127
  const ButtonSize = pick(Size, ["SM", "MD", "LG"]);
@@ -1919,7 +1919,7 @@ __decorateClass([
1919
1919
  ], _OdxInlineMessage.prototype, "variant", 2);
1920
1920
  let OdxInlineMessage = _OdxInlineMessage;
1921
1921
 
1922
- const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-spacing-50);align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:calc(-1 * var(--odx-focus-ring-offset));border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-spacing-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--odx-color-background-disabled-rest: transparent}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-size-125)}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part~=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
1922
+ const styles$M = ":host{--_color-stroke: var(--odx-color-stroke-control-rest);display:inline-flex;position:relative;gap:var(--odx-spacing-50);align-items:center;justify-content:flex-end;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,gap;outline:var(--odx-focus-ring-outline);outline-offset:calc(-1 * var(--odx-focus-ring-offset));border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-spacing-50);block-size:var(--odx-size-225);min-inline-size:15ch;overflow:hidden;font-size:var(--odx-font-size-text-md);&:after{position:absolute;inset-inline:0;bottom:0;transition:inherit;background-color:var(--_color-stroke);block-size:var(--odx-border-width-thin);content:\"\"}}[part~=control]{--odx-color-background-disabled-rest: transparent}[part~=input]{appearance:textfield;flex:1 1 auto;transition:var(--odx-transition-default);outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;inline-size:100%;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon){--size: var(--odx-size-125)}::slotted(*){z-index:1}:host(:hover){border-bottom-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus){outline-color:var(--odx-color-stroke-focus-outer);&:after{content:none}}:host(:is([type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-spacing-12)}:host([clearable]) [part~=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([invalid]:not([readonly])){--_color-stroke: var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([disabled]:not([readonly])){--_color-stroke: var(--odx-color-stroke-disabled-rest);background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest);[part~=input]::placeholder{color:var(--odx-color-foreground-disabled-rest)}}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);background-color:var(--odx-color-background-control-readonly);[part~=input]{cursor:default}}:host([readonly][invalid]){--_color-stroke: var(--odx-color-stroke-danger-rest)}:host([type=\"number\"]){min-inline-size:3ch;&:not([readonly]){text-align:center}}";
1923
1923
 
1924
1924
  const _OdxInput = class _OdxInput extends FormControl {
1925
1925
  constructor() {
@@ -1936,6 +1936,7 @@ const _OdxInput = class _OdxInput extends FormControl {
1936
1936
  event.stopPropagation();
1937
1937
  if (this.emit("clear")) return;
1938
1938
  this.clear();
1939
+ this.focus();
1939
1940
  };
1940
1941
  this.#handleInput = (event) => {
1941
1942
  this.value = event.target.value;
@@ -1956,6 +1957,9 @@ const _OdxInput = class _OdxInput extends FormControl {
1956
1957
  delegatesFocus: true
1957
1958
  };
1958
1959
  }
1960
+ focus(options) {
1961
+ this.nativeInput?.focus(options);
1962
+ }
1959
1963
  stepUp() {
1960
1964
  if (!this.nativeInput) return;
1961
1965
  this.nativeInput.stepUp();
@@ -2185,7 +2189,7 @@ const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement
2185
2189
  <odx-separator part="separator"></odx-separator>
2186
2190
  ${when(
2187
2191
  this.isExpandable(),
2188
- () => html`<odx-toggle-content part="content" id="list-item-content" role="region" ?hidden=${!this.expanded}>${expandSlot}</odx-toggle-content>`,
2192
+ () => html`<odx-toggle-content part="content" id="list-item-content" role="region" ?expanded=${this.expanded}>${expandSlot}</odx-toggle-content>`,
2189
2193
  () => html`<odx-visually-hidden>${expandSlot}</odx-visually-hidden>`
2190
2194
  )}
2191
2195
  `;
@@ -2771,7 +2775,7 @@ __decorateClass([
2771
2775
  ], _OdxModal.prototype, "layout", 2);
2772
2776
  let OdxModal = _OdxModal;
2773
2777
 
2774
- const styles$A = ":host{--gap: var(--odx-spacing-37);display:flex;flex-direction:column;transition:var(--odx-transition-reduced)}.content{gap:var(--gap)}:host([size=\"lg\"]){--gap: var(--odx-spacing-75);.indicator{padding:var(--odx-spacing-25)}}:host([expanded]:not([disabled])){gap:var(--gap);.indicator{--rotate: 180deg}}";
2778
+ const styles$A = ":host{display:flex;flex-direction:column}.content{gap:var(--odx-spacing-37);margin-block-start:var(--odx-spacing-37)}:host([size=\"lg\"]){.content{gap:var(--odx-spacing-75);margin-block-start:var(--odx-spacing-75)}.indicator{padding:var(--odx-spacing-25)}}:host([expanded]:not([disabled])){.indicator{--rotate: 180deg}}";
2775
2779
 
2776
2780
  const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpanded(CanBeDisabled(CustomElement)) {
2777
2781
  constructor() {
@@ -2788,15 +2792,15 @@ const _OdxNavigationItemGroup = class _OdxNavigationItemGroup extends CanBeExpan
2788
2792
  return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName });
2789
2793
  }
2790
2794
  render() {
2791
- const contentHidden = this.disabled || !this.expanded;
2795
+ const isExpanded = !this.disabled && this.expanded;
2792
2796
  return html`
2793
- <odx-navigation-item size=${this.size} ?disabled=${this.disabled} ?loading=${this.loading} ?selected=${contentHidden && this.selected} @click=${() => this.toggle(void 0, true)}>
2797
+ <odx-navigation-item size=${this.size} ?disabled=${this.disabled} ?loading=${this.loading} ?selected=${!isExpanded && this.selected} @click=${() => this.toggle(void 0, true)}>
2794
2798
  <slot name="prefix" slot="prefix"></slot>
2795
2799
  <odx-text part="label" strong>${this.label}</odx-text>
2796
2800
  <slot name="suffix" slot="suffix"></slot>
2797
2801
  <odx-icon class="indicator" name="core::chevron-down" slot="suffix"></odx-icon>
2798
2802
  </odx-navigation-item>
2799
- <odx-toggle-content ?hidden=${contentHidden} tabindex=${optionalAttr(contentHidden ? -1 : null)}>
2803
+ <odx-toggle-content ?expanded=${isExpanded}>
2800
2804
  <div class="content odx-stack">
2801
2805
  <slot></slot>
2802
2806
  </div>
@@ -4540,29 +4544,36 @@ __decorateClass([
4540
4544
  ], _OdxToggleButtonGroup.prototype, "variant", 2);
4541
4545
  let OdxToggleButtonGroup = _OdxToggleButtonGroup;
4542
4546
 
4543
- const styles$3 = ":host{--offset-y: -100%;--transition: var(--odx-transition-default);display:grid;grid-template-rows:1fr;transition:var(--transition)}.base{overflow:hidden}.content{transition:var(--transition);transition-property:transform,opacity}:host([hidden]){grid-template-rows:0fr;.content{transform:translateY(var(--offset-y));opacity:0}}";
4547
+ const styles$3 = ":host{--transition: var(--odx-transition-default);display:grid;grid-template-rows:0fr;transition:var(--transition);transition-property:grid-template-rows,opacity;opacity:0}.base{overflow:hidden}:host([expanded]){grid-template-rows:1fr;opacity:1}";
4544
4548
 
4545
4549
  const _OdxToggleContent = class _OdxToggleContent extends CustomElement {
4546
4550
  constructor() {
4547
4551
  super(...arguments);
4548
- this.hidden = false;
4552
+ this.expanded = false;
4549
4553
  }
4550
4554
  static {
4551
4555
  customElement("odx-toggle-content", styles$3)(_OdxToggleContent);
4552
4556
  }
4557
+ willUpdate(props) {
4558
+ if (props.has("expanded")) {
4559
+ if (this.expanded) {
4560
+ this.removeAttribute("tabindex");
4561
+ } else {
4562
+ this.tabIndex = -1;
4563
+ }
4564
+ }
4565
+ }
4553
4566
  render() {
4554
4567
  return html`
4555
4568
  <div class="base">
4556
- <div class="content">
4557
- <slot></slot>
4558
- </div>
4569
+ <slot></slot>
4559
4570
  </div>
4560
4571
  `;
4561
4572
  }
4562
4573
  };
4563
4574
  __decorateClass([
4564
4575
  property({ type: Boolean, reflect: true, useDefault: true })
4565
- ], _OdxToggleContent.prototype, "hidden", 2);
4576
+ ], _OdxToggleContent.prototype, "expanded", 2);
4566
4577
  let OdxToggleContent = _OdxToggleContent;
4567
4578
 
4568
4579
  const styles$2 = ":host{display:flex;gap:var(--odx-spacing-37);align-items:center;transition:var(--odx-transition-default);transition-property:color,background-color,box-shadow;border-radius:var(--odx-border-radius-md);padding:var(--odx-spacing-37);overflow-x:auto;font-size:var(--odx-typography-font-size-3)}: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-typography-font-size-2);::slotted(odx-separator){--size: var(--odx-size-125)}}";
package/dist/main.js CHANGED
@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
6
6
 
7
7
  const name = "@odx/foundation";
8
8
  const displayName = "ODX Design System Foundation";
9
- const version = "1.0.0-beta.147";
9
+ const version = "1.0.0-beta.149";
10
10
  const pkg = {
11
11
  name,
12
12
  displayName,
@@ -92,7 +92,7 @@ function getKeyInfo(event) {
92
92
  };
93
93
  }
94
94
 
95
- const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
95
+ const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:not(:has([slot=suffix])){&::part(control-clear){margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
96
96
 
97
97
  function customElement(tagName, ...styles) {
98
98
  return (target) => {
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- @layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}:root{--odx-color-stroke-control-rest: light-dark(var(--odx-palette-blue-80), var(--odx-palette-blue-00));--odx-color-stroke-control-hover: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-control-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed)}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
1
+ @layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{.odx-bg-base{background-color:var(--odx-color-background-base)}.odx-bg-content{background-color:var(--odx-color-background-level-1)}.odx-fg-danger{color:var(--odx-color-foreground-danger-rest)}}@layer base{.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.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}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:not(:has([slot=suffix])){&::part(control-clear){margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=prefix]){padding-inline-start:var(--odx-spacing-12);[odx-button][slot=prefix]:last-of-type{margin-inline-end:calc(var(--odx-spacing-37) * -1)}}&:has([odx-button][slot=suffix]){padding-inline-end:var(--odx-spacing-12);[odx-button][slot=suffix]:first-of-type{margin-inline-start:calc(var(--odx-spacing-37) * -1)}}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-default)}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){white-space:nowrap;color:transparent}}:root{--odx-color-stroke-control-rest: light-dark(var(--odx-palette-blue-80), var(--odx-palette-blue-00));--odx-color-stroke-control-hover: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-control-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-control-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed)}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent;color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
package/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.147",
5
+ "version": "1.0.0-beta.149",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -16,8 +16,8 @@
16
16
  ],
17
17
  "type": "module",
18
18
  "dependencies": {
19
+ "@odx/assets-utils": "^3.2.2",
19
20
  "@preact/signals-core": "1.10.0",
20
- "@odx/assets-utils": "^3.2.1",
21
21
  "lit": "3.3.0"
22
22
  },
23
23
  "peerDependencies": {