@odx/foundation 1.0.0-alpha.41 → 1.0.0-alpha.42

package/README.md

@@ -9,11 +9,15 @@ The `@odx/foundation` package is an integral element of the ODX Design System, o
 - **Typography**: Predefined typography styles for headers, paragraphs, and other text elements to ensure a cohesive look and feel.
 - **Global Styles**: Comprehensive global styles that set the base for your application's design, including colors, spacing, and more.
 
+### Prequisites
+
+
 ### Install
 
 [<img alt="NPM Version (with dist tag)" src="https://img.shields.io/npm/v/%40odx%2Ffoundation/latest?style=flat-square">](https://npmjs.org/package/@odx/foundation)
 
-To include `@odx/foundation` in your project, run the following command:
+
+To install `@odx/foundation` in your project, run the following command:
 
 ```bash
 npm install @odx/foundation @odx/icons@next --save 
@@ -26,31 +30,26 @@ npm install @odx/foundation @odx/icons@next --save
 
 ### Setup
 
-Once installed, you can import the foundational components and styles into your project:
+> Ensure that you have followed the installation and setup instructions for our [**design tokens**](https://npmjs.org/package/@odx/design-tokens) library.
 
-#### Install core icons
+Once installed, you can import the foundational components and styles into your project:
 
 ```js
+// Load core icons
 import '@odx/icons';
 import '@odx/icons/core';
-```
 
-#### Fonts and styles
+// Load components
+import '@odx/foundation/loader';
 
-```js
-// JS
-import '@odx/design-tokens/fonts';
-import '@odx/foundation/styles';
+// Load styles (in JS)
+import '@odx/foundation/styles'; // JS
 
-// CSS
-@import '@odx/design-tokens/dist/assets/fonts.css';
-@import '@odx/foundation/dist/styles.css';
 ```
 
-#### Load and install all components
-
-```js
-import '@odx/foundation/loader';
+```css
+// Load styles (in CSS)
+@import '@odx/foundation/dist/styles.css';
 ```
 
 ### Documentation

package/dist/cdk.js

@@ -320,7 +320,7 @@ const PopoverHost = dedupeMixin((superClass) => {
   return PopoverHostClass;
 });
 
-const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;box-shadow:var(--_popover-shadow);color:var(--_popover-color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;box-shadow:var(--_popover-shadow);color:var(--_popover-color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto;scrollbar-width:thin}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components.js

@@ -482,7 +482,7 @@ let OdxAnchorNavigation = class extends SignalWatcher(CustomElement) {
       const target = getElementFromEvent(event, (node) => node instanceof OdxLink);
       if (!target) return;
       event.preventDefault();
-      document.querySelector(target.href)?.scrollIntoView({ behavior: "smooth" });
+      document.querySelector(target.href)?.scrollIntoView();
     });
     this.addEventListener("click", __privateGet$o(this, _handleClick$6));
   }

package/dist/main.js

@@ -148,7 +148,7 @@ class SlotFallbackDirective extends Directive {
 }
 const emptySlotFallbackFix = directive(SlotFallbackDirective);
 
