phlex_kit 0.2.1 → 0.2.2

data/app/components/phlex_kit/select/select_item.rb

@@ -36,17 +36,7 @@ module PhlexKit
     private
 
     def check_icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-select-item-check",
-        "aria-hidden": "true"
-      ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+      render Icon.new(:check, size: nil, class: "pk-select-item-check")
     end
   end
 end

data/app/components/phlex_kit/select/select_trigger.rb

@@ -23,20 +23,7 @@ module PhlexKit
     private
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        class: "pk-select-trigger-icon",
-        "aria-hidden": "true"
-      ) do |s|
-        s.path(d: "m7 15 5 5 5-5")
-        s.path(d: "m7 9 5-5 5 5")
-      end
+      render Icon.new(:chevrons_up_down, size: nil, class: "pk-select-trigger-icon")
     end
   end
 end

data/app/components/phlex_kit/sheet/sheet.css

@@ -1,6 +1,6 @@
 /* Co-located with sheet.rb. Theme tokens from the global stylesheet. */
 .pk-sheet-trigger { display: inline-block; }
-.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
+.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); }
 .pk-sheet-content {
   position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
   background: var(--pk-surface); color: var(--pk-text); padding: 1.5rem;

data/app/components/phlex_kit/sheet/sheet_content.rb

@@ -12,9 +12,7 @@ module PhlexKit
           div(**mix({ class: ["pk-sheet-content", SIDES.fetch(@side)].join(" ") }, @attrs)) do
             block&.call
             button(type: "button", class: "pk-overlay-close", data: { action: "click->phlex-kit--sheet-content#close" }) do
-              svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
-          s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z")
-        end
+              render Icon.new(:x, size: 15)
               span(class: "pk-sr-only") { "Close" }
             end
           end

data/app/components/phlex_kit/sidebar/sidebar.css

@@ -1,23 +1,59 @@
 /* Co-located with sidebar.rb — UI::Sidebar (+ Wrapper / Header / Content / Footer
-   / Group / Menu / MenuItem / MenuButton / Inset). ruby_ui's structure at
-   collapsible:none, Tailwind → vanilla CSS on the palette tokens. The collapsible/
-   offcanvas/icon modes (+ their Stimulus/cookie/Sheet) are deliberately not ported.
-   Theme tokens come from the global stylesheet. */
+   / Group / GroupLabel / GroupContent / GroupAction / Menu / MenuItem / MenuButton
+   / MenuAction / MenuBadge / MenuSkeleton / MenuSub / MenuSubItem / MenuSubButton
+   / Separator / Input / Inset). ruby_ui's structure at collapsible:none, extended
+   to shadcn/ui's static part set; Tailwind → vanilla CSS on the palette tokens.
+   The collapsible/offcanvas/icon modes (+ their trigger/rail/Stimulus/cookie/
+   Sheet) are deliberately not ported.
+   Theme tokens come from the global stylesheet. The sidebar reads the shared
+   palette by default; --pk-sidebar[-text|-accent|-border|-primary|-primary-ink]
+   are optional per-role overrides (shadcn sidebar-* parity), undefined by
+   default. shadcn's sidebar-ring / sidebar-accent-foreground have no consumption
+   site here and stay unmapped. */
 .pk-sidebar-wrapper { display: flex; min-height: 100dvh; width: 100%; }
 
 .pk-sidebar {
   display: flex;
   flex-direction: column;
-  width: 14rem;
+  width: 16rem;
   flex-shrink: 0;
-  background: var(--pk-surface);
-  border-right: 1px solid var(--pk-border);
+  background: var(--pk-sidebar, var(--pk-surface));
+  border-right: 1px solid var(--pk-sidebar-border, var(--pk-border));
 }
 
 .pk-sidebar-header { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .75rem .25rem; }
 .pk-sidebar-content { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-height: 0; overflow: auto; padding: .5rem .75rem; }
 .pk-sidebar-footer { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; }
