@odx/foundation 1.0.0-beta.152 → 1.0.0-beta.153

package/dist/components/scroll-container/scroll-container.d.ts

@@ -5,6 +5,11 @@ declare global {
         'odx-scroll-container': OdxScrollContainer;
     }
 }
+export interface ScrollContainerChangeEvent extends Event {
+    detail: {
+        scrollDirection: -1 | 1;
+    };
+}
 /**
 
  * @slot scroll-action-left - Left action slot
@@ -19,7 +24,6 @@ export declare class OdxScrollContainer extends CustomElement {
     readonly stage: HTMLElement;
     leftOverflow: boolean;
     rightOverflow: boolean;
-    get items(): HTMLElement[];
     constructor();
     protected firstUpdated(props: PropertyValues<this>): void;
     disconnectedCallback(): void;

package/dist/components/tab-bar/tab-bar.d.ts

@@ -1,6 +1,6 @@
 import { CustomElement } from '../../lib/main.js';
-import { OdxNavigationItem } from '../main.js';
 import { PropertyValues, TemplateResult } from 'lit';
+import { OdxNavigationItem } from '../navigation-item/navigation-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-tab-bar': OdxTabBar;
@@ -8,10 +8,14 @@ declare global {
 }
 export declare class OdxTabBar extends CustomElement {
     #private;
+    autoSelect: boolean;
     selectedIndex: number;
-    get items(): OdxNavigationItem[];
     get selectedItem(): OdxNavigationItem | undefined;
     constructor();
+    getItems(): OdxNavigationItem[];
+    selectItem(item: OdxNavigationItem): void;
+    selectPreviousItem(): void;
+    selectNextItem(): void;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }

package/dist/components.js

@@ -5,7 +5,6 @@ import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { p as pick, e, d as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
 import { when } from 'lit/directives/when.js';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
-import { OdxNavigationItem as OdxNavigationItem$1 } from '@odx/foundation/components';
 import { signal, computed } from '@preact/signals-core';
 import 'lit/html.js';
 
@@ -2163,7 +2162,7 @@ __decorateClass([
 ], _OdxLineClamp.prototype, "max", 2);
 let OdxLineClamp = _OdxLineClamp;
 
-const styles$K = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));max-block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
+const styles$K = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-spacing-75);display:flex;flex-direction:column;place-items:initial;block-size:auto;max-inline-size:100%}[part~=base]{place-content:flex-start;z-index:1;outline-offset:calc(-1 * var(--odx-focus-ring-offset));padding-inline-start:calc(var(--odx-spacing-50) + var(--indent-level) * var(--odx-size-200));block-size:var(--_block-size);text-align:start;>*{--odx-focus-ring-offset: 0}}[part~=separator]{--spacing: 0px;--inner-spacing: var(--odx-spacing-25)}[part~=expand-control]{margin-block:var(--_icon-margin)}[part~=expand-control]::part(icon){transition:var(--odx-transition-reduced)}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}:host(:last-of-type) [part~=separator]{opacity:0}}@layer variant{[part~=base]:has([part~=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-spacing-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part~=expand-control]{--_icon-size: var(--odx-size-150)}[part~=base]{max-block-size:var(--_block-size)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([disabled])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected-hover);--_color-background-hover: var(--odx-color-background-transparent-selected-hover)}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-foreground-disabled-selected);cursor:not-allowed}:host([expanded]){[part~=separator]{opacity:1}[part~=expand-control]{--icon-rotation: 180deg}}}";
 
 const _OdxListItem = class _OdxListItem extends CanBeExpanded(InteractiveElement) {
   constructor() {
@@ -3312,20 +3311,19 @@ __decorateClass([
 ], _OdxRailNavigation.prototype, "size", 2);
 let OdxRailNavigation = _OdxRailNavigation;
 
-const styles$r = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;padding:var(--odx-spacing-12);inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;visibility:hidden;opacity:0;z-index:1;&.left{inset-inline-start:0}&.right{inset-inline-end:0}&.visible{visibility:visible;opacity:1}}:not([name])::slotted(*){scroll-snap-align:start;flex:0 0 auto}";
+const styles$r = ":host{--gradient-size: 0px;--_left-gradient-size: var(--gradient-size);--_right-gradient-size: var(--gradient-size);display:flex;position:relative;gap:var(--odx-spacing-50);align-items:center;max-inline-size:100%}[part~=base]{gap:inherit;transition:var(--odx-transition-default);transition-property:mask-image;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent calc(var(--_left-gradient-size) / 3),black var(--_left-gradient-size),black calc(100% - var(--_right-gradient-size)),transparent calc(100% - var(--_right-gradient-size) / 3));&::-webkit-scrollbar{display:none}}[part~=stage]{display:flex;position:relative;gap:inherit;padding:var(--odx-spacing-12);inline-size:max-content}.action{position:absolute;transition:var(--odx-transition-default);transition-property:opacity,visibility;visibility:hidden;opacity:0;z-index:1;&.left{inset-inline-start:0}&.right{inset-inline-end:0}&.visible{visibility:visible;opacity:1}}:not([name])::slotted(*){scroll-snap-align:center;flex:0 0 auto}";
 
 const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
   constructor() {
     super();
-    this.#intersectionState = /* @__PURE__ */ new Map();
     this.#scrollPadding = 0;
     this.leftOverflow = false;
     this.rightOverflow = false;
     this.#handleClick = (event) => {
       const target = getElementFromEvent(event, (node) => node === this.leftAction || node === this.rightAction);
       if (!target) return;
