@odx/foundation 1.0.0-beta.198 → 1.0.0-beta.199

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -10,6 +10,7 @@ declare global {
     }
 }
 export declare class OdxBreadcrumbs extends CustomElement {
+    #private;
     max: number;
     connectedCallback(): void;
     protected render(): TemplateResult;

package/dist/components.js

@@ -1,6 +1,6 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Variant, LinkControlElement, activeDirective, Size, CanBeDisabled, Placement, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, OptionControlElement, ProgressVariant, RadioGroupControlElement, CanBeCollapsed, ListboxControlElement, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
-import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, toPx, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, insertChildrenBetween, optionalSlot, parseDate, supportsHover, forwardEvent, observeElementResize, unobserveElementResize, isToggleOpen } from '@odx/foundation/utils';
+import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, toPx, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, observeElementResize, unobserveElementResize, isToggleOpen } from '@odx/foundation/utils';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, t as throttle, r as round, g as debounce } from './vendor.js';
@@ -1494,45 +1494,67 @@ __decorateClass([
 ], _OdxLink.prototype, "subtle", 2);
 let OdxLink = _OdxLink;
 
-const styles$12 = ":host{min-height:var(--odx-size-225);flex-wrap:wrap;place-items:center;display:flex}::slotted(odx-link){gap:var(--odx-spacing-sm);padding-inline:var(--odx-control-spacing-inline-md);align-items:center;display:inline-flex}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted(odx-link[hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:var(--odx-spacing-negative-25);color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
+const styles$12 = ":host{min-height:var(--odx-size-225);flex-wrap:wrap;place-items:center;display:flex}::slotted(odx-link){gap:var(--odx-spacing-sm);padding-inline:var(--odx-control-spacing-inline-md);align-items:center;display:inline-flex}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted([hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:var(--odx-spacing-negative-25);color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
 
+const breadcrumbsSeparatorDirective = booleanAttributeDirective({ name: "odx-breadcrumbs-separator" });
 const breadcrumbsItemSeparator = (() => {
   const element = new OdxIconElement();
-  element.toggleAttribute("odx-breadcrumbs-separator", true);
+  breadcrumbsSeparatorDirective.toggle(element, true);
   element.name = "core::chevron-right";
   element.setAttribute("size", "sm");
-  element.slot = "items";
   return element;
 })();
 const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
   constructor() {
     super(...arguments);
+    this.#slotUpdateLock = false;
     this.max = 4;
+    this.#handleSlotChange = async () => {
+      if (this.#slotUpdateLock) return;
+      this.#slotUpdateLock = true;
+      const separators = getAssignedElements(this.renderRoot, { selector: breadcrumbsSeparatorDirective.applied });
+      for (const separator of separators) {
+        separator.remove();
+      }
+      for (const link of this.#getLinks()) {
+        const nextLink = link.nextElementSibling;
+        link.ariaCurrent = nextLink ? null : "page";
+        link.subtle = !nextLink;
+        if (!nextLink) continue;
+        const separator = breadcrumbsItemSeparator.cloneNode(true);
+        separator.hidden = link.hidden;
+        this.insertBefore(separator, nextLink);
+      }
+      await 0;
+      this.#slotUpdateLock = false;
+    };
   }
   static {
     customElement("odx-breadcrumbs", styles$12)(_OdxBreadcrumbs);
   }
