phlex_kit 0.8.1 → 0.9.1

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

@@ -36,7 +36,10 @@ module PhlexKit
         data: {
           controller: "phlex-kit--select",
           phlex_kit__select_open_value: "false",
-          action: "click@window->phlex-kit--select#clickOutside"
+          # keydown.esc rides on the root (not only the items) so Escape closes
+          # the [popover=manual] panel with focus on the trigger too; handleEsc
+          # no-ops while closed.
+          action: "click@window->phlex-kit--select#clickOutside keydown.esc->phlex-kit--select#handleEsc"
         }
       }, @attrs), &block)
     end

data/app/components/phlex_kit/select/select_controller.js

@@ -72,7 +72,25 @@ export default class extends Controller {
     }
   }
 
+  handleHome(event) {
+    event.preventDefault();
+    if (this.itemTargets.length === 0) return;
+    this.resetCurrent();
+    this.setAriaCurrentAndActiveDescendant(0);
+  }
+
+  handleEnd(event) {
+    event.preventDefault();
+    if (this.itemTargets.length === 0) return;
+    this.resetCurrent();
+    this.setAriaCurrentAndActiveDescendant(this.itemTargets.length - 1);
+  }
+
+  // Bound on the root as well as the items, so Escape also closes with focus
+  // on the trigger; no-op while closed (a closed-state Escape must not steal
+  // focus back to the trigger).
   handleEsc(event) {
+    if (!this.contentTarget.matches(":popover-open")) return;
     event.preventDefault();
     this.closeContent();
   }
@@ -85,7 +103,11 @@ export default class extends Controller {
     const focusItem = selectedItem || (this.hasItemTarget ? this.itemTarget : null);
     if (!focusItem) return; // empty select — nothing to focus
 
+    // preventScroll stops the page jumping when the top-layer panel opens;
+    // scrollIntoView(nearest) then scrolls only the panel's own viewport so
+    // the focused option is actually visible (max-height panel).
     focusItem.focus({ preventScroll: true });
+    focusItem.scrollIntoView({ block: "nearest" });
     focusItem.setAttribute("aria-current", "true");
     this.triggerTarget.setAttribute("aria-activedescendant", focusItem.getAttribute("id"));
   }
@@ -133,6 +155,9 @@ export default class extends Controller {
   setAriaCurrentAndActiveDescendant(currentIndex) {
     const currentItem = this.itemTargets[currentIndex];
     currentItem.focus({ preventScroll: true });
+    // Keep the highlighted option visible inside the scrollable viewport —
+    // preventScroll (page-jump guard) otherwise lets it scroll out of view.
+    currentItem.scrollIntoView({ block: "nearest" });
     currentItem.setAttribute("aria-current", "true");
     this.triggerTarget.setAttribute("aria-activedescendant", currentItem.getAttribute("id"));
   }

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

@@ -16,13 +16,17 @@ module PhlexKit
     def view_template(&block)
       div(**mix({
         role: "option",
-        tabindex: "0",
+        # Roving listbox pattern: options are focusable programmatically only
+        # (focus() works on tabindex=-1), so Tab exits the widget instead of
+        # walking every option.
+        tabindex: "-1",
         class: "pk-select-item",
         "aria-selected": (@selected ? "true" : "false"),
         data: {
           value: @value,
           action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
                   "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
+                  "keydown.home->phlex-kit--select#handleHome keydown.end->phlex-kit--select#handleEnd " \
                   "keydown.esc->phlex-kit--select#handleEsc",
           phlex_kit__select_target: "item"
         }

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

@@ -4,15 +4,15 @@
    75%-wide capped at 24rem. Overlay at the kit-unified black/10 + blur-xs
    (see dialog.css). 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 / .1); backdrop-filter: blur(4px); }
+.pk-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--pk-overlay) 10%, transparent); backdrop-filter: blur(4px); }
 @supports not (backdrop-filter: blur(1px)) {
-  .pk-sheet-backdrop { background: rgb(0 0 0 / .5); }
+  .pk-sheet-backdrop { background: color-mix(in srgb, var(--pk-overlay) 50%, transparent); }
 }
 .pk-sheet-content {
   position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 1rem;
   background: var(--pk-surface); color: var(--pk-text); padding: 0;
   font-size: .875rem;
-  box-shadow: 0 10px 30px rgb(0 0 0 / .35); overflow: auto;
+  box-shadow: 0 10px 30px color-mix(in srgb, var(--pk-shadow-color) 35%, transparent); overflow: auto;
 }
 .pk-sheet-content.right { inset-block: 0; right: 0; height: 100%; width: 75%; max-width: 24rem; border-left: 1px solid var(--pk-border); }
 .pk-sheet-content.left  { inset-block: 0; left: 0;  height: 100%; width: 75%; max-width: 24rem; border-right: 1px solid var(--pk-border); }

