@firecms/ui 3.3.0 → 3.4.0-canary.f6a889a

package/dist/styles.d.ts

@@ -1,7 +1,7 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
 export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-90 dark:bg-surface-800/90";
 export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
 export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
 export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.4.0-canary.f6a889a",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -74,7 +74,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.2.0",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
     "tailwind-merge": "^2.6.0"
@@ -89,7 +89,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.19.17",
+    "@types/node": "^26.1.1",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
@@ -99,14 +99,14 @@
     "cross-env": "^7.0.3",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.6",
     "rollup-preserve-directives": "^1.1.3",
     "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
-    "tsd": "^0.31.2",
+    "tsd": "^0.33.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
-    "vite-plugin-static-copy": "^3.1.4"
+    "vite-plugin-static-copy": "^4.1.1"
   },
   "files": [
     "dist",

package/src/components/Alert.tsx

@@ -26,16 +26,16 @@ const getSizeClasses = (size: "small" | "medium" | "large") => {
 const getColorClasses = (severity: string) => {
     switch (severity) {
         case "error":
-            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
+            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
         case "warning":
-            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
+            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
         case "info":
-            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
         case "success":
-            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
         case "base":
         default:
-            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
+            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
     }
 };
 
@@ -58,10 +58,10 @@ export const Alert: React.FC<AlertProps> = ({
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",
-                "rounded-md flex items-center gap-2",
+                "rounded-lg flex items-center gap-2",
                 classes,
                 outerClassName)}>
-            <div className={cls("flex-grow", className)}>{children}</div>
+            <div className={cls("grow", className)}>{children}</div>
             {onDismiss && (
                 <button
                     className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"

package/src/components/Avatar.tsx

@@ -39,7 +39,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             className={cls(
                 "rounded-full flex items-center justify-center overflow-hidden",
                 "p-1 w-12 h-12 min-w-12 min-h-12",
-                hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700",
+                hover && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700",
                 outerClassName
             )}
         >

package/src/components/BooleanSwitch.tsx

@@ -27,6 +27,9 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
         return <button
             type="button"
             ref={ref}
+            role="switch"
+            aria-checked={allowIndeterminate && (value === null || value === undefined) ? "mixed" : !!value}
+            aria-disabled={disabled || undefined}
             tabIndex={disabled ? -1 : undefined}
             onClick={disabled
                 ? (e) => e.preventDefault()
@@ -53,7 +56,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             {allowIndeterminate && (value === null || value === undefined) && <div
                 key={"knob"}
                 className={cls(
-                    "block rounded-full transition-transform duration-100 transform will-change-auto",
+                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
                     disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                     {
                         "w-[21px] h-[10px]": size === "medium" || size === "large",
@@ -69,8 +72,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
             {!(allowIndeterminate && (value === null || value === undefined)) && <div
                 key={"knob"}
                 className={cls(
-                    "block rounded-full transition-transform duration-100 transform will-change-auto",
-                    disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
+                    "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
+                    disabled ? "bg-surface-accent-300 dark:bg-surface-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
                     {
                         "w-[21px] h-[21px]": size === "medium" || size === "large",
                         "w-[19px] h-[19px]": size === "small",

package/src/components/Button.tsx

@@ -33,40 +33,44 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<any>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
+        "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
+        "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants
         "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
         "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": variant === "text" && color === "error" && !disabled,
-        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
-        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
+        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "text" && !disabled,
+        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "text" && color === "neutral" && !disabled,
 
         // Outlined Variants
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
-        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
-        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "outlined" && color === "neutral" && !disabled,
+        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "outlined" && color === "text" && !disabled,
+        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "outlined" && color === "neutral" && !disabled,
 
         // Disabled states for all variants
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": variant === "text" && disabled,
         "border border-surface-500 opacity-50": variant === "outlined" && disabled,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": variant === "filled" && disabled,
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled,
     });
 
+    const iconColorClass = (color === "neutral" || color === "text") && !disabled
+        ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300"
+        : "";
+
     const sizeClasses = cls(
         {
             "py-1 px-2": size === "small",
@@ -82,7 +86,7 @@ const ButtonInner = React.memo(React.forwardRef<
             <Component
                 ref={ref}
                 onClick={props.onClick}
-                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
                 {...props}>
                 {startIcon}
                 {children}
@@ -94,7 +98,7 @@ const ButtonInner = React.memo(React.forwardRef<
         <button ref={ref as any}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
-                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, iconColorClass, className)}
                 disabled={disabled}
                 data-variant={variant}
                 data-size={size}

package/src/components/Card.tsx

@@ -8,7 +8,7 @@ type CardProps = {
     style?: React.CSSProperties;
     onClick?: (e?: React.MouseEvent) => void;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({
     children,
@@ -38,4 +38,6 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({
     );
 });
 
+Card.displayName = "Card";
+
 export { Card };

package/src/components/CenteredView.tsx

@@ -22,7 +22,7 @@ export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(
 
     return (
         <div ref={ref}
-             className={cls("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             className={cls("flex flex-col grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
              {...rest}>
             <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
                 {children}

package/src/components/Checkbox.tsx

@@ -13,6 +13,7 @@ export interface CheckboxProps {
     padding?: boolean;
     size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
+    "aria-label"?: string;
 }
 
 const sizeClasses = {
@@ -26,13 +27,13 @@ const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
     large: "w-12 h-12 ",
-    smallest: "w-6 h-6"
+    smallest: "w-8 h-8"
 }
 const paddingClasses = {
     medium: "p-2",
     small: "p-2",
     large: "p-2",
-    smallest: ""
+    smallest: "p-2"
 }
 
 const colorClasses = {
@@ -48,7 +49,8 @@ export const Checkbox = React.memo(({
                              disabled,
                              size = "medium",
                              onCheckedChange,
-                             color = "primary"
+                             color = "primary",
+                             "aria-label": ariaLabel
                          }: CheckboxProps) => {
 
     const isChecked = indeterminate ? false : checked;
@@ -65,6 +67,8 @@ export const Checkbox = React.memo(({
             id={id}
             checked={indeterminate || isChecked}
             disabled={disabled}
+            aria-label={ariaLabel}
+            aria-checked={indeterminate ? "mixed" : isChecked}
             onCheckedChange={disabled ? undefined : onCheckedChange}>
 
             <div className={cls(
@@ -84,7 +88,7 @@ export const Checkbox = React.memo(({
                         (indeterminate || isChecked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
+                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate
@@ -100,3 +104,5 @@ export const Checkbox = React.memo(({
         </CheckboxPrimitive.Root>
     );
 });
+
+Checkbox.displayName = "Checkbox";

package/src/components/Chip.tsx

@@ -4,6 +4,10 @@ import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
 export type ChipColorScheme = {
     color: string;
     text: string;
+    /** Background color override for dark mode. Falls back to `color`. */
+    darkColor?: string;
+    /** Text color override for dark mode. Falls back to `text`. */
+    darkText?: string;
 }
 
 export type ChipColorKey = keyof typeof CHIP_COLORS;
@@ -11,7 +15,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
@@ -21,11 +25,37 @@ export interface ChipProps {
 }
 
 const sizeClassNames = {
+    smallest: "px-1.5 py-px text-[10px]",
     small: "px-2 py-0.5 text-sm",
     medium: "px-3 py-1 text-sm",
     large: "px-4 py-1.5 text-sm"
 }
 
+/**
+ * Detect if the app is currently in dark mode by checking the
+ * Tailwind `dark` class on the document root.
+ */
+function isDarkMode(): boolean {
+    return typeof document !== "undefined" &&
+        document.documentElement.classList.contains("dark");
+}
+
+/**
+ * Helper to generate rgba from a hex color. Returns the input unchanged for
+ * non-hex values so it degrades gracefully.
+ */
+function getRgba(hex: string, alpha: number): string {
+    if (!hex || !hex.startsWith("#")) return hex;
+    let color = hex.slice(1);
+    if (color.length === 3) {
+        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+    }
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * @group Preview components
  */
@@ -42,30 +72,59 @@ export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip({
                      }: ChipProps, ref) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
+    const dark = isDarkMode();
+
+    const hasScheme = Boolean(error || usedColorScheme);
+
+    let textColor = "";
+    let bgColor = "";
+    let border = "";
+
+    if (error) {
+        textColor = dark ? "#f87171" : "#dc2626";
+    } else if (usedColorScheme) {
+        // Prefer a dark-mode override when present, otherwise fall back to the
+        // existing scheme color so palettes without dark variants are unchanged.
+        textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
+    }
+
+    if (hasScheme) {
+        if (outlined) {
+            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);
+            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
+        } else if (error) {
+            bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
+        } else if (usedColorScheme) {
+            bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
+        }
+    }
+
     return (
         <div
             ref={ref}
-            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
-                onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "",
+                "transition-colors duration-150",
+                !hasScheme && "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white",
+                !hasScheme && outlined && "bg-transparent dark:bg-transparent border border-surface-accent-300 dark:border-surface-accent-700",
+                onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",
-                error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}
             style={{
-                backgroundColor: error || !usedColorScheme ? undefined : usedColorScheme.color,
-                color: error || !usedColorScheme ? undefined : usedColorScheme.text,
+                ...(hasScheme ? {
+                    backgroundColor: bgColor,
+                    color: textColor,
+                    border: border || undefined
+                } : {}),
                 overflow: "hidden",
                 ...style
-                // display: "-webkit-box",
-                // WebkitLineClamp: 1,
-                // WebkitBoxOrient: "vertical",
             }}
         >
-            {children}
             {icon}
+            {children}
         </div>
     );
 });

package/src/components/Collapse.tsx

@@ -62,3 +62,5 @@ export const Collapse = React.memo(({
         </Collapsible.Root>
     )
 });
+
+Collapse.displayName = "Collapse";

package/src/components/Dialog.tsx

@@ -26,6 +26,7 @@ export type DialogProps = {
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
+    "aria-describedby"?: string;
 };
 
 const widthClasses = {
@@ -60,7 +61,8 @@ export const Dialog = ({
                            onPointerDownOutside,
                            onInteractOutside,
                            disableInitialFocus = true,
-                           portalContainer
+                           portalContainer,
+                           "aria-describedby": ariaDescribedby
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -92,7 +94,7 @@ export const Dialog = ({
                 <div className={cls("fixed inset-0 z-30", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -111,7 +113,8 @@ export const Dialog = ({
                         }}
                         onPointerDownOutside={onPointerDownOutside}
                         onInteractOutside={onInteractOutside}
-                        className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
+                        aria-describedby={ariaDescribedby}
+                        className={cls("relative h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
                             className={cls(paperMixin,
@@ -124,10 +127,10 @@ export const Dialog = ({
                                 fullHeight && !fullScreen ? "h-full" : undefined,
                                 "text-surface-accent-900 dark:text-white",
                                 "justify-center items-center",
-                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
+                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
                                 "ease-in-out duration-200",
                                 scrollable && "overflow-y-auto",
-                                displayed && open ? "opacity-100" : "opacity-0",
+                                displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",
                                 maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined,
                                 className
                             )}>

package/src/components/ExpandablePanel.tsx

@@ -81,7 +81,7 @@ export function ExpandablePanel({
             <Collapsible.Root
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md",
+                    "rounded-lg",
                     "w-full",
                     className
                 )}
@@ -95,7 +95,7 @@ export function ExpandablePanel({
                     <div
                         className={cls(
                             "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40",
+                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50",
                             invisible ? "border-b px-2" : "p-4",
                             open ? "py-6" : "py-4",
                             "transition-all duration-200",
@@ -106,6 +106,7 @@ export function ExpandablePanel({
                         )}
                         role="button"
                         tabIndex={0}
+                        aria-expanded={open}
                     >
                         {title}
                         <KeyboardArrowDownIcon className={cls("transition", open ? "rotate-180" : "")}/>

package/src/components/FilterChip.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { cls } from "../util";
+
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * The text label displayed on the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the chip is currently in an active/selected state.
+     */
+    active?: boolean;
+    /**
+     * Optional icon rendered before the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Size variant.
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * Whether the chip is disabled.
+     */
+    disabled?: boolean;
+}
+
+const sizeClasses = {
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-1 text-xs"
+};
+
+/**
+ * A toggle chip used for filter presets and similar multi-select controls.
+ *
+ * Uses an inset box-shadow for the active ring instead of `border` so the
+ * chip size stays stable across states and the ring cannot be clipped by
+ * parent `overflow-hidden` containers.
+ *
+ * @group Interactive components
+ */
+export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip({
+    children,
+    active = false,
+    onClick,
+    icon,
+    size = "medium",
+    className,
+    disabled = false,
+    ...rest
+}: FilterChipProps, ref) {
+    return (
+        <button
+            ref={ref}
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className={cls(
+                "inline-flex items-center gap-1 rounded-full",
+                "font-medium whitespace-nowrap select-none shrink-0",
+                "transition-colors duration-150",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+                sizeClasses[size],
+                active
+                    ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]"
+                    : cls(
+                        "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
+                        !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"
+                    ),
+                disabled && "opacity-50 cursor-not-allowed",
+                className
+            )}
+            {...rest}
+        >
+            {icon}
+            {children}
+        </button>
+    );
+});

package/src/components/IconButton.tsx

@@ -11,16 +11,17 @@ export type IconButtonProps<C extends React.ElementType> =
     disabled?: boolean;
     toggled?: boolean;
     component?: C;
-    onClick?: React.MouseEventHandler<any>
+    onClick?: React.MouseEventHandler<any>;
+    "aria-label"?: string;
 }
 
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-const colorClasses = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
+const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    smallest: "w-7 !h-7 min-w-7 min-h-7",
     large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {
@@ -40,11 +41,15 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
     const Component: React.ElementType<any> = component || "button";
+    const isNativeButton = Component === "button";
     return (
         <Component
-            type="button"
+            type={isNativeButton ? "button" : undefined}
+            role={isNativeButton ? undefined : "button"}
+            aria-disabled={disabled || undefined}
+            tabIndex={disabled ? -1 : undefined}
             ref={ref}
             {...props}
             className={cls(

package/src/components/InfoLabel.tsx

@@ -16,7 +16,7 @@ export function InfoLabel({
 
     return (
         <div
-            className={cls("my-3 py-2 px-4 rounded", colorClasses[mode])}>
+            className={cls("my-3 py-2 px-4 rounded-xs", colorClasses[mode])}>
             {children}
         </div>
     )