@ui0/flex 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# @ui0/flex
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Vue flex container with rows, columns, wrapping, spacing, sizing, alignment, and optional ui0 theme styling.
+
+```vue
+<script setup lang="ts">
+  import { Flex } from '@ui0/flex'
+</script>
+
+<template>
+  <Flex
+    items="center"
+    content="space-between"
+    :gap="16"
+  >
+    <strong>Project</strong>
+    <button type="button">Save</button>
+  </Flex>
+</template>
+```
+
+The main entry imports component CSS automatically. Basic layout works without installing core or theme.
+Use a direct named/default component import; there is no Flex plugin. Global registration, when needed,
+uses Vue's `app.component('Flex', Flex)`.
+
+## Documentation
+
+- [English guide and live examples](../docs/en/flex/index.md)
+- [Русское руководство и живые примеры](../docs/flex/index.md)
+
+Run the documentation site with `pnpm --filter @ui0/docs docs:dev`.
+
+## Development
+
+```sh
+pnpm --filter @ui0/flex flex:test
+pnpm --filter @ui0/flex flex:typecheck
+pnpm --filter @ui0/flex flex:build
+pnpm --filter @ui0/flex exec playwright install chromium
+pnpm --filter @ui0/flex flex:test:browser
+```
+
+Browser checks consume the built package, including its automatic CSS import. Build first.
+`disabled` is visual/ARIA state; it does not disable interactive descendants.

package/dist/components/flex/flex.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: Readonly<import("@ui0/core").ComponentConfig<"flex">>;
+export default _default;
+//# sourceMappingURL=flex.config.d.ts.map

package/dist/components/flex/flex.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.config.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.config.ts"],"names":[],"mappings":";AAEA,wBAaE"}

package/dist/components/flex/flex.grid.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** Shares a parent's horizontal gap with twelve-column children. */
+export declare const flexGridGapKey: InjectionKey<ComputedRef<string>>;
+/** Extracts the column gap without splitting whitespace inside CSS functions. */
+export declare function columnGap(value: unknown): string;
+/** Accounts for eleven gutters in a twelve-column row. Explicit basis has priority. */
+export declare function gridStyles(cols: unknown, offset: unknown, parentGap: string): {
+    flexBasis: string | undefined;
+    marginInlineStart: string | undefined;
+};
+//# sourceMappingURL=flex.grid.d.ts.map

package/dist/components/flex/flex.grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.grid.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAIpD,oEAAoE;AACpE,eAAO,MAAM,cAAc,EAAE,YAAY,CAAC,WAAW,CAAC,MAAM,CAAC,CAA+B,CAAA;AAE5F,iFAAiF;AACjF,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,UAgBvC;AAQD,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;EAQ3E"}

package/dist/components/flex/flex.keys.d.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue';
+import type { FlexActions } from './flex.types';
+export type { FlexActions } from './flex.types';
+export declare const FlexKey: InjectionKey<FlexActions>;
+//# sourceMappingURL=flex.keys.d.ts.map

package/dist/components/flex/flex.keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.keys.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.keys.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,eAAO,MAAM,OAAO,EAAwB,YAAY,CAAC,WAAW,CAAC,CAAA"}

package/dist/components/flex/flex.layout.d.ts

@@ -0,0 +1,19 @@
+import type { StyleList } from '@ui0/types';
+import type { FlexProps } from './flex.types';
+/** Resolves a finite numeric prop without dropping a valid zero. */
+export declare function finiteNumber(value: unknown): number | undefined;
+/** Normalizes unitless dimensions to px while preserving CSS expressions. */
+export declare function cssLength(value: unknown): string | undefined;
+/** Normalizes gap scalars and row/column pairs; invalid pairs are omitted. */
+export declare function cssGap(value: unknown): string | undefined;
+/** Exact glyphs: whitespace is semantic and must never be tokenized or trimmed. */
+export declare const itemGlyphs: Readonly<Record<string, string>>;
+/** Self-alignment additionally supports anchored start/end glyphs. */
+export declare const selfGlyphs: Readonly<Record<string, string>>;
+/** Distribution glyphs resolve independently of the item's cross-axis glyphs. */
+export declare const contentGlyphs: Readonly<Record<string, string>>;
+/** Preserves CSS keywords and resolves only complete known glyphs. */
+export declare function alignment(value: unknown, glyphs: Readonly<Record<string, string>>): string | undefined;
+/** Produces layout declarations independently of theme availability. */
+export declare function flexLayout(props: FlexProps): StyleList;
+//# sourceMappingURL=flex.layout.d.ts.map

