@odx/foundation 1.0.0-beta.45 → 1.0.0-beta.47

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.
@@ -8,7 +8,7 @@ import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
8
8
  import { R as RovingTabindexController, r as round, d as debounce } from './vendor-C_8wBEOn.js';
9
9
  import { createContext, consume, provide } from '@lit/context';
10
10
 
11
- const styles$1d = "@layer base{:host{--_margin-block: var(--odx-size-37);display:block}}@layer state{:host([expanded]){[part=label]{font-weight:var(--odx-typography-font-weight-medium)}[part=indicator]{--rotate: 180deg}}}";
11
+ const styles$1d = ":host{display:block;margin-block:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}";
12
12
 
13
13
  var __defProp$1n = Object.defineProperty;
14
14
  var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
@@ -26,11 +26,11 @@ var __decorateClass$1n = (decorators, target, key, kind) => {
26
26
  var __accessCheck$x = (obj, member, msg) => member.has(obj) || __typeError$x("Cannot " + msg);
27
27
  var __privateAdd$x = (obj, member, value) => member.has(obj) ? __typeError$x("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
28
28
  var __privateMethod$l = (obj, member, method) => (__accessCheck$x(obj, member, "access private method"), method);
29
- var _OdxAccordionHeader_instances, handleExpandedChange_fn$1;
30
- let OdxAccordionHeader = class extends CanBeExpanded(InteractiveElement) {
29
+ var _OdxAccordionItem_instances, handleExpandedChange_fn$1;
30
+ let OdxAccordionItem = class extends CanBeExpanded(InteractiveElement) {
31
31
  constructor() {
32
32
  super(...arguments);
33
- __privateAdd$x(this, _OdxAccordionHeader_instances);
33
+ __privateAdd$x(this, _OdxAccordionItem_instances);
34
34
  }
35
35
  get panel() {
36
36
  if (this.nextElementSibling?.role === "region") {
@@ -38,26 +38,23 @@ let OdxAccordionHeader = class extends CanBeExpanded(InteractiveElement) {
38
38
  }
39
39
  return null;
40
40
  }
41
- connectedCallback() {
42
- super.connectedCallback();
43
- this.id ||= getUniqueId(this.localName);
44
- }
45
41
  renderContent() {
46
42
  return html`
47
43
  ${super.renderContent()}
48
- <odx-icon part="indicator" name="core::chevron-down" size="md"></odx-icon>
44
+ <odx-icon part="indicator" name="core::chevron-down"></odx-icon>
49
45
  `;
50
46
  }
51
47
  willUpdate(props) {
52
48
  super.willUpdate(props);
53
49
  if (props.has("disabled") || props.has("expanded")) {
54
- __privateMethod$l(this, _OdxAccordionHeader_instances, handleExpandedChange_fn$1).call(this);
50
+ __privateMethod$l(this, _OdxAccordionItem_instances, handleExpandedChange_fn$1).call(this);
55
51
  }
56
52
  }
57
53
  };
58
- _OdxAccordionHeader_instances = new WeakSet();
54
+ _OdxAccordionItem_instances = new WeakSet();
59
55
  handleExpandedChange_fn$1 = function() {
60
56
  if (!this.panel) return;
57
+ this.id ||= getUniqueId(this.localName);
61
58
  this.ariaExpanded = toAriaBooleanAttribute(this.expanded);
62
59
  this.setAttribute("aria-controls", this.panel.id);
63
60
  this.panel.setAttribute("aria-labelledby", this.id);
@@ -65,11 +62,11 @@ handleExpandedChange_fn$1 = function() {
65
62
  if (this.expanded) return;
66
63
  this.panel.querySelector("odx-accordion")?.toggleAll(false);
67
64
  };
68
- OdxAccordionHeader = __decorateClass$1n([
69
- customElement("odx-accordion-header", [styles$1d])
70
- ], OdxAccordionHeader);
65
+ OdxAccordionItem = __decorateClass$1n([
66
+ customElement("odx-accordion-item", [styles$1d])
67
+ ], OdxAccordionItem);
71
68
 
72
- const styles$1c = "@layer base{:host{display:block}odx-separator{--margin-block: 0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
69
+ const styles$1c = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-separator)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
73
70
 
74
71
  var __defProp$1m = Object.defineProperty;
75
72
  var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
@@ -94,11 +91,8 @@ let OdxAccordionPanel = class extends CustomElement {
94
91
  render() {
95
92
  return html`
96
93
  <odx-toggle-content ?hidden=${this.hidden}>
97
- <div class="content">
98
- <slot></slot>
99
- </div>
94
+ <div class="content"><slot></slot></div>
100
95
  </odx-toggle-content>
101
- <odx-separator></odx-separator>
102
96
  `;
103
97
  }
104
98
  };
@@ -122,23 +116,25 @@ var __decorateClass$1l = (decorators, target, key, kind) => {
122
116
  if (kind && result) __defProp$1l(target, key, result);
123
117
  return result;
124
118
  };
119
+ const AccordionIndicatorPosition = { start: "start", end: "end" };
125
120
  let OdxAccordion = class extends CustomElement {
126
121
  constructor() {
127
122
  super();
123
+ this.indicatorPosition = AccordionIndicatorPosition.end;
128
124
  this.multiple = false;
129
125
  new ExpandableItemManager(this, { getItems: () => this.items });
130
126
  }
131
- toggleAll(state, emitEvent = false) {
127
+ toggleAll(state) {
132
128
  for (const item of this.items) {
133
- item.toggle(state, emitEvent);
129
+ item.toggle(state);
134
130
  }
135
131
  }
136
132
  };
137
133
  __decorateClass$1l([
138
- queryAssignedElements({ selector: OdxAccordionHeader.selector, flatten: true })
134
+ queryAssignedElements({ selector: "odx-accordion-item", flatten: true })
139
135
  ], OdxAccordion.prototype, "items", 2);
140
136
  __decorateClass$1l([
141
- property({ reflect: true, attribute: "indicator-position" })
137
+ property({ reflect: true, useDefault: true, attribute: "indicator-position" })
142
138
  ], OdxAccordion.prototype, "indicatorPosition", 2);
143
139
  __decorateClass$1l([
144
140
  property({ type: Boolean })
@@ -147,7 +143,7 @@ OdxAccordion = __decorateClass$1l([
147
143
  customElement("odx-accordion", [styles$1b])
148
144
  ], OdxAccordion);
149
145
 
150
- const styles$1a = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{font-weight:var(--odx-typography-font-weight-medium);outline-offset:var(--odx-focus-ring-offset)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0;::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}}";
146
+ const styles$1a = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}}:host([size=\"sm\"]){--odx-focus-ring-offset: 0;--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-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);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground-base);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}}";
151
147
 
152
148
  var __defProp$1k = Object.defineProperty;
153
149
  var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
@@ -3152,7 +3148,7 @@ OdxModal = __decorateClass$z([
3152
3148
  customElement("odx-modal", [styles$x])
3153
3149
  ], OdxModal);
3154
3150
 
3155
- const styles$w = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-37))}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);--_margin-block: 0;odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
3151
+ const styles$w = "@layer base{:host{--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));--_padding-inline: var(--odx-size-75)}odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-37))}}@layer state{:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}}@layer variant{:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-200);odx-avatar,::slotted(odx-avatar){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}}}";
3156
3152
 
3157
3153
  var __defProp$y = Object.defineProperty;
3158
3154
  var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
@@ -5024,7 +5020,7 @@ OdxToggleButton = __decorateClass$4([
5024
5020
  customElement("odx-toggle-button", [styles$3])
5025
5021
  ], OdxToggleButton);
5026
5022
 
5027
- const styles$2 = "@layer base{: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)}}@layer state{:host([hidden]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--offset-y));visibility:hidden}}}";
5023
+ const styles$2 = ":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}}";
5028
5024
 
5029
5025
  var __defProp$3 = Object.defineProperty;
5030
5026
  var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -5253,4 +5249,4 @@ OdxVisuallyHidden = __decorateClass([
5253
5249
  customElement("odx-visually-hidden", [styles])
5254
5250
  ], OdxVisuallyHidden);
5255
5251
 
5256
- export { AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionHeader, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressState, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
5252
+ export { AccordionIndicatorPosition, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressState, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
package/dist/main.js CHANGED
@@ -2,7 +2,6 @@ import { LitElement, html, unsafeCSS, isServer, nothing } from 'lit';
2
2
  import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
3
3
  import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy } from './vendor-C_8wBEOn.js';
4
4
  export { p as enumFrom } from './vendor-C_8wBEOn.js';
5
- import { createContext, ContextProvider, consume } from '@lit/context';
6
5
  import { createFocusTrap } from 'focus-trap';
7
6
  import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
8
7
  import { when } from 'lit/directives/when.js';
@@ -38,7 +37,7 @@ const Variant = {
38
37
  GHOST: "ghost"
39
38
  };
40
39
 
41
- 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]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}odx-icon{flex:0 0 var(--size);transition:var(--odx-transition-default);transition-property:transform;&[size=sm]{--size: var(--odx-size-125)}&[size=md]{--size: var(--odx-size-150)}&[size=lg]{--size: var(--odx-size-200)}}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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}[indicator-position=start] odx-accordion-header::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-header[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
40
+ 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]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
42
41
 
