banhatten-ui 0.1.2 → 0.2.0

package/dist/specs/badge.json

@@ -0,0 +1,142 @@
+{
+  "name": "Badge",
+  "description": "Compact label for status, category, or count. Supports filled, light, and outlined styles across 6 semantic colors.",
+
+  "base": {
+    "display": "inline-flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "borderRadius": "{radius.full}",
+    "fontWeight": 500,
+    "flexShrink": 0,
+    "gap": "4px"
+  },
+
+  "variants": {
+    "filled": {},
+    "light": {
+      "border": { "width": "1px" }
+    },
+    "outlined": {
+      "bg": "transparent",
+      "border": { "width": "1px" }
+    }
+  },
+
+  "sizes": {
+    "sm": { "height": "24px", "paddingX": "{spacing.sm}", "fontSize": "12px", "lineHeight": "16px" },
+    "lg": { "height": "28px", "paddingX": "{spacing.md}", "fontSize": "14px", "lineHeight": "20px" }
+  },
+
+  "compoundVariants": [
+    {
+      "when": { "variant": "filled", "color": "brand" },
+      "apply": { "bg": "{alias.bg-brand}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "filled", "color": "neutral" },
+      "apply": { "bg": "{brand.neutral-700}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "filled", "color": "success" },
+      "apply": { "bg": "{alias.bg-success}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "filled", "color": "warning" },
+      "apply": { "bg": "{alias.bg-warning}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "filled", "color": "danger" },
+      "apply": { "bg": "{alias.bg-danger}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "filled", "color": "info" },
+      "apply": { "bg": "{alias.bg-info}", "text": "{alias.text-on-color}" }
+    },
+    {
+      "when": { "variant": "light", "color": "brand" },
+      "apply": { "bg": "{alias.bg-brand-tertiary}", "border": { "color": "{alias.border-brand-secondary}" }, "text": "{alias.text-brand}" }
+    },
+    {
+      "when": { "variant": "light", "color": "neutral" },
+      "apply": { "bg": "{alias.bg-secondary}", "border": { "color": "{alias.border-strong}" }, "text": "{alias.text-primary}" }
+    },
+    {
+      "when": { "variant": "light", "color": "success" },
+      "apply": { "bg": "{alias.bg-success-tertiary}", "border": { "color": "{alias.border-success-secondary}" }, "text": "{alias.text-success-strong}" }
+    },
+    {
+      "when": { "variant": "light", "color": "warning" },
+      "apply": { "bg": "{alias.bg-warning-tertiary}", "border": { "color": "{alias.border-warning-secondary}" }, "text": "{alias.text-warning-strong}" }
+    },
+    {
+      "when": { "variant": "light", "color": "danger" },
+      "apply": { "bg": "{alias.bg-danger-tertiary}", "border": { "color": "{alias.border-danger-secondary}" }, "text": "{alias.text-danger-strong}" }
+    },
+    {
+      "when": { "variant": "light", "color": "info" },
+      "apply": { "bg": "{alias.bg-info-tertiary}", "border": { "color": "{alias.border-info-subtle}" }, "text": "{alias.text-info-strong}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "brand" },
+      "apply": { "border": { "color": "{alias.border-brand}" }, "text": "{alias.text-brand}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "neutral" },
+      "apply": { "border": { "color": "{alias.border-strong}" }, "text": "{alias.text-primary}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "success" },
+      "apply": { "border": { "color": "{alias.border-success}" }, "text": "{alias.text-success}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "warning" },
+      "apply": { "border": { "color": "{alias.border-warning}" }, "text": "{alias.text-warning-strong}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "danger" },
+      "apply": { "border": { "color": "{alias.border-danger}" }, "text": "{alias.text-danger}" }
+    },
+    {
+      "when": { "variant": "outlined", "color": "info" },
+      "apply": { "border": { "color": "{alias.border-info}" }, "text": "{alias.text-info}" }
+    }
+  ],
+
+  "props": {
+    "variant": { "type": "enum", "values": ["filled", "light", "outlined"], "default": "light" },
+    "color": { "type": "enum", "values": ["brand", "neutral", "success", "warning", "danger", "info"], "default": "brand" },
+    "size": { "type": "enum", "values": ["sm", "lg"], "default": "sm" },
+    "withDot": { "type": "boolean", "default": false, "description": "Render a small status dot before the badge content." },
+    "leftIcon": { "type": "string", "description": "Material Symbol name for leading icon." },
+    "rightIcon": { "type": "string", "description": "Material Symbol name for trailing icon." },
+    "iconVariant": { "type": "enum", "values": ["outlined", "rounded", "sharp"], "default": "outlined" },
+    "iconFilled": { "type": "boolean", "default": false }
+  },
+
+  "slots": {
+    "dot": {
+      "position": "start",
+      "size": "6px",
+      "borderRadius": "{radius.full}",
+      "bg": "currentColor"
+    },
+    "leftIcon": {
+      "position": "start",
+      "element": "Icon",
+      "iconSizeByBadgeSize": { "sm": "xs", "lg": "sm" }
+    },
+    "rightIcon": {
+      "position": "end",
+      "element": "Icon",
+      "iconSizeByBadgeSize": { "sm": "xs", "lg": "sm" }
+    }
+  },
+
+  "defaults": { "variant": "light", "color": "brand", "size": "sm" },
+
+  "accessibility": {
+    "role": "status",
+    "notes": "Rendered as a <span>. Dot element is aria-hidden. Icon elements are aria-hidden."
+  }
+}

package/dist/specs/breadcrumb.json

@@ -0,0 +1,160 @@
+{
+  "name": "Breadcrumb",
+  "description": "Navigation component showing hierarchical path. Composed of Breadcrumb (nav), BreadcrumbList, BreadcrumbItem, and BreadcrumbSeparator.",
+
+  "base": {
+    "display": "block"
+  },
+
+  "props": {
+    "aria-label": { "type": "string", "default": "Breadcrumb", "description": "Accessible label for nav." }
+  },
+
+  "subComponents": {
+    "BreadcrumbList": {
+      "description": "Ordered list container for breadcrumb items. Wraps items with optional background.",
+      "element": "ol",
+      "base": {
+        "display": "flex",
+        "flexWrap": "wrap",
+        "alignItems": "center",
+        "gap": "{spacing.xs}"
+      },
+      "variants": {
+        "containerStyle": {
+          "default": {},
+          "withBackground": {
+            "borderRadius": "{radius.sm}",
+            "border": { "width": "1px", "color": "{alias.border-default}" },
+            "bg": "{alias.bg-primary}",
+            "padding": "{spacing.md}"
+          }
+        }
+      },
+      "props": {
+        "containerStyle": { "type": "enum", "values": ["default", "withBackground"], "default": "default" }
+      }
+    },
+
+    "BreadcrumbListItem": {
+      "description": "List item wrapper for a single breadcrumb item and optional separator.",
+      "element": "li",
+      "base": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "gap": "{spacing.xs}"
+      }
+    },
+
+    "BreadcrumbSeparator": {
+      "description": "Visual separator between items. Slash character or chevron icon.",
+      "element": "span",
+      "base": {
+        "display": "flex",
+        "alignItems": "center",
+        "flexShrink": 0,
+        "color": "{alias.text-inactive}"
+      },
+      "variants": {
+        "separator": {
+          "slash": {
+            "paddingX": "{spacing.xs}",
+            "fontSize": "14px",
+            "fontWeight": 400
+          },
+          "chevron": {
+            "iconColor": "{alias.icon-inactive}",
+            "icon": "chevron_right",
+            "iconSize": "sm"
+          }
+        }
+      },
+      "props": {
+        "separator": { "type": "enum", "values": ["slash", "chevron"], "default": "chevron" }
+      },
+      "accessibility": {
+        "role": "presentation",
+        "ariaHidden": true
+      }
+    },
+
+    "BreadcrumbItem": {
+      "description": "Individual breadcrumb link or span. Renders <a> when href provided, else <span>. Supports icon+text, icon-only, or overflow (ellipsis) variants.",
+      "element": "a | span",
+      "base": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "fontSize": "14px",
+        "gap": "{spacing.xs}",
+        "borderRadius": "{radius.sm}",
+        "transition": "color",
+        "focusRing": { "width": "2px", "color": "{alias.border-brand}", "offset": "2px" }
+      },
+      "variants": {
+        "variant": {
+          "iconText": { "minWidth": 0 },
+          "iconOnly": {},
+          "overflow": { "minWidth": 0 }
+        },
+        "state": {
+          "default": {
+            "text": "{alias.text-secondary}",
+            "iconColor": "{alias.icon-secondary}",
+            "hover": { "text": "{alias.text-tertiary-hover}", "iconColor": "{alias.icon-tertiary-hover}" }
+          },
+          "active": {
+            "text": "{alias.text-primary}",
+            "fontWeight": 500,
+            "iconColor": "{alias.icon-primary}"
+          },
+          "disabled": {
+            "text": "{alias.text-inactive}",
+            "iconColor": "{alias.icon-inactive-subtle}",
+            "cursor": "default",
+            "pointerEvents": "none"
+          }
+        },
+        "overflowHover": {
+          "true": { "hover": { "bg": "{alias.bg-tertiary}" } },
+          "false": {}
+        }
+      },
+      "compoundVariants": [
+        {
+          "when": { "variant": "overflow", "overflowHover": true, "state": "default" },
+          "apply": {
+            "hover": {
+              "bg": "{alias.bg-tertiary}",
+              "text": "{alias.text-secondary-hover}",
+              "iconColor": "{alias.icon-secondary-hover}"
+            }
+          }
+        }
+      ],
+      "props": {
+        "variant": { "type": "enum", "values": ["iconText", "iconOnly", "overflow"], "default": "iconText" },
+        "active": { "type": "boolean", "default": false, "description": "Current page. Renders span with aria-current=\"page\"." },
+        "disabled": { "type": "boolean", "default": false, "description": "Disabled state. Renders span with aria-disabled=\"true\"." },
+        "icon": { "type": "string", "description": "Material Symbol name (e.g. home, folder). Ignored when variant=overflow; overflow uses more_horiz." },
+        "href": { "type": "string", "description": "When provided, renders <a>. Omit for current page or overflow trigger." },
+        "overflowHover": { "type": "boolean", "description": "Show hover bg for overflow variant. Defaults to true when variant=overflow and state=default." }
+      },
+      "slots": {
+        "icon": {
+          "element": "Icon",
+          "size": "sm",
+          "className": "breadcrumb-icon",
+          "shrink": 0
+        }
+      },
+      "accessibility": {
+        "notes": "active sets aria-current=\"page\"; disabled sets aria-disabled=\"true\". Icon-only and overflow require sr-only label for screen readers."
+      }
+    }
+  },
+
+  "accessibility": {
+    "role": "navigation",
+    "ariaLabel": "Breadcrumb"
+  }
+}

package/dist/specs/button-group.json

@@ -0,0 +1,91 @@
+{
+  "name": "ButtonGroup",
+  "description": "Horizontal container grouping ButtonGroupItem components. Items share size and have position-based rounding and dividers.",
+
+  "base": {
+    "display": "inline-flex",
+    "flexDirection": "row",
+    "alignItems": "stretch",
+    "borderRadius": "{radius.sm}",
+    "border": { "width": "1px", "color": "{alias.border-strong}" },
+    "bg": "{alias.bg-primary}",
+    "overflow": "hidden"
+  },
+
+  "props": {
+    "size": { "type": "enum", "values": ["small", "medium"], "default": "medium", "description": "Passed to each ButtonGroupItem. All items share the same size." },
+    "children": { "type": "ReactNode", "description": "ButtonGroupItem components." }
+  },
+
+  "subComponents": {
+    "ButtonGroupItem": {
+      "description": "Individual selectable item within the button group. Supports text, text+icon, or icon-only.",
+      "base": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "flexShrink": 0,
+        "transition": "background-color, color",
+        "focusVisible": { "outline": "none", "ring": "2px", "ringColor": "{alias.border-brand}", "ringOffset": "2px" },
+        "disabled": { "pointerEvents": "none" }
+      },
+      "sizes": {
+        "small": { "height": "36px", "paddingX": "{spacing.md}", "gap": "2px", "fontSize": "14px" },
+        "medium": { "height": "40px", "paddingX": "{spacing.lg}", "gap": "4px", "fontSize": "14px" }
+      },
+      "types": {
+        "textAndIcon": {},
+        "textOnly": {},
+        "iconOnly": {}
+      },
+      "states": {
+        "selected": {
+          "true": { "bg": "{alias.bg-brand-tertiary}", "text": "{alias.text-brand}", "fontWeight": 500 },
+          "false": {
+            "bg": "transparent",
+            "text": "{alias.text-primary}",
+            "hover": { "bg": "{alias.bg-tertiary}" },
+            "disabled": { "text": "{alias.text-inactive}", "bg": "{alias.bg-inactive}" }
+          }
+        }
+      },
+      "positions": {
+        "first": { "borderRadius": "{radius.sm} 0 0 {radius.sm}", "borderRight": "none" },
+        "middle": { "borderRadius": "0", "borderLeft": { "width": "1px", "color": "{alias.border-strong}" } },
+        "last": { "borderRadius": "0 {radius.sm} {radius.sm} 0", "borderLeft": { "width": "1px", "color": "{alias.border-strong}" } },
+        "only": { "borderRadius": "{radius.sm}" }
+      },
+      "compoundVariants": [
+        { "when": { "type": "iconOnly", "size": "small" }, "apply": { "width": "36px", "paddingX": "0" } },
+        { "when": { "type": "iconOnly", "size": "medium" }, "apply": { "width": "40px", "paddingX": "0" } }
+      ],
+      "props": {
+        "size": { "type": "enum", "values": ["small", "medium"], "default": "medium" },
+        "type": { "type": "enum", "values": ["textAndIcon", "textOnly", "iconOnly"], "default": "textAndIcon" },
+        "selected": { "type": "boolean", "default": false, "description": "Shows selected state. Sets aria-current='true'." },
+        "position": { "type": "enum", "values": ["first", "middle", "last", "only"], "description": "Set by ButtonGroup automatically." },
+        "leftIcon": { "type": "string", "description": "Material Symbol name. Used when type is textAndIcon." },
+        "rightIcon": { "type": "string", "description": "Material Symbol name. Used when type is textAndIcon." },
+        "icon": { "type": "string", "description": "Material Symbol name for icon-only. Requires aria-label." },
+        "disabled": { "type": "boolean", "default": false }
+      },
+      "slots": {
+        "leftIcon": { "element": "Icon", "iconSizeBySize": { "small": "sm", "medium": "md" } },
+        "rightIcon": { "element": "Icon", "iconSizeBySize": { "small": "sm", "medium": "md" } },
+        "icon": { "element": "Icon", "iconSizeBySize": { "small": "sm", "medium": "md" } }
+      },
+      "iconColorByState": {
+        "selected": "{alias.icon-brand}",
+        "disabled": "{alias.icon-inactive}",
+        "default": "{alias.icon-primary}"
+      }
+    }
+  },
+
+  "defaults": { "size": "medium" },
+
+  "accessibility": {
+    "role": "group",
+    "notes": "ButtonGroupItem icon-only mode requires aria-label."
+  }
+}

package/dist/specs/button.json

@@ -0,0 +1,110 @@
+{
+  "name": "Button",
+  "description": "Primary interactive element for actions. Supports text, text with icons, and icon-only modes.",
+
+  "base": {
+    "display": "inline-flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "fontWeight": 500,
+    "flexShrink": 0,
+    "transition": "background-color, color"
+  },
+
+  "variants": {
+    "primary": {
+      "bg": "{alias.component-button-brand-bg}",
+      "text": "{alias.text-on-color}",
+      "hover": { "bg": "{alias.component-button-brand-bg-hover}" },
+      "active": { "bg": "{alias.bg-brand-strong}" }
+    },
+    "secondary": {
+      "bg": "{alias.component-button-secondary-bg}",
+      "text": "{alias.component-button-secondary-fg}",
+      "border": { "width": "1px", "color": "{alias.border-strong}" },
+      "shadow": "{shadow.xs}",
+      "hover": { "bg": "{alias.component-button-secondary-bg-hover}" },
+      "active": { "bg": "{alias.bg-quarterary}" }
+    },
+    "tertiary": {
+      "bg": "transparent",
+      "text": "{alias.component-button-tertiary-color-fg}",
+      "hover": { "bg": "{alias.component-button-tertiary-bg-hover}" },
+      "active": { "bg": "{alias.bg-quarterary}" }
+    },
+    "danger": {
+      "bg": "{alias.component-button-danger-bg}",
+      "text": "{alias.text-on-color}",
+      "hover": { "bg": "{alias.component-button-danger-bg-hover}" },
+      "active": { "bg": "{alias.bg-danger-strong}" }
+    },
+    "link": {
+      "bg": "transparent",
+      "text": "{alias.component-button-tertiary-color-fg}",
+      "textDecoration": { "underlineOffset": "4px" },
+      "hover": { "textDecoration": "underline" }
+    },
+    "link-brand": {
+      "bg": "transparent",
+      "text": "{alias.component-button-link-color-fg}",
+      "textDecoration": { "underlineOffset": "4px" },
+      "hover": { "text": "{alias.component-button-link-color-fg-hover}" }
+    }
+  },
+
+  "sizes": {
+    "xs": { "height": "36px", "paddingX": "{spacing.md}", "gap": "2px", "fontSize": "14px", "borderRadius": "{radius.sm}" },
+    "md": { "height": "40px", "paddingX": "{spacing.lg}", "gap": "4px", "fontSize": "14px", "borderRadius": "{radius.sm}" },
+    "lg": { "height": "44px", "paddingX": "{spacing.xl}", "gap": "4px", "fontSize": "16px", "borderRadius": "{radius.sm}" },
+    "xl": { "height": "48px", "paddingX": "{spacing.2xl}", "gap": "4px", "fontSize": "16px", "borderRadius": "{radius.sm}" },
+    "2xl": { "height": "56px", "paddingX": "{spacing.2xl}", "gap": "8px", "fontSize": "16px", "borderRadius": "{radius.md}" }
+  },
+
+  "states": {
+    "disabled": { "opacity": 0.5, "pointerEvents": "none" },
+    "focus": { "outline": "none", "ring": "2px", "ringColor": "{alias.border-brand}", "ringOffset": "2px" }
+  },
+
+  "compoundVariants": [
+    {
+      "when": { "variant": ["link", "link-brand"] },
+      "apply": { "height": "auto", "paddingX": "0", "paddingY": "0", "borderRadius": "6px" }
+    },
+    {
+      "when": { "iconOnly": true },
+      "apply": { "width": "=height", "paddingX": "0" }
+    }
+  ],
+
+  "props": {
+    "variant": { "type": "enum", "values": ["primary", "secondary", "tertiary", "danger", "link", "link-brand"], "default": "primary" },
+    "size": { "type": "enum", "values": ["xs", "md", "lg", "xl", "2xl"], "default": "md" },
+    "icon": { "type": "string", "description": "Material Symbol name for icon-only mode. Renders a square button." },
+    "leftIcon": { "type": "string", "description": "Material Symbol name for leading icon." },
+    "rightIcon": { "type": "string", "description": "Material Symbol name for trailing icon." },
+    "iconVariant": { "type": "enum", "values": ["outlined", "rounded", "sharp"], "default": "outlined" },
+    "iconFilled": { "type": "boolean", "default": false },
+    "asChild": { "type": "boolean", "default": false, "description": "Render as child element (polymorphic). Useful for links styled as buttons." },
+    "disabled": { "type": "boolean", "default": false }
+  },
+
+  "slots": {
+    "leftIcon": {
+      "position": "start",
+      "element": "Icon",
+      "iconSizeByButtonSize": { "xs": "md", "md": "md", "lg": "md", "xl": "lg", "2xl": "lg" }
+    },
+    "rightIcon": {
+      "position": "end",
+      "element": "Icon",
+      "iconSizeByButtonSize": { "xs": "md", "md": "md", "lg": "md", "xl": "lg", "2xl": "lg" }
+    }
+  },
+
+  "defaults": { "variant": "primary", "size": "md" },
+
+  "accessibility": {
+    "role": "button",
+    "notes": "Icon-only mode (icon prop or single icon without children) requires aria-label."
+  }
+}

package/dist/specs/checkbox-card.json

@@ -0,0 +1,120 @@
+{
+  "name": "CheckboxCard",
+  "description": "Card-style checkbox with optional icon, label, and description. Supports checked, unchecked, indeterminate, disabled, and focused states.",
+
+  "base": {
+    "display": "flex",
+    "position": "relative",
+    "borderRadius": "{radius.md}",
+    "padding": "{spacing.lg}",
+    "border": { "width": "1px" },
+    "transition": "background-color, border-color"
+  },
+
+  "states": {
+    "unchecked": {
+      "bg": "{alias.bg-primary}",
+      "borderColor": "{alias.border-default}",
+      "cursor": "pointer",
+      "hover": { "bg": "{alias.highlight-hover}" }
+    },
+    "checked": {
+      "bg": "{alias.bg-primary}",
+      "borderColor": "{alias.border-brand}",
+      "cursor": "pointer"
+    },
+    "indeterminate": {
+      "bg": "{alias.bg-primary}",
+      "borderColor": "{alias.border-brand}",
+      "cursor": "pointer"
+    },
+    "disabled": {
+      "bg": "{alias.bg-inactive-subtle}",
+      "borderColor": "{alias.border-inactive-subtle}",
+      "cursor": "default"
+    },
+    "focused": {
+      "overlay": {
+        "position": "absolute",
+        "inset": "-1px",
+        "borderRadius": "{radius.md}",
+        "border": { "width": "2px", "color": "{alias.border-focused}" }
+      }
+    }
+  },
+
+  "layout": {
+    "leading": { "gap": "{spacing.md}", "alignItems": "center (no description) / start (with description)" },
+    "trailing": { "gap": "{spacing.lg}", "alignItems": "start" }
+  },
+
+  "subComponents": {
+    "CheckboxIndicator": {
+      "description": "16×16 checkbox square inside a 20×20 hit area.",
+      "outerSize": "20px",
+      "innerSize": "16px",
+      "borderRadius": "{radius.xs}",
+      "unchecked": {
+        "bg": "{alias.bg-primary}",
+        "border": { "width": "1px", "color": "{alias.border-strong}" }
+      },
+      "checked": {
+        "bg": "{alias.bg-brand}",
+        "iconColor": "{alias.icon-primary-inverse}",
+        "icon": "check (12×12 SVG)"
+      },
+      "indeterminate": {
+        "bg": "{alias.bg-brand}",
+        "iconColor": "{alias.icon-primary-inverse}",
+        "icon": "minus (12×12 SVG)"
+      },
+      "disabled": {
+        "bg": "{alias.bg-inactive-subtle}",
+        "border": { "width": "1px", "color": "{alias.border-inactive}" },
+        "iconColor": "{alias.icon-inactive-subtle}"
+      }
+    }
+  },
+
+  "slots": {
+    "icon": {
+      "element": "Icon",
+      "size": "lg",
+      "color": "{alias.icon-secondary}",
+      "disabledColor": "{alias.icon-inactive}"
+    },
+    "label": {
+      "fontWeight": 500,
+      "withDescription": { "fontSize": "14px", "lineHeight": "16px" },
+      "withoutDescription": { "fontSize": "16px", "lineHeight": "20px" },
+      "color": "{alias.text-primary}",
+      "disabledColor": "{alias.text-inactive}"
+    },
+    "description": {
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "color": "{alias.text-secondary}",
+      "disabledColor": "{alias.text-inactive}",
+      "gap": "{spacing.xs}"
+    }
+  },
+
+  "props": {
+    "label": { "type": "string", "description": "Label text displayed in the card." },
+    "description": { "type": "string", "description": "Description text below the label." },
+    "icon": { "type": "string", "description": "Material Symbol name for the card icon." },
+    "iconVariant": { "type": "enum", "values": ["outlined", "rounded", "sharp"], "default": "outlined" },
+    "iconFilled": { "type": "boolean", "default": false },
+    "checkboxPosition": { "type": "enum", "values": ["leading", "trailing"], "default": "trailing" },
+    "indeterminate": { "type": "boolean", "default": false },
+    "checked": { "type": "boolean" },
+    "disabled": { "type": "boolean", "default": false }
+  },
+
+  "defaults": { "checkboxPosition": "trailing", "indeterminate": false },
+
+  "accessibility": {
+    "role": "checkbox",
+    "notes": "Hidden native input (sr-only) inside a <label>. aria-checked set to 'mixed' when indeterminate. Focus/selection ring overlay shown when checked, indeterminate, or focused (not disabled)."
+  }
+}