@odx/foundation 1.0.0-beta.64 → 1.0.0-beta.66

package/README.md

@@ -16,10 +16,10 @@ The `@odx/foundation` package is a core part of the ODX Design System, providing
 [<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 install `@odx/foundation` in your project, run the following command:
+To install `@odx/foundation` and it's peer dependencies in your project, run the following command:
 
 ```bash
-npm install @odx/foundation @odx/icons@next --save 
+npm install @odx/design-tokens @odx/foundation @odx/icons@next --save 
 ```
 
 > We depend on the <a href="https://lit.dev" target="_blank" rel="noopener">**Lit package**</a> for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries. 

package/dist/components/inline-message/inline-message.d.ts

@@ -18,7 +18,7 @@ export declare const InlineMessageVariant: Pick<{
 }, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxInlineMessage extends CustomElement {
     closable: boolean;
-    emphasized: boolean;
+    strong: boolean;
     icon?: OdxIconName | null;
     variant: InlineMessageVariant;
     show(): void;

package/dist/components/link/link.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 export declare class OdxLink extends InteractiveLink {
-    emphasized: boolean;
+    strong: boolean;
     subtle: boolean;
 }
 //# sourceMappingURL=link.d.ts.map

package/dist/components/list/list-item.d.ts

@@ -11,7 +11,7 @@ export declare class OdxListItem extends OdxListItem_base {
     private expandableItems;
     region?: HTMLElementTagNameMap['odx-toggle-content'];
     compact: boolean;
-    muted: boolean;
+    subtle: boolean;
     selected: boolean;
     withExpandControl: boolean;
     withExpandIndicator: boolean;

package/dist/components/separator/separator.d.ts

@@ -13,7 +13,7 @@ export declare const SeparatorAlign: {
 };
 export declare class OdxSeparator extends CustomElement {
     align: SeparatorAlign;
-    emphasized: boolean;
+    strong: boolean;
     vertical: boolean;
     connectedCallback(): void;
     protected render(): TemplateResult;

package/dist/components/skeleton/skeleton.d.ts

@@ -22,8 +22,8 @@ export declare const SkeletonShape: {
     readonly BUTTON: "button";
 };
 export declare class OdxSkeleton extends CustomElement {
-    emphasized: boolean;
-    muted: boolean;
+    strong: boolean;
+    subtle: boolean;
     shape: SkeletonShape;
     size: SkeletonSize;
     protected render(): TemplateResult;

package/dist/components/text/text.d.ts

@@ -24,7 +24,7 @@ export declare const TextVariant: Pick<{
     readonly GHOST: "ghost";
 }, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER">;
 export declare class OdxText extends CustomElement {
-    emphasized: boolean;
+    strong: boolean;
     inline: boolean;
     size?: TextSize;
     variant: TextVariant;

package/dist/components.js

@@ -75,7 +75,7 @@ class OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
   }
 }
 
-const styles$1c = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-separator)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+const styles$1c = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
 
 const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
   constructor() {
@@ -103,7 +103,7 @@ __decorateClass([
 ], _OdxAccordionPanel.prototype, "hidden", 2);
 let OdxAccordionPanel = _OdxAccordionPanel;
 
-const styles$1b = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-inverse);font-weight:var(--odx-typography-font-weight-semibold)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed)}:host([loading]){--_color-background: var(--odx-color-background-neutral-muted);--_color-foreground: var(--odx-color-foreground-rest-muted)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-muted);--_color-foreground: var(--odx-color-foreground-rest-muted) }:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-muted);--_color-foreground: var(--odx-color-foreground-rest-muted) }:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-muted);--_color-foreground: var(--odx-color-foreground-rest-muted) }}";
+const styles$1b = "@layer base{:host{--_padding-inline: var(--odx-size-75);--_icon-margin: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px))}:host,[part=base]{place-content:center}[part~=base]{outline-offset:var(--odx-focus-ring-offset);font-weight:var(--odx-typography-font-weight-medium)}[part=label]{flex:initial}::slotted(odx-avatar){--_color-foreground: inherit}}@layer variant{:host([size=\"xs\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);::slotted(odx-avatar){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"sm\"]){--_block-size: var(--odx-size-200);--_icon-margin: calc(-1 * var(--odx-size-25) + var(--odx-size-px));--_padding-inline: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-150);::slotted(odx-avatar){--_size: var(--odx-size-175);--_font-size: var(--odx-typography-font-size-2);--_spacing: calc(var(--odx-size-25) + var(--odx-size-px))}[part~=base]{outline-offset:0}}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);::slotted(odx-avatar){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-background-primary-rest);--_color-background-hover: var(--odx-color-background-primary-hover);--_color-background-pressed: var(--odx-color-background-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-background-accent-rest);--_color-background-hover: var(--odx-color-background-accent-hover);--_color-background-pressed: var(--odx-color-background-accent-pressed);--_color-foreground: var(--odx-color-foreground-rest-static);font-weight:var(--odx-typography-font-weight-semibold)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-background-danger-rest);--_color-background-hover: var(--odx-color-background-danger-hover);--_color-background-pressed: var(--odx-color-background-danger-pressed);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed)}:host([loading]){--_color-background: var(--odx-color-background-neutral-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle)}:host([variant=\"primary\"][loading]){--_color-background: var(--odx-color-background-primary-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"accent\"][loading]){--_color-background: var(--odx-color-background-accent-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"danger\"][loading]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle) }:host([variant=\"ghost\"][loading]){--_color-background: var(--odx-color-background-transparent-rest)}}";
 
 const ButtonBadgeAlign = { START: "start", CENTER: "center", END: "end" };
 const ButtonSize = pick(Size, ["XS", "SM", "MD", "LG"]);