43
42
  function mergeStyleSheets(...stylesheets) {
44
43
  const mergedStyles = [];
@@ -182,27 +181,16 @@ var __decorateClass$f = (decorators, target, key, kind) => {
182
181
  if (kind && result) __defProp$f(target, key, result);
183
182
  return result;
184
183
  };
185
- const DisabledContext = createContext(Symbol("odx-disabled-context"));
186
- class DisabledContextProvider extends ContextProvider {
187
- constructor(host) {
188
- super(host, { context: DisabledContext, initialValue: false });
189
- }
190
- hostUpdated() {
191
- if (this.host.disabled === this.value) return;
192
- this.setValue(this.host.disabled);
193
- }
194
- }
195
184
  const CanBeDisabled = dedupeMixin((superClass) => {
196
185
  class CanBeDisabledMixin extends superClass {
197
186
  constructor() {
198
187
  super(...arguments);
199
- this.#initialTabIndex = null;
200
188
  this.disabled = false;
201
189
  }
202
190
  #initialTabIndex;
203
191
  connectedCallback() {
204
192
  super.connectedCallback();
205
- this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
193
+ this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : void 0;
206
194
  }
207
195
  willUpdate(props) {
208
196
  super.willUpdate(props);
@@ -214,7 +202,7 @@ const CanBeDisabled = dedupeMixin((superClass) => {
214
202
  this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
215
203
  if (this.disabled) {
216
204
  this.tabIndex = -1;
217
- } else if (this.#initialTabIndex !== null) {
205
+ } else if (this.#initialTabIndex !== void 0) {
218
206
  this.tabIndex = this.#initialTabIndex;
219
207
  } else {
220
208
  this.removeAttribute("tabindex");
@@ -222,8 +210,7 @@ const CanBeDisabled = dedupeMixin((superClass) => {
222
210
  }
223
211
  }
224
212
  __decorateClass$f([
225
- consume({ context: DisabledContext, subscribe: true }),
226
- property({ type: Boolean, reflect: true })
213
+ property({ type: Boolean, reflect: true, useDefault: true })
227
214
  ], CanBeDisabledMixin.prototype, "disabled", 2);
228
215
  return CanBeDisabledMixin;
229
216
  });
@@ -1001,7 +988,6 @@ class FocusTrapController {
1001
988
  return this.deactivate();
1002
989
  }
1003
990
  async hostConnected() {
1004
- if (isServer) return;
1005
991
  await this.#host.updateComplete;
1006
992
  this.#focusTrap ??= createFocusTrap(this.#host, {
1007
993
  ...this.#options,
@@ -1322,7 +1308,7 @@ function optionalSlot(host, slotName) {
1322
1308
  return nothing;
1323
1309
  }
1324
1310
 
1325
- const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_margin-block: 0;--_icon-margin: 0;cursor:pointer;position:relative;user-select:none;border-radius:var(--odx-border-radius-controls);block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part=base]{overflow:hidden;border-radius:inherit;cursor:inherit;text-decoration:none;block-size:100%;inline-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:0;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{padding:0;border:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));color:var(--_color-foreground);margin-inline:calc(var(--_icon-margin) + var(--odx-size-12))}[part=label]{text-align:left;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);flex:1}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([loading])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
1311
+ const styles$2 = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground-base);--_color-foreground-hover: var(--odx-color-foreground-base);--_color-foreground-pressed: var(--odx-color-foreground-base);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,[part=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-normal);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}[part=base]::-moz-focus-inner{border:0;padding:0}[part=loader]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}}@layer state{:host(:not([loading])) [part=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:is([align-badge=\"end\"],[align-badge=\"center\"])) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0}:host([align-badge=\"end\"]) ::slotted([slot=\"badge\"]){translate:var(--odx-size-37) 50%}:host([align-badge=\"center\"]) ::slotted([slot=\"badge\"]){inset-inline:auto;translate:0 calc(50% + var(--_badge-margin))}}";
1326
1312
 
1327
1313
  var __defProp$3 = Object.defineProperty;
1328
1314
  var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -1404,18 +1390,9 @@ class InteractiveElement extends WithLoadingState(InteractiveLink) {
1404
1390
  this.styles = unsafeCSS(styles$2);
1405
1391
  }
1406
1392
  render() {
1407
- return this.href ? super.render() : this.renderButton();
1408
- }
1409
- renderContent(withSpinner = true) {
1410
- return html`
1411
- ${this.#renderSlot("prefix", !withSpinner)}
1412
- <odx-line-clamp part="label" .max=${this.lineClamp}>
1413
- ${this.#renderSlot(void 0, !withSpinner)}
1414
- </odx-line-clamp>
1415
- ${this.#renderSlot("suffix", !withSpinner)}
1416
- `;
1417
- }
1418
- renderButton() {
1393
+ if (this.href) {
1394
+ return super.render();
1395
+ }
1419
1396
  const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
1420
1397
  const type = "type" in this ? this.type : "button";
1421
1398
  return html`
@@ -1432,6 +1409,15 @@ class InteractiveElement extends WithLoadingState(InteractiveLink) {
1432
1409
  </button>
1433
1410
  `;
1434
1411
  }
1412
+ renderContent(withSpinner = true) {
1413
+ return html`
1414
+ ${this.#renderSlot("prefix", !withSpinner)}
1415
+ <odx-line-clamp part="label" .max=${this.lineClamp}>
1416
+ ${this.#renderSlot(void 0, !withSpinner)}
1417
+ </odx-line-clamp>
1418
+ ${this.#renderSlot("suffix", !withSpinner)}
1419
+ `;
1420
+ }
1435
1421
  renderLoader() {
1436
1422
  return html`<odx-loading-spinner part="loader"></odx-loading-spinner>`;
1437
1423
  }
@@ -1792,4 +1778,4 @@ class SharedResizeObserverInstance {
1792
1778
  }
1793
1779
  const SharedResizeObserver = new SharedResizeObserverInstance();
1794
1780
 
1795
- export { ActiveDescendant, ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CanBeSelected, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DisabledContext, DisabledContextProvider, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FocusTrapController, FocusTrapControllerOptions, FormControl, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, KeyboardKey, ListboxFormControl, NumberControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, Shape, SharedIntersectionObserver, SharedResizeObserver, Size, State, Variant, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElement, getElementFromEvent, getKeyboardEventInfo, getUniqueId, isDraggableElement, limit, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
1781
+ export { ActiveDescendant, ActiveDescendantsController, ActiveDescendantsControllerOptions, CanBeDisabled, CanBeExpanded, CanBeSelected, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, ExpandableItemManagerOptions, FocusTrapController, FocusTrapControllerOptions, FormControl, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, KeyboardKey, ListboxFormControl, NumberControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, Shape, SharedIntersectionObserver, SharedResizeObserver, Size, State, Variant, WithLoadingState, clearUniqueIdCache, createIntersectionObserver, createMutationObserver, createResizeObserver, customElement, dedupeMixin, findClosestDocument, forwardEvent, fromAriaBooleanAttribute, getAssignedElement, getElementFromEvent, getKeyboardEventInfo, getUniqueId, isDraggableElement, limit, optionalAttr, optionalSlot, parseDate, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
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]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}odx-icon{flex:0 0 var(--size);transition:var(--odx-transition-default);transition-property:transform;&[size=sm]{--size: var(--odx-size-125)}&[size=md]{--size: var(--odx-size-150)}&[size=lg]{--size: var(--odx-size-200)}}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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}[indicator-position=start] odx-accordion-header::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-header[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@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-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-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]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.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}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}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}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@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-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-base)}}
@@ -1,15 +1,20 @@
1
- import { CustomElement } from '../../lib/main.js';
2
- import { OdxAccordionHeader } from './accordion-header.js';
1
+ import { CustomElement, EnumString } from '../../lib/main.js';
2
+ import { OdxAccordionItem } from '../accordion-item/accordion-item.js';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
5
  'odx-accordion': OdxAccordion;
