phlex_kit 0.4.0 → 0.5.0

data/app/components/phlex_kit/bubble/bubble.css

@@ -1,24 +1,64 @@
-/* Co-located with bubble.rb. Theme tokens from the global stylesheet. The variant
-   colours the child [data-slot=bubble-content]. */
+/* Co-located with bubble.rb — PhlexKit::Bubble (+ Content / Reactions / Group).
+   Matched to shadcn/ui's current bubble (nova). The variant colours the child
+   [data-slot=bubble-content]; hover fills apply only when the content itself
+   is a <button>/<a> (BubbleContent as: :button / :a). tinted derives its fill
+   from the brand color via relative oklch — lightness pinned per theme.
+   ghost is frameless and full-width (assistant prose). */
 .pk-bubble {
   position: relative; display: flex; width: fit-content; min-width: 0;
   flex-direction: column; gap: .25rem; max-width: 80%;
 }
 .pk-bubble[data-align="end"] { align-self: flex-end; }
+.pk-bubble[data-variant="ghost"] { max-width: 100%; border: none; }
+/* Inside a Message row aligned to the end, bubbles follow. */
+.pk-message[data-align="end"] .pk-bubble { align-self: flex-end; }
 .pk-bubble-content {
   width: fit-content; max-width: 100%; min-width: 0; overflow: hidden;
-  overflow-wrap: break-word; border: 1px solid transparent; border-radius: 1.5rem;
-  padding: .625rem .75rem; font-size: .875rem; line-height: 1.625;
+  overflow-wrap: break-word; border: 1px solid transparent; border-radius: .75rem;
+  padding: .5rem .75rem; font-size: .875rem; line-height: 1.625;
 }
 .pk-bubble[data-align="end"] > .pk-bubble-content { align-self: flex-end; }
-/* variants */
+button.pk-bubble-content { text-align: left; font: inherit; }
+a.pk-bubble-content { color: inherit; text-decoration: none; }
+button.pk-bubble-content, a.pk-bubble-content {
+  cursor: pointer; outline: none;
+  transition: color .15s ease, background-color .15s ease;
+}
+:is(button, a).pk-bubble-content:focus-visible {
+  border-color: var(--pk-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+/* variants (dark-first; light overrides below) */
 .pk-bubble[data-variant="default"]     > .pk-bubble-content { background: var(--pk-brand); color: var(--pk-brand-ink); }
+.pk-bubble[data-variant="default"]     > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-brand) 80%, transparent); }
 .pk-bubble[data-variant="secondary"]   > .pk-bubble-content { background: var(--pk-surface-2); color: var(--pk-text); }
-.pk-bubble[data-variant="muted"]       > .pk-bubble-content { background: var(--pk-surface-2); color: var(--pk-text); }
-.pk-bubble[data-variant="tinted"]      > .pk-bubble-content { background: color-mix(in oklab, var(--pk-brand) 18%, transparent); color: var(--pk-text); }
+.pk-bubble[data-variant="secondary"]   > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklch, var(--pk-surface-2), var(--pk-text) 5%); }
+.pk-bubble[data-variant="muted"]       > .pk-bubble-content { background: var(--pk-surface-2); }
+.pk-bubble[data-variant="muted"]       > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklch, var(--pk-surface-2), var(--pk-text) 5%); }
+.pk-bubble[data-variant="tinted"]      > .pk-bubble-content { background: oklch(from var(--pk-brand) 0.3 calc(c * 0.4) h); color: var(--pk-text); }
+.pk-bubble[data-variant="tinted"]      > :is(button, a).pk-bubble-content:hover { background: oklch(from var(--pk-brand) 0.35 calc(c * 0.5) h); }
 .pk-bubble[data-variant="outline"]     > .pk-bubble-content { background: var(--pk-bg); border-color: var(--pk-border); color: var(--pk-text); }
