phlex_kit 0.9.1 → 0.10.0

data/app/components/phlex_kit/popover/popover_controller.js

@@ -33,7 +33,15 @@ export default class extends Controller {
     this.contentTarget.togglePopover()
   }
 
+  // One stable handler added/removed symmetrically — an anonymous listener
+  // here would pile up a duplicate on every target reconnect.
+  syncState = (e) => { e.target.dataset.state = e.newState === "open" ? "open" : "closed" }
+
   contentTargetConnected(el) {
-    el.addEventListener("toggle", (e) => { el.dataset.state = e.newState === "open" ? "open" : "closed" })
+    el.addEventListener("toggle", this.syncState)
+  }
+
+  contentTargetDisconnected(el) {
+    el.removeEventListener("toggle", this.syncState)
   }
 }

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

@@ -47,15 +47,21 @@ export default class extends Controller {
       // 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,
+      // Snapshot the group's total grow: min/max-size percentages are shares
+      // of the WHOLE group, and untouched siblings keep their grow mid-drag.
+      groupGrow: this.groupGrow(),
     }
     try { handle.setPointerCapture(e.pointerId) } catch {}
 
     const onMove = (ev) => {
+      // LTR assumption: clientX grows toward the trailing panel; RTL drag
+      // inversion is a documented limitation.
       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) * drag.pairGrow
