@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -0,0 +1,29 @@
+import { DeepReadonly, Ref } from 'vue';
+import { ThemeMode, ThemePreference } from '../theme';
+/**
+ * Текущее декларативное состояние темы документа.
+ * Current declarative document-theme state.
+ */
+export interface RuntimeThemeState {
+    /** Точное значение `data-theme`; `null` только при отсутствии явной темы. / Exact `data-theme`; `null` only when no explicit theme is applied. */
+    readonly dataTheme: ThemePreference | null;
+    /** Нормализованный режим для runtime adapter. / Normalized mode for a runtime adapter. */
+    readonly mode: ThemeMode;
+}
+type RuntimeThemeListener = (state: RuntimeThemeState) => void;
+/**
+ * Читает theme contract документа без подписки и DOM-мутаций.
+ * Reads the document theme contract without subscribing or mutating DOM.
+ */
+export declare function readRuntimeTheme(targetDocument?: Document): RuntimeThemeState;
+/**
+ * Подписывает runtime-интеграцию на единый per-document theme owner.
+ * Subscribes a runtime integration to the single per-document theme owner.
+ */
+export declare function subscribeRuntimeTheme(listener: RuntimeThemeListener, targetDocument?: Document): () => void;
+/**
+ * Vue lifecycle adapter для единого runtime theme owner.
+ * Vue lifecycle adapter for the canonical runtime theme owner.
+ */
+export declare function useRuntimeTheme(): DeepReadonly<Ref<RuntimeThemeState>>;
+export {};

package/dist/src/internal/runtimeTheme.js

@@ -0,0 +1,71 @@
+import { isThemePreference as e, themeVariants as t } from "../theme.js";
+import { onBeforeUnmount as n, onMounted as r, readonly as i, ref as a } from "vue";
+//#region src/internal/runtimeTheme.ts
+var o = /* @__PURE__ */ new WeakMap(), s = new Map(t.map((e) => [e.dataTheme, e])), c = (e, t) => e.dataTheme === t.dataTheme && e.mode === t.mode;
+function l(t) {
+	if (t === void 0) return {
+		dataTheme: null,
+		mode: "light"
+	};
+	let n = t.documentElement, r = n.getAttribute("data-theme");
+	if (r === null) {
+		if (n.classList.contains("dark")) throw Error("UI-kit runtime theme: class=\"dark\" требует canonical data-theme.");
+		return {
+			dataTheme: null,
+			mode: "light"
+		};
+	}
+	let i = r;
+	if (!e(i)) throw TypeError(`UI-kit runtime theme: неизвестный data-theme "${r}".`);
+	let a = s.get(i);
+	if (a === void 0) throw Error(`UI-kit runtime theme: data-theme="${i}" отсутствует в canonical theme registry.`);
+	let o = a.mode, c = n.classList.contains("dark");
+	if (o === "dark" && !c) throw Error(`UI-kit runtime theme: data-theme="${i}" требует class="dark".`);
+	if (o === "light" && c) throw Error(`UI-kit runtime theme: data-theme="${i}" конфликтует с class="dark".`);
+	return {
+		dataTheme: i,
+		mode: o
+	};
+}
+var u = (e) => {
+	let t = l(e.document);
+	if (!c(e.state, t)) {
+		e.state = t;
+		for (let n of e.listeners) n(t);
+	}
+}, d = (e) => ({
+	document: e,
+	listeners: /* @__PURE__ */ new Set(),
+	observer: null,
+	state: l(e)
+}), f = (e) => {
+	e.observer || typeof MutationObserver > "u" || (e.observer = new MutationObserver(() => u(e)), e.observer.observe(e.document.documentElement, {
+		attributes: !0,
+		attributeFilter: ["class", "data-theme"]
+	}));
+}, p = (e) => {
+	e.observer !== null && e.observer.disconnect(), e.observer = null, o.delete(e.document);
+};
+function m(e, t) {
+	if (t === void 0) return e(l()), () => void 0;
+	let n = o.get(t);
+	n === void 0 && (n = d(t), o.set(t, n));
+	let r = n;
+	r.listeners.add(e), e(r.state), f(r);
+	let i = !0;
+	return () => {
+		i && (i = !1, r.listeners.delete(e), r.listeners.size === 0 && p(r));
+	};
+}
+function h() {
+	let e = typeof document > "u" ? void 0 : document, t = a(l(e)), o = null;
+	return r(() => {
+		o = m((e) => {
+			t.value = e;
+		}, e);
+	}), n(() => {
+		o !== null && o(), o = null;
+	}), i(t);
+}
+//#endregion
+export { l as readRuntimeTheme, m as subscribeRuntimeTheme, h as useRuntimeTheme };

package/{src/internal/semanticSizing.ts → dist/src/internal/semanticSizing.d.ts}