+.pk-bubble[data-variant="outline"]     > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-input) 30%, transparent); color: var(--pk-text); }
 .pk-bubble[data-variant="ghost"]       > .pk-bubble-content { background: transparent; border-radius: 0; padding: 0; }
-.pk-bubble[data-variant="destructive"] > .pk-bubble-content { background: color-mix(in oklab, var(--pk-red) 12%, transparent); color: var(--pk-red); }
+.pk-bubble[data-variant="ghost"]       > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); color: var(--pk-text); }
+.pk-bubble[data-variant="destructive"] > .pk-bubble-content { background: color-mix(in oklab, var(--pk-red) 20%, transparent); color: var(--pk-red); }
+.pk-bubble[data-variant="destructive"] > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-red) 30%, transparent); }
+
+:root[data-theme="light"] .pk-bubble[data-variant="tinted"] > .pk-bubble-content { background: oklch(from var(--pk-brand) 0.93 calc(c * 0.4) h); }
+:root[data-theme="light"] .pk-bubble[data-variant="tinted"] > :is(button, a).pk-bubble-content:hover { background: oklch(from var(--pk-brand) 0.88 calc(c * 0.5) h); }
+:root[data-theme="light"] .pk-bubble[data-variant="outline"] > :is(button, a).pk-bubble-content:hover { background: var(--pk-surface-2); }
+:root[data-theme="light"] .pk-bubble[data-variant="ghost"] > :is(button, a).pk-bubble-content:hover { background: var(--pk-surface-2); }
+:root[data-theme="light"] .pk-bubble[data-variant="destructive"] > .pk-bubble-content { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+:root[data-theme="light"] .pk-bubble[data-variant="destructive"] > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-red) 20%, transparent); }
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-bubble[data-variant="tinted"] > .pk-bubble-content { background: oklch(from var(--pk-brand) 0.93 calc(c * 0.4) h); }
+  :root[data-theme="system"] .pk-bubble[data-variant="tinted"] > :is(button, a).pk-bubble-content:hover { background: oklch(from var(--pk-brand) 0.88 calc(c * 0.5) h); }
+  :root[data-theme="system"] .pk-bubble[data-variant="outline"] > :is(button, a).pk-bubble-content:hover { background: var(--pk-surface-2); }
+  :root[data-theme="system"] .pk-bubble[data-variant="ghost"] > :is(button, a).pk-bubble-content:hover { background: var(--pk-surface-2); }
+  :root[data-theme="system"] .pk-bubble[data-variant="destructive"] > .pk-bubble-content { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+  :root[data-theme="system"] .pk-bubble[data-variant="destructive"] > :is(button, a).pk-bubble-content:hover { background: color-mix(in oklab, var(--pk-red) 20%, transparent); }
+}
+
 .pk-bubble-group { display: flex; min-width: 0; flex-direction: column; gap: .5rem; }
 .pk-bubble-reactions {
   position: absolute; z-index: 10; display: flex; width: fit-content;
@@ -26,6 +66,7 @@
   box-shadow: 0 0 0 3px var(--pk-surface); background: var(--pk-surface-2);
   flex: none; gap: .25rem; padding: .125rem .375rem; font-size: .875rem;
 }
+.pk-bubble-reactions:has(button) { padding: 0; }
 .pk-bubble-reactions[data-side="bottom"] { bottom: 0; transform: translateY(75%); }
 .pk-bubble-reactions[data-side="top"] { top: 0; transform: translateY(-75%); }
 .pk-bubble-reactions[data-align="end"] { right: .75rem; }

data/app/components/phlex_kit/button/button.css

