@cfasim-ui/components 0.7.8 → 0.8.0

package/dist/SelectBox/SelectBox.d.ts

@@ -10,12 +10,14 @@ interface Props extends FieldProps {
     autocomplete?: boolean;
 }
 type __VLS_Props = Props;
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     modelValue?: string;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/{SelectBox-CByXZfaC.js → SelectBox-Df8dE2r-.js}

@@ -1,7 +1,7 @@
 import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useModel as y, withCtx as b, withModifiers as x } from "vue";
 import { ComboboxAnchor as ee, ComboboxContent as te, ComboboxEmpty as ne, ComboboxInput as re, ComboboxItem as ie, ComboboxItemIndicator as ae, ComboboxPortal as oe, ComboboxRoot as se, ComboboxTrigger as ce, ComboboxViewport as le, Primitive as S, SelectContent as C, SelectItem as w, SelectItemIndicator as T, SelectItemText as E, SelectPortal as D, SelectRoot as O, SelectTrigger as k, SelectValue as A, SelectViewport as j, TooltipArrow as M, TooltipContent as N, TooltipPortal as P, TooltipProvider as F, TooltipRoot as I, TooltipTrigger as L, useId as R } from "reka-ui";
 //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
-var z = ["role"], B = /* @__PURE__ */ c({
+var z = ["role"], B = /*@__PURE__*/ c({
 	__name: "Box",
 	props: {
 		variant: {},
@@ -23,7 +23,7 @@ var z = ["role"], B = /* @__PURE__ */ c({
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, H = /* @__PURE__ */ V(B, [["__scopeId", "data-v-d7342c02"]]), U = /* @__PURE__ */ V(/* @__PURE__ */ c({
+}, H = /*#__PURE__*/ V(B, [["__scopeId", "data-v-d7342c02"]]), U = /*#__PURE__*/ V(/* @__PURE__ */ c({
 	__name: "Button",
 	props: {
 		label: {},
@@ -71,7 +71,7 @@ function pe(e) {
 	q.has(e) || (q.add(e), console.warn(`[cfasim-ui] Icon "${e}" is not registered — nothing will render.\nRegister it once at startup:\n\n${fe(e)}\n\nRequires dev deps "@material-symbols/svg-400" + "vite-svg-loader".\nDocs: https://cdcgov.github.io/cfa-simulator/docs/cfasim-ui/components/icon#registering-icons`));
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@material-symbols+svg-400@0.44.10/node_modules/@material-symbols/svg-400/outlined/help.svg?component
+//#region ../../node_modules/.pnpm/@material-symbols+svg-400@0.45.8/node_modules/@material-symbols/svg-400/outlined/help.svg?component
 var me = {
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 -960 960 960"
@@ -348,7 +348,7 @@ var Vt = [
 			role: e.decorative ? void 0 : "img"
 		}, [c.value ? (p(), n(g(c.value), { key: 0 })) : r("", !0)], 12, Vt));
 	}
-}), Z = /* @__PURE__ */ V(/* @__PURE__ */ c({
+}), Z = /*#__PURE__*/ V(/* @__PURE__ */ c({
 	__name: "Hint",
 	props: { text: {} },
 	setup(e) {
@@ -430,9 +430,9 @@ var Ut = { class: "select-box" }, Wt = {
 }, Gt = {
 	class: "select-icon",
 	"aria-hidden": "true"
-}, Kt = /* @__PURE__ */ V(/* @__PURE__ */ c({
+}, Kt = /*#__PURE__*/ V(/* @__PURE__ */ c({
 	__name: "SelectBox",
-	props: /* @__PURE__ */ l({
+	props: /*@__PURE__*/ l({
 		options: {},
 		placeholder: {},
 		autocomplete: { type: Boolean },

package/dist/SidebarLayout/SidebarLayout.d.ts

@@ -7,30 +7,31 @@ type __VLS_Props = {
     hideTopbar?: boolean;
     tabs?: Tab[];
 };
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     "tab"?: string;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        sidebar?(_: {}): any;
-        topbar?(_: {}): any;
-        topbar?(_: {}): any;
-        default?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:tab": (value: string) => any;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {}, __VLS_43: {}, __VLS_50: {}, __VLS_57: {}, __VLS_64: {};
+type __VLS_Slots = {} & {
+    sidebar?: (props: typeof __VLS_6) => any;
+} & {
+    topbar?: (props: typeof __VLS_43) => any;
+} & {
+    default?: (props: typeof __VLS_50) => any;
+} & {
+    topbar?: (props: typeof __VLS_57) => any;
+} & {
+    default?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:tab": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:tab"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+    "onUpdate:tab"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/Spinner/Spinner.d.ts

@@ -3,7 +3,8 @@ type __VLS_Props = {
     size?: SpinnerSize;
     label?: string;
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: SpinnerSize;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/TextInput/TextInput.d.ts

@@ -3,12 +3,14 @@ interface Props extends FieldProps {
     placeholder?: string;
 }
 type __VLS_Props = Props;
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     modelValue?: string;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/Toggle/Toggle.d.ts

@@ -3,12 +3,14 @@ type __VLS_Props = {
     hint?: string;
     disabled?: boolean;
 };
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     modelValue?: boolean;
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/ToggleGroup/ToggleGroup.d.ts

@@ -11,14 +11,16 @@ interface Props extends FieldProps {
     orientation?: "horizontal" | "vertical";
 }
 type __VLS_Props = Props;
-type __VLS_PublicProps = {
+type __VLS_ModelProps = {
     modelValue?: string | string[];
-} & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[]) => any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/_internal/FieldLabel.d.ts

@@ -6,5 +6,6 @@ type __VLS_Props = {
     /** `for` attribute, for fields whose control is a real labelable element. */
     htmlFor?: string;
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.js

@@ -1,8 +1,8 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./SelectBox-CByXZfaC.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./SelectBox-Df8dE2r-.js";
 import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineAsyncComponent as v, defineComponent as y, getCurrentInstance as ee, mergeModels as b, mergeProps as x, nextTick as te, normalizeClass as S, normalizeStyle as C, onMounted as ne, onUnmounted as w, openBlock as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as re, toDisplayString as k, unref as A, useModel as j, vModelText as M, watch as N, withCtx as P, withDirectives as F, withKeys as I } from "vue";
 import { CollapsibleContent as L, CollapsibleRoot as ie, CollapsibleTrigger as R, ComboboxAnchor as z, ComboboxContent as B, ComboboxEmpty as ae, ComboboxInput as oe, ComboboxItem as V, ComboboxItemIndicator as H, ComboboxPortal as se, ComboboxRoot as U, ComboboxTrigger as W, ComboboxViewport as G, SliderRange as ce, SliderRoot as le, SliderThumb as ue, SliderTrack as de, SwitchRoot as K, SwitchThumb as q, TabsIndicator as fe, TabsList as pe, TabsRoot as me, TabsTrigger as J, ToggleGroupItem as he, ToggleGroupRoot as ge, useId as Y } from "reka-ui";
 //#region \0rolldown/runtime.js
-var X = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), Z = ["data-orientation", "aria-label"], _e = /* @__PURE__ */ l(/* @__PURE__ */ y({
+var X = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), Z = ["data-orientation", "aria-label"], _e = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "ButtonGroup",
 	props: {
 		ariaLabel: {},
@@ -27,7 +27,7 @@ function ve(e, t = "medium") {
 }
 //#endregion
 //#region src/Container/Container.vue
-var ye = /* @__PURE__ */ l(/* @__PURE__ */ y({
+var ye = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "Container",
 	props: {
 		border: { type: Boolean },
@@ -52,9 +52,9 @@ var ye = /* @__PURE__ */ l(/* @__PURE__ */ y({
 			})
 		}, [O(t.$slots, "default", {}, void 0, !0)], 6));
 	}
-}), [["__scopeId", "data-v-bff01edb"]]), be = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}), [["__scopeId", "data-v-bff01edb"]]), be = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "Expander",
-	props: /* @__PURE__ */ b({ label: {} }, {
+	props: /*@__PURE__*/ b({ label: {} }, {
 		open: {
 			type: Boolean,
 			default: !1
@@ -107,7 +107,7 @@ function Ee(e) {
 }
 //#endregion
 //#region src/Grid/Grid.vue
-var De = /* @__PURE__ */ l(/* @__PURE__ */ y({
+var De = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "Grid",
 	props: {
 		cols: {},
@@ -134,7 +134,7 @@ var De = /* @__PURE__ */ l(/* @__PURE__ */ y({
 			})
 		}, [O(e.$slots, "default", {}, void 0, !0)], 4)], 8, xe));
 	}
-}), [["__scopeId", "data-v-7ae87f0f"]]), Oe = ["aria-label"], ke = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}), [["__scopeId", "data-v-7ae87f0f"]]), Oe = ["aria-label"], ke = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "LightDarkToggle",
 	setup(t) {
 		let n = E(window.matchMedia("(prefers-color-scheme: dark)").matches);
@@ -157,9 +157,9 @@ var De = /* @__PURE__ */ l(/* @__PURE__ */ y({
 }, Me = { class: "multi-select-chip-label" }, Ne = ["aria-label", "onClick"], Pe = {
 	class: "multi-select-icon",
 	"aria-hidden": "true"
-}, Fe = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}, Fe = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "MultiSelect",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		options: {},
 		placeholder: {},
 		label: {},
@@ -400,7 +400,7 @@ var Ie = (/* @__PURE__ */ X(((e) => {
 			};
 		}));
 	})();
-})))(), Le = new Set([
+})))(), Le = /* @__PURE__ */ new Set([
 	"plain",
 	"localized",
 	"percent",
@@ -485,9 +485,9 @@ var Ue = {
 }, qe = {
 	key: 3,
 	class: "slider-container"
-}, Je = { class: "slider-current" }, Ye = { class: "slider-labels" }, Xe = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}, Je = { class: "slider-current" }, Ye = { class: "slider-labels" }, Xe = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "NumberInput",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		placeholder: {},
 		step: {},
 		min: {},
@@ -772,7 +772,7 @@ var Ue = {
 	emits: ["apply"],
 	setup(e) {
 		let t = v({
-			loader: () => import("./ParamEditorImpl-D0xZTyAN.js"),
+			loader: () => import("./ParamEditorImpl-CkElC6PI.js"),
 			loadingComponent: Qe,
 			delay: 100
 		});
@@ -791,9 +791,9 @@ var Ue = {
 			"filename"
 		]));
 	}
-}), et = ["data-collapsed"], tt = { class: "SidebarRail" }, nt = ["inert"], rt = { class: "SidebarScroll" }, it = { class: "SidebarHeader" }, at = ["inert"], ot = { class: "Main" }, st = { class: "TabsBar" }, ct = { class: "TabsBarEnd" }, lt = { class: "MainScroll" }, ut = { class: "MainContent" }, dt = { class: "Topbar" }, ft = { class: "TopbarEnd" }, pt = { class: "MainScroll" }, mt = { class: "MainContent" }, ht = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}), et = ["data-collapsed"], tt = { class: "SidebarRail" }, nt = ["inert"], rt = { class: "SidebarScroll" }, it = { class: "SidebarHeader" }, at = ["inert"], ot = { class: "Main" }, st = { class: "TabsBar" }, ct = { class: "TabsBarEnd" }, lt = { class: "MainScroll" }, ut = { class: "MainContent" }, dt = { class: "Topbar" }, ft = { class: "TopbarEnd" }, pt = { class: "MainScroll" }, mt = { class: "MainContent" }, ht = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "SidebarLayout",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		hideTopbar: { type: Boolean },
 		tabs: {}
 	}, {
@@ -912,7 +912,7 @@ var Ue = {
 	class: "cfasim-input-label"
 }, _t = ["placeholder"], vt = { key: 1 }, yt = ["placeholder", "aria-label"], bt = /* @__PURE__ */ y({
 	__name: "TextInput",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		placeholder: {},
 		label: {},
 		hideLabel: { type: Boolean },
@@ -952,9 +952,9 @@ var Ue = {
 			onKeydown: I(i, ["enter"])
 		}, null, 40, yt), [[M, r.value]])]));
 	}
-}), xt = { class: "toggle" }, St = ["for"], Ct = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}), xt = { class: "toggle" }, St = ["for"], Ct = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "Toggle",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		label: {},
 		hint: {},
 		disabled: { type: Boolean }
@@ -987,9 +987,9 @@ var Ue = {
 			])
 		]));
 	}
