phlex_kit 0.8.0 → 0.9.0

data/app/components/phlex_kit/pagination/pagination_ellipsis.rb

@@ -3,7 +3,9 @@ module PhlexKit
     def initialize(**attrs) = (@attrs = attrs)
     def view_template
       li do
-        span(**mix({ class: "pk-pagination-ellipsis", aria: { hidden: true } }, @attrs)) do
+        # No aria-hidden on the wrapper — it would swallow the sr-only text.
+        # The Icon renders its own aria-hidden="true"; only the glyph is hidden.
+        span(**mix({ class: "pk-pagination-ellipsis" }, @attrs)) do
           render Icon.new(:ellipsis, size: nil)
           span(class: "pk-sr-only") { "More pages" }
         end

data/app/components/phlex_kit/popover/popover.css

@@ -21,7 +21,7 @@
   border-radius: var(--pk-radius);
   background: var(--pk-surface); color: var(--pk-text); padding: .625rem;
   font-size: .875rem;
-  box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--pk-shadow-color) 30%, transparent); outline: none;
 }
 /* display must be gated on :popover-open — an unconditional author
    `display: flex` would beat the UA's [popover] { display: none }. */

data/app/components/phlex_kit/resizable/resizable.css

@@ -7,6 +7,8 @@
   position: relative;
   flex: none;
   background: var(--pk-border);
+  /* without this, touch drags scroll the page instead of resizing */
+  touch-action: none;
 }
 .pk-resizable-group.horizontal > .pk-resizable-handle { width: 1px; cursor: col-resize; }
 .pk-resizable-group.vertical > .pk-resizable-handle { height: 1px; cursor: row-resize; }
@@ -19,7 +21,7 @@
 }
 .pk-resizable-handle:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 
 /* Visible grip pill (their withHandle / .cn-resizable-handle-icon). */

data/app/components/phlex_kit/resizable/resizable_controller.js

@@ -1,13 +1,36 @@
 import { Controller } from "@hotwired/stimulus"
 
 // PhlexKit's stand-in for react-resizable-panels behind shadcn's Resizable:
