@shadow-js/ui 1.0.0 → 1.0.2

package/dist/dev/cli/schema.d.ts

@@ -1,4 +1,3 @@
-//#region src/cli/schema.d.ts
 /**
  * The shapes the CLI reads: the registry index (`registry.json`) and the project's
  * `components.json`, with validators that turn untrusted JSON into typed values or a clear error.
@@ -69,5 +68,4 @@ export interface RegistryIndex {
   /** Every installable item, in registry order. */
   readonly items: readonly RegistryItem[];
 }
-//#endregion
 //# sourceMappingURL=schema.d.ts.map

package/dist/dev/locales/ar.d.ts

@@ -1,4 +1,3 @@
-//#region src/locales/ar.d.ts
 /**
  * The Arabic messages of the UI kit, as a catalog of messages: every label, description and live-region text the components show, keyed
  * by component. Pass it (or a copy with your own words) to the strings provider of your project, or into a `createI18n` catalog.
@@ -136,6 +135,5 @@ declare const ar: {
     readonly notifications: "الإشعارات";
   };
 };
-//#endregion
 export { ar as default };
 //# sourceMappingURL=ar.d.ts.map

package/dist/dev/locales/ar.js

@@ -1,4 +1,4 @@
-//#region src/locales/ar.ts
+// src/locales/ar.ts
 /**
 * The Arabic messages of the UI kit, as a catalog of messages: every label, description and live-region text the components show, keyed
 * by component. Pass it (or a copy with your own words) to the strings provider of your project, or into a `createI18n` catalog.
@@ -122,7 +122,6 @@ const ar = {
 		notifications: "الإشعارات"
 	}
 };
-//#endregion
 export { ar as default };
 
 //# sourceMappingURL=ar.js.map

package/dist/dev/locales/en.d.ts

@@ -1,4 +1,3 @@
-//#region src/locales/en.d.ts
 /**
  * The English messages of the UI kit, as a catalog of messages: every label, description and live-region text the components show, keyed
  * by component. Pass it (or a copy with your own words) to the strings provider of your project, or into a `createI18n` catalog.
@@ -136,6 +135,5 @@ declare const en: {
     readonly notifications: "Notifications";
   };
 };
-//#endregion
 export { en as default };
 //# sourceMappingURL=en.d.ts.map

package/dist/dev/locales/en.js

@@ -1,4 +1,4 @@
-//#region src/locales/en.ts
+// src/locales/en.ts
 /**
 * The English messages of the UI kit, as a catalog of messages: every label, description and live-region text the components show, keyed
 * by component. Pass it (or a copy with your own words) to the strings provider of your project, or into a `createI18n` catalog.
@@ -122,7 +122,6 @@ const en = {
 		notifications: "Notifications"
 	}
 };
-//#endregion
 export { en as default };
 
 //# sourceMappingURL=en.js.map

package/dist/dev/registry/utils/utils.d.ts

@@ -1,4 +1,3 @@
-//#region registry/utils/utils.d.ts
 /**
  * Anything a ShadowJS `class` attribute accepts: strings, numbers, nested (readonly) arrays and
  * `{ name: condition }` objects. Falsy values are skipped.
@@ -25,5 +24,4 @@ export type ClassValue = string | number | bigint | boolean | null | undefined |
  * @see {@link ClassValue}
  */
 export declare function cn(...inputs: ClassValue[]): string;
-//#endregion
 //# sourceMappingURL=utils.d.ts.map