package/dist/components/flex/flex.layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.layout.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,sBAK1C;AAED,6EAA6E;AAC7E,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,sBAWvC;AAED,8EAA8E;AAC9E,wBAAgB,MAAM,CAAC,KAAK,EAAE,OAAO,sBAWpC;AAED,mFAAmF;AACnF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMvD,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMvD,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAO1D,CAAA;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,sBAIjF;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAoBtD"}

package/dist/components/flex/flex.types.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Flex component contract.
+ */
+import type { BackdropProps, ColorProps, DisabledProps, ElevationProps, FillProps, RoundProps } from '@ui0/theme';
+import type { BooleanDoubleUnits, BooleanOrUnits, CSS, MaybeBooleanDoubleUnits, MaybeBooleanNumberish, MaybeUnits, Numberish } from '@ui0/types';
+/**
+ * Alignment glyphs: a three-cell rail, read in the flex direction's
+ * cross-axis (left-to-right or top-to-bottom). A dash marks an occupied
+ * cell; SPACES ARE SIGNIFICANT and part of the value. The whole prop value
+ * is ONE glyph - never tokenized or trimmed (see the flex behavior task for
+ * the glyph -> class mapping).
+ *
+ *   '-- '  packed at the rail's head (start)
+ *   ' --'  packed at the rail's tail (end)
+ *   ' - '  centered on the rail
+ *   '---'  stretched across all cells
+ *   '-'    baseline alignment
+ *
+ * Distribution glyphs for content: '- -' = space-between, '- - ' =
+ * space-around, ' - -' = space-evenly. Anchored self glyphs '-  '/'- --'
+ * resolve to self-start; '  -'/'-- -' resolve to self-end.
+ */
+export type FlexAlignItems = '---' | '-- ' | ' --' | ' - ' | '-';
+/** the rail read top-to-bottom: '-  ' head, ' - ' middle, '  -' tail */
+export type FlexVerticalSide = ' - ' | '  -' | '-  ';
+/** justify-content glyphs: the packed trio plus the distribution family */
+export type FlexJustifyContent = '-- ' | ' --' | ' - ' | '- - ' | ' - -' | '- -';
+/** align-self: every items glyph plus the anchored two-cluster forms */
+export type FlexAlignSelf = FlexAlignItems | '-  ' | '- --' | '-- -' | '  -';
+/** justify-self accepts the same glyph set as align-self (CSS parity) */
+export type FlexJustifySelf = FlexAlignSelf;
+export interface Flexible {
+}
+export interface FlexProps extends Flexible, BackdropProps, ColorProps, FillProps, RoundProps, ElevationProps, DisabledProps {
+    /** align-self (css value or alignment glyph) */
+    align?: CSS.Property.AlignSelf | FlexAlignSelf;
+    /** Initial main-axis size; unitless numeric strings become px. */
+    basis?: CSS.Property.FlexBasis;
+    /** Uses a column; takes priority if row is also true. */
+    column?: boolean | undefined;
+    /** justify-content (css value or alignment glyph) */
+    content?: CSS.Property.JustifyContent | FlexJustifyContent;
+    /** Scalar or row/column gap pair; numbers become px, true reads --0-flex-gap, false uses zero. */
+    gap?: MaybeBooleanDoubleUnits;
+    /** Nonnegative growth factor; true is 1, false is 0, numeric strings are accepted. */
+    grow?: MaybeBooleanNumberish;
+    /** container height */
+    height?: MaybeUnits;
+    /** align-items (css value or alignment glyph) */
+    items?: CSS.Property.AlignItems | FlexAlignItems;
+    /** justify-self (css value or alignment glyph) */
+    justify?: CSS.Property.JustifySelf | FlexJustifySelf;
+    /** Skips 0–12 tracks within a parent Flex row using its gap prop. */
+    offset?: Numberish;
+    /** Integer visual order; does not change DOM or keyboard focus order. */
+    order?: Numberish;
+    /** shortcut for flex-direction: row */
+    row?: boolean | undefined;
+    /** Reverses the main axis without changing the wrapping direction. */
+    reverse?: boolean | undefined;
+    /** flex shrink */
+    shrink?: Numberish;
+    /** flex wrap */
+    wrap?: boolean | undefined;
+    /** container width */
+    width?: MaybeUnits;
+    /** Spans 1–12 tracks in a parent Flex row; explicit basis takes priority. */
+    cols?: Numberish;
+    /** Fills both parent dimensions; explicit width/height take priority. */
+    fluid?: boolean;
+}
+/** Legacy defaults registry shape, not implicit runtime defaults of the component. */
+export interface FlexDefaults extends FlexProps {
+    blur: BooleanOrUnits;
+    gap: BooleanDoubleUnits;
+    shrink: number | undefined;
+    order: number | undefined;
+    content: string | undefined;
+    grow: BooleanOrUnits;
+}
+export interface FlexSlots {
+    default: () => void;
+}
+export interface FlexActions {
+}
+declare global {
+    interface Ui0ComponentsProps {
+        flex: FlexProps;
+    }
+    interface Ui0ComponentsDefaults {
+        flex: FlexDefaults;
+    }
+    interface Ui0Components {
+        flex: {
+            props: FlexProps;
+        };
+    }
+}
+//# sourceMappingURL=flex.types.d.ts.map

