@bysages/solid 0.4.0 → 0.4.2

package/dist/components/slider/index.mjs

@@ -1,8 +1,8 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, splitProps } from "solid-js";
 import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 //#region src/components/slider/index.tsx
 function SliderRoot(props) {
@@ -17,7 +17,71 @@ function SliderRoot(props) {
 		}
 	}));
 }
-const Slider = defineFamily(SliderRoot, {
+/** The common single-value slider; ranges and markers stay on the anatomy. */
+function SliderFacade(props) {
+	injectComponentStyle("slider");
+	return createComponent(SliderRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get min() {
+			return props.min ?? 0;
+		},
+		get max() {
+			return props.max ?? 100;
+		},
+		get step() {
+			return props.step ?? 1;
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get defaultValue() {
+			return [props.defaultValue ?? 50];
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: [props.value] };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value.at(0) ?? props.min ?? 0),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Slider$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Slider$1.ValueText, {}),
+				createComponent(Slider$1.Control, { get children() {
+					return [createComponent(Slider$1.Track, { get children() {
+						return createComponent(Slider$1.Range, {});
+					} }), createComponent(Slider$1.Thumb, {
+						index: 0,
+						get children() {
+							return createComponent(Slider$1.HiddenInput, { get required() {
+								return props.required;
+							} });
+						}
+					})];
+				} })
+			];
+		}
+	}));
+}
+const Slider = defineFamily(SliderFacade, {
 	...Slider$1,
 	Root: SliderRoot
 });

package/dist/components/spinner/index.mjs

@@ -1,7 +1,7 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/spinner/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);

package/dist/components/split-button/index.mjs

@@ -4,8 +4,8 @@ import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Menu as Menu$1 } from "../menu/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Menu } from "@ark-ui/solid/menu";

package/dist/components/splitter/index.d.mts

@@ -5,7 +5,21 @@ import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
  * a hairline and a small paper-seal thumb answers the hand. The API is
  * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
 declare function SplitterRoot(props: ComponentProps<typeof Splitter$1.Root>): import("solid-js").JSX.Element;
-export declare const Splitter: typeof SplitterRoot & Omit<typeof Splitter$1, "Root"> & {
+export type SplitterItem = {
+  id: string;
+  label: string;
+};
+export interface SplitterFacadeProps {
+  items: SplitterItem[];
+  defaultValue?: number[];
+  value?: number[];
+  orientation?: "horizontal" | "vertical";
+  onValueChange?: (value: number[]) => void;
+}
+/** The complete equal-height splitter; collapsed panels and custom panel
+ * bodies stay on the anatomy. */
+declare function SplitterFacade(props: SplitterFacadeProps): import("solid-js").JSX.Element;
+export declare const Splitter: typeof SplitterFacade & Omit<typeof Splitter$1, "Root"> & {
   Root: typeof SplitterRoot;
 };
 //#endregion

package/dist/components/splitter/index.mjs

@@ -1,19 +1,72 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
-//#region src/components/splitter/index.ts
+//#region src/components/splitter/index.tsx
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
 function SplitterRoot(props) {
 	const id = useElementId("splitter", () => props.id);
-	return createComponent(Splitter$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Splitter$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Splitter = defineFamily(SplitterRoot, {
+/** The complete equal-height splitter; collapsed panels and custom panel
+* bodies stay on the anatomy. */
+function SplitterFacade(props) {
+	injectComponentStyle("splitter");
+	const panels = () => props.items.map((item) => ({ id: item.id }));
+	return createComponent(SplitterRoot, mergeProps({
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get panels() {
+			return panels();
+		},
+		get defaultSize() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { size: props.value };
+	}, {
+		onResize: (size) => props.onValueChange?.(size.size),
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item, index) => {
+					const next = () => props.items.at(index() + 1);
+					return [createComponent(Splitter$1.Panel, {
+						get id() {
+							return item.id;
+						},
+						get children() {
+							return item.label;
+						}
+					}), createComponent(Show, {
+						get when() {
+							return next();
+						},
+						children: (nextItem) => createComponent(Splitter$1.ResizeTrigger, {
+							get id() {
+								return `${item.id}:${nextItem().id}`;
+							},
+							"aria-label": "Resize panels",
+							get children() {
+								return createComponent(Splitter$1.ResizeTriggerIndicator, {});
+							}
+						})
+					})];
+				}
+			});
+		}
+	}));
+}
+const Splitter = defineFamily(SplitterFacade, {
 	...Splitter$1,
 	Root: SplitterRoot
 });

package/dist/components/spotlight/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/spotlight/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/stack/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/stack/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/stat/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/stat/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);

