@kalink-ui/seedly 0.33.2 → 0.34.4

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @kalink-ui/seedly
 
+## 0.34.4
+
+### Patch Changes
+
+- 3b84777: Re-export the SheetBody, SheetFooter, and SheetOverlay components from the sheet entrypoint.
+
+## 0.34.3
+
+### Patch Changes
+
+- a9c74d3: Rebump packages to align dev with trusted publishing rollout.
+- Updated dependencies [a9c74d3]
+  - @kalink-ui/dibbly@0.6.3
+
+## 0.34.2
+
+### Patch Changes
+
+- 7098356: Align package repository URLs with provenance origin for trusted publishing.
+- Updated dependencies [7098356]
+  - @kalink-ui/dibbly@0.6.2
+
+## 0.34.1
+
+### Patch Changes
+
+- 3642627: Trigger publish with trusted publishing and Playwright setup updates.
+- Updated dependencies [3642627]
+  - @kalink-ui/dibbly@0.6.1
+
+## 0.34.0
+
+### Minor Changes
+
+- 1efa841: Harden test suites (Vitest v4, Playwright, Storybook) and improve accessibility.
+
+  Breaking changes (still released as `minor` because we are in `0.x`):
+  - `@kalink-ui/seedly`: `ButtonIcon` now requires a `label` prop for accessibility.
+    - Migration: replace `aria-label="..."` with `label="..."` on `ButtonIcon`.
+    - Icon children are treated as decorative (`aria-hidden`) and the label is announced via visually-hidden text.
+
+### Patch Changes
+
+- Updated dependencies [1efa841]
+  - @kalink-ui/dibbly@0.6.0
+
 ## 0.33.2
 
 ### Patch Changes

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.33.2",
+  "version": "0.34.4",
   "description": "A set of components for building UIs with React and TypeScript",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css.ts"
+  ],
   "license": "MIT",
   "author": "Louis Gollut",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Kalink/kalink-ui.git"
+    "url": "https://github.com/kalink-studio/kalink-ui"
   },
   "exports": {
     ".": "./src/index.ts",
@@ -16,35 +18,42 @@
     "./styles/layers": "./src/styles/layers.css.ts"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
-    "@turbo/gen": "^2.5.8",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@liip/storybook-addon-resizr": "^0.1.5",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@turbo/gen": "^2.7.1",
     "@types/node": "^24.6.2",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@vanilla-extract/css": "^1.17.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.37.0",
-    "eslint-plugin-storybook": "9.1.10",
-    "lucide-react": "^0.544.0",
-    "react": "^19.2.0",
+    "@vanilla-extract/vite-plugin": "^5.1.4",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/browser": "^4.0.16",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.2",
+    "eslint-plugin-storybook": "10.1.10",
+    "lucide-react": "^0.562.0",
+    "playwright": "^1.57.0",
+    "react": "^19.2.3",
     "react-docgen-typescript": "^2.4.0",
-    "react-dom": "^19.2.0",
-    "storybook": "^9.1.10",
-    "type-fest": "^5.0.1",
+    "react-dom": "^19.2.3",
+    "storybook": "^10.1.10",
+    "type-fest": "^5.3.1",
     "typescript": "^5.9.3",
-    "vite": "^7.1.9",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.10.2"
+    "vite": "^7.3.0",
+    "vite-tsconfig-paths": "^6.0.3",
+    "vitest": "^4.0.16",
+    "@kalink-ui/eslint-config": "0.11.3",
+    "@kalink-ui/typescript-config": "0.4.2"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.4",
@@ -63,10 +72,10 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "@kalink-ui/dibbly": "^0.5.3"
+    "@kalink-ui/dibbly": "^0.6.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/accessible-icon/accessible-icon.tsx

@@ -0,0 +1,31 @@
+import {
+  Children,
+  cloneElement,
+  ReactElement,
+  ReactNode,
+  SVGAttributes,
+} from 'react';
+
+import { VisuallyHidden } from '../visually-hidden';
+
+export interface AccessibleIconProps {
+  children?: ReactNode;
+  /**
+   * The accessible label for the icon. This label will be visually hidden but announced to screen
+   * reader users, similar to `alt` text for `img` tags.
+   */
+  label: string;
+}
+
+export function AccessibleIcon({ children, label }: AccessibleIconProps) {
+  const child = Children.only(children);
+  return (
+    <>
+      {cloneElement(child as ReactElement<SVGAttributes<SVGElement>>, {
+        'aria-hidden': 'true',
+        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+      })}
+      <VisuallyHidden>{label}</VisuallyHidden>
+    </>
+  );
+}

package/src/components/accessible-icon/index.ts

@@ -0,0 +1 @@
+export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon';

package/src/components/button-icon/button-icon.tsx

@@ -1,6 +1,7 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 
+import { AccessibleIcon } from '../accessible-icon';
 import { ButtonTypes } from '../button/button';
 
 import { ButtonIconVariants } from './button-icon.css';
@@ -15,17 +16,30 @@ type ButtonIconVariantResponsive = {
 };
 
 export type ButtonIconProps<TUse extends ButtonTypes> =
-  PolymorphicComponentProps<TUse> & ButtonIconVariantResponsive;
+  PolymorphicComponentProps<TUse> &
+    ButtonIconVariantResponsive & {
+      label: string;
+    };
 
 export function ButtonIcon<TUse extends ButtonTypes>(
   props: ButtonIconProps<TUse>,
 ) {
-  const { use: Comp = 'button', className, variant, size, ...rest } = props;
+  const {
+    use: Comp = 'button',
+    className,
+    variant,
+    size,
+    children,
+    label,
+    ...rest
+  } = props;
 
   return (
     <Comp
       className={clsx(buttonIconResponsive({ variant, size }), className)}
       {...(rest as Record<string, unknown>)}
-    />
+    >
+      <AccessibleIcon label={label}>{children}</AccessibleIcon>
+    </Comp>
   );
 }

package/src/components/form-field/form-field.css.ts

@@ -47,13 +47,13 @@ export const formFieldStyle = recipe({
 
             vars: {
               [formFieldVars.color.foreground]:
-                `color(from ${sys.color.foreground} srgb r g b / 0.38)`,
+                `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.light} * 75%), transparent)`,
             },
           },
 
           '&[aria-invalid], &:has([aria-invalid])': {
             vars: {
-              [formFieldVars.color.foreground]: 'red',
+              [formFieldVars.color.foreground]: '#d80000',
             },
           },
         },
@@ -67,7 +67,7 @@ export const formFieldStyle = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [formFieldVars.color.foreground]: 'red',
+              [formFieldVars.color.foreground]: '#d80000',
             },
           },
         },