package/dist/components/flex/flex.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.types.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.types.ts"],"names":[],"mappings":"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"}

package/dist/components/flex/flex.util.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentUtil } from '@ui0/types';
+import type { FlexProps } from './flex.types';
+export declare const FlexPropsKeys: ReadonlyArray<keyof FlexProps>;
+export declare const FlexUtil: ComponentUtil<FlexProps>;
+//# sourceMappingURL=flex.util.d.ts.map

package/dist/components/flex/flex.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.util.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.util.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,MAAM,SAAS,CAiBxD,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,SAAS,CAG7C,CAAA"}

package/dist/components/flex/flex.vue.d.ts

@@ -0,0 +1,12 @@
+import type { FlexProps, FlexSlots } from './flex.types';
+type __VLS_Slots = FlexSlots;
+declare const __VLS_base: import("vue").DefineComponent<FlexProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlexProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=flex.vue.d.ts.map

package/dist/components/flex/flex.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.vue.d.ts","sourceRoot":"","sources":["../../../src/components/flex/flex.vue"],"names":[],"mappings":"AAsGE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AASxD,KAAK,WAAW,GAAG,SAAS,CAAC;AA6E/B,QAAA,MAAM,UAAU,8RAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/flex/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Flex } from './flex.vue';
+export { FlexKey } from './flex.keys';
+export type { FlexProps, FlexSlots, FlexActions, FlexDefaults } from './flex.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/flex/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA"}

package/dist/flex.module.css

@@ -0,0 +1,7 @@
+@value flex: fl_222f;
+@value disabled: di_17eb;
+@value elevated: el_dcd5;
+@value row: ro_6347;
+@value column: co_881d;
+@value grow: gr_adca;
+@value panel: pa_320e;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import './style.css';
+export { Flex } from './components/flex';
+export { Flex as default } from './components/flex';
+export type { FlexProps } from './components/flex/flex.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAGxC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACnD,YAAY,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA"}

package/dist/index.js