package/dist/components/steps/index.d.mts

@@ -8,11 +8,13 @@ import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
-type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 type StepsOwnProps = {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
 };
+type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 declare function StepsRoot(props: StepsRootProps$1): import("solid-js").JSX.Element;
 type StepsItem = {
   title: string;
@@ -25,6 +27,8 @@ export interface StepsFacadeProps {
   orientation?: "horizontal" | "vertical";
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
   class?: string;
   onStepChange?: (step: number) => void;
 }

package/dist/components/steps/index.mjs

@@ -1,12 +1,12 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, splitProps } from "solid-js";
 import { Steps as Steps$1 } from "@ark-ui/solid/steps";
 //#region src/components/steps/index.tsx
 function StepsRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
+	const [own, rest] = splitProps(props, ["size", "variant"]);
 	const id = useElementId("steps", () => rest.id);
 	return createComponent(Steps$1.Root, mergeProps(rest, {
 		get id() {
@@ -14,11 +14,17 @@ function StepsRoot(props) {
 		},
 		get "data-size"() {
 			return own.size ?? "md";
+		},
+		get "data-variant"() {
+			return memo(() => {
+				return own.variant === "dot";
+			})() ? own.variant : void 0;
 		}
 	}));
 }
 function StepsFacade(props) {
 	injectComponentStyle("steps");
+	const variant = props.variant ?? "default";
 	return createComponent(StepsRoot, mergeProps({
 		get "class"() {
 			return props.class;
@@ -26,6 +32,7 @@ function StepsFacade(props) {
 		get size() {
 			return props.size ?? "md";
 		},
+		variant,
 		get count() {
 			return props.items.length;
 		},
@@ -56,7 +63,7 @@ function StepsFacade(props) {
 						get children() {
 							return [createComponent(Steps$1.Trigger, { get children() {
 								return [createComponent(Steps$1.Indicator, { get children() {
-									return String(index() + 1);
+									return variant === "dot" ? null : String(index() + 1);
 								} }), memo(() => {
 									return item.title;
 								})];

package/dist/components/swap/index.d.mts

@@ -1,12 +1,20 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Swap as Swap$1 } from "@ark-ui/solid/swap";
 //#region src/components/swap/index.d.ts
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
  * occupying one seal, the arriving one growing into place on the spring
  * while the departing one shrinks away. The API is Ark's own — Root,
  * Indicator (type="on" | "off"), RootProvider. */
-declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): import("solid-js").JSX.Element;
-export declare const Swap: typeof SwapRoot & Omit<typeof Swap$1, "Root"> & {
+declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): JSX.Element;
+export interface SwapFacadeProps {
+  swap?: boolean;
+  on?: JSX.Element;
+  off?: JSX.Element;
+}
+/** The one-tag path for the default check/cross impression; custom
+ * transitions and indicators stay on the anatomy with `on`/`off` props. */
+declare function SwapFacade(props: SwapFacadeProps): JSX.Element;
+export declare const Swap: typeof SwapFacade & Omit<typeof Swap$1, "Root"> & {
   Root: typeof SwapRoot;
 };
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,20 +1,50 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Swap as Swap$1 } from "@ark-ui/solid/swap";
-//#region src/components/swap/index.ts
+//#region src/components/swap/index.tsx
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
 * while the departing one shrinks away. The API is Ark's own — Root,
 * Indicator (type="on" | "off"), RootProvider. */
 function SwapRoot(props) {
 	const id = useElementId("swap", () => props.id);
-	return createComponent(Swap$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Swap$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Swap = defineFamily(SwapRoot, {
+/** The one-tag path for the default check/cross impression; custom
+* transitions and indicators stay on the anatomy with `on`/`off` props. */
+function SwapFacade(props) {
+	return createComponent(SwapRoot, {
+		get swap() {
+			return props.swap ?? false;
+		},
+		get children() {
+			return [createComponent(Swap$1.Indicator, {
+				type: "on",
+				get children() {
+					return props.on ?? iconNode("check", {
+						width: "14",
+						height: "14"
+					});
+				}
+			}), createComponent(Swap$1.Indicator, {
+				type: "off",
+				get children() {
+					return props.off ?? iconNode("x", {
+						width: "14",
+						height: "14"
+					});
+				}
+			})];
+		}
+	});
+}
+const Swap = defineFamily(SwapFacade, {
 	...Swap$1,
 	Root: SwapRoot
 });

package/dist/components/switch/index.d.mts

@@ -9,7 +9,22 @@ type SwitchOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SwitchRoot(props: SwitchRootProps & SwitchOwnProps): import("solid-js").JSX.Element;
-export declare const Switch: typeof SwitchRoot & Omit<typeof Switch$1, "Root"> & {
+/** The complete switch behind one on/off state and its label. */
+export interface SwitchFacadeProps {
+  checked?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+  onCheckedChange?: (checked: boolean) => void;
+}
+declare function SwitchFacade(props: SwitchFacadeProps): import("solid-js").JSX.Element;
+type SwitchParts = Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
+export declare const Switch: typeof SwitchFacade & SwitchParts;
 //#endregion

package/dist/components/switch/index.mjs

@@ -1,8 +1,8 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, splitProps } from "solid-js";
 import { Switch as Switch$1 } from "@ark-ui/solid/switch";
 //#region src/components/switch/index.tsx
 function SwitchRoot(props) {
@@ -17,7 +17,52 @@ function SwitchRoot(props) {
 		}
 	}));
 }
-const Switch = defineFamily(SwitchRoot, {
+function SwitchFacade(props) {
+	injectComponentStyle("switch");
+	return createComponent(SwitchRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get required() {
+			return props.required;
+		},
+		get defaultChecked() {
+			return props.defaultValue ?? false;
+		}
+	}, () => {
+		return props.checked === void 0 ? {} : { checked: props.checked };
+	}, {
+		onCheckedChange: (details) => props.onCheckedChange?.(details.checked),
+		get children() {
+			return [
+				createComponent(Switch$1.Control, { get children() {
+					return createComponent(Switch$1.Thumb, {});
+				} }),
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Switch$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Switch$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const Switch = defineFamily(SwitchFacade, {
 	...Switch$1,
 	Root: SwitchRoot
 });

package/dist/components/table/index.d.mts

@@ -58,6 +58,8 @@ export interface DataTableProps {
   pageSizeOptions?: number[];
   /** Keep the (optional) footer row pinned to the viewport bottom. */
   stickyFooter?: boolean;
+  /** Band every other body row so wide measures keep the eye on line. */
+  striped?: boolean;
   initialSorting?: SortingState;
   globalFilterPlaceholder?: string;
   emptyText?: string;

package/dist/components/table/index.mjs

@@ -3,9 +3,9 @@ import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-7YjMSBGx.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Select$1 } from "../../select-DI7pFspF.mjs";
 import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { createListCollection } from "@ark-ui/solid/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTable, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures } from "@tanstack/solid-table";
@@ -174,6 +174,7 @@ const DataTable = withSelfRoot(function DataTable(props) {
 	});
 	const [viewport, setViewport] = createSignal(null);
 	const rows = createMemo(() => table.getRowModel().rows);
+	const [mounted, setMounted] = createSignal(false);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
 	* actually renders. It is read once and re-read only when the density
@@ -208,6 +209,25 @@ const DataTable = withSelfRoot(function DataTable(props) {
 	});
 	const virtual = () => props.virtual && !props.merge;
 	const mergeMode = () => !props.virtual && !!props.merge;
+	onMount(() => setMounted(true));
+	const virtualRows = () => {
+		if (mounted()) return virtualizer.getVirtualItems();
+		if (!virtual()) return [];
+		const fallback = Math.max(1, Math.ceil(320 / baseRowHeight()));
+		return rows().slice(0, fallback).map((row, index) => {
+			const start = index * baseRowHeight();
+			const size = baseRowHeight();
+			return {
+				key: row.id ?? index,
+				index,
+				start,
+				end: start + size,
+				size,
+				lane: 0
+			};
+		});
+	};
+	const totalSize = () => mounted() ? virtualizer.getTotalSize() : rows().length * baseRowHeight();
 	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
 	const leafIds = createMemo(() => table.getAllLeafColumns().map((c) => c.id));
 	const expandHostId = createMemo(() => {
@@ -650,7 +670,7 @@ const DataTable = withSelfRoot(function DataTable(props) {
 		return () => {
 			return _c$3() ? createComponent(For, {
 				get each() {
-					return virtualizer.getVirtualItems();
+					return virtualRows();
 				},
 				children: (item) => renderRow(rows()[item.index], item)
 			}) : createComponent(For, {
@@ -846,19 +866,21 @@ const DataTable = withSelfRoot(function DataTable(props) {
 	effect(() => {
 		return {
 			e: props.reorderable || void 0,
-			t: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
-			a: colsTemplate(),
-			o: mergeMode() || void 0,
-			i: virtual() || void 0,
-			n: readShallow(virtual() ? { "--bs-table-virtual-total": `${virtualizer.getTotalSize()}px` } : void 0)
+			t: props.striped || void 0,
+			a: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
+			o: colsTemplate(),
+			i: mergeMode() || void 0,
+			n: virtual() || void 0,
+			s: readShallow(virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0)
 		};
-	}, ({ e, t, a, o, i, n }, _p$) => {
+	}, ({ e, t, a, o, i, n, s }, _p$) => {
 		e !== _p$?.e && setAttribute(_el$11, "data-reorderable", e);
-		t !== _p$?.t && setStyleProperty(_el$11, "--bs-table-row-height", t);
-		a !== _p$?.a && setStyleProperty(_el$13, "--bs-table-cols", a);
-		o !== _p$?.o && setAttribute(_el$15, "data-merge", o);
-		i !== _p$?.i && setAttribute(_el$15, "data-virtual", i);
-		style(_el$15, n, _p$?.n);
+		t !== _p$?.t && setAttribute(_el$11, "data-striped", t);
+		a !== _p$?.a && setStyleProperty(_el$11, "--bs-table-row-height", a);
+		o !== _p$?.o && setStyleProperty(_el$13, "--bs-table-cols", o);
+		i !== _p$?.i && setAttribute(_el$15, "data-merge", i);
+		n !== _p$?.n && setAttribute(_el$15, "data-virtual", n);
+		style(_el$15, s, _p$?.s);
 	});
 	return _el$11;
 });

package/dist/components/tabs/index.mjs

@@ -1,7 +1,7 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, splitProps } from "solid-js";
 import { Tabs as Tabs$1 } from "@ark-ui/solid/tabs";
 //#region src/components/tabs/index.tsx

package/dist/components/tag/index.d.mts

@@ -0,0 +1,29 @@
+import { JSX } from "solid-js";
+//#region src/components/tag/index.d.ts
+type TagTone = "ink" | "primary" | "success" | "warning" | "danger" | "info";
+type TagVariant = "solid" | "outline" | "subtle";
+export interface TagProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> {
+  /** The pigment the tag is inked with; ink is the solemn default,
+   * and the fixed pigments speak for their meaning. */
+  tone?: TagTone;
+  /** How the tag rests: a solid fill, an outline shell, a subtle
+   * wash. The pressed state always reads as solid. */
+  variant?: TagVariant;
+  /** Render the tag as a pressed button the consumer can toggle. */
+  checkable?: boolean;
+  /** The pressed state held from outside; omit it and the tag keeps
+   * its own state from `defaultValue`. */
+  checked?: boolean;
+  defaultValue?: boolean;
+  /** Render the quiet removal seal. */
+  closable?: boolean;
+  disabled?: boolean;
+  /** Reports the next pressed state from a checkable tag. */
+  onValueChange?: (checked: boolean) => void;
+  /** Reports a dismissal from the removal seal. */
+  onClose?: () => void;
+}
+export declare const Tag: ((props: TagProps) => JSX.Element) & {
+  Root: (props: TagProps) => JSX.Element;
+};
+//#endregion