phlex_kit 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14f1ab06594f344904b8fbeecd23bca4c08005b35faf16325aca36edf6079c2b
-  data.tar.gz: 9cbdd5092ce76896536a59de10dc9e23734ee68cce9f85acf5e88b11ebf3d092
+  metadata.gz: 0f6988a4f8e3f47462f9f83824ed6542cafded9d656adb10340e7eb618156063
+  data.tar.gz: ca293b01074cfa84962df3c80683e3df5ae36cf5a919b1e8c0bcd1861948b52c
 SHA512:
-  metadata.gz: 725e6b9a212702970cfedac729769373d378015409db9c56aee565b03c6d30dca6283567df66547e56b3d0271083e324ec73a97d2daa7baf74d93b9c2101119f
-  data.tar.gz: 4a3edb915f2082b66b18d96f89cc990aebedf6241a8a2e28eacd60329e9b563a080fa15789fee0b8b7e040a274baecd2c28cc000b38b15721dbbaf0b8a2b8a62
+  metadata.gz: fd26ed3b6aef6bf015c7fbdf574516a68e8eb10fe1cfe1356a4292420d01917977428d2b35a301b65e6a8ff19c73daf5ac9ffdfb9af6abae6f96afd4818d7c81
+  data.tar.gz: 6d6c3d42730c2ce500a6f8c8e49afab8e11ec192f87bf9d87434761d334b40e1a762cc157ad7b38b2914edbffeae9fea501235f1cdc0ec6937c88a8f843399fa

data/README.md

@@ -120,9 +120,51 @@ The full token surface: `--pk-bg`, `--pk-surface`, `--pk-surface-2`,
 `--pk-accent` (hover fills), `--pk-border`, `--pk-input` (control borders),
 `--pk-ring` (focus rings), `--pk-text`, `--pk-text-2`, `--pk-muted`,
 `--pk-brand`, `--pk-brand-ink`, `--pk-green`, `--pk-amber`, `--pk-red`,
-`--pk-chart-1..5`, `--pk-radius`. Want a fully custom palette? Drop the
+`--pk-chart-1..5`, `--pk-radius`, plus `--pk-font-sans` / `--pk-font-mono`
+(system stacks by default — override them after an @font-face to adopt Geist
+like shadcn, as the docs site does). Want a fully custom palette? Drop the
 `_tokens.css` import and define them all yourself.
 
+Prefer a ready-made palette? The gem ships theme files under
+`app/assets/stylesheets/phlex_kit/themes/` (`neutral`, `zinc`, `claude`) —
+link one after the manifest and the cascade re-themes everything:
+
+```ruby
+stylesheet_link_tag "phlex_kit/phlex_kit"
+stylesheet_link_tag "phlex_kit/themes/neutral"
+```
+
+The three knobs from ui.shadcn.com/create map directly: **Radius** →
+`--pk-radius`; **Icon Library** → `PhlexKit.config.icon_library` (see Icons
+below); **Menu** → `PhlexKit::Sidebar.new(menu: :default | :solid)`.
+
+## Icons
+
+Every built-in glyph renders through `PhlexKit::Icon`, which draws from a
+vendored icon library — pick one kit-wide in an initializer:
+
+```ruby
+PhlexKit.configure do |c|
+  c.icon_library = :tabler   # :lucide (default), :tabler, :phosphor, :remix
+end
+```
+
+Use it directly with canonical semantic names (the per-library vocabulary is
+pre-resolved — `:chevron_down` is Phosphor's `caret-down`, Remix's
+`arrow-down-s-line`, and so on):
+
+```ruby
+render PhlexKit::Icon.new(:calendar)                     # 16px, configured library
+render PhlexKit::Icon.new(:search, size: 24)
+render PhlexKit::Icon.new(:check, library: :phosphor)    # per-instance override
+```
+
+`PhlexKit::Icons.names` lists the full catalog (~70 glyphs, all guaranteed to
+resolve in all four libraries); unknown names fail loud. HugeIcons is not
+included — its free set forbids redistributing the artwork inside a gem. Icon
+path data licenses ship in `THIRD_PARTY_LICENSES` (Lucide ISC, Tabler MIT,
+Phosphor MIT, Remix Apache-2.0).
+
 ## Charts
 
 `PhlexKit::Chart` is deliberately a thin wrapper — **no charting library is
