@odx/foundation 1.0.0-beta.44 → 1.0.0-beta.46

package/dist/components.js

@@ -1,4 +1,4 @@
-import { CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, enumFrom, Size, Variant, optionalAttr, InteractiveLink, createIntersectionObserver, createMutationObserver, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, PopoverPlacement, PopoverHost, getKeyboardEventInfo, PopoverPlacementOptions, searchTextContent, FormControl, ActiveDescendantsController, queryAssignedElement, parseDate, waitForAnimations, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
+import { CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, customElement, requestUpdateOnAriaChange, CustomElement, ExpandableItemManager, enumFrom, Size, Variant, optionalAttr, InteractiveLink, createIntersectionObserver, createMutationObserver, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxGroupFormControl, CheckboxFormControl, toggleAttribute, SharedResizeObserver, PopoverPlacement, PopoverHost, getKeyboardEventInfo, PopoverPlacementOptions, searchTextContent, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, waitForAnimations, forwardEvent, CanBeSelected, WithLoadingState, FocusTrapController, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
 import { html, isServer, css, nothing } from 'lit';
 import { property, queryAssignedElements, state, queryAll, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
@@ -45,7 +45,7 @@ let OdxAccordionHeader = class extends CanBeExpanded(InteractiveElement) {
   renderContent() {
     return html`
       ${super.renderContent()}
-      <odx-icon part="indicator" name="core::chevron-down" size="md"></odx-icon>
+      <odx-icon part="indicator" name="core::chevron-down"></odx-icon>
     `;
   }
   willUpdate(props) {
@@ -147,7 +147,7 @@ OdxAccordion = __decorateClass$1l([
   customElement("odx-accordion", [styles$1b])
 ], OdxAccordion);
 
-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);place-content:center}[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)}}";
+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)}}";
 
 var __defProp$1k = Object.defineProperty;
 var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
@@ -1411,6 +1411,9 @@ let OdxAutocomplete = class extends CanBeDisabled(FormControl(CustomElement)) {
       }
     });
   }
+  get control() {
+    return getAssignedElement(this, { slot: "control" });
+  }
   get controlValue() {
     return this.control?.value ?? "";
   }
