kiso 0.2.2.pre → 0.4.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfca4f2a1e45d61e45de52c22a96428de18c04643860ea07c0913d2c29d3c397
-  data.tar.gz: e46ba40a7fe00c0818958742e745058e6cec5990e2b195df085cc2b3e8242477
+  metadata.gz: ce3df9a9c977207d60d0253493414495486682817829e7afb9c3ea4f856756b2
+  data.tar.gz: ea280bd1479c2bfe90a8fdd3fe597efe1a88c427031f096b24536a02c3558899
 SHA512:
-  metadata.gz: 8ca9dcd4857e5f4eb41086239901a6c347314432ba75189372642dba08d6975fe9caa5466635e94e013f26c858a84ff5af64e2701dd75a3ef946e560b3025011
-  data.tar.gz: 75689ce3b7a06d3377d74ed37f7d5fe1d44c95d19549b6992e5c66bd3b78a8b07e924bbc2ba26a15f02b861f74986565c124369fb7648de5b5655b060dd2d4f6
+  metadata.gz: 34279aa5743e7baf516464c98ab5984de8edace8789646cb2277270ba5320f8b5763849141a4c2ddeee85f42d23c21638bcc4d11dcb0dd0f34792b09c8efa217
+  data.tar.gz: 8da0d3477b660de7fc174da7a7a1608e39783bd763b428f570beaf4385b301fa5eb9105384a87ff61791d09bab655ad3882c148f39d93f6c8402149c0fbfbac8

data/CHANGELOG.md

@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0.pre] - 2026-03-08
+
+### Added
+
+- Layout component family: App, Container (4 size variants), Header, Footer, Main
+- Page component family: Page (grid with sidebars), PageHeader, PageBody, PageSection, PageGrid, PageCard (4 variants)
+- `appui()` helper for host app components with `app/themes/` and `app/views/components/`
+- `kiso:framework_component` generator for scaffolding engine components
+- `kiso:component` generator for scaffolding host app components
+- Theme presets: `apply_preset(:rounded)` and `apply_preset(:sharp)`
+- 5 OKLCH color palettes (zinc, blue, green, orange, violet)
+- i18n support: all component strings use `t()` with `config/locales/en.yml`
+- [Building Your Own Components](/guide/building-components) guide — how to wrap Kiso components with domain logic and build standalone components with `appui()`, themes, and sub-parts
+- [Detailed release notes](/releases/batch-merge) with upgrade guide and examples for all new features
+
+## [0.3.0.pre] - 2026-03-03
+
+### Added
+
+- Dialog component — modal dialog wrapping the native `<dialog>` element with `showModal()` for focus trapping and backdrop. Sub-parts: header, title, description, body, footer, close. Entry/exit CSS animations with reduced-motion support. Stimulus controller for programmatic open/close.
+- Alert Dialog component — confirmation dialog that requires an explicit user action (`role="alertdialog"`). Cannot be dismissed by Escape or backdrop click. Sub-parts: header, title, description, media, footer, action, cancel. Size variants (default/sm) with responsive media grid layout. Auto-linked `aria-labelledby` and `aria-describedby`.
+- AspectRatio component — lightweight wrapper that applies an aspect ratio via inline style. Accepts any `ratio:` value (defaults to 16:9).
+- Slider component — range input with track, thumb, and fill styling. Supports min/max/step/value, three sizes (sm/md/lg), and disabled state. Stimulus controller for real-time value display.
+- Empty component `:actions` slot for placing buttons below the description.
+- Button `method:` prop — renders a Rails `button_to` form for DELETE/POST/PUT/PATCH actions while preserving all Button styling.
+- Icons guide added to documentation site.
+
+### Fixed
+
+- InputOTP slots missing visible border when a separator is placed inside a group.
+- Sidebar header and footer now use `flex-col` layout matching shadcn structure.
+
 ## [0.2.2.pre] - 2026-03-03
 
 ### Fixed
@@ -68,7 +100,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Lookbook component previews
 - Bridgetown documentation site
 