@@ -1,73 +1,32 @@
-import { validateExactString } from './runtimeContract'
-
-const SCROLLABLE_VIEWPORT_MAX_BLOCK_SIZES = ['none', 'sm', 'md', 'lg'] as const
-const SCROLL_VIEWPORT_BLOCK_SIZES = ['sm', 'md', 'lg', 'fill'] as const
-const EXPANDED_CONTENT_MAX_BLOCK_SIZES = ['sm', 'md', 'lg'] as const
-const TABLE_COLUMN_INLINE_SIZES = ['auto', 'content', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', 'fill'] as const
-const TABLE_COLUMN_MIN_INLINE_SIZES = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const
-
+declare const SCROLLABLE_VIEWPORT_MAX_BLOCK_SIZES: readonly ["none", "sm", "md", "lg"];
+declare const SCROLL_VIEWPORT_BLOCK_SIZES: readonly ["sm", "md", "lg", "fill"];
+declare const EXPANDED_CONTENT_MAX_BLOCK_SIZES: readonly ["sm", "md", "lg"];
+declare const TABLE_COLUMN_INLINE_SIZES: readonly ["auto", "content", "2xs", "xs", "sm", "md", "lg", "xl", "fill"];
+declare const TABLE_COLUMN_MIN_INLINE_SIZES: readonly ["2xs", "xs", "sm", "md", "lg", "xl"];
 /**
  * Максимальный block-size прокручиваемого viewport; none сохраняет естественный flow.
  * Maximum block size for a scroll viewport; none preserves natural flow.
  */
-export type ScrollableViewportMaxBlockSize = typeof SCROLLABLE_VIEWPORT_MAX_BLOCK_SIZES[number]
-
+export type ScrollableViewportMaxBlockSize = typeof SCROLLABLE_VIEWPORT_MAX_BLOCK_SIZES[number];
 /** Фиксированная semantic block-size рабочей scroll-области. / Fixed semantic block size of a scroll workspace. */
-export type ScrollViewportBlockSize = typeof SCROLL_VIEWPORT_BLOCK_SIZES[number]
-
+export type ScrollViewportBlockSize = typeof SCROLL_VIEWPORT_BLOCK_SIZES[number];
 /**
  * Максимальный block-size раскрытого текстового content region.
  * Maximum block size for an expanded textual content region.
  */
-export type ExpandedContentMaxBlockSize = typeof EXPANDED_CONTENT_MAX_BLOCK_SIZES[number]
-
+export type ExpandedContentMaxBlockSize = typeof EXPANDED_CONTENT_MAX_BLOCK_SIZES[number];
 /** Семантическая ширина столбца таблицы. / Semantic table-column inline size. */
-export type TableColumnInlineSize = typeof TABLE_COLUMN_INLINE_SIZES[number]
-
+export type TableColumnInlineSize = typeof TABLE_COLUMN_INLINE_SIZES[number];
 /** Семантическая минимальная ширина столбца таблицы. / Semantic table-column minimum inline size. */
-export type TableColumnMinInlineSize = typeof TABLE_COLUMN_MIN_INLINE_SIZES[number]
-
+export type TableColumnMinInlineSize = typeof TABLE_COLUMN_MIN_INLINE_SIZES[number];
 /** Проверяет semantic scroll viewport size без CSS-length escape. / Validates a semantic scroll viewport size without a CSS-length escape. */
-export function validateScrollableViewportMaxBlockSize(
-  owner: string,
-  coordinate: string,
-  value: unknown,
-): ScrollableViewportMaxBlockSize {
-  return validateExactString(owner, coordinate, value, SCROLLABLE_VIEWPORT_MAX_BLOCK_SIZES)
-}
-
+export declare function validateScrollableViewportMaxBlockSize(owner: string, coordinate: string, value: unknown): ScrollableViewportMaxBlockSize;
 /** Проверяет semantic scroll-workspace size без raw CSS-length. / Validates a semantic scroll-workspace size without a raw CSS length. */
-export function validateScrollViewportBlockSize(
-  owner: string,
-  coordinate: string,
-  value: unknown,
-): ScrollViewportBlockSize {
-  return validateExactString(owner, coordinate, value, SCROLL_VIEWPORT_BLOCK_SIZES)
-}
-
+export declare function validateScrollViewportBlockSize(owner: string, coordinate: string, value: unknown): ScrollViewportBlockSize;
 /** Проверяет semantic expanded-content size без CSS-length escape. / Validates a semantic expanded-content size without a CSS-length escape. */
-export function validateExpandedContentMaxBlockSize(
-  owner: string,
-  coordinate: string,
-  value: unknown,
-): ExpandedContentMaxBlockSize {
-  return validateExactString(owner, coordinate, value, EXPANDED_CONTENT_MAX_BLOCK_SIZES)
-}
-
+export declare function validateExpandedContentMaxBlockSize(owner: string, coordinate: string, value: unknown): ExpandedContentMaxBlockSize;
 /** Проверяет semantic column width без CSS-length escape. / Validates semantic column width without a CSS-length escape. */
-export function validateTableColumnInlineSize(
-  owner: string,
-  coordinate: string,
-  value: unknown,
-): TableColumnInlineSize {
-  return validateExactString(owner, coordinate, value, TABLE_COLUMN_INLINE_SIZES)
-}
-
+export declare function validateTableColumnInlineSize(owner: string, coordinate: string, value: unknown): TableColumnInlineSize;
 /** Проверяет semantic minimum column width без CSS-length escape. / Validates semantic minimum column width without a CSS-length escape. */
-export function validateTableColumnMinInlineSize(
-  owner: string,
-  coordinate: string,
-  value: unknown,
-): TableColumnMinInlineSize {
-  return validateExactString(owner, coordinate, value, TABLE_COLUMN_MIN_INLINE_SIZES)
-}
+export declare function validateTableColumnMinInlineSize(owner: string, coordinate: string, value: unknown): TableColumnMinInlineSize;
+export {};

package/dist/src/internal/semanticSizing.js

@@ -0,0 +1,51 @@
+import { validateExactString as e } from "./runtimeContract.js";
+//#region src/internal/semanticSizing.ts
+var t = [
+	"none",
+	"sm",
+	"md",
+	"lg"
+], n = [
+	"sm",
+	"md",
+	"lg",
+	"fill"
+], r = [
+	"sm",
+	"md",
+	"lg"
+], i = [
+	"auto",
+	"content",
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"fill"
+], a = [
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+function o(n, r, i) {
+	return e(n, r, i, t);
+}
+function s(t, r, i) {
+	return e(t, r, i, n);
+}
+function c(t, n, i) {
+	return e(t, n, i, r);
+}
+function l(t, n, r) {
+	return e(t, n, r, i);
+}
+function u(t, n, r) {
+	return e(t, n, r, a);
+}
+//#endregion
+export { c as validateExpandedContentMaxBlockSize, s as validateScrollViewportBlockSize, o as validateScrollableViewportMaxBlockSize, l as validateTableColumnInlineSize, u as validateTableColumnMinInlineSize };

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

@@ -0,0 +1,10 @@
+/** Единственный internal DOM marker для component-owned visual tone. */
+export declare const SEMANTIC_TONE_ATTRIBUTE: "data-s-tone";
+export type SemanticToneBinding<Tone extends string> = Readonly<{
+    'data-s-tone': Tone;
+}>;
+/**
+ * Проверяет component-specific tone vocabulary и создаёт единый namespaced DOM binding.
+ * Validates a component-specific tone vocabulary and creates the canonical namespaced DOM binding.
+ */
+export declare function resolveSemanticToneBinding<const Tones extends readonly string[]>(owner: string, coordinate: string, value: unknown, tones: Tones): SemanticToneBinding<Tones[number]>;

package/dist/src/internal/semanticTone.js

@@ -0,0 +1,8 @@
+import { validateExactString as e } from "./runtimeContract.js";
+//#region src/internal/semanticTone.ts
+var t = "data-s-tone";
+function n(n, r, i, a) {
+	return { [t]: e(n, r, i, a) };
+}
+//#endregion
+export { t as SEMANTIC_TONE_ATTRIBUTE, n as resolveSemanticToneBinding };

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

@@ -0,0 +1,26 @@
+import { ComponentPublicInstance } from 'vue';
+export type BinaryInputOwner = 'SCheckbox' | 'SSwitch';
+export interface BinaryInputModelContract {
+    readonly modelValue: boolean;
+    readonly readonly: boolean;
+    readonly id?: string;
+}
+export interface BinaryInputOptions {
+    readonly owner: BinaryInputOwner;
+    readonly inputName: 'checkbox' | 'switch';
+    readonly props: BinaryInputModelContract;
+    readonly indeterminate?: () => boolean;
+    readonly emitUpdate: (value: boolean) => void;
+    readonly emitClick: (event: MouseEvent) => void;
+}
+/**
+ * Единый runtime owner controlled binary input: identity, value, readonly и native events.
+ * Canonical runtime owner for controlled binary input identity, value, readonly, and native events.
+ */
+export declare function useBinaryInput(options: BinaryInputOptions): {
+    readonly checkedValue: import('vue').ComputedRef<boolean>;
+    readonly inputId: import('vue').ComputedRef<string>;
+    readonly onChange: (event: Event) => void;
+    readonly onClick: (event: MouseEvent) => void;
+    readonly setInputElement: (element: Element | ComponentPublicInstance | null) => void;
+};

package/dist/src/internal/useBinaryInput.js

@@ -0,0 +1,34 @@
+import { resolveOptionalDomId as e } from "./runtimeContract.js";
+import { computed as t, onMounted as n, ref as r, useId as i, watch as a } from "vue";
+//#region src/internal/useBinaryInput.ts
+function o(o) {
+	let s = i(), c = t(() => e(o.owner, "id", o.props.id, `s-${o.inputName}-${s}`)), l = r(null), u = t(() => {
+		if (typeof o.props.modelValue != "boolean") throw TypeError(`${o.owner}: modelValue must be boolean`);
+		return o.props.modelValue;
+	}), d = () => {
+		l.value && (l.value.indeterminate = (o.indeterminate?.() ?? !1) && !u.value);
+	};
+	return n(d), a([o.indeterminate ?? (() => !1), u], d), {
+		checkedValue: u,
+		inputId: c,
+		onChange: (e) => {
+			if (o.props.readonly) return;
+			let t = e.currentTarget;
+			if (!(t instanceof HTMLInputElement)) throw TypeError(`${o.owner}: change event owner must be the native ${o.inputName} input`);
+			o.emitUpdate(t.checked);
+		},
+		onClick: (e) => {
+			if (o.props.readonly) {
+				e.preventDefault();
+				return;
+			}
+			o.emitClick(e);
+		},
+		setInputElement: (e) => {
+			if (e !== null && !(e instanceof HTMLInputElement)) throw TypeError(`${o.owner}: template ref owner must be the native ${o.inputName} input`);
+			l.value = e, d();
+		}
+	};
+}
+//#endregion
+export { o as useBinaryInput };

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

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+export type MenuAnchor = {
+    type: 'element';
+    element: HTMLElement;
+    align: 'left' | 'right';
+    placement?: 'bottom' | 'inline';
+} | {
+    type: 'point';
+    x: number;
+    y: number;
+};
+export type MenuCloseReason = 'escape' | 'outside' | 'programmatic' | 'selection' | 'trigger';
+/** Управляет общей 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;
+}): {
+    isOpen: Ref<boolean, boolean>;
+    position: Ref<import('../composables/useFloatingPosition').FloatingCoordinates, import('../composables/useFloatingPosition').FloatingCoordinates>;
+    zIndex: Ref<string, string>;
+    open: (nextAnchor: MenuAnchor, focusTarget?: HTMLElement | null) => Promise<void>;
+    close: (reason?: MenuCloseReason) => void;
+    closeForTab: (event: KeyboardEvent) => void;
+    toggle: (nextAnchor: MenuAnchor, focusTarget?: HTMLElement | null) => void;
+    positionLayer: () => void;
+};

package/dist/src/internal/useMenuLayer.js

@@ -0,0 +1,81 @@
+import { findFocusableOwner as e, findRelativeTabTarget as t } from "./focusNavigation.js";
+import { registerLayer as n } from "./layerStack.js";
+import { useFloatingPosition as r } from "../composables/useFloatingPosition.js";
+import { nextTick as i, onBeforeUnmount as a, ref as o } from "vue";
+//#region src/internal/useMenuLayer.ts
+var s = 5, c = (e, t) => ({
+	x: e,
+	y: t,
+	left: e,
+	right: e,
+	top: t,
+	bottom: t,
+	width: 0,
+	height: 0,
+	toJSON: () => ({
+		x: e,
+		y: t
+	})
+});
+function l(l, u = {}) {
+	let d = o(!1), f = o("var(--s-layer-root-floating)"), p = null, m = null, h = null;
+	function g(e = "programmatic") {
+		(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) {
+		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());
+	}
+	let { coordinates: v, updatePosition: y } = 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",
+		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,
+		offset: () => 0,
+		boundaryPadding: () => s,
+		flip: () => !0,
+		shift: () => !0,
+		widthMatch: () => "none",
+		zIndex: () => f.value,
+		scrollStrategy: "reposition"
+	});
+	async function b(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);
+		if (m = t.type === "element" ? t.element : a, d.value = !0, h = n({
+			kind: "menu",
+			root: () => l.value,
+			anchor: () => t.type === "element" ? t.element : a,
+			restoreTarget: a,
+			requestDismiss: (e) => {
+				let t = e === "escape" ? "escape" : "outside";
+				g(t), u.onDismiss?.(t);
+			}
+		}), f.value = h.zIndex, await i(), d.value) {
+			if (!l.value) throw g("outside"), Error("useMenuLayer: layer element is unavailable after opening");
+			y();
+		}
+	}
+	function x(e, t) {
+		d.value ? g("trigger") : b(e, t);
+	}
+	return a(() => g("outside")), {
+		isOpen: d,
+		position: v,
+		zIndex: f,
+		open: b,
+		close: g,
+		closeForTab: _,
+		toggle: x,
+		positionLayer: y
+	};
+}
+//#endregion
+export { l as useMenuLayer };