@@ -202,7 +202,7 @@ const _OdxActionButton = class _OdxActionButton extends OdxButton {
       !this.replaceContent && this.statusMessage,
       (statusMessage) => html`
           <odx-tooltip anchor=${this.id} placement="top" .manual=${true} .show=${this.isStatusMessageShown} timeout=${this.statusMessageTimeout}>
-            <odx-text size="sm" emphasized>${statusMessage}</odx-text>
+            <odx-text size="sm" strong>${statusMessage}</odx-text>
           </odx-tooltip>
         `
     )}
@@ -268,12 +268,12 @@ __decorateClass([
 ], _OdxActionButton.prototype, "replaceContent", 2);
 let OdxActionButton = _OdxActionButton;
 
-const styles$19 = ":host{--_color-foreground: var(--odx-color-foreground-accent-rest);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}[part~=base]{transition:var(--odx-transition-reduced);outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:var(--_color-foreground);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:hover){--_color-foreground: var(--odx-color-foreground-accent-hover)}:host([emphasized]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]),:host([subtle]:not(:hover)){text-decoration:none}:host([disabled]){--_color-foreground: var(--odx-color-foreground-rest-muted);[part~=base]{cursor:default}}";
+const styles$19 = ":host{--_color-foreground: var(--odx-color-foreground-accent-rest);--_outline-offset: 0;display:inline;text-decoration:underline}:host(:focus-visible){outline:none}[part~=base]{transition:var(--odx-transition-reduced);outline:var(--odx-focus-ring-outline);outline-offset:var(--_outline-offset);border-radius:var(--odx-border-radius-controls);padding-inline:var(--odx-size-px);text-decoration:inherit;color:var(--_color-foreground);&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}:host(:hover){--_color-foreground: var(--odx-color-foreground-accent-hover)}:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([disabled]),:host([subtle]:not(:hover)){text-decoration:none}:host([disabled]){--_color-foreground: var(--odx-color-foreground-rest-subtle);[part~=base]{cursor:default}}";
 
 const _OdxLink = class _OdxLink extends InteractiveLink {
   constructor() {
     super(...arguments);
-    this.emphasized = false;
+    this.strong = false;
     this.subtle = false;
   }
   static {
@@ -282,7 +282,7 @@ const _OdxLink = class _OdxLink extends InteractiveLink {
 };
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxLink.prototype, "emphasized", 2);
+], _OdxLink.prototype, "strong", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxLink.prototype, "subtle", 2);
@@ -523,7 +523,7 @@ let OdxBadge = _OdxBadge;
 
 const styles$13 = ":host{--_gap: var(--odx-size-37);display:flex;flex-wrap:wrap;column-gap:var(--_gap);place-items:center;cursor:default;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
 