-[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.2.2.pre...HEAD
+[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.4.0.pre...HEAD
+[0.4.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.4.0.pre
+[0.3.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.3.0.pre
 [0.2.2.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.2.pre
 [0.2.1.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.1.pre
 [0.2.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.0.pre

data/README.md

@@ -1,6 +1,19 @@
-# Kiso 基礎
-
-UI components for Rails. Built on ERB, Tailwind CSS, and Hotwire.
+<p align="center">
+  <a href="https://kisoui.com">
+    <img src="brand/svg/logo-horizontal-color.svg" width="280" alt="Kiso">
+  </a>
+</p>
+
+<p align="center">
+  UI components for Rails. Built on ERB, Tailwind CSS, and Hotwire.
+</p>
+
+<p align="center">
+  <a href="https://kisoui.com">Docs</a> ·
+  <a href="https://lookbook.kisoui.com">Lookbook</a> ·
+  <a href="https://github.com/steveclarke/kiso/discussions">Discussions</a> ·
+  <a href="https://discord.gg/aMshcWAW">Discord</a>
+</p>
 
 Add one gem and get badges, buttons, cards, alerts, and more. They all work with screen readers and dark mode.
 

data/app/assets/tailwind/kiso/dialog.css

@@ -0,0 +1,46 @@
+/* Dialog and Alert Dialog entry/exit animations and scroll lock. */
+
+/* Entry */
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] {
+  animation: kiso-dialog-backdrop-in 200ms ease-out;
+}
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+  animation: kiso-dialog-content-in 200ms ease-out;
+}
+
+/* Exit — data-state="closing" set by Stimulus before calling .close() */
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] {
+  animation: kiso-dialog-backdrop-out 200ms ease-in forwards;
+}
+:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+  animation: kiso-dialog-content-out 200ms ease-in forwards;
+}
+
+@keyframes kiso-dialog-backdrop-in {
+  from { opacity: 0; }
+}
+@keyframes kiso-dialog-backdrop-out {
+  to { opacity: 0; }
+}
+@keyframes kiso-dialog-content-in {
+  from { opacity: 0; transform: scale(0.95); }
+}
+@keyframes kiso-dialog-content-out {
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+/* Scroll lock — prevent body scroll when modal dialog is open */
+html:has(:is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open]:modal) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open],
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[open] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]),
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"],
+  :is(dialog[data-slot="dialog"], dialog[data-slot="alert-dialog"])[data-state="closing"] > :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
+    animation: none;
+  }
+}

data/app/assets/tailwind/kiso/engine.css

@@ -7,14 +7,17 @@
 @import "./radio-group.css";
 @import "./color-mode.css";
 @import "./dashboard.css";
+@import "./dialog.css";
 @import "./input-otp.css";
+@import "./slider.css";
 
 /* Scan Kiso's own files so host apps don't need to know the gem's internals.
    Paths are relative to THIS file (app/assets/tailwind/kiso/engine.css).
    Count carefully — wrong paths fail SILENTLY (classes just won't generate). */
 @source "../../../views";              /* → app/views              */
 @source "../../../helpers";            /* → app/helpers            */
-@source "../../../../lib/kiso/themes"; /* → lib/kiso/themes        */
+@source "../../../../lib/kiso/themes";  /* → lib/kiso/themes        */
+@source "../../../../lib/kiso/presets"; /* → lib/kiso/presets       */
 
 /* === Geist Font (by Vercel) ===
    Self-hosted variable fonts — no CDN dependency.
@@ -54,7 +57,7 @@
 
 @theme {
   /* Brand / action colors */
-  --color-primary: var(--color-sky-600);
+  --color-primary: var(--color-rose-500);
   --color-primary-foreground: white;
 
   --color-secondary: var(--color-teal-600);
@@ -97,7 +100,7 @@
    Redefine tokens under .dark — components never use dark: prefixes. */
 
 .dark {
-  --color-primary: var(--color-blue-400);
+  --color-primary: var(--color-rose-400);
   --color-primary-foreground: var(--color-zinc-950);
 
   --color-secondary: var(--color-teal-400);

data/app/assets/tailwind/kiso/input-otp.css

@@ -8,3 +8,20 @@
   0%, 70%, 100% { opacity: 1; }
   20%, 50% { opacity: 0; }
 }
