@odx/foundation 1.0.0-beta.174 → 1.0.0-beta.175

package/README.md

@@ -5,6 +5,7 @@ The `@odx/foundation` package is a core part of the ODX Design System, providing
 
 ### Features
 
+- **CSS Framework**: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
 - **Components**: Reusable web components, including buttons, tables, headers, and more.
 - **i18n**: Internationalization utilities for building multilingual applications, with support for locale changes and translations.
 - **Global Styles**: Comprehensive global styles, including colors, spacing, and themes.
@@ -42,13 +43,21 @@ import '@odx/icons/core';
 import '@odx/foundation/loader';
 
 // Load styles (in JS)
-import '@odx/foundation/styles'; // JS
+import '@odx/foundation/styles';
+
+// Load CSS framework only (in JS)
+import '@odx/foundation/css';
+
 
 ```
 
 ```css
-// Load styles (in CSS)
+/* Load styles (in CSS) */
 @import '@odx/foundation/dist/styles.css';
+
+/* Load CSS framework only (in JS) */
+@import '@odx/foundation/dist/css.css';
+
 ```
 
 #### Native Styles
@@ -59,12 +68,12 @@ In order to use the native styles, you need to import the `styles.css` file from
 
 ```js
 // Load styles (in JS)
-import '@odx/foundation/styles/native'; // JS
+import '@odx/foundation/css/native'; // JS
 ```
 
 ```css
-// Load styles (in CSS)
-@import '@odx/foundation/dist/native.css';
+/* Load styles (in CSS) */
+@import '@odx/foundation/dist/cssNative.css';
 ```
 
 

package/dist/components.js

@@ -1352,7 +1352,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
     };
   }
   render() {
-    return html`<slot name="control" @slotchange="${this.#handleControlSlotChange}"></slot><odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled="${this.disabled}" match-reference-width><odx-highlight minlength="${this.minQueryLength}" selector="odx-option" variant="accent-subtle" .root="${this}"><div class="odx-stack odx-gap-0"><slot></slot></div></odx-highlight></odx-dropdown>`;
+    return html`<slot name="control" @slotchange="${this.#handleControlSlotChange}"></slot><odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled="${this.disabled}" match-reference-width><odx-highlight minlength="${this.minQueryLength}" selector="odx-option" variant="accent-subtle" .root="${this}"><div class="odx-stack odx-g-0"><slot></slot></div></odx-highlight></odx-dropdown>`;
   }
   #handleControlValueChange(value) {
     if (!this.control) return;
@@ -1982,7 +1982,7 @@ const _OdxImage = class _OdxImage extends CustomElement {
     return html`${when(
       !this.loadingError && this.image,
       () => this.image,
-      () => html`<div class="loading-error odx-stack odx-gap-0 odx-align-center">${_OdxImage.renderPlaceholder(this)}</div>`
+      () => html`<div class="loading-error odx-stack odx-g-0 odx-align-center">${_OdxImage.renderPlaceholder(this)}</div>`
     )}<odx-loading-overlay ?loading="${this.loading}"></odx-loading-overlay>`;
   }
   updated(props) {
@@ -2576,7 +2576,7 @@ const _OdxMainMenu = class _OdxMainMenu extends CustomElement {
     this.popover = "auto";
   }
   render() {
-    return html`<div class="base"><div class="header odx-cluster odx-align-center odx-justify-space-between"><odx-logo size="sm"></odx-logo><odx-icon-button icon="core::close" variant="ghost" @click="${this.hidePopover}" autofocus></odx-icon-button></div><div class="subheader odx-stack odx-gap-25"><slot name="title"></slot><slot name="subtitle"></slot></div><div class="navigation odx-stack" role="navigation"><slot @slotchange="${this.#handleSlotChange}"></slot></div><div class="link-navigation odx-cluster odx-gap-25"><slot name="link-navigation"></slot></div></div><div class="backdrop" @click="${this.hidePopover}"></div>`;
+    return html`<div class="base"><div class="header odx-cluster odx-align-center odx-justify-space-between"><odx-logo size="sm"></odx-logo><odx-icon-button icon="core::close" variant="ghost" @click="${this.hidePopover}" autofocus></odx-icon-button></div><div class="subheader odx-stack odx-g-25"><slot name="title"></slot><slot name="subtitle"></slot></div><div class="navigation odx-stack" role="navigation"><slot @slotchange="${this.#handleSlotChange}"></slot></div><div class="link-navigation odx-cluster odx-g-25"><slot name="link-navigation"></slot></div></div><div class="backdrop" @click="${this.hidePopover}"></div>`;
   }
   willUpdate(props) {
     super.willUpdate(props);
@@ -3013,7 +3013,7 @@ const _OdxPagination = class _OdxPagination extends IsLocalized(CustomElement) {
     this.page = this.totalPages - 1;
   }
   render() {
-    return html`<p class="odx-no-overflow">${this.t(`odx.pagination.summary.${this.compact ? "compact" : "default"}`, this.paginationContext)}</p><div class="odx-cluster odx-gap-37 odx-nowrap"><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.firstPage")}" icon="core::chevron-left-end" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.firstPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.previousPage")}" icon="core::chevron-left" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.previousPage()}"></odx-icon-button></odx-button-group><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.nextPage")}" icon="core::chevron-right" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.nextPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.lastPage")}" icon="core::chevron-right-end" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.lastPage()}"></odx-icon-button></odx-button-group></div>`;
+    return html`<p class="odx-no-overflow">${this.t(`odx.pagination.summary.${this.compact ? "compact" : "default"}`, this.paginationContext)}</p><div class="odx-cluster odx-g-37 odx-nowrap"><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.firstPage")}" icon="core::chevron-left-end" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.firstPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.previousPage")}" icon="core::chevron-left" ?disabled="${!this.paginationContext.hasPreviousPage}" @click="${() => this.previousPage()}"></odx-icon-button></odx-button-group><odx-button-group size="sm" variant="ghost"><odx-icon-button label="${this.t("odx.pagination.nextPage")}" icon="core::chevron-right" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.nextPage()}"></odx-icon-button><odx-icon-button label="${this.t("odx.pagination.lastPage")}" icon="core::chevron-right-end" ?disabled="${!this.paginationContext.hasNextPage}" @click="${() => this.lastPage()}"></odx-icon-button></odx-button-group></div>`;
   }
   updated(props) {
     super.updated(props);

package/dist/css.css

@@ -0,0 +1 @@
+@layer reset,base,variant,state,theme,utils;@layer reset{:not(:defined){display:none}:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}.odx-title-xs,:where(h6){line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}.odx-title-sm,:where(h5){line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}.odx-title-md,:where(h4){line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}.odx-title-lg,:where(h3){line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}.odx-title-xl,:where(h2){line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}.odx-title-xxl,:where(h1){line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}@layer base{.odx-content{odx-title{margin-block:0 var(--odx-spacing-37)}odx-text{margin-block:0 var(--odx-spacing-75)}h1,h2,h3,h4,h5,h6{margin-block:0 var(--odx-spacing-75)}p:not(:last-child){margin-block:0 var(--odx-spacing-75)}ol,ul{margin-block:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-200)}}}@layer base{.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer utils{.odx-g-auto{gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-ps-auto{padding-block-end:auto}.odx-g-0{gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-ps-0{padding-block-end:0}.odx-g-1{gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-ps-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-ps-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-ps-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-ps-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-ps-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-ps-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-ps-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-ps-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-ps-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-ps-250{padding-block-end:var(--odx-spacing-250)}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px)}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}

package/dist/cssNative.css

@@ -0,0 +1 @@
+@layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-250);text-align:start;font-size:inherit}td{block-size:var(--cell-size);vertical-align:middle}th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}th{border-bottom-color:transparent;cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}}