@@ -1441,7 +1444,7 @@ handleControlValueChange_fn = function(value) {
   this.highlight.query = this.control.value;
   let activeOptionIndex;
   let selectedValue = "";
-  const allOptionsHidden = this.options.reduce((state2, option, index) => {
+  const allOptionsHidden = this.options.reduce((state, option, index) => {
     option.hidden = !this.searchFn(option, this.controlValue);
     option.selected = option.label === this.controlValue;
     if (!option.hidden && activeOptionIndex === void 0) {
@@ -1450,7 +1453,7 @@ handleControlValueChange_fn = function(value) {
     if (option.selected) {
       selectedValue = option.value;
     }
-    return state2 && option.hidden;
+    return state && option.hidden;
   }, true);
   if (allOptionsHidden) {
     this.dropdown.hidePopover();
@@ -1470,10 +1473,6 @@ _handleControlFocusOut = new WeakMap();
 _handleControlClear = new WeakMap();
 _handleControlInput = new WeakMap();
 _handleControlKeyboardEvent = new WeakMap();
-__decorateClass$12([
-  state(),
-  queryAssignedElement({ slot: "control" })
-], OdxAutocomplete.prototype, "control", 2);
 __decorateClass$12([
   queryAssignedElements({ selector: '[role="option"]', flatten: true })
 ], OdxAutocomplete.prototype, "options", 2);
@@ -4370,6 +4369,27 @@ var __decorateClass$g = (decorators, target, key, kind) => {
   if (kind && result) __defProp$g(target, key, result);
   return result;
 };
+const StackAlign = {
+  START: "start",
+  CENTER: "center",
+  END: "end"
+};
+const StackGap = {
+  NONE: "none",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const StackJustify = {
+  START: "start",
+  END: "end",
+  CENTER: "center",
+  SPACE_BETWEEN: "space-between",
+  SPACE_AROUND: "space-around",
+  SPACE_EVENLY: "space-evenly"
+};
 let OdxStack = class extends CustomElement {
   constructor() {
     super(...arguments);
@@ -5233,4 +5253,4 @@ OdxVisuallyHidden = __decorateClass([
   customElement("odx-visually-hidden", [styles])
 ], OdxVisuallyHidden);
 
-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, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
+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 };

package/dist/main.js

@@ -6,7 +6,7 @@ import { createContext, ContextProvider, consume } from '@lit/context';
 import { createFocusTrap } from 'focus-trap';
 import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
 import { when } from 'lit/directives/when.js';
-export { effect } from '@lit-labs/preact-signals';
+export { computed, effect } from '@lit-labs/preact-signals';
 
 const Shape = {
   CIRCLE: "circle",
@@ -38,7 +38,7 @@ const Variant = {
   GHOST: "ghost"
 };
 
-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}}";
+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]{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}}";
 
 function mergeStyleSheets(...stylesheets) {
   const mergedStyles = [];
@@ -92,6 +92,14 @@ function dedupeMixin(mixin) {
   };
 }
 
+function parseDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime()) && typeof value === "string") {
+    const timestamp = Number(value);
+    return Number.isNaN(timestamp) ? null : new Date(timestamp);
+  }
+  return Number.isNaN(date.getTime()) ? null : date;
+}
 function createMutationObserver(callback) {
   try {
     return new MutationObserver(callback);
@@ -153,6 +161,16 @@ function limit(fn, fpsLimit = 60) {
     fn(...args);
   };
 }
+function getAssignedElement(root, options) {
+  const { slot, selector } = options ?? {};
+  const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
+  const slotEl = root.querySelector(slotSelector);
+  const elements = slotEl?.assignedElements(options) ?? [];
+  if (selector == null) {
+    return elements[0];
+  }
+  return elements.find((node) => node.matches(selector));
+}
 
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
@@ -1465,9 +1483,6 @@ const PopoverSide = {
   LEFT: PopoverPlacement.LEFT
 };
 
-function getPopoverSide(placement) {
-  return placement.split("-")[0];
-}
 async function computePopoverPlacement(referenceElement, floatingElement, options) {
   const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight, outerPadding } = options;
   const arrowSize = arrowElement?.offsetWidth ?? 0;
@@ -1497,7 +1512,7 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
   let arrowPositionX = null;
   let arrowPositionY = null;
   if (arrowElement && result.middlewareData.arrow) {
-    const popoverSide = getPopoverSide(result.placement);
+    const popoverSide = placement.split("-")[0];
     const { arrow: arrow2 } = result.middlewareData;
     const arrowOffsetX = popoverSide === PopoverSide.LEFT ? floatingElement.offsetWidth - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
     const arrowOffsetY = popoverSide === PopoverSide.TOP ? floatingElement.offsetHeight - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
@@ -1673,38 +1688,6 @@ OdxPopover = __decorateClass([
   customElement("odx-popover", [styles])
 ], OdxPopover);
 
-function parseDate(value) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime()) && typeof value === "string") {
-    const timestamp = Number(value);
-    return Number.isNaN(timestamp) ? null : new Date(timestamp);
-  }
-  return Number.isNaN(date.getTime()) ? null : date;
-}
-
-function queryAssignedElement(options) {
-  return (obj, name) => {
-    const { slot, selector } = options ?? {};
-    const slotSelector = `slot${slot ? `[name=${slot}]` : ":not([name])"}`;
-    const descriptor = {
-      configurable: true,
-      enumerable: true,
-      get() {
-        const slotEl = this.renderRoot?.querySelector(slotSelector);
-        const elements = slotEl?.assignedElements(options) ?? [];
-        if (selector == null) {
-          return elements[0];
-        }
-        return elements.find((node) => node.matches(selector));
-      }
-    };
-    if (Reflect.decorate && typeof name !== "object") {
-      Object.defineProperty(obj, name, descriptor);
-    }
-    return descriptor;
-  };
-}
-
 function search(value, searchString, callback) {
   let index = 0;
   while (index < value.length) {
@@ -1809,4 +1792,4 @@ class SharedResizeObserverInstance {
 }
 const SharedResizeObserver = new SharedResizeObserverInstance();
 
-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, getElementFromEvent, getKeyboardEventInfo, getUniqueId, isDraggableElement, limit, optionalAttr, optionalSlot, parseDate, queryAssignedElement, requestUpdateOnAriaChange, searchTextContent, toAriaBooleanAttribute, toPx, toggleAttribute, waitForAnimations };
+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 };

package/dist/styles.css

@@ -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)}}
+@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]{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{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)}}

package/dist/types/components/combobox/autocomplete.d.ts