package/dist/dev/registry/utils/utils.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-//#region registry/utils/utils.ts
+// registry/utils/utils.ts
 /**
 * Joins class names (strings, arrays, `{ name: condition }` objects) and resolves Tailwind
 * conflicts, so the last utility wins: `cn("px-2", props.class)` lets the caller override `px-2`.
@@ -21,7 +21,6 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
 	return twMerge(clsx(...inputs));
 }
-//#endregion
 export { cn };
 
 //# sourceMappingURL=utils.js.map

package/dist/dev/theme/theme-logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/theme/theme-logic.d.ts
 /**
  * Pure theme logic, shared by the provider and the no-flash script so both agree on what
  * "system", "light" and "dark" mean. Nothing here touches `window` unless it is handed an object.
@@ -183,5 +182,4 @@ export declare function themeScript(options?: ThemeOptions): string;
 export declare function themeScriptTag(options?: ThemeOptions & {
   readonly nonce?: string | undefined;
 }): string;
-//#endregion
 //# sourceMappingURL=theme-logic.d.ts.map

package/dist/dev/theme/theme-logic.js

@@ -1,4 +1,4 @@
-//#region src/theme/theme-logic.ts
+// src/theme/theme-logic.ts
 /**
 * The `localStorage` key that holds the theme choice when `storageKey` is not given.
 * @example
@@ -178,7 +178,6 @@ function themeScript(options = {}) {
 function themeScriptTag(options = {}) {
 	return `<script${options.nonce === void 0 ? "" : ` nonce="${options.nonce.replace(/[^A-Za-z0-9+/=_-]/g, "")}"`}>${themeScript(options)}<\/script>`;
 }
-//#endregion
 export { DEFAULT_STORAGE_KEY, applyTheme, isTheme, readStoredTheme, resolveTheme, themeScript, themeScriptTag, writeStoredTheme };
 
 //# sourceMappingURL=theme-logic.js.map

package/dist/dev/theme/theme-provider.d.ts

@@ -1,7 +1,6 @@
 import { ResolvedTheme, Theme, ThemeOptions } from "./theme-logic.js";
 import { Accessor } from "@shadow-js/core";
 import { JsxChild } from "@shadow-js/web/jsx-runtime";
-//#region src/theme/theme-provider.d.ts
 /**
  * What {@link useTheme} returns. Every value is an accessor: call it to read.
  * @since 1.0.0
@@ -86,5 +85,4 @@ export declare function ThemeProvider(props: ThemeProviderProps): JsxChild;
  * @since 1.0.0
  */
 export declare function useTheme(): ThemeContextValue;
-//#endregion
 //# sourceMappingURL=theme-provider.d.ts.map

package/dist/dev/theme/theme-provider.js

@@ -1,6 +1,6 @@
 import { applyTheme, isTheme, readStoredTheme, resolveTheme, writeStoredTheme } from "./theme-logic.js";
 import { batch, createContext, onCleanup, onMount, untrack, useContext, useEffect, useMemo, useSignal } from "@shadow-js/core";
-//#region src/theme/theme-provider.ts
+// src/theme/theme-provider.ts
 const MISSING = {
 	theme: () => "system",
 	resolvedTheme: () => void 0,
@@ -144,7 +144,6 @@ function useTheme() {
 	if (value === MISSING) throw new Error("useTheme() must be used within <ThemeProvider>");
 	return value;
 }
-//#endregion
 export { ThemeProvider, useTheme };
 
 //# sourceMappingURL=theme-provider.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-js/ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "shadcn-style components you add to your project with a CLI, styled with Tailwind v4",
   "license": "MIT",
   "type": "module",
@@ -60,18 +60,18 @@
     "check": "npm run lint && npm run typecheck && npm run build && npm test && npm run test:perf && npm run test:gc"
   },
   "peerDependencies": {
-    "@shadow-js/core": "^1.0.0",
-    "@shadow-js/primitives": "^1.0.0",
-    "@shadow-js/web": "^1.0.0"
+    "@shadow-js/core": "^1.0.2",
+    "@shadow-js/primitives": "^1.0.2",
+    "@shadow-js/web": "^1.0.2"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.15",
-    "@shadow-js/compiler": "^1.0.0",
-    "@shadow-js/core": "^1.0.0",
-    "@shadow-js/forms": "^1.0.0",
-    "@shadow-js/primitives": "^1.0.0",
-    "@shadow-js/testing": "^1.0.0",
-    "@shadow-js/web": "^1.0.0",
+    "@shadow-js/compiler": "^1.0.2",
+    "@shadow-js/core": "^1.0.2",
+    "@shadow-js/forms": "^1.0.2",
+    "@shadow-js/primitives": "^1.0.2",
+    "@shadow-js/testing": "^1.0.2",
+    "@shadow-js/web": "^1.0.2",
     "@tailwindcss/node": "4.3.3",
     "@types/node": "^24.0.0",
     "fast-check": "^4.10.2",
@@ -84,7 +84,7 @@
     "vitest": "5.0.3"
   },
   "dependencies": {
-    "@shadow-js/table": "1.0.0",
+    "@shadow-js/table": "1.0.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.7.0"

package/registry/carousel/carousel.tsx

@@ -1,7 +1,9 @@
 import { onCleanup, onMount, splitProps, useEffect, useSignal } from "@shadow-js/core";
 import {
+  callHandler,
   createPartContext,
   type Direction,
+  mergeElementProps,
   useDirectionAround,
   useRefSignal,
 } from "@shadow-js/primitives";
@@ -99,6 +101,7 @@ interface CarouselContextValue {
   readonly setViewport: (element: HTMLElement | undefined) => void;
   readonly claimSlide: () => number;
   readonly registerCount: () => void;
+  readonly releaseSlide: () => void;
   readonly pause: (paused: boolean) => void;
   readonly labels: () => ResolvedLabels;
   /** True once the carousel is mounted in the browser; the slide names wait for it (see CarouselItem). */
@@ -306,6 +309,12 @@ function Carousel(props: CarouselProps): JSX.Element {
   const [ready, setReady] = useSignal(false);
   let viewport: HTMLElement | undefined;
   let claimed = 0;
+  // The slide count the "reInit" listeners were last told, and whether the carousel is gone.
+  let reported = 0;
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+  });
   // The slide a programmatic move is heading for, until the scroll arrives there. While it is set,
   // the intermediate positions of a smooth scroll do not move the index back.
   let pending: number | undefined;
@@ -376,6 +385,27 @@ function Carousel(props: CarouselProps): JSX.Element {
       if (typeof viewport.scrollTo !== "function") viewport.scrollLeft = position * sign;
     }
   };
