phlex_kit 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dabd58e18372455c16ef319dc2f6270469ea2bbacfa42f2418f1e82f127d57cb
-  data.tar.gz: 04b6f68484015c542bfb65d24322c9342ec029d4d3d322f80dca0f571bbdcba0
+  metadata.gz: 71cbb9b8727b67b80fe0bcbd69fb4eb3dd298529cd3ec43248c770df56c1554b
+  data.tar.gz: fa3abdc391af56d26491645a262a8d56657bf2ae21996370e82a7e0cc4704776
 SHA512:
-  metadata.gz: d7ffa228298fa3583da83586982aa28404e1c87979b5c839123c6f493da0e6ce8502b9df6a40b58ba73cd11276a06c3e2c96a081bd82057b903dfd5f9d4dddab
-  data.tar.gz: fee2a8edf8f4ad0da4ab8ee42da82316ee0a6674f689f9f1c6025b7efd097c4a557e788dbe725683c5ecdbe49635735cab086a798c39d104550bc17dbb017b70
+  metadata.gz: 064253644752dac989e4585356a8896ce35a4ca8ec79eee58c603c6b807e3203ae5c64bd3ccc6d2e9340007af49a85488e9f4acf3147d1f7fd76680afd54103e
+  data.tar.gz: 6687d41814334c237479b7bdfbaa6e47f61c06a6c00505efeb218b62a7f2e1926b2b7441bd95b5d5216fe56491a2b03db82ff9c8cf613b9954954ca89d269c6b

data/app/assets/stylesheets/phlex_kit/_tokens.css

@@ -63,6 +63,22 @@
   mask-image: linear-gradient(to bottom, transparent 0, black var(--pk-scroll-fade-size));
 }
 .pk-scroll-fade[data-at-start][data-at-end] { mask-image: none; }