-const styles$12 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-muted)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-muted)!important}::slotted(*){margin:0}";
+const styles$12 = ":host{display:contents}.separator{--size: var(--odx-size-75);margin:var(--odx-size-37);color:var(--odx-color-foreground-rest-subtle)}:host([hidden]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-rest-subtle)!important}::slotted(*){margin:0}";
 
 const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
   constructor() {
@@ -549,7 +549,7 @@ const _OdxBreadcrumbsItem = class _OdxBreadcrumbsItem extends CustomElement {
     super.updated(props);
     if (this.interactiveElement) {
       this.interactiveElement.subtle = true;
-      this.interactiveElement.emphasized = this.isLast();
+      this.interactiveElement.strong = this.isLast();
       this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
     }
   }
@@ -703,7 +703,7 @@ __decorateClass([
 ], _OdxCheckbox.prototype, "indeterminate", 2);
 let OdxCheckbox = _OdxCheckbox;
 
-const styles$_ = ":host{display:flex;column-gap:var(--odx-size-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);inline-size:auto}";
+const styles$_ = ":host{display:flex;column-gap:var(--odx-size-75)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-size-75)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):last-of-type){border-block-end:none}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-size-75);inline-size:auto}";
 
 const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
 const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
@@ -765,7 +765,7 @@ const _OdxChip = class _OdxChip extends CanBeDisabled(CustomElement) {
   }
   render() {
     return html`
-      <odx-text part="base" size="sm" emphasized odxPreventTextOverflow>
+      <odx-text part="base" size="sm" strong odxPreventTextOverflow>
         <slot></slot>
       </odx-text>
       ${when(this.removable, () => this.renderAction())}
@@ -1789,7 +1789,7 @@ __decorateClass([
 ], _OdxImage.prototype, "width", 2);
 let OdxImage = _OdxImage;
 
-const styles$L = ":host{display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-control-rest);background-color:var(--odx-color-background-level-1);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([emphasized]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-muted)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-muted);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-muted)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-muted)}:host([hidden]){display:none;opacity:0}";
+const styles$L = ":host{display:flex;gap:var(--odx-size-75);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-size-75);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-37))}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-size-75) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
 
 const iconMap = {
   neutral: "core::info",
@@ -1803,7 +1803,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
   constructor() {
     super(...arguments);
     this.closable = false;
-    this.emphasized = false;
+    this.strong = false;
     this.variant = InlineMessageVariant.NEUTRAL;
   }
   static {
@@ -1834,7 +1834,7 @@ __decorateClass([
 ], _OdxInlineMessage.prototype, "closable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxInlineMessage.prototype, "emphasized", 2);
+], _OdxInlineMessage.prototype, "strong", 2);
 __decorateClass([
   property()
 ], _OdxInlineMessage.prototype, "icon", 2);
@@ -1843,7 +1843,7 @@ __decorateClass([
 ], _OdxInlineMessage.prototype, "variant", 2);
 let OdxInlineMessage = _OdxInlineMessage;
 
-const styles$K = ":host{display:inline-flex;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:12ch;font-size:var(--odx-font-size-text-md)}[part*=control]{--odx-color-background-disabled-rest: transparent}[part*=control-clear]{--_icon-size: var(--odx-typography-font-size-4);--_icon-margin: 0}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-muted);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}:host(:hover){border-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-visible){border-color:var(--odx-color-stroke-focus-outer)}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]){background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest)}:host([type=\"number\"]){min-inline-size:4ch;&:not([readonly]){text-align:center}}";
+const styles$K = ":host{display:inline-flex;gap:var(--odx-size-37);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid var(--odx-color-stroke-control-rest);border-radius:var(--odx-border-radius-controls);background-color:var(--odx-color-background-control-rest);padding-inline:var(--odx-size-50);block-size:var(--odx-size-225);min-inline-size:12ch;font-size:var(--odx-font-size-text-md)}[part*=control]{--odx-color-background-disabled-rest: transparent}[part*=control-clear]{--_icon-size: var(--odx-typography-font-size-4);--_icon-margin: 0}[part=input]{appearance:textfield;flex:1 1 auto;outline:none;border:none;background-color:transparent;padding:0;block-size:100%;min-width:auto;text-align:inherit;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{appearance:none;margin:0}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}:host(:hover){border-color:var(--odx-color-stroke-control-hover);background-color:var(--odx-color-background-control-hover)}:host(:focus-visible){border-color:var(--odx-color-stroke-focus-outer)}:host(:is([clearable],[type=\"number\"]):not([readonly])){padding-inline-end:var(--odx-size-px)}:host([clearable]) [part=input]:placeholder-shown~[part*=control-clear]{display:none}:host([block]){display:block}:host([disabled]){background-color:var(--odx-color-background-disabled-rest);color:var(--odx-color-foreground-disabled-rest)}:host([type=\"number\"]){min-inline-size:4ch;&:not([readonly]){text-align:center}}";
 
 const _OdxInput = class _OdxInput extends FormControl {
   constructor() {
@@ -2070,13 +2070,13 @@ __decorateClass([
 ], _OdxList.prototype, "multiple", 2);
 let OdxList = _OdxList;
 
-const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]{--icon-rotation: 180deg}}}";
+const styles$G = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;line-height:var(--odx-typography-line-height-2);>*{--odx-focus-ring-offset: 0}}[part=separator]{--margin-block: 0;--margin-inline: var(--odx-size-50)}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part=separator]{opacity:0}}@layer variant{[part=base]:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([subtle]):hover):after{opacity:0}:host([subtle]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([aria-current][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part=separator]{opacity:1}[part=expand-control]{--icon-rotation: 180deg}}}";
 
 const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
   constructor() {
     super(...arguments);
     this.compact = false;
-    this.muted = false;
+    this.subtle = false;
     this.selected = false;
     this.withExpandControl = false;
     this.withExpandIndicator = false;
@@ -2158,7 +2158,7 @@ __decorateClass([
 ], _OdxListItem.prototype, "compact", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxListItem.prototype, "muted", 2);
+], _OdxListItem.prototype, "subtle", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxListItem.prototype, "selected", 2);
@@ -2980,7 +2980,7 @@ class OdxRadioButton extends CheckboxFormControl {
   }
 }
 
-const styles$p = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);padding:var(--odx-size-75);inline-size:auto}}";
+const styles$p = ":host{display:flex}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]){::slotted(odx-radio-button:last-of-type){border-block-end:none}::slotted(odx-radio-button){margin:0;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);padding:var(--odx-size-75);inline-size:auto}}";
 
 const RadioGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
 const _OdxRadioGroup = class _OdxRadioGroup extends RadioGroupFormControl {
@@ -3143,7 +3143,7 @@ __decorateClass([
 ], _OdxSearchBar.prototype, "placeholder", 2);
 let OdxSearchBar = _OdxSearchBar;
 
-const styles$m = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);max-inline-size:320px;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-rest-muted)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
+const styles$m = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);max-inline-size:320px;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background);cursor:pointer;padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}.value{display:flex;gap:var(--_padding-block);margin-inline-end:auto}.indicator{font-size:var(--odx-size-175)}odx-chip{--_border-radius: var(--odx-border-radius-controls);--_padding-inline: var(--_padding-block)}odx-dropdown{--max-block-size: 320px}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([disabled]){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);.base{cursor:not-allowed}slot[name=placeholder]{color:var(---_color-foreground)}}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}}";
 
 const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   constructor() {
@@ -3238,14 +3238,14 @@ __decorateClass([
 ], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
 let OdxSelect = _OdxSelect;
 
-const styles$l = ":host{--color: var(--odx-color-separator);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--margin-block: var(--odx-size-75);--margin-inline: var(--odx-size-12);display:block;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--margin-block) - .5 * var(--size));margin-inline:var(--margin-inline)}.base{display:flex;align-items:center;text-align:center}.base:before,.base:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--size);content:\"\";pointer-events:none}:host(:not(:empty)){:before{margin-inline-end:var(--odx-size-37)}:after{margin-inline-start:var(--odx-size-37)}}:host([vertical]){margin-block:var(--margin-block);margin-inline:calc(var(--margin-inline) - .5 * var(--size));.base{flex-direction:column}:after,:before{block-size:calc(100% - var(--margin-block) * 2);min-block-size:calc(var(--min-size) / 2);inline-size:var(--size)}}:host(:not([vertical])){:after,:before{min-inline-size:calc(var(--min-size) / 2)}}:host([emphasized]){--color: var(--odx-color-separator-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}";
+const styles$l = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-size-px);--min-size: var(--odx-size-75);--margin-block: var(--odx-size-75);--margin-inline: var(--odx-size-12);display:block;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--margin-block) - .5 * var(--size));margin-inline:var(--margin-inline)}.base{display:flex;align-items:center;text-align:center}.base:before,.base:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--size);content:\"\";pointer-events:none}:host(:not(:empty)){:before{margin-inline-end:var(--odx-size-37)}:after{margin-inline-start:var(--odx-size-37)}}:host([vertical]){margin-block:var(--margin-block);margin-inline:calc(var(--margin-inline) - .5 * var(--size));.base{flex-direction:column}:after,:before{block-size:calc(100% - var(--margin-block) * 2);min-block-size:calc(var(--min-size) / 2);inline-size:var(--size)}}:host(:not([vertical])){:after,:before{min-inline-size:calc(var(--min-size) / 2)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([align=\"start\"]){.base:before{flex:0 0 var(--min-size)}}:host([align=\"end\"]){.base:after{flex:0 0 var(--min-size)}}";
 
 const SeparatorAlign = { START: "start", CENTER: "center", END: "end" };
 const _OdxSeparator = class _OdxSeparator extends CustomElement {
   constructor() {
     super(...arguments);
     this.align = SeparatorAlign.CENTER;
-    this.emphasized = false;
+    this.strong = false;
     this.vertical = false;
   }
   static {
@@ -3264,21 +3264,21 @@ __decorateClass([
 ], _OdxSeparator.prototype, "align", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSeparator.prototype, "emphasized", 2);
+], _OdxSeparator.prototype, "strong", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxSeparator.prototype, "vertical", 2);
 let OdxSeparator = _OdxSeparator;
 
-const styles$k = ":host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-background-disabled-rest);display:block;block-size:var(--_block-size);inline-size:var(--inline-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed) 50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;block-size:100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([emphasized]){--_color-fill: var(--odx-color-background-disabled-selected)}:host([muted]) .base{animation:none}";
+const styles$k = ":host{--inline-size: 100%;--_block-size: var(--odx-size-100);--_border-radius: var(--odx-border-radius-controls);--_color-fill: var(--odx-color-background-disabled-rest);display:block;block-size:var(--_block-size);inline-size:var(--inline-size);max-inline-size:100%;overflow:hidden}.base{border-radius:var(--_border-radius);background:var(--_color-fill) linear-gradient(90deg,transparent 33%,var(--odx-color-background-transparent-pressed) 50%,transparent 66%);background-position:150% 100%;background-size:200% 100%;block-size:100%;animation:odx-skeleton-loading 3s infinite linear}@keyframes odx-skeleton-loading{0%{background-position:150% 100%}33%,to{background-position:-50% 100%}}:host([size=\"sm\"]){--_block-size: var(--odx-typography-font-size-1)}:host([size=\"lg\"]){--_block-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_block-size: var(--odx-typography-font-size-7)}:host([shape=\"button\"]){--inline-size: 6rem;--_block-size: var(--odx-size-225)}:host([shape=\"button\"][size=\"sm\"]){--inline-size: 5rem;--_block-size: var(--odx-size-150)}:host([shape=\"button\"]:is([size=\"lg\"],[size=\"xl\"])){--inline-size: 7rem;--_block-size: var(--odx-size-300)}:host([shape=\"circle\"]){--_border-radius: var(--odx-border-radius-circle)}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-md)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])){--inline-size: var(--_block-size);--_block-size: var(--odx-size-150);flex:0 0 auto}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"sm\"]){--_block-size: var(--odx-size-125)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"lg\"]){--_block-size: var(--odx-size-225)}:host(:is([shape=\"circle\"],[shape=\"rectangle\"])[size=\"xl\"]){--_block-size: var(--odx-size-300)}:host([strong]){--_color-fill: var(--odx-color-background-disabled-selected)}:host([subtle]) .base{animation:none}";
 
 const SkeletonSize = pick(Size, ["SM", "MD", "LG", "XL"]);
 const SkeletonShape = { NONE: "none", BUTTON: "button", ...pick(Shape, ["CIRCLE", "RECTANGLE"]) };
 const _OdxSkeleton = class _OdxSkeleton extends CustomElement {
   constructor() {
     super(...arguments);
-    this.emphasized = false;
-    this.muted = false;
+    this.strong = false;
+    this.subtle = false;
     this.shape = SkeletonShape.NONE;
     this.size = SkeletonSize.MD;
   }
@@ -3291,10 +3291,10 @@ const _OdxSkeleton = class _OdxSkeleton extends CustomElement {
 };
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "emphasized", 2);
+], _OdxSkeleton.prototype, "strong", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxSkeleton.prototype, "muted", 2);
+], _OdxSkeleton.prototype, "subtle", 2);
 __decorateClass([
   property({ type: String, reflect: true, useDefault: true })
 ], _OdxSkeleton.prototype, "shape", 2);
@@ -3568,7 +3568,7 @@ const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
     `;
   }
   renderMark(value, last = false) {
-    const label = this.showLabels ? html`<odx-text part="mark-label" size="xs" emphasized>${value}</odx-text>` : nothing;
+    const label = this.showLabels ? html`<odx-text part="mark-label" size="xs" strong>${value}</odx-text>` : nothing;
     return html`
       <div part="mark" ?last=${last}>
         <span part="mark-tick"></span>
@@ -3776,7 +3776,7 @@ __decorateClass([
 ], _OdxStack.prototype, "wrap", 2);
 let OdxStack = _OdxStack;
 
-const styles$e = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);font-weight:var(--odx-typography-font-weight-medium)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-muted)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-muted);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-muted)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-muted)}";
+const styles$e = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);font-weight:var(--odx-typography-font-weight-medium)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-subtle);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-subtle)}";
 
 const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
 const _OdxStatus = class _OdxStatus extends CustomElement {
@@ -3904,7 +3904,7 @@ __decorateClass([
 ], _OdxTableHeader.prototype, "selected", 2);
 let OdxTableHeader = _OdxTableHeader;
 
-const styles$9 = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-separator);background-color:var(--_color-fill);cursor:pointer;padding-inline:var(--odx-size-75);inline-size:100%}:host(:not(:last-of-type)){border-color:var(--odx-color-separator)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-size-75);pointer-events:none}";
+const styles$9 = ":host{--_color-fill: transparent;display:flex;align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color;border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);background-color:var(--_color-fill);cursor:pointer;padding-inline:var(--odx-size-75);inline-size:100%}:host(:not(:last-of-type)){border-color:var(--odx-color-stroke-neutral-subtle)}:host([selectable]:hover){--_color-fill: var(--odx-color-background-transparent-hover)}:host([selected]){--_color-fill: var(--odx-color-background-transparent-selected)}odx-checkbox{margin-inline-start:var(--odx-size-75);pointer-events:none}";
 
 const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
   constructor() {
@@ -4116,14 +4116,14 @@ __decorateClass([
 ], _OdxTableHeaderCell.prototype, "sortable", 2);
 let OdxTableHeaderCell = _OdxTableHeaderCell;
 
-const styles$5 = "@layer base{:host{display:block;text-decoration:inherit;line-height:var(--_line-height, inherit);color:inherit;font-size:var(--_font-size, inherit);font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([emphasized]:not([emphasized=\"false\"])){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
+const styles$5 = "@layer base{:host{display:block;text-decoration:inherit;line-height:var(--_line-height, inherit);color:inherit;font-size:var(--_font-size, inherit);font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
 
 const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
 const TextVariant = pick(Variant, ["NEUTRAL", "ACCENT", "SUCCESS", "DANGER"]);
 const _OdxText = class _OdxText extends CustomElement {
   constructor() {
     super(...arguments);
-    this.emphasized = false;
+    this.strong = false;
     this.inline = false;
     this.variant = TextVariant.NEUTRAL;
   }
@@ -4133,7 +4133,7 @@ const _OdxText = class _OdxText extends CustomElement {
 };
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
-], _OdxText.prototype, "emphasized", 2);
+], _OdxText.prototype, "strong", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxText.prototype, "inline", 2);

package/dist/main.js

@@ -3,7 +3,7 @@ import { unsafeCSS, LitElement, html, isServer, nothing } from 'lit';
 import { property, queryAssignedElements, query } from 'lit/decorators.js';
 import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy, c as computePosition, a as autoUpdate, t as throttle, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide } from './vendor.js';
 
-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,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
+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,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{--flow: column;display:flex;flex-flow:var(--flow);gap:var(--odx-size-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start;&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
 
 function customElement(tagName, ...styles) {
   return (target) => {

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,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}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;@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,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{--flow: column;display:flex;flex-flow:var(--flow);gap:var(--odx-size-75);align-items:stretch;justify-content:flex-start;max-inline-size:100%;text-align:start;&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.64",
+  "version": "1.0.0-beta.66",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -14,19 +14,12 @@
     "custom-elements.json"
   ],
   "type": "module",
-  "scripts": {
-    "build": "vite build",
-    "dev:tsc": "tsc --build --noEmit --watch",
-    "dev": "vite build --watch --mode=development",
-    "lint": "biome lint lib i18n styles components",
-    "generate:manifest": "cem analyze"
-  },
   "dependencies": {
     "@preact/signals-core": "1.8.0",
     "lit": "3.3.0"
   },
   "peerDependencies": {
-    "@odx/design-tokens": "^1.0.0-rc.1",
+    "@odx/design-tokens": "^1.0.0-rc.3",
     "@odx/icons": "^4.0.0-rc.27"
   },
   "devDependencies": {
@@ -35,8 +28,6 @@
     "@lit-labs/preact-signals": "1.0.3",
     "@lit/context": "1.1.5",
     "@odx/icons": "4.0.0-rc.29",
-    "@odx/storybook-utils": "workspace:*",
-    "@odx/typescript-config": "workspace:*",
     "@spectrum-web-components/reactive-controllers": "1.6.0",
     "@wc-toolkit/cem-inheritance": "1.0.4",
     "@wc-toolkit/cem-validator": "1.0.3",
@@ -49,7 +40,8 @@
     "ts-lit-plugin": "2.0.2",
     "vite": "6.3.5",
     "vite-plugin-dts": "4.5.3",
-    "vite-plugin-no-bundle": "4.0.0"
+    "@odx/storybook-utils": "0.0.0",
+    "@odx/typescript-config": "0.0.0"
   },
   "sideEffects": [
     "dist/i18n.js",
@@ -81,5 +73,12 @@
   "publishConfig": {
     "access": "public",
     "tag": "latest"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:tsc": "tsc --build --noEmit --watch",
+    "dev": "vite build --watch --mode=development",
+    "lint": "biome lint lib i18n styles components",
+    "generate:manifest": "cem analyze"
   }
-}
+}