@odx/foundation 1.0.0-rc.5 → 1.0.0-rc.7

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 1.0.0-rc.7
+
+### Minor Changes
+
+- Add `applyScrollLock` and `removeScrollLock` utilities to enable/disable scroll lock on the document
+
+## 1.0.0-rc.6
+
+### Minor Changes
+
+- Rename CSS layers to remove dot notation:
+  - `odx.reset` to `odx-reset`
+  - `odx.base` to `odx-base`
+  - `odx.overrides` to `odx-overrides`
+
+### Bug Fixes
+
+- Remove debug info from rolldown build output
+- Fix `.odx-cloak` if applied to `:root` element not working correctly
+
 ## 1.0.0-rc.5
 
 ### Major Changes
@@ -6,8 +26,9 @@
 
 ### Minor Changes
 
-- Add `.odx-cloak` class to prevent FOUC (Flash of Unstyled Content) during initial load, use `odx-cloak` class on the root element of your application to enable it.
+- Add `.odx-cloak` class to prevent FOUC (Flash of Unstyled Content) during initial load, use `odx-cloak` class on the root element of your application to enable it
 - Support `:visited` state for native links and anchors with `odx-link` class for better user experience
+- Improve tabbable element detection
 
 ## 1.0.0-rc.4
 

package/README.md