+  #slotUpdateLock;
   connectedCallback() {
     super.connectedCallback();
     this.role ||= "navigation";
   }
   render() {
-    return html`<slot @slotchange="${() => this.requestUpdate()}"></slot><slot name="items"></slot>`;
+    return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
   }
   updated(props) {
     super.updated(props);
-    const links = getAssignedElements(this.renderRoot, { selector: OdxLink.tagName });
-    for (const link of links) {
-      link.slot = "items";
-    }
-    const items = getAssignedElements(this.renderRoot, { selector: OdxLink.tagName, slot: "items" });
-    for (const [index, item] of items.entries()) {
-      item.hidden = index > 0 && index <= items.length - this.max;
-      item.ariaCurrent = item.nextElementSibling ? null : "page";
-      item.subtle = !item.nextElementSibling;
+    if (props.has("max")) {
+      const links = this.#getLinks();
+      for (const [index, link] of links.entries()) {
+        link.hidden = index > 0 && index <= links.length - this.max;
+        if (!(link.nextElementSibling instanceof OdxIconElement)) continue;
+        link.nextElementSibling.hidden = link.hidden;
+      }
     }
-    insertChildrenBetween(items, breadcrumbsItemSeparator, (element) => !element.hidden);
   }
+  #getLinks() {
+    return getAssignedElements(this.renderRoot, { selector: (element) => element instanceof OdxLink });
+  }
+  #handleSlotChange;
 };
 __decorateClass([
   property({ type: Number })

package/dist/main.js

@@ -7,7 +7,7 @@ import { when } from 'lit/directives/when.js';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.198";
+const version = "1.0.0-beta.199";
 const pkg = {
   name,
   displayName,
@@ -919,7 +919,7 @@ __decorateClass([
 ], _DialogElement.prototype, "size", 2);
 let DialogElement = _DialogElement;
 
-const styles$1 = "@layer base{:host,.base{touch-action:manipulation;cursor:pointer}.label{margin-block:calc(-1*var(--_spacing));margin-inline:calc(-1*var(--_spacing-inline));padding-block:var(--_spacing);padding-inline:var(--_spacing-inline);text-align:inherit;pointer-events:none;flex:1}:host(:not([loading])) .base{&:hover{--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed)}}}";
+const styles$1 = "@layer base{:host{flex:none}:host,.base{touch-action:manipulation;cursor:pointer}.label{margin-block:calc(-1*var(--_spacing));margin-inline:calc(-1*var(--_spacing-inline));padding-block:var(--_spacing);padding-inline:var(--_spacing-inline);text-align:inherit;pointer-events:none;flex:1}:host(:not([loading])) .base{&:hover{--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed)}}}";
 
 class InteractiveControlElement extends ControlElement {
   constructor() {

package/dist/utils/dom.d.ts

@@ -10,7 +10,6 @@ export interface GetAssignedElementOptions<T extends HTMLElement = HTMLElement>
     flatten?: boolean;
 }
 export declare function getAssignedElements<T extends HTMLElement = HTMLElement>(root: DocumentFragment | HTMLElement, options?: GetAssignedElementOptions<T>): T[];
-export declare function insertChildrenBetween<T extends Element>(elements: T[], newChild: Element, shouldInsert?: (element: T) => boolean): void;
 export declare function setFocusable(target: HTMLElement, interactive: boolean, fallback?: number): void;
 export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
 export declare function interactionResponse(): Promise<unknown>;

package/dist/utils.js

@@ -81,14 +81,6 @@ function getAssignedElements(root, options) {
   const selectorFn = typeof selector === "string" ? (element) => element.matches(selector) : selector;
   return elements.filter(selectorFn);
 }
-function insertChildrenBetween(elements, newChild, shouldInsert) {
-  for (const element of elements) {
-    const nextElement = element.nextElementSibling;
-    nextElement?.isEqualNode(newChild) && nextElement.remove();
-    if (!(element.nextElementSibling && (shouldInsert?.(element) ?? true))) continue;
-    element.parentElement?.insertBefore(newChild.cloneNode(true), element.nextElementSibling);
-  }
-}
 function setFocusable(target, interactive, fallback) {
   if (interactive) {
     target.tabIndex = 0;
@@ -306,4 +298,4 @@ function resetUniqueId(key) {
   }
 }
 
-export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, insertChildrenBetween, interactionResponse, isToggleOpen, observeElementResize, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, waitForAnimations };
+export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, waitForAnimations };

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.198",
+  "version": "1.0.0-beta.199",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -27,16 +27,16 @@
     "@floating-ui/dom": "1.7.4",
     "@lit-labs/preact-signals": "1.0.3",
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
-    "@odx/icons": "4.0.0-rc.41",
+    "@odx/icons": "4.0.0-rc.42",
     "@spectrum-web-components/reactive-controllers": "1.7.0",
     "es-toolkit": "1.39.10",
-    "sass-embedded": "1.90.0",
+    "sass-embedded": "1.91.0",
     "stylelint": "16.23.1",
     "stylelint-config-concentric-order": "5.2.1",
     "stylelint-config-standard": "39.0.0",
+    "@odx-internal/config-typescript": "0.0.0",
     "@odx-internal/config-vite": "0.0.0",
     "@odx-internal/utils-storybook": "0.0.0",
-    "@odx-internal/config-typescript": "0.0.0",
     "@odx/design-tokens": "1.1.0-rc.7"
   },
   "sideEffects": [