+
+/* Separator-adjacent rounding — when a separator sits inside a group,
+   round the slot edges next to it so each visual cluster has proper corners.
+   Also reset the negative margin so the slot after a separator starts fresh. */
+
+@layer utilities {
+  [data-slot="input-otp-slot"]:has(+ [data-slot="input-otp-separator"]) {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  [data-slot="input-otp-separator"] + [data-slot="input-otp-slot"] {
+    margin-left: 0;
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+}

data/app/assets/tailwind/kiso/palettes/blue.css

@@ -0,0 +1,65 @@
+/* Kiso Color Palette: Blue
+   A professional blue palette — classic SaaS/enterprise feel.
+   Based on shadcn/ui's Blue theme with OKLCH color values.
+
+   Usage:
+     1. Import in your CSS: @import "kiso/palettes/blue.css";
+     2. Add to your HTML: <html data-palette="blue"> or <body data-palette="blue">
+*/
+
+[data-palette="blue"] {
+  /* Brand / action colors — vibrant blue */
+  --color-primary: oklch(0.488 0.243 264.376);
+  --color-primary-foreground: oklch(0.97 0.014 254.604);
+
+  --color-secondary: oklch(0.967 0.001 286.375);
+  --color-secondary-foreground: oklch(0.21 0.006 285.885);
+
+  /* Surface tokens — slate-tinted neutrals */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.13 0.028 261.692);
+
+  --color-muted: oklch(0.967 0.003 264.542);
+  --color-muted-foreground: oklch(0.551 0.027 264.364);
+
+  --color-accent: oklch(0.967 0.003 264.542);
+  --color-accent-foreground: oklch(0.21 0.034 264.665);
+
+  --color-inverted: oklch(0.21 0.034 264.665);
+  --color-inverted-foreground: oklch(0.985 0.002 247.839);
+  --color-elevated: oklch(0.967 0.003 264.542);
+  --color-accented: oklch(0.707 0.022 261.325);
+
+  --color-border: oklch(0.928 0.006 264.531);
+  --color-border-accented: oklch(0.707 0.022 261.325);
+
+  --color-ring: oklch(0.488 0.243 264.376);
+}
+
+.dark [data-palette="blue"],
+[data-palette="blue"].dark {
+  --color-primary: oklch(0.42 0.18 266);
+  --color-primary-foreground: oklch(0.97 0.014 254.604);
+
+  --color-secondary: oklch(0.274 0.006 286.033);
+  --color-secondary-foreground: oklch(0.985 0 0);
+
+  --color-background: oklch(0.13 0.028 261.692);
+  --color-foreground: oklch(0.985 0.002 247.839);
+
+  --color-muted: oklch(0.278 0.033 256.848);
+  --color-muted-foreground: oklch(0.707 0.022 261.325);
+
+  --color-accent: oklch(0.278 0.033 256.848);
+  --color-accent-foreground: oklch(0.985 0.002 247.839);
+
+  --color-inverted: oklch(0.985 0.002 247.839);
+  --color-inverted-foreground: oklch(0.21 0.034 264.665);
+  --color-elevated: oklch(0.278 0.033 256.848);
+  --color-accented: oklch(0.551 0.027 264.364);
+
+  --color-border: oklch(0.278 0.033 256.848);
+  --color-border-accented: oklch(0.551 0.027 264.364);
+
+  --color-ring: oklch(0.488 0.243 264.376);
+}

data/app/assets/tailwind/kiso/palettes/green.css

@@ -0,0 +1,65 @@
+/* Kiso Color Palette: Green
+   A fresh, natural green palette — great for eco, health, or finance apps.
+   Based on shadcn/ui's Green theme with OKLCH color values.
+
+   Usage:
+     1. Import in your CSS: @import "kiso/palettes/green.css";
+     2. Add to your HTML: <html data-palette="green"> or <body data-palette="green">
+*/
+
+[data-palette="green"] {
+  /* Brand / action colors — vivid green */
+  --color-primary: oklch(0.648 0.2 131.684);
+  --color-primary-foreground: oklch(0.986 0.031 120.757);
+
+  --color-secondary: oklch(0.967 0.001 286.375);
+  --color-secondary-foreground: oklch(0.21 0.006 285.885);
+
+  /* Surface tokens — zinc neutrals */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.141 0.005 285.823);
+
+  --color-muted: oklch(0.967 0.001 286.375);
+  --color-muted-foreground: oklch(0.552 0.016 285.938);
+
+  --color-accent: oklch(0.967 0.001 286.375);
+  --color-accent-foreground: oklch(0.21 0.006 285.885);
+
+  --color-inverted: oklch(0.21 0.006 285.885);
+  --color-inverted-foreground: oklch(0.985 0 0);
+  --color-elevated: oklch(0.967 0.001 286.375);
+  --color-accented: oklch(0.705 0.015 286.067);
+
+  --color-border: oklch(0.92 0.004 286.32);
+  --color-border-accented: oklch(0.705 0.015 286.067);
+
+  --color-ring: oklch(0.648 0.2 131.684);
+}
+
+.dark [data-palette="green"],
+[data-palette="green"].dark {
+  --color-primary: oklch(0.648 0.2 131.684);
+  --color-primary-foreground: oklch(0.986 0.031 120.757);
+
+  --color-secondary: oklch(0.274 0.006 286.033);
+  --color-secondary-foreground: oklch(0.985 0 0);
+
+  --color-background: oklch(0.141 0.005 285.823);
+  --color-foreground: oklch(0.985 0 0);
+
+  --color-muted: oklch(0.274 0.006 286.033);
+  --color-muted-foreground: oklch(0.705 0.015 286.067);
+
+  --color-accent: oklch(0.274 0.006 286.033);
+  --color-accent-foreground: oklch(0.985 0 0);
+
+  --color-inverted: oklch(0.985 0 0);
+  --color-inverted-foreground: oklch(0.21 0.006 285.885);
+  --color-elevated: oklch(0.274 0.006 286.033);
+  --color-accented: oklch(0.552 0.016 285.938);
+
+  --color-border: oklch(0.274 0.006 286.033);
+  --color-border-accented: oklch(0.552 0.016 285.938);
+
+  --color-ring: oklch(0.648 0.2 131.684);
+}