+  /** Tells the "reInit" listeners when the slide count differs from what they last heard. */
+  const announceCount = (): void => {
+    if (!ready()) return;
+    const total = count();
+    if (total === reported) return;
+    reported = total;
+    // Slides were removed: the current one may be gone.
+    if (total > 0 && index() > total - 1) setIndex(total - 1);
+    emit("reInit");
+  };
+  // A list that is replaced removes every slide and adds new ones in the same turn, and a carousel
+  // that unmounts removes them all: wait for the final count before telling anyone, once.
+  let announcing = false;
+  const scheduleAnnounce = (): void => {
+    if (!ready() || announcing) return;
+    announcing = true;
+    queueMicrotask(() => {
+      announcing = false;
+      if (!disposed) announceCount();
+    });
+  };
   const canPrevious = (): boolean => loops() || index() > 0;
   const canNext = (): boolean => loops() || index() < count() - 1;
 
@@ -402,9 +432,13 @@ function Carousel(props: CarouselProps): JSX.Element {
       return slot;
     },
     registerCount() {
-      const changed = claimed !== count();
       setCount(claimed);
-      if (changed && ready()) emit("reInit");
+      scheduleAnnounce();
+    },
+    releaseSlide() {
+      claimed = Math.max(0, claimed - 1);
+      setCount(claimed);
+      scheduleAnnounce();
     },
     pause: (value) => setPaused(value),
     labels,