+/* Horizontal mode (pair with the controller's axis value "x"). */
+.pk-scroll-fade.horizontal {
+  overflow-y: visible;
+  overflow-x: auto;
+  mask-image: linear-gradient(to right,
+    transparent 0, black var(--pk-scroll-fade-size),
+    black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
+}
+.pk-scroll-fade.horizontal[data-at-start] {
+  mask-image: linear-gradient(to right,
+    black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
+}
+.pk-scroll-fade.horizontal[data-at-end] {
+  mask-image: linear-gradient(to right, transparent 0, black var(--pk-scroll-fade-size));
+}
+.pk-scroll-fade.horizontal[data-at-start][data-at-end] { mask-image: none; }
 
 /* Kit elements size predictably: width includes padding + border, so
    `width: 100%` controls (inputs, triggers, option rows) never overflow their

data/app/assets/stylesheets/phlex_kit/phlex_kit.css

@@ -40,6 +40,7 @@
 @import url("drawer/drawer.css");
 @import url("dropdown_menu/dropdown_menu.css");
 @import url("empty/empty.css");
+@import url("field/field.css");
 @import url("form/form.css");
 @import url("form_field/form_field.css");
 @import url("hover_card/hover_card.css");

data/app/components/phlex_kit/alert/alert.css

@@ -1,32 +1,70 @@
-/* Co-located with alert.rb — UI::Alert (+ Title / Description). ruby_ui's
-   structure kept; Tailwind replaced with vanilla CSS on the palette tokens.
-   Geometry from ruby_ui (ring-1 ring-inset → border, rounded-lg, px-4 py-4,
-   text-sm). The variant tints reuse the flash colours (success/destructive/
-   warning) the admin already used. Theme tokens come from the global stylesheet. */
+/* Co-located with alert.rb — PhlexKit::Alert (+ Title / Description / Action).
+   Matched to shadcn/ui's current alert (nova): a grid callout on the card
+   surface. A leading `> svg` child switches on the two-column icon layout
+   (icon spans both rows); an AlertAction pins to the top-right corner and
+   reserves right padding on the box. Variants tint the TEXT only — the
+   background stays the card surface (shadcn dropped the tinted-fill look).
+   success/warning are kit extras (ruby_ui heritage) in the same grammar. */
 .pk-alert {
-  position: relative;
+  display: grid;
+  gap: .125rem;
   width: 100%;
   border: 1px solid var(--pk-border);
   border-radius: var(--pk-radius);
-  padding: .85rem 1rem;
+  padding: .5rem .625rem;
   font-size: .875rem;
-  background: color-mix(in oklab, var(--pk-surface) 60%, transparent);
+  line-height: 1.25rem;
+  text-align: left;
+  background: var(--pk-surface);
   color: var(--pk-text);
 }
-.pk-alert.success {
-  border-color: color-mix(in oklab, var(--pk-green) 40%, var(--pk-border));
-  background: color-mix(in oklab, var(--pk-green) 8%, transparent);
-  color: var(--pk-green);
+.pk-alert:has(> .pk-alert-action) {
+  position: relative;
+  padding-right: 4.5rem;
+}
+.pk-alert:has(> svg) {
+  grid-template-columns: auto 1fr;
+  column-gap: .5rem;
+}
+.pk-alert > svg {
+  grid-row: span 2;
+  translate: 0 .125rem;
+  width: 1rem;
+  height: 1rem;
+  color: currentColor;
+}
+.pk-alert.destructive { color: var(--pk-red); }
+.pk-alert.destructive .pk-alert-description {
+  color: color-mix(in oklab, var(--pk-red) 90%, transparent);
+}
+.pk-alert.success { color: var(--pk-green); }
+.pk-alert.success .pk-alert-description {
+  color: color-mix(in oklab, var(--pk-green) 90%, transparent);
+}
+.pk-alert.warning { color: var(--pk-amber); }
+.pk-alert.warning .pk-alert-description {
+  color: color-mix(in oklab, var(--pk-amber) 90%, transparent);
+}
+.pk-alert-title { font-weight: 500; }
+.pk-alert:has(> svg) .pk-alert-title { grid-column-start: 2; }
+.pk-alert-description {
+  color: var(--pk-muted);
+  font-size: .875rem;
+  text-wrap: balance;
+}
+@media (min-width: 768px) {
+  .pk-alert-description { text-wrap: pretty; }
 }
-.pk-alert.destructive {
-  border-color: color-mix(in oklab, var(--pk-red) 40%, var(--pk-border));
-  background: color-mix(in oklab, var(--pk-red) 8%, transparent);
-  color: var(--pk-red);
+.pk-alert-description p:not(:last-child) { margin-bottom: 1rem; }
+.pk-alert-title a,
+.pk-alert-description a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
-.pk-alert.warning {
-  border-color: color-mix(in oklab, var(--pk-amber) 40%, var(--pk-border));
-  background: color-mix(in oklab, var(--pk-amber) 8%, transparent);
-  color: var(--pk-amber);
+.pk-alert-title a:hover,
+.pk-alert-description a:hover { color: var(--pk-text); }
+.pk-alert-action {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
 }
-.pk-alert-title { margin: 0 0 .25rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
-.pk-alert-description { font-size: .875rem; }

data/app/components/phlex_kit/alert/alert.rb

@@ -1,15 +1,19 @@
 module PhlexKit
-  # Callout box, ported from ruby_ui's RubyUI::Alert. Presentational, no JS. A
-  # `variant:` selector (same shape as PhlexKit::Button) tints the box; compose with
-  # AlertTitle + AlertDescription:
+  # Callout box, ported from ruby_ui's RubyUI::Alert and matched to shadcn/ui's
+  # current alert. Presentational, no JS. A `variant:` selector (same shape as
+  # PhlexKit::Button) tints the text; a leading svg child becomes the icon column
+  # (CSS :has switches the grid); compose with AlertTitle + AlertDescription
+  # (+ optional AlertAction pinned top-right):
   #
-  #   render PhlexKit::Alert.new(variant: :success) do
+  #   render PhlexKit::Alert.new do
+  #     svg(...) { ... }  # optional icon
   #     render PhlexKit::AlertTitle.new { "Saved" }
   #     render PhlexKit::AlertDescription.new { "Your changes are live." }
+  #     render PhlexKit::AlertAction.new { render PhlexKit::Button.new(size: :sm) { "Undo" } }
   #   end
   #
-  # ruby_ui's variants (nil / warning / success / destructive) map onto the
-  # palette tokens in vanilla CSS (alert.css). `VARIANTS.fetch` fails loud.
+  # shadcn ships default/destructive; success/warning are kit extras kept from
+  # ruby_ui, restyled to the same text-tint grammar. `VARIANTS.fetch` fails loud.
   class Alert < BaseComponent
     # variant => extra class appended after the base `ui-alert` (nil = neutral).
     VARIANTS = {
@@ -25,7 +29,7 @@ module PhlexKit
     end
 
     def view_template(&block)
-      div(**mix({ class: classes }, @attrs), &block)
+      div(**mix({ class: classes, role: "alert" }, @attrs), &block)
     end
 
     private

data/app/components/phlex_kit/alert/alert_action.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Top-right action slot of a PhlexKit::Alert, ported from shadcn/ui's
+  # AlertAction. Pins its content (typically a small Button) to the alert's
+  # corner; the alert reserves right padding via :has(). See alert.rb.
+  class AlertAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-alert-action" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/alert/alert_title.rb

@@ -1,12 +1,13 @@
 module PhlexKit
-  # Heading line of a PhlexKit::Alert. See alert.rb.
+  # Heading line of a PhlexKit::Alert. A div, matching shadcn/ui's markup
+  # (role="alert" on the box carries the semantics). See alert.rb.
   class AlertTitle < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
     end
 
     def view_template(&block)
-      h5(**mix({ class: "pk-alert-title" }, @attrs), &block)
+      div(**mix({ class: "pk-alert-title" }, @attrs), &block)
     end
   end
 end

data/app/components/phlex_kit/alert_dialog/alert_dialog.css

@@ -8,8 +8,8 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background: rgb(0 0 0 / .5);
-  backdrop-filter: blur(8px);
+  background: rgb(0 0 0 / .1);
+  backdrop-filter: blur(4px);
 }
 .pk-alert-dialog-panel {
   position: fixed;
@@ -76,3 +76,6 @@
   border-top: 1px solid var(--pk-border);
   background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent);
 }
+@supports not (backdrop-filter: blur(1px)) {
+  .pk-alert-dialog-overlay { background: rgb(0 0 0 / .5); }
+}

data/app/components/phlex_kit/avatar/avatar.css

@@ -1,22 +1,45 @@
-/* Co-located with avatar.rb — UI::Avatar (+ Image / Fallback). ruby_ui's Tailwind
-   → vanilla CSS on the palette tokens. The controller toggles `.hidden` between
-   image and fallback. Theme tokens come from the global stylesheet. */
+/* Co-located with avatar.rb — PhlexKit::Avatar (+ Image / Fallback / Badge /
+   Group / GroupCount). Matched to shadcn/ui's current avatar (nova): the root
+   is NOT overflow-clipped (a Badge hangs over the edge) — image and fallback
+   round themselves, and a ::after overlay draws the hairline border, blended
+   darken (light mode) / lighten (dark mode) so it hugs any photo. The
+   controller toggles `.hidden` between image and fallback. shadcn ships
+   sm/default/lg; xs/xl are kit extras. */
 .pk-avatar {
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
-  overflow: hidden;
+  user-select: none;
   border-radius: 999px;
   height: 2rem;
   width: 2rem;
   font-size: .875rem;
 }
+.pk-avatar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--pk-border);
+  border-radius: 999px;
+  mix-blend-mode: lighten;
+  pointer-events: none;
+}
+:root[data-theme="light"] .pk-avatar::after { mix-blend-mode: darken; }
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-avatar::after { mix-blend-mode: darken; }
+}
 .pk-avatar.xs { height: 1rem; width: 1rem; font-size: .5rem; }
 .pk-avatar.sm { height: 1.5rem; width: 1.5rem; font-size: .75rem; }
 .pk-avatar.lg { height: 2.5rem; width: 2.5rem; font-size: 1rem; }
 .pk-avatar.xl { height: 5rem; width: 5rem; font-size: 1.875rem; }
 
-.pk-avatar-image { aspect-ratio: 1 / 1; height: 100%; width: 100%; object-fit: cover; }
+.pk-avatar-image {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 999px;
+}
 .pk-avatar-fallback {
   display: flex;
   height: 100%;
@@ -25,11 +48,59 @@
   justify-content: center;
   border-radius: 999px;
   background: var(--pk-surface-2);
-  font-weight: 500;
+  color: var(--pk-muted);
 }
 .pk-avatar-image.hidden, .pk-avatar-fallback.hidden { display: none; }
 
-/* Overlapping row (shadcn's -space-x-2 grouped avatars). */
+/* Status dot pinned to the bottom-right corner; sized by the avatar's size
+   modifier, glyph hidden when there's no room (shadcn's AvatarBadge). */
+.pk-avatar-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  border-radius: 999px;
+  background: var(--pk-brand);
+  color: var(--pk-brand-ink);
+  box-shadow: 0 0 0 2px var(--pk-bg);
+  width: .625rem;
+  height: .625rem;
+}
+.pk-avatar-badge > svg { width: .5rem; height: .5rem; }
+.pk-avatar.xs .pk-avatar-badge { width: .375rem; height: .375rem; }
+.pk-avatar.sm .pk-avatar-badge { width: .5rem; height: .5rem; }
+.pk-avatar.xs .pk-avatar-badge > svg,
+.pk-avatar.sm .pk-avatar-badge > svg { display: none; }
+.pk-avatar.lg .pk-avatar-badge { width: .75rem; height: .75rem; }
+.pk-avatar.xl .pk-avatar-badge { width: 1rem; height: 1rem; }
+.pk-avatar.xl .pk-avatar-badge > svg { width: .625rem; height: .625rem; }
+
+/* Overlapping row (shadcn's -space-x-2 grouped avatars); a trailing
+   GroupCount pill follows the avatars' size via :has(). */
 .pk-avatar-group { display: flex; }
-.pk-avatar-group .pk-avatar { box-shadow: 0 0 0 2px var(--pk-bg); }
-.pk-avatar-group .pk-avatar:not(:first-child) { margin-left: -.5rem; }
+.pk-avatar-group .pk-avatar,
+.pk-avatar-group .pk-avatar-group-count { box-shadow: 0 0 0 2px var(--pk-bg); }
+.pk-avatar-group > :not(:first-child) { margin-left: -.5rem; }
+
+.pk-avatar-group-count {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--pk-surface-2);
+  color: var(--pk-muted);
+  width: 2rem;
+  height: 2rem;
+  font-size: .875rem;
+}
+.pk-avatar-group-count > svg { width: 1rem; height: 1rem; }
+.pk-avatar-group:has(.pk-avatar.sm) .pk-avatar-group-count { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
+.pk-avatar-group:has(.pk-avatar.sm) .pk-avatar-group-count > svg { width: .75rem; height: .75rem; }
+.pk-avatar-group:has(.pk-avatar.lg) .pk-avatar-group-count { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
+.pk-avatar-group:has(.pk-avatar.lg) .pk-avatar-group-count > svg { width: 1.25rem; height: 1.25rem; }

data/app/components/phlex_kit/avatar/avatar.rb

@@ -1,9 +1,11 @@
 module PhlexKit
   # Avatar, ported from ruby_ui's RubyUI::Avatar — a round image with a fallback
-  # (initials). Keeps ruby_ui's `phlex-kit--avatar` Stimulus controller (shows the
-  # image once it loads, else the fallback). Compose AvatarImage + AvatarFallback;
-  # fallback-only is fine (the controller no-ops without an image). `SIZES.fetch`
-  # fails loud. Tailwind → vanilla `.pk-avatar*` (avatar.css).
+  # (initials), matched to shadcn/ui's current avatar. Keeps ruby_ui's
+  # `phlex-kit--avatar` Stimulus controller (shows the image once it loads, else
+  # the fallback). Compose AvatarImage + AvatarFallback (+ optional AvatarBadge
+  # status dot); fallback-only is fine (the controller no-ops without an image).
+  # Overlap several in an AvatarGroup, with AvatarGroupCount as the "+3" pill.
+  # shadcn ships sm/default/lg; xs/xl are kit extras. `SIZES.fetch` fails loud.
   class Avatar < BaseComponent
     SIZES = { xs: "xs", sm: "sm", md: nil, lg: "lg", xl: "xl" }.freeze
 

data/app/components/phlex_kit/avatar/avatar_badge.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Status dot pinned to a PhlexKit::Avatar's bottom-right corner, ported from
+  # shadcn/ui's AvatarBadge. Empty for a plain presence dot, or wrap a small
+  # svg glyph (hidden automatically on xs/sm avatars). Recolor via style/class
+  # — defaults to the brand fill. See avatar.rb.
+  class AvatarBadge < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-avatar-badge" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/avatar/avatar_group_count.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Trailing overflow pill in a PhlexKit::AvatarGroup ("+3", or a small svg),
+  # ported from shadcn/ui's AvatarGroupCount. Sizes itself to match the
+  # group's avatars via :has() in avatar.css. See avatar.rb.
+  class AvatarGroupCount < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-avatar-group-count" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/badge/badge.css

@@ -1,50 +1,72 @@
-/* Co-located with badge.rb — UI::Badge. ruby_ui's Tailwind replaced with vanilla
-   CSS on the palette tokens, at variant/size parity. Geometry from ruby_ui
-   (inline-flex, rounded-md, ring-1 ring-inset → 1px border, bg tint, px-2 py-1
-   text-xs). Theme tokens come from the global stylesheet. */
+/* Co-located with badge.rb — PhlexKit::Badge. Matched to shadcn/ui's current
+   badge (nova): a fixed-height solid pill (h-5, full-round), gap for inline
+   glyphs, near-side padding tightened when a child carries
+   data-icon="inline-start/end". Hover fills apply to LINK badges only
+   (href:), except ghost which hovers everywhere, like theirs. destructive's
+   tint is stronger in dark mode (their dark:bg-destructive/20).
+   success/warning + sm/lg sizes are kit extras. */
 .pk-badge {
   display: inline-flex;
   align-items: center;
-  border-radius: calc(var(--pk-radius) - 2px);
-  padding: .25rem .5rem;
+  justify-content: center;
+  width: fit-content;
+  flex-shrink: 0;
+  gap: .25rem;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1.25rem;
+  border-radius: 2rem;
+  border: 1px solid transparent;
+  padding: .125rem .5rem;
   font-size: .75rem;
   font-weight: 500;
   line-height: 1;
-  border: 1px solid transparent;
+  text-decoration: none;
+  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+/* shadcn forces glyphs to size-3 with `!` — override Spinner's own sizing. */
+.pk-badge > svg { width: .75rem !important; height: .75rem !important; pointer-events: none; }
+.pk-badge:has(> [data-icon="inline-start"]) { padding-left: .375rem; }
+.pk-badge:has(> [data-icon="inline-end"]) { padding-right: .375rem; }
+.pk-badge:focus-visible {
+  outline: none;
+  border-color: var(--pk-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 
-/* Sizes (md is the base above). */
-.pk-badge.sm { padding: .125rem .375rem; font-size: .7rem; }
-.pk-badge.lg { padding: .25rem .75rem; font-size: .875rem; }
+/* Sizes (md is the base above) — kit extras. */
+.pk-badge.sm { height: 1rem; padding: 0 .375rem; font-size: .7rem; }
+.pk-badge.sm:has(> [data-icon="inline-start"]) { padding-left: .25rem; }
+.pk-badge.sm:has(> [data-icon="inline-end"]) { padding-right: .25rem; }
+.pk-badge.lg { height: 1.5rem; padding: .125rem .75rem; font-size: .875rem; }
 
-/* Variants — colored text over a faint tint of the same hue + matching ring. */
-.pk-badge.primary {
-  color: var(--pk-brand);
-  background: color-mix(in oklab, var(--pk-brand) 8%, transparent);
-  border-color: color-mix(in oklab, var(--pk-brand) 25%, transparent);
-}
-.pk-badge.secondary {
-  color: var(--pk-muted);
-  background: color-mix(in oklab, var(--pk-muted) 12%, transparent);
-  border-color: color-mix(in oklab, var(--pk-muted) 25%, transparent);
-}
-.pk-badge.outline {
-  color: var(--pk-text);
-  background: transparent;
-  border-color: var(--pk-border);
-}
-.pk-badge.destructive {
-  color: var(--pk-red);
-  background: color-mix(in oklab, var(--pk-red) 10%, transparent);
-  border-color: color-mix(in oklab, var(--pk-red) 25%, transparent);
-}
-.pk-badge.success {
-  color: var(--pk-green);
-  background: color-mix(in oklab, var(--pk-green) 10%, transparent);
-  border-color: color-mix(in oklab, var(--pk-green) 25%, transparent);
+.pk-badge.primary { background: var(--pk-brand); color: var(--pk-brand-ink); }
+a.pk-badge.primary:hover { background: color-mix(in oklab, var(--pk-brand) 80%, transparent); }
+.pk-badge.secondary { background: var(--pk-surface-2); color: var(--pk-text); }
+a.pk-badge.secondary:hover { background: color-mix(in oklab, var(--pk-surface-2) 80%, transparent); }
+.pk-badge.outline { border-color: var(--pk-border); color: var(--pk-text); }
+a.pk-badge.outline:hover { background: var(--pk-surface-2); color: var(--pk-muted); }
+.pk-badge.ghost { color: var(--pk-text); }
+.pk-badge.ghost:hover { background: var(--pk-surface-2); color: var(--pk-muted); }
+.pk-badge.link { color: var(--pk-brand); }
+.pk-badge.link:hover { text-decoration: underline; text-underline-offset: 4px; }
+
+/* Tinted text variants — 20% fill in dark, 10% in light (their /20 dark, /10). */
+.pk-badge.destructive { color: var(--pk-red); background: color-mix(in oklab, var(--pk-red) 20%, transparent); }
+a.pk-badge.destructive:hover { background: color-mix(in oklab, var(--pk-red) 30%, transparent); }
+.pk-badge.destructive:focus-visible {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
 }
-.pk-badge.warning {
-  color: var(--pk-amber);
-  background: color-mix(in oklab, var(--pk-amber) 10%, transparent);
-  border-color: color-mix(in oklab, var(--pk-amber) 25%, transparent);
+.pk-badge.success { color: var(--pk-green); background: color-mix(in oklab, var(--pk-green) 20%, transparent); }
+.pk-badge.warning { color: var(--pk-amber); background: color-mix(in oklab, var(--pk-amber) 20%, transparent); }
+:root[data-theme="light"] .pk-badge.destructive { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+:root[data-theme="light"] .pk-badge.destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent); }
+:root[data-theme="light"] .pk-badge.success { background: color-mix(in oklab, var(--pk-green) 10%, transparent); }
+:root[data-theme="light"] .pk-badge.warning { background: color-mix(in oklab, var(--pk-amber) 10%, transparent); }
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-badge.destructive { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+  :root[data-theme="system"] .pk-badge.destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent); }
+  :root[data-theme="system"] .pk-badge.success { background: color-mix(in oklab, var(--pk-green) 10%, transparent); }
+  :root[data-theme="system"] .pk-badge.warning { background: color-mix(in oklab, var(--pk-amber) 10%, transparent); }
 }

data/app/components/phlex_kit/badge/badge.rb

@@ -1,15 +1,27 @@
 module PhlexKit
-  # Pill/label badge, ported from ruby_ui's RubyUI::Badge to variant/size parity.
-  # Same kit shape as PhlexKit::Button — a `variant:`/`size:` selector plus attrs/block
-  # passed through to the <span>. ruby_ui's semantic variants are ported; its long
-  # raw-colour palette (red/blue/teal/…) is omitted as unused. Tailwind → vanilla
-  # `.pk-badge` CSS (badge.css). `VARIANTS.fetch` fails loud.
+  # Pill/label badge, ported from ruby_ui's RubyUI::Badge and matched to
+  # shadcn/ui's current badge. Same kit shape as PhlexKit::Button — a
+  # `variant:`/`size:` selector plus attrs/block passed through. Pass `href:`
+  # to render an <a> (shadcn's asChild link badge — hover fills only apply to
+  # links). Mark leading/trailing svg glyphs with data-icon: "inline-start" /
+  # "inline-end" to tighten the near-side padding, like theirs:
+  #
+  #   render PhlexKit::Badge.new(variant: :secondary) do
+  #     render PhlexKit::Icon.new(:circle_check, size: nil, data: { icon: "inline-start" })
+  #     plain "Verified"
+  #   end
+  #
+  # shadcn ships default/secondary/destructive/outline/ghost/link (:primary is
+  # their :default); success/warning and the sm/lg sizes are kit extras.
+  # `VARIANTS.fetch` fails loud.
   class Badge < BaseComponent
     VARIANTS = {
       primary: "primary",
       secondary: "secondary",
       outline: "outline",
       destructive: "destructive",
+      ghost: "ghost",
+      link: "link",
       success: "success",
       warning: "warning"
     }.freeze
@@ -20,14 +32,19 @@ module PhlexKit
       lg: "lg"
     }.freeze
 
-    def initialize(variant: :primary, size: :md, **attrs)
+    def initialize(variant: :primary, size: :md, href: nil, **attrs)
       @variant = variant.to_sym
       @size = size.to_sym
+      @href = href
       @attrs = attrs
     end
 
     def view_template(&block)
-      span(**mix({ class: classes }, @attrs), &block)
+      if @href
+        a(**mix({ class: classes, href: @href }, @attrs), &block)
+      else
+        span(**mix({ class: classes }, @attrs), &block)
+      end
     end
 
     private

data/app/components/phlex_kit/breadcrumb/breadcrumb.css

@@ -4,13 +4,13 @@
   gap: .375rem; word-break: break-word;
   font-size: .875rem; color: var(--pk-muted);
 }
-.pk-breadcrumb-item { display: inline-flex; align-items: center; gap: .375rem; }
+.pk-breadcrumb-item { display: inline-flex; align-items: center; gap: .25rem; }
 .pk-breadcrumb-link { color: inherit; text-decoration: none; transition: color .15s ease; }
 .pk-breadcrumb-link:hover { color: var(--pk-text); }
 .pk-breadcrumb-page { font-weight: 400; color: var(--pk-text); }
 .pk-breadcrumb-separator { display: inline-flex; }
 .pk-breadcrumb-separator > svg { width: .875rem; height: .875rem; }
-.pk-breadcrumb-ellipsis { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; }
+.pk-breadcrumb-ellipsis { display: flex; height: 1.25rem; width: 1.25rem; align-items: center; justify-content: center; }
 .pk-breadcrumb-ellipsis > svg { width: 1rem; height: 1rem; }
 .pk-sr-only {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;