-// dragging a handle rebalances the flex-grow of the two panels around it.
+// dragging (or arrow-keying) a handle rebalances the flex-grow of the two
+// panels around it. The handle is a focusable role="separator", so it also
+// carries the ARIA value contract: aria-valuenow tracks the leading panel's
+// share of the pair, and aria-orientation follows the group direction (a
+// handle in a horizontal group is a vertical separator).
 // Connects to data-controller="phlex-kit--resizable"
 export default class extends Controller {
   static targets = ["panel", "handle"]
   static values = { direction: { type: String, default: "horizontal" } }
 
+  disconnect() {
+    // a disconnect mid-drag must drop the handle's move/up listeners
+    if (this._activeDrag) {
+      const { handle, onMove, onUp } = this._activeDrag
+      handle.removeEventListener("pointermove", onMove)
+      handle.removeEventListener("pointerup", onUp)
+      handle.removeEventListener("pointercancel", onUp)
+      this._activeDrag = null
+    }
+  }
+
+  handleTargetConnected(handle) {
+    handle.setAttribute("aria-orientation", this.directionValue === "horizontal" ? "vertical" : "horizontal")
+    handle.setAttribute("aria-valuemin", "0")
+    handle.setAttribute("aria-valuemax", "100")
+    this.syncValuenow(handle)
+  }
+
   start(e) {
+    if (e.button !== 0 || !e.isPrimary) return
     const handle = e.currentTarget
     const prev = handle.previousElementSibling
     const next = handle.nextElementSibling
@@ -20,6 +43,10 @@ export default class extends Controller {
       startPos: horizontal ? e.clientX : e.clientY,
       prevSize: sizeOf(prev),
       nextSize: sizeOf(next),
+      // The drag redistributes the PAIR's combined flex-grow, not a fixed
+      // constant: normalizing to 2 rescaled the pair against untouched
+      // siblings, so in a 25/25/50 group the 50 panel ballooned on first drag.
+      pairGrow: this.growOf(prev) + this.growOf(next) || 2,
     }
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
@@ -27,16 +54,64 @@ export default class extends Controller {
       const delta = (horizontal ? ev.clientX : ev.clientY) - drag.startPos
       const total = drag.prevSize + drag.nextSize
       const prevSize = Math.min(Math.max(drag.prevSize + delta, 0), total)
-      prev.style.flexGrow = (prevSize / total) * 2
-      next.style.flexGrow = ((total - prevSize) / total) * 2
+      prev.style.flexGrow = (prevSize / total) * drag.pairGrow
+      next.style.flexGrow = ((total - prevSize) / total) * drag.pairGrow
+      this.syncValuenow(handle)
     }
     const onUp = () => {
       handle.removeEventListener("pointermove", onMove)
       handle.removeEventListener("pointerup", onUp)
       handle.removeEventListener("pointercancel", onUp)
+      this._activeDrag = null
     }
     handle.addEventListener("pointermove", onMove)
     handle.addEventListener("pointerup", onUp)
     handle.addEventListener("pointercancel", onUp)
+    this._activeDrag = { handle, onMove, onUp } // for disconnect() cleanup
+  }
+
+  // Arrow keys resize by 5% of the pair per press (matching the drag axis);
+  // Home/End collapse the leading panel to its min/max.
+  keydown(e) {
+    const handle = e.currentTarget
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+
+    const horizontal = this.directionValue === "horizontal"
+    const steps = horizontal
+      ? { ArrowLeft: -0.05, ArrowRight: 0.05 }
+      : { ArrowUp: -0.05, ArrowDown: 0.05 }
+
+    const pairGrow = this.growOf(prev) + this.growOf(next) || 2
+    let share = this.growOf(prev) / (pairGrow || 1)
+    if (e.key in steps) {
+      share = Math.min(1, Math.max(0, share + steps[e.key]))
+    } else if (e.key === "Home") {
+      share = 0
+    } else if (e.key === "End") {
+      share = 1
+    } else {
+      return
+    }
+    e.preventDefault()
+
+    prev.style.flexGrow = share * pairGrow
+    next.style.flexGrow = (1 - share) * pairGrow
+    this.syncValuenow(handle)
+  }
+
+  growOf(el) {
+    const g = parseFloat(getComputedStyle(el).flexGrow)
+    return Number.isFinite(g) ? g : 1
+  }
+
+  syncValuenow(handle) {
+    const prev = handle.previousElementSibling
+    const next = handle.nextElementSibling
+    if (!prev || !next) return
+    const pair = this.growOf(prev) + this.growOf(next)
+    const share = pair > 0 ? this.growOf(prev) / pair : 0.5
+    handle.setAttribute("aria-valuenow", String(Math.round(share * 100)))
   }
 }

data/app/components/phlex_kit/resizable/resizable_handle.rb

@@ -12,10 +12,12 @@ module PhlexKit
         class: "pk-resizable-handle",
         role: "separator",
         tabindex: "0",
+        # Correct for the default horizontal group; the controller re-stamps
+        # orientation (and aria-valuenow/min/max) per group direction on connect.
         aria: { orientation: "vertical" },
         data: {
           phlex_kit__resizable_target: "handle",
-          action: "pointerdown->phlex-kit--resizable#start"
+          action: "pointerdown->phlex-kit--resizable#start keydown->phlex-kit--resizable#keydown"
         }
       }, @attrs)) do
         span(class: "pk-resizable-handle-grip", aria: { hidden: "true" }) if @with_handle

data/app/components/phlex_kit/resizable/resizable_panel.rb

@@ -10,7 +10,9 @@ module PhlexKit
     end
 
     def view_template(&)
