@odx/foundation 1.0.0-beta.99 → 1.0.0-rc.0

package/CHANGELOG.md

@@ -0,0 +1,335 @@
+## 1.0.0-rc.0
+
+### Major Changes
+
+- Move components into `@odx/web-components` library, please follow the setup instructions to ensure a smooth transition to the new package structure
+- Remove spacing CSS utility classes for internal spacing tokens (12, 25, 37, etc...) to prevent usage of non-standard spacing values, use `odx-spacing-sm|md|lg` instead
+- Remove `@odx/foundation/i18n` entry point, use `@odx/foundation` to import localization utilities instead
+  - Rename `setI18nOptions` to `setLocalizationOptions`
+  - Rename `getI18nOptions` to `getLocalizationOptions`
+  - Rename `I18nOptions` to `LocalizationOptions`
+- 
+### Minor Changes
+
+- Add `odx-width-sm|md|lg|xl` CSS utility classes for common layout width
+- Add `odx-text-*` CSS utility classes for common text colors
+- Add `xxl` breakpoint for better support of large screens
+- Improved `<a>` and `.odx-link` styling for better readability and accessibility
+
+## 1.0.0-beta.276
+
+### Major Changes
+
+- Remove `odx-accordion-panel` component, use default slot of `odx-accordion-item` instead:
+
+```html
+<odx-accordion-item label="Accordion Label">
+  Accordion Item Content
+</odx-accordion-item>
+```
+
+With custom label:
+
+```html
+<odx-accordion-item >
+  <odx-title>Custom Accordion Label</odx-title>
+  Accordion Item Content
+</odx-accordion-item>
+```
+
+### Bug Fixes
+
+- Fix `aria-expanded` attribute not updating correctly on `odx-accordion-item` component
+- Fix nested `odx-accordion` not collapsing when parent item is collapsed
+- Fix cursor style when `odx-accordion-item` is in loading state
+- Fix expandable controller not detecting nested controls correctly
+- Fix dialog commands handling foreign dialog commands by mistake
+- Fix `odx-dialog` dismiss behavior when clicking inside another dialog
+
+
+## 1.0.0-beta.275
+
+### Minor Changes
+
+- Use `DraegerPangea` for headline `xl`, `xxl` and `display` sizes
+
+
+## 1.0.0-beta.274
+
+### Minor Changes
+
+- Add `disabled` state colors for `warning` and `danger` variants of `odx-list-item`
+- Remove `--size` CSS property from `odx-avatar`, use `width` instead
+
+#### Experimental Features
+
+- Add `confirmation` variant to `odx-button`, `odx-icon-button`, and `odx-action-button` and `odx-inline-message` components
+
+### Bug Fixes
+
+- Hide labels when `odx-rail-navigation` is collapsed
+- Use correct background color for content of `odx-dropdown` and `odx-menu` components
+- Fix expandable controller nested control detection
+- Fix list separator visibility in `odx-list` component
+- Adjust prefix/suffix icon placement in control elements of size `lg` to align with nested controls
+
+
+## 1.0.0-beta.273
+
+### Major Changes
+
+- Remove `layout` property from `odx-checkbox-group` and `odx-radio-group`, use CSS flexbox styles for layout customization instead
+- Refactored `odx-key-value` in order to be responsive
+
+### Minor Changes
+
+- Revert touch target implementation due to overflow issues in certain components
+- Improve `odx-key-value` layout styles
+- Add `striped` property to `odx-key-value-list` component to enable striped background for better readability
+- Add `prefix` and `suffix` slots to horizontal `odx-tab-bar` component to allow adding elements before/after the tab items
+- Add `top` placement option to `odx-drawer` component
+
+### Bug Fixes
+
+- Fix `odx-scroll-container` focus outline
+- Fix disabled background for `danger-ghost` variant of `odx-button` component
+- Prevent `expand` event if nested control is clicked
+- Add `[data-odx-control]` directive to `odx-button-group` to fix positioning in other controls
+
+## 1.0.0-beta.272
+
+### Major Changes
+
+- Move component behavior utilities and controllers into `@odx/foundation/components` entry point
+- Remove entry point `@odx/foundation/utils`, use root entry point `@odx/foundation` to import utilities instead
+- Remove `type` property from `odx-loading-spinner`
+
+### Minor Changes
+
+- Add `odx-loading-dots` component
+- Remove obsolete backdrop element from `odx-loading-overlay`
+- Add padding to `odx-loading-spinner` to align spinner size with icon sizes
+
+### Bug Fixes
+
+- Align `odx-accordion-item` indicator size with design spec for size `lg`
+- Align `odx-avatar` with design spec
+- Remove `min-width` from `odx-area-header` side slots
+- Use touch-target of `36px` due to overflow issues
+
+## 1.0.0-beta.271
+
+### Bug Fixes
+
+- Fix `odx-area-header` base slot positioning and overflow issues
+- Fix `odx-loading-overlay` not hiding correctly when `loading` is set to `false`
+
+
+## 1.0.0-beta.270
+
+### Major Changes
+
+- Remove `odx-search-bar` component, use `odx-input` with `type="search"` instead
+- Remove `alignment` from `odx-area-header`
+- Remove `warning` variant from button-like components, affected components:
+  - `odx-button`
+  - `odx-icon-button`
+  - `odx-action-button`
+- Align breakpoint names and values with Figma:
+  -  Add `xl` (991px - 1281px)
+  -  Change `mobile` to `sm` (0 - 480px)
+  -  Change `tablet` to `md` (480 - 769px)
+  -  Change `desktop` to `lg` (769px - 991px)
+
+### Minor Changes
+
+- Always capitalize first letter of button-like components, affected components:
+  - `odx-button`
+  - `odx-icon-button`
+  - `odx-action-button`
+- Add search icon to `odx-input` when `type="search"` and forward search event based on `behavior` and `debounce` properties
+- Add `backdrop-inverse` property to `odx-loading-overlay` component to use inverse backdrop color
+- Rename default slot of `odx-loading-overlay` to `spinner` to prevent empty slot bug
+- Remove `size="sm"` from `odx-header`, use `size="md"` instead
+- Make control labels available to customization via CSS parts API: `::part(label)`
+- Inline `odx-logo` resources to reduce number of network requests
+- Simplify `odx-key-value` styles for better customization
+- Add `--safe-space` CSS custom property to `odx-area-header` to control minimum space taken by base slot
+- Improve `odx-slider-handle` accessibility and UI feedback during drag interaction
+
+### Bug Fixes
+
+- Update design token library
+- Fix area header prefix/suffix alignment issue
+- Fix `odx-area-header` layout issue when used in combination with `odx-action-group`
+- Fix focus state inner outline for `odx-checkbox`, `odx-radio-button`, and `odx-switch` in checked state
+- Fix `odx-toolbar` spacing and overflow issues
+- Fix `odx-list-item` separator for `danger` and `warning` variants and `:hover` state
+- Fix `odx-input` placeholder color
+- Fix `odx-input` and `odx-select` overflow causing missing border-radius
+- Fix inline-start spacing of `odx-logo` slotted into `odx-area-header`
+
+
+## 1.0.0-beta.269
+
+### Major Changes
+
+- Enable `odx-tooltip` on touch devices by default, use `touch-disabled` to disable it
+- Rename `indicator-placement` to `control-placement`, affected components:
+  - `odx-checkbox`
+  - `odx-radio-button`
+  - `odx-switch`
+
+- Rename `hover-only` to `click-disabled`, affected components:
+  - `odx-tooltip`
+
+### Minor Changes
+
+- Add touch targets of `40px` to interactive elements for better accessibility on touch devices
+- Add `touch-disabled` to `odx-tooltip` to disable it on touch devices
+
+
+### Bug Fixes
+
+- Fix `odx-rail-navigation` transition animation when expanding/collapsing
+- Fix cursor styles for `odx-checkbox`, `odx-radio-button`, and `odx-switch` when disabled
+- Add missing box-shadow to `odx-tile` interactive-selected state
+- Prevent `:hover` styles to be applied on parent control if a child interactive element is hovered
+
+
+## 1.0.0-beta.268
+
+### Bug Fixes
+
+- Only apply `:hover` styles on non-touch devices to prevent sticky hover states
+
+
+## 1.0.0-beta.267
+
+### Minor Changes
+
+- Remove HTML `part` attribute if not needed to reduce shadow DOM complexity
+
+### Bug Fixes
+
+- Disable native touch interaction feedback on elements which have an `:active` state
+- Fix nested control spacing issue
+- Fix tabindex issue when `odx-checkbox-group` and `odx-radio-group` become enabled
+- Fix remove event not firing on `odx-chip` component
+
+### Misc
+
+- Cleanup component templates and styles to reduce shadow DOM complexity
+  
+
+## 1.0.0-beta.266
+
+### Major Changes
+
+- Rename `indicator-position` to `indicator-placement`, affected components:
+  - `odx-accordion`
+  - `odx-checkbox`
+  - `odx-radio`
+  - `odx-switch`
+  - 
+- Rename `position` property to `placement` in dialog related components:
+  - `odx-dialog`
+  - `odx-drawer`
+- Rename `badge-position` to `badge-placement` in button related component
+
+### Minor Changes
+
+- Add `odx-sheet` component
+- Add `bottom` placement option to `odx-drawer`
+
+
+### Bug Fixes
+
+- Fix `odx-card` outer spacing
+- Fix modal styles
+
+## 1.0.0-beta.265
+
+### Minor Changes
+
+- Add `debounce` property to `odx-input` and `odx-search-bar` components to control input event debouncing
+
+### Bug Fixes
+
+- Disable `:hover` styles on touch devices to prevent sticky hover states
+- Dedupe mixins to prevent multiple instances of the same mixin being applied
+- Make `odx-content` available in shadow DOM
+- Ensuring consistent tap highlight styling across components
+- Adds active state styling to slotted links within breadcrumbs
+- Focus `odx-input` on password reveal
+
+## 1.0.0-beta.264
+
+### Bug Fixes
+
+- Fix `odx-input-number` not emitting change event with updated value
+
+
+## 1.0.0-beta.263
+
+### Bug Fixes
+
+- Fix `odx-input` resize issue
+- Fix `odx-input-number` not updating value to boundaries on step up/down
+- Fix value selection issue in `odx-input` component
+- Inject correct `ResizeObserverEntry` into `ResizeObserver` callbacks of global observers
+
+
+## 1.0.0-beta.262
+
+### Minor Changes
+
+- Update selected options label for multi selection in `odx-select` component to match design spec
+
+### Bug Fixes
+
+- Fix modal dismiss event firing on text selection by accident
+- Fix `odx-input` value not updating correctly
+
+
+## 1.0.0-beta.261
+
+### Bug Fixes
+
+- Fix `odx-input` type attribute not updating correctly
+
+
+## 1.0.0-beta.260
+
+### Major Changes
+
+- Remove generic from `FormAssociated` mixin due to issues with type inference in certain scenarios
+- Remove `--_min-width` custom property from control elements, use `min-width` property instead
+
+### Minor Changes
+
+- New `odx-input-number` component
+- Improve `odx-input` component accessibility and flexibility
+- Add input `loading` state
+- Add auto sizing behavior for input controls
+- Remove CSS parts from `odx-loading-overlay` component
+
+### Bug Fixes
+
+- Fix positioning of clear action in `odx-input` and `odx-select` components
+- Move `[loading]` styles into button control to prevent leakage to other components
+
+
+## 1.0.0-beta.259
+
+### Minor Changes
+
+- Bump `@odx/design-tokens` dependency to `^3.1.0`
+- Replace object and math utilities by `es-toolkit/*` equivalents
+- Bump `@odx/icons` dependency to `^4.2.0`
+  - Use `font-size` property instead of `--size` custom property for icon sizing
+
+### Bug Fixes
+
+- Fix checkbox control updated hook not calling parent hook
+- Ensure context API is always used in a root context

