@odx/foundation 1.0.0-beta.27 → 1.0.0-beta.270

package/CHANGELOG.md

@@ -0,0 +1,208 @@
+## 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 multiselection 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,36 +1,35 @@
 
 # @odx/foundation
 
-The `@odx/foundation` package is an integral element of the ODX Design System, offering essential building blocks for developing consistent and cohesive user interfaces. This package provides foundational styles for layout, typography, and global styles, ensuring a unified design across all ODX projects.
+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.
 
 ### Features
 
-- **Layout Styles**: Standardized layout styles to maintain consistency across different pages and elements.
-- **Typography**: Predefined typography styles for headers, paragraphs, and other text elements to ensure a cohesive look and feel.
-- **Global Styles**: Comprehensive global styles that set the base for your application's design, including colors, spacing, and more.
-
-### Prequisites
-
+- **CSS Framework**: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
+- **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.
+- **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` 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/foundation @odx/icons --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. 
+> 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)
 
 
 ### Setup
 
-> Ensure that you have followed the installation and setup instructions for our [**design tokens**](https://npmjs.org/package/@odx/design-tokens) library.
+> 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 foundational components and styles into your project:
 
@@ -43,18 +42,42 @@ import '@odx/icons/core';
 import '@odx/foundation/loader';
 
 // Load styles (in JS)
-import '@odx/foundation/styles'; // JS
+import '@odx/foundation/styles';
+
 
 ```
 
 ```css
-// Load styles (in CSS)
+/* Load styles (in CSS) */
 @import '@odx/foundation/dist/styles.css';
+
+```
+
+### Framework integration
+
+We currently do not provide any framework specific integration for the `@odx/foundation` package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.
+
+#### Angular Example
+
+```typescript
+import { Directive, input } from '@angular/core';
+
+@Directive({
+  selector: 'odx-title',
+  host: { '[attr.size]': 'size() || null' },
+})
+export class Title {
+  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
+}
 ```
 
+#### React Example
+
+See <a href="https://lit.dev/docs/frameworks/react/" target="_blank">Lit documentation</a> for more information on how to use web components in React.
+
 ### Documentation
 
-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>.
+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>.
 
 ### 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 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>.

package/dist/_virtual_class-decorator-runtime.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+
+          const __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+export { __decorateClass as _ };

package/dist/active-descendants-controller.js