6
6
  }
7
7
  }
8
+ export type AccordionIndicatorPosition = EnumString<typeof AccordionIndicatorPosition>;
9
+ export declare const AccordionIndicatorPosition: {
10
+ readonly start: "start";
11
+ readonly end: "end";
12
+ };
8
13
  export declare class OdxAccordion extends CustomElement {
9
- items: OdxAccordionHeader[];
10
- indicatorPosition?: 'start';
14
+ items: OdxAccordionItem[];
15
+ indicatorPosition: AccordionIndicatorPosition;
11
16
  multiple: boolean;
12
17
  constructor();
13
- toggleAll(state?: boolean, emitEvent?: boolean): void;
18
+ toggleAll(state?: boolean): void;
14
19
  }
15
20
  //# sourceMappingURL=accordion.d.ts.map
@@ -2,16 +2,15 @@ import { CanBeExpanded, InteractiveElement } from '../../lib/main.js';
2
2
  import { PropertyValues, TemplateResult } from 'lit';
3
3
  declare global {
4
4
  interface HTMLElementTagNameMap {
5
- 'odx-accordion-header': OdxAccordionHeader;
5
+ 'odx-accordion-item': OdxAccordionItem;
6
6
  }
7
7
  }
8
- declare const OdxAccordionHeader_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
9
- export declare class OdxAccordionHeader extends OdxAccordionHeader_base {
8
+ declare const OdxAccordionItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
9
+ export declare class OdxAccordionItem extends OdxAccordionItem_base {
10
10
  #private;
11
11
  get panel(): HTMLElement | null;
12
- connectedCallback(): void;
13
12
  protected renderContent(): TemplateResult;
14
13
  protected willUpdate(props: PropertyValues<this>): void;
15
14
  }
16
15
  export {};
17
- //# sourceMappingURL=accordion-header.d.ts.map
16
+ //# sourceMappingURL=accordion-item.d.ts.map
@@ -1,4 +1,6 @@
1
- export * from './accordion/index.js';
1
+ export * from './accordion-item/accordion-item.js';
2
+ export * from './accordion-panel/accordion-panel.js';
3
+ export * from './accordion/accordion.js';
2
4
  export * from './action-button/action-button.js';
3
5
  export * from './anchor-navigation/index.js';
4
6
  export * from './area-header/area-header.js';
@@ -21,7 +21,6 @@ export declare class InteractiveElement extends InteractiveElement_base {
21
21
  lineClamp: 1 | 2;
22
22
  protected render(): TemplateResult;
23
23
  protected renderContent(withSpinner?: boolean): TemplateResult;
24
- protected renderButton(): TemplateResult<1>;
25
24
  protected renderLoader(): TemplateResult;
26
25
  }
27
26
  export {};
@@ -1,15 +1,7 @@
1
- import { ContextProvider } from '@lit/context';
2
1
  import { CustomElement } from '../custom-element.js';
3
2
  import { Constructor } from '../utils/types.js';
4
3
  export interface CanBeDisabled {
5
4
  disabled: boolean;
6
5
  }
7
- export declare const DisabledContext: {
8
- __context__: boolean;
9
- };
10
- export declare class DisabledContextProvider extends ContextProvider<typeof DisabledContext, CanBeDisabled & CustomElement> {
11
- constructor(host: CanBeDisabled & CustomElement);
12
- hostUpdated(): void;
13
- }
14
6
  export declare const CanBeDisabled: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<CanBeDisabled> & T;
15
7
  //# sourceMappingURL=can-be-disabled.d.ts.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@odx/foundation",
3
3
  "description": "A library of Web Component building blocks for ODX",
4
- "version": "1.0.0-beta.45",
4
+ "version": "1.0.0-beta.47",
5
5
  "author": "Drägerwerk AG & Co.KGaA",
6
6
  "license": "SEE LICENSE IN LICENSE",
7
7
  "homepage": "https://odx.draeger.com",
@@ -14,8 +14,8 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@floating-ui/dom": "~1.6.13",
17
- "@lit/context": "~1.1.5",
18
17
  "@lit-labs/preact-signals": "~1.0.3",
18
+ "@lit/context": "~1.1.5",
19
19
  "@odx/design-tokens": "^1.0.0-alpha.8",
20
20
  "focus-trap": "~7.6.4",
21
21
  "lit": "~3.3.0"
@@ -28,6 +28,9 @@
28
28
  "@odx/typescript-config": "*",
29
29
  "@spectrum-web-components/reactive-controllers": "1.4.0",
30
30
  "es-toolkit": "1.34.1",
31
+ "stylelint": "16.18.0",
32
+ "stylelint-config-concentric-order": "5.2.1",
33
+ "stylelint-config-standard": "38.0.0",
31
34
  "ts-lit-plugin": "2.0.2",
32
35
  "vite": "6.2.6",
33
36
  "vite-plugin-checker": "0.9.1",
@@ -1,4 +0,0 @@
1
- export * from './accordion-header.js';
2
- export * from './accordion-panel.js';
3
- export * from './accordion.js';
4
- //# sourceMappingURL=index.d.ts.map