@techsio/ui-kit 0.54.0 → 0.54.2

package/README.md

@@ -169,28 +169,34 @@ Docker image is defined in `docker/development/playwright/Dockerfile`.
 These tests are intentionally Docker-only; running them directly on the host is blocked to keep snapshots reproducible.
 Make sure Storybook is served at `TEST_BASE_URL` (default `http://127.0.0.1:6006` inside the container).
 You can run `pnpm -C libs/ui storybook` on the host and set `TEST_BASE_URL=http://host.docker.internal:6006`,
-or let Playwright start its own `http-server` inside Docker from `storybook-static`.
-For visual stability, stories used in regression tests should rely on local assets (avoid external image URLs).
+or let Playwright start its own static server inside Docker from `storybook-static`.
+Screenshots must match their baselines byte-for-byte after PNG decoding (Playwright's `toHaveScreenshot` tolerates anti-aliasing differences, so the spec compares decoded RGBA itself). `Math.random` is seeded per story and the clock is fixed.
+Prefer local assets in new stories. Existing remote images replay through Playwright's native `routeFromHAR()` from `test/fixtures/visual-assets/assets.har`; attached binaries are committed beside the HAR. Missing URLs or changed resource types fail the test. Snapshot updates keep these files read-only.
+
+When a story needs a new remote asset, record it using Playwright's [HAR recording](https://playwright.dev/docs/mock#recording-a-har-file). Use one recording context with `recordHar: { path: "assets.har", mode: "minimal", content: "attach", urlFilter: "https://images.unsplash.com/**" }`, visit the affected stories, then close the context to save it. Add the required entries and attachments to the existing HAR; preserve unrelated entries and keep one entry per URL (deduplicate repeated captures). Review image changes before updating screenshots.
+
+Run the focused replay contracts with `pnpm -C libs/ui test:visual-assets` after installing Chromium (`pnpm exec playwright install chromium`).
 
 Optional environment overrides:
 - `TEST_BASE_URL` (default: `http://127.0.0.1:6006` inside the container)
 - `PLAYWRIGHT_STORYBOOK_REBUILD` (default: `1`, rebuilds `storybook-static`; set to `0` to reuse an existing build)
+- `VISUAL_STORYBOOK_STATIC_DIR` (absolute path to another Storybook build, e.g. one built from `master`, to test against the committed baselines; skips the rebuild)
+- `VISUAL_BRANDS` (default: `base,neo,business`; also supports `akros`)
 - `TEST_STORIES` (comma-separated Storybook story ids to run, e.g. `atoms-button--states,molecules-productcard--layout-variants`)
 - `PLAYWRIGHT_WORKERS` (override worker count for parallel runs)
-- `PLAYWRIGHT_PAGE_RESET` (default: `1`, resets cookies/storage between stories; set to `0` for max speed if stable)
-- `DOCKER_PLATFORM` (default: `linux/amd64`)
+- `VISUAL_ASSET_HAR_PATH` (absolute path to an alternative HAR; its directory and attachments mount read-only)
 - `PLAYWRIGHT_DOCKER_IMAGE` (default: `new-engine-ui-playwright`)
 - `PLAYWRIGHT_DOCKER_SHM_SIZE` (default: `2g`, improves Playwright stability in Docker)
 - `PLAYWRIGHT_DOCKER_IPC` (default: `host`, improves Playwright stability in Docker)
-- `PLAYWRIGHT_DOCKER_SEQUENTIAL` (default: `0`, runs projects in parallel; set to `1` to reduce memory spikes)
-- `PLAYWRIGHT_DOCKER_PROJECTS` (comma-separated Playwright project names to run sequentially; default: `desktop,mobile`)
+- `PLAYWRIGHT_DOCKER_SEQUENTIAL` (default: `0`, runs projects in parallel; set to `1` to run one project at a time and reduce memory spikes)
+
+Extra arguments are passed to `playwright test`, e.g. `pnpm -C libs/ui test:components -- --project=neo-mobile-dark`.
+Tests always run as `linux/amd64`, matching the committed baselines. A full run must cover every story in every visual project; component behavior specs (`test/*.spec.ts`) run once in the `desktop` and `mobile` projects.
 
 ### Recommendation for `PLAYWRIGHT_WORKERS` and parallelism
 
-- If `PLAYWRIGHT_WORKERS` is not set, the Playwright config defaults to
-    using (CPU cores - 1) workers. This balances parallelism with leaving one
-    core for system processes. You can override it in CI with `PLAYWRIGHT_WORKERS=4` (or
-    another suitable value) depending on your runner size.
+- If `PLAYWRIGHT_WORKERS` is not set, the Docker runner uses 4 workers to bound
+    browser memory. Override it depending on your machine or CI runner size.
 - The test suite enables `fullyParallel` in Playwright config, so tests can run
     concurrently across files and workers — ensure tests are isolated and use
     unique snapshot names (the visual tests already include `story.id` in the

package/dist/atoms/button.js

@@ -6,7 +6,8 @@ const buttonVariants = tv({
         "relative",
         "inline-flex cursor-pointer items-center justify-center",
         "font-medium",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
+        "motion-safe:not-disabled:active:scale-97",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-button-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -265,7 +266,7 @@ function Button({ variant, theme, size, block, isLoading, loadingText, icon, ico
         children: isLoading ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Icon, {
-                    className: "mr-2",
+                    className: "me-2",
                     icon: "token-icon-button-spinner"
                 }),
                 loadingText || children

package/dist/atoms/checkbox.js

@@ -6,7 +6,7 @@ const checkboxVariants = tv({
         "size-checkbox",
         "rounded-checkbox border border-checkbox-border-base",
         "bg-checkbox-bg-base",
-        "after:-translate-x-1/2 after:-translate-y-1/2 after:absolute after:top-1/2 after:left-1/2",
+        "after:-translate-1/2 after:absolute after:top-1/2 after:left-1/2",
         "checked:bg-checkbox-bg-checked",
         "checked:border-checkbox-border-checked",
         "checked:after:token-icon-checkbox",
@@ -23,7 +23,7 @@ const checkboxVariants = tv({
         "disabled:checked:bg-checkbox-bg-disabled",
         "disabled:checked:text-checkbox-fg-disabled",
         "disabled:checked:border-checkbox-border-disabled",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-checkbox-ring-focus",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -34,8 +34,8 @@ const checkboxVariants = tv({
 function Checkbox({ className, indeterminate, invalid, ref, ...props }) {
     const setIndeterminate = (node)=>{
         if (node) node.indeterminate = indeterminate ?? false;
-        if ("function" == typeof ref) ref(node);
-        else if (ref) ref.current = node;
+        if ("function" == typeof ref) return ref(node);
+        if (ref) ref.current = node;
     };
     return /*#__PURE__*/ jsx("input", {
         "aria-invalid": invalid || void 0,

package/dist/atoms/hotkeys.js

@@ -23,6 +23,7 @@ function Hotkeys({ hotkey, formatOptions, children, className, ref, ...props })
         }) : null)
     });
 }
+Hotkeys.Root = Hotkeys;
 Hotkeys.Key = function({ className, ref, ...props }) {
     return /*#__PURE__*/ jsx("kbd", {
         ...props,
@@ -47,6 +48,5 @@ Hotkeys.Separator = function({ children = "+", className, ref, ...props }) {
         children: children
     });
 };
-Hotkeys.Root = Hotkeys;
 Hotkeys.displayName = "Hotkeys";
 export { Hotkeys };

package/dist/atoms/input.js

@@ -10,13 +10,17 @@ const inputVariants = tv({
         "placeholder:text-input-fg-placeholder",
         "border-(length:--border-width-input) border-input-border-base",
         "rounded-input",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-input-border-hover hover:bg-input-bg-hover",
         "focus:border-input-border-focus focus:bg-input-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-input-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled"
+        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-input-border-danger-base",
+        "user-invalid:hover:border-input-border-danger-hover",
+        "user-invalid:focus:border-input-border-danger-focus"
     ],
     variants: {
         size: {

package/dist/atoms/numeric-input.js

@@ -13,7 +13,7 @@ const numericInputVariants = tv({
         container: [
             "group form-control-base relative flex",
             "border-numeric-input-border",
-            "items-center overflow-hidden",
+            "min-w-0 items-center overflow-clip",
             "hover:border-numeric-input-border-hover",
             "focus-within:border-numeric-input-border-focus",
             "data-disabled:bg-numeric-input-bg-disabled",
@@ -37,7 +37,7 @@ const numericInputVariants = tv({
             "hover:bg-numeric-input-input-bg-hover",
             "disabled:hover:bg-numeric-input-input-bg",
             "disabled:cursor-not-allowed",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "duration-0 data-invalid:focus:border-input-border-danger-focus"
         ],
         triggerContainer: [
@@ -61,19 +61,19 @@ const numericInputVariants = tv({
                 root: "gap-numeric-input-sm text-numeric-input-sm",
                 container: "h-form-control-sm rounded-numeric-input-sm",
                 trigger: "text-numeric-input-sm",
-                input: "pl-numeric-input-input-sm text-numeric-input-sm"
+                input: "ps-numeric-input-input-sm text-numeric-input-sm"
             },
             md: {
                 root: "gap-numeric-input-md text-numeric-input-md",
                 container: "h-form-control-md rounded-numeric-input-md",
                 trigger: "text-numeric-input-md",
-                input: "pl-numeric-input-input-md text-numeric-input-md"
+                input: "ps-numeric-input-input-md text-numeric-input-md"
             },
             lg: {
                 root: "gap-numeric-input-lg text-numeric-input-lg",
                 container: "h-form-control-lg rounded-numeric-input-lg",
                 trigger: "text-numeric-input-lg",
-                input: "pl-numeric-input-input-lg text-numeric-input-lg"
+                input: "ps-numeric-input-input-lg text-numeric-input-lg"
             }
         }
     },
@@ -116,7 +116,7 @@ function NumericInput({ id, size, value, defaultValue, onChange, dir = "ltr", de
         id: id || generatedId,
         ids: id ? {
             ...machineProps.ids,
-            input: id
+            input: machineProps.ids?.input ?? id
         } : machineProps.ids,
         dir,
         locale,

package/dist/atoms/skeleton.js

@@ -4,7 +4,7 @@ import { tv } from "../utils.js";
 const skeletonVariants = tv({
     slots: {
         root: [
-            "relative overflow-hidden"
+            "relative min-w-0 overflow-clip"
         ],
         rectangle: "w-full",
         circle: [
@@ -97,7 +97,6 @@ function Skeleton({ isLoaded = false, variant, children, speed, className, ref,
             children: children
         }) : /*#__PURE__*/ jsx("div", {
             "aria-busy": "true",
-            "aria-label": "Loading content",
             className: styles.root({
                 className
             }),
@@ -123,7 +122,6 @@ Skeleton.Circle = function({ size = "md", speed, isLoaded, variant, children, cl
     });
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.root({
             className: styles.circle({
                 className
@@ -150,7 +148,6 @@ Skeleton.Text = function({ noOfLines = 3, size = "md", speed, lastLineWidth = "8
     const lineCount = Number.isFinite(noOfLines) ? Math.max(1, noOfLines) : 1;
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.textContainer({
             className: containerClassName
         }),
@@ -189,7 +186,6 @@ Skeleton.Rectangle = function({ speed, isLoaded, variant, children, className, r
     });
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.root({
             className: styles.rectangle({
                 className

package/dist/atoms/textarea.js

@@ -10,13 +10,17 @@ const textareaVariants = tv({
         "placeholder:text-textarea-fg-placeholder",
         "border-(length:--border-width-textarea) border-textarea-border",
         "rounded-textarea",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-textarea-border-hover hover:bg-textarea-bg-hover",
         "focus:border-textarea-border-focus focus:bg-textarea-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-textarea-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled"
+        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-textarea-border-danger-base",
+        "user-invalid:hover:border-textarea-border-danger-hover",
+        "user-invalid:focus:border-textarea-border-danger-focus"
     ],
     variants: {
         variant: {

package/dist/atoms/tooltip.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
-import { useId } from "react";
+import { Children, Fragment as external_react_Fragment, cloneElement, isValidElement, useId } from "react";
 import { tv } from "tailwind-variants";
 import * as __rspack_external__zag_js_tooltip_cb65b1a2 from "@zag-js/tooltip";
 const tooltipVariants = tv({
@@ -44,6 +44,22 @@ const tooltipVariants = tv({
         variant: "default"
     }
 });
+function describeTooltipChildren(children, describedBy) {
+    return Children.map(children, (child)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return child;
+        if (child.type === external_react_Fragment) return /*#__PURE__*/ cloneElement(child, {}, describeTooltipChildren(child.props.children, describedBy));
+        const ids = [
+            child.props["aria-describedby"],
+            describedBy
+        ].flatMap((value)=>value?.split(/\s+/).filter(Boolean) ?? []);
+        const props = {
+            "aria-describedby": [
+                ...new Set(ids)
+            ].join(" ") || void 0
+        };
+        return "string" == typeof child.type && void 0 !== child.props.children ? /*#__PURE__*/ cloneElement(child, props, describeTooltipChildren(child.props.children, describedBy)) : /*#__PURE__*/ cloneElement(child, props);
+    });
+}
 function Tooltip({ content, children, className, ref, size, variant, id: MRAId, dir = "ltr", openDelay = 200, closeDelay = 200, interactive = true, defaultOpen, open, onOpenChange, disabled, closeOnEscape = true, closeOnPointerDown, closeOnScroll, closeOnClick, placement, offset = {
     mainAxis: 16,
     crossAxis: 0
@@ -76,19 +92,18 @@ function Tooltip({ content, children, className, ref, size, variant, id: MRAId,
         }
     });
     const api = __rspack_external__zag_js_tooltip_cb65b1a2.connect(service, normalizeProps);
+    const triggerProps = api.getTriggerProps();
     const { trigger, positioner, content: contentSlot, arrow } = tooltipVariants({
         variant,
         size
     });
-    const triggerProps = api.getTriggerProps();
-    const { onBeforeInput, ...spanCompatibleProps } = triggerProps;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("span", {
-                ...spanCompatibleProps,
+                ...triggerProps,
                 className: trigger(),
                 ref: ref,
-                children: children
+                children: describeTooltipChildren(children, triggerProps["aria-describedby"])
             }),
             /*#__PURE__*/ jsx(Portal, {
                 children: api.open && /*#__PURE__*/ jsx("div", {

package/dist/internal/organisms/sidebar.styles.js

@@ -9,7 +9,7 @@ const sidebarVariants = tv({
         desktopPanel: [
             "group/sidebar-panel sticky top-sidebar-offset hidden h-sidebar-viewport shrink-0 flex-col overflow-hidden",
             "sidebar-desktop:flex bg-sidebar-panel-bg text-sidebar-panel-fg",
-            "border-sidebar-panel-border transition-all duration-(--duration-sidebar) motion-reduce:transition-none",
+            "border-sidebar-panel-border transition-[width,background-color,border-color] duration-(--duration-sidebar) motion-reduce:transition-none",
             "focus-visible:sidebar-focus-ring",
             "data-[side=start]:border-e-(length:--border-width-sidebar)",
             "data-[side=end]:border-s-(length:--border-width-sidebar)"

package/dist/molecules/accordion.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { normalizeProps, useMachine } from "@zag-js/react";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
 import { tv } from "../utils.js";
@@ -10,8 +10,7 @@ const accordionVariants = tv({
         root: [
             "flex w-full flex-col",
             "rounded-accordion bg-accordion-bg",
-            "transition-all duration-200",
-            "transition-all duration-200 motion-reduce:transition-none"
+            "transition duration-200 motion-reduce:transition-none"
         ],
         item: "",
         title: "grid place-items-start",
@@ -21,7 +20,7 @@ const accordionVariants = tv({
             "font-accordion-title",
             "bg-accordion-title-bg text-accordion-title-fg",
             "hover:bg-accordion-title-bg-hover",
-            "pr-accordion-icon-right",
+            "pe-accordion-icon-right",
             "data-[disabled=true]:cursor-not-allowed"
         ],
         subtitle: [
@@ -171,9 +170,17 @@ Accordion.Item = function({ value, disabled, children, ref, className, ...props
 Accordion.Header = function({ children, ref, className, ...props }) {
     const { api, styles } = useAccordionContext();
     const { value, disabled } = useAccordionItemContext();
-    return /*#__PURE__*/ jsx("header", {
+    const headingRef = useMemo(()=>{
+        if ("function" == typeof ref || !ref) return ref;
+        return (node)=>{
+            ref.current = node;
+        };
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ jsx("h3", {
         className: className,
-        ref: ref,
+        ref: headingRef,
         ...props,
         children: /*#__PURE__*/ jsx(Button, {
             className: styles.titleTrigger(),

package/dist/molecules/carousel.js

@@ -21,7 +21,7 @@ const carouselVariants = tv({
         ],
         slideGroup: [
             "overflow-hidden",
-            "scrollbar-hide",
+            "scrollbar-none",
             "data-dragging:cursor-grabbing",
             "data-[orientation=vertical]:h-full"
         ],
@@ -29,7 +29,7 @@ const carouselVariants = tv({
             "relative shrink-0",
             "flex items-center justify-center",
             "overflow-hidden",
-            "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-full"
+            "data-[orientation=vertical]:size-full"
         ],
         prevTrigger: "",
         nextTrigger: "",
@@ -77,22 +77,22 @@ const carouselVariants = tv({
                 "nextTrigger"
             ],
             class: [
-                'bg-carousel-trigger-bg-base hover:bg-carousel-trigger-bg-hover text-carousel-trigger',
-                'hover:text-carousel-trigger-fg-hover',
-                'transition-colors duration-200 motion-reduce:transition-none'
+                "bg-carousel-trigger-bg-base text-carousel-trigger hover:bg-carousel-trigger-bg-hover",
+                "hover:text-carousel-trigger-fg-hover",
+                "transition-colors duration-200 motion-reduce:transition-none"
             ]
         }
     ],
     variants: {
         objectFit: {
             cover: {
-                slide: "*:h-full *:w-full *:object-cover"
+                slide: "*:size-full *:object-cover"
             },
             contain: {
-                slide: "*:h-full *:w-full *:object-contain"
+                slide: "*:size-full *:object-contain"
             },
             fill: {
-                slide: "*:h-full *:w-full *:object-fill"
+                slide: "*:size-full *:object-fill"
             },
             none: {
                 slide: ""
@@ -103,10 +103,10 @@ const carouselVariants = tv({
                 control: "flex-col items-center justify-between"
             },
             top: {
-                control: "-translate-x-1/2 absolute top-0 left-1/2"
+                control: "absolute top-0 left-1/2 -translate-x-1/2"
             },
             bottom: {
-                control: "-translate-x-1/2 absolute bottom-0 left-1/2"
+                control: "absolute bottom-0 left-1/2 -translate-x-1/2"
             },
             unset: {}
         },
@@ -211,20 +211,20 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = "horizontal"
     const rootProps = api.getRootProps();
     const resolvedRootStyle = {
         ...rootProps.style,
-        ...void 0 !== width ? {
+        ...void 0 === width ? {} : {
             width
-        } : {},
-        ...void 0 !== height ? {
+        },
+        ...void 0 === height ? {} : {
             height
-        } : {}
+        }
     };
     const resolvedWrapperStyle = {
         ..."full" === size ? {
             width: "100%"
         } : {},
-        ...void 0 !== width ? {
+        ...void 0 === width ? {} : {
             width
-        } : {}
+        }
     };
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
         value: {

package/dist/molecules/cascade-select.js

@@ -23,7 +23,7 @@ const cascadeSelectVariants = tv({
             "form-control-base group w-full",
             "flex items-center justify-between gap-0",
             "border-cascade-select-trigger-border",
-            "text-left font-normal",
+            "text-start font-normal",
             "hover:border-cascade-select-trigger-border-hover",
             "hover:bg-cascade-select-trigger-bg-hover",
             "focus:border-cascade-select-trigger-border-focus",
@@ -48,7 +48,7 @@ const cascadeSelectVariants = tv({
             "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
-        clearTrigger: "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden",
+        clearTrigger: "-translate-y-1/2 absolute end-cascade-select-right top-1/2 data-readonly:hidden",
         content: [
             "popup-surface-base flex w-max min-w-(--reference-width) max-w-(--available-width) overflow-x-auto",
             "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",