@urbicon-ui/blocks 6.30.1 → 6.32.0

package/dist/primitives/Toggle/toggle.variants.js

@@ -26,7 +26,7 @@ export const toggleVariants = tv({
         // toggle is a status declaration, identity-shaped. Opt-in `modify`
         // renders a soft-rectangle switch for compact inline-toolbar contexts
         // (usually inherited from a wrapping `<Toolbar tier="modify">` via
-        // TierContext). The `dot` appearance overrides geometry in compounds
+        // TierContext). The `dot` variant overrides geometry in compounds
         // below, so tier is functionally a no-op there — both still type-check.
         tier: {
             commit: { track: 'rounded-commit', thumb: 'rounded-commit' },
@@ -62,14 +62,14 @@ export const toggleVariants = tv({
             danger: {},
             neutral: {}
         },
-        // Appearance contract (see docs/ARCHITECTURE.md §Tier System
+        // Variant contract (see docs/ARCHITECTURE.md §Tier System
         // for the commit/modify radius semantics).
         //   default → classic switch pill (track + animated thumb).
         //   dot     → small indicator dot left of the label. Off = outline only,
         //             on = fill-intent. Monochrome, no pill background. Ideal
         //             for inline settings, dense toolbars, knob-strips —
         //             or anywhere the switch is visually too dominant.
-        appearance: {
+        variant: {
             default: {},
             // Concrete styles for `dot` live in compoundVariants below, so that
             // the override-bucket (w/h/rounded) can strip the corresponding
@@ -97,11 +97,11 @@ export const toggleVariants = tv({
         }
     },
     compoundVariants: [
-        // ── Default-appearance compounds (classic Switch-Pill) ──
-        // All filter on `appearance: 'default'` so the new `dot` mode picks
+        // ── Default-variant compounds (classic Switch-Pill) ──
+        // All filter on `variant: 'default'` so the new `dot` mode picks
         // up only its own monochrome compounds (defined further below).
         {
-            appearance: 'default',
+            variant: 'default',
             checked: false,
             class: {
                 track: 'bg-surface-interactive',
@@ -110,50 +110,50 @@ export const toggleVariants = tv({
         },
         // ── withBorder: visible boundary in both states ──
         {
-            appearance: 'default',
+            variant: 'default',
             checked: false,
             withBorder: true,
             class: { track: 'border-border-strong' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             withBorder: true,
             class: { track: 'ring-1 ring-inset ring-surface-base/40' }
         },
         // ── Checked track per intent (Switch-Pill only) ──
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'primary',
             class: { track: 'bg-primary border-primary' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'secondary',
             class: { track: 'bg-secondary border-secondary' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'success',
             class: { track: 'bg-success border-success' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'warning',
             class: { track: 'bg-warning border-warning' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'danger',
             class: { track: 'bg-danger border-danger' }
         },
         {
-            appearance: 'default',
+            variant: 'default',
             checked: true,
             intent: 'neutral',
             class: { track: 'bg-neutral border-neutral' }
@@ -162,28 +162,28 @@ export const toggleVariants = tv({
         // Mirrors Checkbox ("error overrides unchecked border"): the off state
         // carries the danger mark, the on state keeps its intent colour — an
         // error on a boolean control usually means "must be switched on".
-        // The dot-appearance twin lives at the END of the compound list so it
+        // The dot-variant twin lives at the END of the compound list so it
         // folds over the dot-unchecked `border-border-default` (order is
         // semantic — later compounds win conflicting buckets).
         {
-            appearance: 'default',
+            variant: 'default',
             error: true,
             checked: false,
             class: { track: 'border-danger peer-focus-visible:ring-danger/40' }
         },
         // ── Thumb translation per size when checked (Switch-Pill only) ──
-        { appearance: 'default', checked: true, size: 'xs', class: { thumb: 'translate-x-4' } },
-        { appearance: 'default', checked: true, size: 'sm', class: { thumb: 'translate-x-5' } },
-        { appearance: 'default', checked: true, size: 'md', class: { thumb: 'translate-x-6' } },
-        { appearance: 'default', checked: true, size: 'lg', class: { thumb: 'translate-x-7' } },
-        // ── Dot appearance: monochrome circular indicator ──
+        { variant: 'default', checked: true, size: 'xs', class: { thumb: 'translate-x-4' } },
+        { variant: 'default', checked: true, size: 'sm', class: { thumb: 'translate-x-5' } },
+        { variant: 'default', checked: true, size: 'md', class: { thumb: 'translate-x-6' } },
+        { variant: 'default', checked: true, size: 'lg', class: { thumb: 'translate-x-7' } },
+        // ── Dot variant: monochrome circular indicator ──
         // The base track is overridden to a tiny outline-only circle. The thumb
         // is hidden. Off = border-only (no bg-class so CSS default `transparent`
         // applies), on = fill-intent. compoundVariants run after the size-variant
         // stage, so `w-3.5/h-3.5/rounded-full` strip the size-based
         // `w-12/h-6/rounded-commit` from the resolved class set.
         {
-            appearance: 'dot',
+            variant: 'dot',
             class: {
                 track: 'w-3.5 h-3.5 rounded-full border shadow-none',
                 thumb: 'hidden',
@@ -191,49 +191,49 @@ export const toggleVariants = tv({
             }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: false,
             class: { track: 'border-border-default' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'primary',
             class: { track: 'border-primary bg-primary' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'secondary',
             class: { track: 'border-secondary bg-secondary' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'success',
             class: { track: 'border-success bg-success' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'warning',
             class: { track: 'border-warning bg-warning' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'danger',
             class: { track: 'border-danger bg-danger' }
         },
         {
-            appearance: 'dot',
+            variant: 'dot',
             checked: true,
             intent: 'neutral',
             class: { track: 'border-neutral bg-neutral' }
         },
-        // ── Error state, dot appearance (must fold over dot-unchecked border) ──
+        // ── Error state, dot variant (must fold over dot-unchecked border) ──
         {
-            appearance: 'dot',
+            variant: 'dot',
             error: true,
             checked: false,
             class: { track: 'border-danger' }
@@ -243,7 +243,7 @@ export const toggleVariants = tv({
         tier: 'commit',
         size: 'md',
         intent: 'primary',
-        appearance: 'default',
+        variant: 'default',
         checked: false,
         disabled: false,
         error: false,

package/docs/MIGRATION-v5.md

@@ -39,19 +39,21 @@ card-with-header look.
 | Component   | Before                | After                  |
 | ----------- | --------------------- | ---------------------- |
 | `Alert`     | `variant="outlined"`  | `variant="inline"`     |
-| `Accordion` | `variant="bordered"`  | `variant="separated"`  |
+| `Accordion` | `variant="bordered"`  | `variant="card"`       |
 
 `Alert.inline` is a memo-style with a left accent border (`border-l-2`),
-no surrounding box. `Accordion.separated` renders items as a stacked
-card list with `surface-quiet` tint and `space-y-2`.
+no surrounding box. `Accordion.card` renders items as a stacked
+card list with `surface-quiet` tint and `space-y-2`. (The value was named
+`separated` from v5.0 to v6.30; it now shares the `card` vocabulary with
+its disclosure sibling `Collapsible`.)
 
 ```svelte
 <!-- v4 -->
 <Alert variant="outlined" intent="warning">…</Alert>
 <Accordion variant="bordered">…</Accordion>
-<!-- v5 -->
+<!-- current -->
 <Alert variant="inline" intent="warning">…</Alert>
-<Accordion variant="separated">…</Accordion>
+<Accordion variant="card">…</Accordion>
 ```
 
 ## 3. Table chrome

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.30.1",
+  "version": "6.32.0",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -31,7 +31,8 @@
     "format": "biome format --write . && prettier --write \"**/*.svelte\"",
     "lint": "biome check . && svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "size": "bun scripts/bundle-size.ts"
   },
   "files": [
     "LICENSE",
@@ -94,8 +95,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.30.1",
-    "@urbicon-ui/shared-types": "6.30.1",
+    "@urbicon-ui/i18n": "6.32.0",
+    "@urbicon-ui/shared-types": "6.32.0",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",