package/README.md

@@ -1,59 +1,91 @@
 
 # @odx/foundation
 
-The `@odx/foundation` package is a core part of the ODX Design System, providing essential building blocks for creating consistent and cohesive user interfaces. This package includes foundational components, styles, and utilities to ensure a unified design across all ODX projects.
+The `@odx/foundation` package provides the foundational tokens and styles that are needed to build applications and websites consistent with the ODX Design System.
+It includes a comprehensive CSS framework, global styles, and utility classes to help you create visually appealing and user-friendly interfaces.
 
 ### Features
 
-- **Components**: Reusable web components, including buttons, tables, headers, and more.
-- **i18n**: Internationalization utilities for building multilingual applications, with support for locale changes and translations.
-- **Global Styles**: Comprehensive global styles, including colors, spacing, and themes.
-
-### Prerequisites
+- **Foundational Styles**: Comprehensive global styles, including colors, spacing, and themes.
+- **CSS Framework**: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
+- **Breakpoint System**: A responsive breakpoint system to create adaptable layouts across various devices.
+- **Dark Mode Support**: Built-in dark mode support for better user experience in low-light environments.
+- **Localization**: Localization utilities to manage localization and language preferences in your application.
+- **Browser Support**: <a href="https://web-platform-dx.github.io/web-features/supported-browsers/?targetYear=2024" target="_blank">Baseline 2024</a>
 
 ### Install
 
 [<img alt="NPM Version (with dist tag)" src="https://img.shields.io/npm/v/%40odx%2Ffoundation/latest?style=flat-square">](https://npmjs.org/package/@odx/foundation)
 
-
-To install `@odx/foundation` and it's peer dependencies in your project, run the following command:
+##### PNPM
 
 ```bash
-npm install @odx/design-tokens @odx/foundation @odx/icons@next --save 
+pnpm add @odx/foundation @odx/design-tokens
 ```
+##### NPM
 
-> 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. 
-> 
-> [<img src="https://img.shields.io/npm/dependency-version/@odx/foundation/lit" />](https://npmjs.org/package/lit)
-
+```bash
+npm i @odx/foundation @odx/design-tokens --save 
+```
 
 ### Setup
 
-> Ensure that you have followed the installation and setup instructions for our [**design tokens**](https://npmjs.org/package/@odx/design-tokens) library.
+Once installed, you can import the baseline styles into your project:
 
-Once installed, you can import the foundational components and styles into your project:
+##### JavaScript
 
 ```js
-// Load core icons
-import '@odx/icons';
-import '@odx/icons/core';
+/* Load global fonts and styles (in JS) */
+import '@odx/design-tokens/css';
+import '@odx/design-tokens/fonts';
 
-// Load components
-import '@odx/foundation/loader';
+import '@odx/foundation/styles';
+```
+
+##### CSS
 
-// Load styles (in JS)
-import '@odx/foundation/styles'; // JS
+```css
+/* Load global fonts and styles (in CSS) */
+@import "@odx/design-tokens/fonts"; /* @odx/design-tokens/assets/fonts.css */
+@import "@odx/design-tokens/css";   /* @odx/design-tokens/dist/tokens.css */
 
+@import "@odx/foundation/styles";   /* @odx/foundation/dist/styles.css */
 ```
 
-```css
-// Load styles (in CSS)
-@import '@odx/foundation/dist/styles.css';
+##### HTML 
+
+In order for the baseline styles to apply, you have to add the `odx-root` to the `html` element of your application. 
+
+```html
+<html class="odx-root">
+  ...
+</html>
+
+
+<!-- 
+ If you are using ODX in a 3rd party context, 
+ you have to add the `odx-root` class to the container element.
+-->
+<div class="odx-root">
+  ...
+</div>
 ```
 
-### Documentation
+### Theming
+
+The `@odx/foundation` package provides built-in support for light and dark modes. You can easily switch between modes using the `setTheme` function:
 
-For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://odx.draeger.com" target="_blank" rel="noopener">**documentation**</a>.
+```js
+import { setTheme } from '@odx/foundation';
+
+setTheme({
+  // Set the color mode (light, dark, or auto)
+  mode: 'light' | 'dark' | 'auto',
+  // Enables/Disables European Accessibility Act compliant color contrasts
+  eaaConformity: 'on' | 'off',
+});
+```
+
+### Documentation
 
-### Contact
-For questions, feedback, or support, please reach out to us through our <a href="https://odx.draeger.com/contact" target="_blank" rel="noopener">**contact page**</a>.
+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>.

package/dist/lib/breakpoints.d.ts

@@ -0,0 +1,61 @@
+import { Signal } from './signals.js';
+declare global {
+    namespace ODX.Breakpoints {
+        interface Config {
+            sm: true;
+            md: true;
+            lg: true;
+            xl: true;
+            xxl: true;
+        }
+    }
+}
+type FilteredKeys<T extends object> = {
+    [K in keyof T as T[K] extends true ? K : never]: T[K];
+};
+export type BreakpointOperator = '<' | '<=' | '>=' | '>';
+export interface BreakpointConfig {
+    name: keyof FilteredKeys<ODX.Breakpoints.Config>;
+    min: number;
+    max: number;
+    customQuery?: string;
+}
+export interface Breakpoint extends BreakpointConfig {
+    id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
+    query: string;
+    operator?: BreakpointOperator;
+}
+export declare const registeredBreakpoints: ReadonlyMap<Breakpoint['id'], Breakpoint>;
+export declare const breakpointAttribute = "odx-breakpoint";
+export declare const defaultBreakpoints: [{
+    readonly name: "sm";
+    readonly min: 0;
+    readonly max: 479.98;
+}, {
+    readonly name: "md";
+    readonly min: 480;
+    readonly max: 768.98;
+}, {
+    readonly name: "lg";
+    readonly min: 769;
+    readonly max: 990.98;
+}, {
+    readonly name: "xl";
+    readonly min: 991;
+    readonly max: 1280.98;
+}, {
+    readonly name: "xxl";
+    readonly min: 1352;
+    readonly max: number;
+}];
+export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
+export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
+export declare function observeBreakpoint(id: Breakpoint['id'], initialValue?: boolean): Signal<Breakpoint & {
+    matches: boolean;
+}>;
+export declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
+export declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
+    matches: boolean;
+}) => void): () => void;
+export {};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/lib/breakpoints.js

@@ -0,0 +1,139 @@
+import { signal, effect } from './signals.js';
+import { observeMedia } from './utils/shared-media-observer.js';
+
+const operators = ["<", "<=", ">=", ">"];
+const registeredBreakpoints = /* @__PURE__ */ new Map();
+const breakpointAttribute = "odx-breakpoint";
+const defaultBreakpoints = [
+  { name: "sm", min: 0, max: 479.98 },
+  { name: "md", min: 480, max: 768.98 },
+  { name: "lg", min: 769, max: 990.98 },
+  { name: "xl", min: 991, max: 1280.98 },
+  { name: "xxl", min: 1352, max: Number.MAX_SAFE_INTEGER }
+];
+function buildBreakpoint(breakpoint, operator) {
+  const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
+  let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
+  switch (operator) {
+    case "<":
+      query = `(max-width: ${breakpoint.min - 0.02}px)`;
+      break;
+    case "<=":
+      query = `(max-width: ${breakpoint.max}px)`;
+      break;
+    case ">=":
+      query = `(min-width: ${breakpoint.min}px)`;
+      break;
+    case ">":
+      query = `(min-width: ${breakpoint.max + 0.02}px)`;
+      break;
+  }
+  return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
+}
+function expandBreakpoints(...breakpoints) {
+  return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
+}
+function observeBreakpoint(id, initialValue = false) {
+  const breakpoint = registeredBreakpoints.get(id);
+  let unobserveMedia;
+  const state = signal(
+    { ...breakpoint, matches: initialValue },
+    {
+      watched() {
+        if (!breakpoint) return;
+        unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
+          state.set({ ...breakpoint, matches });
+        });
+      },
+      unwatched() {
+        unobserveMedia?.();
+        unobserveMedia = void 0;
+      }
+    }
+  );
+  return state;
+}
+function setupBreakpoints(breakpointsConfig = []) {
+  const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
+  const directiveUpdater = createBreakpointUpdater(breakpoints);
+  let mutationObserver;
+  let unobserveBreakpoints = () => {
+  };
+  function initBreakpoints() {
+    destroyBreakpoints();
+    mutationObserver = new MutationObserver(directiveUpdater);
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: [breakpointAttribute]
+    });
+    unobserveBreakpoints = effect(directiveUpdater);
+  }
+  function destroyBreakpoints() {
+    unobserveBreakpoints();
+    mutationObserver?.disconnect();
+    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+  }
+  if (document.readyState === "loading") {
+    globalThis.addEventListener("DOMContentLoaded", initBreakpoints, { once: true });
+  } else {
+    initBreakpoints();
+  }
+  return destroyBreakpoints;
+}
+function updateHostElement(host, active) {
+  const attributeName = "data-odx-breakpoint-slot";
+  const classNames = host.getAttribute("odx-breakpoint-class");
+  if (classNames) {
+    for (const className of classNames.split(" ")) {
+      host.classList.toggle(className, active);
+    }
+    return;
+  }
+  host.hidden = !active;
+  let initialSlot = host.getAttribute(attributeName);
+  if (initialSlot == null) {
+    initialSlot = host.slot;
+    host.setAttribute(attributeName, initialSlot);
+  }
+  if (active) {
+    host.removeAttribute(attributeName);
+    if (initialSlot === "") {
+      host.removeAttribute("slot");
+      return;
+    }
+    host.slot = "";
+    host.slot = initialSlot;
+  } else {
+    host.slot = "_odx_breakpoint_hidden";
+  }
+}
+function createBreakpointUpdater(breakpoints, update) {
+  for (const breakpoint of breakpoints) {
+    registeredBreakpoints.set(breakpoint.id, breakpoint);
+  }
+  const breakpointCache = /* @__PURE__ */ new WeakMap();
+  const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint.id, false));
+  return () => {
+    const elements = document.querySelectorAll(`[${breakpointAttribute}]`);
+    const changes = breakpointObservers.reduce(
+      (breakpoints2, breakpoint) => {
+        breakpoints2[breakpoint.get().id] = breakpoint.get();
+        return breakpoints2;
+      },
+      {}
+    );
+    let i = elements.length;
+    while (i--) {
+      const element = elements[i];
+      const change = changes[element.getAttribute(breakpointAttribute) || ""];
+      if (!change || change.matches === breakpointCache.get(element)) continue;
+      breakpointCache.set(element, change.matches);
+      updateHostElement(element, change.matches);
+      update?.(element, change);
+    }
+  };
+}
+
+export { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };