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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.0.0-rc.8
+
+### Bug Fixes
+
+- Remove scroll lock gutter when scrollbar is not present to prevent unnecessary layout shift
+
+## 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
@@ -20,7 +32,7 @@
 
 ### 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
 

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/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

@@ -161,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) !important;
+  }
+
+  .odx-scroll-lock body {
     overflow: hidden !important;
   }
 
@@ -851,6 +848,17 @@
     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;
@@ -1070,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.6",
+  "version": "1.0.0-rc.8",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -20,10 +20,10 @@
     "@odx/design-tokens": "^4.0.0"
   },
   "devDependencies": {
-    "@tsdown/css": "0.22.0",
+    "@tsdown/css": "0.22.1",
     "lit": "3.3.3",
-    "stylelint": "17.11.1",
-    "tsdown": "0.22.0",
+    "stylelint": "17.12.0",
+    "tsdown": "0.22.1",
     "@odx-internal/config-stylelint": "0.0.0",
     "@odx-internal/utils-storybook": "0.0.0"
   },
@@ -53,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'"
   }