@@ -436,6 +470,7 @@ function Carousel(props: CarouselProps): JSX.Element {
   onMount(() => {
     setRegionElement(regionNode);
     setReady(true);
+    reported = count();
     const start = opts().startIndex;
     if (start !== undefined && start > 0) scrollToIndex(start, true);
     (local.setApi as ((api: CarouselApi) => void) | undefined)?.(api);
@@ -445,7 +480,8 @@ function Carousel(props: CarouselProps): JSX.Element {
   // `autoplay` prop: changing it retimes the interval, and removing it stops the interval.
   useEffect(() => {
     const interval = local.autoplay as number | undefined;
-    if (interval === undefined || interval <= 0) return undefined;
+    // NaN and Infinity must not reach setInterval: a NaN delay fires every tick and an Infinity one wraps to 0.
+    if (interval === undefined || !Number.isFinite(interval) || interval <= 0) return undefined;
     if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches)
       return undefined;
     const timer = setInterval(() => {
@@ -489,12 +525,24 @@ function Carousel(props: CarouselProps): JSX.Element {
         class={cn("relative", local.class)}
         onKeyDown={(event: KeyboardEvent) => {
           onKeyDown(event);
-          (local.onKeyDown as ((event: KeyboardEvent) => void) | undefined)?.(event);
+          callHandler(local.onKeyDown, event);
+        }}
+        onPointerEnter={(event: PointerEvent) => {
+          callHandler(local.onPointerEnter, event);
+          setPaused(true);
+        }}
+        onPointerLeave={(event: PointerEvent) => {
+          callHandler(local.onPointerLeave, event);
+          setPaused(false);
+        }}
+        onFocusIn={(event: FocusEvent) => {
+          callHandler(local.onFocusIn, event);
+          setPaused(true);
+        }}
+        onFocusOut={(event: FocusEvent) => {
+          callHandler(local.onFocusOut, event);
+          setPaused(false);
         }}
-        onPointerEnter={() => setPaused(true)}
-        onPointerLeave={() => setPaused(false)}
-        onFocusIn={() => setPaused(true)}
-        onFocusOut={() => setPaused(false)}
         {...rest}
       >
         {local.children as JSX.Element}
@@ -551,15 +599,15 @@ function CarouselContent(props: ComponentProps<"div">): JSX.Element {
         local.class,
       )}
       onScroll={(event: Event) => {
-        (local.onScroll as ((event: Event) => void) | undefined)?.(event);
+        callHandler(local.onScroll, event);
         carousel.scrolled();
       }}
       onWheel={(event: WheelEvent) => {
-        (local.onWheel as ((event: WheelEvent) => void) | undefined)?.(event);
+        callHandler(local.onWheel, event);
         carousel.userMoved();
       }}
       onPointerDown={(event: PointerEvent) => {
-        (local.onPointerDown as ((event: PointerEvent) => void) | undefined)?.(event);
+        callHandler(local.onPointerDown, event);
         carousel.userMoved();
         if (event.button !== 0 || event.pointerType === "touch") return;
         const element = event.currentTarget as HTMLElement;
@@ -630,12 +678,28 @@ function CarouselItem(props: ComponentProps<"div">): JSX.Element {
   // before the next one is counted; so a slide is named only once the carousel is mounted, and
   // the name then uses the final count (UI-CRS-18).
   carousel.registerCount();
+  // A slide that goes away (a list that shrinks or is replaced) no longer counts.
+  onCleanup(() => carousel.releaseSlide());
+  let node: HTMLElement | undefined;
+  // The position among the slides that exist now, from the DOM order: the slot a slide claimed when
+  // it rendered is stale once another slide has been removed or inserted before it.
+  const position = (): number => {
+    carousel.count();
+    const parent = node?.parentElement;
+    if (node === undefined || parent === null || parent === undefined) return slot + 1;
+    const slides = Array.from(parent.children).filter(
+      (child) => child.getAttribute("data-slot") === "carousel-item",
+    );
+    const at = slides.indexOf(node);
+    return at === -1 ? slot + 1 : at + 1;
+  };
+  const merged = mergeElementProps({ ref: (element: HTMLElement) => (node = element) }, rest);
   return (
     <div
       role="group"
       aria-roledescription="slide"
       aria-label={
-        carousel.ready() ? carousel.labels().slide(slot + 1, carousel.count()) : undefined
+        carousel.ready() ? carousel.labels().slide(position(), carousel.count()) : undefined
       }
       data-slot="carousel-item"
       class={cn(
@@ -643,7 +707,7 @@ function CarouselItem(props: ComponentProps<"div">): JSX.Element {
         carousel.orientation() === "vertical" ? "pt-4" : "ps-4",
         local.class,
       )}
-      {...rest}
+      {...merged}
     />
   );
 }
@@ -699,7 +763,7 @@ function CarouselPrevious(props: ComponentProps<"button">): JSX.Element {
       )}
       disabled={!carousel.canPrevious()}
       onClick={(event: MouseEvent) => {
-        (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+        callHandler(local.onClick, event);
         carousel.previous();
       }}
       {...rest}
@@ -764,7 +828,7 @@ function CarouselNext(props: ComponentProps<"button">): JSX.Element {
       )}
       disabled={!carousel.canNext()}
       onClick={(event: MouseEvent) => {
-        (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+        callHandler(local.onClick, event);
         carousel.next();
       }}
       {...rest}

package/registry/chart/chart.tsx

@@ -220,7 +220,11 @@ function ChartContainer(props: ChartContainerProps): JSX.Element {
     "children",
   ]);
   const uiLocale = useUiLocale();
-  const [width, setWidth] = useSignal<number>((local.initialWidth as number | undefined) ?? 600);
+  // A NaN or Infinity width would put "NaN" into every path; fall back to the default instead.
+  const initial = local.initialWidth as number | undefined;
+  const [width, setWidth] = useSignal<number>(
+    initial !== undefined && Number.isFinite(initial) ? initial : 600,
+  );
   const [element, setElement] = useRefSignal<HTMLElement>();
   let node: HTMLElement | undefined;
   const dir = useDirectionAround(() => local.dir as Direction | undefined, element);

package/registry/input-group/input-group.tsx

@@ -1,4 +1,5 @@
 import { splitProps } from "@shadow-js/core";
+import { callHandler } from "@shadow-js/primitives";
 import type { ComponentProps, JSX } from "@shadow-js/web";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
@@ -117,7 +118,7 @@ function InputGroupAddon(props: InputGroupAddonProps): JSX.Element {
   const [local, rest] = splitProps(props, ["class", "align", "onClick"]);
   // The application's own click handler runs first; the focus move is the default.
   const onClick = (event: MouseEvent): void => {
-    (local.onClick as ((event: MouseEvent) => void) | undefined)?.(event);
+    callHandler(local.onClick, event);
     const target = event.target;
     if (target instanceof Element && target.closest("button") !== null) return;
     const group = (event.currentTarget as HTMLElement).closest('[data-slot="input-group"]');