@krizaka/ui 3.30.0 → 3.31.0

package/registry/examples/sticky-action/phone.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function StickyActionPhone() {
   return /* @__PURE__ */ jsxs("main", { className: "flex h-[28rem] flex-col overflow-auto", children: [
     /* @__PURE__ */ jsx("p", { className: "m-0 h-[40rem] p-4 text-fg-secondary", children: "The page scrolls here\u2026" }),
-    /* @__PURE__ */ jsx(StickyAction, { children: /* @__PURE__ */ jsx(Button, { size: "lg", shape: "cut", variant: "primary", children: "Book" }) })
+    /* @__PURE__ */ jsx(StickyAction, { children: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", children: "Book" }) })
   ] });
 }
 export {

package/registry/examples/sticky-action/phone.tsx

@@ -7,7 +7,7 @@ export default function StickyActionPhone() {
     <main className="flex h-[28rem] flex-col overflow-auto">
       <p className="m-0 h-[40rem] p-4 text-fg-secondary">The page scrolls here…</p>
       <StickyAction>
-        <Button size="lg" shape="cut" variant="primary">Book</Button>
+        <Button size="lg" variant="primary">Book</Button>
       </StickyAction>
     </main>
   );

package/registry/force-update-screen.json

@@ -231,7 +231,7 @@
   "files": [
     {
       "path": "force-update-screen/force-update-screen.tsx",
-      "content": "// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"
+      "content": "// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"
     },
     {
       "path": "force-update-screen/index.ts",

package/registry/form.json

@@ -741,7 +741,7 @@
             "name": "magnetic",
             "type": "boolean",
             "default": null,
-            "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
             "required": false
           },
           {
@@ -755,14 +755,14 @@
             "name": "shape",
             "type": "\"rounded\" | \"pill\" | \"cut\"",
             "default": "rounded",
-            "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+            "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
             "required": false
           },
           {
             "name": "shimmer",
             "type": "boolean",
             "default": null,
-            "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
             "required": false
           },
           {
@@ -2785,7 +2785,7 @@
           "name": "magnetic",
           "type": "boolean",
           "default": null,
-          "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
           "required": false
         },
         {
@@ -2799,14 +2799,14 @@
           "name": "shape",
           "type": "\"rounded\" | \"pill\" | \"cut\"",
           "default": "rounded",
-          "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+          "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
           "required": false
         },
         {
           "name": "shimmer",
           "type": "boolean",
           "default": null,
-          "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
           "required": false
         },
         {

package/registry/glow-card.json

@@ -2,8 +2,8 @@
   "name": "glow-card",
   "type": "primitive",
   "title": "Glow card",
-  "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
-  "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "summary": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
+  "description": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
   "status": "beta",
   "deprecated": null,
   "category": "layout",
@@ -32,24 +32,24 @@
       "use": "card"
     },
     {
-      "when": "Around content the reader studies (a form, a table): light that moves distracts."
+      "when": "Around content the reader studies (a form, a table): a coloured ring competes with it."
     }
   ],
   "bestPractices": [
     "One grid of glowing cards per page; `alive` on one card at most.",
-    "Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.",
+    "Make the whole card the link with `asChild` when it leads somewhere — the focus brightens its ring like the pointer.",
     "Colours come from the brand (`.brand-<id>`): never pass one."
   ],
   "accessibility": {
     "keyboard": [
       {
         "keys": "Tab",
-        "action": "Focusing the card (or a control inside it) lights its ring, as the pointer does."
+        "action": "Focusing the card (or a control inside it) brightens its ring, as the pointer does."
       }
     ],
     "notes": [
-      "Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.",
-      "Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.",
+      "A decorative ring only (a pseudo-element): nothing is added to the accessibility tree; the card's semantics are yours.",
+      "Nothing moves or turns, with or without `prefers-reduced-motion`; only the ring's opacity changes, in 150 ms.",
       "Its loops pause off screen and while the page settles (MotionObserver)."
     ]
   },
@@ -63,13 +63,13 @@
     "props": [
       {
         "component": "GlowCard",
-        "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+        "description": "A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours.",
         "props": [
           {
             "name": "alive",
             "type": "boolean",
             "default": "false",
-            "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+            "description": "A featured card: the ring is fuller at rest. It never turns.",
             "required": false
           },
           {
@@ -83,7 +83,7 @@
             "name": "glow",
             "type": "\"both\" | \"border\" | \"spotlight\"",
             "default": "both",
-            "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+            "description": "`border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\ndeprecated since 3.31 (krizaka-ui#393) and draws nothing.",
             "required": false
           }
         ]
@@ -93,7 +93,7 @@
       {
         "name": "plans",
         "title": "Plans",
-        "description": "Three plans: the light follows the pointer across them; the featured one's ring turns at rest.",
+        "description": "Three plans: each ring brightens under the pointer; the featured one's ring is fuller at rest.",
         "path": "examples/glow-card/plans.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/plans",
         "code": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\", action: \"Start free\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", action: \"Choose Team\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\", action: \"Talk to us\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\n// The columns follow the box they are in (a container query), not the screen: three side by side only when each has room\n// for its price and its button; the buttons span their card and stand on one line at the bottom.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"@container w-full max-w-3xl\">\n      <div className=\"grid gap-3 @lg:grid-cols-3\">\n        {plans.map((p) => (\n          <GlowCard key={p.name} alive={p.featured} className=\"flex min-w-0 flex-col gap-2 p-5\">\n            <h3 className=\"font-display text-base font-semibold text-fg\">{p.name}</h3>\n            <p className=\"font-display text-3xl font-bold tracking-tight text-fg\">{p.price}</p>\n            <p className=\"mb-3 text-sm text-fg-secondary\">{p.line}</p>\n            <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto w-full\">\n              {p.action}\n            </Button>\n          </GlowCard>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
@@ -101,7 +101,7 @@
       {
         "name": "link-card",
         "title": "A card that is a link",
-        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus lights the ring.",
+        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus brightens the ring.",
         "path": "examples/glow-card/link-card.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/link-card",
         "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `asChild`: the card is the link. The focus lights the ring as the pointer does — keyboard readers get the same answer.\nexport default function GlowCardLink() {\n  return (\n    <GlowCard asChild glow=\"border\" className=\"block max-w-sm no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n      <a href=\"#docs\">\n        <span className=\"block font-display text-lg font-semibold text-fg\">Read the documentation</span>\n        <span className=\"mt-1 block text-sm text-fg-secondary\">Every component, its examples and its props — generated from the code.</span>\n      </a>\n    </GlowCard>\n  );\n}\n"
@@ -109,10 +109,10 @@
       {
         "name": "spotlight",
         "title": "Spotlight only",
-        "description": "`glow=\"spotlight\"`: the bloom alone, for a dense grid.",
+        "description": "`glow=\"spotlight\"` is deprecated (krizaka-ui#393): the bloom is retired, the card draws no ring.",
         "path": "examples/glow-card/spotlight.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/spotlight",
-        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"`: only the bloom under the pointer, for a dense grid where rings would be too much.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"` is deprecated (krizaka-ui#393): the bloom under the pointer is retired, so these cards draw no ring.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
       }
     ]
   },
@@ -120,7 +120,7 @@
   "files": [
     {
       "path": "glow-card/glow-card.tsx",
-      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"
+      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\n   * deprecated since 3.31 (krizaka-ui#393) and draws nothing.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * A featured card: the ring is fuller at rest. It never turns.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      {...props}\n    />\n  );\n}\n"
     },
     {
       "path": "glow-card/index.ts",
@@ -128,7 +128,7 @@
     },
     {
       "path": "glow-card/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): light that moves distracts.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) lights its ring, as the pointer does.\" }],\n    notes: [\n      \"Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: the light follows the pointer across them; the featured one's ring turns at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus lights the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"`: the bloom alone, for a dense grid.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): a coloured ring competes with it.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus brightens its ring like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) brightens its ring, as the pointer does.\" }],\n    notes: [\n      \"A decorative ring only (a pseudo-element): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Nothing moves or turns, with or without `prefers-reduced-motion`; only the ring's opacity changes, in 150 ms.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: each ring brightens under the pointer; the featured one's ring is fuller at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus brightens the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"` is deprecated (krizaka-ui#393): the bloom is retired, the card draws no ring.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -148,13 +148,13 @@
   "props": [
     {
       "component": "GlowCard",
-      "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+      "description": "A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours.",
       "props": [
         {
           "name": "alive",
           "type": "boolean",
           "default": "false",
-          "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+          "description": "A featured card: the ring is fuller at rest. It never turns.",
           "required": false
         },
         {
@@ -168,7 +168,7 @@
           "name": "glow",
           "type": "\"both\" | \"border\" | \"spotlight\"",
           "default": "both",
-          "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+          "description": "`border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\ndeprecated since 3.31 (krizaka-ui#393) and draws nothing.",
           "required": false
         }
       ]

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.30.0",
+  "version": "3.31.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -719,7 +719,7 @@
         }
       },
       "examples": {
-        "web": 5,
+        "web": 4,
         "native": 0
       },
       "dependencies": [],
@@ -860,8 +860,8 @@
       "name": "button",
       "type": "primitive",
       "title": "Button",
-      "summary": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
-      "description": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+      "summary": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+      "description": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
       "status": "stable",
       "category": "actions",
       "platforms": "both",
@@ -959,8 +959,8 @@
       "name": "card-grid",
       "type": "primitive",
       "title": "Card grid",
-      "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
-      "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
+      "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
+      "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
       "status": "beta",
       "category": "blocks",
       "platforms": "web",
@@ -985,8 +985,7 @@
       "dependencies": [],
       "registryDependencies": [
         "cn",
-        "link-card",
-        "pointer-light"
+        "link-card"
       ]
     },
     {
@@ -2429,8 +2428,8 @@
       "name": "glow-card",
       "type": "primitive",
       "title": "Glow card",
-      "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
-      "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+      "summary": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
+      "description": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
       "status": "beta",
       "category": "layout",
       "platforms": "web",
@@ -2839,8 +2838,8 @@
       "name": "link-card",
       "type": "primitive",
       "title": "Link card",
-      "summary": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.",
-      "description": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.",
+      "summary": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.",
+      "description": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.",
       "status": "beta",
       "category": "blocks",
       "platforms": "web",
@@ -2859,7 +2858,7 @@
         }
       },
       "examples": {
-        "web": 5,
+        "web": 4,
         "native": 0
       },
       "dependencies": [],
@@ -3014,11 +3013,11 @@
         }
       },
       "examples": {
-        "web": 4,
+        "web": 5,
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.30.0",
+        "@krizaka/tokens@^3.31.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -3457,7 +3456,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.30.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -3778,9 +3777,9 @@
       "name": "pointer-light",
       "type": "primitive",
       "title": "Pointer light",
-      "summary": "The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.",
-      "description": "The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.",
-      "status": "beta",
+      "summary": "Deprecated (krizaka-ui#393): it drew a light that followed the pointer over cards. It now does nothing — the cards have one quiet hover of their own.",
+      "description": "Deprecated (krizaka-ui#393): it drew a light that followed the pointer over cards. It now does nothing — the cards have one quiet hover of their own.",
+      "status": "deprecated",
       "category": "blocks",
       "platforms": "web",
       "parity": {
@@ -4089,7 +4088,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.30.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4432,7 +4431,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.30.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],