phlex_kit 0.4.0 → 0.5.0

data/app/components/phlex_kit/sidebar/sidebar_wrapper.rb

@@ -7,30 +7,47 @@ module PhlexKit
   #   :offcanvas — the rail hides/reveals via a PhlexKit::SidebarTrigger. On
   #                desktop it slides out of the layout; below 768px it overlays
   #                as a fixed drawer behind a click-to-close scrim, closed by
-  #                Escape and before Turbo caches the page. State is DOM-only:
-  #                `data-collapsed` (desktop) / `data-open` (mobile drawer).
+  #                Escape and before Turbo caches the page.
+  #   :icon      — like :offcanvas, but on desktop the rail collapses to a
+  #                3rem icon strip instead of leaving: labels hide, menu
+  #                buttons become icon squares (add `tooltip:` to
+  #                SidebarMenuButton for hover labels), groups/badges/subs
+  #                disappear. Mobile behaves like :offcanvas.
+  #
+  # State is DOM-only: `data-collapsed` (desktop) / `data-open` (mobile
+  # drawer). ⌘B/Ctrl+B toggles. The desktop state persists in a
+  # `pk_sidebar_state` cookie ("collapsed"/"expanded") — pass
+  # `default_collapsed: cookies[:pk_sidebar_state] == "collapsed"` from the
+  # host layout to render the collapsed rail server-side with no flash.
+  # Add a PhlexKit::SidebarRail inside the Sidebar for the edge grab-strip.
   # See sidebar.rb.
   class SidebarWrapper < BaseComponent
-    COLLAPSIBLE = { none: nil, offcanvas: "collapsible-offcanvas" }.freeze
+    COLLAPSIBLE = { none: nil, offcanvas: "collapsible-offcanvas", icon: "collapsible-icon" }.freeze
 
-    def initialize(collapsible: :none, **attrs)
+    def initialize(collapsible: :none, default_collapsed: false, **attrs)
       @collapsible = collapsible.to_sym
+      @default_collapsed = default_collapsed
       @attrs = attrs
     end
 
     def view_template(&block)
-      unless offcanvas?
+      unless collapsible?
         return div(**mix({ class: classes }, @attrs), &block)
       end
 
-      div(**mix({
+      base = {
         class: classes,
         data: {
           controller: "phlex-kit--sidebar",
           action: "keydown.esc@window->phlex-kit--sidebar#closeMobile " \
+                  "keydown.meta+b@window->phlex-kit--sidebar#toggle:prevent " \
+                  "keydown.ctrl+b@window->phlex-kit--sidebar#toggle:prevent " \
                   "turbo:before-cache@window->phlex-kit--sidebar#closeMobile"
         }
-      }, @attrs)) do
+      }
+      base["data-collapsed"] = "" if @default_collapsed
+
+      div(**mix(base, @attrs)) do
         yield if block
         button(type: :button, class: "pk-sidebar-scrim", aria_label: "Close sidebar",
                tabindex: "-1", data: { action: "click->phlex-kit--sidebar#closeMobile" })
@@ -39,7 +56,7 @@ module PhlexKit
 
     private
 
-    def offcanvas? = @collapsible == :offcanvas
+    def collapsible? = @collapsible != :none
 
     def classes
       [ "pk-sidebar-wrapper", COLLAPSIBLE.fetch(@collapsible) ].compact.join(" ")

data/app/components/phlex_kit/skeleton/skeleton.css