-      event.stopPropagation();
       const scrollDirection = target === this.leftAction ? -1 : 1;
+      if (this.emit("change", { detail: { scrollDirection } })) return;
       this.scroller.scrollBy({ left: scrollDirection * this.scroller.clientWidth / 2 });
     };
     if (!isServer) {
@@ -3333,14 +3331,10 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
     }
   }
   #intersectionObserver;
-  #intersectionState;
   #scrollPadding;
   static {
     customElement("odx-scroll-container", styles$r)(_OdxScrollContainer);
   }
-  get items() {
-    return getAssignedElements(this.renderRoot, { flatten: true });
-  }
   firstUpdated(props) {
     super.firstUpdated(props);
     this.#scrollPadding = Number.parseFloat(getComputedStyle(this.stage).paddingLeft || "0");
@@ -3348,17 +3342,6 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
       this.scroller,
       throttle(() => this.#sync(), 1e3 / 30, { edges: ["trailing", "trailing"] })
     );
-    this.#intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const { target, isIntersecting } of entries) {
-          this.#intersectionState.set(target, isIntersecting);
-        }
-      },
-      { root: this.scroller, threshold: 0.6 }
-    );
-    for (const item of Array.from(this.items)) {
-      this.#intersectionObserver.observe(item);
-    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -3390,10 +3373,6 @@ const _OdxScrollContainer = class _OdxScrollContainer extends CustomElement {
   #sync() {
     this.leftOverflow = this.scroller.scrollLeft > this.#scrollPadding;
     this.rightOverflow = this.scroller.scrollLeft + this.scroller.clientWidth < this.scroller.scrollWidth - this.#scrollPadding;
-    for (const [element, isIntersecting] of this.#intersectionState) {
-      element.toggleAttribute("inert", !isIntersecting);
-    }
-    this.#intersectionState.clear();
   }
   #handleClick;
 };
@@ -4189,36 +4168,81 @@ __decorateClass([
 ], _OdxSwitch.prototype, "indicatorPosition", 2);
 let OdxSwitch = _OdxSwitch;
 
-const styles$f = ":host{--indicator-position: 0;display:block;border-bottom:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}odx-scroll-container{--gradient-size: var(--odx-size-350)}odx-scroll-container::part(stage){padding-block:var(--odx-spacing-37) calc(var(--odx-spacing-37) - var(--odx-border-width-thin))}odx-scroll-container::part(stage):after{position:absolute;inset-block-end:0;inset-inline-start:var(--indicator-position, 0);transition:var(--odx-transition-default);background-clip:content-box;background-color:var(--odx-color-background-accent-rest);padding-inline:var(--odx-spacing-25);block-size:var(--odx-border-width-thickest);inline-size:100%;max-inline-size:var(--odx-size-350);content:\"\"}::slotted(*){scroll-snap-align:center}";
+const styles$f = ":host{--indicator-position: 0;display:block;box-shadow:inset 0 calc(var(--odx-border-width-thin) * -1) 0 0 var(--odx-color-stroke-neutral-subtle)}odx-scroll-container{--gradient-size: var(--odx-size-350)}odx-scroll-container::part(stage){padding-block:var(--odx-spacing-37)}odx-scroll-container::part(stage):after{position:absolute;inset-block-end:0;inset-inline-start:var(--indicator-position, 0);transition:var(--odx-transition-default);background-clip:content-box;background-color:var(--odx-color-background-accent-rest);padding-inline:var(--odx-spacing-25);block-size:var(--odx-border-width-thickest);inline-size:100%;max-inline-size:var(--odx-size-350);content:\"\"}";
 
 const _OdxTabBar = class _OdxTabBar extends CustomElement {
   constructor() {
     super();
+    this.#rovingTabindexController = new RovingTabindexController(this, {
+      elements: () => this.getItems(),
+      isFocusableElement: (item) => !item.disabled,
+      focusInIndex: (items) => this.#resolveInitialSelectedIndex(items),
+      elementEnterAction: async (element) => {
+        if (this.autoSelect) {
+          element.click();
+        } else {
+          await 0;
+          element.scrollIntoView({ inline: "center" });
+        }
+      },
+      direction: "horizontal"
+    });
+    this.autoSelect = false;
     this.selectedIndex = 0;
     this.#handleClick = (event) => {