package/dist/lib/custom-element.d.ts

@@ -1,11 +1,15 @@
 import { LitElement, TemplateResult } from 'lit';
 type CustomElementTag = keyof HTMLElementTagNameMap & `odx-${string}`;
 /** @internal */
+export declare function loadCustomElements(loader: () => Promise<unknown[]>): Promise<void>;
+/** @internal */
 export declare function customElement(tagName: CustomElementTag, ...styles: string[]): (target: typeof CustomElement) => void;
 /** @internal */
 export declare class CustomElement extends LitElement {
     /** @internal */
     static tagName: string;
+    /** @internal */
+    static load: () => undefined;
     protected render(): TemplateResult | string;
     /** @internal */
     emit(event: string | Event, eventInit?: CustomEventInit): boolean;

package/dist/loader.js

@@ -1,7 +1,3 @@
-(async function defineCustomElements() {
-  const components = Object.values(await import('./components.js'));
-  for (const entry of components) {
-    if (typeof entry !== "function" || !("tagName" in entry) || !entry.tagName || customElements.get(entry.tagName)) continue;
-    customElements.define(entry.tagName, entry);
-  }
-})();
+import { loadCustomElements } from '@odx/foundation';
+
+loadCustomElements(() => import('./components.js').then(Object.values));

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.174";
+const version = "1.0.0-beta.175";
 const pkg = {
   name,
   displayName,
@@ -92,8 +92,15 @@ function getKeyInfo(event) {
   };
 }
 
-const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block:0 var(--odx-spacing-75)}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
+const customElementStyles = "@layer reset,base,variant,state,theme,utils;@layer reset{:not(:defined){display:none}:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}.odx-title-xs,:where(h6){line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}.odx-title-sm,:where(h5){line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}.odx-title-md,:where(h4){line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}.odx-title-lg,:where(h3){line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}.odx-title-xl,:where(h2){line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}.odx-title-xxl,:where(h1){line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}@layer base{.odx-content{odx-title{margin-block:0 var(--odx-spacing-37)}odx-text{margin-block:0 var(--odx-spacing-75)}h1,h2,h3,h4,h5,h6{margin-block:0 var(--odx-spacing-75)}p:not(:last-child){margin-block:0 var(--odx-spacing-75)}ol,ul{margin-block:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-200)}}}@layer base{.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer utils{.odx-g-auto{gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-ps-auto{padding-block-end:auto}.odx-g-0{gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-ps-0{padding-block-end:0}.odx-g-1{gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-ps-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-ps-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-ps-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-ps-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-ps-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-ps-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-ps-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-ps-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-ps-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-ps-250{padding-block-end:var(--odx-spacing-250)}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px)}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
 