@@ -168,10 +210,12 @@ bin/rails g phlex_kit:component button
 This copies `button.rb` + `button.css` into `app/components/phlex_kit/button/`
 and wires its `@import`. Your copy shadows the gem's.
 
-## The gallery
+## The docs site
 
-A dummy Rails app renders every component on one page — useful as living
-documentation and for eyeballing theme changes:
+The dummy Rails app is a full shadcn-style docs site: a sidebar menu with one
+page per component, every use case demoed with a Preview/Code toggle (the code
+shown is extracted from the running example source, so it can never drift).
+A one-page kitchen-sink gallery lives at /gallery:
 
 ```bash
 git clone https://github.com/MatthewKennedy/phlex_kit && cd phlex_kit
@@ -180,6 +224,26 @@ bundle exec puma -p 3999 test/dummy/config.ru
 # open http://127.0.0.1:3999
 ```
 
+By default the docs site renders the shadcn-parity baseline (default tokens,
+lucide icons). Two env vars re-skin the whole site, handy for eyeballing a
+theme or icon set across every component:
+
+```bash
+# Boot with a bundled theme (neutral, zinc, or claude)
+PK_THEME=claude bundle exec puma -p 3999 test/dummy/config.ru
+
+# Boot with a different icon library (lucide is the default; tabler, phosphor, remix)
+PK_ICONS=tabler bundle exec puma -p 3999 test/dummy/config.ru
+
+# Or both
+PK_THEME=zinc PK_ICONS=phosphor bundle exec puma -p 3999 test/dummy/config.ru
+```
+
+`PK_THEME` links the matching file from
+`app/assets/stylesheets/phlex_kit/themes/` after the manifest — the same
+mechanism a host app uses. Light/dark/system switching is in the site's
+header regardless of theme.
+
 ## Components
 
 Everything in ruby_ui (53/53) plus shadcn/ui's own catalog: accordion, alert,
@@ -190,14 +254,25 @@ triggers), command palette, context menu, data table, date picker, dialog,
 drawer, dropdown menu, empty, form + form field, hover card, input, input
 group, input OTP, item, kbd, label, link, masked input, menubar, message,
 message scroller, native select, navigation menu, pagination, popover,
-progress, radio button + radio group, resizable, scroll area, select,
-separator, sheet, shortcut key, sidebar, skeleton, slider, spinner, stars,
+marker, progress, radio button + radio group, resizable, scroll area, select,
+separator, sheet, shortcut key, sidebar, skeleton, slider, spinner,
 switch, table, tabs, textarea, theme toggle, toast (sonner-style), toggle,
 toggle group, tooltip, typography.
 
+Plus two utility classes: `.pk-shimmer` (gradient sweep for loading text) and
+`.pk-scroll-fade` (edge-masked scroll containers, position-aware via the
+`phlex-kit--scroll-fade` controller).
+
 Inventory and porting notes: [ROADMAP.md](ROADMAP.md). Architecture and
 conventions: [docs/](docs/).
 
+## RTL
+
+shadcn's `Direction` is a React context provider; PhlexKit needs none — set
+`dir="rtl"` on `<html>` and browser layout handles the flex/grid flows. Note
+the caveat: popover-style panels anchor with physical `left`/`top` offsets, so
+fully mirrored overlay alignment in RTL may need small host-side overrides.
+
 ## How the asset wiring works
 
 Four engine initializers make the zero-build story hold:

data/THIRD_PARTY_LICENSES