-      style = @default_size ? "flex-grow: #{Kernel.format("%g", @default_size)}" : nil
+      # Trailing ";" matters: Phlex's mix joins string attrs with a space, so
+      # a caller style: would otherwise fuse into one invalid declaration.
+      style = @default_size ? "flex-grow: #{Kernel.format("%g", @default_size)};" : nil
       div(**mix({
         class: "pk-resizable-panel",
         style: style,

data/app/components/phlex_kit/scroll_area/scroll_area.rb

@@ -1,7 +1,9 @@
 module PhlexKit
   # Styled scroll container, ported from shadcn/ui's ScrollArea. Radix's custom
   # scrollbars are replaced with native thin scrollbars themed via CSS — no JS.
-  # Constrain it with a height/width from the caller. `.pk-scroll-area`
+  # Constrain it with a height/width from the caller. tabindex=0 makes the
+  # scrollable region keyboard-focusable (WCAG); role=region gives that focus
+  # stop a role — pass `aria: { label: ... }` to name it. `.pk-scroll-area`
   # (scroll_area.css).
   class ScrollArea < BaseComponent
     def initialize(**attrs)
@@ -9,7 +11,7 @@ module PhlexKit
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-scroll-area", tabindex: "0" }, @attrs), &)
+      div(**mix({ class: "pk-scroll-area", tabindex: "0", role: "region" }, @attrs), &)
     end
   end
 end

data/app/components/phlex_kit/select/select.css

@@ -44,7 +44,7 @@
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
 }
 .pk-select-trigger:disabled { cursor: not-allowed; opacity: .5; }
-.pk-select-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-left: .5rem; opacity: .5; }
+.pk-select-trigger-icon { flex: none; width: 1rem; height: 1rem; margin-inline-start: .5rem; opacity: .5; }
 .pk-select-value { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
 
 /* Dropdown panel — anchored directly below the trigger, flips above at the
@@ -75,7 +75,7 @@
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: .25rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-shadow-color) 40%, transparent);
 }
 
 .pk-select-label { margin: 0; padding: .25rem .375rem; font-size: .75rem; font-weight: 400; color: var(--pk-muted); }
@@ -102,7 +102,7 @@
 .pk-select-item-check {
   visibility: hidden;
   position: absolute;
-  right: .5rem;
+  inset-inline-end: .5rem;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -2,11 +2,13 @@ module PhlexKit
   # Custom dropdown select, ported from ruby_ui's RubyUI::Select — the styled
   # popover (Image #2), NOT the native <select> (that's PhlexKit::NativeSelect). Unlike
   # the rest of the kit this component IS JS-driven: it keeps ruby_ui's Stimulus
-  # wiring (`phlex-kit--select` / `phlex-kit--select-item`, in
-  # app/javascript/controllers/ruby_ui/), since the open/close, selection, and
-  # keyboard nav are the point. The one change from upstream: the controller drops
-  # the `@floating-ui/dom` dependency and positions the panel with plain CSS
-  # (opens directly below the trigger). Tailwind → vanilla `.pk-select-*` (select.css).
+  # wiring (`phlex-kit--select`), since the open/close, selection, and keyboard
+  # nav are the point. Two changes from upstream: the controller drops the
+  # `@floating-ui/dom` dependency and positions the panel with plain CSS (opens
+  # directly below the trigger), and selection flips aria-selected via the
+  # instance-scoped itemTargets rather than upstream's document-scoped
+  # `.pk-select-item` outlet (which clobbered every other Select on the page).
+  # Tailwind → vanilla `.pk-select-*` (select.css).
   #
   # Multi-part. The hidden SelectInput carries the form value/name; SelectTrigger +
   # SelectValue are the closed-state button; SelectContent > SelectGroup >
@@ -34,8 +36,10 @@ module PhlexKit
         data: {
           controller: "phlex-kit--select",
           phlex_kit__select_open_value: "false",
-          action: "click@window->phlex-kit--select#clickOutside",
-          phlex_kit__select_phlex_kit__select_item_outlet: ".pk-select-item"
+          # 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

@@ -8,7 +8,6 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "value", "item"];
   static values = { open: Boolean };
-  static outlets = ["phlex-kit--select-item"];
 
   connect() {
     this.generateItemsIds();
@@ -17,13 +16,20 @@ export default class extends Controller {
   selectItem(event) {
     event.preventDefault();
 
-    this.phlexKitSelectItemOutlets.forEach((item) => item.handleSelectItem(event));
+    // currentTarget, not target: the click may land on a child of the item
+    // (target.dataset.value would be undefined). itemTargets, not a
+    // document-scoped outlet: outlets match `.pk-select-item` page-wide and
+    // clobbered every other Select's aria-selected.
+    const item = event.currentTarget;
+    this.itemTargets.forEach((el) => {
+      el.setAttribute("aria-selected", el === item ? "true" : "false");
+    });
 
     const oldValue = this.inputTarget.value;
-    const newValue = event.target.dataset.value;
+    const newValue = item.dataset.value;
 
     this.inputTarget.value = newValue;
-    this.valueTarget.innerText = event.target.innerText;
+    this.valueTarget.innerText = item.innerText;
 
     this.dispatchOnChange(oldValue, newValue);
     this.closeContent();
@@ -66,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();
   }
@@ -79,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"));
   }
@@ -127,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,14 +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,
-          controller: "phlex-kit--select-item",
           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;
 }
@@ -169,14 +169,23 @@
 .pk-sidebar-wrapper.collapsible-offcanvas .pk-sidebar,
 .pk-sidebar-wrapper.collapsible-icon .pk-sidebar {
   position: relative;
-  transition: margin-left .2s ease, transform .2s ease, width .2s ease;
+  /* visibility rides the transition: it stays visible while sliding out and
+     flips hidden at the end — hidden also drops the off-screen links from
+     the tab order (they stayed focusable while invisible before). */
+  transition: margin-left .2s ease, transform .2s ease, width .2s ease, visibility .2s;
 }
-.pk-sidebar-wrapper.collapsible-offcanvas[data-collapsed] .pk-sidebar { margin-left: -16rem; }
+.pk-sidebar-wrapper.collapsible-offcanvas[data-collapsed] .pk-sidebar { margin-left: -16rem; visibility: hidden; }
 
 /* Icon mode: the rail shrinks to a 3rem strip — labels and text hide, menu
    buttons become centered icon squares, hover shows a data-tooltip bubble. */
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar { width: 3rem; }
-.pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: none; }
+/* Desktop-only: at mobile widths icon mode becomes the full drawer, and the
+   labels/subs must keep their AUTHOR display values (flex). The old approach
+   un-hid them with `display: revert`, but revert rolls back to the USER-AGENT
+   origin — group labels lost their flex centering, sub lists their gap. */
+@media (min-width: 768px) {
+  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: none; }
+}
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-header, .pk-sidebar-content, .pk-sidebar-footer) {
   padding-inline: .5rem;
   align-items: center;
@@ -187,7 +196,9 @@
   padding: .5rem;
   justify-content: center;
 }