data/app/components/phlex_kit/sheet/sheet_content_controller.js

@@ -2,12 +2,14 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="phlex-kit--sheet-content" (on the cloned node —
 // drawers ride the same machinery). Owns the modal contract for the open panel:
-// scroll lock, initial focus, Tab focus trap, Escape-to-close, focus restore to
-// the opener, and aria-labelledby wiring to the SheetTitle/DrawerTitle. connect
-// and disconnect exactly bracket the clone's lifetime, so removal by any path
-// (close button, backdrop, Escape, turbo:before-cache) restores state.
+// scroll lock, background inert, initial focus, Tab focus trap, Escape-to-close,
+// focus restore to the opener, and aria-labelledby/-describedby wiring to the
+// Sheet/Drawer Title + Description. connect and disconnect exactly bracket the
+// clone's lifetime, so removal by any path (close button, backdrop, Escape,
+// turbo:before-cache — the phlex-kit--sheet source controller removes the clone
+// there) restores state.
 const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
 
 export default class extends Controller {
   static targets = ["panel"]
@@ -16,12 +18,15 @@ export default class extends Controller {
     this.opener = document.activeElement
     this.previousOverflow = document.body.style.overflow
     document.body.style.overflow = "hidden"
-    this.#wireAriaLabelledby()
+    this.#inertOthers()
+    this.#wireAria("aria-labelledby", ".pk-sheet-title, .pk-drawer-title")
+    this.#wireAria("aria-describedby", ".pk-sheet-description, .pk-drawer-description")
     const focusables = this.#focusables()
     ;(focusables[0] || this.panel).focus()
   }
 
   disconnect() {
+    this.#restoreInert()
     document.body.style.overflow = this.previousOverflow
     if (this.opener?.isConnected) this.opener.focus()
   }
@@ -62,11 +67,30 @@ export default class extends Controller {
     return [...this.panel.querySelectorAll(FOCUSABLE)].filter((el) => el.getClientRects().length > 0)
   }
 
-  #wireAriaLabelledby() {
-    if (this.panel.getAttribute("aria-labelledby")) return
-    const title = this.element.querySelector(".pk-sheet-title, .pk-drawer-title")
-    if (!title) return
-    if (!title.id) title.id = `pk-modal-title-${Math.random().toString(36).slice(2, 10)}`
-    this.panel.setAttribute("aria-labelledby", title.id)
+  // Make everything behind the panel inert (the clone is <body>'s last child,
+  // so its siblings are the whole page). Prior inert state is saved per
+  // element and restored on disconnect — which fires on every removal path,
+  // including the source controller's turbo:before-cache cleanup.
+  #inertOthers() {
+    this.inerted = []
+    for (const el of document.body.children) {
+      if (el === this.element) continue
+      if (["SCRIPT", "STYLE", "LINK", "TEMPLATE"].includes(el.tagName)) continue
+      this.inerted.push([el, el.inert])
+      el.inert = true
+    }
+  }
+
+  #restoreInert() {
+    for (const [el, wasInert] of this.inerted || []) el.inert = wasInert
+    this.inerted = null
+  }
+
+  #wireAria(attr, selector) {
+    if (this.panel.getAttribute(attr)) return
+    const el = this.element.querySelector(selector)
+    if (!el) return
+    if (!el.id) el.id = `pk-modal-${attr.slice(5)}-${Math.random().toString(36).slice(2, 10)}`
+    this.panel.setAttribute(attr, el.id)
   }
 }

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

@@ -42,7 +42,7 @@
 .pk-sidebar-group-action {
   position: absolute;
   top: .375rem;
-  right: .25rem;
+  inset-inline-end: .25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,7 +71,7 @@
   color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;
   font-size: .9rem;
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   cursor: pointer;
 }