@@ -96,6 +96,8 @@ This class will temporarily hide the content of the `.odx-root` element until cu
 </html>
 ```
 
+> The timeout can be set via the `--odx-cloak-timeout` custom property on the `:root` element, which defaults to `2s`. 
+
 ### Documentation
 
-For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://ca-odx-storybook-dev.yellowisland-7b13f2d7.westeurope.azurecontainerapps.io/" target="_blank" rel="noopener">storybook documentation</a>.
+For detailed documentation on how to use the `@odx/foundation` package, please visit our <a href="https://ca-odx-storybook-dev.yellowisland-7b13f2d7.westeurope.azurecontainerapps.io/" target="_blank" rel="noopener">storybook documentation</a>.

package/dist/lib/breakpoints.d.ts

@@ -1,6 +1,4 @@
 import { Signal } from "./signals.js";
-
-//#region src/lib/breakpoints.d.ts
 declare global {
   namespace ODX.Breakpoints {
     interface Config {
@@ -57,5 +55,4 @@ declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () =>
 declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
   matches: boolean;
 }) => void): () => void;
-//#endregion
 export { Breakpoint, BreakpointConfig, BreakpointOperator, breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };

package/dist/lib/breakpoints.js

@@ -1,6 +1,5 @@
 import { effect, signal } from "./signals.js";
 import { observeMedia } from "./utils/shared-media-observer.js";
-//#region src/lib/breakpoints.ts
 const operators = [
 	"<",
 	"<=",
@@ -154,5 +153,4 @@ function createBreakpointUpdater(breakpoints, update) {
 		}
 	};
 }
-//#endregion
 export { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };

package/dist/lib/format.d.ts

@@ -1,6 +1,4 @@
 import { UnitIdentifier } from "./models.js";
-
-//#region src/lib/format.d.ts
 interface FormatOptions {
   dateTimeFormatOptions?: DateTimeFormatOptions;
   numberFormatOptions?: NumberFormatOptions;
@@ -56,5 +54,4 @@ interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions, Base
   start?: number | string | Date;
 }
 declare function formatRelativeTime(input: number | string | Date, options?: RelativeTimeFormatOptions): string;
-//#endregion
 export { DateTimeFormatOptions, FormatOptions, ListFormatOptions, NumberFormatOptions, RelativeTimeFormatOptions, formatDate, formatList, formatNumber, formatRelativeTime, parseDate };

package/dist/lib/format.js

@@ -1,4 +1,3 @@
-//#region src/lib/format.ts
 function parseDate(value) {
 	const createDate = (value) => Number.isNaN(value) ? null : new Date(value);
 	if (value instanceof Date) return createDate(value.getTime());
@@ -62,5 +61,4 @@ function formatRelativeTime(input, options) {
 	const [unit, unitConfig] = Object.entries(TIME_UNIT_MAP).find(([_, { value, max }]) => Math.abs(relativeTime) < max && minUnit.value <= value);
 	return new Intl.RelativeTimeFormat(options?.locale, options).format(Math.round(relativeTime / unitConfig.value), unit);
 }
-//#endregion
 export { formatDate, formatList, formatNumber, formatRelativeTime, parseDate };

package/dist/lib/localization.d.ts

@@ -1,6 +1,4 @@
 import { FormatOptions } from "./format.js";
-
-//#region src/lib/localization.d.ts
 interface LocalizationOptions extends FormatOptions {
   defaultLocale: () => Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier;
   fallbackLanguage: () => Intl.UnicodeBCP47LocaleIdentifier;
@@ -11,5 +9,4 @@ declare function setLocalizationOptions(options?: Partial<LocalizationOptions> |
 declare function getLocalizationOptions(options?: Partial<LocalizationOptions> | null): LocalizationOptions;
 declare function getLocale(localeInput?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier | null): Intl.Locale;
 declare function setLocale(localeInput?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier | null): void;
-//#endregion
 export { LocalizationOptions, getLocale, getLocalizationOptions, setLocale, setLocalizationOptions };

package/dist/lib/localization.js

@@ -1,5 +1,4 @@
 import { sharedSignal } from "./signals.js";
-//#region src/lib/localization.ts
 const locale = sharedSignal("locale", null);
 const localizationOptions = sharedSignal("localizationOptions", null);
 const LocalizationOptions = (config) => ({
@@ -24,5 +23,4 @@ function getLocale(localeInput) {
 function setLocale(localeInput) {
 	locale.set(localeInput ? getLocale(localeInput) : null);
 }
-//#endregion
 export { LocalizationOptions, getLocale, getLocalizationOptions, setLocale, setLocalizationOptions };

package/dist/lib/models.d.ts

@@ -1,5 +1,3 @@
-//#region src/lib/models.d.ts
 type UnitIdentifier = SingleUnitIdentifier | `${SingleUnitIdentifier}-per-${SingleUnitIdentifier}` | (string & {});
 type SingleUnitIdentifier = 'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'microsecond' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'nanosecond' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year';
-//#endregion
 export { UnitIdentifier };

package/dist/lib/scroll-lock.d.ts

@@ -0,0 +1,7 @@
+/** @internal */
+declare function applyScrollLock(source: HTMLElement): void;
+/** @internal */
+declare function removeScrollLock(source: HTMLElement): void;
+/** @internal */
+declare function removeAllScrollLocks(): void;
+export { applyScrollLock, removeAllScrollLocks, removeScrollLock };

package/dist/lib/scroll-lock.js

@@ -0,0 +1,27 @@
+const scrollLockClass = "odx-scroll-lock";
+const scrollLocks = /* @__PURE__ */ new Set();
+/** @internal */
+function applyScrollLock(source) {
+	const root = document.documentElement;
+	scrollLocks.add(source);
+	if (root.classList.contains(scrollLockClass)) return;
+	const bodyPadding = Number(getComputedStyle(document.body).paddingRight.replace("px", ""));
+	let scrollbarWidth = Math.abs(window.innerWidth - root.clientWidth);
+	if (!Number.isNaN(bodyPadding) && bodyPadding > 0) scrollbarWidth += bodyPadding;
+	let { scrollbarGutter } = getComputedStyle(root);
+	if (!scrollbarGutter || scrollbarGutter === "auto") scrollbarGutter = "stable";
+	document.documentElement.classList.add(scrollLockClass);
+	root.style.setProperty("--odx-scroll-lock-gutter", scrollbarWidth > 1 ? scrollbarGutter : "");
+}
+/** @internal */
+function removeScrollLock(source) {
+	scrollLocks.delete(source);
+	if (scrollLocks.size > 0) return;
+	document.documentElement.classList.remove(scrollLockClass);
+}
+/** @internal */
+function removeAllScrollLocks() {
+	scrollLocks.clear();
+	document.documentElement.classList.remove(scrollLockClass);
+}
+export { applyScrollLock, removeAllScrollLocks, removeScrollLock };

package/dist/lib/signals.d.ts

@@ -1,6 +1,4 @@
 import { Signal } from "signal-polyfill";
-
-//#region src/lib/signals.d.ts
 type Signal$1<T> = Signal.State<T> & {
   update: (updateFn: (value: T) => T) => void;
 };
@@ -19,5 +17,4 @@ declare function effect(callback: (() => void) | (() => () => void)): () => void
 declare global {
   var __ODX_SHARED_SIGNALS__: Record<string, unknown>;
 }
-//#endregion
 export { ReadonlySignal, Signal$1 as Signal, SignalOptions, computed, effect, sharedSignal, signal };

package/dist/lib/signals.js

@@ -1,5 +1,4 @@
 import { Signal } from "signal-polyfill";
-//#region src/lib/signals.ts
 function transformOptions(options) {
 	if (!options) return;
 	return {
@@ -48,5 +47,4 @@ function effect(callback) {
 	};
 }
 globalThis.__ODX_SHARED_SIGNALS__ ||= {};
-//#endregion
 export { computed, effect, sharedSignal, signal };

package/dist/lib/theming.d.ts

@@ -1,6 +1,4 @@
 import { ThemeConfig } from "@odx/design-tokens";
-
-//#region src/lib/theming.d.ts
 declare global {
   var __ODX_THEME_ROOT__: HTMLElement;
 }
@@ -15,5 +13,4 @@ interface AttachDarkModeToggleOptions<T extends HTMLElement> {
   root?: HTMLElement;
 }
 declare function attachDarkModeToggle<T extends HTMLElement>(host: T, options?: AttachDarkModeToggleOptions<T>): () => void;
-//#endregion
 export { AttachDarkModeToggleOptions, attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme$1 as setTheme, toggleDarkMode, userPrefersDarkMode };

package/dist/lib/theming.js

@@ -1,6 +1,5 @@
 import { effect, sharedSignal } from "./signals.js";
 import { darkModeClass, lightModeClass, setTheme } from "@odx/design-tokens";
-//#region src/lib/theming.ts
 const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
 const darkModeIcon = "core::night-mode";
 const lightModeIcon = "core::brightness";
@@ -30,5 +29,4 @@ function attachDarkModeToggle(host, options = {}) {
 		options.update?.(host, darkModeEnabled, icon);
 	});
 }
-//#endregion
 export { attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme$1 as setTheme, toggleDarkMode, userPrefersDarkMode };

package/dist/lib/utils/shared-media-observer.js

@@ -1,4 +1,3 @@
-//#region src/lib/utils/shared-media-observer.ts
 const mediaQueryRegistry = /* @__PURE__ */ new Map();
 const eventListenerRegistry = /* @__PURE__ */ new Map();
 function handleMediaChange(event) {
@@ -37,5 +36,4 @@ function unobserveMedia(query, listener) {
 	mediaQueryList.removeEventListener("change", handleMediaChange);
 	mediaQueryRegistry.delete(query);
 }
-//#endregion
 export { observeMedia };

package/dist/main.d.ts

@@ -3,5 +3,6 @@ import { Breakpoint, BreakpointConfig, BreakpointOperator, breakpointAttribute,
 import { UnitIdentifier } from "./lib/models.js";
 import { DateTimeFormatOptions, FormatOptions, ListFormatOptions, NumberFormatOptions, RelativeTimeFormatOptions, formatDate, formatList, formatNumber, formatRelativeTime, parseDate } from "./lib/format.js";
 import { LocalizationOptions, getLocale, getLocalizationOptions, setLocale, setLocalizationOptions } from "./lib/localization.js";
+import { applyScrollLock, removeAllScrollLocks, removeScrollLock } from "./lib/scroll-lock.js";
 import { AttachDarkModeToggleOptions, attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme, toggleDarkMode, userPrefersDarkMode } from "./lib/theming.js";
-export { AttachDarkModeToggleOptions, Breakpoint, BreakpointConfig, BreakpointOperator, DateTimeFormatOptions, FormatOptions, ListFormatOptions, LocalizationOptions, NumberFormatOptions, ReadonlySignal, RelativeTimeFormatOptions, Signal, SignalOptions, type UnitIdentifier, attachDarkModeToggle, breakpointAttribute, buildBreakpoint, computed, createBreakpointUpdater, darkModeIcon, defaultBreakpoints, effect, expandBreakpoints, formatDate, formatList, formatNumber, formatRelativeTime, getLocale, getLocalizationOptions, isDarkModeEnabled, lightModeIcon, observeBreakpoint, parseDate, registeredBreakpoints, setLocale, setLocalizationOptions, setTheme, setupBreakpoints, sharedSignal, signal, toggleDarkMode, userPrefersDarkMode };
+export { AttachDarkModeToggleOptions, Breakpoint, BreakpointConfig, BreakpointOperator, DateTimeFormatOptions, FormatOptions, ListFormatOptions, LocalizationOptions, NumberFormatOptions, ReadonlySignal, RelativeTimeFormatOptions, Signal, SignalOptions, type UnitIdentifier, applyScrollLock, attachDarkModeToggle, breakpointAttribute, buildBreakpoint, computed, createBreakpointUpdater, darkModeIcon, defaultBreakpoints, effect, expandBreakpoints, formatDate, formatList, formatNumber, formatRelativeTime, getLocale, getLocalizationOptions, isDarkModeEnabled, lightModeIcon, observeBreakpoint, parseDate, registeredBreakpoints, removeAllScrollLocks, removeScrollLock, setLocale, setLocalizationOptions, setTheme, setupBreakpoints, sharedSignal, signal, toggleDarkMode, userPrefersDarkMode };

package/dist/main.js

@@ -2,5 +2,6 @@ import { computed, effect, sharedSignal, signal } from "./lib/signals.js";
 import { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints } from "./lib/breakpoints.js";
 import { formatDate, formatList, formatNumber, formatRelativeTime, parseDate } from "./lib/format.js";
 import { LocalizationOptions, getLocale, getLocalizationOptions, setLocale, setLocalizationOptions } from "./lib/localization.js";
+import { applyScrollLock, removeAllScrollLocks, removeScrollLock } from "./lib/scroll-lock.js";
 import { attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme, toggleDarkMode, userPrefersDarkMode } from "./lib/theming.js";
-export { LocalizationOptions, attachDarkModeToggle, breakpointAttribute, buildBreakpoint, computed, createBreakpointUpdater, darkModeIcon, defaultBreakpoints, effect, expandBreakpoints, formatDate, formatList, formatNumber, formatRelativeTime, getLocale, getLocalizationOptions, isDarkModeEnabled, lightModeIcon, observeBreakpoint, parseDate, registeredBreakpoints, setLocale, setLocalizationOptions, setTheme, setupBreakpoints, sharedSignal, signal, toggleDarkMode, userPrefersDarkMode };
+export { LocalizationOptions, applyScrollLock, attachDarkModeToggle, breakpointAttribute, buildBreakpoint, computed, createBreakpointUpdater, darkModeIcon, defaultBreakpoints, effect, expandBreakpoints, formatDate, formatList, formatNumber, formatRelativeTime, getLocale, getLocalizationOptions, isDarkModeEnabled, lightModeIcon, observeBreakpoint, parseDate, registeredBreakpoints, removeAllScrollLocks, removeScrollLock, setLocale, setLocalizationOptions, setTheme, setupBreakpoints, sharedSignal, signal, toggleDarkMode, userPrefersDarkMode };

package/dist/styles.css

@@ -1,4 +1,4 @@
-@layer odx-native {
+@layer odx-reset {
   .odx-root {
     &, & *, & :before, & :after {
       box-sizing: border-box;
@@ -60,7 +60,9 @@
       }
     }
   }
+}
 
+@layer odx-base {
   .odx-link, .odx-root a {
     transition: var(--odx-motion-transition-reduced);
     overflow: inherit;
@@ -141,179 +143,12 @@
     }
   }
 
-  .odx-content :where(table), .odx-table {
-    --cell-size: var(--odx-size-300);
-    border-collapse: collapse;
-    background-color: #0000;
-    width: 100%;
-    max-width: 100%;
-
-    & caption {
-      line-height: var(--odx-typography-line-height-text-sm);
-      font-size: var(--odx-typography-font-size-text-sm);
-      font-weight: var(--odx-typography-font-weight-semibold);
-    }
-
-    & thead {
-      background-color: inherit;
-    }
-
-    & tr {
-      transition: var(--odx-motion-transition-reduced);
-      background-color: var(--odx-color-background-transparent);
-      transition-property: background-color, color;
-    }
-
-    & tr:has(td):hover {
-      background-color: var(--odx-color-background-transparent-hover);
-    }
-
-    & th, & td {
-      padding: var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md);
-      min-height: var(--odx-size-250);
-      text-align: start;
-      font-size: inherit;
-    }
-
-    & th {
-      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
-      vertical-align: top;
-      font-weight: var(--odx-typography-font-weight-medium);
-      cursor: default;
-      user-select: none;
-    }
-
-    & td {
-      height: var(--cell-size);
-      vertical-align: middle;
-    }
-
-    & tr:not(:last-child) td {
-      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
-    }
-
-    & th :is(odx-input, odx-select) {
-      margin-inline: var(--odx-spacing-negative-50);
-    }
-  }
-
-  .odx-content {
-    --_content-spacing-sm: var(--odx-spacing-layout-sm);
-    --_content-spacing-md: var(--odx-spacing-layout-md);
-    --_content-spacing-lg: var(--odx-spacing-layout-lg);
-    line-height: var(--odx-typography-line-height-text-md);
-
-    & table, & ul, & ol, & dl, & blockquote, & pre, & figure, & video, & embed, & iframe {
-      margin: var(--_content-spacing-md) 0;
-    }
-
-    & :is(odx-key-value-list, odx-list) {
-      margin-block: var(--_content-spacing-md);
-
-      & :is(odx-key-value-list, odx-list) {
-        margin-block: 0;
-      }
-    }
-
-    & > :is(odx-text, .odx-text), & li > :is(ul, ol, dl), & p, & li {
-      margin: var(--_content-spacing-sm) 0;
-    }
-
-    & :is(odx-text, .odx-text), & p {
-      &:first-child {
-        margin-block-start: 0;
-      }
-    }
-
-    & > :is(odx-title, [class*="odx-title"]), & h1, & h2, & h3, & h4, & h5, & h6 {
-      margin-block: var(--_content-spacing-lg) var(--_content-spacing-sm);
-
-      &:first-child {
-        margin-block-start: var(--_content-spacing-sm);
-      }
-    }
-
-    & table, & ul, & ol, & dl, & blockquote {
-      padding-inline-start: var(--odx-spacing-150);
-    }
-
-    & code, & pre, & mark {
-      border-radius: var(--odx-border-radius-sm);
-      padding: 0 var(--odx-spacing-12);
-    }
-
-    & code, & pre {
-      background-color: var(--odx-color-background-control-rest);
-      font-size: var(--odx-typography-font-size-text-sm);
-    }
-
-    & blockquote {
-      padding-inline-end: var(--odx-spacing-150);
-    }
-
-    & dt {
-      font-weight: var(--odx-typography-font-weight-medium);
-    }
-
-    & a {
-      text-decoration: underline;
-    }
-
-    & del {
-      color: var(--odx-color-foreground-danger-rest);
-    }
-
-    & figure {
-      flex-direction: column;
-      display: flex;
-    }
-
-    & figcaption {
-      padding: var(--_content-spacing-sm);
-      line-height: var(--odx-typography-line-height-text-sm);
-      font-size: var(--odx-typography-font-size-text-sm);
-    }
-
-    & ins {
-      color: var(--odx-color-foreground-success-rest);
-      text-decoration: none;
-    }
-
-    & mark {
-      background-color: var(--odx-color-background-selection);
-      color: var(--odx-color-foreground-rest);
-    }
-
-    & pre {
-      padding: var(--odx-control-spacing-md) calc(2 * var(--odx-control-spacing-inline-md));
-    }
-
-    & small {
-      font-size: var(--odx-typography-font-size-text-sm);
-    }
-
-    & var {
-      font-weight: var(--odx-typography-font-weight-medium);
-    }
-  }
-
-  .odx-content-sm {
-    --_content-spacing-md: var(--odx-spacing-layout-sm);
-    --_content-spacing-lg: var(--odx-spacing-layout-md);
-    line-height: var(--odx-typography-line-height-text-sm);
-    font-size: var(--odx-typography-font-size-text-sm);
-  }
-
-  .odx-content-box {
-    background-color: var(--odx-color-background-level-1);
-    padding: var(--odx-spacing-layout-lg);
-    border-radius: 0;
+  :root {
+    --odx-cloak-timeout: 2s;
   }
-}
 
-@layer odx-utils {
-  .odx-cloak:has(:not(:defined)) {
-    animation: 2s step-end odx-cloak-hide;
+  .odx-cloak:has(:not(:defined)) > * {
+    animation: var(--odx-cloak-timeout) step-end odx-cloak-hide;
   }
 
   @keyframes odx-cloak-hide {
@@ -326,14 +161,11 @@
     }
   }
 
-  .odx-visually-hidden:not(:focus-within), .odx-visually-hidden-force {
-    clip-path: rect(0 0 0 0) !important;
-    white-space: nowrap !important;
-    border: none !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    position: absolute !important;
+  .odx-scroll-lock {
+    scrollbar-gutter: var(--odx-scroll-lock-gutter, stable) !important;
+  }
+
+  .odx-scroll-lock body {
     overflow: hidden !important;
   }
 
@@ -1015,9 +847,189 @@
   .odx-w-full-static {
     width: 100%;
   }
+
+  .odx-visually-hidden:not(:focus-within), .odx-visually-hidden-force {
+    clip-path: rect(0 0 0 0) !important;
+    white-space: nowrap !important;
+    border: none !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    overflow: hidden !important;
+  }
+
+  .odx-content :where(table), .odx-table {
+    --cell-size: var(--odx-size-300);
+    border-collapse: collapse;
+    background-color: #0000;
+    width: 100%;
+    max-width: 100%;
+
+    & caption {
+      line-height: var(--odx-typography-line-height-text-sm);
+      font-size: var(--odx-typography-font-size-text-sm);
+      font-weight: var(--odx-typography-font-weight-semibold);
+    }
+
+    & thead {
+      background-color: inherit;
+    }
+
+    & tr {
+      transition: var(--odx-motion-transition-reduced);
+      background-color: var(--odx-color-background-transparent);
+      transition-property: background-color, color;
+    }
+
+    & tr:has(td):hover {
+      background-color: var(--odx-color-background-transparent-hover);
+    }
+
+    & th, & td {
+      padding: var(--odx-control-spacing-md) var(--odx-control-spacing-inline-md);
+      min-height: var(--odx-size-250);
+      text-align: start;
+      font-size: inherit;
+    }
+
+    & th {
+      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
+      vertical-align: top;
+      font-weight: var(--odx-typography-font-weight-medium);
+      cursor: default;
+      user-select: none;
+    }
+
+    & td {
+      height: var(--cell-size);
+      vertical-align: middle;
+    }
+
+    & tr:not(:last-child) td {
+      border-bottom: var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle);
+    }
+
+    & th :is(odx-input, odx-select) {
+      margin-inline: var(--odx-spacing-negative-50);
+    }
+  }
+
+  .odx-content {
+    --_content-spacing-sm: var(--odx-spacing-layout-sm);
+    --_content-spacing-md: var(--odx-spacing-layout-md);
+    --_content-spacing-lg: var(--odx-spacing-layout-lg);
+    line-height: var(--odx-typography-line-height-text-md);
+
+    & table, & ul, & ol, & dl, & blockquote, & pre, & figure, & video, & embed, & iframe {
+      margin: var(--_content-spacing-md) 0;
+    }
+
+    & :is(odx-key-value-list, odx-list) {
+      margin-block: var(--_content-spacing-md);
+
+      & :is(odx-key-value-list, odx-list) {
+        margin-block: 0;
+      }
+    }
+
+    & > :is(odx-text, .odx-text), & li > :is(ul, ol, dl), & p, & li {
+      margin: var(--_content-spacing-sm) 0;
+    }
+
+    & :is(odx-text, .odx-text), & p {
+      &:first-child {
+        margin-block-start: 0;
+      }
+    }
+
+    & > :is(odx-title, [class*="odx-title"]), & h1, & h2, & h3, & h4, & h5, & h6 {
+      margin-block: var(--_content-spacing-lg) var(--_content-spacing-sm);
+
+      &:first-child {
+        margin-block-start: var(--_content-spacing-sm);
+      }
+    }
+
+    & table, & ul, & ol, & dl, & blockquote {
+      padding-inline-start: var(--odx-spacing-150);
+    }
+
+    & code, & pre, & mark {
+      border-radius: var(--odx-border-radius-sm);
+      padding: 0 var(--odx-spacing-12);
+    }
+
+    & code, & pre {
+      background-color: var(--odx-color-background-control-rest);
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & blockquote {
+      padding-inline-end: var(--odx-spacing-150);
+    }
+
+    & dt {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    & a {
+      text-decoration: underline;
+    }
+
+    & del {
+      color: var(--odx-color-foreground-danger-rest);
+    }
+
+    & figure {
+      flex-direction: column;
+      display: flex;
+    }
+
+    & figcaption {
+      padding: var(--_content-spacing-sm);
+      line-height: var(--odx-typography-line-height-text-sm);
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & ins {
+      color: var(--odx-color-foreground-success-rest);
+      text-decoration: none;
+    }
+
+    & mark {
+      background-color: var(--odx-color-background-selection);
+      color: var(--odx-color-foreground-rest);
+    }
+
+    & pre {
+      padding: var(--odx-control-spacing-md) calc(2 * var(--odx-control-spacing-inline-md));
+    }
+
+    & small {
+      font-size: var(--odx-typography-font-size-text-sm);
+    }
+
+    & var {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+  }
+
+  .odx-content-sm {
+    --_content-spacing-md: var(--odx-spacing-layout-sm);
+    --_content-spacing-lg: var(--odx-spacing-layout-md);
+    line-height: var(--odx-typography-line-height-text-sm);
+    font-size: var(--odx-typography-font-size-text-sm);
+  }
+
+  .odx-content-box {
+    background-color: var(--odx-color-background-level-1);
+    padding: var(--odx-spacing-layout-lg);
+    border-radius: 0;
+  }
 }
 
-@layer odx-theme, odx-overrides;
+@layer odx-overrides;
 
 .odx-slot-placeholder-sm, .odx-slot-placeholder {
   background-color: var(--odx-color-background-accent-subtle);
@@ -1066,4 +1078,5 @@
   --odx-layout-width-page-default: 1440px;
   --odx-layout-width-page-narrow: 1200px;
   --odx-layout-width-page-wide: 1800px;
+  --odx-motion-transition-instant: 50ms 0s var(--odx-motion-easing-reduced);
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "The design foundation of the ODX Design System, providing base styles and utilities",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.7",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -10,7 +10,6 @@
     "dist",
     "types",
     "CHANGELOG.md",
-    "LICENSE",
     "!dist/**/*.map"
   ],
   "type": "module",
@@ -23,10 +22,10 @@
   "devDependencies": {
     "@tsdown/css": "0.22.0",
     "lit": "3.3.3",
-    "stylelint": "17.11.1",
+    "stylelint": "17.12.0",
     "tsdown": "0.22.0",
-    "@odx-internal/config-stylelint": "0.0.0",
-    "@odx-internal/utils-storybook": "0.0.0"
+    "@odx-internal/utils-storybook": "0.0.0",
+    "@odx-internal/config-stylelint": "0.0.0"
   },
   "style": "./dist/styles.css",
   "sideEffects": [
@@ -54,7 +53,8 @@
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown  --no-clean --watch",
+    "dev": "tsdown --log-level error --no-clean --watch",
+    "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
     "lint": "biome lint src",
     "lint:styles": "stylelint '**/*.css'"
   }