+async function loadCustomElements(loader) {
+  const entries = await loader();
+  for (const entry of entries) {
+    if (typeof entry !== "function" || !("load" in entry) || typeof entry.load !== "function") continue;
+    entry.load?.();
+  }
+}
 function customElement(tagName, ...styles) {
   return (target) => {
     const mergedStyles = [customElementStyles, target.styles, ...styles].flatMap((styles2) => {
@@ -101,9 +108,17 @@ function customElement(tagName, ...styles) {
     });
     target.styles = uniqBy(mergedStyles, String);
     target.tagName = tagName;
+    target.load = () => {
+      if (customElements.get(tagName)) return;
+      customElements.define(tagName, target);
+    };
   };
 }
 class CustomElement extends LitElement {
+  static {
+    /** @internal */
+    this.load = () => void 0;
+  }
   render() {
     return html`<slot></slot>`;
   }
@@ -1215,4 +1230,4 @@ const main = {
   version: pkg.version
 };
 
-export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Alignment, BadgePosition, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, clickedOutside, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getAssignedElements, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, optionalAttr, optionalSlot, parseDate, supportsHover, toAriaBooleanAttribute, toPx, waitForAnimations };
+export { ActiveDescendantsController, ActiveDescendantsControllerOptions, Alignment, BadgePosition, CanBeDisabled, CanBeExpanded, CheckboxFormControl, CheckboxGroupFormControl, CustomElement, DragController, DragControllerOptions, ExpandableItemManager, FormControl, Gap, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, Justify, ListboxFormControl, NumberFormControl, OptionControl, Placement, PopoverPlacementOptions, ProgressVariant, RadioGroupFormControl, Shape, SharedResizeObserver, Size, Variant, clickedOutside, computePopoverPlacement, customElement, main as default, findClosestDocument, forwardEvent, getAssignedElement, getAssignedElements, getElementFromEvent, getIdFromHref, getKeyInfo, getUniqueId, loadCustomElements, optionalAttr, optionalSlot, parseDate, supportsHover, toAriaBooleanAttribute, toPx, 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]{outline:none;border:none}img,picture,video,canvas{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block:0 var(--odx-spacing-75)}}@layer base{.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}.odx-gap-0{gap:0}.odx-gap-12{gap:var(--odx-spacing-12)}.odx-gap-25{gap:var(--odx-spacing-25)}.odx-gap-37{gap:var(--odx-spacing-37)}.odx-gap-50{gap:var(--odx-spacing-50)}.odx-gap-75{gap:var(--odx-spacing-75)}.odx-gap-100{gap:var(--odx-spacing-100)}.odx-gap-150{gap:var(--odx-spacing-150)}.odx-gap-200{gap:var(--odx-spacing-200)}.odx-gap-250{gap:var(--odx-spacing-250)}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important}}@layer base{input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer base{.odx-content{odx-title{margin-block:0 var(--odx-spacing-37)}odx-text{margin-block:0 var(--odx-spacing-75)}p:not(:last-child){margin-block:0 var(--odx-spacing-75)}ol,ul{margin-block:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-200)}}}: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px)}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
+@layer reset,base,variant,state,theme,utils;@layer reset{:not(:defined){display:none}:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}.odx-title-xs,:where(h6){line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}.odx-title-sm,:where(h5){line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}.odx-title-md,:where(h4){line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}.odx-title-lg,:where(h3){line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}.odx-title-xl,:where(h2){line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}.odx-title-xxl,:where(h1){line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}@layer base{.odx-content{odx-title{margin-block:0 var(--odx-spacing-37)}odx-text{margin-block:0 var(--odx-spacing-75)}h1,h2,h3,h4,h5,h6{margin-block:0 var(--odx-spacing-75)}p:not(:last-child){margin-block:0 var(--odx-spacing-75)}ol,ul{margin-block:var(--odx-spacing-75);padding-inline-start:var(--odx-spacing-200)}}}@layer base{.odx-cluster,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row wrap}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}}@layer utils{.odx-g-auto{gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-ps-auto{padding-block-end:auto}.odx-g-0{gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-ps-0{padding-block-end:0}.odx-g-1{gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-ps-1{padding-block-end:var(--odx-spacing-px)}.odx-g-12{gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-ps-12{padding-block-end:var(--odx-spacing-12)}.odx-g-25{gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-ps-25{padding-block-end:var(--odx-spacing-25)}.odx-g-37{gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-ps-37{padding-block-end:var(--odx-spacing-37)}.odx-g-50{gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-ps-50{padding-block-end:var(--odx-spacing-50)}.odx-g-75{gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-ps-75{padding-block-end:var(--odx-spacing-75)}.odx-g-100{gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-ps-100{padding-block-end:var(--odx-spacing-100)}.odx-g-150{gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-ps-150{padding-block-end:var(--odx-spacing-150)}.odx-g-200{gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-ps-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-ps-250{padding-block-end:var(--odx-spacing-250)}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}: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-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px)}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer base{:root{--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-icon{transition:var(--odx-transition-default);transition-property:transform}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}odx-accordion-item[expanded]::part(indicator){--rotate: 0}}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.174",
+  "version": "1.0.0-beta.175",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -11,31 +11,26 @@
     "LICENSE",
     "!assets",
     "!dist/**/*.map",
-    "!dist/**/*.stories.d.ts",
-    "custom-elements.json"
+    "!dist/**/*.stories.d.ts"
   ],
   "type": "module",
   "dependencies": {
-    "@odx/design-tokens": "1.1.0-rc.5",
     "@preact/signals-core": "1.11.0",
     "lit": "3.3.1"
   },
   "peerDependencies": {
+    "@odx/design-tokens": "^1.1.0-rc.5",
     "@odx/icons": "^4.0.0-rc.41"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "0.10.4",
     "@floating-ui/dom": "1.7.3",
     "@lit-labs/preact-signals": "1.0.3",
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
     "@lit/context": "1.1.6",
     "@odx/icons": "4.0.0-rc.41",
     "@spectrum-web-components/reactive-controllers": "1.7.0",
-    "@wc-toolkit/cem-inheritance": "1.1.0",
-    "@wc-toolkit/cem-validator": "1.0.3",
-    "@wc-toolkit/module-path-resolver": "1.0.0",
-    "@wc-toolkit/type-parser": "1.1.0",
     "es-toolkit": "1.39.8",
+    "sass-embedded": "1.89.2",
     "stylelint": "16.23.0",
     "stylelint-config-concentric-order": "5.2.1",
     "stylelint-config-standard": "39.0.0",
@@ -68,8 +63,9 @@
       "import": "./dist/loader.js",
       "types": "./dist/components/loader.d.ts"
     },
-    "./styles": "./dist/styles.css",
-    "./styles/native": "./dist/native.css"
+    "./css": "./dist/css.css",
+    "./css/native": "./dist/cssNative.css",
+    "./styles": "./dist/styles.css"
   },
   "publishConfig": {
     "access": "public",
@@ -79,7 +75,7 @@
     "build": "vite build",
     "dev": "vite build --watch --mode=development",
     "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
-    "lint": "biome lint lib i18n styles components",
+    "lint": "biome lint src",
     "generate:manifest": "cem analyze"
   }
 }

package/dist/native.css

@@ -1 +0,0 @@
-@layer base{table{--cell-size: var(--odx-size-300);border:0;min-width:100%;table-layout:auto;border-spacing:0;white-space:normal;tr{transition:var(--odx-transition-reduced);transition-property:background-color,color;background-color:var(--odx-color-background-transparent)}tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}th,td{padding:var(--odx-spacing-37) var(--odx-spacing-75);min-block-size:var(--odx-size-250);text-align:start;font-size:inherit}td{block-size:var(--cell-size);vertical-align:middle}th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}th{border-bottom-color:transparent;cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);user-select:none}th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}h6{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}h5{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}h4{line-height:var(--odx-breakpoint-line-height-heading-4);font-size:var(--odx-breakpoint-font-size-heading-4)}h3{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}h2{line-height:var(--odx-breakpoint-line-height-heading-2);font-size:var(--odx-breakpoint-font-size-heading-2)}h1{line-height:var(--odx-breakpoint-line-height-heading-1);font-size:var(--odx-breakpoint-font-size-heading-1)}}