-      next.style.flexGrow = ((total - prevSize) / total) * drag.pairGrow
+      const prevGrow = this.clampPrevGrow(prev, next, (prevSize / total) * drag.pairGrow, drag.pairGrow, drag.groupGrow)
+      prev.style.flexGrow = prevGrow
+      next.style.flexGrow = drag.pairGrow - prevGrow
       this.syncValuenow(handle)
     }
     const onUp = () => {
@@ -71,7 +77,8 @@ export default class extends Controller {
   }
 
   // Arrow keys resize by 5% of the pair per press (matching the drag axis);
-  // Home/End collapse the leading panel to its min/max.
+  // Home/End collapse the leading panel to its min/max (clamped to any
+  // per-panel min-size/max-size bounds, same as drags).
   keydown(e) {
     const handle = e.currentTarget
     const prev = handle.previousElementSibling
@@ -96,8 +103,9 @@ export default class extends Controller {
     }
     e.preventDefault()
 
-    prev.style.flexGrow = share * pairGrow
-    next.style.flexGrow = (1 - share) * pairGrow
+    const prevGrow = this.clampPrevGrow(prev, next, share * pairGrow, pairGrow, this.groupGrow())
+    prev.style.flexGrow = prevGrow
+    next.style.flexGrow = pairGrow - prevGrow
     this.syncValuenow(handle)
   }
 
@@ -106,6 +114,42 @@ export default class extends Controller {
     return Number.isFinite(g) ? g : 1
   }
 
+  // Clamp the leading panel's proposed flex-grow to both panels' optional
+  // min-size/max-size percentages. Bounds are shares of the whole group
+  // (grow / groupGrow), and the pair's combined grow is fixed, so a bound on
+  // one panel implies the complementary bound on its neighbour. Without any
+  // bounds this collapses to the historical [0, pairGrow] clamp.
+  clampPrevGrow(prev, next, prevGrow, pairGrow, groupGrow) {
+    const pb = this.boundsOf(prev)
+    const nb = this.boundsOf(next)
+    let lo = 0
+    let hi = pairGrow
+    if (pb.min !== null) lo = Math.max(lo, pb.min * groupGrow)
+    if (nb.max !== null) lo = Math.max(lo, pairGrow - nb.max * groupGrow)
+    if (pb.max !== null) hi = Math.min(hi, pb.max * groupGrow)
+    if (nb.min !== null) hi = Math.min(hi, pairGrow - nb.min * groupGrow)
+    if (lo > hi) return Math.min(Math.max(prevGrow, 0), pairGrow) // unsatisfiable bounds: ignore them
+    return Math.min(Math.max(prevGrow, lo), hi)
+  }
+
+  // A panel's declared size bounds as fractions of the group, or nulls.
+  boundsOf(el) {
+    const min = parseFloat(el.getAttribute("data-phlex-kit--resizable-min-size"))
+    const max = parseFloat(el.getAttribute("data-phlex-kit--resizable-max-size"))
+    return {
+      min: Number.isFinite(min) ? min / 100 : null,
+      max: Number.isFinite(max) ? max / 100 : null,
+    }
+  }
+
+  // Combined flex-grow of this group's own panels (direct children only —
+  // panels of a nested group belong to that group's own controller).
+  groupGrow() {
+    return [...this.element.children]
+      .filter((el) => el.matches('[data-phlex-kit--resizable-target~="panel"]'))
+      .reduce((sum, el) => sum + this.growOf(el), 0) || 2
+  }
+
   syncValuenow(handle) {
     const prev = handle.previousElementSibling
     const next = handle.nextElementSibling

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

@@ -1,11 +1,16 @@
 module PhlexKit
-  # One pane of a ResizablePanelGroup. `default_size:` is a percentage.
+  # One pane of a ResizablePanelGroup. `default_size:`, `min_size:` and
+  # `max_size:` are percentages of the group (shadcn's defaultSize/minSize/
+  # maxSize); the bounds ride along as data attributes the resizable
+  # controller clamps drags and keyboard resizes against.
   # See resizable_panel_group.rb.
   class ResizablePanel < BaseComponent
-    def initialize(default_size: nil, **attrs)
-      # Numeric coercion: the value is interpolated into a style attribute, and
+    def initialize(default_size: nil, min_size: nil, max_size: nil, **attrs)
+      # Numeric coercion: the values are interpolated into attributes, and
       # hosts plausibly round-trip saved panel sizes from client state.
       @default_size = default_size.nil? ? nil : Float(default_size)
+      @min_size = min_size.nil? ? nil : Float(min_size)
+      @max_size = max_size.nil? ? nil : Float(max_size)
       @attrs = attrs
     end
 
@@ -16,7 +21,11 @@ module PhlexKit
       div(**mix({
         class: "pk-resizable-panel",
         style: style,
-        data: { phlex_kit__resizable_target: "panel" }
+        data: {
+          phlex_kit__resizable_target: "panel",
+          phlex_kit__resizable_min_size: @min_size && Kernel.format("%g", @min_size),
+          phlex_kit__resizable_max_size: @max_size && Kernel.format("%g", @max_size)
+        }.compact
       }.compact, @attrs), &)
     end
   end

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

@@ -2,16 +2,32 @@ 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. 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).
+  # scrollable region keyboard-focusable (WCAG scrollable-region-focusable).
+  # Pass `aria: { label: ... }` (or aria-labelledby) to name it — only then
+  # does it render role=region; a nameless region is noise for AT, so the
+  # role is omitted when unlabelled. `.pk-scroll-area` (scroll_area.css).
   class ScrollArea < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
     end
 
     def view_template(&)
-      div(**mix({ class: "pk-scroll-area", tabindex: "0", role: "region" }, @attrs), &)
+      base = { class: "pk-scroll-area", tabindex: "0" }
+      base[:role] = "region" if labelled?
+      div(**mix(base, @attrs), &)
+    end
+
+    private
+
+    # True when the caller supplies an accessible name, via the aria: hash
+    # (aria: { label:/labelledby: }) or flat aria_label/aria-labelledby attrs.
+    def labelled?
+      aria = @attrs[:aria] || @attrs["aria"]
+      if aria.is_a?(Hash)
+        return true if %w[label labelledby].any? { |k| aria[k.to_sym] || aria[k] }
+      end
+      [ :aria_label, "aria_label", "aria-label",
+       :aria_labelledby, "aria_labelledby", "aria-labelledby" ].any? { |k| @attrs[k] }
     end
   end
 end

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

@@ -22,7 +22,6 @@
   white-space: nowrap;
   border-radius: var(--pk-radius);
   border: 1px solid var(--pk-input);
-  background: transparent;
   color: var(--pk-text);
   padding: .25rem .5rem .25rem .625rem;
   gap: .375rem;

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

@@ -5,8 +5,11 @@ module PhlexKit
   # inner `.pk-select-viewport` is the bordered, scrollable box.
   # Holds SelectGroup / SelectLabel / SelectItem children. See select.rb.
   class SelectContent < BaseComponent
-    def initialize(**attrs)
-      @id = "pk-select-content-#{SecureRandom.hex(4)}"
+    # id: is a named kwarg (not left in **attrs) because `mix` would *merge* a
+    # caller id with the generated one into an invalid two-token id, breaking
+    # aria-controls and the generated item ids.
+    def initialize(id: nil, **attrs)
+      @id = id || "pk-select-content-#{SecureRandom.hex(4)}"
       @attrs = attrs
     end
 
@@ -17,7 +20,10 @@ module PhlexKit
         tabindex: "-1",
         class: "pk-select-content",
         popover: "manual",
-        data: { phlex_kit__select_target: "content" }
+        data: {
+          phlex_kit__select_target: "content",
+          action: "keydown->phlex-kit--select#typeahead"
+        }
       }, @attrs)) do
         div(class: "pk-select-viewport", &block)
       end

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