@@ -1,66 +1,96 @@
-/* Co-located with button.rb — UI::Button. ruby_ui's Tailwind replaced with
-   vanilla CSS on the palette tokens, at full variant/size parity. Geometry from
-   ruby_ui (inline-flex centred, rounded-md, h-9 default, font-medium, focus ring,
-   filled variants). Theme tokens come from the global stylesheet. */
+/* Co-located with button.rb — PhlexKit::Button. Matched to shadcn/ui's current
+   button (nova): h-8 default, tinted destructive (no more solid red), theme-
+   forked outline (translucent input fill in dark, plain bordered in light),
+   active nudge, per-size radius caps, data-icon inset tightening, svg-4
+   glyphs. Hover fills; aria-expanded holds the open state for menu triggers.
+   xl is a kit extra. Dark-first; light overrides at the bottom. */
 .pk-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   white-space: nowrap;
+  user-select: none;
   gap: .375rem;
   height: 2rem;
   padding: .25rem .625rem;
   border: 1px solid transparent;
   border-radius: var(--pk-radius);
+  background-clip: padding-box;
   font: inherit;
   font-size: .875rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
+  text-decoration: none;
+  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
 }
 .pk-button:focus-visible {
   outline: none;
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
+.pk-button:active:not([aria-haspopup]) { transform: translateY(1px); }
 .pk-button:disabled, .pk-button[disabled], .pk-button[aria-disabled="true"] {
   pointer-events: none;
   opacity: .5;
 }
+/* Glyphs default to size-4; explicit width attrs (Icon size:) win. */
+.pk-button svg { flex-shrink: 0; pointer-events: none; }
+.pk-button svg:not([width]) { width: 1rem; height: 1rem; }
+.pk-button:has(> [data-icon="inline-start"]) { padding-left: .5rem; }
+.pk-button:has(> [data-icon="inline-end"]) { padding-right: .5rem; }
 
 /* Sizes (md is the base above). */
-.pk-button.sm { height: 1.75rem; padding: .25rem .5rem; font-size: .75rem; }
-.pk-button.lg { height: 2.5rem; padding: .375rem 1rem; font-size: .875rem; }
+.pk-button.xs {
+  height: 1.5rem; gap: .25rem; padding: .125rem .5rem; font-size: .75rem;
+  border-radius: min(calc(var(--pk-radius) - 2px), 10px);
+}
+.pk-button.xs svg:not([width]) { width: .75rem; height: .75rem; }
+.pk-button.xs:has(> [data-icon="inline-start"]) { padding-left: .375rem; }
+.pk-button.xs:has(> [data-icon="inline-end"]) { padding-right: .375rem; }
+.pk-button.sm {
+  height: 1.75rem; gap: .25rem; padding: .25rem .625rem; font-size: .8rem;
+  border-radius: min(calc(var(--pk-radius) - 2px), 12px);
+}
+.pk-button.sm svg:not([width]) { width: .875rem; height: .875rem; }
+.pk-button.sm:has(> [data-icon="inline-start"]) { padding-left: .375rem; }
+.pk-button.sm:has(> [data-icon="inline-end"]) { padding-right: .375rem; }
+.pk-button.lg { height: 2.25rem; padding: .375rem .625rem; }
 .pk-button.xl { height: 3rem; padding: .625rem 1.5rem; font-size: 1rem; }
 
-/* Icon-only square buttons. */
+/* Icon-only square buttons (their icon / icon-xs / icon-sm / icon-lg). */
 .pk-button.icon { width: 2rem; padding: 0; }
+.pk-button.icon.xs { width: 1.5rem; }
 .pk-button.icon.sm { width: 1.75rem; }
-.pk-button.icon.lg { width: 2.5rem; }
+.pk-button.icon.lg { width: 2.25rem; }
 .pk-button.icon.xl { width: 3rem; }
 
-/* Variants. */
-.pk-button.primary {
-  background: var(--pk-brand);
-  color: var(--pk-brand-ink);
-  border-color: var(--pk-brand);
-}
-.pk-button.primary:hover { background: color-mix(in oklab, var(--pk-brand) 90%, transparent); border-color: transparent; }
+/* Variants (dark-first; light overrides below). */
+.pk-button.primary { background: var(--pk-brand); color: var(--pk-brand-ink); }
+.pk-button.primary:hover { background: color-mix(in oklab, var(--pk-brand) 80%, transparent); }
 
 .pk-button.secondary { background: var(--pk-surface-2); color: var(--pk-text); }
-.pk-button.secondary:hover { background: color-mix(in oklab, var(--pk-surface-2) 80%, transparent); }
+.pk-button.secondary:hover { background: color-mix(in oklch, var(--pk-surface-2), var(--pk-text) 5%); }
+.pk-button.secondary[aria-expanded="true"] { background: var(--pk-surface-2); color: var(--pk-text); }
 
-.pk-button.destructive {
-  background: var(--pk-red);
-  color: var(--pk-brand-ink);
-  border-color: var(--pk-red);
+.pk-button.destructive { background: color-mix(in oklab, var(--pk-red) 20%, transparent); color: var(--pk-red); }
+.pk-button.destructive:hover { background: color-mix(in oklab, var(--pk-red) 30%, transparent); }
+.pk-button.destructive:focus-visible {
+  border-color: color-mix(in oklab, var(--pk-red) 40%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
 }
-.pk-button.destructive:hover { background: color-mix(in oklab, var(--pk-red) 88%, black); }
 
-.pk-button.outline { background: color-mix(in oklab, var(--pk-input) 30%, transparent); color: var(--pk-text); border-color: var(--pk-input); }
-.pk-button.outline:hover { background: var(--pk-accent); }
+.pk-button.outline {
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
+  color: var(--pk-text);
+  border-color: var(--pk-input);
+}
+.pk-button.outline:hover { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+.pk-button.outline[aria-expanded="true"] { background: var(--pk-surface-2); color: var(--pk-text); }
 
 .pk-button.ghost { background: transparent; border-color: transparent; color: var(--pk-text); }
-.pk-button.ghost:hover { background: var(--pk-accent); }
+.pk-button.ghost:hover { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); color: var(--pk-text); }
+.pk-button.ghost[aria-expanded="true"] { background: var(--pk-surface-2); color: var(--pk-text); }
 
 .pk-button.link {
   height: auto;
@@ -69,4 +99,19 @@
   border-color: transparent;
   color: var(--pk-brand);
 }
-.pk-button.link:hover { text-decoration: underline; }
+.pk-button.link:hover { text-decoration: underline; text-underline-offset: 4px; }
+
+:root[data-theme="light"] .pk-button.outline { background: var(--pk-bg); border-color: var(--pk-border); }
+:root[data-theme="light"] .pk-button.outline:hover { background: var(--pk-surface-2); color: var(--pk-text); }
+:root[data-theme="light"] .pk-button.ghost:hover { background: var(--pk-surface-2); }
+:root[data-theme="light"] .pk-button.destructive { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+:root[data-theme="light"] .pk-button.destructive:hover { background: color-mix(in oklab, var(--pk-red) 20%, transparent); }
+:root[data-theme="light"] .pk-button.destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent); }
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-button.outline { background: var(--pk-bg); border-color: var(--pk-border); }
+  :root[data-theme="system"] .pk-button.outline:hover { background: var(--pk-surface-2); color: var(--pk-text); }
+  :root[data-theme="system"] .pk-button.ghost:hover { background: var(--pk-surface-2); }
+  :root[data-theme="system"] .pk-button.destructive { background: color-mix(in oklab, var(--pk-red) 10%, transparent); }
+  :root[data-theme="system"] .pk-button.destructive:hover { background: color-mix(in oklab, var(--pk-red) 20%, transparent); }
+  :root[data-theme="system"] .pk-button.destructive:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent); }
+}