-}), [["__scopeId", "data-v-9916c71e"]]), wt = { class: "toggle-group-field" }, Tt = /* @__PURE__ */ l(/* @__PURE__ */ y({
+}), [["__scopeId", "data-v-9916c71e"]]), wt = { class: "toggle-group-field" }, Tt = /*#__PURE__*/ l(/* @__PURE__ */ y({
 	__name: "ToggleGroup",
-	props: /* @__PURE__ */ b({
+	props: /*@__PURE__*/ b({
 		options: {},
 		multiple: { type: Boolean },
 		disabled: { type: Boolean },

package/docs/Box.md

@@ -0,0 +1,49 @@
+# Box
+
+A colored container for callouts, alerts, and grouped content.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Box variant="info">This is an info box.</Box>
+  <Box variant="success">This is a success box.</Box>
+  <Box variant="warning">This is a warning box.</Box>
+  <Box variant="error">This is an error box.</Box>
+
+<template #code>
+
+```vue
+<Box variant="info">This is an info box.</Box>
+<Box variant="success">This is a success box.</Box>
+<Box variant="warning">This is a warning box.</Box>
+<Box variant="error">This is an error box.</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+### Custom colors
+
+<ComponentDemo>
+  <Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+
+<template #code>
+
+```vue
+<Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `variant` | `BoxVariant` | No | — |
+| `bgColor` | `string` | No | — |
+| `textColor` | `string` | No | — |
+| `role` | `string` | No | — |
+

package/docs/Button.md

@@ -0,0 +1,67 @@
+# Button
+
+A button for triggering actions. Supports primary and secondary variants.
+
+Built on [reka-ui Primitive](https://reka-ui.com/docs/utilities/primitive), so it supports `as` and `asChild` for rendering as different elements.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Button>Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+
+<template #code>
+
+```vue
+<Button>Primary</Button>
+<Button variant="secondary">Secondary</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Button disabled>Disabled</Button>
+  <Button variant="secondary" disabled>Disabled</Button>
+
+<template #code>
+
+```vue
+<Button disabled>Disabled</Button>
+<Button variant="secondary" disabled>Disabled</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### With label prop
+
+<ComponentDemo>
+  <Button label="Click me" />
+
+<template #code>
+
+```vue
+<Button label="Click me" />
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `variant` | `"primary" \| "secondary"` | No | `"primary"` |
+
+## Events
+
+| Event | Payload |
+|-------|---------|
+| `click` | `event: MouseEvent` |
+

package/docs/ButtonGroup.md

@@ -0,0 +1,64 @@
+# ButtonGroup
+
+A container that visually joins a set of [`Button`](./button)s (or any
+elements) into a single connected unit. It only handles layout and styling —
+each button keeps its own click handler and state. For a stateful "pick one (or
+more)" control that looks like a button group, use
+[`ToggleGroup`](./toggle-group) instead.
+
+## Examples
+
+### Joined buttons
+
+<ComponentDemo>
+  <ButtonGroup aria-label="Document actions">
+    <Button variant="secondary">Cut</Button>
+    <Button variant="secondary">Copy</Button>
+    <Button variant="secondary">Paste</Button>
+  </ButtonGroup>
+
+<template #code>
+
+```vue
+<ButtonGroup aria-label="Document actions">
+  <Button variant="secondary">Cut</Button>
+  <Button variant="secondary">Copy</Button>
+  <Button variant="secondary">Paste</Button>
+</ButtonGroup>
+```
+
+  </template>
+</ComponentDemo>
+
+### Vertical
+
+Set `orientation="vertical"` to stack the buttons. They stretch to a common
+width so the dividers line up.
+
+<ComponentDemo>
+  <ButtonGroup orientation="vertical" aria-label="Zoom">
+    <Button>Zoom in</Button>
+    <Button>Reset</Button>
+    <Button>Zoom out</Button>
+  </ButtonGroup>
+
+<template #code>
+
+```vue
+<ButtonGroup orientation="vertical" aria-label="Zoom">
+  <Button>Zoom in</Button>
+  <Button>Reset</Button>
+  <Button>Zoom out</Button>
+</ButtonGroup>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `ariaLabel` | `string` | No | — |
+| `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` |
+

package/docs/Container.md

@@ -0,0 +1,103 @@
+# Container
+
+A flexible wrapper for grouping elements vertically (default) or horizontally. Optionally adds a border, fixed height with scrolling, and configurable gap between children.
+
+For multi-column layouts use [Grid](./grid).
+
+## Examples
+
+### Vertical stack (default)
+
+<ComponentDemo>
+  <Container gap="small">
+    <Box variant="info">First</Box>
+    <Box variant="info">Second</Box>
+    <Box variant="info">Third</Box>
+  </Container>
+
+<template #code>
+
+```vue
+<Container gap="small">
+  <Box variant="info">First</Box>
+  <Box variant="info">Second</Box>
+  <Box variant="info">Third</Box>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Horizontal row
+
+A row of buttons or chips. Wraps onto multiple lines when space runs out.
+
+<ComponentDemo>
+  <Container horizontal gap="small">
+    <Button>Save</Button>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="secondary">Reset</Button>
+  </Container>
+
+<template #code>
+
+```vue
+<Container horizontal gap="small">
+  <Button>Save</Button>
+  <Button variant="secondary">Cancel</Button>
+  <Button variant="secondary">Reset</Button>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Card with border
+
+<ComponentDemo>
+  <Container border gap="small">
+    <strong>Run summary</strong>
+    <span>Generated 1,000 samples in 2.4s</span>
+  </Container>
+
+<template #code>
+
+```vue
+<Container border gap="small">
+  <strong>Run summary</strong>
+  <span>Generated 1,000 samples in 2.4s</span>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+### Scrollable region
+
+Setting `height` automatically enables scrolling when content overflows.
+
+<ComponentDemo>
+  <Container border :height="180" gap="small">
+    <div v-for="i in 30" :key="i">Line {{ i }}</div>
+  </Container>
+
+<template #code>
+
+```vue
+<Container border :height="180" gap="small">
+  <div v-for="i in 30" :key="i">Line {{ i }}</div>
+</Container>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `border` | `boolean` | No | — |
+| `height` | `number \| string` | No | — |
+| `horizontal` | `boolean` | No | — |
+| `gap` | `ContainerGap \| string` | No | — |
+