-.pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: none; }
+@media (min-width: 768px) {
+  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: none; }
+}
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button[data-tooltip] { position: relative; }
 .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button[data-tooltip]:hover::after {
   content: attr(data-tooltip);
@@ -252,9 +263,8 @@
 @media (max-width: 767px) {
   /* Below the cutoff both collapsible modes become the overlay drawer. */
   .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar { width: 16rem; }
-  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] :is(.pk-sidebar-group-label, .pk-sidebar-group-action, .pk-sidebar-menu-badge, .pk-sidebar-menu-action, .pk-sidebar-menu-sub, .pk-sidebar-input, .pk-sidebar-separator) { display: revert; }
+  /* No un-hiding needed: the icon-mode hide rules are scoped to >=768px. */
   .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button { width: 100%; height: auto; padding: .5rem; justify-content: flex-start; }
-  .pk-sidebar-wrapper.collapsible-icon[data-collapsed] .pk-sidebar-menu-button > :not(svg) { display: revert; }
   .pk-sidebar-wrapper.collapsible-icon .pk-sidebar-rail { display: none; }
   .pk-sidebar-wrapper:is(.collapsible-offcanvas, .collapsible-icon) .pk-sidebar {
     position: fixed;
@@ -264,15 +274,17 @@
     height: 100dvh;
     margin-left: 0;
     transform: translateX(-100%);
-    box-shadow: 0 8px 30px rgb(0 0 0 / .35);
+    /* closed drawer: invisible AND out of the tab order */
+    visibility: hidden;
+    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; }
+  .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 {
     display: block;
     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;