@@ -0,0 +1,104 @@
+Third-party licenses for icon path data vendored under lib/phlex_kit/icons/
+(generated by scripts/generate_icons.rb; the gem's own code is MIT — see
+MIT-LICENSE). HugeIcons is deliberately not included: its free set's usage
+terms forbid editing and redistribution of the artwork.
+
+--------------------------------------------------------------------------------
+Lucide (lib/phlex_kit/icons/lucide.rb)
+Source: https://github.com/lucide-icons/lucide
+License: ISC
+
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part
+of Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+--------------------------------------------------------------------------------
+Tabler Icons (lib/phlex_kit/icons/tabler.rb)
+Source: https://github.com/tabler/tabler-icons
+License: MIT
+
+MIT License
+
+Copyright (c) 2020-2024 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+Phosphor Icons (lib/phlex_kit/icons/phosphor.rb)
+Source: https://github.com/phosphor-icons/core
+License: MIT
+
+MIT License
+
+Copyright (c) 2023 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+Remix Icon (lib/phlex_kit/icons/remix.rb)
+Source: https://github.com/Remix-Design/RemixIcon
+License: Apache License 2.0
+
+Copyright RemixIcon contributors.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use the vendored icon data except in compliance with the License. You may
+obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+
+NOTICE (statement of changes, per Apache-2.0 §4): the vendored data is
+extracted SVG path geometry only, converted to Ruby literals and keyed by
+PhlexKit's canonical glyph names; visual geometry is unmodified.

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

@@ -1,6 +1,69 @@
 /* Kit utilities used by the interactive controllers (Stimulus toggles these). */
 .pk-hidden { display: none !important; }
 