data/app/components/phlex_kit/button/button.rb

@@ -1,19 +1,20 @@
 module PhlexKit
-  # Button, ported from ruby_ui's RubyUI::Button (https://ruby-ui.com) to full
-  # variant/size parity. Renders a <button>; the `mix` pass-through means a
-  # caller's `class:` augments ours and a phlex-reactive `**on(:event)` bundle
-  # flows straight onto the element:
+  # Button, ported from ruby_ui's RubyUI::Button and matched to shadcn/ui's
+  # current button. Renders a <button>, or an <a> when `href:` is given
+  # (their asChild link button). The `mix` pass-through means a caller's
+  # `class:` augments ours and a phlex-reactive `**on(:event)` bundle flows
+  # straight onto the element:
   #
   #   render PhlexKit::Button.new(variant: :primary, **on(:publish)) { "Approve" }
+  #   render PhlexKit::Button.new(href: "/login") { "Login" }
   #
-  # For a button-styled link, put the classes on an <a> directly
-  # (`class: "pk-button outline sm"`) — that's ruby_ui's Link approach.
-  #
-  # Variants/sizes mirror ruby_ui; Tailwind is replaced with vanilla `.pk-button`
-  # CSS (button.css). `VARIANTS.fetch`/`SIZES.fetch` fail loud on a bad value.
+  # Mark leading/trailing glyphs with data-icon: "inline-start"/"inline-end"
+  # to tighten the near-side padding like theirs. `icon: true` makes the
+  # button square (their icon/icon-xs/… sizes — compose with `size:`).
+  # :primary is their :default; :xl is a kit extra. `VARIANTS.fetch`/
+  # `SIZES.fetch` fail loud on a bad value.
   class Button < BaseComponent