@@ -86,7 +86,7 @@
 .pk-sidebar-menu-action {
   position: absolute;
   top: .5rem;
-  right: .25rem;
+  inset-inline-end: .25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -105,7 +105,7 @@
   user-select: none;
   position: absolute;
   top: .5rem;
-  right: .25rem;
+  inset-inline-end: .25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -130,7 +130,7 @@
   min-width: 0;
   margin: 0 .875rem;
   padding: .125rem .625rem;
-  border-left: 1px solid var(--pk-sidebar-border, var(--pk-border));
+  border-inline-start: 1px solid var(--pk-sidebar-border, var(--pk-border));
 }
 .pk-sidebar-menu-sub-item { position: relative; }
 .pk-sidebar-menu-sub-button {
@@ -148,7 +148,7 @@
   color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;
   font-size: .875rem;
-  text-align: left;
+  text-align: start;
   text-decoration: none;
   cursor: pointer;
 }
@@ -276,7 +276,7 @@
     transform: translateX(-100%);
     /* closed drawer: invisible AND out of the tab order */
     visibility: hidden;
-    box-shadow: 0 8px 30px rgb(0 0 0 / .35);
+    box-shadow: 0 8px 30px color-mix(in srgb, var(--pk-shadow-color) 35%, transparent);
   }
   .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon)[data-open] .pk-sidebar { transform: none; visibility: visible; }
   .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon)[data-open] .pk-sidebar-scrim {
@@ -284,7 +284,7 @@
     position: fixed;
     inset: 0;
     z-index: 49;
-    background: rgb(0 0 0 / .5);
+    background: color-mix(in srgb, var(--pk-overlay) 50%, transparent);
     border: 0;
     padding: 0;
     cursor: default;

data/app/components/phlex_kit/sidebar/sidebar_controller.js

@@ -9,23 +9,54 @@ import { Controller } from "@hotwired/stimulus"
 // media query. The desktop state persists in a `pk_sidebar_state` cookie so a
 // host layout can render the collapsed rail server-side (no flash) via
 // SidebarWrapper's `default_collapsed:`.
+//
+// A11y: connect() wires aria-controls on every trigger/rail that didn't get one
+// server-side (generating an id on the .pk-sidebar if needed) and keeps their
+// aria-expanded in sync on every toggle. The mobile overlay drawer is a real
+// modal: opening moves focus into it and inerts the rest of the wrapper + page
+// (the scrim stays live — it IS the close control), closing (scrim, Escape,
+// trigger, turbo:before-cache) restores inert state and returns focus to the
+// opener.
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
 export default class extends Controller {
   static MOBILE = "(max-width: 767px)"
   static COOKIE = "pk_sidebar_state"
 
+  connect() {
+    this.#wireAriaControls()
+    this.#syncExpanded()
+  }
+
+  disconnect() {
+    this.#restoreInert()
+  }
+
   toggle(event) {
     if (event?.type === "keydown" && !(event.metaKey || event.ctrlKey)) return
 
     if (this.mobile) {
-      this.element.toggleAttribute("data-open")
+      if (this.element.hasAttribute("data-open")) {
+        this.closeMobile()
+      } else {
+        this.element.setAttribute("data-open", "")
+        this.#trapMobile(event)
+      }
     } else {
       this.element.toggleAttribute("data-collapsed")
       this.persist()
     }
+    this.#syncExpanded()
   }
 
   closeMobile() {
+    if (!this.element.hasAttribute("data-open")) return
     this.element.removeAttribute("data-open")
+    this.#restoreInert()
+    if (this.opener?.isConnected) this.opener.focus()
+    this.opener = null
+    this.#syncExpanded()
   }
 
   persist() {
@@ -36,4 +67,70 @@ export default class extends Controller {
   get mobile() {
     return window.matchMedia(this.constructor.MOBILE).matches
   }
+
+  get sidebar() {
+    return this.element.querySelector(".pk-sidebar")
+  }
+
+  get togglers() {
+    return this.element.querySelectorAll(".pk-sidebar-trigger, .pk-sidebar-rail")
+  }
+
+  // Open mobile drawer: remember the opener, inert everything that isn't the
+  // sidebar or its scrim, and move focus into the drawer.
+  #trapMobile(event) {
+    this.opener = event?.currentTarget instanceof HTMLElement ? event.currentTarget : document.activeElement
+    this.#inertOthers()
+    const sidebar = this.sidebar
+    if (!sidebar) return
+    const focusable = sidebar.querySelector(FOCUSABLE)
+    ;(focusable || sidebar).focus()
+  }
+
+  // Inert the page behind the scrim: the wrapper's siblings in <body>, plus
+  // wrapper children other than the sidebar and the scrim (typically the
+  // SidebarInset). Prior inert state is saved per element and restored on
+  // close/disconnect (turbo:before-cache routes through closeMobile).
+  #inertOthers() {
+    this.inerted = []
+    const skip = ["SCRIPT", "STYLE", "LINK", "TEMPLATE"]
+    const mark = (el) => {
+      if (skip.includes(el.tagName)) return
+      this.inerted.push([el, el.inert])
+      el.inert = true
+    }
+    for (const el of document.body.children) {
+      if (el === this.element || el.contains(this.element)) continue
+      mark(el)
+    }
+    for (const el of this.element.children) {
+      if (el.matches(".pk-sidebar, .pk-sidebar-scrim")) continue
+      mark(el)
+    }
+  }
+
+  #restoreInert() {
+    for (const [el, wasInert] of this.inerted || []) el.inert = wasInert
+    this.inerted = null
+  }
+
+  // aria-controls: point every trigger/rail at the sidebar's id (server-side
+  // `controls:` wins; an id is generated when the sidebar has none).
+  #wireAriaControls() {
+    const sidebar = this.sidebar
+    if (!sidebar) return
+    if (!sidebar.id) sidebar.id = `pk-sidebar-${Math.random().toString(36).slice(2, 10)}`
+    for (const el of this.togglers) {
+      if (!el.getAttribute("aria-controls")) el.setAttribute("aria-controls", sidebar.id)
+    }
+  }
+
+  // aria-expanded mirrors the surface the viewport is actually showing:
+  // the mobile drawer's data-open below the cutoff, data-collapsed above it.
+  #syncExpanded() {
+    const expanded = this.mobile
+      ? this.element.hasAttribute("data-open")
+      : !this.element.hasAttribute("data-collapsed")
+    for (const el of this.togglers) el.setAttribute("aria-expanded", String(expanded))
+  }
 }

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

