@db-ux/v-core-components 5.6.0 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @db-ux/v-core-components
 
+## 5.6.1
+
+### Patch Changes
+
+- fix(DBControlPanel): open drilldown with a transition instead of a clip-path - [see commit b4165ee](https://github.com/db-ux-design-system/core-web/commit/b4165ee83c5c8ae14bfd3b4755c48d8b99bae1a6):
+    - open the navigation drilldown with a transition instead of a `clip-path`
+    - pin the drilldown overlay to the scroll viewport so it is not shifted up by an existing scroll offset
+    - restore the flat-icon navigation indicator and the drilldown group icons
+    - recompute the navigation variant on viewport resize so it no longer sticks to popover after switching from drilldown
+    - reduce the navigation item and expand button gap to fix wrong icon spacing
+    - move `data-icon` / `data-show-icon` for a navigation item group from the group `<li>` to its expand button (CSS-only consumers who hand-write the markup have to move these attributes onto the `.db-control-panel-navigation-item-group-expand-button`)
+- fix(DBPopover): a controlled `open` no longer freezes the page in Angular - [see commit 2f14f69](https://github.com/db-ux-design-system/core-web/commit/2f14f69919bd57853661e90edc8f36915974e306)
+- fix(DBFooterMeta): remove double space before the copyright holder in Angular - [see commit bc83f12](https://github.com/db-ux-design-system/core-web/commit/bc83f1280911791ff8c4a7ab611589825109f332):
+    - The copyright sign and its non-breaking space were a text node next to the `copyright` interpolation. For Angular that generated `©&nbsp; {{copyright()}}`, and Angular does not collapse whitespace next to a `&nbsp;`, so the Angular output rendered the line about 3px wider than React and Vue. Sign and space are now part of the interpolated expression, so every target renders the same text.
+- docs(DBIcon): document that the icon is always decorative - [see commit 6d48a36](https://github.com/db-ux-design-system/core-web/commit/6d48a366bf7078e52e029e73103d686a36198bb8):
+    - The usage examples showed `<DBIcon icon="x_placeholder">Icon</DBIcon>`, which suggests the child text is rendered somewhere. It is not: the component renders `aria-hidden="true"` and `font-size: 0`, so `text` and children are hidden both visually and from the accessibility tree, and `role` / `aria-label` on the component have no effect either. The examples now show the icon without content, and a new accessibility page explains how to label an informative icon (named wrapper, the parent component's `icon` property, or the `data-icon` attribute).
+- fix(DBShell): stop reserving an empty sub-navigation row on mobile - [see commit bc83f12](https://github.com/db-ux-design-system/core-web/commit/bc83f1280911791ff8c4a7ab611589825109f332):
+    - The mobile grid templates declared the `sub-navigation` row unconditionally, while the desktop templates guard it with `:has()`. Without a sub-navigation the empty row captured any unplaced child of `DBShell` -- a `DBFooter` added as a direct child was rendered between the control panel and the content instead of below it. The mobile templates now add the row only when a sub-navigation is present, matching desktop.
+    - Also documents the supported composition: a footer belongs in the `endSlot` of `DBShellContent`, not in `DBShell`.
+- fix(DBShell): prevent logo position jump between expanded and collapsed state - [see commit 2fe98a8](https://github.com/db-ux-design-system/core-web/commit/2fe98a82a6a52f40f41593bd437945795f30a7b8)
+- style(Dialog & Drawer): corrected the headlines `font-family` (regular, instead of heading) - [see commit 2938761](https://github.com/db-ux-design-system/core-web/commit/29387612c7834664dbd93102dc09141c021fa159)
+
 ## 5.6.0
 
 ### Minor Changes

package/agent/Icon.md

@@ -5,19 +5,20 @@
 ```vue
 <template>
   <h1>DBIcon Documentation Examples</h1>
-  <h2>1. Default Icon</h2>
-  <DBIcon>Default Icon</DBIcon>
-  <h2>2. Icon Variants</h2>
-  <DBIcon icon="user">User Icon</DBIcon>
-  <DBIcon icon="settings">Settings Icon</DBIcon>
-  <h2>3. Icon Weights</h2>
-  <DBIcon weight="16">16px Icon</DBIcon>
-  <DBIcon weight="24">24px Icon</DBIcon>
-  <DBIcon weight="32">32px Icon</DBIcon>
-  <h2>4. Custom Class</h2>
-  <DBIcon>Custom Class Icon</DBIcon>
-  <h2>5. Text Content</h2>
-  <DBIcon text="Icon with Text">Icon with Text</DBIcon>
+  <h2>1. Icon Variants</h2>
+  <DBIcon icon="user"></DBIcon>
+  <DBIcon icon="settings"></DBIcon>
+  <h2>2. Icon Weights</h2>
+  <DBIcon icon="user" weight="16"></DBIcon>
+  <DBIcon icon="user" weight="24"></DBIcon>
+  <DBIcon icon="user" weight="32"></DBIcon>
+  <h2>3. Custom Class</h2>
+  <DBIcon icon="user"></DBIcon>
+  <h2>
+    4. Informative icon: DBIcon always renders aria-hidden, so the accessible
+    name goes on a wrapper
+  </h2>
+  <span role="img" aria-label="Coach"><DBIcon icon="coach"></DBIcon></span>
 </template>
 
 <script setup lang="ts">

package/dist/components/control-panel-navigation-item-group/model.d.ts

@@ -38,5 +38,30 @@ export type DBControlPanelNavigationItemGroupDefaultState = {
     _handleMouseEnter: () => void;
     _handleMouseLeave: () => void;
     _setSiblingsInert: (inert: boolean) => void;
+    /**
+     * The overlay is position: absolute; inset: 0 and anchors to the
+     * nearest positioned scroll owner. Which element scrolls depends on
+     * the layout (desktop scroll container, mobile drawer scroll
+     * container, or the left sub-navigation) and, for a nested level,
+     * it is the parent drilldown overlay menu. Rather than guess the
+     * owner per layout, walk up from this group and reset the scrollTop
+     * of every ancestor that currently has one. That clears the offset
+     * on whichever ancestor actually scrolled so the inset:0 overlay
+     * aligns with the visible scrollport.
+     *
+     * The walk stops at the outermost element for the current layout:
+     * - desktop main panel: the desktop scroll container
+     * - mobile drawer: the mobile drawer scroll container
+     * - left sub-navigation: the shell-sub-navigation wrapper, which
+     *   sits directly above the scroll owner
+     *   (.db-control-panel-navigation)
+     *
+     * .db-control-panel-navigation is intentionally NOT a boundary: in
+     * the desktop/mobile layouts it is only a descendant of the real
+     * scroll container, so stopping there would miss the element that
+     * actually scrolled. The document body is the hard backstop and is
+     * never itself reset, so the walk can never touch page-level scroll.
+     */
+    _resetScrollOwner: () => void;
 };
 export type DBControlPanelNavigationItemGroupState = DBControlPanelNavigationItemGroupDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & NavigationBehaviorState & InitializedState;

package/dist/db-ux.es.js

@@ -1914,7 +1914,7 @@ var S = () => {
 			h.value
 		], () => {
 			if (T.value && E.value && h.value && (requestAnimationFrame(() => {
-				M(), y.value ||= new $().observe(E.value, () => {
+				M(), y.value ||= new $().observe(T.value, () => {
 					M();
 				});
 			}), !C.value)) {
@@ -2294,14 +2294,14 @@ var S = () => {
 }), kn = [
 	"id",
 	"role",
-	"data-icon",
-	"data-show-icon",
 	"data-active",
 	"aria-disabled"
 ], An = [
 	"aria-haspopup",
 	"aria-controls",
 	"aria-expanded",
+	"data-icon",
+	"data-show-icon",
 	"disabled"
 ], jn = { class: "db-control-panel-navigation-item-group-expand-button-end-slot-container" }, Mn = [
 	"data-initialized",
@@ -2351,7 +2351,7 @@ var S = () => {
 		u(() => {
 			h.value = !0;
 		}), d(() => {
-			U(), V(!1), C.value?.disconnect(), C.value = void 0, T.value?.disconnect(), T.value = void 0;
+			W(), V(!1), C.value?.disconnect(), C.value = void 0, T.value?.disconnect(), T.value = void 0;
 		}), b(() => [N.value, h.value], () => {
 			if (!h.value || !N.value || C.value) return;
 			let e = N.value.getAttribute("role") ?? void 0;
@@ -2410,7 +2410,7 @@ var S = () => {
 			if (!e || !e.hasAttribute("data-variant")) return;
 			let t = e.getAttribute("data-variant"), n = t === "popover";
 			if (t === "drilldown" && s.value) {
-				if (V(!0), P.value) {
+				if (V(!0), H(), P.value) {
 					let e = P.value.querySelector(".db-control-panel-navigation-item a");
 					e && e.focus();
 				}
@@ -2418,7 +2418,7 @@ var S = () => {
 			Yt({
 				element: P.value,
 				isPopover: n
-			}), f.value !== t && (f.value = t, n ? H() : U());
+			}), f.value !== t && (f.value = t, n ? U() : W());
 		}
 		function L() {
 			s.value = !0;
@@ -2455,9 +2455,18 @@ var S = () => {
 			}
 		}
 		function H() {
+			if (!N.value) return;
+			let e = [
+				"db-control-panel-desktop-scroll-container",
+				"db-control-panel-mobile-drawer-scroll-container",
+				"db-shell-sub-navigation"
+			], t = N.value;
+			for (; t && t !== document.body && (t.scrollTop > 0 && (t.scrollTop = 0), !e.some((e) => t.classList.contains(e)));) t = t.parentElement;
+		}
+		function U() {
 			if (O.value || !N.value) return;
 			A.value ||= new qt(N.value, P.value), D.value ||= new Nt().observe(F.value, (e) => {
-				e.isIntersecting || G();
+				e.isIntersecting || te();
 			});
 			let e = () => {
 				z();
@@ -2475,36 +2484,36 @@ var S = () => {
 				focusOut: r
 			}, N.value.addEventListener("mouseenter", e), N.value.addEventListener("mouseleave", t), N.value.addEventListener("focusin", n), N.value.addEventListener("focusout", r), O.value = !0;
 		}
-		function U() {
+		function W() {
 			if (!O.value || !N.value) return;
 			let e = N.value.__popoverListeners;
 			e && (N.value.removeEventListener("mouseenter", e.mouseEnter), N.value.removeEventListener("mouseleave", e.mouseLeave), N.value.removeEventListener("focusin", e.focusIn), N.value.removeEventListener("focusout", e.focusOut), N.value.__popoverListeners = void 0), s.value = !1, O.value = !1, A.value = void 0, D.value &&= (new Nt().unobserve(D.value), void 0);
 		}
-		function W() {
+		function ee() {
 			P.value && I();
 		}
-		function ee(e) {
-			e?.target?.nodeName === "A" && G();
+		function G(e) {
+			e?.target?.nodeName === "A" && te();
 		}
-		function G() {
+		function te() {
 			l.value = !0, k(() => {
 				l.value = !1;
 			}, 300);
 		}
-		function te(e) {
+		function ne(e) {
 			if (f.value !== "popover" && (s.value = !s.value), F.value && F.value.dataset.isCollapsing === "true") {
 				F.value.removeAttribute("data-is-collapsing"), e.stopPropagation();
 				return;
 			}
 			n.onClick && (e.stopPropagation(), n.onClick(e));
 		}
-		function ne(e) {
+		function K(e) {
 			e.stopPropagation(), s.value = !1, k(() => {
 				F.value && F.value.focus();
 			}, 1);
 		}
-		function K(e) {
-			(!e || e.key === "Escape") && (e?.stopPropagation(), s.value = !1, G(), k(() => {
+		function re(e) {
+			(!e || e.key === "Escape") && (e?.stopPropagation(), s.value = !1, te(), k(() => {
 				F.value && F.value.focus();
 			}, 1));
 		}
@@ -2516,10 +2525,8 @@ var S = () => {
 			onMouseover: u[3] ||= async (e) => A.value?.enableFollow(),
 			onMouseleave: u[4] ||= async (e) => A.value?.disableFollow(),
 			onMousemove: u[5] ||= async (e) => A.value?.followByMouseEvent(e),
-			onKeydown: u[6] ||= async (e) => K(e),
+			onKeydown: u[6] ||= async (e) => re(e),
 			class: c(v(w)("db-control-panel-navigation-item-group", n.class)),
-			"data-icon": e.icon,
-			"data-show-icon": v(j)(e.showIcon, "showIcon"),
 			"data-active": v(j)(e.active, "active"),
 			"aria-disabled": v(j)(e.disabled, "disabled")
 		}, [i("button", {
@@ -2530,8 +2537,10 @@ var S = () => {
 			"aria-haspopup": v(j)(f.value === "popover" || void 0),
 			"aria-controls": e.menuId ?? E.value,
 			"aria-expanded": v(j)(s.value),
+			"data-icon": e.icon,
+			"data-show-icon": v(j)(e.showIcon, "showIcon"),
 			disabled: v(M)(e.disabled, "disabled"),
-			onClick: u[0] ||= async (e) => te(e)
+			onClick: u[0] ||= async (e) => ne(e)
 		}, [a(_(e.text) + " ", 1), i("div", jn, [g(t.$slots, "end-slot")])], 8, An), i("menu", {
 			class: "db-control-panel-navigation-item-group-menu",
 			ref_key: "_menuRef",
@@ -2539,14 +2548,14 @@ var S = () => {
 			"data-initialized": v(j)(h.value),
 			"data-force-close": v(j)(l.value),
 			id: e.menuId ?? E.value,
-			onScroll: u[1] ||= async (e) => W(),
-			onClick: u[2] ||= async (e) => ee(e)
+			onScroll: u[1] ||= async (e) => ee(),
+			onClick: u[2] ||= async (e) => G(e)
 		}, [i("li", Nn, [o(Xe, {
 			icon: "arrow_left",
 			variant: "ghost",
 			id: e.backButtonId,
 			noText: !0,
-			onClick: (e) => ne(e)
+			onClick: (e) => K(e)
 		}, {
 			default: x(() => [a(_(e.backButtonText ?? v("Back")), 1), o(Ft, {
 				placement: "bottom-start",
@@ -4425,7 +4434,7 @@ var S = () => {
 			ref: a,
 			id: e.id ?? e.propOverrides?.id,
 			class: c(v(w)("db-footer-meta", t.class))
-		}, [i("div", si, [e.copyright ? (p(), r("p", ci, "©\xA0" + _(e.copyright), 1)) : n("", !0), i("div", li, [g(o.$slots, "default")])])], 10, oi));
+		}, [i("div", si, [e.copyright ? (p(), r("p", ci, _("©\xA0" + e.copyright), 1)) : n("", !0), i("div", li, [g(o.$slots, "default")])])], 10, oi));
 	}
 }), di = [
 	"id",
@@ -5607,7 +5616,11 @@ var S = () => {
 			immediate: !0,
 			flush: "post"
 		}), b(() => [t.open], () => {
-			t.open != null && (M(t.open, "open") ? x(void 0, !0) : S(void 0, !0));
+			if (t.open == null) return;
+			let e = M(t.open, "open");
+			k(() => {
+				e ? x(void 0, !0) : S(void 0, !0);
+			}, 1);
 		}, {
 			immediate: !0,
 			flush: "post"