From 98ee18c5858323728998dbd86d4feacd2e32ee16 Mon Sep 17 00:00:00 2001 From: Petr Glaser Date: Thu, 8 Oct 2026 15:08:06 +0200 Subject: [PATCH 1/2] fix(ui-kit): apply good-css interaction, RTL and theming fixes - Hover styles only apply on devices with a fine pointer, so tapped controls no longer keep their hover colour on touch screens. - Small form fields floor at 16px so iOS Safari stops zooming on focus. - Replace transition-all with explicit property lists; add strong ease-out / ease-in-out motion tokens and drop ease-in from the drawer. - Replace outline-none with outline-hidden so forced-colors mode keeps a focus ring; draw the highlighted popup option in forced-colors mode. - Switch direction-dependent spacing, insets, corners and text alignment to logical properties so RTL layouts mirror correctly. - Add a base layer: text-wrap balance/pretty, interpolate-size, scrollbar-gutter, touch-action and tap-highlight defaults. - Collapse the four duplicated light/dark state-offset blocks into one --theme-sign switch. - Style :user-invalid on Input and Textarea; add press feedback to Button. - Use overflow-clip on wrappers that only clip; write greys with hue `none` (generator + regenerated Figma tokens) and shadows in OKLCH. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../scripts/merge-figma-themes.mjs | 13 +++- libs/ui/src/atoms/button.tsx | 6 +- libs/ui/src/atoms/checkbox.tsx | 2 +- libs/ui/src/atoms/input.tsx | 8 ++- libs/ui/src/atoms/numeric-input.tsx | 10 +-- libs/ui/src/atoms/skeleton.tsx | 2 +- libs/ui/src/atoms/textarea.tsx | 7 +- .../src/internal/organisms/sidebar.styles.ts | 2 +- libs/ui/src/molecules/accordion.tsx | 5 +- libs/ui/src/molecules/cascade-select.tsx | 4 +- libs/ui/src/molecules/color-select.tsx | 4 +- libs/ui/src/molecules/combobox.tsx | 4 +- libs/ui/src/molecules/date-picker.tsx | 14 ++-- libs/ui/src/molecules/dialog.tsx | 6 +- libs/ui/src/molecules/file-upload.tsx | 2 +- libs/ui/src/molecules/form-checkbox.tsx | 4 +- libs/ui/src/molecules/phone-input.tsx | 6 +- libs/ui/src/molecules/popover.tsx | 4 +- libs/ui/src/molecules/radio-card.tsx | 14 ++-- libs/ui/src/molecules/select.tsx | 4 +- libs/ui/src/molecules/slider.tsx | 2 +- libs/ui/src/molecules/steps.tsx | 4 +- libs/ui/src/molecules/toast.tsx | 2 +- libs/ui/src/molecules/tour.tsx | 2 +- libs/ui/src/molecules/tree-view.tsx | 2 +- libs/ui/src/organisms/data-table.tsx | 2 +- libs/ui/src/organisms/gallery.tsx | 4 +- libs/ui/src/organisms/table.tsx | 4 +- libs/ui/src/tokens/_base.css | 21 ++++-- libs/ui/src/tokens/_reset.css | 66 +++++++++++++++++ libs/ui/src/tokens/_semantic.css | 71 ++++++++----------- libs/ui/src/tokens/_tokens-base.css | 3 + .../src/tokens/components/_popup-surface.css | 16 ++++- .../ui/src/tokens/components/atoms/_badge.css | 2 +- .../tokens/components/molecules/_drawer.css | 10 +-- .../molecules/_vertical-navigation.css | 2 +- .../components/organisms/_data-table.css | 2 +- libs/ui/src/tokens/figma/brand-overrides.css | 30 ++++---- libs/ui/src/tokens/figma/variables.css | 22 +++--- libs/ui/src/tokens/theme.css | 2 +- 40 files changed, 242 insertions(+), 148 deletions(-) create mode 100644 libs/ui/src/tokens/_reset.css diff --git a/.agents/skills/figma-token-binding/scripts/merge-figma-themes.mjs b/.agents/skills/figma-token-binding/scripts/merge-figma-themes.mjs index 89ed150c03..1fa490a70c 100644 --- a/.agents/skills/figma-token-binding/scripts/merge-figma-themes.mjs +++ b/.agents/skills/figma-token-binding/scripts/merge-figma-themes.mjs @@ -59,12 +59,23 @@ const BRANDS = [ const DECL_RE = /^\s*(--[a-z0-9-]+):\s*([^;]+);/gm +/* + * Figma exports neutral greys as `oklch(L 0 0)`. A hue of 0 is red, so any + * `oklch(from …)` or `color-mix(in oklch, …)` derived from a grey drifts + * toward red. `none` marks the hue as missing and keeps derived tints neutral. + */ +const GREY_HUE_RE = /oklch\(\s*([^\s)]+)\s+0\s+0(?=\s*[/)])/g + +function normalizeValue(value) { + return value.replace(GREY_HUE_RE, "oklch($1 0 none") +} + function parseDecls(relDir) { const css = readFileSync(join(FIGMA_DIR, relDir, "variables.css"), "utf8") const out = new Map() DECL_RE.lastIndex = 0 for (const m of css.matchAll(DECL_RE)) { - out.set(m[1], m[2].trim()) + out.set(m[1], normalizeValue(m[2].trim())) } return out } diff --git a/libs/ui/src/atoms/button.tsx b/libs/ui/src/atoms/button.tsx index 4820190887..42dd958ebe 100644 --- a/libs/ui/src/atoms/button.tsx +++ b/libs/ui/src/atoms/button.tsx @@ -19,7 +19,9 @@ export 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", + // Press feedback; the tap highlight is disabled globally. + "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)", @@ -300,7 +302,7 @@ export function Button({ > {isLoading ? ( <> - + {loadingText || children} ) : ( diff --git a/libs/ui/src/atoms/checkbox.tsx b/libs/ui/src/atoms/checkbox.tsx index 0d0379e830..47fdcbf77a 100644 --- a/libs/ui/src/atoms/checkbox.tsx +++ b/libs/ui/src/atoms/checkbox.tsx @@ -35,7 +35,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)", diff --git a/libs/ui/src/atoms/input.tsx b/libs/ui/src/atoms/input.tsx index 668312ff47..f161f2fd33 100644 --- a/libs/ui/src/atoms/input.tsx +++ b/libs/ui/src/atoms/input.tsx @@ -23,13 +23,19 @@ 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", + // Native constraint validation (required, type, pattern…) once the user + // has interacted with the field — never on first render. + "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: { diff --git a/libs/ui/src/atoms/numeric-input.tsx b/libs/ui/src/atoms/numeric-input.tsx index 3eb5e0fefa..bd54972444 100644 --- a/libs/ui/src/atoms/numeric-input.tsx +++ b/libs/ui/src/atoms/numeric-input.tsx @@ -34,7 +34,7 @@ const numericInputVariants = tv({ container: [ "group form-control-base relative flex", "border-numeric-input-border", - "items-center overflow-hidden", + "items-center overflow-clip", "hover:border-numeric-input-border-hover", "focus-within:border-numeric-input-border-focus", "data-disabled:bg-numeric-input-bg-disabled", @@ -58,7 +58,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", ], // Subtle divider from the input instead of a gray fill block; the gap-px @@ -87,19 +87,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", }, }, }, diff --git a/libs/ui/src/atoms/skeleton.tsx b/libs/ui/src/atoms/skeleton.tsx index 3074643e29..68ebd1ace4 100644 --- a/libs/ui/src/atoms/skeleton.tsx +++ b/libs/ui/src/atoms/skeleton.tsx @@ -20,7 +20,7 @@ import { tv } from "../utils" const skeletonVariants = tv({ slots: { - root: ["relative overflow-hidden"], + root: ["relative overflow-clip"], rectangle: "w-full", circle: ["rounded-full", "shrink-0"], textContainer: ["flex", "flex-col"], diff --git a/libs/ui/src/atoms/textarea.tsx b/libs/ui/src/atoms/textarea.tsx index bc3f287f4c..f214a755a4 100644 --- a/libs/ui/src/atoms/textarea.tsx +++ b/libs/ui/src/atoms/textarea.tsx @@ -23,13 +23,18 @@ 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", + // Native constraint validation once the user has interacted with the field. + "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: { diff --git a/libs/ui/src/internal/organisms/sidebar.styles.ts b/libs/ui/src/internal/organisms/sidebar.styles.ts index aba54096ce..f2f3518001 100644 --- a/libs/ui/src/internal/organisms/sidebar.styles.ts +++ b/libs/ui/src/internal/organisms/sidebar.styles.ts @@ -11,7 +11,7 @@ export 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)", diff --git a/libs/ui/src/molecules/accordion.tsx b/libs/ui/src/molecules/accordion.tsx index 14a5359144..a66163375f 100644 --- a/libs/ui/src/molecules/accordion.tsx +++ b/libs/ui/src/molecules/accordion.tsx @@ -28,8 +28,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", @@ -39,7 +38,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: ["text-accordion-subtitle-fg"], diff --git a/libs/ui/src/molecules/cascade-select.tsx b/libs/ui/src/molecules/cascade-select.tsx index 6f2928af37..21d0a94a47 100644 --- a/libs/ui/src/molecules/cascade-select.tsx +++ b/libs/ui/src/molecules/cascade-select.tsx @@ -80,7 +80,7 @@ export 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", @@ -106,7 +106,7 @@ export const cascadeSelectVariants = tv({ "transition-colors duration-200 motion-reduce:transition-none", ], clearTrigger: - "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden", + "-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]", diff --git a/libs/ui/src/molecules/color-select.tsx b/libs/ui/src/molecules/color-select.tsx index ff61a58999..0a059ac8be 100644 --- a/libs/ui/src/molecules/color-select.tsx +++ b/libs/ui/src/molecules/color-select.tsx @@ -19,8 +19,8 @@ const colorSelectVariants = tv({ cell: "grid", atom: [ "relative cursor-pointer p-color-select-atom", - "aspect-square overflow-hidden", - "border-2 transition-all duration-200 motion-reduce:transition-none", + "aspect-square overflow-clip", + "border-2 transition duration-200 motion-reduce:transition-none", "border-color-select-border shadow-color-select hover:border-color-select-border-hover", "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)", "focus-visible:outline-color-select-ring", diff --git a/libs/ui/src/molecules/combobox.tsx b/libs/ui/src/molecules/combobox.tsx index 3e8d8492e6..e50ff929b0 100644 --- a/libs/ui/src/molecules/combobox.tsx +++ b/libs/ui/src/molecules/combobox.tsx @@ -31,7 +31,7 @@ const comboboxVariants = tv({ root: ["relative flex w-full flex-col"], label: ["block font-label text-label-md"], control: [ - "form-control-base relative flex w-full items-center overflow-hidden", + "form-control-base relative flex w-full items-center overflow-clip", "bg-combobox-bg-base", "transition-colors duration-200 ease-in-out motion-reduce:transition-none", "hover:border-combobox-border-hover hover:bg-combobox-bg-hover", @@ -49,7 +49,7 @@ const comboboxVariants = tv({ ], input: [ "relative h-full min-w-0 flex-1 border-none bg-combobox-input-bg-base", - "hover:bg-combobox-input-bg-hover focus-visible:outline-none", + "hover:bg-combobox-input-bg-hover focus-visible:outline-hidden", "focus:bg-combobox-input-bg-focus", "placeholder:text-combobox-fg-placeholder", "data-disabled:text-combobox-fg-disabled", diff --git a/libs/ui/src/molecules/date-picker.tsx b/libs/ui/src/molecules/date-picker.tsx index 0ab23a95b3..0507b2e934 100644 --- a/libs/ui/src/molecules/date-picker.tsx +++ b/libs/ui/src/molecules/date-picker.tsx @@ -192,14 +192,14 @@ const datePickerVariants = tv({ "transition-colors duration-200 motion-reduce:transition-none", ], segments: [ - "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-none", + "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-hidden", "data-disabled:overflow-hidden", ], segmentGroup: "flex min-w-0 items-center", rangeSeparator: "shrink-0 px-date-picker-range-separator text-date-picker-range-separator-fg", segment: [ - "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-none", + "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-hidden", "data-placeholder-shown:text-date-picker-segment-fg-placeholder", "focus:bg-date-picker-segment-bg-focus", "data-[type=literal]:min-h-0 data-[type=literal]:min-w-0 data-[type=literal]:px-0 data-[type=literal]:text-date-picker-control-fg", @@ -235,7 +235,7 @@ const datePickerVariants = tv({ "data-[selection-mode=range]:w-date-picker-content-range", "border-(length:--border-width-date-picker-content) border-date-picker-content-border", "rounded-date-picker-content bg-date-picker-content-bg text-date-picker-content-fg shadow-date-picker-content", - "outline-none duration-200 ease-out", + "outline-hidden duration-200 ease-out", "motion-safe:transition motion-reduce:transition-none", "starting:-translate-y-date-picker-enter-offset starting:opacity-0", ], @@ -245,7 +245,7 @@ const datePickerVariants = tv({ ], monthPanel: [ "grid min-w-0 content-start gap-date-picker-calendar", - "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:pl-date-picker-content", + "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:ps-date-picker-content", ], view: "min-w-0", viewControl: @@ -283,8 +283,8 @@ const datePickerVariants = tv({ "data-today:border-date-picker-day-today-border", "data-in-range:rounded-none data-in-range:bg-date-picker-day-bg-range", "data-in-hover-range:rounded-none data-in-hover-range:bg-date-picker-day-bg-range-hover", - "data-range-start:rounded-date-picker-day data-range-start:rounded-r-none", - "data-range-end:rounded-date-picker-day data-range-end:rounded-l-none", + "data-range-start:rounded-date-picker-day data-range-start:rounded-e-none", + "data-range-end:rounded-date-picker-day data-range-end:rounded-s-none", "data-range-start:bg-date-picker-day-bg-selected data-range-end:bg-date-picker-day-bg-selected", "data-range-start:text-date-picker-day-fg-selected data-range-end:text-date-picker-day-fg-selected", "data-selected:bg-date-picker-day-bg-selected data-selected:text-date-picker-day-fg-selected", @@ -313,7 +313,7 @@ const datePickerVariants = tv({ timeGroup: [ "flex min-w-0 items-center gap-date-picker-time", "data-[index=1]:border-date-picker-time-border data-[index=1]:border-t data-[index=1]:pt-date-picker-time", - "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:pl-date-picker-time", + "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:ps-date-picker-time", ], timeGroupLabel: "shrink-0 font-date-picker-view text-date-picker-time-label-fg text-date-picker-time-label", diff --git a/libs/ui/src/molecules/dialog.tsx b/libs/ui/src/molecules/dialog.tsx index 0d1aba3ac9..e1aaab6e7e 100644 --- a/libs/ui/src/molecules/dialog.tsx +++ b/libs/ui/src/molecules/dialog.tsx @@ -36,7 +36,7 @@ const dialogVariants = tv({ // Positioning only — the close button is an ActionIcon that owns its size, // glyph and neutral hover pill. closeTrigger: [ - "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset", + "absolute end-dialog-close-trigger-offset top-dialog-close-trigger-offset", ], actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions-top", @@ -50,11 +50,11 @@ const dialogVariants = tv({ }, left: { positioner: "items-stretch justify-start", - content: "h-full rounded-dialog-content-side border-l-0", + content: "h-full rounded-dialog-content-side border-s-0", }, right: { positioner: "items-stretch justify-end", - content: "h-full rounded-dialog-content-side border-r-0", + content: "h-full rounded-dialog-content-side border-e-0", }, top: { positioner: "items-start justify-stretch", diff --git a/libs/ui/src/molecules/file-upload.tsx b/libs/ui/src/molecules/file-upload.tsx index 97279d6a52..f2126ee5ca 100644 --- a/libs/ui/src/molecules/file-upload.tsx +++ b/libs/ui/src/molecules/file-upload.tsx @@ -61,7 +61,7 @@ const fileUploadStyles = tv({ "data-disabled:text-file-upload-item-disabled-fg", ], itemPreview: [ - "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-hidden rounded-file-upload-item-preview text-file-upload-item-preview-fg", + "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-clip rounded-file-upload-item-preview text-file-upload-item-preview-fg", "data-disabled:text-file-upload-item-disabled-fg", ], itemPreviewImage: "size-full object-cover", diff --git a/libs/ui/src/molecules/form-checkbox.tsx b/libs/ui/src/molecules/form-checkbox.tsx index 228f8a862e..6e090ae696 100644 --- a/libs/ui/src/molecules/form-checkbox.tsx +++ b/libs/ui/src/molecules/form-checkbox.tsx @@ -24,7 +24,7 @@ const checkboxVariants = tv({ "rounded-checkbox border border-checkbox-border-base", "bg-checkbox-bg-base", "flex items-center justify-center", - "transition-all duration-200 motion-reduce:transition-none", + "transition duration-200 motion-reduce:transition-none", "data-[state=checked]:bg-checkbox-bg-checked", "data-[state=checked]:border-checkbox-border-checked", "data-[state=indeterminate]:bg-checkbox-bg-indeterminate", @@ -53,7 +53,7 @@ const checkboxVariants = tv({ "data-disabled:text-label-fg-disabled", ], hiddenInput: "sr-only", - textIndented: "data-[icon=false]:pl-form-checkbox-text-offset", + textIndented: "data-[icon=false]:ps-form-checkbox-text-offset", }, variants: { size: { diff --git a/libs/ui/src/molecules/phone-input.tsx b/libs/ui/src/molecules/phone-input.tsx index 57f3e18119..e9df3370c6 100644 --- a/libs/ui/src/molecules/phone-input.tsx +++ b/libs/ui/src/molecules/phone-input.tsx @@ -95,7 +95,7 @@ const phoneInputVariants = tv({ root: ["relative flex w-full flex-col gap-phone-input"], control: [ "form-control-base", - "relative flex w-full items-center overflow-hidden", + "relative flex w-full items-center overflow-clip", "text-phone-input-fg", "hover:border-phone-input-border-hover hover:bg-phone-input-bg-hover", "phone-input-focus", @@ -124,7 +124,7 @@ const phoneInputVariants = tv({ "bg-phone-input-trigger-bg-base", "hover:bg-phone-input-trigger-bg-hover", "border-(length:--border-phone-input-trigger)", - "focus-visible:outline-none", + "focus-visible:outline-hidden", "w-phone-input-trigger", "focus-visible:bg-phone-input-trigger-bg-hover", // Sits flush against the input: round only the leading (left) corners to @@ -148,7 +148,7 @@ const phoneInputVariants = tv({ "placeholder:text-phone-input-fg-placeholder", "hover:bg-phone-input-input-bg-hover", "focus:bg-phone-input-input-bg-focus", - "focus-visible:outline-none", + "focus-visible:outline-hidden", "disabled:text-phone-input-fg-disabled", ], itemContent: ["flex min-w-0 items-center gap-phone-input-item"], diff --git a/libs/ui/src/molecules/popover.tsx b/libs/ui/src/molecules/popover.tsx index 94d2aa936f..93bc23c743 100644 --- a/libs/ui/src/molecules/popover.tsx +++ b/libs/ui/src/molecules/popover.tsx @@ -42,7 +42,7 @@ const popoverVariants = tv({ "bg-popover-bg", "text-popover-fg", "rounded-popover", - "outline-none", + "outline-hidden", "z-50", "relative", ], @@ -53,7 +53,7 @@ const popoverVariants = tv({ "text-popover-description text-popover-description-fg", "leading-normal", ], - closeTrigger: ["absolute top-2 right-2"], + closeTrigger: ["absolute end-2 top-2"], }, variants: { shadow: { diff --git a/libs/ui/src/molecules/radio-card.tsx b/libs/ui/src/molecules/radio-card.tsx index 36c4b006ec..60cf3662fd 100644 --- a/libs/ui/src/molecules/radio-card.tsx +++ b/libs/ui/src/molecules/radio-card.tsx @@ -34,7 +34,7 @@ const radioCardVariants = tv({ slots: { root: ["flex w-full flex-col"], item: [ - "relative flex min-w-0 flex-col overflow-hidden", + "relative flex min-w-0 flex-col overflow-clip", "rounded-radio-card-item", "border-(length:--border-width-radio-card)", "border-radio-card-item-border", @@ -242,9 +242,9 @@ const radioCardVariants = tv({ start: { itemControl: "items-start", itemContent: "items-start", - itemText: "text-left", - itemDescription: "text-left", - itemAddon: "text-left", + itemText: "text-start", + itemDescription: "text-start", + itemAddon: "text-start", }, center: { itemControl: "items-center", @@ -256,9 +256,9 @@ const radioCardVariants = tv({ end: { itemControl: "items-end", itemContent: "items-end", - itemText: "text-right", - itemDescription: "text-right", - itemAddon: "text-right", + itemText: "text-end", + itemDescription: "text-end", + itemAddon: "text-end", }, }, justify: { diff --git a/libs/ui/src/molecules/select.tsx b/libs/ui/src/molecules/select.tsx index c66bae1aaa..6341da0072 100644 --- a/libs/ui/src/molecules/select.tsx +++ b/libs/ui/src/molecules/select.tsx @@ -59,7 +59,7 @@ const selectVariants = tv({ "group", "flex items-center justify-between gap-0", "font-normal", - "text-left", + "text-start", "hover:bg-select-trigger-bg-hover", "hover:border-select-trigger-border-hover", "focus:border-select-trigger-border-focus", @@ -86,7 +86,7 @@ const selectVariants = tv({ ], // Clear (an ActionIcon) sits just left of the chevron with no gap; it owns // its own size, glyph and neutral hover pill. - clearTrigger: ["-translate-y-1/2 absolute top-1/2 right-select-right"], + clearTrigger: ["-translate-y-1/2 absolute end-select-right top-1/2"], content: [ "popup-surface-base", "w-full", diff --git a/libs/ui/src/molecules/slider.tsx b/libs/ui/src/molecules/slider.tsx index d86abc4637..b734aa6425 100644 --- a/libs/ui/src/molecules/slider.tsx +++ b/libs/ui/src/molecules/slider.tsx @@ -78,7 +78,7 @@ const sliderVariants = tv({ ], markerText: [ "absolute top-full", - "data-[orientation=vertical]:top-0 data-[orientation=vertical]:left-full", + "data-[orientation=vertical]:top-0 data-[orientation=vertical]:start-full", "data-[orientation=vertical]:h-full", "data-[orientation=vertical]:p-marker-text", ], diff --git a/libs/ui/src/molecules/steps.tsx b/libs/ui/src/molecules/steps.tsx index 15b0bff2de..b7fe0685dc 100644 --- a/libs/ui/src/molecules/steps.tsx +++ b/libs/ui/src/molecules/steps.tsx @@ -53,7 +53,7 @@ const stepsVariants = tv({ ], trigger: [ "group relative flex min-w-0 items-center justify-start gap-steps-trigger", - "text-left", + "text-start", "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)", "focus-visible:outline-steps-ring", "focus-visible:outline-offset-(length:--default-ring-offset)", @@ -98,7 +98,7 @@ const stepsVariants = tv({ "transition-colors duration-200 motion-reduce:transition-none", ], progress: [ - "relative overflow-hidden rounded-steps-progress bg-steps-progress-bg", + "relative overflow-clip rounded-steps-progress bg-steps-progress-bg", "data-[orientation=horizontal]:h-steps-progress data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:w-steps-progress data-[orientation=vertical]:self-stretch", ], diff --git a/libs/ui/src/molecules/toast.tsx b/libs/ui/src/molecules/toast.tsx index bfce6a2fec..850f0e1952 100644 --- a/libs/ui/src/molecules/toast.tsx +++ b/libs/ui/src/molecules/toast.tsx @@ -22,7 +22,7 @@ const toastVariants = tv({ root: [ "relative flex flex-col rounded-toast-root", "border-(length:--border-width-toast) bg-toast-bg shadow-lg", - "w-toast-width overflow-hidden p-toast-root", + "w-toast-width overflow-clip p-toast-root", "data-[type=error]:border-toast-error-border data-[type=error]:bg-toast-error-bg", "data-[type=success]:border-toast-success-border data-[type=success]:bg-toast-success-bg", "data-[type=info]:border-toast-info-border data-[type=info]:bg-toast-info-bg", diff --git a/libs/ui/src/molecules/tour.tsx b/libs/ui/src/molecules/tour.tsx index a4c5cf1817..25dda58b5d 100644 --- a/libs/ui/src/molecules/tour.tsx +++ b/libs/ui/src/molecules/tour.tsx @@ -45,7 +45,7 @@ const tourStyles = tv({ spotlight: "tour-layer tour-spotlight-border", positioner: "tour-layer tour-positioner", content: - "tour-layer tour-content tour-border relative flex flex-col gap-tour-content rounded-tour bg-tour-bg p-tour text-tour-fg shadow-tour outline-none", + "tour-layer tour-content tour-border relative flex flex-col gap-tour-content rounded-tour bg-tour-bg p-tour text-tour-fg shadow-tour outline-hidden", arrow: "tour-arrow", arrowTip: "bg-tour-arrow-bg", title: "pe-tour-title font-tour-title text-tour-title-size", diff --git a/libs/ui/src/molecules/tree-view.tsx b/libs/ui/src/molecules/tree-view.tsx index 37d7fb83bc..5ea1c7e8ff 100644 --- a/libs/ui/src/molecules/tree-view.tsx +++ b/libs/ui/src/molecules/tree-view.tsx @@ -66,7 +66,7 @@ const treeViewVariants = tv({ branchIndicator: [ "group-hover:text-tree-view-fg-hover", "data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125", - "transition-all duration-200 motion-reduce:transition-none", + "transition duration-200 motion-reduce:transition-none", ], branchContent: ["relative", "data-[state=closed]:hidden"], indentGuide: [ diff --git a/libs/ui/src/organisms/data-table.tsx b/libs/ui/src/organisms/data-table.tsx index 06bebadbe8..75d7de15a5 100644 --- a/libs/ui/src/organisms/data-table.tsx +++ b/libs/ui/src/organisms/data-table.tsx @@ -174,7 +174,7 @@ const dataTableVariants = tv({ headerLabel: ["inline-flex items-center gap-100 whitespace-nowrap"], sortButton: [ "inline-flex items-center gap-100 whitespace-nowrap", - "cursor-pointer select-none bg-transparent text-left", + "cursor-pointer select-none bg-transparent text-start", "data-[disabled=true]:cursor-default", ], sortIcon: [ diff --git a/libs/ui/src/organisms/gallery.tsx b/libs/ui/src/organisms/gallery.tsx index cd59987bfd..73a66c6584 100644 --- a/libs/ui/src/organisms/gallery.tsx +++ b/libs/ui/src/organisms/gallery.tsx @@ -53,7 +53,7 @@ const galleryVariants = tv({ "relative shrink-0", "size-(--gallery-thumbnail-size)", "aspect-square", - "overflow-hidden rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg", + "overflow-clip rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg", "cursor-pointer p-gallery-trigger", "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)", "focus-visible:outline-gallery-trigger-ring", @@ -63,7 +63,7 @@ const galleryVariants = tv({ "shadow-gallery-trigger", "brightness-gallery-trigger", "hover:brightness-gallery-trigger-active data-active:brightness-gallery-trigger-active", - "transition-all duration-200 motion-reduce:transition-none", + "transition duration-200 motion-reduce:transition-none", "*:h-full *:w-full *:object-cover", ], }, diff --git a/libs/ui/src/organisms/table.tsx b/libs/ui/src/organisms/table.tsx index b20c4d95d5..44ba14413f 100644 --- a/libs/ui/src/organisms/table.tsx +++ b/libs/ui/src/organisms/table.tsx @@ -106,8 +106,8 @@ const tableVariants = tv({ showColumnBorder: { true: { columnHeader: - "border-r-(length:--border-table-width) border-table-border", - cell: "border-r-(length:--border-table-width) border-table-border", + "border-e-(length:--border-table-width) border-table-border", + cell: "border-e-(length:--border-table-width) border-table-border", }, }, captionPlacement: { diff --git a/libs/ui/src/tokens/_base.css b/libs/ui/src/tokens/_base.css index 8775471eb1..a7196cd2f0 100644 --- a/libs/ui/src/tokens/_base.css +++ b/libs/ui/src/tokens/_base.css @@ -5,9 +5,9 @@ --radius-lg: 12px; --radius-full: 9999px; - --color-shadow-1: light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 1)); - --color-shadow-2: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 1)); - --color-shadow-3: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1)); + --color-shadow-1: light-dark(oklch(0% 0 none / 0.16), oklch(0% 0 none)); + --color-shadow-2: light-dark(oklch(0% 0 none / 0.06), oklch(0% 0 none)); + --color-shadow-3: light-dark(oklch(0% 0 none / 0.1), oklch(0% 0 none)); --offset-shadow-1: 0px 1px 3px 0px; --offset-shadow-2: 0px 5px 6px 0px; @@ -17,9 +17,16 @@ var(--offset-shadow-1) var(--color-shadow-1), var(--offset-shadow-2) var(--color-shadow-2), var(--offset-shadow-3) var(--color-shadow-3); + /* Motion — strong ease-out for UI feedback, ease-in-out for on-screen + * movement. Never ease-in: it delays the response the user is waiting for. */ + --ease-out: cubic-bezier(0.23, 1, 0.32, 1); + --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); + --default-transition-timing-function: var(--ease-out); + /* Shadows */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04); + --shadow-sm: 0 1px 2px oklch(0% 0 none / 0.05); + --shadow-md: 0 4px 6px oklch(0% 0 none / 0.1); + --shadow-lg: 0 10px 15px oklch(0% 0 none / 0.1); + --shadow-xl: + 0 20px 25px oklch(0% 0 none / 0.15), 0 10px 10px oklch(0% 0 none / 0.04); } diff --git a/libs/ui/src/tokens/_reset.css b/libs/ui/src/tokens/_reset.css new file mode 100644 index 0000000000..8b105ceee2 --- /dev/null +++ b/libs/ui/src/tokens/_reset.css @@ -0,0 +1,66 @@ +/* + * Element defaults and interaction variants shared by every component. + * Based on the good-css.com reset, adopted rule by rule. + */ + +/* + * Tailwind's built-in hover: only checks (hover: hover). Hybrid and touch + * devices still report it, so a tapped control keeps its hover colour until + * the next tap elsewhere. Requiring a fine pointer limits hover to mice and + * trackpads. + */ +@custom-variant hover { + @media (hover: hover) and (pointer: fine) { + &:hover { + @slot; + } + } +} + +@layer base { + :root { + /* Lets height/width transition to and from `auto` (accordions, disclosures). */ + interpolate-size: allow-keywords; + /* Reserve the scrollbar track so locking scroll for a dialog does not shift + * the page. Zag's scroll lock detects this and skips its padding fallback. */ + scrollbar-gutter: stable; + /* Avoid single-word last lines in body copy. */ + text-wrap: pretty; + -webkit-text-size-adjust: none; + text-size-adjust: none; + /* Components draw their own :active state. */ + -webkit-tap-highlight-color: transparent; + } + + :where(h1, h2, h3, h4, h5, h6) { + text-wrap: balance; + } + + /* Removes the double-tap-to-zoom delay on controls. */ + :where( + a, + button, + label, + select, + summary, + [role="button"], + [role="option"], + [role="tab"], + input:is([type="checkbox"], [type="radio"]) + ) { + touch-action: manipulation; + } +} + +/* + * iOS Safari zooms the page into any focused field whose text is under 16px. + * The fluid --text-sm step drops below that on phones, so small fields floor + * at 16px. Unlayered so it wins over the Figma @theme values. + */ +:root { + --text-input-sm: max(16px, var(--text-sm)); + --text-textarea-sm: max(16px, var(--text-sm)); + --text-numeric-input-sm: max(16px, var(--text-sm)); + --text-combobox-sm: max(16px, var(--text-sm)); + --text-phone-input-sm: max(16px, var(--text-sm)); +} diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css index 8e70d951aa..d7276853b9 100644 --- a/libs/ui/src/tokens/_semantic.css +++ b/libs/ui/src/tokens/_semantic.css @@ -5,86 +5,71 @@ * - --alpha(var(--color) / 50%): Adjusts transparency of a color. Tailwind's v4 utility * that compiles to color-mix() for better browser support. */ + +/* + * Theme-direction switch: 1 on light surfaces, -1 on dark ones. Every + * lightness offset below is written once and flips with it, so a dark + * surface lightens on hover where a light one darkens. + */ :root { - --state-hover: -0.08; - --state-active: -0.12; + --theme-sign: 1; --state-disabled-chroma: 0.01; --state-light-variant: 0.1; /* Always make colors lighter for -light variant */ --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */ - --state-secondary-text: 0.15; --state-border: 15%; - --state-placeholder: 0.25; --max-lightness: 0.97; --opacity-disabled: 60%; --opacity-placeholder: 60%; --opacity-text-secondary: 70%; --opacity-disabled-placeholder: 30%; --fill-increment: 5%; - --surface-increment: 0.05; - --state-fg-lightness: 0.42; /* Accent color lightness for text - WCAG AAA on light bg */ +} + +/* + * Custom properties resolve where they are declared, so the derived offsets + * are re-declared on every element that can change --theme-sign. + */ +:where(:root, .light, .always-light, .dark, .always-dark, .reverse) { + --state-hover: calc(-0.08 * var(--theme-sign)); + --state-active: calc(-0.12 * var(--theme-sign)); + --state-secondary-text: calc(0.15 * var(--theme-sign)); + --state-placeholder: calc(0.25 * var(--theme-sign)); + --surface-increment: calc(0.05 * var(--theme-sign)); + /* Accent text lightness: 0.42 on light (WCAG AAA), 0.85 on dark. */ + --state-fg-lightness: calc(0.635 - 0.215 * var(--theme-sign)); } /* Explicit Dark class(es) */ :is(.dark, .always-dark) { - --state-hover: 0.08; - --state-active: 0.12; - --state-secondary-text: -0.15; - --state-placeholder: -0.25; - --surface-increment: -0.05; - --state-fg-lightness: 0.85; + --theme-sign: -1; } /* System Dark preference (when no explicit class forces light) */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.always-light) { - --state-hover: 0.08; - --state-active: 0.12; - --state-secondary-text: -0.15; - --state-placeholder: -0.25; - --surface-increment: -0.05; - --state-fg-lightness: 0.85; + --theme-sign: -1; } } -/* Reverse if parents has .always-light/dark and we want to make reverse style to parent */ +/* Reverse flips whatever its parent theme is. */ :is(.light, .always-light) .reverse { - --state-hover: 0.08; - --state-active: 0.12; - --state-secondary-text: -0.15; - --state-placeholder: -0.25; - --surface-increment: -0.05; - --state-fg-lightness: 0.85; + --theme-sign: -1; } :is(.dark, .always-dark) .reverse { - --state-hover: -0.08; - --state-active: -0.12; - --state-secondary-text: 0.15; - --state-placeholder: 0.25; - --surface-increment: 0.05; - --state-fg-lightness: 0.42; + --theme-sign: 1; } /* Reverse on System Light/Dark preference (when no explicit theme class is present) */ @media (prefers-color-scheme: light) { .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) { - --state-hover: 0.08; - --state-active: 0.12; - --state-secondary-text: -0.15; - --state-placeholder: -0.25; - --surface-increment: -0.05; - --state-fg-lightness: 0.85; + --theme-sign: -1; } } @media (prefers-color-scheme: dark) { .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) { - --state-hover: -0.08; - --state-active: -0.12; - --state-secondary-text: 0.15; - --state-placeholder: 0.25; - --surface-increment: 0.05; - --state-fg-lightness: 0.42; + --theme-sign: 1; } } diff --git a/libs/ui/src/tokens/_tokens-base.css b/libs/ui/src/tokens/_tokens-base.css index 57a877ac67..9244048e29 100644 --- a/libs/ui/src/tokens/_tokens-base.css +++ b/libs/ui/src/tokens/_tokens-base.css @@ -26,6 +26,9 @@ * (e.g. neo) emit tokens here; base is the default @theme above. */ @import "./figma/brand-overrides.css"; +/* Element defaults, the hover variant and the mobile input-size floor. */ +@import "./_reset.css"; + /* Base styles */ :root { color-scheme: light dark; diff --git a/libs/ui/src/tokens/components/_popup-surface.css b/libs/ui/src/tokens/components/_popup-surface.css index b7105655b6..951728b7d3 100644 --- a/libs/ui/src/tokens/components/_popup-surface.css +++ b/libs/ui/src/tokens/components/_popup-surface.css @@ -79,8 +79,9 @@ z-index: calc(var(--z-popup) + var(--layer-index, 0)); /* The panel takes DOM focus for keyboard navigation, but that focus is - * never the thing the user should see — the highlighted option is. */ - outline: none; + * never the thing the user should see — the highlighted option is. + * Transparent rather than none, so forced-colors mode still draws it. */ + outline: 2px solid transparent; /* Scale from the trigger, whichever side the panel flipped to. */ transform-origin: var(--transform-origin); @@ -159,5 +160,14 @@ /* Highlight is the focus affordance; a second ring on top of it reads as * two selected rows. */ - outline: none; + outline-style: none; + + /* Forced-colors mode drops the highlight background, so the active option + * would be invisible. Draw it as an outline instead. */ + @media (forced-colors: active) { + &[data-highlighted] { + outline: 2px solid Highlight; + outline-offset: -2px; + } + } } diff --git a/libs/ui/src/tokens/components/atoms/_badge.css b/libs/ui/src/tokens/components/atoms/_badge.css index 19364c0cb9..f4ef221071 100644 --- a/libs/ui/src/tokens/components/atoms/_badge.css +++ b/libs/ui/src/tokens/components/atoms/_badge.css @@ -11,5 +11,5 @@ */ @theme static { - --color-badge-border: oklch(0 0 0 / 0); + --color-badge-border: oklch(0 0 none / 0); } diff --git a/libs/ui/src/tokens/components/molecules/_drawer.css b/libs/ui/src/tokens/components/molecules/_drawer.css index b9b57cf210..95d0dbc340 100644 --- a/libs/ui/src/tokens/components/molecules/_drawer.css +++ b/libs/ui/src/tokens/components/molecules/_drawer.css @@ -163,7 +163,7 @@ var(--duration-drawer-backdrop-exit) * var(--drawer-swipe-strength, 1) ) - ease-in both; + var(--ease-in-out) both; } &[data-swiping] { @@ -200,25 +200,25 @@ &[data-state="closed"][data-swipe-direction="left"] { animation: drawer-exit-left calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1)) - ease-in both; + var(--ease-in-out) both; } &[data-state="closed"][data-swipe-direction="right"] { animation: drawer-exit-right calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1)) - ease-in both; + var(--ease-in-out) both; } &[data-state="closed"][data-swipe-direction="up"] { animation: drawer-exit-up calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1)) - ease-in both; + var(--ease-in-out) both; } &[data-state="closed"][data-swipe-direction="down"] { animation: drawer-exit-down calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1)) - ease-in both; + var(--ease-in-out) both; } @starting-style { diff --git a/libs/ui/src/tokens/components/molecules/_vertical-navigation.css b/libs/ui/src/tokens/components/molecules/_vertical-navigation.css index 61ab89e6b1..a95de13a89 100644 --- a/libs/ui/src/tokens/components/molecules/_vertical-navigation.css +++ b/libs/ui/src/tokens/components/molecules/_vertical-navigation.css @@ -126,7 +126,7 @@ flex-shrink: 0; } - @media (hover: hover) { + @media (hover: hover) and (pointer: fine) { &:hover:not(:has(> [data-part="link"][data-current])):has( > [data-part="link"]:not([data-disabled]), > [data-part="branch-trigger"]:not(:disabled) diff --git a/libs/ui/src/tokens/components/organisms/_data-table.css b/libs/ui/src/tokens/components/organisms/_data-table.css index b2d048323f..36f551e749 100644 --- a/libs/ui/src/tokens/components/organisms/_data-table.css +++ b/libs/ui/src/tokens/components/organisms/_data-table.css @@ -55,7 +55,7 @@ * * `background: inherit` gives the second without the first: every row-level * tint in this system is an alpha overlay meant to composite over a surface - * (`--color-table-row-striped-secondary` is literally `oklch(0 0 0 / 0)`), so + * (`--color-table-row-striped-secondary` is literally `oklch(0 0 none / 0)`), so * inheriting it yields a see-through cell. * * Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for diff --git a/libs/ui/src/tokens/figma/brand-overrides.css b/libs/ui/src/tokens/figma/brand-overrides.css index 12cb0eb08c..21533c3761 100644 --- a/libs/ui/src/tokens/figma/brand-overrides.css +++ b/libs/ui/src/tokens/figma/brand-overrides.css @@ -138,9 +138,9 @@ --color-fg-status-warning: var(--color-warning-500); --color-fill-active: var(--color-black-15); --color-fill-base: var(--color-black-5); - --color-fill-borderless-active: oklch(0 0 0 / 0); - --color-fill-borderless-base: oklch(0 0 0 / 0); - --color-fill-borderless-hover: oklch(0 0 0 / 0); + --color-fill-borderless-active: oklch(0 0 none / 0); + --color-fill-borderless-base: oklch(0 0 none / 0); + --color-fill-borderless-hover: oklch(0 0 none / 0); --color-fill-highlight: var(--color-neutral-300); --color-fill-hover: var(--color-primary-200); --color-fill-overlay: var(--color-neutral-200); @@ -167,7 +167,7 @@ --color-secondary-800: oklch(0.381 0.06 182.018); --color-secondary-900: oklch(0.327 0.051 180.942); --color-success: var(--color-success-500); - --default-ring-color: oklch(0 0 0); + --default-ring-color: oklch(0 0 none); } [data-theme="akros"] { @@ -220,8 +220,8 @@ --color-bg-transparent: var(--color-transparent); --color-bg-warning-active: var(--color-warning-700); --color-bg-warning-hover: var(--color-warning-600); - --color-black-15: oklch(0 0 0 / 0.15); - --color-black-5: oklch(0 0 0 / 0.05); + --color-black-15: oklch(0 0 none / 0.15); + --color-black-5: oklch(0 0 none / 0.05); --color-blue-500: var(--color-tertiary-600); --color-border-danger-focus: var(--color-danger-500); --color-border-danger-hover: var(--color-danger-600); @@ -275,15 +275,15 @@ --color-gray-950: var(--color-black); --color-link: var(--color-black); --color-neutral-100: oklch(0.964 0.002 247.84); - --color-neutral-200: oklch(0.937 0 0); - --color-neutral-300: oklch(0.848 0 0); - --color-neutral-400: oklch(0.683 0 0); - --color-neutral-50: oklch(0.982 0 0); - --color-neutral-500: oklch(0.51 0 0); - --color-neutral-600: oklch(0.446 0 0); - --color-neutral-700: oklch(0.321 0 0); - --color-neutral-800: oklch(0.252 0 0); - --color-neutral-900: oklch(0.178 0 0); + --color-neutral-200: oklch(0.937 0 none); + --color-neutral-300: oklch(0.848 0 none); + --color-neutral-400: oklch(0.683 0 none); + --color-neutral-50: oklch(0.982 0 none); + --color-neutral-500: oklch(0.51 0 none); + --color-neutral-600: oklch(0.446 0 none); + --color-neutral-700: oklch(0.321 0 none); + --color-neutral-800: oklch(0.252 0 none); + --color-neutral-900: oklch(0.178 0 none); --color-neutral-950: var(--color-black); --color-primary: var(--color-primary-500); --color-primary-100: oklch(0.957 0.055 90.321); diff --git a/libs/ui/src/tokens/figma/variables.css b/libs/ui/src/tokens/figma/variables.css index b0b74d32df..617a36ffde 100644 --- a/libs/ui/src/tokens/figma/variables.css +++ b/libs/ui/src/tokens/figma/variables.css @@ -158,7 +158,7 @@ --color-bg-primary-active: light-dark(oklch(0.689 0.105 251.583), oklch(0.932 0.092 198.233)); --color-bg-primary-base: var(--color-primary-300); --color-bg-primary-hover: light-dark(oklch(0.73 0.105 251.457), oklch(0.898 0.094 209.143)); - --color-bg-scrim: light-dark(oklch(0.129 0.041 264.695 / 0.1), oklch(1 0 0 / 0.1)); + --color-bg-scrim: light-dark(oklch(0.129 0.041 264.695 / 0.1), oklch(1 0 none / 0.1)); --color-bg-secondary-active: light-dark(oklch(0.588 0.198 36.788), oklch(0.907 0.182 99.038)); --color-bg-secondary-base: var(--color-secondary-500); --color-bg-secondary-hover: light-dark(oklch(0.628 0.201 39.026), oklch(0.881 0.181 94.02)); @@ -169,11 +169,11 @@ --color-bg-tertiary-active: light-dark(var(--color-tertiary-500), var(--color-tertiary-100)); --color-bg-tertiary-base: var(--color-tertiary-300); --color-bg-tertiary-hover: light-dark(var(--color-tertiary-400), var(--color-tertiary-200)); - --color-bg-transparent: oklch(0 0 0 / 0); + --color-bg-transparent: oklch(0 0 none / 0); --color-bg-warning-active: light-dark(var(--color-warning-500), var(--color-warning-100)); --color-bg-warning-base: var(--color-warning-500); --color-bg-warning-hover: light-dark(var(--color-warning-400), var(--color-warning-200)); - --color-black: oklch(0 0 0); + --color-black: oklch(0 0 none); --color-black-15: oklch(0.129 0.041 264.695 / 0.15); --color-black-5: oklch(0.129 0.041 264.695 / 0.05); --color-blue-500: oklch(0.623 0.188 259.815); @@ -908,9 +908,9 @@ --color-select-trigger-border-hover: var(--color-form-control-border-hover); --color-select-trigger-fg-base: var(--color-fg-primary); --color-select-trigger-fg-hover: var(--color-fg-accent-primary); - --color-shadow-1: oklch(0.145 0 0); - --color-shadow-2: oklch(0.145 0 0); - --color-shadow-3: oklch(0.145 0 0); + --color-shadow-1: oklch(0.145 0 none); + --color-shadow-2: oklch(0.145 0 none); + --color-shadow-3: oklch(0.145 0 none); --color-sidebar-base: var(--color-base); --color-sidebar-border: var(--color-border-primary); --color-sidebar-focus: var(--color-primary); @@ -1118,7 +1118,7 @@ --color-tour-spotlight: var(--color-tour-text); --color-tour-surface: var(--color-fill-surface); --color-tour-text: var(--color-fg-primary); - --color-transparent: oklch(0 0 0 / 0); + --color-transparent: oklch(0 0 none / 0); --color-tree-view-bg: var(--color-fill-base); --color-tree-view-fg-base: var(--color-fg-primary); --color-tree-view-fg-disabled: var(--color-fg-disabled); @@ -1148,9 +1148,9 @@ --color-warning-light-active: var(--color-bg-light-warning-active); --color-warning-light-disabled: var(--color-bg-disabled); --color-warning-light-hover: var(--color-bg-light-warning-hover); - --color-white: oklch(1 0 0); - --color-white-15: oklch(1 0 0 / 0.15); - --color-white-5: oklch(1 0 0 / 0.05); + --color-white: oklch(1 0 none); + --color-white-15: oklch(1 0 none / 0.15); + --color-white-5: oklch(1 0 none / 0.05); --container-2xl: var(--dimension-container-2xl); --container-2xs: var(--dimension-container-2xs); --container-3xl: var(--dimension-container-3xl); @@ -1182,7 +1182,7 @@ --container-tour: var(--container-sm); --container-xl: var(--dimension-container-xl); --container-xs: var(--dimension-container-xs); - --default-ring-color: light-dark(oklch(0 0 0), oklch(1 0 0)); + --default-ring-color: light-dark(oklch(0 0 none), oklch(1 0 none)); --default-ring-offset: 0.13rem; --default-ring-style: solid; --default-ring-width: 0.13rem; diff --git a/libs/ui/src/tokens/theme.css b/libs/ui/src/tokens/theme.css index 544b99475f..19abedb6d2 100644 --- a/libs/ui/src/tokens/theme.css +++ b/libs/ui/src/tokens/theme.css @@ -22,7 +22,7 @@ --color-page-bg: light-dark(oklch(98% 0.012 248), oklch(17% 0.025 250)); --color-page-fg: light-dark(oklch(21% 0.03 252), oklch(94% 0.014 248)); - --color-surface: light-dark(oklch(100% 0 0), oklch(22% 0.027 250)); + --color-surface: light-dark(oklch(100% 0 none), oklch(22% 0.027 250)); --color-surface-subtle: light-dark( oklch(95% 0.016 248), oklch(27% 0.028 250) From 19b4f05c346494fd9b481b3ca1e759f37745a3e4 Mon Sep 17 00:00:00 2001 From: Petr Glaser Date: Thu, 8 Oct 2026 19:19:36 +0200 Subject: [PATCH 2/2] fix(ui-kit): address review on good-css PR - Add min-w-0 to overflow-clip containers (numeric-input, combobox, phone-input, steps, toast, color-select, skeleton, gallery) so flex/grid items don't regain their automatic min-width now that overflow-clip no longer creates a scroll container. - Switch date-picker divider borders from physical border-l to logical border-s so they follow the ps- padding in RTL. - Make .light/.always-light explicitly set --theme-sign: 1 so a light element nested inside a .dark subtree doesn't inherit the dark sign. Also bumps componentVersion/skill/changelog metadata for every other component this branch had already changed without bumping, since editing the changelog pulls the whole skill-sync gate into scope. Co-Authored-By: Claude Sonnet 5.5 --- .../skills/accordion-usage/SKILL.md | 2 +- .../agent-plugin/skills/button-usage/SKILL.md | 2 +- .../skills/cascade-select-usage/SKILL.md | 2 +- .../skills/checkbox-usage/SKILL.md | 2 +- .../skills/color-select-usage/SKILL.md | 2 +- .../skills/combobox-usage/SKILL.md | 2 +- .../skills/data-table-usage/SKILL.md | 2 +- .../skills/date-picker-usage/SKILL.md | 2 +- .../agent-plugin/skills/dialog-usage/SKILL.md | 2 +- .../skills/file-upload-usage/SKILL.md | 2 +- .../skills/form-checkbox-usage/SKILL.md | 2 +- .../skills/gallery-usage/SKILL.md | 2 +- .../agent-plugin/skills/input-usage/SKILL.md | 2 +- .../skills/numeric-input-usage/SKILL.md | 2 +- .../skills/phone-input-usage/SKILL.md | 2 +- .../skills/popover-usage/SKILL.md | 2 +- .../skills/radio-card-usage/SKILL.md | 2 +- .../agent-plugin/skills/select-usage/SKILL.md | 2 +- .../skills/skeleton-usage/SKILL.md | 2 +- .../agent-plugin/skills/slider-usage/SKILL.md | 2 +- .../agent-plugin/skills/steps-usage/SKILL.md | 2 +- .../agent-plugin/skills/table-usage/SKILL.md | 2 +- .../skills/textarea-usage/SKILL.md | 2 +- .../agent-plugin/skills/toast-usage/SKILL.md | 2 +- .../agent-plugin/skills/tour-usage/SKILL.md | 2 +- .../skills/tree-view-usage/SKILL.md | 2 +- libs/ui/skills/accordion-usage/SKILL.md | 2 +- libs/ui/skills/button-usage/SKILL.md | 2 +- libs/ui/skills/cascade-select-usage/SKILL.md | 2 +- libs/ui/skills/checkbox-usage/SKILL.md | 2 +- libs/ui/skills/color-select-usage/SKILL.md | 2 +- libs/ui/skills/combobox-usage/SKILL.md | 2 +- libs/ui/skills/data-table-usage/SKILL.md | 2 +- libs/ui/skills/date-picker-usage/SKILL.md | 2 +- libs/ui/skills/dialog-usage/SKILL.md | 2 +- libs/ui/skills/file-upload-usage/SKILL.md | 2 +- libs/ui/skills/form-checkbox-usage/SKILL.md | 2 +- libs/ui/skills/gallery-usage/SKILL.md | 2 +- libs/ui/skills/input-usage/SKILL.md | 2 +- libs/ui/skills/numeric-input-usage/SKILL.md | 2 +- libs/ui/skills/phone-input-usage/SKILL.md | 2 +- libs/ui/skills/popover-usage/SKILL.md | 2 +- libs/ui/skills/radio-card-usage/SKILL.md | 2 +- libs/ui/skills/select-usage/SKILL.md | 2 +- libs/ui/skills/skeleton-usage/SKILL.md | 2 +- libs/ui/skills/slider-usage/SKILL.md | 2 +- libs/ui/skills/steps-usage/SKILL.md | 2 +- libs/ui/skills/table-usage/SKILL.md | 2 +- libs/ui/skills/textarea-usage/SKILL.md | 2 +- libs/ui/skills/toast-usage/SKILL.md | 2 +- libs/ui/skills/tour-usage/SKILL.md | 2 +- libs/ui/skills/tree-view-usage/SKILL.md | 2 +- libs/ui/src/atoms/button.tsx | 2 +- libs/ui/src/atoms/checkbox.tsx | 2 +- libs/ui/src/atoms/input.tsx | 2 +- libs/ui/src/atoms/numeric-input.tsx | 4 +- libs/ui/src/atoms/skeleton.tsx | 4 +- libs/ui/src/atoms/textarea.tsx | 2 +- libs/ui/src/molecules/accordion.tsx | 2 +- libs/ui/src/molecules/cascade-select.tsx | 2 +- libs/ui/src/molecules/color-select.tsx | 4 +- libs/ui/src/molecules/combobox.tsx | 4 +- libs/ui/src/molecules/date-picker.tsx | 6 +- libs/ui/src/molecules/dialog.tsx | 2 +- libs/ui/src/molecules/file-upload.tsx | 2 +- libs/ui/src/molecules/form-checkbox.tsx | 2 +- libs/ui/src/molecules/phone-input.tsx | 4 +- libs/ui/src/molecules/popover.tsx | 2 +- libs/ui/src/molecules/radio-card.tsx | 2 +- libs/ui/src/molecules/select.tsx | 2 +- libs/ui/src/molecules/slider.tsx | 2 +- libs/ui/src/molecules/steps.tsx | 4 +- libs/ui/src/molecules/toast.tsx | 4 +- libs/ui/src/molecules/tour.tsx | 2 +- libs/ui/src/molecules/tree-view.tsx | 2 +- libs/ui/src/organisms/data-table.tsx | 2 +- libs/ui/src/organisms/gallery.tsx | 4 +- libs/ui/src/organisms/table.tsx | 2 +- libs/ui/src/templates/accordion.tsx | 2 +- libs/ui/src/templates/gallery.tsx | 2 +- libs/ui/src/templates/numeric-input.tsx | 2 +- libs/ui/src/templates/popover.tsx | 2 +- libs/ui/src/templates/select.tsx | 2 +- libs/ui/src/tokens/_semantic.css | 5 ++ .../stories/changelog/changelog.stories.tsx | 78 +++++++++++++++++++ 85 files changed, 176 insertions(+), 93 deletions(-) diff --git a/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md b/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md index 3f2c8aec76..137defee68 100644 --- a/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md @@ -5,7 +5,7 @@ description: > collapsible sections using the Zag.js-backed compound anatomy, supported variant, shadow, size, value, multiple, and collapsible props. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/button-usage/SKILL.md b/libs/ui/agent-plugin/skills/button-usage/SKILL.md index 74f6a06338..07ca78530b 100644 --- a/libs/ui/agent-plugin/skills/button-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/button-usage/SKILL.md @@ -9,7 +9,7 @@ metadata: library: "@techsio/ui-kit" library_version: "0.3.2" component: "Button" - component_version: "0.3.2" + component_version: "0.3.3" requires: "component-usage-ux app-token-overrides ux-guidelines" sources: "libs/ui/src/atoms/button.tsx libs/ui/src/tokens/components/atoms/_button.css libs/ui/stories/atoms/button.stories.tsx libs/ui/src/atoms/button.figma.ts" --- diff --git a/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md b/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md index fb80188289..2563f62878 100644 --- a/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md @@ -6,7 +6,7 @@ description: > compound parts, parent or multiple selection, validation, and keyboard navigation. metadata: - component_version: "1.0.1" + component_version: "1.0.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/checkbox-usage/SKILL.md b/libs/ui/agent-plugin/skills/checkbox-usage/SKILL.md index ab626d1234..ea1bf300d8 100644 --- a/libs/ui/agent-plugin/skills/checkbox-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/checkbox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > @techsio/ui-kit Checkbox atom, including invalid and indeterminate states, while preferring form molecules for labeled form rows. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/color-select-usage/SKILL.md b/libs/ui/agent-plugin/skills/color-select-usage/SKILL.md index eb8496c5bd..f892ceda87 100644 --- a/libs/ui/agent-plugin/skills/color-select-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/color-select-usage/SKILL.md @@ -5,7 +5,7 @@ description: > for choosing color swatches with supported layout, size, radius, disabled state, selected state, labels, counts, and single/multiple roles. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md b/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md index 528d7aec77..792d9a8501 100644 --- a/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > searchable selection with Zag.js collection behavior, controlled value/input, multiple mode, validation status, clear trigger, and token styling. metadata: - component_version: "1.3.0" + component_version: "1.3.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md b/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md index a3d9dddf52..444e9100f6 100644 --- a/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md @@ -8,7 +8,7 @@ description: > row reorder, tree/expanding rows, inline edit, colSpan/rowSpan, virtualization / infinite scroll and pagination — every feature behind a flag with a callback. metadata: - component_version: "1.2.0" + component_version: "1.2.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/date-picker-usage/SKILL.md b/libs/ui/agent-plugin/skills/date-picker-usage/SKILL.md index 4c02ff9b2b..88f32e7661 100644 --- a/libs/ui/agent-plugin/skills/date-picker-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/date-picker-usage/SKILL.md @@ -6,7 +6,7 @@ description: > transactional time entry, single or range typed values, and canonical form serialization through one integrated field. metadata: - component_version: "1.1.1" + component_version: "1.1.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/dialog-usage/SKILL.md b/libs/ui/agent-plugin/skills/dialog-usage/SKILL.md index 62927ea346..58695d2f0b 100644 --- a/libs/ui/agent-plugin/skills/dialog-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/dialog-usage/SKILL.md @@ -5,7 +5,7 @@ description: > modal dialogs, alert dialogs, drawers, actions, focus management, placement, size, and close behavior backed by Zag.js. metadata: - component_version: "1.0.1" + component_version: "1.0.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md b/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md index a54b72fa64..21662da09e 100644 --- a/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md @@ -5,7 +5,7 @@ description: > select, validate, preview, and manage local File objects through the Zag.js compound API, including accepted/rejected files and native form behavior. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/form-checkbox-usage/SKILL.md b/libs/ui/agent-plugin/skills/form-checkbox-usage/SKILL.md index ea4823e749..c6dd288f61 100644 --- a/libs/ui/agent-plugin/skills/form-checkbox-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/form-checkbox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > for labeled checkbox fields with Zag.js checked/indeterminate state, help text, validation status, required, disabled, and read-only props. metadata: - component_version: "1.1.1" + component_version: "1.1.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/gallery-usage/SKILL.md b/libs/ui/agent-plugin/skills/gallery-usage/SKILL.md index 765246b1f1..d920441ad1 100644 --- a/libs/ui/agent-plugin/skills/gallery-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/gallery-usage/SKILL.md @@ -6,7 +6,7 @@ description: > controlled page, orientation, thumbnail image adapters, thumbnail aria labels, empty state, and NextImage support. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/input-usage/SKILL.md b/libs/ui/agent-plugin/skills/input-usage/SKILL.md index a826826ba6..c71911979a 100644 --- a/libs/ui/agent-plugin/skills/input-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/input-usage/SKILL.md @@ -5,7 +5,7 @@ description: > @techsio/ui-kit Input atom, including valid size, variant, embedded button spacing, and token-first validation styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md index de6a121b86..533137e6ea 100644 --- a/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md @@ -6,7 +6,7 @@ description: > numeric compatibility or controlled string drafts, locale formatting, min/max/step, and token-first styling. metadata: - component_version: "1.1.0" + component_version: "1.1.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md index c6d880724e..c69d040ff8 100644 --- a/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md @@ -6,7 +6,7 @@ description: > hidden E.164 form value, native validation, validation status, and compound country picker slots. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/popover-usage/SKILL.md b/libs/ui/agent-plugin/skills/popover-usage/SKILL.md index a44336aa85..c798551ac4 100644 --- a/libs/ui/agent-plugin/skills/popover-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/popover-usage/SKILL.md @@ -5,7 +5,7 @@ description: > anchored non-blocking content using Zag.js compound parts, placement, portalling, close behavior, arrow, title, description, and close trigger. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/radio-card-usage/SKILL.md b/libs/ui/agent-plugin/skills/radio-card-usage/SKILL.md index 4deef534d4..a6cc49259d 100644 --- a/libs/ui/agent-plugin/skills/radio-card-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/radio-card-usage/SKILL.md @@ -5,7 +5,7 @@ description: > prominent single-choice cards with Zag.js radio behavior, label, item, hidden input, control, text, description, addon, indicator, and status text. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/select-usage/SKILL.md b/libs/ui/agent-plugin/skills/select-usage/SKILL.md index 002862531e..c86d4f08cf 100644 --- a/libs/ui/agent-plugin/skills/select-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/select-usage/SKILL.md @@ -6,7 +6,7 @@ description: > trigger, value text, clear trigger, item groups, item indicators, validation status, size, and multiple mode. metadata: - component_version: "1.1.0" + component_version: "1.1.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md b/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md index b72fcbd7a1..08167908d4 100644 --- a/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md @@ -5,7 +5,7 @@ description: > loading placeholders using Root, Circle, Text, and Rectangle compound parts with token-backed variants, sizes, and animation speeds. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/slider-usage/SKILL.md b/libs/ui/agent-plugin/skills/slider-usage/SKILL.md index cc7bcf28fb..dc215c0f24 100644 --- a/libs/ui/agent-plugin/skills/slider-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/slider-usage/SKILL.md @@ -6,7 +6,7 @@ description: > markers, value text, orientation, min/max/step, validation status, and token styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/steps-usage/SKILL.md b/libs/ui/agent-plugin/skills/steps-usage/SKILL.md index 418e3c3fb7..12e472a2f0 100644 --- a/libs/ui/agent-plugin/skills/steps-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/steps-usage/SKILL.md @@ -6,7 +6,7 @@ description: > panels, progress, navigation triggers, linear flow, controlled step, and variants. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/table-usage/SKILL.md b/libs/ui/agent-plugin/skills/table-usage/SKILL.md index b62031eaea..ae583071cf 100644 --- a/libs/ui/agent-plugin/skills/table-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/table-usage/SKILL.md @@ -6,7 +6,7 @@ description: > headers, numeric cells, selected rows, variants, interactive rows, sticky header/first column, column borders, and size props. metadata: - component_version: "1.2.0" + component_version: "1.2.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md b/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md index 1d56b8ea1e..a2d420d5d9 100644 --- a/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md @@ -5,7 +5,7 @@ description: > multi-line text entry with valid variant, size, resize, readonly styling, and token-first validation. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/toast-usage/SKILL.md b/libs/ui/agent-plugin/skills/toast-usage/SKILL.md index 6779eba9cc..afd43c52a1 100644 --- a/libs/ui/agent-plugin/skills/toast-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/toast-usage/SKILL.md @@ -6,7 +6,7 @@ description: > portal, useToast, toast types, title, description, close trigger, and token styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/tour-usage/SKILL.md b/libs/ui/agent-plugin/skills/tour-usage/SKILL.md index 0390c0715f..f2c83b4811 100644 --- a/libs/ui/agent-plugin/skills/tour-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/tour-usage/SKILL.md @@ -5,7 +5,7 @@ description: > tooltip/dialog/floating steps, target resolution, interactive wait effects, imperative control, shared action buttons, cleanup and app-owned onboarding policy. metadata: - component_version: "1.0.2" + component_version: "1.0.3" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/agent-plugin/skills/tree-view-usage/SKILL.md b/libs/ui/agent-plugin/skills/tree-view-usage/SKILL.md index e06f824189..e488c52105 100644 --- a/libs/ui/agent-plugin/skills/tree-view-usage/SKILL.md +++ b/libs/ui/agent-plugin/skills/tree-view-usage/SKILL.md @@ -6,7 +6,7 @@ description: > item parts, selection behavior, icons, indentation, expansion, selection, and keyboard/typeahead support. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/accordion-usage/SKILL.md b/libs/ui/skills/accordion-usage/SKILL.md index cf94f70622..267f1b09ed 100644 --- a/libs/ui/skills/accordion-usage/SKILL.md +++ b/libs/ui/skills/accordion-usage/SKILL.md @@ -5,7 +5,7 @@ description: > collapsible sections using the Zag.js-backed compound anatomy, supported variant, shadow, size, value, multiple, and collapsible props. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/button-usage/SKILL.md b/libs/ui/skills/button-usage/SKILL.md index 9f6a970140..bde6ba525a 100644 --- a/libs/ui/skills/button-usage/SKILL.md +++ b/libs/ui/skills/button-usage/SKILL.md @@ -9,7 +9,7 @@ metadata: library: "@techsio/ui-kit" library_version: "0.3.2" component: "Button" - component_version: "0.3.2" + component_version: "0.3.3" requires: - component-usage-ux - app-token-overrides diff --git a/libs/ui/skills/cascade-select-usage/SKILL.md b/libs/ui/skills/cascade-select-usage/SKILL.md index b6100f6ff4..101d8acb4d 100644 --- a/libs/ui/skills/cascade-select-usage/SKILL.md +++ b/libs/ui/skills/cascade-select-usage/SKILL.md @@ -6,7 +6,7 @@ description: > compound parts, parent or multiple selection, validation, and keyboard navigation. metadata: - component_version: "1.0.1" + component_version: "1.0.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/checkbox-usage/SKILL.md b/libs/ui/skills/checkbox-usage/SKILL.md index 9630410ec4..28154d9baa 100644 --- a/libs/ui/skills/checkbox-usage/SKILL.md +++ b/libs/ui/skills/checkbox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > @techsio/ui-kit Checkbox atom, including invalid and indeterminate states, while preferring form molecules for labeled form rows. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/color-select-usage/SKILL.md b/libs/ui/skills/color-select-usage/SKILL.md index cae5d15268..dab80901dc 100644 --- a/libs/ui/skills/color-select-usage/SKILL.md +++ b/libs/ui/skills/color-select-usage/SKILL.md @@ -5,7 +5,7 @@ description: > for choosing color swatches with supported layout, size, radius, disabled state, selected state, labels, counts, and single/multiple roles. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/combobox-usage/SKILL.md b/libs/ui/skills/combobox-usage/SKILL.md index 42d0ff9464..3c393d0f70 100644 --- a/libs/ui/skills/combobox-usage/SKILL.md +++ b/libs/ui/skills/combobox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > searchable selection with Zag.js collection behavior, controlled value/input, multiple mode, validation status, clear trigger, and token styling. metadata: - component_version: "1.3.0" + component_version: "1.3.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/data-table-usage/SKILL.md b/libs/ui/skills/data-table-usage/SKILL.md index 5d3f928339..7da1104d36 100644 --- a/libs/ui/skills/data-table-usage/SKILL.md +++ b/libs/ui/skills/data-table-usage/SKILL.md @@ -8,7 +8,7 @@ description: > row reorder, tree/expanding rows, inline edit, colSpan/rowSpan, virtualization / infinite scroll and pagination — every feature behind a flag with a callback. metadata: - component_version: "1.2.0" + component_version: "1.2.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/date-picker-usage/SKILL.md b/libs/ui/skills/date-picker-usage/SKILL.md index f172f9c9b8..8d399c0840 100644 --- a/libs/ui/skills/date-picker-usage/SKILL.md +++ b/libs/ui/skills/date-picker-usage/SKILL.md @@ -6,7 +6,7 @@ description: > transactional time entry, single or range typed values, and canonical form serialization through one integrated field. metadata: - component_version: "1.1.1" + component_version: "1.1.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/dialog-usage/SKILL.md b/libs/ui/skills/dialog-usage/SKILL.md index f7766f5ef6..443a514e12 100644 --- a/libs/ui/skills/dialog-usage/SKILL.md +++ b/libs/ui/skills/dialog-usage/SKILL.md @@ -5,7 +5,7 @@ description: > modal dialogs, alert dialogs, drawers, actions, focus management, placement, size, and close behavior backed by Zag.js. metadata: - component_version: "1.0.1" + component_version: "1.0.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/file-upload-usage/SKILL.md b/libs/ui/skills/file-upload-usage/SKILL.md index 14234d423c..46b06583f5 100644 --- a/libs/ui/skills/file-upload-usage/SKILL.md +++ b/libs/ui/skills/file-upload-usage/SKILL.md @@ -5,7 +5,7 @@ description: > select, validate, preview, and manage local File objects through the Zag.js compound API, including accepted/rejected files and native form behavior. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/form-checkbox-usage/SKILL.md b/libs/ui/skills/form-checkbox-usage/SKILL.md index cc1f77b1e5..48cdce10a8 100644 --- a/libs/ui/skills/form-checkbox-usage/SKILL.md +++ b/libs/ui/skills/form-checkbox-usage/SKILL.md @@ -5,7 +5,7 @@ description: > for labeled checkbox fields with Zag.js checked/indeterminate state, help text, validation status, required, disabled, and read-only props. metadata: - component_version: "1.1.1" + component_version: "1.1.2" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/gallery-usage/SKILL.md b/libs/ui/skills/gallery-usage/SKILL.md index 9858e8ff0a..f06358be29 100644 --- a/libs/ui/skills/gallery-usage/SKILL.md +++ b/libs/ui/skills/gallery-usage/SKILL.md @@ -6,7 +6,7 @@ description: > controlled page, orientation, thumbnail image adapters, thumbnail aria labels, empty state, and NextImage support. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/input-usage/SKILL.md b/libs/ui/skills/input-usage/SKILL.md index 537d9fedb8..8019b70407 100644 --- a/libs/ui/skills/input-usage/SKILL.md +++ b/libs/ui/skills/input-usage/SKILL.md @@ -5,7 +5,7 @@ description: > @techsio/ui-kit Input atom, including valid size, variant, embedded button spacing, and token-first validation styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/numeric-input-usage/SKILL.md b/libs/ui/skills/numeric-input-usage/SKILL.md index f08d1f5d1c..6f2e9d251b 100644 --- a/libs/ui/skills/numeric-input-usage/SKILL.md +++ b/libs/ui/skills/numeric-input-usage/SKILL.md @@ -6,7 +6,7 @@ description: > numeric compatibility or controlled string drafts, locale formatting, min/max/step, and token-first styling. metadata: - component_version: "1.1.0" + component_version: "1.1.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/phone-input-usage/SKILL.md b/libs/ui/skills/phone-input-usage/SKILL.md index fe64c648f4..d875c52770 100644 --- a/libs/ui/skills/phone-input-usage/SKILL.md +++ b/libs/ui/skills/phone-input-usage/SKILL.md @@ -6,7 +6,7 @@ description: > hidden E.164 form value, native validation, validation status, and compound country picker slots. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/popover-usage/SKILL.md b/libs/ui/skills/popover-usage/SKILL.md index acab301eab..7177406abc 100644 --- a/libs/ui/skills/popover-usage/SKILL.md +++ b/libs/ui/skills/popover-usage/SKILL.md @@ -5,7 +5,7 @@ description: > anchored non-blocking content using Zag.js compound parts, placement, portalling, close behavior, arrow, title, description, and close trigger. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/radio-card-usage/SKILL.md b/libs/ui/skills/radio-card-usage/SKILL.md index 481f735ec1..6129476f49 100644 --- a/libs/ui/skills/radio-card-usage/SKILL.md +++ b/libs/ui/skills/radio-card-usage/SKILL.md @@ -5,7 +5,7 @@ description: > prominent single-choice cards with Zag.js radio behavior, label, item, hidden input, control, text, description, addon, indicator, and status text. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/select-usage/SKILL.md b/libs/ui/skills/select-usage/SKILL.md index 45f77ec35d..2d21c66bb6 100644 --- a/libs/ui/skills/select-usage/SKILL.md +++ b/libs/ui/skills/select-usage/SKILL.md @@ -6,7 +6,7 @@ description: > trigger, value text, clear trigger, item groups, item indicators, validation status, size, and multiple mode. metadata: - component_version: "1.1.0" + component_version: "1.1.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/skeleton-usage/SKILL.md b/libs/ui/skills/skeleton-usage/SKILL.md index 54d4dbfa96..fbe9aa3550 100644 --- a/libs/ui/skills/skeleton-usage/SKILL.md +++ b/libs/ui/skills/skeleton-usage/SKILL.md @@ -5,7 +5,7 @@ description: > loading placeholders using Root, Circle, Text, and Rectangle compound parts with token-backed variants, sizes, and animation speeds. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/slider-usage/SKILL.md b/libs/ui/skills/slider-usage/SKILL.md index 0c20533167..8d6dee2c19 100644 --- a/libs/ui/skills/slider-usage/SKILL.md +++ b/libs/ui/skills/slider-usage/SKILL.md @@ -6,7 +6,7 @@ description: > markers, value text, orientation, min/max/step, validation status, and token styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/steps-usage/SKILL.md b/libs/ui/skills/steps-usage/SKILL.md index 07dfbb050d..162b997ba6 100644 --- a/libs/ui/skills/steps-usage/SKILL.md +++ b/libs/ui/skills/steps-usage/SKILL.md @@ -6,7 +6,7 @@ description: > panels, progress, navigation triggers, linear flow, controlled step, and variants. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/table-usage/SKILL.md b/libs/ui/skills/table-usage/SKILL.md index 9c55480bc0..6a2480d81b 100644 --- a/libs/ui/skills/table-usage/SKILL.md +++ b/libs/ui/skills/table-usage/SKILL.md @@ -6,7 +6,7 @@ description: > headers, numeric cells, selected rows, variants, interactive rows, sticky header/first column, column borders, and size props. metadata: - component_version: "1.2.0" + component_version: "1.2.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/textarea-usage/SKILL.md b/libs/ui/skills/textarea-usage/SKILL.md index 241c63eb95..e97e8e27d7 100644 --- a/libs/ui/skills/textarea-usage/SKILL.md +++ b/libs/ui/skills/textarea-usage/SKILL.md @@ -5,7 +5,7 @@ description: > multi-line text entry with valid variant, size, resize, readonly styling, and token-first validation. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/toast-usage/SKILL.md b/libs/ui/skills/toast-usage/SKILL.md index 059d206a15..430622fb78 100644 --- a/libs/ui/skills/toast-usage/SKILL.md +++ b/libs/ui/skills/toast-usage/SKILL.md @@ -6,7 +6,7 @@ description: > portal, useToast, toast types, title, description, close trigger, and token styling. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/tour-usage/SKILL.md b/libs/ui/skills/tour-usage/SKILL.md index 12080027c1..052ec0d446 100644 --- a/libs/ui/skills/tour-usage/SKILL.md +++ b/libs/ui/skills/tour-usage/SKILL.md @@ -5,7 +5,7 @@ description: > tooltip/dialog/floating steps, target resolution, interactive wait effects, imperative control, shared action buttons, cleanup and app-owned onboarding policy. metadata: - component_version: "1.0.2" + component_version: "1.0.3" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/skills/tree-view-usage/SKILL.md b/libs/ui/skills/tree-view-usage/SKILL.md index 9e5383c91d..f80f25e6df 100644 --- a/libs/ui/skills/tree-view-usage/SKILL.md +++ b/libs/ui/skills/tree-view-usage/SKILL.md @@ -6,7 +6,7 @@ description: > item parts, selection behavior, icons, indentation, expansion, selection, and keyboard/typeahead support. metadata: - component_version: "1.0.0" + component_version: "1.0.1" type: "core" library: "@techsio/ui-kit" library_version: "0.3.2" diff --git a/libs/ui/src/atoms/button.tsx b/libs/ui/src/atoms/button.tsx index 42dd958ebe..1e26f29591 100644 --- a/libs/ui/src/atoms/button.tsx +++ b/libs/ui/src/atoms/button.tsx @@ -2,7 +2,7 @@ * Button — @techsio/ui-kit atom. * * @component Button - * @componentVersion v0.3.2 + * @componentVersion v0.3.3 * @skill button-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/atoms/checkbox.tsx b/libs/ui/src/atoms/checkbox.tsx index 47fdcbf77a..ea2238fd7e 100644 --- a/libs/ui/src/atoms/checkbox.tsx +++ b/libs/ui/src/atoms/checkbox.tsx @@ -2,7 +2,7 @@ * Checkbox — @techsio/ui-kit atom. * * @component Checkbox - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill checkbox-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/atoms/input.tsx b/libs/ui/src/atoms/input.tsx index f161f2fd33..96d30d463f 100644 --- a/libs/ui/src/atoms/input.tsx +++ b/libs/ui/src/atoms/input.tsx @@ -2,7 +2,7 @@ * Input — @techsio/ui-kit atom. * * @component Input - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill input-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/atoms/numeric-input.tsx b/libs/ui/src/atoms/numeric-input.tsx index bd54972444..86a1527d96 100644 --- a/libs/ui/src/atoms/numeric-input.tsx +++ b/libs/ui/src/atoms/numeric-input.tsx @@ -2,7 +2,7 @@ * NumericInput — @techsio/ui-kit atom. * * @component NumericInput - * @componentVersion v1.1.0 + * @componentVersion v1.1.1 * @skill numeric-input-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -34,7 +34,7 @@ const numericInputVariants = tv({ container: [ "group form-control-base relative flex", "border-numeric-input-border", - "items-center overflow-clip", + "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", diff --git a/libs/ui/src/atoms/skeleton.tsx b/libs/ui/src/atoms/skeleton.tsx index 68ebd1ace4..814fde03d2 100644 --- a/libs/ui/src/atoms/skeleton.tsx +++ b/libs/ui/src/atoms/skeleton.tsx @@ -2,7 +2,7 @@ * Skeleton — @techsio/ui-kit atom. * * @component Skeleton - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill skeleton-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -20,7 +20,7 @@ import { tv } from "../utils" const skeletonVariants = tv({ slots: { - root: ["relative overflow-clip"], + root: ["relative min-w-0 overflow-clip"], rectangle: "w-full", circle: ["rounded-full", "shrink-0"], textContainer: ["flex", "flex-col"], diff --git a/libs/ui/src/atoms/textarea.tsx b/libs/ui/src/atoms/textarea.tsx index f214a755a4..ec5ff59e20 100644 --- a/libs/ui/src/atoms/textarea.tsx +++ b/libs/ui/src/atoms/textarea.tsx @@ -2,7 +2,7 @@ * Textarea — @techsio/ui-kit atom. * * @component Textarea - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill textarea-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/accordion.tsx b/libs/ui/src/molecules/accordion.tsx index a66163375f..66d6ff09af 100644 --- a/libs/ui/src/molecules/accordion.tsx +++ b/libs/ui/src/molecules/accordion.tsx @@ -2,7 +2,7 @@ * Accordion — @techsio/ui-kit molecule. * * @component Accordion - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill accordion-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/cascade-select.tsx b/libs/ui/src/molecules/cascade-select.tsx index 21d0a94a47..6aabe8b440 100644 --- a/libs/ui/src/molecules/cascade-select.tsx +++ b/libs/ui/src/molecules/cascade-select.tsx @@ -2,7 +2,7 @@ * CascadeSelect — @techsio/ui-kit molecule. * * @component CascadeSelect - * @componentVersion v1.0.1 + * @componentVersion v1.0.2 * @skill cascade-select-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/color-select.tsx b/libs/ui/src/molecules/color-select.tsx index 0a059ac8be..c9dcce929a 100644 --- a/libs/ui/src/molecules/color-select.tsx +++ b/libs/ui/src/molecules/color-select.tsx @@ -2,7 +2,7 @@ * ColorSelect — @techsio/ui-kit molecule. * * @component ColorSelect - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill color-select-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -19,7 +19,7 @@ const colorSelectVariants = tv({ cell: "grid", atom: [ "relative cursor-pointer p-color-select-atom", - "aspect-square overflow-clip", + "aspect-square min-w-0 overflow-clip", "border-2 transition duration-200 motion-reduce:transition-none", "border-color-select-border shadow-color-select hover:border-color-select-border-hover", "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)", diff --git a/libs/ui/src/molecules/combobox.tsx b/libs/ui/src/molecules/combobox.tsx index e50ff929b0..f86b611dfd 100644 --- a/libs/ui/src/molecules/combobox.tsx +++ b/libs/ui/src/molecules/combobox.tsx @@ -2,7 +2,7 @@ * Combobox — @techsio/ui-kit molecule. * * @component Combobox - * @componentVersion v1.3.0 + * @componentVersion v1.3.1 * @skill combobox-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -31,7 +31,7 @@ const comboboxVariants = tv({ root: ["relative flex w-full flex-col"], label: ["block font-label text-label-md"], control: [ - "form-control-base relative flex w-full items-center overflow-clip", + "form-control-base relative flex w-full min-w-0 items-center overflow-clip", "bg-combobox-bg-base", "transition-colors duration-200 ease-in-out motion-reduce:transition-none", "hover:border-combobox-border-hover hover:bg-combobox-bg-hover", diff --git a/libs/ui/src/molecules/date-picker.tsx b/libs/ui/src/molecules/date-picker.tsx index 0507b2e934..8a9c55902d 100644 --- a/libs/ui/src/molecules/date-picker.tsx +++ b/libs/ui/src/molecules/date-picker.tsx @@ -2,7 +2,7 @@ * DatePicker — @techsio/ui-kit molecule. * * @component DatePicker - * @componentVersion v1.1.1 + * @componentVersion v1.1.2 * @skill date-picker-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx */ @@ -245,7 +245,7 @@ const datePickerVariants = tv({ ], monthPanel: [ "grid min-w-0 content-start gap-date-picker-calendar", - "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:ps-date-picker-content", + "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-s sm:data-[index=1]:ps-date-picker-content", ], view: "min-w-0", viewControl: @@ -313,7 +313,7 @@ const datePickerVariants = tv({ timeGroup: [ "flex min-w-0 items-center gap-date-picker-time", "data-[index=1]:border-date-picker-time-border data-[index=1]:border-t data-[index=1]:pt-date-picker-time", - "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:ps-date-picker-time", + "sm:data-[index=1]:border-s sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:ps-date-picker-time", ], timeGroupLabel: "shrink-0 font-date-picker-view text-date-picker-time-label-fg text-date-picker-time-label", diff --git a/libs/ui/src/molecules/dialog.tsx b/libs/ui/src/molecules/dialog.tsx index e1aaab6e7e..4be1b9ba55 100644 --- a/libs/ui/src/molecules/dialog.tsx +++ b/libs/ui/src/molecules/dialog.tsx @@ -2,7 +2,7 @@ * Dialog — @techsio/ui-kit molecule. * * @component Dialog - * @componentVersion v1.0.1 + * @componentVersion v1.0.2 * @skill dialog-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/file-upload.tsx b/libs/ui/src/molecules/file-upload.tsx index f2126ee5ca..b4d5e4f99e 100644 --- a/libs/ui/src/molecules/file-upload.tsx +++ b/libs/ui/src/molecules/file-upload.tsx @@ -2,7 +2,7 @@ * FileUpload — @techsio/ui-kit molecule. * * @component FileUpload - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill file-upload-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/form-checkbox.tsx b/libs/ui/src/molecules/form-checkbox.tsx index 6e090ae696..57b59ce9a0 100644 --- a/libs/ui/src/molecules/form-checkbox.tsx +++ b/libs/ui/src/molecules/form-checkbox.tsx @@ -2,7 +2,7 @@ * FormCheckbox — @techsio/ui-kit molecule. * * @component FormCheckbox - * @componentVersion v1.1.1 + * @componentVersion v1.1.2 * @skill form-checkbox-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/phone-input.tsx b/libs/ui/src/molecules/phone-input.tsx index e9df3370c6..3756fe3b67 100644 --- a/libs/ui/src/molecules/phone-input.tsx +++ b/libs/ui/src/molecules/phone-input.tsx @@ -2,7 +2,7 @@ * PhoneInput — @techsio/ui-kit molecule. * * @component PhoneInput - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill phone-input-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -95,7 +95,7 @@ const phoneInputVariants = tv({ root: ["relative flex w-full flex-col gap-phone-input"], control: [ "form-control-base", - "relative flex w-full items-center overflow-clip", + "relative flex w-full min-w-0 items-center overflow-clip", "text-phone-input-fg", "hover:border-phone-input-border-hover hover:bg-phone-input-bg-hover", "phone-input-focus", diff --git a/libs/ui/src/molecules/popover.tsx b/libs/ui/src/molecules/popover.tsx index 93bc23c743..af9dc49b97 100644 --- a/libs/ui/src/molecules/popover.tsx +++ b/libs/ui/src/molecules/popover.tsx @@ -2,7 +2,7 @@ * Popover — @techsio/ui-kit molecule. * * @component Popover - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill popover-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/radio-card.tsx b/libs/ui/src/molecules/radio-card.tsx index 60cf3662fd..8b356442c1 100644 --- a/libs/ui/src/molecules/radio-card.tsx +++ b/libs/ui/src/molecules/radio-card.tsx @@ -2,7 +2,7 @@ * RadioCard — @techsio/ui-kit molecule. * * @component RadioCard - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill radio-card-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/select.tsx b/libs/ui/src/molecules/select.tsx index 6341da0072..efde11e584 100644 --- a/libs/ui/src/molecules/select.tsx +++ b/libs/ui/src/molecules/select.tsx @@ -2,7 +2,7 @@ * Select — @techsio/ui-kit molecule. * * @component Select - * @componentVersion v1.1.0 + * @componentVersion v1.1.1 * @skill select-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/slider.tsx b/libs/ui/src/molecules/slider.tsx index b734aa6425..d5276de1b0 100644 --- a/libs/ui/src/molecules/slider.tsx +++ b/libs/ui/src/molecules/slider.tsx @@ -2,7 +2,7 @@ * Slider — @techsio/ui-kit molecule. * * @component Slider - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill slider-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/molecules/steps.tsx b/libs/ui/src/molecules/steps.tsx index b7fe0685dc..1c15d31810 100644 --- a/libs/ui/src/molecules/steps.tsx +++ b/libs/ui/src/molecules/steps.tsx @@ -2,7 +2,7 @@ * Steps — @techsio/ui-kit molecule. * * @component Steps - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill steps-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -98,7 +98,7 @@ const stepsVariants = tv({ "transition-colors duration-200 motion-reduce:transition-none", ], progress: [ - "relative overflow-clip rounded-steps-progress bg-steps-progress-bg", + "relative min-w-0 overflow-clip rounded-steps-progress bg-steps-progress-bg", "data-[orientation=horizontal]:h-steps-progress data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:w-steps-progress data-[orientation=vertical]:self-stretch", ], diff --git a/libs/ui/src/molecules/toast.tsx b/libs/ui/src/molecules/toast.tsx index 850f0e1952..b8aee82e7c 100644 --- a/libs/ui/src/molecules/toast.tsx +++ b/libs/ui/src/molecules/toast.tsx @@ -2,7 +2,7 @@ * Toast — @techsio/ui-kit molecule. * * @component Toast - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill toast-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -22,7 +22,7 @@ const toastVariants = tv({ root: [ "relative flex flex-col rounded-toast-root", "border-(length:--border-width-toast) bg-toast-bg shadow-lg", - "w-toast-width overflow-clip p-toast-root", + "w-toast-width min-w-0 overflow-clip p-toast-root", "data-[type=error]:border-toast-error-border data-[type=error]:bg-toast-error-bg", "data-[type=success]:border-toast-success-border data-[type=success]:bg-toast-success-bg", "data-[type=info]:border-toast-info-border data-[type=info]:bg-toast-info-bg", diff --git a/libs/ui/src/molecules/tour.tsx b/libs/ui/src/molecules/tour.tsx index 25dda58b5d..d131d05433 100644 --- a/libs/ui/src/molecules/tour.tsx +++ b/libs/ui/src/molecules/tour.tsx @@ -2,7 +2,7 @@ * Tour — @techsio/ui-kit molecule. * * @component Tour - * @componentVersion v1.0.2 + * @componentVersion v1.0.3 * @skill tour-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx */ diff --git a/libs/ui/src/molecules/tree-view.tsx b/libs/ui/src/molecules/tree-view.tsx index 5ea1c7e8ff..dbc6766a28 100644 --- a/libs/ui/src/molecules/tree-view.tsx +++ b/libs/ui/src/molecules/tree-view.tsx @@ -2,7 +2,7 @@ * TreeView — @techsio/ui-kit molecule. * * @component TreeView - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill tree-view-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/organisms/data-table.tsx b/libs/ui/src/organisms/data-table.tsx index 75d7de15a5..12aa157ab9 100644 --- a/libs/ui/src/organisms/data-table.tsx +++ b/libs/ui/src/organisms/data-table.tsx @@ -2,7 +2,7 @@ * DataTable — @techsio/ui-kit organism. * * @component DataTable - * @componentVersion v1.2.0 + * @componentVersion v1.2.1 * @skill data-table-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/organisms/gallery.tsx b/libs/ui/src/organisms/gallery.tsx index 73a66c6584..f1b01e5630 100644 --- a/libs/ui/src/organisms/gallery.tsx +++ b/libs/ui/src/organisms/gallery.tsx @@ -2,7 +2,7 @@ * Gallery — @techsio/ui-kit organism. * * @component Gallery - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill gallery-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * @@ -53,7 +53,7 @@ const galleryVariants = tv({ "relative shrink-0", "size-(--gallery-thumbnail-size)", "aspect-square", - "overflow-clip rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg", + "min-w-0 overflow-clip rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg", "cursor-pointer p-gallery-trigger", "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)", "focus-visible:outline-gallery-trigger-ring", diff --git a/libs/ui/src/organisms/table.tsx b/libs/ui/src/organisms/table.tsx index 44ba14413f..a6f81b1249 100644 --- a/libs/ui/src/organisms/table.tsx +++ b/libs/ui/src/organisms/table.tsx @@ -2,7 +2,7 @@ * Table — @techsio/ui-kit organism. * * @component Table - * @componentVersion v1.2.0 + * @componentVersion v1.2.1 * @skill table-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/templates/accordion.tsx b/libs/ui/src/templates/accordion.tsx index 10d2207e62..1d7437779b 100644 --- a/libs/ui/src/templates/accordion.tsx +++ b/libs/ui/src/templates/accordion.tsx @@ -2,7 +2,7 @@ * Accordion — @techsio/ui-kit template. * * @component Accordion - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill accordion-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/templates/gallery.tsx b/libs/ui/src/templates/gallery.tsx index c4b4e5db2e..49cd13d9bc 100644 --- a/libs/ui/src/templates/gallery.tsx +++ b/libs/ui/src/templates/gallery.tsx @@ -2,7 +2,7 @@ * Gallery — @techsio/ui-kit template. * * @component Gallery - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill gallery-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/templates/numeric-input.tsx b/libs/ui/src/templates/numeric-input.tsx index 2a424c8ed6..a89c8d9137 100644 --- a/libs/ui/src/templates/numeric-input.tsx +++ b/libs/ui/src/templates/numeric-input.tsx @@ -2,7 +2,7 @@ * NumericInput — @techsio/ui-kit template. * * @component NumericInput - * @componentVersion v1.1.0 + * @componentVersion v1.1.1 * @skill numeric-input-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/templates/popover.tsx b/libs/ui/src/templates/popover.tsx index 2afd3005bb..bd44b312ad 100644 --- a/libs/ui/src/templates/popover.tsx +++ b/libs/ui/src/templates/popover.tsx @@ -2,7 +2,7 @@ * Popover — @techsio/ui-kit template. * * @component Popover - * @componentVersion v1.0.0 + * @componentVersion v1.0.1 * @skill popover-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/templates/select.tsx b/libs/ui/src/templates/select.tsx index be15c7da15..5b2e94f3cc 100644 --- a/libs/ui/src/templates/select.tsx +++ b/libs/ui/src/templates/select.tsx @@ -2,7 +2,7 @@ * Select — @techsio/ui-kit template. * * @component Select - * @componentVersion v1.1.0 + * @componentVersion v1.1.1 * @skill select-usage * @changelog libs/ui/stories/changelog/changelog.stories.tsx * diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css index d7276853b9..643fbbaeaa 100644 --- a/libs/ui/src/tokens/_semantic.css +++ b/libs/ui/src/tokens/_semantic.css @@ -39,6 +39,11 @@ --state-fg-lightness: calc(0.635 - 0.215 * var(--theme-sign)); } +/* Explicit Light class(es) — re-asserts light inside a nested .dark/.always-dark subtree */ +:is(.light, .always-light) { + --theme-sign: 1; +} + /* Explicit Dark class(es) */ :is(.dark, .always-dark) { --theme-sign: -1; diff --git a/libs/ui/stories/changelog/changelog.stories.tsx b/libs/ui/stories/changelog/changelog.stories.tsx index eb427a3227..3fbd724ac8 100644 --- a/libs/ui/stories/changelog/changelog.stories.tsx +++ b/libs/ui/stories/changelog/changelog.stories.tsx @@ -12,6 +12,84 @@ import type { Meta, StoryObj } from "@storybook/react" const CHANGELOG = ` ## @techsio/ui-kit — Unreleased +### Table v1.2.1 +- Switched the border between header and cell columns from physical border-r to logical border-e for RTL. + +### DataTable v1.2.1 +- Switched the sortable header's text-left to the logical text-start for RTL. + +### TreeView v1.0.1 +- Replaced transition-all with the explicit transition property list to avoid animating unrelated properties. + +### Tour v1.0.3 +- Replaced outline-none with outline-hidden per the updated focus-ring guideline. + +### Slider v1.0.1 +- Switched the vertical thumb's physical left offset to the logical start for RTL. + +### Select v1.1.1 +- Switched text-left to text-start and the clear trigger's physical right offset to logical end for RTL. + +### RadioCard v1.0.1 +- Switched overflow-hidden to overflow-clip and text-left/text-right to text-start/text-end for RTL. + +### Popover v1.0.1 +- Replaced outline-none with outline-hidden and switched the close trigger's physical right offset to logical end for RTL. + +### FormCheckbox v1.1.2 +- Replaced transition-all with the explicit transition property list and switched the indented text's physical pl- offset to logical ps- for RTL. + +### FileUpload v1.0.1 +- Switched overflow-hidden to overflow-clip on the item preview. + +### Dialog v1.0.2 +- Switched the close trigger and side-panel borders from physical top/right/left offsets to logical end/start equivalents for RTL. + +### CascadeSelect v1.0.2 +- Switched text-left to text-start and the trigger icon's physical right offset to logical end for RTL. + +### Accordion v1.0.1 +- Replaced transition-all with the explicit transition property list and switched the icon's physical pr- offset to logical pe- for RTL. + +### Textarea v1.0.1 +- Replaced transition-all with the explicit transition property list and added user-invalid styling for native constraint validation once the field has been interacted with. + +### Input v1.0.1 +- Replaced transition-all with the explicit transition property list and added user-invalid styling for native constraint validation once the field has been interacted with. + +### Checkbox v1.0.1 +- Replaced transition-all with the explicit transition property list to avoid animating unrelated properties. + +### Button v0.3.3 +- Replaced transition-all with the explicit transition property list, added motion-safe active press feedback, and switched the loading spinner's physical mr- offset to logical me- for RTL. + +### Gallery v1.0.1 +- Added min-w-0 to the thumbnail trigger's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### Toast v1.0.1 +- Added min-w-0 to the root's overflow-clip class so the toast keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### Steps v1.0.1 +- Added min-w-0 to the progress track's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### PhoneInput v1.0.1 +- Added min-w-0 to the control's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### DatePicker v1.1.2 +- Switched the month panel and time group's divider border from physical border-l to logical border-s so it follows the ps- padding in RTL. + +### Combobox v1.3.1 +- Added min-w-0 to the control's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### ColorSelect v1.0.1 +- Added min-w-0 to the atom's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### Skeleton v1.0.1 +- Added min-w-0 to the root's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + +### NumericInput v1.1.1 +- Added min-w-0 to the container's overflow-clip class so it keeps clipping content correctly now that overflow-clip no longer creates a scroll container. + ### QuantityField v1.0.0 - Added a controlled quantity molecule with a visible unit, linked label/helper/error text and localized pending feedback over NumericInput. Validation, persistence and explicit removal stay consumer-owned. - autoFocus, aria-label and aria-labelledby reach the editable input; native label and description bindings remain intact.