package/src/components/scroll-area/scroll-area.tsx

@@ -2,6 +2,7 @@
 
 import { Corner, Root, Viewport } from '@radix-ui/react-scroll-area';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
 import { ComponentPropsWithRef } from 'react';
 
 import {
@@ -13,6 +14,8 @@ import { ScrollBar } from './scroll-bar';
 
 export type ScrollAreaProps = ComponentPropsWithRef<typeof Root> & {
   maxHeight?: string;
+  /** Scrollbar orientation. Use 'both' for both vertical and horizontal scrollbars. */
+  orientation?: 'vertical' | 'horizontal' | 'both';
 };
 
 export function ScrollArea({
@@ -20,11 +23,13 @@ export function ScrollArea({
   className,
   children,
   maxHeight = 'initial',
+  orientation = 'vertical',
   ...props
 }: ScrollAreaProps) {
   return (
-    <Root ref={ref} className={scrollArea} {...props}>
+    <Root ref={ref} className={clsx(scrollArea, className)} {...props}>
       <Viewport
+        tabIndex={0}
         className={scrollAreaViewport}
         style={assignInlineVars({
           [viewportMaxHeight]: maxHeight,
@@ -32,7 +37,12 @@ export function ScrollArea({
       >
         {children}
       </Viewport>
-      <ScrollBar />
+      {(orientation === 'vertical' || orientation === 'both') && (
+        <ScrollBar orientation="vertical" />
+      )}
+      {(orientation === 'horizontal' || orientation === 'both') && (
+        <ScrollBar orientation="horizontal" />
+      )}
       <Corner />
     </Root>
   );

package/src/components/sheet/index.ts

@@ -3,3 +3,6 @@ export { SheetHeader } from './sheet-header';
 export { SheetTitle } from './sheet-title';
 export { SheetDescription } from './sheet-description';
 export { SheetContent } from './sheet-content';
+export { SheetBody } from './sheet-body';
+export { SheetFooter } from './sheet-footer';
+export { SheetOverlay } from './sheet-overlay';

package/src/components/sheet/sheet-body.css.ts

@@ -0,0 +1,68 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+import { sys, transition } from '../../styles';
+
+export const sheetBodyRoot = style({
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 'auto',
+
+  overflow: 'hidden',
+});
+
+export const sheetBodyViewport = style({
+  height: '100%',
+});
+
+export const sheetBodyScrollbar = style({
+  display: 'flex',
+  userSelect: 'none',
+  touchAction: 'none',
+  padding: 2,
+  background: 'transparent',
+  transition: transition('background', { duration: 'short.3' }),
+  borderRadius: sys.shape.corner.small,
+
+  selectors: {
+    '&:hover': {
+      background: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
+    },
+
+    '&[data-orientation="vertical"]': {
+      width: sys.spacing[2],
+    },
+  },
+});
+
+export const sheetBodyThumb = style({
+  flex: 1,
+  background: `color-mix(in srgb, ${sys.color.foreground} 50%, transparent)`,
+  borderRadius: sys.shape.corner.small,
+  position: 'relative',
+  opacity: 0,
+  transition: transition('opacity', { duration: 'short.3' }),
+  pointerEvents: 'none',
+
+  selectors: {
+    '&:hover': {
+      background: `color-mix(in srgb, ${sys.color.foreground} 75%, transparent)`,
+    },
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      insetBlockStart: '50%',
+      insetInlineStart: '50%',
+      width: '100%',
+      height: '100%',
+      minWidth: sys.spacing[4],
+      minHeight: sys.spacing[4],
+      transform: 'translate(-50%, -50%)',
+    },
+  },
+});
+
+globalStyle(`${sheetBodyScrollbar}[data-state="visible"] ${sheetBodyThumb}`, {
+  opacity: 1,
+  pointerEvents: 'auto',
+});

package/src/components/sheet/sheet-body.tsx

@@ -0,0 +1,16 @@
+import { ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+import { ScrollArea } from '../scroll-area';
+
+export type SheetBodyProps<TUse extends ElementType> = BoxProps<TUse>;
+
+export function SheetBody<TUse extends ElementType>(
+  props: SheetBodyProps<TUse>,
+) {
+  return (
+    <ScrollArea>
+      <Box {...props} />
+    </ScrollArea>
+  );
+}

package/src/components/sheet/sheet-content.css.ts

@@ -1,7 +1,7 @@
 import { createVar, keyframes } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys } from '../../styles';
+import { mapContractVars, sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
 const from = createVar();
@@ -32,6 +32,9 @@ export const sheetContent = recipe({
   base: {
     '@layer': {
       [components]: {
+        display: 'flex',
+        flexDirection: 'column',
+
         zIndex: 50,
         maxWidth: '100vw',
         maxHeight: '100vh',
@@ -167,6 +170,14 @@ export const sheetContent = recipe({
         },
       },
     },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          gap: sys.spacing[key],
+        },
+      },
+    })),
   },
 
   defaultVariants: {

package/src/components/sheet/sheet-content.tsx

@@ -5,7 +5,6 @@ import { clsx } from 'clsx';
 import { ComponentPropsWithRef, ElementType } from 'react';
 
 import { Box, BoxProps } from '../box';
-import { ScrollArea } from '../scroll-area';
 
 import { SheetPortal } from './sheet';
 import { sheetContent, SheetContentVariants } from './sheet-content.css';
@@ -22,6 +21,7 @@ export function SheetContent<TUse extends ElementType>({
   side,
   size,
   ref,
+  spacing = 4,
   ...props
 }: SheetContentProps<TUse>) {
   return (
@@ -31,11 +31,11 @@ export function SheetContent<TUse extends ElementType>({
         <Box
           ref={ref}
           variant="solid"
-          className={clsx(sheetContent({ side, size }), className)}
+          spacing={spacing}
+          className={clsx(sheetContent({ side, size, spacing }), className)}
+          {...props}
         >
-          <ScrollArea>
-            <Box {...props}>{children}</Box>
-          </ScrollArea>
+          {children}
         </Box>
       </Content>
     </SheetPortal>

package/src/components/sheet/sheet-footer.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const sheetFooter = style({
+  flexGrow: 0,
+  flexShrink: 0,
+  flexBasis: 'auto',
+});

package/src/components/sheet/sheet-footer.tsx

@@ -1,14 +1,19 @@
+import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { Box, BoxProps } from '../box';
+import { Cluster, ClusterProps } from '../cluster';
 
-export function SheetFooter<TUse extends ElementType>(props: BoxProps<TUse>) {
+import { sheetFooter } from './sheet-footer.css';
+
+export function SheetFooter<TUse extends ElementType>({
+  spacing = 4,
+  className,
+  ...props
+}: ClusterProps<TUse>) {
   return (
-    <Box
-      display="flex"
-      flexDirection={{ sm: 'column-reverse', md: 'row' }}
-      justifyContent={{ sm: 'flex-start', md: 'flex-end' }}
-      gap="sm"
+    <Cluster
+      spacing={spacing}
+      className={clsx(sheetFooter, className)}
       {...props}
     />
   );

package/src/components/sheet/sheet-header.css.ts

@@ -13,6 +13,9 @@ export const sheetHeader = recipe({
         justifyContent: 'space-between',
         flexWrap: 'nowrap',
         gap: sys.spacing[4],
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
       },
     },
   },

package/src/components/visually-hidden/index.ts

@@ -0,0 +1,2 @@
+export { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden';
+export { visuallyHiddenStyle } from './visually-hidden.css';

package/src/components/visually-hidden/visually-hidden.css.ts

@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const visuallyHiddenStyle = style({
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+
+  position: 'absolute',
+
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+
+  border: 0,
+});

package/src/components/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,10 @@
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { visuallyHiddenStyle } from './visually-hidden.css';
+
+export type VisuallyHiddenProps = ComponentPropsWithoutRef<'span'>;
+
+export function VisuallyHidden({ className, ...props }: VisuallyHiddenProps) {
+  return <span {...props} className={clsx(visuallyHiddenStyle, className)} />;
+}

package/src/styles/scale.ts

@@ -129,8 +129,7 @@ export function getInterpolationFor(
 }
 
 export interface FluidClampForOptions
-  extends DynamicInterpolationOptions,
-    FluidClampOptions {}
+  extends DynamicInterpolationOptions, FluidClampOptions {}
 
 /**
  * Convenience to produce a CSS clamp() for a single `value` by first computing