@@ -11,12 +11,12 @@ declare const OdxAutocomplete_base: import('../../lib/main.js').Constructor<CanB
 export declare class OdxAutocomplete extends OdxAutocomplete_base {
     #private;
     protected readonly activeDescendants: ActiveDescendantsController<OptionControl>;
-    protected control?: HTMLInputElement | HTMLButtonElement;
     protected options: OptionControl[];
     protected readonly highlight: OdxHighlight;
     protected readonly dropdown: OdxDropdown;
     minQueryLength: number;
     searchFn: (option: OptionControl, query?: string) => boolean;
+    get control(): HTMLInputElement | undefined;
     get controlValue(): string;
     firstUpdated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;

package/dist/types/components/stack/stack.d.ts

@@ -1,11 +1,34 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, EnumString } from '../../lib/main.js';
 import { PropertyValues } from 'lit';
-import { StackAlign, StackGap, StackJustify } from './stack.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-stack': OdxStack;
     }
 }
+export type StackAlign = EnumString<typeof StackAlign>;
+export declare const StackAlign: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+};
+export type StackGap = EnumString<typeof StackGap>;
+export declare const StackGap: {
+    readonly NONE: "none";
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type StackJustify = EnumString<typeof StackJustify>;
+export declare const StackJustify: {
+    readonly START: "start";
+    readonly END: "end";
+    readonly CENTER: "center";
+    readonly SPACE_BETWEEN: "space-between";
+    readonly SPACE_AROUND: "space-around";
+    readonly SPACE_EVENLY: "space-evenly";
+};
 export declare class OdxStack extends CustomElement {
     align?: StackAlign;
     justify?: StackJustify;

package/dist/types/lib/interactive/interactive-element.d.ts

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { InteractiveLink } from './interactive-link.js';
-declare const InteractiveElement_base: import('../main.js').Constructor<import('../mixins/with-loading-state.js').HasLoadingState> & typeof InteractiveLink;
+declare const InteractiveElement_base: import('../utils/types.js').Constructor<import('../mixins/with-loading-state.js').HasLoadingState> & typeof InteractiveLink;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with

package/dist/types/lib/interactive/interactive-link.d.ts

@@ -1,7 +1,7 @@
 import { TemplateResult } from 'lit';
 import { CustomElement } from '../custom-element.js';
 import { CanBeDisabled } from '../mixins/can-be-disabled.js';
-declare const InteractiveLink_base: import('../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+declare const InteractiveLink_base: import('../utils/types.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class InteractiveLink extends InteractiveLink_base {
     static shadowRootOptions: ShadowRootInit;
     readonly nativeElement: HTMLElement;

package/dist/types/lib/main.d.ts

@@ -26,19 +26,16 @@ export * from './popover/popover-host.js';
 export * from './popover/popover.js';
 export * from './popover/popover.models.js';
 export * from './custom-element.js';
-export * from './utils/a11y.js';
-export * from './utils/date.js';
 export * from './utils/dedupe-mixin.js';
 export * from './utils/dom.js';
 export * from './utils/get-unique-id.js';
 export * from './utils/keyboard-events.js';
 export * from './utils/lit.js';
-export * from './utils/query-assigned-element.js';
 export * from './utils/search-text-content.js';
 export * from './utils/shared-intersection-observer.js';
 export * from './utils/shared-resize-observer.js';
 export * from './utils/types.js';
-export { effect } from '@lit-labs/preact-signals';
+export { computed, effect } from '@lit-labs/preact-signals';
 export { pick as enumFrom } from 'es-toolkit/object';
 declare global {
     export interface HighlightRegistry {

package/dist/types/lib/mixins/can-be-selected.d.ts

@@ -1,6 +1,5 @@
 import { CustomElement } from '../custom-element.js';
-import { ARIAMixinStrict } from '../utils/a11y.js';
-import { Constructor } from '../utils/types.js';
+import { ARIAMixinStrict, Constructor } from '../utils/types.js';
 export interface CanBeSelected {
     selected: boolean;
     ariaSelectedValue: ARIAMixinStrict['ariaCurrent'];

package/dist/types/lib/popover/popover.utils.d.ts

@@ -1,5 +1,4 @@
 import { FloatingElement, ReferenceElement } from '@floating-ui/dom';
-import { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover.models.js';
-export declare function getPopoverSide(placement: PopoverPlacement): PopoverSide;
+import { PopoverPlacementOptions } from './popover.models.js';
 export declare function computePopoverPlacement(referenceElement: ReferenceElement, floatingElement: FloatingElement, options: PopoverPlacementOptions): Promise<void>;
 //# sourceMappingURL=popover.utils.d.ts.map

package/dist/types/lib/utils/dom.d.ts

@@ -1,3 +1,4 @@
+export declare function parseDate(value: number | string | Date): Date | null;
 /**
  * Creates a new MutationObserver instance.
  *
@@ -14,4 +15,10 @@ export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: b
 export declare function fromAriaBooleanAttribute(value?: string | null): boolean;
 export declare function toPx(value?: string | number | null): string | null;
 export declare function limit<T extends CallableFunction = () => void>(fn: T, fpsLimit?: number): T;
+export interface GetAssignedElementOptions {
+    slot?: string;
+    selector?: string;
+    flatten?: boolean;
+}
+export declare function getAssignedElement<T = HTMLElement>(root: Element, options?: GetAssignedElementOptions): T | undefined;
 //# sourceMappingURL=dom.d.ts.map

package/dist/types/lib/utils/types.d.ts

@@ -1,3 +1,60 @@
 export declare type Constructor<T = any> = new (...args: any[]) => T;
 export type EnumString<T extends object> = T[keyof T];
+export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
+/**
+ * An extension of `ARIAMixin` that enforces strict value types for aria
+ * properties.
+ *
+ * This is needed for correct typing in render functions with lit analyzer.
+ *
+ * @example
+ * render() {
+ *   const {ariaLabel} = this as ARIAMixinStrict;
+ *   return html`
+ *     <button aria-label=${ariaLabel || nothing}>
+ *       <slot></slot>
+ *     </button>
+ *   `;
+ * }
+ */
+export interface ARIAMixinStrict extends ARIAMixin {
+    ariaAtomic: 'true' | 'false' | null;
+    ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
+    ariaBusy: 'true' | 'false' | null;
+    ariaChecked: 'true' | 'false' | null;
+    ariaColCount: `${number}` | null;
+    ariaColIndex: `${number}` | null;
+    ariaColSpan: `${number}` | null;
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null;
+    ariaDisabled: 'true' | 'false' | null;
+    ariaExpanded: 'true' | 'false' | null;
+    ariaHasPopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
+    ariaHidden: 'true' | 'false' | null;
+    ariaInvalid: 'true' | 'false' | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: `${number}` | null;
+    ariaLive: 'assertive' | 'off' | 'polite' | null;
+    ariaModal: 'true' | 'false' | null;
+    ariaMultiLine: 'true' | 'false' | null;
+    ariaMultiSelectable: 'true' | 'false' | null;
+    ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: `${number}` | null;
+    ariaPressed: 'true' | 'false' | null;
+    ariaReadOnly: 'true' | 'false' | null;
+    ariaRequired: 'true' | 'false' | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: `${number}` | null;
+    ariaRowIndex: `${number}` | null;
+    ariaRowSpan: `${number}` | null;
+    ariaSelected: 'true' | 'false' | null;
+    ariaSetSize: `${number}` | null;
+    ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;
+    ariaValueMax: `${number}` | null;
+    ariaValueMin: `${number}` | null;
+    ariaValueNow: `${number}` | null;
+    ariaValueText: string | null;
+    role: ARIARole | null;
+}
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.44",
+  "version": "1.0.0-beta.46",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -21,7 +21,7 @@
     "lit": "~3.3.0"
   },
   "peerDependencies": {
-    "@odx/icons": "^4.0.0-rc.15"
+    "@odx/icons": "^4.0.0-rc.22"
   },
   "devDependencies": {
     "@odx/storybook-utils": "*",
@@ -39,9 +39,17 @@
       "import": "./dist/main.js",
       "types": "./dist/types/lib/main.d.ts"
     },
-    "./*": {
-      "import": "./dist/*.js",
-      "types": "./dist/types/*/main.d.ts"
+    "./components": {
+      "import": "./dist/components.js",
+      "types": "./dist/types/components/main.d.ts"
+    },
+    "./i18n": {
+      "import": "./dist/i18n.js",
+      "types": "./dist/types/i18n/main.d.ts"
+    },
+    "./loader": {
+      "import": "./dist/loader.js",
+      "types": "./dist/types/loader/main.d.ts"
     },
     "./styles": "./dist/styles.css"
   },

package/dist/types/components/stack/stack.models.d.ts

@@ -1,26 +0,0 @@
-import { EnumString } from '../../lib/main.js';
-export type StackAlign = EnumString<typeof StackAlign>;
-export declare const StackAlign: {
-    readonly START: "start";
-    readonly CENTER: "center";
-    readonly END: "end";
-};
-export type StackGap = EnumString<typeof StackGap>;
-export declare const StackGap: {
-    readonly NONE: "none";
-    readonly XS: "xs";
-    readonly SM: "sm";
-    readonly MD: "md";
-    readonly LG: "lg";
-    readonly XL: "xl";
-};
-export type StackJustify = EnumString<typeof StackJustify>;
-export declare const StackJustify: {
-    readonly START: "start";
-    readonly END: "end";
-    readonly CENTER: "center";
-    readonly SPACE_BETWEEN: "space-between";
-    readonly SPACE_AROUND: "space-around";
-    readonly SPACE_EVENLY: "space-evenly";
-};
-//# sourceMappingURL=stack.models.d.ts.map

package/dist/types/lib/utils/a11y.d.ts

@@ -1,58 +0,0 @@
-export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
-/**
- * An extension of `ARIAMixin` that enforces strict value types for aria
- * properties.
- *
- * This is needed for correct typing in render functions with lit analyzer.
- *
- * @example
- * render() {
- *   const {ariaLabel} = this as ARIAMixinStrict;
- *   return html`
- *     <button aria-label=${ariaLabel || nothing}>
- *       <slot></slot>
- *     </button>
- *   `;
- * }
- */
-export interface ARIAMixinStrict extends ARIAMixin {
-    ariaAtomic: 'true' | 'false' | null;
-    ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
-    ariaBusy: 'true' | 'false' | null;
-    ariaChecked: 'true' | 'false' | null;
-    ariaColCount: `${number}` | null;
-    ariaColIndex: `${number}` | null;
-    ariaColSpan: `${number}` | null;
-    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | null;
-    ariaDisabled: 'true' | 'false' | null;
-    ariaExpanded: 'true' | 'false' | null;
-    ariaHasPopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
-    ariaHidden: 'true' | 'false' | null;
-    ariaInvalid: 'true' | 'false' | null;
-    ariaKeyShortcuts: string | null;
-    ariaLabel: string | null;
-    ariaLevel: `${number}` | null;
-    ariaLive: 'assertive' | 'off' | 'polite' | null;
-    ariaModal: 'true' | 'false' | null;
-    ariaMultiLine: 'true' | 'false' | null;
-    ariaMultiSelectable: 'true' | 'false' | null;
-    ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;
-    ariaPlaceholder: string | null;
-    ariaPosInSet: `${number}` | null;
-    ariaPressed: 'true' | 'false' | null;
-    ariaReadOnly: 'true' | 'false' | null;
-    ariaRequired: 'true' | 'false' | null;
-    ariaRoleDescription: string | null;
-    ariaRowCount: `${number}` | null;
-    ariaRowIndex: `${number}` | null;
-    ariaRowSpan: `${number}` | null;
-    ariaSelected: 'true' | 'false' | null;
-    ariaSetSize: `${number}` | null;
-    ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;
-    ariaValueMax: `${number}` | null;
-    ariaValueMin: `${number}` | null;
-    ariaValueNow: `${number}` | null;
-    ariaValueText: string | null;
-    role: ARIARole | null;
-}
-//# sourceMappingURL=a11y.d.ts.map

package/dist/types/lib/utils/date.d.ts

@@ -1,2 +0,0 @@
-export declare function parseDate(value: number | string | Date): Date | null;
-//# sourceMappingURL=date.d.ts.map

package/dist/types/lib/utils/query-assigned-element.d.ts

@@ -1,16 +0,0 @@
-import { ReactiveElement } from 'lit';
-type Interface<T> = {
-    [K in keyof T]: T[K];
-};
-export type QueryAssignedElementDecorator = {
-    (proto: Interface<ReactiveElement>, name: PropertyKey, descriptor?: PropertyDescriptor): void | any;
-    <C extends Interface<ReactiveElement>, V extends Element | undefined>(value: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
-};
-export interface QueryAssignedElementOptions {
-    slot?: string;
-    selector?: string;
-    flatten?: boolean;
-}
-export declare function queryAssignedElement(options?: QueryAssignedElementOptions): QueryAssignedElementDecorator;
-export {};
-//# sourceMappingURL=query-assigned-element.d.ts.map