@@ -0,0 +1,179 @@
+import "./style.css";
+import { computed as e, createElementBlock as t, defineComponent as n, inject as r, normalizeClass as i, normalizeStyle as a, openBlock as o, provide as s, renderSlot as c, unref as l, useCssModule as u } from "vue";
+import { defineComponentConfig as d, useComponentDefaults as f } from "@ui0/core";
+import { useTheme as p, useThemeContext as m } from "@ui0/theme";
+// src/components/flex/flex.config.ts
+var h = d("flex", {
+	fill: "",
+	color: "",
+	gap: !1,
+	blur: !1,
+	shrink: void 0,
+	order: void 0,
+	grow: !1,
+	content: void 0,
+	round: "inherit",
+	options: { debug: !1 }
+});
+// src/components/flex/flex.layout.ts
+function g(e) {
+	if (typeof e != "number" && typeof e != "string" || typeof e == "string" && !e.trim()) return;
+	let t = Number(e);
+	return Number.isFinite(t) ? t : void 0;
+}
+function _(e) {
+	let t = g(e);
+	if (t !== void 0) return `${t}px`;
+	if (typeof e == "string" && e.trim() && !(/^[+-]?(?:infinity|nan)$/i.test(e.trim()) || !Number.isNaN(Number(e)) && !Number.isFinite(Number(e)))) return e;
+}
+function v(e) {
+	if (e === !0) return "var(--0-flex-gap, 0.5em)";
+	if (e === !1) return "0px";
+	let t = Array.isArray(e) ? e : [e];
+	if (t.length < 1 || t.length > 2) return;
+	let n = t.map((e) => {
+		let t = g(e);
+		if (!(t !== void 0 && t < 0)) return _(e);
+	});
+	return n.every((e) => e !== void 0) ? n.join(" ") : void 0;
+}
+var y = {
+	"-- ": "flex-start",
+	" --": "flex-end",
+	" - ": "center",
+	"---": "stretch",
+	"-": "baseline"
+}, b = {
+	...y,
+	"-  ": "self-start",
+	"  -": "self-end",
+	"- --": "self-start",
+	"-- -": "self-end"
+}, x = {
+	"-- ": "flex-start",
+	" --": "flex-end",
+	" - ": "center",
+	"- - ": "space-around",
+	" - -": "space-evenly",
+	"- -": "space-between"
+};
+function S(e, t) {
+	if (typeof e == "string") return Object.hasOwn(t, e) ? t[e] : e.trim() && !/^[\s-]+$/.test(e) ? e : void 0;
+}
+function C(e) {
+	let t = e.column ? "column" : "row", n = typeof e.grow == "boolean" ? Number(e.grow) : g(e.grow), r = g(e.shrink), i = g(e.order);
+	return {
+		flexDirection: e.reverse ? `${t}-reverse` : t,
+		flexWrap: e.wrap === void 0 ? void 0 : e.wrap ? "wrap" : "nowrap",
+		gap: v(e.gap),
+		flexGrow: n !== void 0 && n >= 0 ? n : void 0,
+		flexShrink: r !== void 0 && r >= 0 ? r : void 0,
+		flexBasis: _(e.basis),
+		order: i !== void 0 && Number.isInteger(i) ? i : void 0,
+		width: _(e.width) ?? (e.fluid ? "100%" : void 0),
+		height: _(e.height) ?? (e.fluid ? "100%" : void 0),
+		alignItems: S(e.items, y),
+		alignSelf: S(e.align, b),
+		justifyContent: S(e.content, x),
+		justifySelf: S(e.justify, b)
+	};
+}
+// src/components/flex/flex.grid.ts
+var w = Symbol("ui0-flex-grid-gap");
+function T(e) {
+	let t = v(e);
+	if (!t) return "0px";
+	let n = [], r = 0, i = "";
+	for (let e of t) e === "(" && r++, e === ")" && r--, /\s/.test(e) && r === 0 ? (i && n.push(i), i = "") : i += e;
+	return i && n.push(i), n[1] ?? n[0] ?? "0px";
+}
+function E(e, t) {
+	let n = g(e);
+	return n !== void 0 && Number.isInteger(n) && n >= t && n <= 12 ? n : void 0;
+}
+function D(e, t, n) {
+	let r = E(e, 1), i = E(t, 0);
+	return {
+		flexBasis: r === void 0 ? void 0 : `calc((100% - 11 * ${n}) / 12 * ${r} + ${r - 1} * ${n})`,
+		marginInlineStart: i === void 0 ? void 0 : `calc((100% + ${n}) / 12 * ${i})`
+	};
+}
+// src/components/flex/flex.vue?vue&type=script&setup=true&lang.ts
+var O = ["aria-disabled"], k = /*#__PURE__*/ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ n({
+	__name: "flex",
+	props: {
+		align: {},
+		basis: {},
+		column: { type: Boolean },
+		content: {},
+		gap: { type: [
+			Boolean,
+			Number,
+			String,
+			Array
+		] },
+		grow: { type: [
+			Boolean,
+			Number,
+			String
+		] },
+		height: {},
+		items: {},
+		justify: {},
+		offset: {},
+		order: {},
+		row: { type: Boolean },
+		reverse: { type: Boolean },
+		shrink: {},
+		wrap: { type: Boolean },
+		width: {},
+		cols: {},
+		fluid: { type: Boolean },
+		backdrop: {},
+		color: {},
+		fill: {},
+		round: {},
+		roundTarget: {},
+		elevation: {},
+		disabled: { type: Boolean }
+	},
+	setup(n) {
+		let d = n, g = f("flex", d, h), _ = u(), v = r(w, e(() => "0px"));
+		s(w, e(() => T(g.gap)));
+		let [, y] = p() ? m(d) : [], b = e(() => [
+			_.flex,
+			g.column ? _.column : _.row,
+			g.grow === !0 && _.grow,
+			g.disabled && _.disabled,
+			Number(g.elevation) !== 0 && g.elevation !== void 0 && _.elevated,
+			...y?.classes() ?? []
+		]), x = e(() => {
+			let e = C(g), t = D(g.cols, g.offset, v.value);
+			return {
+				...y?.styles(),
+				...e,
+				...t,
+				flexBasis: e.flexBasis ?? t.flexBasis
+			};
+		});
+		return (e, n) => (o(), t("div", {
+			"data-0": "flex",
+			class: i(b.value),
+			style: a(x.value),
+			"aria-disabled": l(g).disabled ? "true" : void 0
+		}, [c(e.$slots, "default")], 14, O));
+	}
+}), [["__cssModules", { $style: {
+	flex: "fl_222f",
+	disabled: "di_17eb",
+	elevated: "el_dcd5",
+	row: "ro_6347",
+	column: "co_881d",
+	grow: "gr_adca",
+	panel: "pa_320e"
+} }]]);
+export { k as Flex, k as default };