@@ -2,9 +2,14 @@ module PhlexKit
   # The interactive element of a SidebarMenuItem. `as:` is :button (default) or :a
   # (pass `href:`); `active: true` marks the current page (drives the highlight via
   # data-active — a named kwarg, not an attr, since `mix` would merge a repeated
-  # attribute rather than override). `tooltip:` labels the button while an
-  # icon-collapsed rail hides its text (pure-CSS hover bubble). Attrs pass
-  # through via mix. See sidebar.rb.
+  # attribute rather than override; an active link also gets aria-current="page").
+  # `tooltip:` labels the button while an icon-collapsed rail hides its text
+  # (pure-CSS hover bubble) and doubles as the aria-label so the button keeps an
+  # accessible name once the text is hidden. Bare block text is wrapped in a
+  # <span> automatically so the collapsed rail's `> :not(svg)` rule can hide it;
+  # blocks that emit their own markup (icon + <span>Label</span>) pass through
+  # untouched — keep the label in a real element there. Attrs pass through via
+  # mix. See sidebar.rb.
   class SidebarMenuButton < BaseComponent
     def initialize(as: :button, active: false, tooltip: nil, **attrs)
       @as = as
@@ -15,8 +20,22 @@ module PhlexKit
 
     def view_template(&block)
       base = { class: "pk-sidebar-menu-button", "data-active": (@active ? "true" : "false") }
-      base["data-tooltip"] = @tooltip if @tooltip
-      send(@as, **mix(base, @attrs), &block)
+      base["aria-current"] = "page" if @active && @as == :a
+      if @tooltip
+        base["data-tooltip"] = @tooltip
+        base["aria-label"] = @tooltip
+      end
+      send(@as, **mix(base, @attrs)) do
+        # capture renders the block once; pure text (no markup) gets the span
+        # wrapper the icon-collapsed CSS needs. The captured output is
+        # already-escaped HTML, so re-emit it via raw(safe(...)).
+        content = capture(&block)
+        if content.include?("<") || content.empty?
+          raw safe(content)
+        else
+          span { raw safe(content) }
+        end
+      end
     end
   end
 end

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

