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

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 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
@@ -8,6 +22,7 @@
 
 - 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/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/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 {
@@ -1015,9 +850,178 @@
   .odx-w-full-static {
     width: 100%;
   }
+
+  .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);

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.6",
   "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",