-const customElementStyles = "@layer reset,base,variant,state,theme,override;@layer reset{:is(*),:before,:after{box-sizing:border-box}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;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@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);color:inherit}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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:where(:host){box-sizing:border-box;border:none;color:inherit;outline:none}}";
+const customElementStyles = "@layer reset,base,variant,state,theme,override;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}: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}#root,#__next{isolation:isolate;margin:0}}@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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}";
 
 function toCSSResult(value) {
   return value instanceof CSSResult || value instanceof CSSStyleSheet ? value : unsafeCSS(value);

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*),:before,:after{box-sizing:border-box}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;margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}#root,#__next{isolation:isolate;margin:0}}@layer base{:root{--odx-palette-blue-10: hsl(216 65% 90%);--odx-palette-blue-20: hsl(217 71% 80%);--odx-palette-blue-30: hsl(217 75% 70%);--odx-palette-blue-40: hsl(217 80% 60%);--odx-palette-blue-50: hsl(217 75% 48%);--odx-palette-blue-60: hsl(217 90% 40%);--odx-palette-blue-70: hsl(217 95% 30%);--odx-palette-blue-80: hsl(217 100% 20%);--odx-palette-blue-90: hsl(216 100% 10%);--odx-palette-blue-100: hsl(216 100% 1%);--odx-palette-blue-00: hsl(219 70% 96%);--odx-palette-blue-80-60: hsl(217 100% 20% / .6);--odx-palette-blue-80-15: hsl(217 100% 20% / .1);--odx-palette-blue-100-30: hsl(216 100% 1% / .3);--odx-palette-blue-80-5: hsl(217 100% 20% / .05);--odx-palette-cyan-10: hsl(200 100% 92%);--odx-palette-cyan-20: hsl(201 100% 84%);--odx-palette-cyan-30: hsl(201 100% 74%);--odx-palette-cyan-40: hsl(201 100% 65%);--odx-palette-cyan-50: hsl(201 100% 55%);--odx-palette-cyan-60: hsl(205 100% 48%);--odx-palette-cyan-70: hsl(205 100% 40%);--odx-palette-cyan-80: hsl(205 100% 34%);--odx-palette-cyan-90: hsl(205 100% 27%);--odx-palette-cyan-100: hsl(205 100% 20%);--odx-palette-cyan-00: hsl(200 90% 96%);--odx-palette-cyan-10-5: hsl(200 100% 92% / .05);--odx-palette-cyan-10-15: hsl(200 100% 92% / .15);--odx-palette-cyan-60-15: hsl(205 100% 48% / .15);--odx-palette-cyan-60-20: hsl(205 100% 48% / .2);--odx-palette-cyan-60-25: hsl(205 100% 48% / .25);--odx-palette-coolgray-10: hsl(216 20% 95%);--odx-palette-coolgray-20: hsl(213 18% 90%);--odx-palette-coolgray-30: hsl(212 15% 83%);--odx-palette-coolgray-40: hsl(213 15% 76%);--odx-palette-coolgray-50: hsl(210 14% 69%);--odx-palette-coolgray-60: hsl(209 13% 62%);--odx-palette-coolgray-70: hsl(206 12% 55%);--odx-palette-coolgray-80: hsl(208 11% 47%);--odx-palette-coolgray-90: hsl(205 10% 39%);--odx-palette-coolgray-100: hsl(205 16% 31%);--odx-palette-coolgray-110: hsl(210 17% 27%);--odx-palette-coolgray-120: hsl(207 19% 23%);--odx-palette-coolgray-130: hsl(210 20% 20%);--odx-palette-coolgray-140: hsl(210 20% 16%);--odx-palette-coolgray-150: hsl(210 22% 9%);--odx-palette-coolgray-00: hsl(210 20% 98%);--odx-palette-red-10: hsl(0 100% 92%);--odx-palette-red-20: hsl(0 100% 84%);--odx-palette-red-30: hsl(0 100% 74%);--odx-palette-red-40: hsl(0 100% 68%);--odx-palette-red-50: hsl(0 100% 60%);--odx-palette-red-60: hsl(0 100% 46%);--odx-palette-red-70: hsl(0 98% 43%);--odx-palette-red-80: hsl(0 100% 37%);--odx-palette-red-90: hsl(0 100% 30%);--odx-palette-red-100: hsl(0 100% 22%);--odx-palette-red-00: hsl(354 100% 96%);--odx-palette-green-10: hsl(133 100% 86%);--odx-palette-green-20: hsl(133 100% 79%);--odx-palette-green-30: hsl(133 100% 71%);--odx-palette-green-40: hsl(133 100% 61%);--odx-palette-green-50: hsl(133 91% 50%);--odx-palette-green-60: hsl(133 100% 43%);--odx-palette-green-70: hsl(133 100% 39%);--odx-palette-green-80: hsl(133 100% 33%);--odx-palette-green-90: hsl(133 100% 26%);--odx-palette-green-100: hsl(133 100% 20%);--odx-palette-green-00: hsl(138 100% 91%);--odx-palette-yellow-10: hsl(53 100% 86%);--odx-palette-yellow-20: hsl(53 100% 81%);--odx-palette-yellow-30: hsl(52 100% 75%);--odx-palette-yellow-40: hsl(53 100% 64%);--odx-palette-yellow-50: hsl(53 100% 50%);--odx-palette-yellow-60: hsl(53 100% 45%);--odx-palette-yellow-70: hsl(53 100% 37%);--odx-palette-yellow-80: hsl(53 100% 30%);--odx-palette-yellow-90: hsl(53 100% 24%);--odx-palette-yellow-100: hsl(53 100% 18%);--odx-palette-yellow-00: hsl(53 100% 92%);--odx-palette-orange-10: hsl(31 100% 92%);--odx-palette-orange-20: hsl(30 100% 83%);--odx-palette-orange-30: hsl(30 100% 74%);--odx-palette-orange-40: hsl(30 100% 65%);--odx-palette-orange-50: hsl(30 100% 56%);--odx-palette-orange-60: hsl(30 100% 48%);--odx-palette-orange-70: hsl(30 100% 40%);--odx-palette-orange-80: hsl(30 100% 32%);--odx-palette-orange-90: hsl(30 100% 24%);--odx-palette-orange-100: hsl(30 100% 16%);--odx-palette-orange-00: hsl(30 100% 96%);--odx-palette-white: hsl(0 0% 100%);--odx-palette-black: hsl(217 52% 5%);--odx-palette-warmgray-10: hsl(0 10% 96%);--odx-palette-warmgray-20: hsl(0 10% 90%);--odx-palette-warmgray-30: hsl(0 6% 85%);--odx-palette-warmgray-40: hsl(0 7% 78%);--odx-palette-warmgray-50: hsl(0 3% 70%);--odx-palette-warmgray-60: hsl(0 3% 63%);--odx-palette-warmgray-70: hsl(0 2% 56%);--odx-palette-warmgray-80: hsl(0 2% 48%);--odx-palette-warmgray-90: hsl(0 2% 40%);--odx-palette-warmgray-100: hsl(0 3% 31%);--odx-palette-warmgray-120: hsl(0 2% 26%);--odx-palette-warmgray-130: hsl(0 2% 22%);--odx-palette-warmgray-140: hsl(0 2% 20%);--odx-palette-warmgray-150: hsl(0 2% 16%);--odx-palette-warmgray-00: hsl(0 9% 98%);--odx-palette-sandgray-10: hsl(90 20% 96%);--odx-palette-sandgray-20: hsl(90 15% 92%);--odx-palette-sandgray-30: hsl(90 9% 87%);--odx-palette-sandgray-40: hsl(80 7% 84%);--odx-palette-sandgray-50: hsl(82 7% 78%);--odx-palette-sandgray-60: hsl(78 7% 73%);--odx-palette-sandgray-70: hsl(80 7% 67%);--odx-palette-sandgray-80: hsl(83 8% 61%);--odx-palette-sandgray-90: hsl(80 7% 51%);--odx-palette-sandgray-100: hsl(78 6% 41%);--odx-palette-sandgray-110: hsl(78 7% 36%);--odx-palette-sandgray-120: hsl(78 6% 31%);--odx-palette-sandgray-130: hsl(75 6% 26%);--odx-palette-sandgray-140: hsl(77 6% 23%);--odx-palette-sandgray-150: hsl(72 6% 16%);--odx-palette-sandgray-00: hsl(90 20% 98%);--odx-palette-transparent: hsl(0 0% 100% / 0);--odx-palette-white-60: hsl(0 0% 100% / .6);--odx-palette-black-60: hsl(217 52% 5% / .6);--odx-palette-white-05: hsl(0 0% 100% / .05);--odx-typography-font-size-1: .75rem;--odx-typography-font-size-2: .875rem;--odx-typography-font-size-3: 1rem;--odx-typography-font-size-4: 1.125rem;--odx-typography-font-size-5: 1.25rem;--odx-typography-font-size-6: 1.5rem;--odx-typography-font-size-7: 1.875rem;--odx-typography-font-size-8: 2.5rem;--odx-typography-font-size-9: 3rem;--odx-typography-font-size-10: 3.375rem;--odx-typography-font-size-11: 4.25rem;--odx-typography-font-size-12: 4.75rem;--odx-typography-font-size-13: 5.875rem;--odx-typography-font-size-base: 1rem;--odx-typography-weight-font-weight-normal: Regular;--odx-typography-weight-font-weight-medium: Medium;--odx-typography-weight-font-weight-semibold: Semibold;--odx-typography-font-family-brand: Draeger Pangea Text;--odx-typography-font-family-base: Draeger Pangea Text;--odx-typography-line-height-1: .875rem;--odx-typography-line-height-2: 1.1875rem;--odx-typography-line-height-3: 1.375rem;--odx-typography-line-height-4: 1.5rem;--odx-typography-line-height-5: 1.625rem;--odx-typography-line-height-6: 1.9375rem;--odx-typography-line-height-7: 2.4375rem;--odx-typography-line-height-8: 3.0625rem;--odx-typography-line-height-9: 3.6875rem;--odx-typography-line-height-10: 4rem;--odx-typography-line-height-11: 5rem;--odx-typography-line-height-12: 5.5625rem;--odx-typography-line-height-13: 6.875rem;--odx-typography-line-height-base: 1.5rem;--odx-typography-font-weight-normal: 400;--odx-typography-font-weight-medium: 500;--odx-typography-font-weight-semibold: 600;--odx-size-12: .125rem;--odx-size-25: .25rem;--odx-size-37: .375rem;--odx-size-50: .5rem;--odx-size-75: .75rem;--odx-size-100: 1rem;--odx-size-125: 1.25rem;--odx-size-150: 1.5rem;--odx-size-175: 1.75rem;--odx-size-200: 2rem;--odx-size-225: 2.25rem;--odx-size-250: 2.5rem;--odx-size-300: 3rem;--odx-size-350: 3.5rem;--odx-size-400: 4rem;--odx-size-450: 4.5rem;--odx-size-500: 5rem;--odx-size-600: 6rem;--odx-size-700: 7rem;--odx-size-800: 8rem;--odx-size-900: 9rem;--odx-size-1000: 10rem;--odx-size-px: .0625rem;--odx-size-base: 1rem;--odx-color-transparent: hsl(0 0% 0% / 0);--odx-breakpoint-visibility-sm-down-show: true;--odx-breakpoint-visibility-md-down-show: true;--odx-breakpoint-visibility-lg-down-show: true;--odx-breakpoint-visibility-sm-down-hide: false;--odx-breakpoint-visibility-md-down-hide: false;--odx-breakpoint-visibility-lg-down-hide: false;--odx-breakpoint-visibility-sm-show: true;--odx-breakpoint-visibility-md-show: false;--odx-breakpoint-visibility-lg-show: false;--odx-breakpoint-visibility-xl-show: false;--odx-motion-duration-default: 275ms;--odx-motion-duration-slow: 375ms;--odx-motion-duration-fast: .15s;--odx-motion-easing-default: cubic-bezier(.4, 0, .2, 1);--odx-motion-easing-reduced: cubic-bezier(0, 0, 1, 1);--odx-border-width-none: 0;--odx-border-width-thick: .125rem;--odx-border-radius-none: 0;--odx-border-radius-sm: .1875rem;--odx-border-radius-md: .3125rem;--odx-border-radius-circle: 624.9375rem;--odx-color-foreground-base: var(--odx-palette-blue-80);--odx-color-foreground-inverse: var(--odx-palette-white);--odx-color-foreground-light: var(--odx-palette-white);--odx-color-foreground-dark: var(--odx-palette-blue-80);--odx-color-foreground-muted: var(--odx-palette-blue-80-60);--odx-color-foreground-highlight: var(--odx-palette-cyan-70);--odx-color-foreground-danger: var(--odx-palette-red-60);--odx-color-foreground-highlight-hover: var(--odx-palette-cyan-80);--odx-color-foreground-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-background-cool: var(--odx-palette-coolgray-00);--odx-color-background-main: var(--odx-palette-white);--odx-color-background-warm: var(--odx-palette-warmgray-10);--odx-color-background-sand: var(--odx-palette-sandgray-10);--odx-color-background-draeger: var(--odx-palette-blue-80);--odx-color-background-cool-contrast: var(--odx-palette-coolgray-30);--odx-color-background-warm-contrast: var(--odx-palette-warmgray-30);--odx-color-background-sand-contrast: var(--odx-palette-sandgray-30);--odx-color-highlight-rest: var(--odx-palette-cyan-60);--odx-color-highlight-hover: var(--odx-palette-cyan-70);--odx-color-highlight-pressed: var(--odx-palette-cyan-80);--odx-color-focus-inner: var(--odx-palette-white);--odx-color-focus-outer: var(--odx-palette-cyan-70);--odx-color-disabled-foreground-selected: var(--odx-palette-coolgray-10);--odx-color-disabled-foreground: var(--odx-palette-coolgray-50);--odx-color-disabled-fill: var(--odx-palette-coolgray-10);--odx-color-disabled-fill-selected: var(--odx-palette-coolgray-60);--odx-color-disabled-stroke: var(--odx-palette-transparent);--odx-color-disabled-foreground-brand: var(--odx-palette-cyan-90);--odx-color-primary-rest: var(--odx-palette-blue-80);--odx-color-primary-hover: var(--odx-palette-blue-90);--odx-color-primary-pressed: var(--odx-palette-blue-100);--odx-color-primary-background: var(--odx-palette-blue-00);--odx-color-neutral-rest: var(--odx-palette-coolgray-30);--odx-color-neutral-hover: var(--odx-palette-coolgray-40);--odx-color-neutral-pressed: var(--odx-palette-coolgray-50);--odx-color-confirmation-rest: var(--odx-palette-orange-60);--odx-color-confirmation-hover: var(--odx-palette-orange-70);--odx-color-confirmation-pressed: var(--odx-palette-orange-80);--odx-color-danger-rest: var(--odx-palette-red-60);--odx-color-danger-hover: var(--odx-palette-red-70);--odx-color-danger-pressed: var(--odx-palette-red-80);--odx-color-danger-background: var(--odx-palette-red-00);--odx-color-danger-stroke: var(--odx-palette-red-20);--odx-color-danger-stroke-hover: var(--odx-palette-red-30);--odx-color-success-rest: var(--odx-palette-green-60);--odx-color-success-hover: var(--odx-palette-green-70);--odx-color-success-pressed: var(--odx-palette-green-80);--odx-color-success-background: var(--odx-palette-green-00);--odx-color-warning-rest: var(--odx-palette-yellow-50);--odx-color-warning-hover: var(--odx-palette-yellow-60);--odx-color-warning-pressed: var(--odx-palette-yellow-70);--odx-color-warning-background: var(--odx-palette-yellow-00);--odx-color-input-control-fill: var(--odx-palette-coolgray-10);--odx-color-input-control-stroke: var(--odx-palette-coolgray-20);--odx-color-input-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-input-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-input-control-fill-readonly: var(--odx-palette-transparent);--odx-color-input-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-backdrop: var(--odx-palette-blue-100-30);--odx-color-separator: var(--odx-palette-coolgray-20);--odx-color-separator-strong: var(--odx-palette-coolgray-130);--odx-color-background-sidesheet: var(--odx-palette-white);--odx-color-selected: var(--odx-palette-cyan-60-15);--odx-color-selected-hover: var(--odx-palette-cyan-60-20);--odx-color-shadow: var(--odx-palette-blue-100-30);--odx-color-transparent-hover: var(--odx-palette-blue-80-5);--odx-color-transparent-pressed: var(--odx-palette-blue-80-15);--odx-color-scrollbar: var(--odx-palette-coolgray-40);--odx-color-selection-control-fill: var(--odx-palette-coolgray-10);--odx-color-selection-control-fill-hover: var(--odx-palette-coolgray-20);--odx-color-selection-control-fill-readonly: var(--odx-palette-transparent);--odx-color-selection-control-fill-selected-readonly: var(--odx-palette-transparent);--odx-color-selection-control-stroke: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-hover: var(--odx-palette-coolgray-30);--odx-color-selection-control-stroke-readonly: var(--odx-palette-coolgray-20);--odx-color-selection-control-stroke-selected: var(--odx-palette-transparent);--odx-color-overlay: var(--odx-palette-white-60);--odx-breakpoint-font-size-display-xl: var(--odx-typography-font-size-11);--odx-breakpoint-font-size-display-lg: var(--odx-typography-font-size-10);--odx-breakpoint-font-size-display-md: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-display-sm: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-1: var(--odx-typography-font-size-9);--odx-breakpoint-font-size-heading-2: var(--odx-typography-font-size-8);--odx-breakpoint-font-size-heading-3: var(--odx-typography-font-size-7);--odx-breakpoint-font-size-heading-4: var(--odx-typography-font-size-6);--odx-breakpoint-font-size-heading-5: var(--odx-typography-font-size-5);--odx-breakpoint-font-size-heading-6: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-lg: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-md: var(--odx-typography-font-size-4);--odx-breakpoint-font-size-p-base: var(--odx-typography-font-size-3);--odx-breakpoint-line-height-display-xl: var(--odx-typography-line-height-11);--odx-breakpoint-line-height-display-lg: var(--odx-typography-line-height-10);--odx-breakpoint-line-height-display-md: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-display-sm: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-1: var(--odx-typography-line-height-9);--odx-breakpoint-line-height-heading-2: var(--odx-typography-line-height-8);--odx-breakpoint-line-height-heading-3: var(--odx-typography-line-height-7);--odx-breakpoint-line-height-heading-4: var(--odx-typography-line-height-6);--odx-breakpoint-line-height-heading-5: var(--odx-typography-line-height-5);--odx-breakpoint-line-height-heading-6: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-lg: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-md: var(--odx-typography-line-height-4);--odx-breakpoint-line-height-p-base: var(--odx-typography-line-height-base);--odx-breakpoint-spacing-12: var(--odx-size-12);--odx-breakpoint-spacing-25: var(--odx-size-25);--odx-breakpoint-spacing-37: var(--odx-size-37);--odx-breakpoint-spacing-50: var(--odx-size-50);--odx-breakpoint-spacing-75: var(--odx-size-75);--odx-breakpoint-spacing-100: var(--odx-size-100);--odx-breakpoint-spacing-150: var(--odx-size-150);--odx-breakpoint-spacing-200: var(--odx-size-200);--odx-breakpoint-spacing-250: var(--odx-size-250);--odx-breakpoint-spacing-300: var(--odx-size-300);--odx-breakpoint-spacing-150-responsive: var(--odx-size-100);--odx-breakpoint-spacing-200-responsive: var(--odx-size-100);--odx-breakpoint-spacing-250-responsive: var(--odx-size-150);--odx-breakpoint-spacing-300-responsive: var(--odx-size-200);--odx-experience-color-secondary-stroke: var(--odx-palette-transparent);--odx-experience-dimension-control-height-base: var(--odx-size-225);--odx-experience-dimension-control-height-sm: var(--odx-size-150);--odx-experience-dimension-control-height-lg: var(--odx-size-300);--odx-border-width-thin: var(--odx-size-px);--odx-border-width-thickest: var(--odx-size-25);--odx-border-radius-ml: var(--odx-size-37);--odx-border-radius-controls: var(--odx-border-radius-sm);--odx-border-radius-lg: var(--odx-size-50);--odx-focus-ring-outline: var(--odx-border-width-thick) solid transparent;--odx-focus-ring-offset: var(--odx-size-12);--odx-elevation-blur: var(--odx-size-12);--odx-color-input-control-stroke-pressed: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected: var(--odx-color-highlight-rest);--odx-color-selection-control-fill-selected-hover: var(--odx-color-highlight-hover);--odx-color-selection-control-foreground-readonly: var(--odx-color-foreground-base);--odx-experience-color-secondary-rest: var(--odx-color-neutral-rest);--odx-experience-color-secondary-hover: var(--odx-color-neutral-hover);--odx-experience-color-secondary-pressed: var(--odx-color-neutral-pressed);--odx-experience-color-secondary-foreground: var(--odx-color-foreground-base);--odx-focus-ring-color: var(--odx-color-focus-outer);--odx-shadow-level-0: 0px 1px 2px var(--odx-color-shadow);--odx-shadow-level-1: 0px 2px 6px var(--odx-color-shadow);--odx-shadow-level-2: 0px 4px 12px var(--odx-color-shadow)}}@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);color:inherit}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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@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);scrollbar-width:thin}html,body{background-color:var(--odx-color-background-cool)}html{font-family:sans-serif;margin:0;padding:0;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;color:var(--odx-color-foreground-base);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-breakpoint-font-size-p-base);line-height:var(--odx-breakpoint-line-height-p-md);margin:0;padding:0;max-block-size:100dvh}}
+@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}: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}#root,#__next{isolation:isolate;margin:0}}@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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@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/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-alpha.41",
+  "version": "1.0.0-alpha.42",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
-  "files": ["dist", "public", "LICENSE", "!dist/**/*.map", "!dist/**/*.stories.d.ts"],
+  "files": ["dist", "LICENSE", "!assets", "!dist/**/*.map", "!dist/**/*.stories.d.ts"],
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@lit-labs/preact-signals": "~1.0.3",
     "@lit/context": "~1.1.4",
-    "@odx/design-tokens": "^1.0.0-alpha.5",
+    "@odx/design-tokens": "^1.0.0-alpha.8",
     "lit": "~3.2.1"
   },
   "devDependencies": {