@urbicon-ui/design-content 6.1.8 → 6.3.1

package/content/component-catalog.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-06-22T12:20:10.216Z",
+  "generated": "2026-06-23T14:32:43.820Z",
   "version": "0.2.38",
   "components": [
     {
@@ -51,14 +51,7 @@
         "value": "string | string[]",
         "variant": "'default' | 'separated' | 'ghost'"
       },
-      "slots": [
-        "base",
-        "item",
-        "trigger",
-        "chevron",
-        "content",
-        "contentInner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Collapsible",
@@ -170,15 +163,7 @@
         "size": "'sm' | 'md' | 'lg'",
         "variant": "'soft' | 'inline' | 'filled'"
       },
-      "slots": [
-        "base",
-        "icon",
-        "content",
-        "title",
-        "description",
-        "actions",
-        "dismissButton"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Toast",
@@ -334,12 +319,7 @@
         "status": "'away' | 'busy' | 'offline' | 'online'",
         "statusPosition": "'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'"
       },
-      "slots": [
-        "base",
-        "image",
-        "fallback",
-        "status"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Badge"
@@ -474,12 +454,7 @@
         "size": "'lg' | 'md' | 'sm' | 'xs'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "content",
-        "removeButton",
-        "removeIcon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Alert",
@@ -558,14 +533,7 @@
         "items": "BreadcrumbItem[]",
         "size": "'sm' | 'md' | 'lg'"
       },
-      "slots": [
-        "nav",
-        "list",
-        "item",
-        "link",
-        "currentPage",
-        "separator"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Tab",
@@ -684,11 +652,7 @@
         "buttonGroupConnected": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "content",
-        "spinner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "ButtonGroup",
@@ -759,9 +723,7 @@
         "value": "ButtonGroupValue",
         "variant": "ButtonVariants['variant']"
       },
-      "slots": [
-        "base"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Button",
@@ -915,12 +877,7 @@
         "dividers": "'true'",
         "padding": "'lg' | 'md' | 'none' | 'sm' | 'xl'"
       },
-      "slots": [
-        "base",
-        "header",
-        "content",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Accordion",
@@ -1037,14 +994,7 @@
         "variant": "'filled' | 'ghost' | 'outlined'",
         "size": "'lg' | 'md' | 'sm' | 'xs'"
       },
-      "slots": [
-        "wrapper",
-        "control",
-        "box",
-        "icon",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Toggle",
@@ -1098,13 +1048,7 @@
         "variant": "'card' | 'default' | 'ghost'",
         "size": "'lg' | 'md' | 'sm'"
       },
-      "slots": [
-        "base",
-        "trigger",
-        "chevron",
-        "content",
-        "contentInner"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Accordion",
@@ -1176,22 +1120,7 @@
         "size": "'lg' | 'md' | 'sm'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "label",
-        "requiredMark",
-        "inputWrapper",
-        "input",
-        "message",
-        "hint",
-        "listbox",
-        "option",
-        "optionActive",
-        "optionSelected",
-        "noResults",
-        "clear",
-        "chevron"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Select",
@@ -1241,25 +1170,7 @@
         "shortcut": "string | false",
         "size": "CommandPaletteVariants['size']"
       },
-      "slots": [
-        "wrapper",
-        "input",
-        "inputIcon",
-        "clearButton",
-        "list",
-        "group",
-        "groupLabel",
-        "item",
-        "itemHighlighted",
-        "itemDefault",
-        "itemDisabled",
-        "itemIcon",
-        "itemLabel",
-        "itemShortcut",
-        "empty",
-        "footer",
-        "kbd"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Dialog"
@@ -1329,23 +1240,7 @@
         "legendPlacement": "'bottom' | 'left' | 'none' | 'right' | 'top'",
         "orientation": "'horizontal' | 'vertical'"
       },
-      "slots": [
-        "wrapper",
-        "barWrapper",
-        "bar",
-        "segment",
-        "segmentRest",
-        "tooltip",
-        "tooltipLabel",
-        "tooltipDetail",
-        "legend",
-        "legendItem",
-        "legendDot",
-        "legendLabel",
-        "legendValue",
-        "total",
-        "totalLabel"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -1525,16 +1420,7 @@
         "size": "DialogVariants['size']",
         "transitionEasing": "(t: number) => number"
       },
-      "slots": [
-        "dialog",
-        "backdrop",
-        "panel",
-        "content",
-        "header",
-        "title",
-        "body",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Drawer"
@@ -1637,15 +1523,7 @@
         "size": "DrawerVariants['size']",
         "transitionEasing": "(t: number) => number"
       },
-      "slots": [
-        "dialog",
-        "backdrop",
-        "panel",
-        "header",
-        "title",
-        "body",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Dialog",
@@ -1860,24 +1738,7 @@
       "keyPropTypes": {
         "placement": "Placement"
       },
-      "slots": [
-        "container",
-        "scrim",
-        "bubble",
-        "arrow",
-        "title",
-        "body",
-        "progress",
-        "dots",
-        "dot",
-        "dotActive",
-        "stepText",
-        "footer",
-        "spacer",
-        "skip",
-        "prev",
-        "next"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -1907,9 +1768,7 @@
         "unstyled"
       ],
       "keyPropTypes": {},
-      "slots": [
-        "article"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuidePanel",
@@ -1953,11 +1812,7 @@
         "size": "GuideBeaconVariants['size']",
         "tour": "GuideTour"
       },
-      "slots": [
-        "beacon",
-        "ping",
-        "dot"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Guide",
@@ -1993,13 +1848,7 @@
         "placement": "Placement",
         "trigger": "'mount' | 'manual'"
       },
-      "slots": [
-        "hint",
-        "title",
-        "body",
-        "dismiss",
-        "arrow"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -2043,10 +1892,7 @@
         "direction": "GuideDirection",
         "size": "GuideMarkerVariants['size']"
       },
-      "slots": [
-        "marker",
-        "icon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuidePanel",
@@ -2079,9 +1925,7 @@
       "keyPropTypes": {
         "direction": "GuideDirection"
       },
-      "slots": [
-        "mention"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideArticle",
@@ -2134,17 +1978,7 @@
         "placement": "GuidePanelVariants['placement']",
         "size": "GuidePanelVariants['size']"
       },
-      "slots": [
-        "panel",
-        "header",
-        "backButton",
-        "title",
-        "closeButton",
-        "body",
-        "list",
-        "listItem",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "GuideProvider",
@@ -2308,14 +2142,7 @@
         "messageType": "'error' | 'helper'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "container",
-        "base",
-        "label",
-        "message",
-        "iconContainer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Textarea",
@@ -2730,12 +2557,7 @@
         "variant": "'outlined' | 'filled' | 'ghost'",
         "layout": "'default' | 'minimal' | 'navigation' | 'table'"
       },
-      "slots": [
-        "base",
-        "info",
-        "controls",
-        "ellipsis"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Table"
@@ -2970,18 +2792,7 @@
         "size": "'lg' | 'md' | 'sm' | 'xs'",
         "indeterminate": "'true'"
       },
-      "slots": [
-        "wrapper",
-        "header",
-        "label",
-        "valueText",
-        "track",
-        "fill",
-        "circularWrapper",
-        "circularTrack",
-        "circularFill",
-        "circularLabel"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Spinner",
@@ -3088,12 +2899,7 @@
         "tier": "InteractiveTier",
         "variant": "RadioItemVariants['variant']"
       },
-      "slots": [
-        "root",
-        "group",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Checkbox",
@@ -3220,18 +3026,7 @@
         "onNodeClick": "(node: SankeyLaidOutNodeWithMeta) => void",
         "tooltip": "Snippet<[datum: SankeyLaidOutNodeWithMeta | SankeyLaidOutLinkWithMeta, kind: 'node' | 'link']>"
       },
-      "slots": [
-        "wrapper",
-        "svg",
-        "node",
-        "nodeRect",
-        "nodeLabel",
-        "nodeValue",
-        "link",
-        "tooltip",
-        "tooltipLabel",
-        "tooltipDetail"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3304,11 +3099,7 @@
         "fullWidth": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "base",
-        "indicator",
-        "item"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "ButtonGroup",
@@ -3427,23 +3218,7 @@
         "selected": "'true'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "base",
-        "trigger",
-        "triggerText",
-        "placeholder",
-        "chevron",
-        "clear",
-        "listbox",
-        "option",
-        "optionCheck",
-        "optionCheckbox",
-        "group",
-        "groupLabel",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3583,13 +3358,7 @@
         "onOpenChange": "(open: boolean) => void",
         "side": "SidebarVariants['side']"
       },
-      "slots": [
-        "backdrop",
-        "panel",
-        "header",
-        "content",
-        "footer"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "SidebarLayout",
@@ -3711,10 +3480,7 @@
         "size": "SkeletonVariants['size']",
         "variant": "SkeletonVariants['variant']"
       },
-      "slots": [
-        "base",
-        "wrapper"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Spinner",
@@ -3802,21 +3568,7 @@
         "appearance": "'default' | 'rail'",
         "messageType": "'error' | 'helper'"
       },
-      "slots": [
-        "wrapper",
-        "header",
-        "label",
-        "valueText",
-        "base",
-        "track",
-        "range",
-        "thumb",
-        "mark",
-        "boundaryTick",
-        "rangeStatus",
-        "rangeStatusIcon",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -3925,23 +3677,7 @@
         "speed": "SpinnerVariants['speed']",
         "variant": "SpinnerVariants['variant']"
       },
-      "slots": [
-        "base",
-        "svg",
-        "svgCircle",
-        "svgPath",
-        "dots",
-        "dot",
-        "pulse",
-        "pulseCenter",
-        "pulseRing",
-        "ring",
-        "ringElement",
-        "bars",
-        "bar",
-        "content",
-        "srOnly"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Progress",
@@ -4013,18 +3749,7 @@
         "tier": "InteractiveTier",
         "variant": "'default' | 'outlined' | 'minimal'"
       },
-      "slots": [
-        "base",
-        "stepItem",
-        "step",
-        "indicatorColumn",
-        "indicator",
-        "labelGroup",
-        "label",
-        "description",
-        "separator",
-        "content"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Tab"
@@ -4102,13 +3827,7 @@
         "variant": "'enclosed' | 'line' | 'pills' | 'solid'",
         "size": "'lg' | 'md' | 'sm'"
       },
-      "slots": [
-        "base",
-        "list",
-        "trigger",
-        "panel",
-        "indicator"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Stepper\n\nTab props are a discriminated union on `orientation`. `fullWidth` is\nonly available on horizontal tabs — combining it with `orientation=\"vertical\"`\nfails type-check, since vertical triggers are already full-width by design."
@@ -4257,14 +3976,7 @@
         "messageType": "'error' | 'helper'",
         "tier": "'commit' | 'modify'"
       },
-      "slots": [
-        "wrapper",
-        "base",
-        "label",
-        "footer",
-        "message",
-        "counter"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": []
     },
@@ -4273,7 +3985,7 @@
       "slug": "theme-switcher",
       "package": "@urbicon-ui/blocks",
       "group": "components",
-      "description": "Cycles between light, dark, and system color schemes.\nApplies light/dark classes on the html element and persists to localStorage.",
+      "description": "Cycles between light, dark, and system color schemes. Sets a\n`light`/`dark` class on the `<html>` element for explicit choices and clears\nit in system mode (so the CSS `light-dark()` function follows the OS natively).\nPersists the choice to localStorage.",
       "tags": [
         "action"
       ],
@@ -4324,10 +4036,7 @@
         "theme": "Theme",
         "variant": "ThemeSwitcherVariants['variant']"
       },
-      "slots": [
-        "button",
-        "icon"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "LocaleSwitcher"
@@ -4383,16 +4092,7 @@
         "placement": "ToastPlacement",
         "intent": "'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning'"
       },
-      "slots": [
-        "container",
-        "toast",
-        "icon",
-        "content",
-        "title",
-        "description",
-        "dismissButton",
-        "progress"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Alert"
@@ -4481,14 +4181,7 @@
         "intent": "'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'",
         "size": "'lg' | 'md' | 'sm' | 'xs'"
       },
-      "slots": [
-        "wrapper",
-        "control",
-        "track",
-        "thumb",
-        "label",
-        "message"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Checkbox"
@@ -4564,9 +4257,7 @@
         "orientation": "'horizontal' | 'vertical'",
         "padding": "'lg' | 'md' | 'sm' | 'xl' | 'xs'"
       },
-      "slots": [
-        "base"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Button",
@@ -4633,10 +4324,7 @@
         "size": "'lg' | 'md' | 'sm'",
         "visible": "'false' | 'true'"
       },
-      "slots": [
-        "base",
-        "arrow"
-      ],
+      "slots": [],
       "hasExamples": true,
       "relatedComponents": [
         "Popover"

package/content/design-system/principles.md

@@ -110,6 +110,7 @@ When asked to modify the design, identify the correct layer:
 **"Make buttons / cards / inputs look different"** → Layer 3 (Component)
 - Use `BlocksProvider` `defaults` for global component overrides
 - Use `presets` for named looks (e.g., `preset="compact"`)
+- Use `overrides` for prop-conditional rules — style only one variant/intent/state (e.g. only `variant="outlined"`), what an unconditional `slotClasses` cannot express
 - Use `slotClasses` on individual instances for one-off overrides
 - Use `unstyled` to strip all defaults and bring your own styling
 
@@ -254,7 +255,7 @@ Translucent, layered, modern. Blurred backgrounds, glass surfaces.
 
 - Never use raw Tailwind color classes (`bg-blue-500`). Always use semantic tokens (`bg-primary`, `bg-surface-base`).
 - Never add `dark:` overrides. Dark mode resolves automatically via `light-dark()`.
-- Never override individual component CSS. Use `slotClasses`, `presets`, or `BlocksProvider` `defaults`.
+- Never override individual component CSS. Use `slotClasses`, `presets`, prop-conditional `overrides`, or `BlocksProvider` `defaults`.
 - Never hardcode z-index values. Use token variables (`z-[var(--z-modal)]`).
 - Never set `border-radius` on individual components. Override the semantic radius tier token.
 - Never mix paradigms within a single app. Pick one and apply it consistently across all layers.