-.pk-sidebar-group { display: flex; flex-direction: column; gap: .125rem; }
+.pk-sidebar-group { position: relative; display: flex; flex-direction: column; gap: .125rem; }
+.pk-sidebar-group-label {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 2rem;
+  padding: 0 .5rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  font-size: .75rem;
+  font-weight: 500;
+  color: color-mix(in oklab, var(--pk-sidebar-text, var(--pk-text)) 70%, transparent);
+}
+.pk-sidebar-group-content { width: 100%; font-size: .875rem; }
+.pk-sidebar-group-action {
+  position: absolute;
+  top: .375rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  cursor: pointer;
+}
+.pk-sidebar-group-action:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); }
 
 .pk-sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; width: 100%; }
 .pk-sidebar-menu-item { position: relative; }
@@ -30,13 +66,95 @@
   border: 0;
   border-radius: 8px;
   background: transparent;
-  color: var(--pk-text);
+  color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;
   font-size: .9rem;
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
-.pk-sidebar-menu-button:hover { background: var(--pk-accent); text-decoration: none; }
-.pk-sidebar-menu-button[data-active="true"] { background: var(--pk-brand); color: var(--pk-brand-ink); font-weight: 600; }
+.pk-sidebar-menu-button:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); text-decoration: none; }
+/* Active item: shadcn's stock "Default" menu look (accent tint). The create
+   page's "Solid" mode is the .menu-solid modifier on the sidebar root. */
+.pk-sidebar-menu-button[data-active="true"] { background: var(--pk-sidebar-accent, var(--pk-accent)); color: var(--pk-sidebar-text, var(--pk-text)); font-weight: 500; }
+.pk-sidebar.menu-solid .pk-sidebar-menu-button[data-active="true"] { background: var(--pk-sidebar-primary, var(--pk-brand)); color: var(--pk-sidebar-primary-ink, var(--pk-brand-ink)); font-weight: 600; }
+
+/* Anchored to the top of the item (the button row) — the item may also
+   contain a submenu, so 50%-of-item would drift. */
+.pk-sidebar-menu-action {
+  position: absolute;
+  top: .5rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  width: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  cursor: pointer;
+}
+.pk-sidebar-menu-action:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); }
+.pk-sidebar-menu-badge {
+  pointer-events: none;
+  user-select: none;
+  position: absolute;
+  top: .5rem;
+  right: .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 .25rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  font-size: .75rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--pk-sidebar-text, var(--pk-text));
+}
+.pk-sidebar-menu-skeleton { display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .5rem; border-radius: calc(var(--pk-radius) - 2px); }
+.pk-sidebar-menu-skeleton .pk-skeleton.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
+.pk-sidebar-menu-skeleton .pk-skeleton.text { height: 1rem; flex: 1; max-width: var(--pk-skeleton-width, 70%); }
+
+.pk-sidebar-menu-sub {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  min-width: 0;
+  margin: 0 .875rem;
+  padding: .125rem .625rem;
+  border-left: 1px solid var(--pk-sidebar-border, var(--pk-border));
+}
+.pk-sidebar-menu-sub-item { position: relative; }
+.pk-sidebar-menu-sub-button {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  height: 1.75rem;
+  min-width: 0;
+  width: 100%;
+  padding: 0 .5rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  color: var(--pk-sidebar-text, var(--pk-text));
+  font: inherit;
+  font-size: .875rem;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.pk-sidebar-menu-sub-button:hover { background: var(--pk-sidebar-accent, var(--pk-accent)); text-decoration: none; }
+/* shadcn highlights active sub-items with the accent role, not primary. */
+.pk-sidebar-menu-sub-button[data-active="true"] { background: var(--pk-sidebar-accent, var(--pk-accent)); font-weight: 600; }
+
+.pk-separator.pk-sidebar-separator { width: auto; margin: 0 .5rem; background: var(--pk-sidebar-border, var(--pk-border)); }
+.pk-input.pk-sidebar-input { height: 2rem; width: 100%; background: var(--pk-bg); box-shadow: none; }
 
 .pk-sidebar-inset { flex: 1; min-width: 0; }

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

@@ -3,17 +3,30 @@ module PhlexKit
   # (the NonCollapsibleSidebar path): a static flex-column rail. Deliberately
   # WITHOUT ruby_ui's collapsible/offcanvas Stimulus controller + cookie state +
   # mobile Sheet (the admin sidebar is static) — those can be added later if a
-  # collapsible chrome is wanted. Compose with SidebarWrapper (the page root) +
-  # SidebarHeader / SidebarContent / SidebarMenu (+ Item / Button) / SidebarFooter,
-  # alongside a SidebarInset for the main content. Tailwind → vanilla `.pk-sidebar*`
-  # (sidebar.css).
+  # collapsible chrome is wanted. The static part set matches shadcn/ui's Sidebar:
+  # compose with SidebarWrapper (the page root) + SidebarHeader / SidebarContent /
+  # SidebarGroup (+ Label / Content / Action) / SidebarMenu (+ Item / Button /
+  # Action / Badge / Skeleton / Sub / SubItem / SubButton) / SidebarSeparator /
+  # SidebarInput / SidebarFooter, alongside a SidebarInset for the main content.
+  # Tailwind → vanilla `.pk-sidebar*` (sidebar.css).
   class Sidebar < BaseComponent
-    def initialize(**attrs)
+    # Active-item treatment (ui.shadcn.com/create's "Menu" option): :default is
+    # shadcn's stock accent tint; :solid fills with the primary/brand role.
+    MENUS = { default: nil, solid: "menu-solid" }.freeze
+
+    def initialize(menu: :default, **attrs)
+      @menu = menu.to_sym
       @attrs = attrs
     end
 
     def view_template(&block)
-      div(**mix({ class: "pk-sidebar" }, @attrs), &block)
+      div(**mix({ class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-sidebar", MENUS.fetch(@menu) ].compact.join(" ")
     end
   end
 end

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

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Action button pinned to the top-right of a SidebarGroup (the group is the
+  # positioning context), ported from shadcn/ui's SidebarGroupAction.
+  # See sidebar.rb.
+  class SidebarGroupAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ class: "pk-sidebar-group-action", type: "button" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Content container within a SidebarGroup, ported from shadcn/ui's
+  # SidebarGroupContent. See sidebar.rb.
+  class SidebarGroupContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-group-content" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Heading for a SidebarGroup, ported from shadcn/ui's SidebarGroupLabel.
+  # See sidebar.rb.
+  class SidebarGroupLabel < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-sidebar-group-label" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Search/filter input for the sidebar, ported from shadcn/ui's SidebarInput:
+  # the kit Input on the page background, sized to the sidebar's control height.
+  # See sidebar.rb.
+  class SidebarInput < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Input.new(**mix({ class: "pk-sidebar-input" }, @attrs))
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Secondary action pinned to the right edge of a SidebarMenuItem (the item is
+  # position:relative), ported from shadcn/ui's SidebarMenuAction. See sidebar.rb.
+  class SidebarMenuAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ class: "pk-sidebar-menu-action", type: "button" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Non-interactive count/status pinned to the right edge of a SidebarMenuItem,
+  # ported from shadcn/ui's SidebarMenuBadge. See sidebar.rb.
+  class SidebarMenuBadge < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-sidebar-menu-badge" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Loading placeholder for a menu item, ported from shadcn/ui's
+  # SidebarMenuSkeleton: an optional icon shimmer plus a text shimmer whose
+  # width randomises 50–90% per render (their --skeleton-width trick).
+  # `show_icon:` mirrors shadcn's showIcon. See sidebar.rb.
+  class SidebarMenuSkeleton < BaseComponent
+    def initialize(show_icon: false, **attrs)
+      @show_icon = show_icon
+      @attrs = attrs
+    end
+
+    def view_template
+      div(**mix({ class: "pk-sidebar-menu-skeleton" }, @attrs)) do
+        render Skeleton.new(class: "icon") if @show_icon
+        render Skeleton.new(class: "text", style: "--pk-skeleton-width: #{rand(50..90)}%;")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Nested submenu list under a SidebarMenuItem, ported from shadcn/ui's
+  # SidebarMenuSub. See sidebar.rb.
+  class SidebarMenuSub < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      ul(**mix({ class: "pk-sidebar-menu-sub" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+module PhlexKit
+  # The interactive element of a SidebarMenuSubItem, ported from shadcn/ui's
+  # SidebarMenuSubButton. `as:` is :a (their default — pass `href:`) or :button;
+  # `active: true` highlights with the accent role (shadcn subs use accent, not
+  # primary). Kwarg rather than attr for the same mix-merge reason as
+  # SidebarMenuButton. See sidebar.rb.
+  class SidebarMenuSubButton < BaseComponent
+    def initialize(as: :a, active: false, **attrs)
+      @as = as
+      @active = active
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      send(@as, **mix({ class: "pk-sidebar-menu-sub-button", "data-active": (@active ? "true" : "false") }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # An item within a SidebarMenuSub, ported from shadcn/ui's SidebarMenuSubItem.
+  # See sidebar.rb.
+  class SidebarMenuSubItem < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      li(**mix({ class: "pk-sidebar-menu-sub-item" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+module PhlexKit
+  # Divider between sidebar sections, ported from shadcn/ui's SidebarSeparator:
+  # the kit Separator inset to the sidebar's padding and tinted with the
+  # sidebar border role. See sidebar.rb.
+  class SidebarSeparator < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      render Separator.new(**mix({ class: "pk-sidebar-separator" }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/spinner/spinner.rb

@@ -10,18 +10,13 @@ module PhlexKit
     end
 
     def view_template
-      svg(**mix({
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
+      # A visible loader, not decoration: role=status + label, aria-hidden off.
+      render Icon.new(:loader, size: nil, **mix({
         class: [ "pk-spinner", SIZES.fetch(@size) ].compact.join(" "),
         role: "status",
-        aria: { label: "Loading" }
-      }, @attrs)) { |s| s.path(d: "M21 12a9 9 0 1 1-6.219-8.56") }
+        aria: { label: "Loading" },
+        "aria-hidden": false
+      }, @attrs))
     end
   end
 end

data/app/components/phlex_kit/toast/toast_close.rb

@@ -13,21 +13,7 @@ module PhlexKit
         aria: { label: "Close toast" },
         data: { slot: "close", action: "click->phlex-kit--toast#dismiss" }
       }, @attrs)) do
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "14",
-          height: "14",
-          viewbox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          "aria-hidden": "true"
-        ) do |s|
-          s.path(d: "M18 6 6 18")
-          s.path(d: "m6 6 12 12")
-        end
+        render Icon.new(:x, size: 14)
         span(class: "pk-sr-only") { "Close" }
       end
     end

data/app/components/phlex_kit/toast/toast_icon.rb

@@ -9,55 +9,31 @@ module PhlexKit
       @attrs = attrs
     end
 
+    # Status → canonical glyph. Error is circle_x (octagon-x has no equivalent
+    # outside Lucide, so the cross-library semantic name wins).
+    GLYPHS = {
+      success: :circle_check,
+      error: :circle_x,
+      warning: :triangle_alert,
+      info: :info,
+      loading: :loader
+    }.freeze
+
     def view_template
       return unless renderable?
       span(**mix({ class: "pk-toast-icon", data: { slot: "icon" } }, @attrs)) do
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "16",
-          height: "16",
-          viewbox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round",
-          class: svg_classes,
-          "aria-hidden": "true"
-        ) { |s| paths(s) }
+        render Icon.new(GLYPHS.fetch(@variant), size: 16, class: svg_classes)
       end
     end
 
     private
 
     def renderable?
-      %i[success error warning info loading].include?(@variant)
+      GLYPHS.key?(@variant)
     end
 
     def svg_classes
       [ "pk-toast-icon-svg", ("spin" if @variant == :loading) ].compact.join(" ")
     end
-
-    def paths(s)
-      case @variant
-      when :success
-        s.circle(cx: "12", cy: "12", r: "10")
-        s.path(d: "m9 12 2 2 4-4")
-      when :error
-        s.path(d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z")
-        s.path(d: "m15 9-6 6")
-        s.path(d: "m9 9 6 6")
-      when :warning
-        s.path(d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3")
-        s.path(d: "M12 9v4")
-        s.path(d: "M12 17h.01")
-      when :info
-        s.circle(cx: "12", cy: "12", r: "10")
-        s.path(d: "M12 16v-4")
-        s.path(d: "M12 8h.01")
-      when :loading
-        s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
-      end
-    end
   end
 end

data/app/components/phlex_kit/typography/heading.rb

@@ -32,7 +32,7 @@ module PhlexKit
     end
 
     def classes
-      "pk-heading ui-heading-#{size_token}"
+      "pk-heading pk-heading-#{size_token}"
     end
   end
 end

data/app/components/phlex_kit/typography/typography.css

@@ -4,7 +4,7 @@
    tokens come from the global stylesheet. */
 
 /* Heading */
-.pk-heading { margin: 0 0 .6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
+.pk-heading { margin: 0 0 .6rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
 .pk-heading-1 { font-size: .75rem; }
 .pk-heading-2 { font-size: .875rem; }
 .pk-heading-3 { font-size: 1rem; }
@@ -34,7 +34,7 @@
 
 /* Inline code */
 .pk-inline-code {
-  font-family: ui-monospace, monospace;
+  font-family: var(--pk-font-mono, ui-monospace, monospace);
   font-size: .875rem;
   background: var(--pk-bg);
   border: 1px solid var(--pk-border);
@@ -47,4 +47,8 @@
 .pk-inline-link:hover { text-decoration: underline; }
 
 /* Blockquote */
-.pk-blockquote { margin: 1rem 0; border-left: 2px solid var(--pk-border); padding-left: 1rem; font-style: italic; }
+.pk-blockquote { margin: 1.5rem 0; border-left: 2px solid var(--pk-border); padding-left: 1.5rem; font-style: italic; }
+
+/* Prose list (shadcn typography's list style). */
+.pk-list { margin: 1.5rem 0; padding-left: 1.5rem; list-style: disc; }
+.pk-list > li { margin-top: .5rem; }

data/app/javascript/phlex_kit/controllers/accordion_controller.js

@@ -18,7 +18,23 @@ export default class extends Controller {
     this.animationDurationValue = d
   }
 
-  toggle() { this.openValue = !this.openValue }
+  toggle() {
+    const next = !this.openValue
+    if (next) this.closeSiblings()
+    this.openValue = next
+  }
+
+  // In a type="single" accordion (shadcn's default), opening one item closes
+  // the rest.
+  closeSiblings() {
+    const root = this.element.closest(".pk-accordion")
+    if (!root || root.dataset.type !== "single") return
+    root.querySelectorAll('[data-controller~="phlex-kit--accordion"]').forEach((el) => {
+      if (el === this.element) return
+      const ctrl = this.application.getControllerForElementAndIdentifier(el, "phlex-kit--accordion")
+      if (ctrl && ctrl.openValue) ctrl.openValue = false
+    })
+  }
   openValueChanged(isOpen) { isOpen ? this.open() : this.close() }
 
   open() {

data/app/javascript/phlex_kit/controllers/index.js

@@ -34,6 +34,7 @@ import MenubarController from "phlex_kit/controllers/menubar_controller"
 import MessageScrollerController from "phlex_kit/controllers/message_scroller_controller"
 import PopoverController from "phlex_kit/controllers/popover_controller"
 import ResizableController from "phlex_kit/controllers/resizable_controller"
+import ScrollFadeController from "phlex_kit/controllers/scroll_fade_controller"
 import SelectController from "phlex_kit/controllers/select_controller"
 import SelectItemController from "phlex_kit/controllers/select_item_controller"
 import SheetController from "phlex_kit/controllers/sheet_controller"
@@ -73,6 +74,7 @@ export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--message-scroller", MessageScrollerController)
   application.register("phlex-kit--popover", PopoverController)
   application.register("phlex-kit--resizable", ResizableController)
+  application.register("phlex-kit--scroll-fade", ScrollFadeController)
   application.register("phlex-kit--select", SelectController)
   application.register("phlex-kit--select-item", SelectItemController)
   application.register("phlex-kit--sheet", SheetController)