@@ -1,21 +1,30 @@
 module PhlexKit
   # Invisible grab strip along the sidebar's trailing edge — clicking it
   # toggles the collapse, like shadcn/ui's SidebarRail. Place it as the last
-  # child of a Sidebar inside a collapsible wrapper. See sidebar.rb.
+  # child of a Sidebar inside a collapsible wrapper. `expanded:` renders the
+  # initial aria-expanded (pass false when the wrapper starts
+  # default_collapsed); the phlex-kit--sidebar controller keeps it in sync on
+  # toggle. `controls:` renders aria-controls pointing at the Sidebar's id —
+  # when omitted, the controller wires it on connect. See sidebar.rb.
   class SidebarRail < BaseComponent
-    def initialize(**attrs)
+    def initialize(expanded: true, controls: nil, **attrs)
+      @expanded = expanded
+      @controls = controls
       @attrs = attrs
     end
 
     def view_template
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-sidebar-rail",
         aria_label: "Toggle sidebar",
+        "aria-expanded": @expanded ? "true" : "false",
         tabindex: "-1",
         title: "Toggle sidebar",
         data: { action: "click->phlex-kit--sidebar#toggle" }
-      }, @attrs))
+      }
+      base["aria-controls"] = @controls if @controls
+      button(**mix(base, @attrs))
     end
   end
 end

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

@@ -3,19 +3,29 @@ module PhlexKit
   # SidebarTrigger. Place it anywhere inside a
   # SidebarWrapper(collapsible: :offcanvas) — typically at the top of the
   # SidebarInset. Renders the :menu icon unless a block supplies its own
-  # content. Hidden by CSS unless the wrapper is offcanvas. See sidebar.rb.
+  # content. Hidden by CSS unless the wrapper is offcanvas. `expanded:` renders
+  # the initial aria-expanded (pass false when the wrapper starts
+  # default_collapsed); the phlex-kit--sidebar controller keeps it in sync on
+  # toggle. `controls:` renders aria-controls pointing at the Sidebar's id —
+  # when omitted, the controller wires it on connect (generating an id on the
+  # sidebar if needed). See sidebar.rb.
   class SidebarTrigger < BaseComponent
-    def initialize(**attrs)
+    def initialize(expanded: true, controls: nil, **attrs)
+      @expanded = expanded
+      @controls = controls
       @attrs = attrs
     end
 
     def view_template(&block)
-      button(**mix({
+      base = {
         type: :button,
         class: "pk-sidebar-trigger",
         aria_label: "Toggle sidebar",
+        "aria-expanded": @expanded ? "true" : "false",
         data: { action: "click->phlex-kit--sidebar#toggle" }
-      }, @attrs)) do
+      }
+      base["aria-controls"] = @controls if @controls
+      button(**mix(base, @attrs)) do
         block ? yield : render(Icon.new(:menu, size: nil))
       end
     end

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

@@ -26,7 +26,7 @@
   border-radius: 9999px;
   border: 1px solid var(--pk-ring);
   background: var(--pk-bg);
-  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-shadow-color) 25%, transparent);
   transition: box-shadow .15s ease;
 }
 .pk-slider:hover::-webkit-slider-thumb,

data/app/components/phlex_kit/slider/slider.rb

@@ -20,7 +20,9 @@ module PhlexKit
         step: @step,
         value: @value,
         class: "pk-slider",