-    # variant => modifier class. Default is :primary (the filled brand button),
-    # matching ruby_ui.
+    # variant => modifier class. Default is :primary (the filled brand button).
     VARIANTS = {
       primary: "primary",
       secondary: "secondary",
@@ -24,22 +25,28 @@ module PhlexKit
     }.freeze
 
     SIZES = {
+      xs: "xs",
       sm: "sm",
       md: nil,
       lg: "lg",
       xl: "xl"
     }.freeze
 
-    def initialize(variant: :primary, size: :md, type: :button, icon: false, **attrs)
+    def initialize(variant: :primary, size: :md, type: :button, icon: false, href: nil, **attrs)
       @variant = variant.to_sym
       @size = size.to_sym
       @type = type
       @icon = icon
+      @href = href
       @attrs = attrs
     end
 
     def view_template(&block)
-      button(**mix({ type: @type, class: classes }, @attrs), &block)
+      if @href
+        a(**mix({ href: @href, class: classes }, @attrs), &block)
+      else
+        button(**mix({ type: @type, class: classes }, @attrs), &block)
+      end
     end
 
     private

data/app/components/phlex_kit/button_group/button_group.css

@@ -1,8 +1,59 @@
-/* Co-located with button_group.rb — UI::ButtonGroup, shadcn parity: children
-   join into one segmented control (shared borders, inner corners squared). */
-.pk-button-group { display: inline-flex; align-items: stretch; }
-.pk-button-group > * { border-radius: 0; }
-.pk-button-group > *:not(:first-child) { margin-left: -1px; }
-.pk-button-group > *:first-child { border-top-left-radius: var(--pk-radius); border-bottom-left-radius: var(--pk-radius); }
-.pk-button-group > *:last-child { border-top-right-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }
-.pk-button-group > *:focus-visible { position: relative; z-index: 1; }
+/* Co-located with button_group.rb — PhlexKit::ButtonGroup (+ Text /
+   Separator). Matched to shadcn/ui's current button-group: children keep
+   their OWN outer corners and only lose the inner ones (so sm buttons keep
+   their smaller radius), shared edges drop the trailing border. Nested
+   groups separate with a gap and stay independently rounded. The separator
+   is a hairline for same-fill segments (secondary/primary) where no border
+   exists to divide them. */
+.pk-button-group { display: flex; width: fit-content; align-items: stretch; }
+.pk-button-group:has(> .pk-button-group) { gap: .5rem; }
+.pk-button-group > :focus-visible { position: relative; z-index: 10; }
+.pk-button-group > input { flex: 1; }
+
+/* horizontal (default) */
+.pk-button-group:not(.vertical) > :not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+.pk-button-group:not(.vertical) > :not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* vertical */
+.pk-button-group.vertical { flex-direction: column; }
+.pk-button-group.vertical > :not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: 0;
+}
+.pk-button-group.vertical > :not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Nested groups keep their own corners — undo the squaring the parent applied. */
+.pk-button-group > .pk-button-group { border-radius: 0; border: 0; }
+
+.pk-button-group-text {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  background: var(--pk-surface-2);
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  padding: 0 .625rem;
+  font-size: .875rem;
+  font-weight: 500;
+}
+.pk-button-group-text svg { pointer-events: none; }
+.pk-button-group-text svg:not([width]) { width: 1rem; height: 1rem; }
+
+.pk-button-group-separator {
+  position: relative;
+  align-self: stretch;
+  background: var(--pk-input);
+}
+.pk-button-group:not(.vertical) > .pk-button-group-separator { width: 1px; margin: 0 1px; }
+.pk-button-group.vertical > .pk-button-group-separator { height: 1px; margin: 1px 0; }