data/app/assets/tailwind/kiso/palettes/orange.css

@@ -0,0 +1,65 @@
+/* Kiso Color Palette: Orange
+   A warm, energetic palette — great for creative, food, or community apps.
+   Based on shadcn/ui's Orange theme with OKLCH color values.
+
+   Usage:
+     1. Import in your CSS: @import "kiso/palettes/orange.css";
+     2. Add to your HTML: <html data-palette="orange"> or <body data-palette="orange">
+*/
+
+[data-palette="orange"] {
+  /* Brand / action colors — warm orange */
+  --color-primary: oklch(0.646 0.222 41.116);
+  --color-primary-foreground: oklch(0.98 0.016 73.684);
+
+  --color-secondary: oklch(0.97 0.001 106.424);
+  --color-secondary-foreground: oklch(0.216 0.006 56.043);
+
+  /* Surface tokens — warm stone neutrals */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.147 0.004 49.25);
+
+  --color-muted: oklch(0.97 0.001 106.424);
+  --color-muted-foreground: oklch(0.553 0.013 58.071);
+
+  --color-accent: oklch(0.97 0.001 106.424);
+  --color-accent-foreground: oklch(0.216 0.006 56.043);
+
+  --color-inverted: oklch(0.216 0.006 56.043);
+  --color-inverted-foreground: oklch(0.985 0.001 106.423);
+  --color-elevated: oklch(0.97 0.001 106.424);
+  --color-accented: oklch(0.709 0.01 56.259);
+
+  --color-border: oklch(0.923 0.003 48.717);
+  --color-border-accented: oklch(0.709 0.01 56.259);
+
+  --color-ring: oklch(0.646 0.222 41.116);
+}
+
+.dark [data-palette="orange"],
+[data-palette="orange"].dark {
+  --color-primary: oklch(0.705 0.213 47.604);
+  --color-primary-foreground: oklch(0.98 0.016 73.684);
+
+  --color-secondary: oklch(0.268 0.007 34.298);
+  --color-secondary-foreground: oklch(0.985 0.001 106.423);
+
+  --color-background: oklch(0.147 0.004 49.25);
+  --color-foreground: oklch(0.985 0.001 106.423);
+
+  --color-muted: oklch(0.268 0.007 34.298);
+  --color-muted-foreground: oklch(0.709 0.01 56.259);
+
+  --color-accent: oklch(0.268 0.007 34.298);
+  --color-accent-foreground: oklch(0.985 0.001 106.423);
+
+  --color-inverted: oklch(0.985 0.001 106.423);
+  --color-inverted-foreground: oklch(0.216 0.006 56.043);
+  --color-elevated: oklch(0.268 0.007 34.298);
+  --color-accented: oklch(0.553 0.013 58.071);
+
+  --color-border: oklch(0.268 0.007 34.298);
+  --color-border-accented: oklch(0.553 0.013 58.071);
+
+  --color-ring: oklch(0.705 0.213 47.604);
+}