-        style: "--pk-slider-progress: #{progress}%",
+        # Trailing ";" — mix joins a caller style: with a space; without it
+        # both declarations fuse into one invalid declaration.
+        style: "--pk-slider-progress: #{progress}%;",
         data: {
           controller: "phlex-kit--slider",
           action: "input->phlex-kit--slider#update"

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

@@ -16,7 +16,12 @@ module PhlexKit
 
     def view_template
       label(**mix({ class: [ "pk-switch", fetch_option(SIZES, @size, :size) ].compact.join(" ") }, @wrapper)) do
-        input(type: "hidden", name: @attrs[:name], value: @unchecked_value) if @include_hidden && @attrs[:name]
+        if @include_hidden && @attrs[:name]
+          # Disabled in lockstep with the checkbox (Rails' check_box idiom) —
+          # a disabled switch must not still post its unchecked value.
+          input(type: "hidden", name: @attrs[:name], value: @unchecked_value,
+            disabled: @attrs[:disabled] ? true : nil)
+        end
         # role="switch" belongs on the focusable control: native checkedness then
         # maps to aria-checked for AT, and the label stays a plain label.
         input(**mix({ class: "pk-switch-input", role: "switch" }, @attrs).merge(type: "checkbox", value: @checked_value))

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

@@ -16,13 +16,15 @@
 .pk-table-head {
   height: 2.5rem;
   padding: 0 .5rem;
-  text-align: left;
+  text-align: start;
   vertical-align: middle;
   font-weight: 500;
   white-space: nowrap;
   color: var(--pk-text);
 }
-.pk-table-head:has([role="checkbox"]),
-.pk-table-cell:has([role="checkbox"]) { padding-right: 0; }
+/* Native inputs (the kit Checkbox) have no role="checkbox" — match both;
+   the [role] arm covers custom/ARIA checkboxes. */
+.pk-table-head:has(input[type="checkbox"], [role="checkbox"]),
+.pk-table-cell:has(input[type="checkbox"], [role="checkbox"]) { padding-inline-end: 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

@@ -22,8 +22,8 @@
 .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:has(> [data-icon="inline-start"]) { padding-inline-start: .25rem; }
+.pk-tabs-trigger:has(> [data-icon="inline-end"]) { padding-inline-end: .25rem; }
 .pk-tabs-trigger:focus-visible {
   outline: none;
   border-color: var(--pk-ring);
@@ -33,7 +33,7 @@
   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);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--pk-shadow-color) 10%, transparent);
 }
 .pk-tabs-trigger:disabled { pointer-events: none; opacity: .5; }
 
@@ -57,7 +57,7 @@
 .pk-tabs.vertical .pk-tabs-trigger::after {
   inset-inline: auto;
   inset-block: 0;
-  right: -.25rem;
+  inset-inline-end: -.25rem;
   width: 2px;
   height: auto;
 }

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

@@ -1,14 +1,17 @@
 module PhlexKit
   class TabsContent < BaseComponent
-    def initialize(value:, **attrs)
+    def initialize(value:, active: false, **attrs)
       @value = value
+      @active = active
       @attrs = attrs
     end
     def view_template(&)
       # id / aria-labelledby mirror TabsTrigger's deterministic ids (re-scoped
       # per instance by the controller); tabindex="0" makes the panel itself
-      # focusable, per the APG tabs pattern.
-      div(**mix({ class: "pk-tabs-content pk-hidden", role: "tabpanel", id: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+      # focusable, per the APG tabs pattern. `active:` (mirroring TabsTrigger's)
+      # renders the panel visible pre-JS/no-JS; the controller's sync()
+      # reconciles visibility from the active value after connect.
+      div(**mix({ class: @active ? "pk-tabs-content" : "pk-tabs-content pk-hidden", role: "tabpanel", id: "pk-tabs-panel-#{@value}", aria_labelledby: "pk-tabs-trigger-#{@value}", tabindex: "0", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/tabs/tabs_controller.js

@@ -33,7 +33,9 @@ export default class extends Controller {
     const index = triggers.indexOf(document.activeElement)
     let target
     if (nextKeys.includes(event.key)) target = triggers[(index + 1) % triggers.length]
-    else if (prevKeys.includes(event.key)) target = triggers[(index - 1 + triggers.length) % triggers.length]
+    // index is -1 when focus isn't on a trigger — treat prev as "last"
+    // (the modulo would land on n-2 otherwise).
+    else if (prevKeys.includes(event.key)) target = triggers[index === -1 ? triggers.length - 1 : (index - 1 + triggers.length) % triggers.length]
     else if (event.key === "Home") target = triggers[0]
     else if (event.key === "End") target = triggers[triggers.length - 1]
     if (!target) return

data/app/components/phlex_kit/theme_toggle/theme_toggle.rb

@@ -10,8 +10,8 @@ module PhlexKit
   # FOUC, inline this in <head> before any stylesheets:
   #
   #   <script>
-  #     const t = localStorage.theme;
-  #     if (t === "dark" || t === "light") document.documentElement.dataset.theme = t;
+  #     let t; try { t = localStorage.theme } catch {}
+  #     document.documentElement.dataset.theme = (t === "dark" || t === "light") ? t : "system";
   #   </script>
   class ThemeToggle < BaseComponent
     def initialize(wrapper: {}, aria: {}, **attrs)