data/app/components/phlex_kit/button_group/button_group.rb

@@ -1,14 +1,20 @@
 module PhlexKit
-  # Joined row of buttons, ported from shadcn/ui's ButtonGroup: children lose
-  # their inner corners/double borders and read as one segmented control.
-  # `.pk-button-group` (button_group.css).
+  # Joined row (or column) of buttons, ported from shadcn/ui's ButtonGroup:
+  # children lose their inner corners/double borders and read as one segmented
+  # control. `orientation: :vertical` stacks. Nest groups to separate segments
+  # with a gap; add ButtonGroupText for static labels and ButtonGroupSeparator
+  # between same-fill buttons. `.pk-button-group` (button_group.css).
   class ButtonGroup < BaseComponent
-    def initialize(**attrs)
+    ORIENTATIONS = { horizontal: nil, vertical: "vertical" }.freeze
+
+    def initialize(orientation: :horizontal, **attrs)
+      @orientation = orientation.to_sym
       @attrs = attrs
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-button-group", role: "group" }, @attrs), &)
+      classes = [ "pk-button-group", ORIENTATIONS.fetch(@orientation) ].compact.join(" ")
+      div(**mix({ class: classes, role: "group" }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/button_group/button_group_separator.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Hairline divider between same-fill segments of a PhlexKit::ButtonGroup,
+  # ported from shadcn/ui's ButtonGroupSeparator. Runs perpendicular to the
+  # group's orientation automatically (button_group.css). See button_group.rb.
+  class ButtonGroupSeparator < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({ class: "pk-button-group-separator", role: "separator", aria: { hidden: true } }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/button_group/button_group_text.rb

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Static text segment inside a PhlexKit::ButtonGroup, ported from shadcn/ui's
+  # ButtonGroupText — a muted, bordered cell that joins the group like a
+  # button but isn't interactive. See button_group.rb.
+  class ButtonGroupText < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-button-group-text" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/calendar/calendar.css

@@ -1,10 +1,15 @@
-/* Co-located with calendar.rb — UI::Calendar. ruby_ui's structure + Stimulus
-   kept (the controller renders week rows from <template>s; its Mustache
-   dependency replaced with a tiny interpolator); Tailwind replaced with vanilla
-   CSS on the palette tokens. Geometry from ruby_ui (p-3 card, h-7 nav buttons,
-   2rem day cells, flex week rows). Theme tokens come from the global
-   stylesheet. */
+/* Co-located with calendar.rb — PhlexKit::Calendar. ruby_ui's structure +
+   Stimulus kept (the controller renders week rows from <template>s; its
+   Mustache dependency replaced with a tiny interpolator); extended to
+   shadcn's current surface. Sizing rides nova's variable system:
+   --pk-cell-size (default 2rem) and --pk-cell-radius drive every day cell —
+   the Custom Cell Size example just overrides --pk-cell-size inline. Range
+   days paint a contiguous accent band (in-range cells square off; the
+   start/end caps keep their outer radius). Booked (explicitly disabled)
+   days strike through at full opacity, like theirs. */
 .pk-calendar {
+  --pk-cell-size: 2rem;
+  --pk-cell-radius: calc(var(--pk-radius) - 2px);
   display: inline-flex;
   flex-direction: column;
   gap: 1rem;
@@ -20,6 +25,18 @@
 }
 .pk-calendar-title { font-size: .875rem; font-weight: 500; }
 
+/* Month/year dropdown caption (caption_layout: :dropdown) — native selects
+   restyled to their compact h-6 caption controls. */
+.pk-calendar-dropdowns { display: flex; align-items: center; gap: .25rem; }
+.pk-native-select-field.pk-calendar-dropdown {
+  width: auto;
+  height: 1.5rem;
+  padding: 0 .25rem 0 .375rem;
+  font-size: .875rem;
+  font-weight: 500;
+  border-color: var(--pk-input);
+}
+
 .pk-calendar-prev, .pk-calendar-next {
   position: absolute;
   display: inline-flex;
@@ -50,23 +67,39 @@
 .pk-calendar-weekdays-row { display: flex; }
 .pk-calendar-week { display: flex; width: 100%; margin-top: .5rem; }
 .pk-calendar-weekday {
-  width: 2rem;
-  border-radius: calc(var(--pk-radius) - 2px);
+  flex: none;
+  width: var(--pk-cell-size);
+  border-radius: var(--pk-cell-radius);
   font-size: .8rem;
   font-weight: 400;
   color: var(--pk-muted);
 }
+.pk-calendar-weeknumber,
+.pk-calendar-weeknumber-head {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pk-cell-size);
+  height: var(--pk-cell-size);
+  font-size: .75rem;
+  font-weight: 400;
+  color: var(--pk-muted);
+}
+.pk-calendar-weeknumber-head { height: auto; }
 
 .pk-calendar-cell {
   position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--pk-cell-size);
+  height: var(--pk-cell-size);
   padding: 0;
   text-align: center;
   font-size: .875rem;
 }
-.pk-calendar-cell:has([aria-selected]) {
-  background: var(--pk-accent);
-  border-radius: calc(var(--pk-radius) - 2px);
-}
 .pk-calendar-cell:focus-within { position: relative; z-index: 20; }
 
 /* Day button states (base = current month). */
@@ -74,11 +107,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: var(--pk-cell-size);
+  height: var(--pk-cell-size);
   padding: 0;
   border: 0;
-  border-radius: calc(var(--pk-radius) - 2px);
+  border-radius: var(--pk-cell-radius);
   background: transparent;
   color: var(--pk-text);
   font: inherit;
@@ -107,3 +140,21 @@
   color: var(--pk-muted);
   opacity: .5;
 }
+/* Booked: explicitly blocked dates keep full opacity, struck through. */
+.pk-calendar-day.booked {
+  text-decoration: line-through;
+  opacity: 1;
+}
+
+/* Range selection: a contiguous accent band between the brand-filled caps. */
+.pk-calendar-cell:has(> .in-range) { background: var(--pk-accent); }
+.pk-calendar-day.in-range {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  background: var(--pk-accent);
+}
+.pk-calendar-cell:has(> .range-cap) { background: var(--pk-accent); }
+.pk-calendar-cell:has(> .range-start.range-cap) { border-radius: var(--pk-cell-radius) 0 0 var(--pk-cell-radius); }
+.pk-calendar-cell:has(> .range-end.range-cap) { border-radius: 0 var(--pk-cell-radius) var(--pk-cell-radius) 0; }
+.pk-calendar-cell:has(> .range-start.range-end) { border-radius: var(--pk-cell-radius); }