data/app/assets/tailwind/kiso/palettes/violet.css

@@ -0,0 +1,65 @@
+/* Kiso Color Palette: Violet
+   A rich, creative purple palette — great for design tools or premium brands.
+   Based on shadcn/ui's Violet theme with OKLCH color values.
+
+   Usage:
+     1. Import in your CSS: @import "kiso/palettes/violet.css";
+     2. Add to your HTML: <html data-palette="violet"> or <body data-palette="violet">
+*/
+
+[data-palette="violet"] {
+  /* Brand / action colors — vivid violet */
+  --color-primary: oklch(0.541 0.281 293.009);
+  --color-primary-foreground: oklch(0.969 0.016 293.756);
+
+  --color-secondary: oklch(0.967 0.001 286.375);
+  --color-secondary-foreground: oklch(0.21 0.006 285.885);
+
+  /* Surface tokens — gray neutrals */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.13 0.028 261.692);
+
+  --color-muted: oklch(0.967 0.003 264.542);
+  --color-muted-foreground: oklch(0.551 0.027 264.364);
+
+  --color-accent: oklch(0.967 0.003 264.542);
+  --color-accent-foreground: oklch(0.21 0.034 264.665);
+
+  --color-inverted: oklch(0.21 0.034 264.665);
+  --color-inverted-foreground: oklch(0.985 0.002 247.839);
+  --color-elevated: oklch(0.967 0.003 264.542);
+  --color-accented: oklch(0.707 0.022 261.325);
+
+  --color-border: oklch(0.928 0.006 264.531);
+  --color-border-accented: oklch(0.707 0.022 261.325);
+
+  --color-ring: oklch(0.541 0.281 293.009);
+}
+
+.dark [data-palette="violet"],
+[data-palette="violet"].dark {
+  --color-primary: oklch(0.606 0.25 292.717);
+  --color-primary-foreground: oklch(0.969 0.016 293.756);
+
+  --color-secondary: oklch(0.274 0.006 286.033);
+  --color-secondary-foreground: oklch(0.985 0 0);
+
+  --color-background: oklch(0.13 0.028 261.692);
+  --color-foreground: oklch(0.985 0.002 247.839);
+
+  --color-muted: oklch(0.278 0.033 256.848);
+  --color-muted-foreground: oklch(0.707 0.022 261.325);
+
+  --color-accent: oklch(0.278 0.033 256.848);
+  --color-accent-foreground: oklch(0.985 0.002 247.839);
+
+  --color-inverted: oklch(0.985 0.002 247.839);
+  --color-inverted-foreground: oklch(0.21 0.034 264.665);
+  --color-elevated: oklch(0.278 0.033 256.848);
+  --color-accented: oklch(0.551 0.027 264.364);
+
+  --color-border: oklch(0.278 0.033 256.848);
+  --color-border-accented: oklch(0.551 0.027 264.364);
+
+  --color-ring: oklch(0.606 0.25 292.717);
+}

data/app/assets/tailwind/kiso/palettes/zinc.css