@@ -1,7 +1,7 @@
 /* Co-located with skeleton.rb. Theme tokens come from the global stylesheet. */
 .pk-skeleton {
   border-radius: calc(var(--pk-radius) - 2px);
-  background: color-mix(in oklab, var(--pk-brand, #6c8cff) 10%, transparent);
+  background: var(--pk-surface-2);
   animation: pk-pulse 1.5s cubic-bezier(.4, 0, .6, 1) infinite;
 }
 @keyframes pk-pulse { 50% { opacity: .5; } }

data/app/components/phlex_kit/slider/slider.css

@@ -12,7 +12,7 @@
 }
 .pk-slider:focus-visible { outline: none; }
 .pk-slider::-webkit-slider-runnable-track {
-  height: .375rem;
+  height: .25rem;
   border-radius: 9999px;
   background: linear-gradient(to right,
     var(--pk-brand) var(--pk-slider-progress, 50%),
@@ -20,33 +20,54 @@
 }
 .pk-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 1rem;
-  height: 1rem;
-  margin-top: -0.3125rem;
+  width: .75rem;
+  height: .75rem;
+  margin-top: -0.25rem;
   border-radius: 9999px;
-  border: 1px solid var(--pk-brand);
-  background: var(--pk-bg);
+  border: 1px solid var(--pk-ring);
+  background: #fff;
   box-shadow: 0 1px 2px rgb(0 0 0 / .25);
   transition: box-shadow .15s ease;
 }
+.pk-slider:hover::-webkit-slider-thumb,
+.pk-slider:active::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
 .pk-slider:focus-visible::-webkit-slider-thumb {
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-slider::-moz-range-track {
-  height: .375rem;
+  height: .25rem;
   border-radius: 9999px;
   background: var(--pk-surface-2);
 }
 .pk-slider::-moz-range-progress {
-  height: .375rem;
+  height: .25rem;
   border-radius: 9999px;
   background: var(--pk-brand);
 }
 .pk-slider::-moz-range-thumb {
-  width: 1rem;
-  height: 1rem;
+  width: .75rem;
+  height: .75rem;
   border-radius: 9999px;
-  border: 1px solid var(--pk-brand);
-  background: var(--pk-bg);
+  border: 1px solid var(--pk-ring);
+  background: #fff;
+}
+.pk-slider:hover::-moz-range-thumb,
+.pk-slider:active::-moz-range-thumb {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-slider:disabled { opacity: .5; cursor: not-allowed; }
+/* Vertical: modern writing-mode flip (min-h-40 like theirs). */
+.pk-slider.vertical {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 1rem;
+  height: auto;
+  min-height: 10rem;
+}
+.pk-slider.vertical::-webkit-slider-runnable-track {
+  background: linear-gradient(to top,
+    var(--pk-brand) var(--pk-slider-progress, 50%),
+    var(--pk-surface-2) var(--pk-slider-progress, 50%));
+}

data/app/components/phlex_kit/switch/switch.css

@@ -1,28 +1,65 @@
-/* Co-located with switch.rb. Theme tokens from the global stylesheet. */
+/* Co-located with switch.rb. Matched to shadcn/ui's current switch (nova):
+   32×18.4px track (sm 24×14) with a size-4 thumb sliding calc(100%-2px);
+   unchecked fills with the input tone (stronger in dark), checked with the
+   brand; the thumb is the page background in light, foreground in dark
+   (brand-ink when checked). Pure CSS (:has(:checked)), no Stimulus. */
 .pk-switch {
+  position: relative;
   display: inline-flex;
-  height: 1.5rem;
-  width: 2.75rem;
+  height: 18.4px;
+  width: 32px;
   flex: none;
   cursor: pointer;
   align-items: center;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   border-radius: 9999px;
-  background: var(--pk-border);
-  transition: background-color .15s ease;
+  background: color-mix(in oklab, var(--pk-input) 80%, transparent);
+  transition: background-color .15s ease, box-shadow .15s ease;
 }
+.pk-switch.sm { height: 14px; width: 24px; }
 .pk-switch:has(.pk-switch-input:checked) { background: var(--pk-brand); }
 .pk-switch:has(.pk-switch-input:disabled) { cursor: not-allowed; opacity: .5; }
-.pk-switch-input { display: none; }
+.pk-switch:has(.pk-switch-input:focus-visible) {
+  border-color: var(--pk-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-switch:has(.pk-switch-input[aria-invalid="true"]) {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
+.pk-switch-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
 .pk-switch-thumb {
   pointer-events: none;
   display: block;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1rem;
+  width: 1rem;
   border-radius: 9999px;
-  background: var(--pk-surface);
-  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
-  transition: transform .15s ease;
+  background: var(--pk-text);
+  transition: transform .15s ease, background-color .15s ease;
   transform: translateX(0);
 }
-.pk-switch:has(.pk-switch-input:checked) .pk-switch-thumb { transform: translateX(1.25rem); }
+.pk-switch.sm .pk-switch-thumb { height: .75rem; width: .75rem; }
+.pk-switch:has(.pk-switch-input:checked) .pk-switch-thumb {
+  transform: translateX(calc(100% - 2px));
+  background: var(--pk-brand-ink);
+}
+:root[data-theme="light"] .pk-switch { background: var(--pk-input); }
+:root[data-theme="light"] .pk-switch:has(.pk-switch-input:checked) { background: var(--pk-brand); }
+:root[data-theme="light"] .pk-switch-thumb { background: var(--pk-bg) !important; }
+:root[data-theme="light"] .pk-switch:has(.pk-switch-input[aria-invalid="true"]) {
+  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-switch { background: var(--pk-input); }
+  :root[data-theme="system"] .pk-switch:has(.pk-switch-input:checked) { background: var(--pk-brand); }
+  :root[data-theme="system"] .pk-switch-thumb { background: var(--pk-bg) !important; }
+  :root[data-theme="system"] .pk-switch:has(.pk-switch-input[aria-invalid="true"]) {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+  }
+}

data/app/components/phlex_kit/switch/switch.rb

@@ -3,15 +3,18 @@ module PhlexKit
   # ruby_ui's RubyUI::Switch — pure CSS (`:has(:checked)`), no Stimulus. Emits an
   # optional hidden field so an unchecked box still posts a value (Rails idiom).
   class Switch < BaseComponent
-    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
+    SIZES = { md: nil, sm: "sm" }.freeze
+
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", size: :md, **attrs)
       @include_hidden = include_hidden
       @checked_value = checked_value
       @unchecked_value = unchecked_value
+      @size = size.to_sym
       @attrs = attrs
     end
 
     def view_template
-      label(**mix({ role: "switch", class: "pk-switch" }, {})) do
+      label(**mix({ role: "switch", class: [ "pk-switch", SIZES.fetch(@size) ].compact.join(" ") }, {})) do
         input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden
         input(**mix({ class: "pk-switch-input" }, @attrs).merge(type: "checkbox", value: @checked_value))
         span(class: "pk-switch-thumb")

data/app/components/phlex_kit/table/table.css

@@ -7,10 +7,11 @@
 
 .pk-table-header .pk-table-row { border-bottom: 1px solid var(--pk-border); }
 .pk-table-body .pk-table-row:last-child { border-bottom: 0; }
-.pk-table-footer { border-top: 1px solid var(--pk-border); font-weight: 500; }
+.pk-table-footer { border-top: 1px solid var(--pk-border); font-weight: 500; background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }
 
 .pk-table-row { border-bottom: 1px solid var(--pk-border); transition: background-color .12s ease; }
-.pk-table-row:hover { background: color-mix(in oklab, var(--pk-surface-2) 60%, transparent); }
+.pk-table-row:hover { background: color-mix(in oklab, var(--pk-surface-2) 50%, transparent); }
+.pk-table-row[data-state="selected"] { background: var(--pk-surface-2); }
 
 .pk-table-head {
   height: 2.5rem;
@@ -18,7 +19,10 @@
   text-align: left;
   vertical-align: middle;
   font-weight: 500;
-  color: var(--pk-muted);
+  white-space: nowrap;
+  color: var(--pk-text);
 }
-.pk-table-cell { padding: .5rem; vertical-align: middle; }
+.pk-table-head:has([role="checkbox"]),
+.pk-table-cell:has([role="checkbox"]) { padding-right: 0; }
+.pk-table-cell { padding: .5rem; vertical-align: middle; white-space: nowrap; }
 .pk-table-caption { margin-top: 1rem; font-size: .875rem; color: var(--pk-muted); }

data/app/components/phlex_kit/tabs/tabs.css

@@ -1,13 +1,77 @@
-/* Co-located with tabs.rb. Theme tokens from the global stylesheet. */
+/* Co-located with tabs.rb. Matched to nova: h-8 list with 3px padding,
+   rounded-md px-1.5 triggers with data-icon insets and svg-4 glyphs, active
+   fill (translucent input in dark) with a soft shadow; the `line` variant is
+   transparent with an animated underline; `orientation: :vertical` stacks
+   the list (underline moves to the right edge). Tokens global. */
+.pk-tabs { display: flex; flex-direction: column; gap: .5rem; }
+.pk-tabs.vertical { flex-direction: row; align-items: flex-start; }
 .pk-tabs-list {
-  display: inline-flex; height: 2.25rem; align-items: center; justify-content: center;
-  border-radius: var(--pk-radius); background: var(--pk-surface-2); padding: .25rem; color: var(--pk-muted);
+  display: inline-flex; width: fit-content; height: 2rem; align-items: center; justify-content: center;
+  border-radius: var(--pk-radius); background: var(--pk-surface-2); padding: 3px; color: var(--pk-muted);
 }
+.pk-tabs.vertical .pk-tabs-list { height: fit-content; flex-direction: column; align-items: stretch; }
 .pk-tabs-trigger {
-  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
-  border-radius: calc(var(--pk-radius) - 2px); padding: .25rem .75rem; font-size: .875rem; font-weight: 500;
-  background: none; border: 0; cursor: pointer; color: inherit; transition: all .15s ease;
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
+  white-space: nowrap; flex: 1;
+  border: 1px solid transparent;
+  border-radius: calc(var(--pk-radius) - 2px); padding: 2px .375rem; font-size: .875rem; font-weight: 500;
+  background: none; cursor: pointer; color: inherit; transition: all .15s ease;
+}
+.pk-tabs.vertical .pk-tabs-trigger { width: 100%; justify-content: flex-start; }
+.pk-tabs-trigger:hover { color: var(--pk-text); }
+.pk-tabs-trigger svg { pointer-events: none; flex-shrink: 0; }
+.pk-tabs-trigger svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+.pk-tabs-trigger:has(> [data-icon="inline-start"]) { padding-left: .25rem; }
+.pk-tabs-trigger:has(> [data-icon="inline-end"]) { padding-right: .25rem; }
+.pk-tabs-trigger: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-tabs-trigger[data-state="active"] {
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
+  border-color: var(--pk-input);
+  color: var(--pk-text);
+  box-shadow: 0 1px 2px rgb(0 0 0 / .1);
 }
-.pk-tabs-trigger[data-state="active"] { background: var(--pk-bg); color: var(--pk-text); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
 .pk-tabs-trigger:disabled { pointer-events: none; opacity: .5; }
-.pk-tabs-content { margin-top: .5rem; }
+
+/* line variant: transparent list, underline on the active trigger. */
+.pk-tabs-list.line { background: transparent; border-radius: 0; gap: .25rem; padding: 0; }
+.pk-tabs-list.line .pk-tabs-trigger[data-state="active"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.pk-tabs-trigger::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: -5px;
+  height: 2px;
+  background: var(--pk-text);
+  opacity: 0;
+  transition: opacity .15s ease;
+}
+.pk-tabs.vertical .pk-tabs-trigger::after {
+  inset-inline: auto;
+  inset-block: 0;
+  right: -.25rem;
+  width: 2px;
+  height: auto;
+}
+.pk-tabs-list.line .pk-tabs-trigger[data-state="active"]::after { opacity: 1; }
+
+.pk-tabs-content { flex: 1; font-size: .875rem; }
+
+:root[data-theme="light"] .pk-tabs-trigger[data-state="active"] {
+  background: var(--pk-bg);
+  border-color: transparent;
+}
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] .pk-tabs-trigger[data-state="active"] {
+    background: var(--pk-bg);
+    border-color: transparent;
+  }
+}

data/app/components/phlex_kit/tabs/tabs.rb

@@ -2,12 +2,17 @@ module PhlexKit
   # Tabbed panels. Ported from ruby_ui's RubyUI::Tabs. Compose Tabs(default:) >
   # (TabsList > TabsTrigger(value:)) + TabsContent(value:). phlex-kit--tabs.
   class Tabs < BaseComponent
-    def initialize(default: nil, **attrs)
+    ORIENTATIONS = { horizontal: nil, vertical: "vertical" }.freeze
+
+    def initialize(default: nil, orientation: :horizontal, **attrs)
       @default = default
+      @orientation = orientation.to_sym
       @attrs = attrs
     end
+
     def view_template(&)
-      div(**mix({ class: "pk-tabs", data: { controller: "phlex-kit--tabs", phlex_kit__tabs_active_value: @default } }, @attrs), &)
+      classes = [ "pk-tabs", ORIENTATIONS.fetch(@orientation) ].compact.join(" ")
+      div(**mix({ class: classes, data: { controller: "phlex-kit--tabs", phlex_kit__tabs_active_value: @default } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/tabs/tabs_list.rb

@@ -1,6 +1,15 @@
 module PhlexKit
   class TabsList < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
-    def view_template(&) = div(**mix({ class: "pk-tabs-list", role: "tablist" }, @attrs), &)
+    VARIANTS = { default: nil, line: "line" }.freeze
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      classes = [ "pk-tabs-list", VARIANTS.fetch(@variant) ].compact.join(" ")
+      div(**mix({ class: classes, role: "tablist" }, @attrs), &)
+    end
   end
 end

data/app/components/phlex_kit/textarea/textarea.css

@@ -1,27 +1,47 @@
-/* Co-located with textarea.rb — UI::Textarea. Same vanilla treatment as
-   .pk-input (input.css): ruby_ui's geometry (rounded-md / px-3 / text-sm /
-   shadow / ring-on-focus), our palette tokens, height left to the `rows`
-   attribute exactly as ruby_ui does. Theme tokens come from the global
-   stylesheet. */
+/* Co-located with textarea.rb — PhlexKit::Textarea. Same nova treatment as
+   .pk-input (input.css): rounded-lg, translucent dark fill / transparent
+   light, ring focus, invalid + disabled states, text-base on small screens
+   (iOS zoom guard) dropping to text-sm from md. Height stays with `rows`. */
 .pk-textarea {
   width: 100%;
-  border-radius: calc(var(--pk-radius) - 2px);
+  border-radius: var(--pk-radius);
   border: 1px solid var(--pk-input);
-  background: var(--pk-bg);
+  background: color-mix(in oklab, var(--pk-input) 30%, transparent);
   color: var(--pk-text);
-  padding: .5rem .75rem;
+  padding: .5rem .625rem;
   font: inherit;
-  font-size: .875rem;
-    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
+  font-size: 1rem;
+  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
+}
+@media (min-width: 768px) {
+  .pk-textarea { font-size: .875rem; }
 }
 .pk-textarea::placeholder { color: var(--pk-muted); }
 .pk-textarea:focus-visible {
   outline: none;
-  border-color: var(--pk-brand);
+  border-color: var(--pk-ring);
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
-.pk-textarea:disabled { cursor: not-allowed; opacity: .5; }
+.pk-textarea:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+  background: color-mix(in oklab, var(--pk-input) 80%, transparent);
+}
 .pk-textarea[aria-invalid="true"] {
+  border-color: color-mix(in oklab, var(--pk-red) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 40%, transparent);
+}
+:root[data-theme="light"] .pk-textarea { background: transparent; }
+:root[data-theme="light"] .pk-textarea:disabled { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+:root[data-theme="light"] .pk-textarea[aria-invalid="true"] {
   border-color: var(--pk-red);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 30%, transparent);
+  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-textarea { background: transparent; }
+  :root[data-theme="system"] .pk-textarea:disabled { background: color-mix(in oklab, var(--pk-input) 50%, transparent); }
+  :root[data-theme="system"] .pk-textarea[aria-invalid="true"] {
+    border-color: var(--pk-red);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 20%, transparent);
+  }
 }

data/app/components/phlex_kit/toast/toast.css

@@ -40,7 +40,7 @@
   width: 356px;
   max-width: 100%;
   border: 1px solid var(--pk-border);
-  border-radius: var(--pk-radius);
+  border-radius: 1rem;
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: 1rem;

data/app/components/phlex_kit/toggle/toggle.css

@@ -1,16 +1,31 @@
-/* Co-located with toggle.rb. Theme tokens from the global stylesheet. */
+/* Co-located with toggle.rb. Matched to nova: h-8/h-7/h-9 sizes with min-w,
+   rounded-lg (sm capped), muted hover + on-state fills, gap-1, data-icon
+   insets, svg-4 (3.5 at sm). Theme tokens from the global stylesheet. */
 .pk-contents { display: contents; }
 .pk-toggle {
-  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
-  height: 2.25rem; min-width: 2.25rem; padding-inline: .5rem;
-  border-radius: calc(var(--pk-radius) - 2px); border: 1px solid transparent; background: transparent;
+  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
+  height: 2rem; min-width: 2rem; padding-inline: .625rem;
+  border-radius: var(--pk-radius); border: 1px solid transparent; background: transparent;
   font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--pk-text);
   cursor: pointer; outline: none; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
 }
-.pk-toggle:hover { background: var(--pk-accent); color: var(--pk-muted); }
+.pk-toggle:hover { background: var(--pk-surface-2); color: var(--pk-text); }
 .pk-toggle:disabled { pointer-events: none; opacity: .5; }
-.pk-toggle[data-state="on"] { background: var(--pk-surface-2); color: var(--pk-text); }
-.pk-toggle.outline { border-color: var(--pk-border); }
-.pk-toggle.sm { height: 2rem; min-width: 2rem; padding-inline: .375rem; }
-.pk-toggle.lg { height: 2.5rem; min-width: 2.5rem; padding-inline: .625rem; }
-.pk-toggle svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; }
+.pk-toggle[data-state="on"], .pk-toggle[aria-pressed="true"] { background: var(--pk-surface-2); color: var(--pk-text); }
+.pk-toggle:focus-visible {
+  border-color: var(--pk-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-toggle.outline { border-color: var(--pk-input); }
+.pk-toggle.sm {
+  height: 1.75rem; min-width: 1.75rem; font-size: .8rem;
+  border-radius: min(calc(var(--pk-radius) - 2px), 12px);
+}
+.pk-toggle.lg { height: 2.25rem; min-width: 2.25rem; }
+.pk-toggle svg { pointer-events: none; flex-shrink: 0; }
+.pk-toggle svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+.pk-toggle.sm svg:not([class*="size-"]) { width: .875rem; height: .875rem; }
+.pk-toggle:has(> [data-icon="inline-start"]) { padding-left: .5rem; }
+.pk-toggle:has(> [data-icon="inline-end"]) { padding-right: .5rem; }
+.pk-toggle.sm:has(> [data-icon="inline-start"]) { padding-left: .375rem; }
+.pk-toggle.sm:has(> [data-icon="inline-end"]) { padding-right: .375rem; }

data/app/components/phlex_kit/toggle_group/toggle_group.css

@@ -1,10 +1,11 @@
 /* Co-located with toggle_group.rb. Theme tokens from the global stylesheet. */
-.pk-toggle-group { display: inline-flex; width: fit-content; align-items: center; border-radius: calc(var(--pk-radius) - 2px); }
+.pk-toggle-group { display: inline-flex; width: fit-content; align-items: center; border-radius: var(--pk-radius); }
 .pk-toggle-group.vertical { flex-direction: column; align-items: stretch; }
 .pk-toggle-group.spaced { gap: .25rem; }
-/* Joined (default, unspaced): square the inner corners. */
+/* Joined (default, unspaced): square the inner corners, tighten padding. */
+.pk-toggle-group:not(.spaced) .pk-toggle-group-item { padding-inline: .5rem; }
 .pk-toggle-group:not(.spaced) .pk-toggle-group-item { border-radius: 0; }
-.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:first-of-type { border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
-.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:last-of-type { border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
-.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:first-of-type { border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
-.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:last-of-type { border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem; }
+.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:first-of-type { border-top-left-radius: var(--pk-radius); border-bottom-left-radius: var(--pk-radius); }
+.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:last-of-type { border-top-right-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:first-of-type { border-top-left-radius: var(--pk-radius); border-top-right-radius: var(--pk-radius); }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:last-of-type { border-bottom-left-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }

data/app/components/phlex_kit/tooltip/tooltip.css

@@ -1,7 +1,8 @@
 /* Co-located with tooltip.rb — UI::Tooltip (+ Trigger / Content). CSS-only:
-   the bubble is absolutely positioned above the trigger and revealed on the
-   wrapper's :hover / :focus-within (no JS, no @floating-ui). Theme tokens come
-   from the global stylesheet. */
+   the bubble is absolutely positioned and revealed on the wrapper's :hover /
+   :focus-within (no JS, no @floating-ui). Matched to nova: INVERTED surface
+   (foreground bg, background text) with a rotated-square arrow, rounded-md,
+   px-3 py-1.5 text-xs, gap for inline kbd chips (kbd.css tints them). */
 .pk-tooltip { position: relative; display: inline-flex; }
 .pk-tooltip-trigger { display: inline-flex; }
 .pk-tooltip-content {
@@ -10,19 +11,45 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  gap: .375rem;
   width: max-content;
-  max-width: min(16rem, calc(100vw - 2rem));
-  padding: .35rem .6rem;
+  max-width: min(20rem, calc(100vw - 2rem));
+  padding: .375rem .75rem;
   border-radius: calc(var(--pk-radius) - 2px);
-  border: 1px solid var(--pk-border);
-  background: var(--pk-surface-2);
-  color: var(--pk-text);
-  font-size: .8rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+  background: var(--pk-text);
+  color: var(--pk-bg);
+  font-size: .75rem;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity .12s ease;
 }
+.pk-tooltip-content:has(kbd) { padding-right: .375rem; }
+.pk-tooltip-content::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  width: .625rem;
+  height: .625rem;
+  border-radius: 2px;
+  background: inherit;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg);
+}
+.pk-tooltip-content.bottom { bottom: auto; top: calc(100% + 6px); }
+.pk-tooltip-content.bottom::after { top: 0; transform: translate(-50%, calc(-50% + 2px)) rotate(45deg); }
+.pk-tooltip-content.left {
+  bottom: auto; left: auto; right: calc(100% + 6px); top: 50%;
+  transform: translateY(-50%);
+}
+.pk-tooltip-content.left::after { top: 50%; left: 100%; transform: translate(calc(-50% - 2px), -50%) rotate(45deg); }
+.pk-tooltip-content.right {
+  bottom: auto; right: auto; left: calc(100% + 6px); top: 50%;
+  transform: translateY(-50%);
+}
+.pk-tooltip-content.right::after { top: 50%; left: 0; transform: translate(calc(-50% + 2px), -50%) rotate(45deg); }
 .pk-tooltip:hover .pk-tooltip-content,
 .pk-tooltip:focus-within .pk-tooltip-content { opacity: 1; visibility: visible; }

data/app/components/phlex_kit/tooltip/tooltip_content.rb

@@ -1,12 +1,17 @@
 module PhlexKit
-  # The tooltip bubble, revealed on hover/focus of its PhlexKit::Tooltip. See tooltip.rb.
+  # The tooltip bubble. `side:` picks the edge it opens from (:top default,
+  # :bottom/:left/:right — shadcn's side prop). See tooltip.rb.
   class TooltipContent < BaseComponent
-    def initialize(**attrs)
+    SIDES = { top: nil, bottom: "bottom", left: "left", right: "right" }.freeze
+
+    def initialize(side: :top, **attrs)
+      @side = side.to_sym
       @attrs = attrs
     end
 
-    def view_template(&block)
-      div(**mix({ class: "pk-tooltip-content", role: "tooltip" }, @attrs), &block)
+    def view_template(&)
+      classes = [ "pk-tooltip-content", SIDES.fetch(@side) ].compact.join(" ")
+      div(**mix({ class: classes, role: "tooltip" }, @attrs), &)
     end
   end
 end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end