@db-ux/v-core-components 5.6.0 → 5.6.3-icon-font-fallback01-130f6dc

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @db-ux/v-core-components
 
+## 5.6.2
+
+### Patch Changes
+
+- fix(DBInput): keep a partially typed date that the browser cannot parse - [see commit 4ab2aaa](https://github.com/db-ux-design-system/core-web/commit/4ab2aaa9cc652823f0b467d6d8048b6a48d36748)
+- fix(DBControlPanelNavigationItemGroup): correct drilldown and popover z-index layering - [see commit 1e855b9](https://github.com/db-ux-design-system/core-web/commit/1e855b9cc207d82458bb27033f642a79f480b7ee)
+- fix(DBShellSubNavigation): keep the left border above the drilldown navigation overlay - [see commit 8992130](https://github.com/db-ux-design-system/core-web/commit/89921307a2f5fe928302d3d9eab0cbc9f11b0c4a)
+
+## 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",
@@ -2813,7 +2822,7 @@ var S = () => {
 	"data-icon-trailing",
 	"data-hide-asterisk",
 	"data-show-icon-trailing"
-], Qn = ["for"], $n = /* @__PURE__ */ "aria-invalid.data-custom-validity.data-field-sizing.id.name.type.multiple.accept.placeholder.disabled.required.step.value.maxLength.minLength.max.min.readOnly.form.pattern.size.autoComplete.autoFocus.enterKeyHint.inputMode.list.aria-describedby.role".split("."), er = ["id"], tr = ["value"], nr = {
+], Qn = ["for"], $n = /* @__PURE__ */ "aria-invalid.data-custom-validity.data-field-sizing.id.name.type.multiple.accept.placeholder.disabled.required.step.maxLength.minLength.max.min.readOnly.form.pattern.size.autoComplete.autoFocus.enterKeyHint.inputMode.list.aria-describedby.role.value".split("."), er = ["id"], tr = ["value"], nr = {
 	"data-visually-hidden": "true",
 	role: "status"
 }, rr = /* @__PURE__ */ s({
@@ -2935,7 +2944,7 @@ var S = () => {
 	},
 	emits: ["update:value"],
 	setup(s, { emit: l }) {
-		let f = y(), S = l, C = s, E = m(void 0), A = m(void 0), I = m(void 0), z = m(void 0), B = m(void 0), V = m(void 0), H = m(void 0), U = m(""), W = m(""), ee = m(void 0), G = m(null);
+		let f = y(), S = l, C = s, E = m(void 0), A = m(void 0), I = m(void 0), z = m(void 0), B = m(void 0), V = m(void 0), H = m(void 0), U = m(void 0), W = m(""), ee = m(void 0), G = m(null);
 		u(() => {
 			ae(), B.value = C.invalidMessage || "TODO: Add an invalidMessage";
 		}), d(() => {
@@ -3032,7 +3041,6 @@ var S = () => {
 				disabled: v(M)(s.disabled, "disabled"),
 				required: v(M)(s.required, "required"),
 				step: v(P)(s.step),
-				value: s.value ?? U.value ?? "",
 				maxLength: v(N)(s.maxLength, s.maxlength),
 				minLength: v(N)(s.minLength, s.minlength),
 				max: v(F)(s.max, s.type),
@@ -3058,7 +3066,8 @@ var S = () => {
 					"week",
 					"month",
 					"color"
-				].includes(s.type ?? "") && v(O)() ? "textbox" : void 0
+				].includes(s.type ?? "") && v(O)() ? "textbox" : void 0,
+				value: s.value ?? U.value ?? ""
 			}, null, 40, $n),
 			s.dataList ? (p(), r("datalist", {
 				key: 0,
@@ -3754,29 +3763,14 @@ var S = () => {
 					let t = self.document.activeElement;
 					if (t) {
 						if (t.getAttribute("type") === "checkbox" || t.getAttribute("type") === "radio") {
-							let n = t?.closest("li");
+							let n = Array.from(X.value.querySelectorAll("input.db-custom-select-list-item-checkbox")), r = n.indexOf(t);
 							if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-								let e = n?.nextElementSibling;
-								for (; e;) {
-									let t = e.querySelector("input");
-									if (t) {
-										t.focus();
-										break;
-									}
-									e = e.nextElementSibling;
-								}
-								e || We(t);
+								let e = r >= 0 ? n.at(r + 1) : void 0;
+								e ? e.focus() : We(t);
 							} else {
-								let e = n?.previousElementSibling;
-								for (; e;) {
-									let t = e.querySelector("input");
-									if (t) {
-										t.focus();
-										break;
-									}
-									e = e.previousElementSibling;
-								}
-								if (!e) {
+								let e = r > 0 ? n.at(r - 1) : void 0;
+								if (e) e.focus();
+								else {
 									let e = X.value.querySelector("input[type=\"checkbox\"]");
 									if (e && e !== t) We(t);
 									else {
@@ -4259,7 +4253,9 @@ var S = () => {
 	setup(e) {
 		let t = y(), n = e, s = m(void 0), l = m(void 0), f = m(null);
 		u(() => {
-			h();
+			requestAnimationFrame(() => {
+				h();
+			});
 		}), d(() => {
 			b();
 		});
@@ -4425,7 +4421,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 +5603,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"
@@ -5870,10 +5870,10 @@ var S = () => {
 	"id",
 	"name",
 	"size",
-	"value",
 	"autocomplete",
 	"multiple",
-	"aria-describedby"
+	"aria-describedby",
+	"value"
 ], La = ["data-show-empty-option"], Ra = ["label"], za = [
 	"value",
 	"selected",
@@ -6067,7 +6067,6 @@ var S = () => {
 				id: T.value,
 				name: s.name,
 				size: s.size,
-				value: s.value ?? I.value ?? "",
 				autocomplete: s.autoComplete ?? s.autocomplete,
 				multiple: s.multiple,
 				onInput: u[0] ||= async (e) => G(e),
@@ -6075,7 +6074,8 @@ var S = () => {
 				onChange: u[2] ||= async (e) => te(e),
 				onBlur: u[3] ||= async (e) => ne(e),
 				onFocus: u[4] ||= async (e) => K(e),
-				"aria-describedby": s.ariaDescribedBy ?? F.value
+				"aria-describedby": s.ariaDescribedBy ?? F.value,
+				value: s.value ?? I.value ?? ""
 			}, [s.variant === "floating" || s.placeholder ? (p(), r("option", {
 				key: 0,
 				class: "placeholder",
@@ -7766,11 +7766,11 @@ var S = () => {
 	"wrap",
 	"spellcheck",
 	"autocomplete",
-	"value",
 	"aria-describedby",
 	"placeholder",
 	"rows",
-	"cols"
+	"cols",
+	"value"
 ], ts = {
 	"data-visually-hidden": "true",
 	role: "status"
@@ -7963,11 +7963,11 @@ var S = () => {
 				onChange: l[1] ||= async (e) => V(e),
 				onBlur: l[2] ||= async (e) => H(e),
 				onFocus: l[3] ||= async (e) => U(e),
-				value: e.value ?? A.value ?? "",
 				"aria-describedby": e.ariaDescribedBy ?? O.value,
 				placeholder: e.placeholder ?? v(" "),
 				rows: v(N)(e.rows, v(4)),
-				cols: v(N)(e.cols)
+				cols: v(N)(e.cols),
+				value: e.value ?? A.value ?? ""
 			}, _(e.value), 41, es),
 			v(R)(e.message, e.showMessage) ? (p(), t(Q, {
 				key: 0,