+/* Shimmer — shadcn's shimmer util: a highlight band sweeping across text, for
+   loading / "thinking…" states. Pure CSS, built on currentColor: the text keeps
+   its own color (any color) and the highlight derives from it via relative
+   color syntax, so it brightens automatically in dark mode. Tune per element
+   with inline custom properties:
+     --pk-shimmer-color     highlight (default: brightened currentColor)
+     --pk-shimmer-duration  one sweep (default 2s)
+     --pk-shimmer-spread    band width (default 3ch + 40px)
+     --pk-shimmer-angle     band tilt (default 20deg)
+   Modifiers: .once (single sweep), .reverse. Honors prefers-reduced-motion and
+   falls back to plain text in browsers without relative color support. */
+.pk-shimmer {
+  --pk-shimmer-color: oklch(from currentColor calc(l + .25) c h);
+  --pk-shimmer-duration: 2s;
+  --pk-shimmer-spread: calc(3ch + 40px);
+  --pk-shimmer-angle: 20deg;
+  background-image:
+    linear-gradient(calc(90deg + var(--pk-shimmer-angle)),
+      transparent calc(50% - var(--pk-shimmer-spread) / 2),
+      var(--pk-shimmer-color) 50%,
+      transparent calc(50% + var(--pk-shimmer-spread) / 2)),
+    linear-gradient(currentColor, currentColor);
+  background-size: 250% 100%, auto;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: pk-shimmer var(--pk-shimmer-duration) linear infinite;
+}
+.pk-shimmer.once { animation-iteration-count: 1; animation-fill-mode: forwards; }
+.pk-shimmer.reverse { animation-direction: reverse; }
+[dir="rtl"] .pk-shimmer { animation-direction: reverse; }
+[dir="rtl"] .pk-shimmer.reverse { animation-direction: normal; }
+@keyframes pk-shimmer {
+  from { background-position: 250% 0, 0 0; }
+  to { background-position: -150% 0, 0 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pk-shimmer { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
+}
+@supports not (color: oklch(from white l c h)) {
+  .pk-shimmer { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
+}
+
+/* Scroll fade — shadcn's scroll-fade util: masks the edges of a scrollable
+   container while there is more content in that direction. Pair with the
+   phlex-kit--scroll-fade controller, which toggles data-at-start/data-at-end. */
+.pk-scroll-fade {
+  --pk-scroll-fade-size: 2rem;
+  overflow-y: auto;
+  mask-image: linear-gradient(to bottom,
+    transparent 0, black var(--pk-scroll-fade-size),
+    black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
+}
+.pk-scroll-fade[data-at-start] {
+  mask-image: linear-gradient(to bottom,
+    black calc(100% - var(--pk-scroll-fade-size)), transparent 100%);
+}
+.pk-scroll-fade[data-at-end] {
+  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; }
+
 /* Kit elements size predictably: width includes padding + border, so
    `width: 100%` controls (inputs, triggers, option rows) never overflow their
    container. Scoped to pk-* classes and their subtrees — the host's own box
@@ -22,6 +85,13 @@
    var(--pk-*), so redefining :root after the import re-themes the whole kit
    with no rebuild.
 
+   Optional sidebar overrides (shadcn sidebar-* parity) — deliberately NOT
+   defined here: --pk-sidebar / -text / -accent / -border / -primary /
+   -primary-ink. sidebar.css consumes them via token→token fallbacks
+   (e.g. var(--pk-sidebar-primary, var(--pk-brand))), so unset they fall back
+   to surface/text/accent/border/brand/brand-ink; a theme sets one only when
+   its value differs from the shared token.
+
    Dark is the default; light is opt-in via <html data-theme="light"> (set it
    server-side to avoid a flash). "system" follows the OS via prefers-color-scheme.
    Keep the two light token sets in sync. */
@@ -47,6 +117,8 @@
   --pk-chart-4: #1d4ed8;
   --pk-chart-5: #1e40af;
   --pk-radius: 0.625rem;
+  --pk-font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --pk-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
   color-scheme: dark;
 }
 

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

@@ -50,6 +50,7 @@
 @import url("kbd/kbd.css");
 @import url("label/label.css");
 @import url("link/link.css");
+@import url("marker/marker.css");
 @import url("menubar/menubar.css");
 @import url("message/message.css");
 @import url("message_scroller/message_scroller.css");
@@ -70,7 +71,6 @@
 @import url("skeleton/skeleton.css");
 @import url("slider/slider.css");
 @import url("spinner/spinner.css");
-@import url("stars/stars.css");
 @import url("switch/switch.css");
 @import url("table/table.css");
 @import url("tabs/tabs.css");

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

@@ -0,0 +1,86 @@
+/* PhlexKit theme: Claude — warm ivory/charcoal neutrals + terracotta brand,
+   after the claude.ai palette. Pure token override: load AFTER the
+   phlex_kit.css manifest (stylesheet_link_tag "phlex_kit/themes/claude")
+   and the cascade re-themes every component; no component CSS is touched.
+
+   Same contract as _tokens.css: dark is the default, light is opt-in via
+   <html data-theme="light">, "system" follows the OS. Keep the two light
+   blocks in sync.
+
+   Anthropic's brand faces (Styrene, Tiempos/Copernicus) are licensed and
+   not shipped; --pk-font-serif falls back through Georgia. A host that has
+   the real fonts re-points the token. */
+:root {
+  --pk-bg: #262624;
+  --pk-surface: #30302e;
+  --pk-surface-2: #3a3a37;
+  --pk-accent: #45453f;
+  --pk-border: #faf9f51f;
+  --pk-input: #faf9f52e;
+  --pk-ring: #d97757;
+  --pk-text: #f5f4ee;
+  --pk-text-2: #d9d8d0;
+  --pk-muted: #a3a094;
+  --pk-brand: #d97757;
+  --pk-brand-ink: #ffffff;
+  --pk-green: #22c55e;
+  --pk-amber: #f59e0b;
+  --pk-red: #ff6568;
+  --pk-chart-1: #ecb4a0;
+  --pk-chart-2: #e19477;
+  --pk-chart-3: #d97757;
+  --pk-chart-4: #b85c3e;
+  --pk-chart-5: #8f4630;
+  --pk-radius: 0.75rem;
+  --pk-font-serif: "Copernicus", "Tiempos Text", Georgia, "Times New Roman", serif;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --pk-bg: #faf9f5;
+  --pk-surface: #ffffff;
+  --pk-surface-2: #f0eee6;
+  --pk-accent: #f0eee6;
+  --pk-border: #e5e2d9;
+  --pk-input: #d9d6ca;
+  --pk-ring: #d97757;
+  --pk-text: #1f1e1d;
+  --pk-text-2: #4a4844;
+  --pk-muted: #83817b;
+  --pk-brand: #d97757;
+  --pk-brand-ink: #ffffff;
+  --pk-green: #16a34a;
+  --pk-amber: #d97706;
+  --pk-red: #d13415;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    --pk-bg: #faf9f5;
+    --pk-surface: #ffffff;
+    --pk-surface-2: #f0eee6;
+    --pk-accent: #f0eee6;
+    --pk-border: #e5e2d9;
+    --pk-input: #d9d6ca;
+    --pk-ring: #d97757;
+    --pk-text: #1f1e1d;
+    --pk-text-2: #4a4844;
+    --pk-muted: #83817b;
+    --pk-brand: #d97757;
+    --pk-brand-ink: #ffffff;
+    --pk-green: #16a34a;
+    --pk-amber: #d97706;
+    --pk-red: #d13415;
+    color-scheme: light;
+  }
+}
+
+/* The one non-token rule: Claude's signature serif display over a sans body.
+   Serifs carry less inherent weight than the sans they replace, so headings
+   ease off the tracking the sans sizes wanted. */
+.pk-heading {
+  font-family: var(--pk-font-serif);
+  font-weight: 500;
+  letter-spacing: 0;
+}

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

@@ -0,0 +1,95 @@
+/* PhlexKit theme: Neutral — translated from a ui.shadcn.com/create export
+   (shadcn's stock neutral palette: pure grayscale, zero chroma throughout).
+   Pure token override: load AFTER the phlex_kit.css manifest and the
+   cascade re-themes every component.
+
+   Translation notes (the recipe for any shadcn/create export):
+   - background → bg; card/popover → surface; secondary/muted/accent →
+     surface-2/accent; foreground → text; secondary-foreground → text-2;
+     muted-foreground → muted; primary/primary-foreground → brand/brand-ink;
+     destructive → red; border/input/ring/chart-1..5/radius map 1:1.
+   - shadcn is light-default with a .dark class; PhlexKit themes are
+     dark-default with data-theme="light" opt-in — blocks swapped.
+   - sidebar-* maps onto the kit's optional --pk-sidebar-* overrides, set
+     only where the export differs from the shared tokens: here that's the
+     dark sidebar-primary (a distinct blue) + its ink. Like the shadcn create
+     page, the blue only shows on active items under Sidebar's menu: :solid —
+     the :default menu highlights with the accent role. shadcn/create exports
+     no green/amber — those fall through to _tokens.css defaults.
+   - dark text-2 has no shadcn source (every dark *-foreground is 0.985);
+     chart-1's 0.87 step (neutral-300) is used, matching the kit's own dark
+     text-2 weight. */
+:root {
+  --pk-bg: oklch(0.145 0 0);
+  --pk-surface: oklch(0.205 0 0);
+  --pk-surface-2: oklch(0.269 0 0);
+  --pk-accent: oklch(0.269 0 0);
+  --pk-border: oklch(1 0 0 / 10%);
+  --pk-input: oklch(1 0 0 / 15%);
+  --pk-ring: oklch(0.556 0 0);
+  --pk-text: oklch(0.985 0 0);
+  --pk-text-2: oklch(0.87 0 0);
+  --pk-muted: oklch(0.708 0 0);
+  --pk-brand: oklch(0.922 0 0);
+  --pk-brand-ink: oklch(0.205 0 0);
+  --pk-red: oklch(0.704 0.191 22.216);
+  --pk-chart-1: oklch(0.87 0 0);
+  --pk-chart-2: oklch(0.556 0 0);
+  --pk-chart-3: oklch(0.439 0 0);
+  --pk-chart-4: oklch(0.371 0 0);
+  --pk-chart-5: oklch(0.269 0 0);
+  --pk-sidebar-primary: oklch(0.488 0.243 264.376);
+  --pk-sidebar-primary-ink: oklch(0.985 0 0);
+  --pk-radius: 0.625rem;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --pk-bg: oklch(1 0 0);
+  --pk-sidebar-primary: oklch(0.205 0 0);
+  --pk-sidebar-primary-ink: oklch(0.985 0 0);
+  --pk-surface: oklch(1 0 0);
+  --pk-surface-2: oklch(0.97 0 0);
+  --pk-accent: oklch(0.97 0 0);
+  --pk-border: oklch(0.922 0 0);
+  --pk-input: oklch(0.922 0 0);
+  --pk-ring: oklch(0.708 0 0);
+  --pk-text: oklch(0.145 0 0);
+  --pk-text-2: oklch(0.205 0 0);
+  --pk-muted: oklch(0.556 0 0);
+  --pk-brand: oklch(0.205 0 0);
+  --pk-brand-ink: oklch(0.985 0 0);
+  --pk-red: oklch(0.577 0.245 27.325);
+  --pk-chart-1: oklch(0.87 0 0);
+  --pk-chart-2: oklch(0.556 0 0);
+  --pk-chart-3: oklch(0.439 0 0);
+  --pk-chart-4: oklch(0.371 0 0);
+  --pk-chart-5: oklch(0.269 0 0);
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    --pk-bg: oklch(1 0 0);
+    --pk-sidebar-primary: oklch(0.205 0 0);
+    --pk-sidebar-primary-ink: oklch(0.985 0 0);
+    --pk-surface: oklch(1 0 0);
+    --pk-surface-2: oklch(0.97 0 0);
+    --pk-accent: oklch(0.97 0 0);
+    --pk-border: oklch(0.922 0 0);
+    --pk-input: oklch(0.922 0 0);
+    --pk-ring: oklch(0.708 0 0);
+    --pk-text: oklch(0.145 0 0);
+    --pk-text-2: oklch(0.205 0 0);
+    --pk-muted: oklch(0.556 0 0);
+    --pk-brand: oklch(0.205 0 0);
+    --pk-brand-ink: oklch(0.985 0 0);
+    --pk-red: oklch(0.577 0.245 27.325);
+    --pk-chart-1: oklch(0.87 0 0);
+    --pk-chart-2: oklch(0.556 0 0);
+    --pk-chart-3: oklch(0.439 0 0);
+    --pk-chart-4: oklch(0.371 0 0);
+    --pk-chart-5: oklch(0.269 0 0);
+    color-scheme: light;
+  }
+}

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

@@ -0,0 +1,85 @@
+/* PhlexKit theme: Zinc — translated from a ui.shadcn.com/create export
+   (preset b6mHLWLL2u, shadcn's stock zinc palette). Pure token override:
+   load AFTER the phlex_kit.css manifest and the cascade re-themes every
+   component.
+
+   Translation notes (the recipe for any shadcn/create export):
+   - background → bg; card/popover → surface; secondary/muted/accent →
+     surface-2/accent; foreground → text; secondary-foreground → text-2;
+     muted-foreground → muted; primary/primary-foreground → brand/brand-ink;
+     destructive → red; border/input/ring/chart-1..5/radius map 1:1.
+   - shadcn is light-default with a .dark class; PhlexKit themes are
+     dark-default with data-theme="light" opt-in — blocks swapped.
+   - sidebar-* has no --pk-* slots (the kit's sidebar reads the shared
+     surface tokens) and shadcn/create exports no green/amber — both fall
+     through to _tokens.css defaults.
+   - dark text-2 has no shadcn source (every dark *-foreground is 0.985);
+     zinc-300 is used, matching the kit's own dark text-2 weight. */
+:root {
+  --pk-bg: oklch(0.141 0.005 285.823);
+  --pk-surface: oklch(0.21 0.006 285.885);
+  --pk-surface-2: oklch(0.274 0.006 286.033);
+  --pk-accent: oklch(0.274 0.006 286.033);
+  --pk-border: oklch(1 0 0 / 10%);
+  --pk-input: oklch(1 0 0 / 15%);
+  --pk-ring: oklch(0.552 0.016 285.938);
+  --pk-text: oklch(0.985 0 0);
+  --pk-text-2: oklch(0.871 0.006 286.286);
+  --pk-muted: oklch(0.705 0.015 286.067);
+  --pk-brand: oklch(0.92 0.004 286.32);
+  --pk-brand-ink: oklch(0.21 0.006 285.885);
+  --pk-red: oklch(0.704 0.191 22.216);
+  --pk-chart-1: oklch(0.871 0.006 286.286);
+  --pk-chart-2: oklch(0.552 0.016 285.938);
+  --pk-chart-3: oklch(0.442 0.017 285.786);
+  --pk-chart-4: oklch(0.37 0.013 285.805);
+  --pk-chart-5: oklch(0.274 0.006 286.033);
+  --pk-radius: 0.625rem;
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] {
+  --pk-bg: oklch(1 0 0);
+  --pk-surface: oklch(1 0 0);
+  --pk-surface-2: oklch(0.967 0.001 286.375);
+  --pk-accent: oklch(0.967 0.001 286.375);
+  --pk-border: oklch(0.92 0.004 286.32);
+  --pk-input: oklch(0.92 0.004 286.32);
+  --pk-ring: oklch(0.705 0.015 286.067);
+  --pk-text: oklch(0.141 0.005 285.823);
+  --pk-text-2: oklch(0.21 0.006 285.885);
+  --pk-muted: oklch(0.552 0.016 285.938);
+  --pk-brand: oklch(0.21 0.006 285.885);
+  --pk-brand-ink: oklch(0.985 0 0);
+  --pk-red: oklch(0.577 0.245 27.325);
+  --pk-chart-1: oklch(0.871 0.006 286.286);
+  --pk-chart-2: oklch(0.552 0.016 285.938);
+  --pk-chart-3: oklch(0.442 0.017 285.786);
+  --pk-chart-4: oklch(0.37 0.013 285.805);
+  --pk-chart-5: oklch(0.274 0.006 286.033);
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: light) {
+  :root[data-theme="system"] {
+    --pk-bg: oklch(1 0 0);
+    --pk-surface: oklch(1 0 0);
+    --pk-surface-2: oklch(0.967 0.001 286.375);
+    --pk-accent: oklch(0.967 0.001 286.375);
+    --pk-border: oklch(0.92 0.004 286.32);
+    --pk-input: oklch(0.92 0.004 286.32);
+    --pk-ring: oklch(0.705 0.015 286.067);
+    --pk-text: oklch(0.141 0.005 285.823);
+    --pk-text-2: oklch(0.21 0.006 285.885);
+    --pk-muted: oklch(0.552 0.016 285.938);
+    --pk-brand: oklch(0.21 0.006 285.885);
+    --pk-brand-ink: oklch(0.985 0 0);
+    --pk-red: oklch(0.577 0.245 27.325);
+    --pk-chart-1: oklch(0.871 0.006 286.286);
+    --pk-chart-2: oklch(0.552 0.016 285.938);
+    --pk-chart-3: oklch(0.442 0.017 285.786);
+    --pk-chart-4: oklch(0.37 0.013 285.805);
+    --pk-chart-5: oklch(0.274 0.006 286.033);
+    color-scheme: light;
+  }
+}

data/app/components/phlex_kit/accordion/accordion.css

@@ -12,3 +12,16 @@
 .pk-accordion-icon svg { width: 1rem; height: 1rem; }
 .pk-accordion-content { overflow-y: hidden; }
 .pk-accordion-default-content { padding-bottom: 1rem; padding-top: 0; font-size: .875rem; }
+
+/* Disabled items: inert trigger, dimmed. */
+.pk-accordion-item[data-disabled] .pk-accordion-trigger {
+  pointer-events: none;
+  opacity: .5;
+}
+
+/* Bordered flavour (shadcn's "Borders" example): outer border, inset rows. */
+.pk-accordion.bordered {
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  padding-inline: 1rem;
+}

data/app/components/phlex_kit/accordion/accordion.rb

@@ -4,7 +4,16 @@ module PhlexKit
   # AccordionContent). Animated open/close via the phlex-kit--accordion controller
   # (native Web Animations API — no `motion` dependency).
   class Accordion < BaseComponent
-    def initialize(**attrs) = (@attrs = attrs)
-    def view_template(&) = div(**mix({ class: "pk-accordion" }, @attrs), &)
+    # single (default, shadcn's): opening an item closes the others.
+    TYPES = { single: "single", multiple: "multiple" }.freeze
+
+    def initialize(type: :single, **attrs)
+      @type = type.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-accordion", data: { type: TYPES.fetch(@type) } }, @attrs), &)
+    end
   end
 end

data/app/components/phlex_kit/accordion/accordion_icon.rb

@@ -6,9 +6,7 @@ module PhlexKit
         if block
           yield
         else
-          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 20 20", fill: "currentColor") do |s|
-            s.path(fill_rule: "evenodd", clip_rule: "evenodd", d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z")
-          end
+          render Icon.new(:chevron_down, size: nil)
         end
       end
     end