-      const navigationItem = getElementFromEvent(event, (node) => node instanceof OdxNavigationItem$1);
+      const navigationItem = getElementFromEvent(event, (node) => node instanceof OdxNavigationItem);
       if (!navigationItem || navigationItem.disabled) return;
-      this.selectedIndex = this.items.indexOf(navigationItem);
+      this.selectItem(navigationItem);
+    };
+    this.#handleScrollChange = (event) => {
+      if (!this.autoSelect) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.detail.scrollDirection < 1) {
+        this.selectPreviousItem();
+      } else {
+        this.selectNextItem();
+      }
     };
     if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("click", this.#handleClick, { capture: true });
     }
   }
   static {
     customElement("odx-tab-bar", styles$f)(_OdxTabBar);
   }
-  get items() {
-    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem$1.tagName, flatten: true });
-  }
+  #rovingTabindexController;
   get selectedItem() {
-    return this.items[this.selectedIndex];
+    return this.getItems()[this.selectedIndex];
+  }
+  getItems() {
+    return getAssignedElements(this.renderRoot, { selector: OdxNavigationItem.tagName, flatten: true });
+  }
+  selectItem(item) {
+    this.selectedIndex = this.getItems().indexOf(item);
+  }
+  selectPreviousItem() {
+    const nextIndex = this.getItems().findLastIndex((item, index) => !item.disabled && index < this.selectedIndex);
+    if (nextIndex >= 0) {
+      this.selectedIndex = nextIndex;
+    } else {
+      this.selectedIndex = this.getItems().findIndex((item) => !item.disabled);
+    }
+  }
+  selectNextItem() {
+    const nextIndex = this.getItems().findIndex((item, index) => !item.disabled && index > this.selectedIndex);
+    if (nextIndex >= 0) {
+      this.selectedIndex = nextIndex;
+    } else {
+      this.selectedIndex = this.getItems().findLastIndex((item) => !item.disabled);
+    }
   }
   render() {
     return html`
-      <odx-scroll-container>
-        <odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left"></odx-icon-button>
+      <odx-scroll-container @change=${this.#handleScrollChange}>
+        <odx-icon-button icon="core::chevron-left" variant="ghost" slot="scroll-action-left" tabindex="-1"></odx-icon-button>
         <slot></slot>
-        <odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right"></odx-icon-button>
+        <odx-icon-button icon="core::chevron-right" variant="ghost" slot="scroll-action-right" tabindex="-1"></odx-icon-button>
       </odx-scroll-container>
     `;
   }
@@ -4229,16 +4253,25 @@ const _OdxTabBar = class _OdxTabBar extends CustomElement {
     }
   }
   async #updateItemSelection() {
-    this.items.forEach((item, index) => {
+    this.getItems().forEach((item, index) => {
       item.selected = this.selectedIndex === index;
     });
     if (!this.selectedItem) return;
-    await 0;
+    this.#rovingTabindexController.currentIndex = this.selectedIndex;
     this.style.setProperty("--indicator-position", toPx(this.selectedItem.offsetLeft - this.offsetLeft));
+    await 0;
     this.selectedItem.scrollIntoView({ inline: "center" });
   }
+  #resolveInitialSelectedIndex(items) {
+    const selectedIndex = items.findIndex((item) => !item.disabled && item.selected);
+    return selectedIndex > -1 ? selectedIndex : items.findIndex((item) => !item.disabled);
+  }
   #handleClick;
+  #handleScrollChange;
 };
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-select" })
+], _OdxTabBar.prototype, "autoSelect", 2);
 __decorateClass([
   property({ type: Number, attribute: "selected-index" })
 ], _OdxTabBar.prototype, "selectedIndex", 2);

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.152";
+const version = "1.0.0-beta.153";
 const pkg = {
   name,
   displayName,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.152",
+  "version": "1.0.0-beta.153",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -41,8 +41,8 @@
     "ts-lit-plugin": "2.0.2",
     "vite": "7.0.2",
     "vite-plugin-dts": "4.5.4",
-    "@odx/typescript-config": "0.0.0",
-    "@odx/storybook-utils": "0.0.0"
+    "@odx/storybook-utils": "0.0.0",
+    "@odx/typescript-config": "0.0.0"
   },
   "sideEffects": [
     "dist/i18n.js",