@@ -0,0 +1,308 @@
+import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
+import { dedupeMixin, toAriaBooleanAttribute, detectKeyboardFocus, interactionResponse, keyboardFocusDirective, getKeyInfo, booleanAttributeDirective } from '@odx/foundation/utils';
+import { property, state } from 'lit/decorators.js';
+import { LitElement, unsafeCSS, html } from 'lit';
+
+const CanBeDisabled = dedupeMixin((superClass) => {
+  class CanBeDisabledMixin extends superClass {
+    constructor() {
+      super(...arguments);
+      this.disabled = false;
+      this.focusDisabled = false;
+    }
+    #initialTabIndex;
+    get focusTarget() {
+      return this;
+    }
+    firstUpdated(props) {
+      super.firstUpdated(props);
+      this.#initialTabIndex = this.focusTarget.hasAttribute("tabindex") ? this.focusTarget.tabIndex : void 0;
+    }
+    willUpdate(props) {
+      super.willUpdate(props);
+      if (props.has("disabled")) {
+        this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      }
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("disabled") || props.has("focusDisabled")) {
+        this.#updateTabIndex();
+      }
+    }
+    #updateTabIndex() {
+      if (!this.focusTarget) return;
+      if (!this.focusDisabled) {
+        this.focusTarget.tabIndex = this.disabled ? -1 : this.#initialTabIndex ?? 0;
+        return;
+      }
+      if (this.#initialTabIndex == null) {
+        this.focusTarget.tabIndex = -1;
+      } else {
+        this.focusTarget.removeAttribute("tabindex");
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
+  ], CanBeDisabledMixin.prototype, "disabled", 2);
+  __decorateClass([
+    property({ type: Boolean, useDefault: true, attribute: "focus-disabled" })
+  ], CanBeDisabledMixin.prototype, "focusDisabled", 2);
+  return CanBeDisabledMixin;
+});
+
+const FormAssociated = dedupeMixin((superClass) => {
+  class FormAssociatedBehavior extends CanBeDisabled(superClass) {
+    constructor() {
+      super(...arguments);
+      this.name = "";
+      this.value = "";
+      this.readonly = false;
+      this.required = false;
+      this.invalid = false;
+    }
+    static {
+      this.formAssociated = true;
+    }
+    get form() {
+      return this.internals.form;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    clear() {
+      this.value = "";
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
+    setValidity(flags, target = this) {
+      if (!flags) {
+        this.internals.setValidity({});
+        return;
+      }
+      const errorKey = Object.keys(flags).find((key) => flags?.[key] === true);
+      this.internals.setValidity(flags, errorKey ?? "unknown error", target);
+    }
+    toFormValue() {
+      return this.value ? String(this.value) : null;
+    }
+    willUpdate(props) {
+      super.willUpdate(props);
+      if (props.has("required")) {
+        this.ariaRequired = toAriaBooleanAttribute(this.required);
+      }
+      if (props.has("readonly")) {
+        this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
+      }
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass([
+    property()
+  ], FormAssociatedBehavior.prototype, "name", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
+  ], FormAssociatedBehavior.prototype, "readonly", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
+  ], FormAssociatedBehavior.prototype, "required", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true, useDefault: true })
+  ], FormAssociatedBehavior.prototype, "invalid", 2);
+  return FormAssociatedBehavior;
+});
+
+const styles = "@layer reset{html{box-sizing:border-box}:not(:defined){visibility:hidden}*,:before,:after{box-sizing:inherit}*{scrollbar-width:thin}:where(h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,dl,dt,dd,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;border:0;margin:0;padding:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.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}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);box-sizing:border-box;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);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;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)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:not([disabled]):where(:hover){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-family:var(--odx-typography-font-family-brand),\"Noto Sans\",Kanit,sans-serif;font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]):not([disabled]):active{--_color-background-pressed:var(--_color-background-hover)}[data-odx-control]:has([data-odx-control]:hover):not([disabled]){--_color-background-hover:var(--_color-background);--_color-foreground-hover:var(--_color-foreground)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}}@layer variant,state;@layer overrides{.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}}@layer odx.base{.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-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& 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{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);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)}}";
+
+function customElement(tagName, ...styles2) {
+  return (target) => {
+    const mergedStyles = [CustomElement.styles, target.styles ?? [], ...styles2.map(unsafeCSS)].flat();
+    target.tagName = tagName;
+    target.styles = Array.from(new Set(mergedStyles));
+    target.load = () => {
+      if (customElements.get(tagName)) return;
+      customElements.define(tagName, target);
+      target.initializer?.();
+    };
+  };
+}
+class CustomElement extends LitElement {
+  constructor() {
+    super();
+    this.hasContent = false;
+    this.slotsWithContent = /* @__PURE__ */ new Set();
+    this.#handleSlotChange = () => {
+      this.slotsWithContent = new Set(Array.from(this.querySelectorAll(":scope > [slot]")).map((element) => element.slot));
+      this.hasContent = Array.from(this.childNodes).some((node) => {
+        return node instanceof HTMLElement && !node.slot || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== "";
+      });
+    };
+    this.internals = this.attachInternals();
+  }
+  static {
+    this.styles = unsafeCSS(styles);
+  }
+  static {
+    this.observeSlots = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const { observeSlots } = this.constructor;
+    if (observeSlots) {
+      this.#handleSlotChange();
+      this.renderRoot.addEventListener("slotchange", this.#handleSlotChange);
+    }
+  }
+  emit(event, eventInit) {
+    if (typeof event === "string") {
+      return !this.dispatchEvent(new CustomEvent(event, { bubbles: false, composed: false, cancelable: true, ...eventInit }));
+    }
+    return !this.dispatchEvent(event);
+  }
+  /** @internal */
+  whenSlotted(slotName, content = (slot) => slot) {
+    if (slotName === void 0) {
+      return this.hasContent ? content(html`<slot></slot>`) : html`<slot hidden></slot>`;
+    }
+    if (this.slotsWithContent.has(slotName)) {
+      return content(html`<slot name="${slotName}"></slot>`);
+    }
+    return html`<slot name="${slotName}" hidden></slot>`;
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  #handleSlotChange;
+}
+__decorateClass([
+  state()
+], CustomElement.prototype, "hasContent", 2);
+__decorateClass([
+  state({
+    hasChanged: (a, b) => {
+      if (!(a && b)) return true;
+      return a.size === b.size && [...a].every((value) => b.has(value));
+    }
+  })
+], CustomElement.prototype, "slotsWithContent", 2);
+async function loadCustomElements(loader) {
+  const entries = await loader();
+  for (const entry of entries) {
+    if (typeof entry !== "function" || !("load" in entry) || typeof entry.load !== "function") continue;
+    entry.load?.();
+  }
+}
+
+const activeDirective = booleanAttributeDirective({
+  name: "data-odx-active",
+  onUpdate: (host) => host instanceof LitElement && host.requestUpdate()
+});
+function activeDescendantsControllerOptions(options) {
+  return {
+    getItems: () => [],
+    ...options
+  };
+}
+class ActiveDescendantsController {
+  #host;
+  #options;
+  #enabled = false;
+  #items = [];
+  #activeIndex = -1;
+  static {
+    detectKeyboardFocus();
+  }
+  get activeIndex() {
+    return this.#activeIndex;
+  }
+  get activeItem() {
+    return this.#items[this.#activeIndex];
+  }
+  constructor(host, options = {}) {
+    this.#host = host;
+    this.#options = activeDescendantsControllerOptions(options);
+    host.addController(this);
+  }
+  async hostUpdated() {
+    await interactionResponse();
+    if (keyboardFocusDirective.applied(this.#host)) {
+      this.enable();
+    } else {
+      this.disable();
+    }
+  }
+  enable() {
+    if (this.#enabled) return;
+    this.#enabled = true;
+    this.#host.addEventListener("keydown", this.#handleKeyDown);
+    this.#items = this.#options.getItems().filter((item) => item.isConnected);
+    this.update(this.#activeIndex);
+  }
+  disable() {
+    if (!this.#enabled) return;
+    this.#enabled = false;
+    this.#host.removeEventListener("keydown", this.#handleKeyDown);
+    this.update();
+  }
+  previous() {
+    const index = this.#items.findLastIndex((item, index2) => this.#activeIndex > index2 && item.canActivate());
+    this.update(index);
+  }
+  next() {
+    const index = this.#items.findIndex((item, index2) => this.#activeIndex < index2 && item.canActivate());
+    this.update(index);
+  }
+  first() {
+    this.update(this.#items.findIndex((item) => item.canActivate()));
+  }
+  last() {
+    this.update(this.#items.findLastIndex((item) => item.canActivate()));
+  }
+  update(index, force = false) {
+    const activeIndex = index ?? this.#activeIndex;
+    const activeItem = this.#items[activeIndex];
+    const previousActiveItem = this.#items[this.#activeIndex];
+    if (!(force || activeItem?.canActivate())) return;
+    previousActiveItem?.deactivate();
+    this.#activeIndex = activeIndex;
+    this.#host.ariaActiveDescendantElement = activeItem ?? null;
+    if (keyboardFocusDirective.applied(this.#host)) {
+      activeItem?.activate();
+    } else {
+      activeItem?.deactivate();
+    }
+    this.#options.onChange?.(previousActiveItem, activeItem, previousActiveItem == null && Boolean(activeItem));
+  }
+  #handleKeyDown = (event) => {
+    const key = getKeyInfo(event);
+    if (!(key.up || key.down || key.start || key.end)) return;
+    event.preventDefault();
+    if (key.down) {
+      this.next();
+    } else if (key.up) {
+      this.previous();
+    } else if (key.start) {
+      this.first();
+    } else if (key.end) {
+      this.last();
+    }
+  };
+}
+
+export { ActiveDescendantsController as A, CustomElement as C, FormAssociated as F, CanBeDisabled as a, activeDirective as b, customElement as c, loadCustomElements as l };