package/dist/style.css

@@ -0,0 +1,2 @@
+@layer ui0.flex{.fl_222f{box-sizing:border-box;--0-c-src:initial;--0-c-src-l:initial;--0-c-src-d:initial;--0-c-src-hover:initial;--0-c-src-active:initial;--0-c-src-focus:initial;--0-c-src-l-hover:initial;--0-c-src-l-active:initial;--0-c-src-l-focus:initial;--0-c-src-d-hover:initial;--0-c-src-d-active:initial;--0-c-src-d-focus:initial;--0-c-o:var(--0-c-src,var(--0-c-src-l,1));--0-c-cur:rgb(var(--0-c-cur-v) / var(--0-c-o));display:flex}.theme_dark .fl_222f{--0-c-o:var(--0-c-src-d,var(--0-c-src,1))}.fl_222f:hover{--0-c-o:var(--0-c-src-hover,var(--0-c-src,var(--0-c-src-l,1)))}.fl_222f:active{--0-c-o:var(--0-c-src-active,var(--0-c-src,var(--0-c-src-l,1)))}.fl_222f:focus{--0-c-o:var(--0-c-src-focus,var(--0-c-src,var(--0-c-src-l,1)))}.theme_dark .fl_222f:hover{--0-c-o:var(--0-c-src-d-hover,var(--0-c-src-hover,var(--0-c-src-d,var(--0-c-src,1))))}.theme_dark .fl_222f:active{--0-c-o:var(--0-c-src-d-active,var(--0-c-src-active,var(--0-c-src-d,var(--0-c-src,1))))}.theme_dark .fl_222f:focus{--0-c-o:var(--0-c-src-d-focus,var(--0-c-src-focus,var(--0-c-src-d,var(--0-c-src,1))))}.fl_222f{--0-f-src:initial;--0-f-src-l:initial;--0-f-src-d:initial;--0-f-src-hover:initial;--0-f-src-active:initial;--0-f-src-focus:initial;--0-f-src-l-hover:initial;--0-f-src-l-active:initial;--0-f-src-l-focus:initial;--0-f-src-d-hover:initial;--0-f-src-d-active:initial;--0-f-src-d-focus:initial;--0-f-o:var(--0-f-src,var(--0-f-src-l,1));--0-f-cur:rgb(var(--0-f-cur-v) / var(--0-f-o))}.theme_dark .fl_222f{--0-f-o:var(--0-f-src-d,var(--0-f-src,1))}.fl_222f:hover{--0-f-o:var(--0-f-src-hover,var(--0-f-src,var(--0-f-src-l,1)))}.fl_222f:active{--0-f-o:var(--0-f-src-active,var(--0-f-src,var(--0-f-src-l,1)))}.fl_222f:focus{--0-f-o:var(--0-f-src-focus,var(--0-f-src,var(--0-f-src-l,1)))}.theme_dark .fl_222f:hover{--0-f-o:var(--0-f-src-d-hover,var(--0-f-src-hover,var(--0-f-src-d,var(--0-f-src,1))))}.theme_dark .fl_222f:active{--0-f-o:var(--0-f-src-d-active,var(--0-f-src-active,var(--0-f-src-d,var(--0-f-src,1))))}.theme_dark .fl_222f:focus{--0-f-o:var(--0-f-src-d-focus,var(--0-f-src-focus,var(--0-f-src-d,var(--0-f-src,1))))}.fl_222f{--0-g-cur:initial;color:var(--0-c-cur);background-color:var(--0-f-cur);background-image:var(--0-g-cur);--0c-r-full:var(--0-r-full,calc(calc(var(--0-s-cur,42px) * var(--0-s-density,1)) / 2));--0c-r-smooth:var(--0-r-smooth,calc(calc(var(--0-s-cur,42px) * var(--0-s-density,1)) / 4));--0c-r-basic:var(--0-r-basic,calc(calc(var(--0-s-cur,42px) * var(--0-s-density,1)) / 8));--0c-r-hard:var(--0-r-hard,calc(calc(var(--0-s-cur,42px) * var(--0-s-density,1)) / 14));--0c-r-none:var(--0-r-none,0px);border-start-start-radius:var(--0-r-tl,0px);border-start-end-radius:var(--0-r-tr,0px);border-end-end-radius:var(--0-r-br,0px);border-end-start-radius:var(--0-r-bl,0px)}.di_17eb{opacity:var(--0-dis-o,.5)}.el_dcd5{box-shadow:0 0 0 1px #ffffff1a, var(--0-elv-i, ) 0px 1px 1px rgba(var(--0-elv-c,0 0 0)/.1), var(--0-elv-i, ) var(--0-elv-x1,0px) var(--0-elv-y1,0px) rgba(var(--0-elv-c,0 0 0)/.095), var(--0-elv-i, ) var(--0-elv-x2,0px) var(--0-elv-y2,0px) rgba(var(--0-elv-c,0 0 0)/.13)}.ro_6347{flex-direction:row}.co_881d{flex-direction:column}.gr_adca{flex-grow:1}.pa_320e{box-sizing:border-box}}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@ui0/flex",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Vue flex layouts with optional ui0 theme styling",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./style": "./dist/style.css",
+    "./classes": "./dist/flex.module.css",
+    "./flex.module.css": "./dist/flex.module.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "flex:build": "vite build && vue-tsc --emitDeclarationOnly -p tsconfig.build.json",
+    "flex:dev": "vite build --watch",
+    "flex:typecheck": "vue-tsc --noEmit",
+    "flex:test": "vitest run --config vitest.config.ts",
+    "flex:test:browser": "node tests/browser/run.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@ui0/vite": "0.1.1",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "playwright": "1.61.1",
+    "sass-embedded": "^1.80.0",
+    "vue": "^3.5.45"
+  },
+  "peerDependencies": {
+    "@ui0/composable": "0.1.1",
+    "@ui0/core": "0.1.1",
+    "@ui0/theme": "0.1.1",
+    "@ui0/types": "0.1.1",
+    "@ui0/util": "0.0.2",
+    "vue": "^3.5.45"
+  }
+}