@pgcorp/ui-kit 0.12.0 → 0.13.0

package/dist/src/composables/useDialogOverlay.js

@@ -24,6 +24,8 @@ function o(o) {
 		}), c.value = { zIndex: u.zIndex }, l.value = { zIndex: `calc(${u.zIndex} + var(--s-layer-overlay-surface-offset))` };
 	}, m = (e = !0) => {
 		u?.unregister({ restoreFocus: e }), u = null, c.value = {}, l.value = {};
+	}, h = () => {
+		d += 1, m(!1);
 	};
 	return a(o.open, async (e, t) => {
 		d += 1;
@@ -37,12 +39,13 @@ function o(o) {
 		}
 		m(!!t);
 	}, { immediate: !0 }), r(() => {
-		d += 1, m(!1);
+		h();
 	}), {
 		panelRef: s,
 		setPanelElement: f,
 		backdropStyle: c,
-		surfaceStyle: l
+		surfaceStyle: l,
+		dispose: h
 	};
 }
 //#endregion

package/dist/src/internal/textLengthConstraints.d.ts

@@ -0,0 +1,9 @@
+export interface TextLengthConstraints {
+    minLength?: number;
+    maxLength?: number;
+}
+/**
+ * Проверяет общий native text-length contract без coercion и усечения model.
+ * Validates the shared native text-length contract without coercing or truncating the model.
+ */
+export declare function resolveTextLengthConstraints(owner: string, minLength: unknown, maxLength: unknown): TextLengthConstraints;

package/dist/src/internal/textLengthConstraints.js

@@ -0,0 +1,18 @@
+import { validateBoundedInteger as e } from "./runtimeContract.js";
+//#region src/internal/textLengthConstraints.ts
+function t(t, n, r) {
+	let i = n === void 0 ? void 0 : e(t, "minLength", n, {
+		minimum: 0,
+		maximum: 2 ** 53 - 1
+	}), a = r === void 0 ? void 0 : e(t, "maxLength", r, {
+		minimum: 0,
+		maximum: 2 ** 53 - 1
+	});
+	if (i !== void 0 && a !== void 0 && i > a) throw RangeError(`${t}: minLength (${i}) не может превышать maxLength (${a}). / ${t}: minLength (${i}) must not exceed maxLength (${a}).`);
+	return {
+		minLength: i,
+		maxLength: a
+	};
+}
+//#endregion
+export { t as resolveTextLengthConstraints };

package/dist/src/internal/useMenuLayer.d.ts