@@ -21,6 +21,9 @@ export default class extends Controller {
     // document-scoped outlet: outlets match `.pk-select-item` page-wide and
     // clobbered every other Select's aria-selected.
     const item = event.currentTarget;
+    // A malformed (hand-written) item without data-value must never submit
+    // the literal string "undefined". SelectItem itself fails loud on nil.
+    if (item.dataset.value === undefined) return;
     this.itemTargets.forEach((el) => {
       el.setAttribute("aria-selected", el === item ? "true" : "false");
     });
@@ -36,7 +39,7 @@ export default class extends Controller {
   }
 
   onClick() {
-    this.toogleContent();
+    this.toggleContent();
 
     if (this.openValue) {
       this.setFocusAndCurrent();
@@ -127,10 +130,37 @@ export default class extends Controller {
   // Open/close derive from the live :popover-open state, never a stored
   // flag — a stale flag is how a close on an already-closed panel becomes
   // an open (bit the popover's keyboard toggle).
-  toogleContent() {
+  toggleContent() {
     this.contentTarget.matches(":popover-open") ? this.#hide() : this.#show();
   }
 
+  // Listbox typeahead: printable keys accumulate into a short-lived buffer
+  // and move the highlight to the first option whose text starts with it.
+  typeahead(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    if (event.key.length !== 1 || event.key === " ") return; // Space selects
+    clearTimeout(this.typeaheadTimer);
+    this.typeaheadBuffer = (this.typeaheadBuffer || "") + event.key.toLowerCase();
+    this.typeaheadTimer = setTimeout(() => { this.typeaheadBuffer = ""; }, 500);
+
+    let index = this.itemTargets.findIndex((item) =>
+      item.innerText.trim().toLowerCase().startsWith(this.typeaheadBuffer));
+    if (index < 0) {
+      // Buffer stopped matching — restart it from this keystroke (APG
+      // typeahead: a failed prefix shouldn't dead-end until the timer clears).
+      this.typeaheadBuffer = event.key.toLowerCase();
+      index = this.itemTargets.findIndex((item) =>
+        item.innerText.trim().toLowerCase().startsWith(this.typeaheadBuffer));
+    }
+    if (index < 0) return;
+    this.resetCurrent();
+    this.setAriaCurrentAndActiveDescendant(index);
+  }
+
+  disconnect() {
+    clearTimeout(this.typeaheadTimer);
+  }
+
   #show() {
     this.openValue = true;
     this.contentTarget.showPopover();

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

@@ -7,7 +7,10 @@ module PhlexKit
   # repeated attribute rather than override it.
   # See select.rb.
   class SelectItem < BaseComponent
-    def initialize(value: nil, selected: false, **attrs)
+    def initialize(value:, selected: false, **attrs)
+      # nil would render no data-value at all and the controller would submit
+      # the literal string "undefined" — fail loud instead.
+      raise ArgumentError, "SelectItem requires a value:" if value.nil?
       @value = value
       @selected = selected
       @attrs = attrs
@@ -25,6 +28,7 @@ module PhlexKit
         data: {
           value: @value,
           action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
+                  "keydown.space->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",

data/app/components/phlex_kit/separator/separator.rb

@@ -6,9 +6,15 @@ module PhlexKit
   # the kit's fail-loud selectors.
   class Separator < BaseComponent
     ORIENTATIONS = %i[horizontal vertical].freeze
+    # `as:` is dispatched dynamically (send) — whitelist the documented
+    # elements so it can't reach arbitrary (including private) methods.
+    AS_TAGS = %i[div hr].freeze
 
     def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs)
-      @as = as
+      @as = as.to_sym
+      unless AS_TAGS.include?(@as)
+        raise ArgumentError, "unknown Separator as: #{@as.inspect} (use one of #{AS_TAGS.join(", ")})"
+      end
       @orientation = orientation.to_sym
       unless ORIENTATIONS.include?(@orientation)
         raise ArgumentError, "Invalid orientation: #{orientation.inspect}"

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

@@ -4,7 +4,7 @@ module PhlexKit
   class SheetClose < BaseComponent
     def initialize(**attrs) = (@attrs = attrs)
     def view_template(&)
-      span(**mix({ style: "display: contents", data: { action: "click->phlex-kit--sheet-content#close" } }, @attrs), &)
+      span(**mix({ style: "display: contents;", data: { action: "click->phlex-kit--sheet-content#close" } }, @attrs), &)
     end
   end
 end

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

@@ -66,7 +66,7 @@
   width: 100%;
   padding: .5rem .65rem;
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(var(--pk-radius) - 2px);
   background: transparent;
   color: var(--pk-sidebar-text, var(--pk-text));
   font: inherit;

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

@@ -25,11 +25,21 @@ export default class extends Controller {
   static COOKIE = "pk_sidebar_state"
 
   connect() {
+    // Crossing to desktop while the mobile drawer is open would strand the
+    // page inert: the scrim/drawer CSS stops applying at >=768px but the
+    // inert marks (and data-open) would survive. Close on breakpoint change.
+    this.mql = window.matchMedia(this.constructor.MOBILE)
+    this.onBreakpoint = () => {
+      if (!this.mql.matches) this.closeMobile()
+      this.#syncExpanded()
+    }
+    this.mql.addEventListener("change", this.onBreakpoint)
     this.#wireAriaControls()
     this.#syncExpanded()
   }
 
   disconnect() {
+    this.mql.removeEventListener("change", this.onBreakpoint)
     this.#restoreInert()
   }
 

data/app/components/phlex_kit/tabs/tabs.css

@@ -44,7 +44,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-.pk-tabs-trigger::after {
+.pk-tabs-list.line .pk-tabs-trigger::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -54,7 +54,7 @@
   opacity: 0;
   transition: opacity .15s ease;
 }
-.pk-tabs.vertical .pk-tabs-trigger::after {
+.pk-tabs.vertical .pk-tabs-list.line .pk-tabs-trigger::after {
   inset-inline: auto;
   inset-block: 0;
   inset-inline-end: -.25rem;

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

@@ -13,7 +13,10 @@ export default class extends Controller {
       this.listTarget.setAttribute("aria-orientation", "vertical")
     }
     if (!this.hasActiveValue && this.triggerTargets.length > 0) {
-      this.activeValue = this.triggerTargets[0].dataset.value
+      // Honor a server-marked TabsTrigger(active: true) before falling back
+      // to the first trigger — hydration must not contradict the markup.
+      const marked = this.triggerTargets.find((el) => el.dataset.state === "active")
+      this.activeValue = (marked || this.triggerTargets[0]).dataset.value
     } else {
       this.sync()
     }

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

@@ -17,7 +17,10 @@ module PhlexKit
         aria_selected: @active ? "true" : "false",
         aria_controls: "pk-tabs-panel-#{@value}",
         tabindex: @active ? "0" : "-1",
-        data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value }
+        # data-state is the only hook tabs.css styles the active trigger by —
+        # it must be server-rendered or the active tab looks inactive pre-JS.
+        data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value,
+                state: @active ? "active" : "inactive" }
       }
       if @as == :a
         a(**mix(base, @attrs), &)

data/app/components/phlex_kit/toast/toast.css

@@ -40,7 +40,7 @@
   width: 356px;
   max-width: 100%;
   border: 1px solid var(--pk-border);
-  border-radius: 1rem;
+  border-radius: calc(var(--pk-radius) + 6px); /* 1rem at the default 0.625rem token */
   background: var(--pk-surface);
   color: var(--pk-text);
   padding: 1rem;

data/app/components/phlex_kit/toast/toast_controller.js

@@ -17,6 +17,7 @@ export default class extends Controller {
 
   connect() {
     this._timer = null
+    this._unmountTimer = null
     this._startedAt = 0
     this._remaining = this.durationValue
     this._paused = false
@@ -66,6 +67,10 @@ export default class extends Controller {
 
   disconnect() {
     this._clearTimer()
+    // Don't let a pending 200ms unmount fire after teardown (e.g. into a
+    // Turbo-cached copy of the page).
+    if (this._unmountTimer) clearTimeout(this._unmountTimer)
+    this._unmountTimer = null
     this.element.removeEventListener("pointerdown", this._onPointerDown)
     this.element.removeEventListener("pointerenter", this._onPointerEnter)
     this.element.removeEventListener("pointerleave", this._onPointerLeave)
@@ -89,7 +94,7 @@ export default class extends Controller {
     this.element.dataset.state = "closing"
     this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "phlex-kit:toast:auto-close" : "phlex-kit:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
     this._invokeCallback(reason === "auto" ? this.onAutoCloseValue : this.onDismissValue)
-    setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
+    this._unmountTimer = setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
   }
 
   // on_dismiss:/on_auto_close: name a global function (Sonner-style callback

data/app/components/phlex_kit/toast/toaster_controller.js

@@ -50,6 +50,7 @@ export default class extends Controller {
     this._heights = new Map()
     this._resizeObservers = new WeakMap()
     this._expanded = false
+    this._paused = false
   }
 
   connect() {
@@ -59,8 +60,11 @@ export default class extends Controller {
     registerStreamAction()
     if (!this._listEl) return
 
-    this._onPointerEnter = () => this._setExpanded(true)
-    this._onPointerLeave = () => { if (!this.expandValue) this._setExpanded(false) }
+    // Pause/resume tracks the POINTER, not the expand transition: an
+    // expand:true region is born expanded, and tying the pause dispatch to
+    // _setExpanded's state change left auto-dismiss running under the cursor.
+    this._onPointerEnter = () => { this._setPaused(true); this._setExpanded(true) }
+    this._onPointerLeave = () => { this._setPaused(false); if (!this.expandValue) this._setExpanded(false) }
     this._onWindowToast = (e) => this._spawn(e.detail || {})
     this._onWindowDismissAll = () => this._dismissById(null)
     this._onKey = this._onKey.bind(this)
@@ -82,6 +86,10 @@ export default class extends Controller {
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
+    // Drop the global API if it still closes over this controller — after
+    // region teardown it would touch a stale _listEl. A replacement region
+    // re-registers its own on connect.
+    if (window.PhlexKit?.toast === this._api) delete window.PhlexKit.toast
   }
 
   toastTargetConnected(el) {
@@ -178,13 +186,18 @@ export default class extends Controller {
     return tpl.content.firstElementChild.cloneNode(true)
   }
 
-  _setExpanded(value) {
-    if (this._expanded === value) return
-    this._expanded = value
+  _setPaused(value) {
+    if (this._paused === value) return
+    this._paused = value
     // Mirror the pause state onto the DOM so toasts spawned while the stack
     // is already hovered can arm paused (the pause event predates them).
     this._listEl?.toggleAttribute("data-pk-toasts-paused", value)
     document.dispatchEvent(new CustomEvent(value ? "phlex-kit:toast:pause" : "phlex-kit:toast:resume"))
+  }
+
+  _setExpanded(value) {
+    if (this._expanded === value) return
+    this._expanded = value
     this._reflow()
   }
 
@@ -303,6 +316,7 @@ export default class extends Controller {
     }
 
     window.PhlexKit = window.PhlexKit || {}
+    this._api = api
     window.PhlexKit.toast = api
   }
 

data/app/components/phlex_kit/toggle_group/toggle_group.css

@@ -1,11 +1,11 @@
 /* Co-located with toggle_group.rb. Theme tokens from the global stylesheet. */
 .pk-toggle-group { display: inline-flex; width: fit-content; align-items: center; border-radius: var(--pk-radius); }
 .pk-toggle-group.vertical { flex-direction: column; align-items: stretch; }
-.pk-toggle-group.spaced { gap: .25rem; }
+/* spacing: N stamps --pk-toggle-group-gap inline (N × .25rem). */
+.pk-toggle-group.spaced { gap: var(--pk-toggle-group-gap, .25rem); }
 /* Joined (default, unspaced): square the inner corners, tighten padding. */
-.pk-toggle-group:not(.spaced) .pk-toggle-group-item { padding-inline: .5rem; }
-.pk-toggle-group:not(.spaced) .pk-toggle-group-item { border-radius: 0; }
-.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:first-of-type { border-top-left-radius: var(--pk-radius); border-bottom-left-radius: var(--pk-radius); }
-.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:last-of-type { border-top-right-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }
-.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:first-of-type { border-top-left-radius: var(--pk-radius); border-top-right-radius: var(--pk-radius); }
-.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:last-of-type { border-bottom-left-radius: var(--pk-radius); border-bottom-right-radius: var(--pk-radius); }
+.pk-toggle-group:not(.spaced) .pk-toggle-group-item { padding-inline: .5rem; border-radius: 0; }
+.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:first-of-type { border-start-start-radius: var(--pk-radius); border-end-start-radius: var(--pk-radius); }
+.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:last-of-type { border-start-end-radius: var(--pk-radius); border-end-end-radius: var(--pk-radius); }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:first-of-type { border-start-start-radius: var(--pk-radius); border-start-end-radius: var(--pk-radius); }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:last-of-type { border-end-start-radius: var(--pk-radius); border-end-end-radius: var(--pk-radius); }

data/app/components/phlex_kit/toggle_group/toggle_group.rb

@@ -54,12 +54,17 @@ module PhlexKit
     end
 
     def group_default_attrs
-      { role: (@type == :single) ? "radiogroup" : "group",
+      attrs = { role: (@type == :single) ? "radiogroup" : "group",
         class: [ "pk-toggle-group", (@orientation == :vertical ? "vertical" : nil), (@spacing > 0 ? "spaced" : nil) ].compact.join(" "),
         data: { controller: "phlex-kit--toggle-group",
           phlex_kit__toggle_group_type_value: @type.to_s,
           phlex_kit__toggle_group_name_value: @name.to_s,
           orientation: @orientation.to_s, spacing: @spacing.to_s } }
+      # spacing: N gaps the items by N × .25rem (Tailwind-style scale) via the
+      # custom property toggle_group.css reads. Trailing ";" so a caller
+      # style: merges into a second valid declaration (Phlex mix gotcha).
+      attrs[:style] = "--pk-toggle-group-gap: #{@spacing * 0.25}rem;" if @spacing > 0
+      attrs
     end
   end
 end

data/app/components/phlex_kit/toggle_group/toggle_group_controller.js

@@ -17,6 +17,14 @@ export default class extends Controller {
     }
     this.rebuildInputs()
     this.updateRovingTabindex(item)
+    // Parity with Toggle: announce the selection as
+    // "phlex-kit--toggle-group:change" — single carries the one selected
+    // value (radiogroup semantics: no deselect), multiple the pressed array.
+    const values = this.itemTargets.filter((el) => this.isPressed(el)).map((el) => el.dataset.value)
+    this.dispatch("change", {
+      detail: this.typeValue === "single" ? { value: values[0] ?? null } : { value: values },
+      bubbles: true
+    })
   }
 
   navigate(event) {

data/app/components/phlex_kit/tooltip/tooltip.css

@@ -64,11 +64,11 @@
 }
 .pk-tooltip-content.bottom { position-area: block-end; margin: 6px 0 0; }
 .pk-tooltip-content.left {
-  position-area: inline-start; margin: 0 6px 0 0;
+  position-area: inline-start; margin: 0; margin-inline-end: 6px;
   position-try-fallbacks: flip-inline;
 }
 .pk-tooltip-content.right {
-  position-area: inline-end; margin: 0 0 0 6px;
+  position-area: inline-end; margin: 0; margin-inline-start: 6px;
   position-try-fallbacks: flip-inline;
 }
 /* Hover reveal only on devices that actually hover (a touch tap must not

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

@@ -9,10 +9,12 @@ module PhlexKit
     # extend the scale downward — HTML has h1–h6, so all six must map.
     LEVEL_SIZE = { "1" => "7", "2" => "6", "3" => "5", "4" => "4", "5" => "3", "6" => "2" }.freeze
 
-    def initialize(level: nil, as: nil, size: nil, **attrs)
+    # level: defaults to 1 so `Heading.new` is identical to `Heading.new(level: 1)`
+    # (a nil default used to render h1 with the level-6 size — self-disagreeing).
+    def initialize(level: 1, as: nil, size: nil, **attrs)
       # Fail loud at construction: level 7 previously exploded at render time
       # with NoMethodError (no h7 element), and 5/6 fell through the size map.
-      unless level.nil? || LEVEL_SIZE.key?(level.to_s)
+      unless LEVEL_SIZE.key?(level.to_s)
         raise ArgumentError, "Invalid heading level: #{level.inspect} — valid: 1–6"
       end
       @level = level
@@ -28,11 +30,11 @@ module PhlexKit
     private
 
     def element
-      (@as || (@level ? "h#{@level}" : "h1")).to_sym
+      (@as || "h#{@level}").to_sym
     end
 
     def size_token
-      token = (@size || LEVEL_SIZE[@level.to_s] || "6").to_s
+      token = (@size || LEVEL_SIZE.fetch(@level.to_s)).to_s
       raise ArgumentError, "Invalid heading size: #{token.inspect}" unless SIZES.include?(token)
       token
     end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.9.1"
+  VERSION = "0.10.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Matt Kennedy