@@ -0,0 +1,65 @@
+/* Kiso Color Palette: Zinc
+   A neutral, cool-toned palette using the Zinc scale.
+   Based on shadcn/ui's Zinc theme with OKLCH color values.
+
+   Usage:
+     1. Import in your CSS: @import "kiso/palettes/zinc.css";
+     2. Add to your HTML: <html data-palette="zinc"> or <body data-palette="zinc">
+*/
+
+[data-palette="zinc"] {
+  /* Brand / action colors — zinc primary (near-black in light, near-white in dark) */
+  --color-primary: oklch(0.21 0.006 285.885);
+  --color-primary-foreground: oklch(0.985 0 0);
+
+  --color-secondary: oklch(0.967 0.001 286.375);
+  --color-secondary-foreground: oklch(0.21 0.006 285.885);
+
+  /* Surface tokens */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.141 0.005 285.823);
+
+  --color-muted: oklch(0.967 0.001 286.375);
+  --color-muted-foreground: oklch(0.552 0.016 285.938);
+
+  --color-accent: oklch(0.967 0.001 286.375);
+  --color-accent-foreground: oklch(0.21 0.006 285.885);
+
+  --color-inverted: oklch(0.21 0.006 285.885);
+  --color-inverted-foreground: oklch(0.985 0 0);
+  --color-elevated: oklch(0.967 0.001 286.375);
+  --color-accented: oklch(0.705 0.015 286.067);
+
+  --color-border: oklch(0.92 0.004 286.32);
+  --color-border-accented: oklch(0.705 0.015 286.067);
+
+  --color-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark [data-palette="zinc"],
+[data-palette="zinc"].dark {
+  --color-primary: oklch(0.92 0.004 286.32);
+  --color-primary-foreground: oklch(0.21 0.006 285.885);
+
+  --color-secondary: oklch(0.274 0.006 286.033);
+  --color-secondary-foreground: oklch(0.985 0 0);
+
+  --color-background: oklch(0.141 0.005 285.823);
+  --color-foreground: oklch(0.985 0 0);
+
+  --color-muted: oklch(0.274 0.006 286.033);
+  --color-muted-foreground: oklch(0.705 0.015 286.067);
+
+  --color-accent: oklch(0.274 0.006 286.033);
+  --color-accent-foreground: oklch(0.985 0 0);
+
+  --color-inverted: oklch(0.985 0 0);
+  --color-inverted-foreground: oklch(0.21 0.006 285.885);
+  --color-elevated: oklch(0.274 0.006 286.033);
+  --color-accented: oklch(0.552 0.016 285.938);
+
+  --color-border: oklch(0.274 0.006 286.033);
+  --color-border-accented: oklch(0.552 0.016 285.938);
+
+  --color-ring: oklch(0.552 0.016 285.938);
+}

data/app/assets/tailwind/kiso/slider.css

@@ -0,0 +1,27 @@
+@layer components {
+  /* Center the thumb over its left % position */
+  [data-slot="slider-thumb"] {
+    transform: translateX(-50%);
+    top: 50%;
+    margin-top: calc(-1 * var(--thumb-offset, 0.5rem));
+  }
+
+  /* Size-specific thumb offsets (half the thumb size) */
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-3) {
+    --thumb-offset: 0.375rem;
+  }
+
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-4) {
+    --thumb-offset: 0.5rem;
+  }
+
+  [data-slot="slider"] :where([data-slot="slider-thumb"].size-5) {
+    --thumb-offset: 0.625rem;
+  }
+
+  /* Disabled state */
+  [data-slot="slider"]:has(input:disabled) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

data/app/helpers/kiso/app_component_helper.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Kiso
+  # View helpers for rendering host app components.
+  #
+  # Mirrors {ComponentHelper#kui} but resolves partials from
+  # +app/views/components/+ and themes from +AppThemes::+.
+  # No global config layer — host apps own the source directly.
+  #
+  # Included in all views automatically by {Engine}.
+  module AppComponentHelper
+    # Renders a host app component partial.
+    #
+    # Components live in +app/views/components/+. Sub-parts are nested
+    # in a directory matching the parent component name.
+    #
+    # @param component [Symbol] the component name (e.g. +:pricing_card+)
+    # @param part [Symbol, nil] optional sub-part name (e.g. +:header+, +:footer+)
+    # @param collection [Array, nil] renders the partial once per item when present
+    # @param ui [Hash{Symbol => String}, nil] per-slot class overrides keyed by sub-part name.
+    #   For parent components, the hash is pushed onto a context stack so sub-parts
+    #   inherit overrides automatically. For self-rendering components, the hash is
+    #   also passed as a local so the partial can apply overrides to internally
+    #   rendered elements.
+    # @param kwargs [Hash] locals passed to the partial (e.g. +css_classes:+)
+    # @yield optional block for component content
+    # @return [ActiveSupport::SafeBuffer] rendered HTML
+    #
+    # @example Render a pricing card
+    #   appui(:pricing_card) { "Content" }
+    #
+    # @example Render a pricing card with sub-parts
+    #   appui(:pricing_card) do
+    #     appui(:pricing_card, :header) { "Header" }
+    #   end
+    #
+    # @example Render with per-slot overrides
+    #   appui(:pricing_card, ui: { header: "p-8" }) do
+    #     appui(:pricing_card, :header) { "Header" }
+    #   end
+    #
+    # @example Render a collection
+    #   appui(:pricing_card, collection: @plans)
+    def appui(component, part = nil, collection: nil, ui: nil, **kwargs, &block)
+      kiso_render_component(
+        component, part,
+        path_prefix: "components",
+        collection: collection, ui: ui, merge_global_ui: false,
+        **kwargs, &block
+      )
+    end
+  end
+end