@@ -3,7 +3,7 @@ export type MenuAnchor = {
     type: 'element';
     element: HTMLElement;
     align: 'left' | 'right';
-    placement?: 'bottom' | 'inline';
+    placement?: 'bottom' | 'top' | 'inline';
 } | {
     type: 'point';
     x: number;
@@ -13,6 +13,7 @@ export type MenuCloseReason = 'escape' | 'outside' | 'programmatic' | 'selection
 /** Управляет общей lifecycle/focus границей menu поверх canonical floating geometry. / Owns menu lifecycle and focus over canonical floating geometry. */
 export declare function useMenuLayer(layerRef: Ref<HTMLElement | null>, options?: {
     onDismiss?: (reason: 'escape' | 'outside') => void;
+    onRequestDismiss?: (reason: 'escape' | 'outside') => void;
 }): {
     isOpen: Ref<boolean, boolean>;
     position: Ref<import('../composables/useFloatingPosition').FloatingCoordinates, import('../composables/useFloatingPosition').FloatingCoordinates>;

package/dist/src/internal/useMenuLayer.js

@@ -23,17 +23,24 @@ function l(l, u = {}) {
 		(d.value || h) && (d.value = !1, h?.unregister({ restoreFocus: e !== "outside" }), h = null, p = null, m = null, f.value = "var(--s-layer-root-floating)");
 	}
 	function _(e) {
+		if (u.onRequestDismiss) {
+			u.onRequestDismiss(e);
+			return;
+		}
+		g(e), u.onDismiss?.(e);
+	}
+	function v(e) {
 		let n = m;
 		if (!n) {
 			g("outside");
 			return;
 		}
 		let r = h?.focusScope() ?? document, a = t(n, r, l.value, e.shiftKey);
-		e.preventDefault(), g("outside"), a && i(() => a.focus());
+		e.preventDefault(), _("outside"), a && i(() => a.focus());
 	}
-	let { coordinates: v, updatePosition: y } = r({
+	let { coordinates: y, updatePosition: b } = r({
 		active: d,
-		placement: () => p?.type === "element" && p.placement === "inline" ? p.align === "right" ? "left-start" : "right-start" : p?.type === "element" && p.align === "right" ? "bottom-end" : "bottom-start",
+		placement: () => p?.type === "element" && p.placement === "inline" ? p.align === "right" ? "left-start" : "right-start" : p?.type === "element" && p.placement === "top" ? p.align === "right" ? "top-end" : "top-start" : p?.type === "element" && p.align === "right" ? "bottom-end" : "bottom-start",
 		anchorElement: () => p?.type === "element" ? p.element : null,
 		anchorRect: () => p ? p.type === "point" ? c(p.x, p.y) : p.element.isConnected ? p.element.getBoundingClientRect() : (g("outside"), null) : null,
 		panelRef: l,
@@ -45,7 +52,7 @@ function l(l, u = {}) {
 		zIndex: () => f.value,
 		scrollStrategy: "reposition"
 	});
-	async function b(t, r) {
+	async function x(t, r) {
 		if (d.value && g("outside"), t.type === "element" && e(t.element) !== t.element) throw Error("useMenuLayer: element anchor must be the canonical focusable owner");
 		p = t;
 		let a = e(r ?? null) ?? e(document.activeElement);
@@ -55,26 +62,25 @@ function l(l, u = {}) {
 			anchor: () => t.type === "element" ? t.element : a,
 			restoreTarget: a,
 			requestDismiss: (e) => {
-				let t = e === "escape" ? "escape" : "outside";
-				g(t), u.onDismiss?.(t);
+				_(e === "escape" ? "escape" : "outside");
 			}
 		}), f.value = h.zIndex, await i(), d.value) {
 			if (!l.value) throw g("outside"), Error("useMenuLayer: layer element is unavailable after opening");
-			y();
+			b();
 		}
 	}
-	function x(e, t) {
-		d.value ? g("trigger") : b(e, t);
+	function S(e, t) {
+		d.value ? g("trigger") : x(e, t);
 	}
 	return a(() => g("outside")), {
 		isOpen: d,
-		position: v,
+		position: y,
 		zIndex: f,
-		open: b,
+		open: x,
 		close: g,
-		closeForTab: _,
-		toggle: x,
-		positionLayer: y
+		closeForTab: v,
+		toggle: S,
+		positionLayer: b
 	};
 }
 //#endregion

package/docs/public-api.md

@@ -62,12 +62,18 @@ callbacks и trust flags не входят в API.
 `sm/md/lg = 32/36/40 px` и label typography `12/14/14 px`; тот же
 `density="compact"` у `SInputText` даёт совместимую геометрию поля без
 consumer CSS.
-`SInputText.minLength` и `SInputText.maxLength` передают строгие
+`SInputText.minLength`/`maxLength` и `STextarea.minLength`/`maxLength` передают строгие
 неотрицательные safe integers нативному textual input; `minLength <= maxLength`
 проверяется до рендера, а numeric/temporal families отвергают этот контракт.
 `SModal.headingLevel` и `SDrawer.headingLevel` принимают только `1 | 2 | 3 | 4 |
 5 | 6`, используют `2` по умолчанию и сохраняют связь видимого заголовка с
 dialog surface через `aria-labelledby`.
+`SModal.size="4xl"` задаёт responsive maximum `56rem`; при ошибке дочернего
+mount modal освобождает body lock, layer registration и owned teleport nodes.
+`SDropdownMenu` публикует controlled `open`, `defaultOpen`, размещение
+`auto | bottom | top`, `closeOnSelect`, semantic group entries и доступные
+описания пунктов. `SCollapsiblePanel` связывает compact/dense density с
+32-пиксельной disclosure geometry через публичный API `SButton`.
 `shared/data-display/SScrollViewport.vue` владеет accessible scroll region,
 разрешёнными осями, semantic block size, root-only keyboard navigation и
 ResizeObserver lifecycle. `shared/data-display/scrollViewport` экспортирует
@@ -138,12 +144,18 @@ and trust flags are not part of the API.
 `sm/md/lg = 32/36/40 px` with `12/14/14 px` label typography. The matching
 `SInputText.density="compact"` exposes the same field geometry without consumer
 CSS.
-`SInputText.minLength` and `SInputText.maxLength` pass strict non-negative safe
+`SInputText.minLength`/`maxLength` and `STextarea.minLength`/`maxLength` pass strict non-negative safe
 integers to the native textual input. `minLength <= maxLength` is validated
 before rendering, and numeric/temporal families reject this contract.
 `SModal.headingLevel` and `SDrawer.headingLevel` accept `1 | 2 | 3 | 4 | 5 | 6`
 only, default to `2`, and preserve the visible-title relationship with the
 dialog surface through `aria-labelledby`.
+`SModal.size="4xl"` provides a responsive `56rem` maximum; a failed child mount
+releases body lock, layer registration, and owned teleport nodes.
+`SDropdownMenu` exposes controlled `open`, `defaultOpen`,
+`auto | bottom | top` placement, `closeOnSelect`, semantic group entries, and
+accessible item descriptions. `SCollapsiblePanel` maps compact/dense density to
+the 32px disclosure geometry through the public `SButton` API.
 `shared/data-display/SScrollViewport.vue` owns the accessible scroll region,
 enabled axes, semantic block size, root-only keyboard navigation, and
 ResizeObserver lifecycle. `shared/data-display/scrollViewport` exports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./dist/index.d.ts",

package/src/components/shared/_internal/SDialogSurface.css

@@ -56,6 +56,10 @@
   max-width: 48rem;
 }
 
+.s-dialog-surface[data-presentation='modal'][data-size='4xl'] {
+  max-width: 56rem;
+}
+
 .s-dialog-surface[data-presentation='modal'][data-size='wide'] {
   max-width: 72rem;
 }

package/src/components/shared/_internal/SMenuItem.css

@@ -80,13 +80,34 @@
   background: currentColor;
 }
 
-.s-menu-item__label {
+.s-menu-item__text {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.s-menu-item__label,
+.s-menu-item__description {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.s-menu-item__description {
+  color: var(--s-menu-item-secondary-foreground);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.s-menu-item:hover:not([aria-disabled='true']) .s-menu-item__description,
+.s-menu-item:focus-visible .s-menu-item__description,
+.s-menu-item[data-current='true'] .s-menu-item__description {
+  color: var(--s-menu-item-state-foreground);
+}
+
 .s-menu-item__meta {
   @apply ml-auto inline-flex shrink-0 items-center;
   gap: var(--s-space-control-gap);

package/src/components/shared/controls/SMenuSurface.css

@@ -18,3 +18,23 @@
 .s-menu-surface[data-orientation='horizontal'] {
   @apply flex max-w-full gap-1 overflow-x-auto;
 }
+
+.s-menu-group {
+  min-width: 0;
+}
+
+.s-menu-group + .s-menu-group {
+  margin-top: var(--s-space-control-gap);
+  padding-top: var(--s-space-control-gap);
+  border-top: 1px solid var(--s-floating-outline);
+}
+
+.s-menu-group__label {
+  padding: 0.25rem var(--s-menu-item-inline-padding);
+  color: var(--s-menu-item-secondary-foreground);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}

package/dist/assets/src/components/shared/_internal/SMenuItem.css_vue_type_style_index_0_src_e5bd192e_scoped_e5bd192e_lang.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-e5bd192e],[data-v-e5bd192e]:before,[data-v-e5bd192e]:after,[data-v-e5bd192e]::backdrop{--tw-font-weight:initial;--tw-leading:initial}}}.s-menu-item[data-v-e5bd192e]{text-align:left;--tw-font-weight:var(--font-weight-medium,500);width:100%;min-width:0;font-weight:var(--font-weight-medium,500);min-height:var(--s-density-row-default);align-items:center;gap:var(--s-space-control-gap);padding:var(--s-menu-item-block-padding) var(--s-menu-item-inline-padding);border-radius:var(--radius-xs);color:var(--s-menu-item-foreground);appearance:none;cursor:pointer;transition:background-color var(--s-motion-fast) ease, color var(--s-motion-fast) ease;background:0 0;border:0;font-family:inherit;font-size:.875rem;line-height:1.25rem;display:flex}.s-menu-item[data-density=compact][data-v-e5bd192e]{min-height:var(--s-density-row-compact);padding:var(--s-menu-item-block-padding-compact) var(--s-menu-item-inline-padding-compact);font-size:.75rem;line-height:1rem}.s-menu-item[data-v-e5bd192e]:hover:not([aria-disabled=true]),.s-menu-item[data-v-e5bd192e]:focus-visible,.s-menu-item[data-current=true][data-v-e5bd192e]{background:var(--s-menu-item-state-background);color:var(--s-menu-item-state-foreground)}.s-menu-item[data-v-e5bd192e]:focus-visible{outline:var(--s-focus-ring-width) solid var(--s-focus-ring-color);outline-offset:var(--s-focus-ring-inset-offset)}.s-menu-item[aria-disabled=true][data-v-e5bd192e]{color:var(--s-menu-item-disabled-foreground);cursor:not-allowed;opacity:.62}.s-menu-item__main[data-v-e5bd192e]{align-items:center;gap:var(--s-space-control-gap);min-width:0;display:flex}.s-menu-item__state[data-v-e5bd192e]{flex:0 0 var(--s-icon-size-xs);justify-content:center;align-items:center;display:inline-flex}.s-menu-item__state[data-v-e5bd192e]:empty{display:none}.s-menu-item__icon[data-v-e5bd192e],.s-menu-item__state-icon[data-v-e5bd192e],.s-menu-item__submenu-icon[data-v-e5bd192e]{width:var(--s-icon-size-xs);height:var(--s-icon-size-xs);flex:none}.s-menu-item__state-icon[data-v-e5bd192e],.s-menu-item__radio-dot[data-v-e5bd192e]{color:var(--s-menu-item-indicator-foreground)}.s-menu-item__radio-dot[data-v-e5bd192e]{width:calc(var(--s-icon-size-xs) / 2);height:calc(var(--s-icon-size-xs) / 2);border-radius:var(--s-radius-pill);background:currentColor}.s-menu-item__label[data-v-e5bd192e]{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.s-menu-item__meta[data-v-e5bd192e]{align-items:center;gap:var(--s-space-control-gap);flex-shrink:0;margin-left:auto;display:inline-flex}.s-menu-item__badge[data-v-e5bd192e]{display:inline-flex}.s-menu-item__shortcut[data-v-e5bd192e]{text-align:right;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-leading:calc(var(--spacing,.25rem) * 4);line-height:calc(var(--spacing,.25rem) * 4);white-space:nowrap;color:var(--s-menu-item-secondary-foreground)}.s-menu-item:hover:not([aria-disabled=true]) .s-menu-item__shortcut[data-v-e5bd192e],.s-menu-item:focus-visible .s-menu-item__shortcut[data-v-e5bd192e],.s-menu-item[data-current=true] .s-menu-item__shortcut[data-v-e5bd192e]{color:var(--s-menu-item-state-foreground)}.s-menu-item[data-layout=tile][data-v-e5bd192e]{min-width:5rem}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}

package/dist/assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_bc7c7be4_scoped_bc7c7be4_lang.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.s-menu-surface[data-v-bc7c7be4]{border-radius:var(--radius-xl,1.5rem);padding:calc(var(--spacing,.25rem) * 1.5);margin:0}.s-menu-surface[data-v-bc7c7be4]:focus{--tw-outline-style:none;outline-style:none}.s-menu-surface[data-v-bc7c7be4]{background:var(--s-floating-surface);color:var(--s-floating-foreground);box-shadow:0 0 0 1px var(--s-floating-outline), var(--s-elevation-floating);width:var(--s-menu-surface-width);min-width:var(--s-menu-surface-min-width);max-width:var(--s-menu-surface-max-width)}.s-menu-surface[data-density=compact][data-v-bc7c7be4]{min-width:calc(var(--spacing,.25rem) * 40);border-radius:var(--radius-md,.75rem);padding:var(--spacing,.25rem)}.s-menu-surface[data-orientation=horizontal][data-v-bc7c7be4]{gap:var(--spacing,.25rem);max-width:100%;display:flex;overflow-x:auto}