phlex_kit 0.2.0

data/app/components/phlex_kit/toast/toast_region.rb

@@ -0,0 +1,121 @@
+module PhlexKit
+  # Toast region ("toaster"), ported from ruby_ui's RubyUI::ToastRegion. Renders
+  # the fixed, position-anchored <ol> stack plus hidden <template> skeletons (one
+  # per variant) and action/cancel/close slot templates. The phlex-kit--toaster
+  # controller clones those to spawn toasts client-side — via
+  # `window.PhlexKit.toast(...)`, a "phlex-kit:toast" window event, or the `toast`
+  # Turbo Stream action. Pass `flash:` to render server-side flash messages as
+  # toasts on page load. Per-toast behaviour (timer, swipe) lives on each
+  # PhlexKit::ToastItem. Tailwind → vanilla `.pk-toast*` (toast.css).
+  class ToastRegion < BaseComponent
+    SKELETON_VARIANTS = %i[default success error warning info loading].freeze
+
+    POSITIONS = {
+      top_left: "top-left",
+      top_center: "top-center",
+      top_right: "top-right",
+      bottom_left: "bottom-left",
+      bottom_center: "bottom-center",
+      bottom_right: "bottom-right"
+    }.freeze
+
+    def initialize(
+      position: :bottom_right,
+      expand: false,
+      max: 3,
+      duration: 4000,
+      gap: 14,
+      offset: 24,
+      theme: :system,
+      rich_colors: false,
+      close_button: false,
+      hotkey: %w[alt t],
+      dir: :ltr,
+      flash: nil,
+      **attrs
+    )
+      @position = POSITIONS.fetch(position.to_sym)
+      @expand = expand
+      @max = max
+      @duration = duration
+      @gap = gap
+      @offset = offset
+      @theme = theme.to_sym
+      @rich_colors = rich_colors
+      @close_button = close_button
+      @hotkey = hotkey
+      @dir = dir
+      @flash = flash
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix(region_attrs, @attrs)) do
+        ol(id: "pk-toaster", class: "pk-toast-list") do
+          render_flash if @flash
+          yield(self) if block
+        end
+        SKELETON_VARIANTS.each { |variant| skeleton(variant) }
+        slot_template("actionTpl") { render ToastAction.new(label: "") }
+        slot_template("cancelTpl") { render ToastCancel.new(label: "") }
+        slot_template("closeTpl") { render ToastClose.new }
+      end
+    end
+
+    private
+
+    def render_flash
+      @flash.each do |key, message|
+        next if message.nil? || message.to_s.empty?
+        variant = Toast.flash_variant(key)
+        render ToastItem.new(variant: variant, id: "flash-#{key}") do
+          render ToastIcon.new(variant: variant)
+          render ToastTitle.new { message.to_s }
+        end
+      end
+    end
+
+    def skeleton(variant)
+      template(data: { phlex_kit__toaster_target: "skeleton", variant: variant.to_s }) do
+        render ToastItem.new(variant: variant) do
+          render ToastIcon.new(variant: variant)
+          div(class: "pk-toast-body") do
+            render ToastTitle.new
+            render ToastDescription.new
+          end
+          render ToastClose.new if @close_button
+        end
+      end
+    end
+
+    def slot_template(target_name, &)
+      template(data: { phlex_kit__toaster_target: target_name }, &)
+    end
+
+    def region_attrs
+      {
+        id: "pk-toaster-region",
+        role: "region",
+        class: "pk-toast-region",
+        aria: { label: "Notifications", live: "polite" },
+        data: {
+          controller: "phlex-kit--toaster",
+          turbo_permanent: "",
+          close_button: @close_button.to_s,
+          position: @position,
+          phlex_kit__toaster_position_value: @position,
+          phlex_kit__toaster_expand_value: @expand.to_s,
+          phlex_kit__toaster_max_value: @max.to_s,
+          phlex_kit__toaster_duration_value: @duration.to_s,
+          phlex_kit__toaster_gap_value: @gap.to_s,
+          phlex_kit__toaster_offset_value: @offset.to_s,
+          phlex_kit__toaster_theme_value: @theme.to_s,
+          phlex_kit__toaster_rich_colors_value: @rich_colors.to_s,
+          phlex_kit__toaster_close_button_value: @close_button.to_s,
+          phlex_kit__toaster_hotkey_value: Array(@hotkey).join("+"),
+          phlex_kit__toaster_dir_value: @dir.to_s
+        }
+      }
+    end
+  end
+end

data/app/components/phlex_kit/toast/toast_title.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Toast headline. The data-slot lets the toaster fill it when cloning a
+  # skeleton. See toast_region.rb.
+  class ToastTitle < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-toast-title", data: { slot: "title" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/toggle/toggle.css

@@ -0,0 +1,16 @@
+/* Co-located with toggle.rb. Theme tokens from the global stylesheet. */
+.pk-contents { display: contents; }
+.pk-toggle {
+  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
+  height: 2.25rem; min-width: 2.25rem; padding-inline: .5rem;
+  border-radius: calc(var(--pk-radius) - 2px); border: 1px solid transparent; background: transparent;
+  font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--pk-text);
+  cursor: pointer; outline: none; transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
+}
+.pk-toggle:hover { background: var(--pk-accent); color: var(--pk-muted); }
+.pk-toggle:disabled { pointer-events: none; opacity: .5; }
+.pk-toggle[data-state="on"] { background: var(--pk-surface-2); color: var(--pk-text); }
+.pk-toggle.outline { border-color: var(--pk-border); }
+.pk-toggle.sm { height: 2rem; min-width: 2rem; padding-inline: .375rem; }
+.pk-toggle.lg { height: 2.5rem; min-width: 2.5rem; padding-inline: .625rem; }
+.pk-toggle svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; }

data/app/components/phlex_kit/toggle/toggle.rb

@@ -0,0 +1,59 @@
+module PhlexKit
+  # Two-state pressable button. Ported from ruby_ui's RubyUI::Toggle. Renders a
+  # wrapper (display:contents) holding the <button> and an optional hidden input so
+  # the pressed state can post with a form. phlex-kit--toggle drives the state.
+  class Toggle < BaseComponent
+    VARIANTS = { default: nil, outline: "outline" }.freeze
+    SIZES = { sm: "sm", default: nil, lg: "lg" }.freeze
+
+    def self.modifier_classes(variant:, size:)
+      [VARIANTS.fetch(variant, nil), SIZES.fetch(size, nil)].compact
+    end
+
+    def initialize(pressed: false, name: nil, value: "1", unpressed_value: nil,
+                   variant: :default, size: :default, disabled: false, wrapper: {}, **attrs)
+      @pressed = pressed
+      @name = name
+      @value = value
+      @unpressed_value = unpressed_value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @wrapper = wrapper
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix(wrapper_default_attrs, @wrapper)) do
+        button(**mix(button_default_attrs, @attrs), &block)
+        render_hidden_input if @name
+      end
+    end
+
+    private
+
+    def classes
+      (["pk-toggle"] + self.class.modifier_classes(variant: @variant, size: @size)).join(" ")
+    end
+
+    def button_default_attrs
+      a = { type: "button", class: classes, aria: { pressed: @pressed.to_s },
+            data: { state: @pressed ? "on" : "off", phlex_kit__toggle_target: "button" } }
+      a[:disabled] = true if @disabled
+      a
+    end
+
+    def wrapper_default_attrs
+      { class: "pk-contents", data: { controller: "phlex-kit--toggle",
+        action: "click->phlex-kit--toggle#toggle",
+        phlex_kit__toggle_pressed_value: @pressed.to_s,
+        phlex_kit__toggle_value_value: @value.to_s,
+        phlex_kit__toggle_unpressed_value_value: @unpressed_value.to_s } }
+    end
+
+    def render_hidden_input
+      input(type: "hidden", name: @name, value: @pressed ? @value : @unpressed_value.to_s,
+        data: { phlex_kit__toggle_target: "input" })
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+/* 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: calc(var(--pk-radius) - 2px); }
+.pk-toggle-group.vertical { flex-direction: column; align-items: stretch; }
+.pk-toggle-group.spaced { gap: .25rem; }
+/* Joined (default, unspaced): square the inner corners. */
+.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: .375rem; border-bottom-left-radius: .375rem; }
+.pk-toggle-group:not(.spaced):not(.vertical) .pk-toggle-group-item:last-of-type { border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:first-of-type { border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
+.pk-toggle-group.vertical:not(.spaced) .pk-toggle-group-item:last-of-type { border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem; }

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

@@ -0,0 +1,65 @@
+module PhlexKit
+  # A set of related toggles (single- or multi-select). Ported from ruby_ui's
+  # RubyUI::ToggleGroup. Yields itself so items are declared with the group's
+  # shared context: ToggleGroup(type:) { |g| g.ToggleGroupItem(value:) { … } }.
+  class ToggleGroup < BaseComponent
+    VALID_TYPES = %i[single multiple].freeze
+
+    def initialize(type: :single, name: nil, value: nil, variant: :default, size: :default,
+                   disabled: false, spacing: 0, orientation: :horizontal, **attrs)
+      @type = type.to_sym
+      raise ArgumentError, "type must be :single or :multiple" unless VALID_TYPES.include?(@type)
+      @name = name
+      @value = value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @spacing = spacing.to_i
+      @orientation = orientation.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix(group_default_attrs, @attrs)) do
+        yield(self)
+        render_hidden_inputs
+      end
+    end
+
+    def item_context
+      { type: @type, variant: @variant, size: @size, disabled: @disabled,
+        selected_values: selected_values, spacing: @spacing, orientation: @orientation }
+    end
+
+    def ToggleGroupItem(**kwargs, &block)
+      render PhlexKit::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
+    end
+
+    private
+
+    def selected_values
+      case @type
+      when :single then @value.nil? ? [] : [@value.to_s]
+      when :multiple then Array(@value).map(&:to_s)
+      end
+    end
+
+    def render_hidden_inputs
+      return unless @name
+      if @type == :single
+        input(type: "hidden", name: @name, value: selected_values.first.to_s, data: { phlex_kit__toggle_group_target: "input" })
+      else
+        selected_values.each { |v| input(type: "hidden", name: "#{@name}[]", value: v, data: { phlex_kit__toggle_group_target: "input" }) }
+      end
+    end
+
+    def group_default_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 } }
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+module PhlexKit
+  class ToggleGroupItem < Toggle
+    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
+      @item_value = value.to_s
+      @group_context = group_context
+      pressed = group_context[:selected_values].include?(@item_value)
+      super(pressed: pressed, name: nil, value: @item_value,
+            variant: variant || group_context[:variant],
+            size: size || group_context[:size],
+            disabled: group_context[:disabled], **attrs)
+    end
+
+    def view_template(&block)
+      button(**mix(item_default_attrs, @attrs), &block)
+    end
+
+    private
+
+    def item_default_attrs
+      a = { type: "button",
+            class: (["pk-toggle"] + self.class.modifier_classes(variant: @variant, size: @size) + ["pk-toggle-group-item"]).join(" "),
+            data: { state: @pressed ? "on" : "off", value: @item_value,
+              phlex_kit__toggle_group_target: "item",
+              action: "click->phlex-kit--toggle-group#select keydown->phlex-kit--toggle-group#navigate" } }
+      a[:disabled] = true if @disabled
+      if @group_context[:type] == :single
+        a[:role] = "radio"
+        a[:aria] = { checked: @pressed.to_s }
+        a[:tabindex] = @pressed ? "0" : "-1"
+      else
+        a[:aria] = { pressed: @pressed.to_s }
+        a[:tabindex] = "0"
+      end
+      a
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+/* Co-located with tooltip.rb — UI::Tooltip (+ Trigger / Content). CSS-only:
+   the bubble is absolutely positioned above the trigger and revealed on the
+   wrapper's :hover / :focus-within (no JS, no @floating-ui). Theme tokens come
+   from the global stylesheet. */
+.pk-tooltip { position: relative; display: inline-flex; }
+.pk-tooltip-trigger { display: inline-flex; }
+.pk-tooltip-content {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
+  width: max-content;
+  max-width: min(16rem, calc(100vw - 2rem));
+  padding: .35rem .6rem;
+  border-radius: calc(var(--pk-radius) - 2px);
+  border: 1px solid var(--pk-border);
+  background: var(--pk-surface-2);
+  color: var(--pk-text);
+  font-size: .8rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity .12s ease;
+}
+.pk-tooltip:hover .pk-tooltip-content,
+.pk-tooltip:focus-within .pk-tooltip-content { opacity: 1; visibility: visible; }

data/app/components/phlex_kit/tooltip/tooltip.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Hover/focus tooltip. ruby_ui's version uses @floating-ui + a cloned template;
+  # we keep the Trigger/Content structure but reveal + position the bubble with
+  # pure CSS (no JS, no npm dep) — same call as the Select floating-ui strip.
+  # Bubble sits above the trigger. Compose TooltipTrigger + TooltipContent.
+  class Tooltip < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-tooltip" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/tooltip/tooltip_content.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The tooltip bubble, revealed on hover/focus of its PhlexKit::Tooltip. See tooltip.rb.
+  class TooltipContent < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-tooltip-content", role: "tooltip" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/tooltip/tooltip_trigger.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # The element a PhlexKit::Tooltip is anchored to. `tabindex: 0` so keyboard users can
+  # focus it (the bubble shows on `:focus-within`). See tooltip.rb.
+  class TooltipTrigger < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-tooltip-trigger", tabindex: 0 }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Blockquote, ported from ruby_ui's RubyUI::TypographyBlockquote. See heading.rb.
+  class Blockquote < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      blockquote(**mix({ class: "pk-blockquote" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,38 @@
+module PhlexKit
+  # Heading, ported from ruby_ui's RubyUI::Heading. `level:` (1–4) picks the
+  # element AND a default size; `as:` overrides the element; `size:` (1–9)
+  # overrides the size on ruby_ui's scale (text-xs … text-5xl). Presentational;
+  # attrs pass through via mix. Tailwind → vanilla `.pk-heading*` (typography.css).
+  class Heading < BaseComponent
+    SIZES = %w[1 2 3 4 5 6 7 8 9].freeze
+    # ruby_ui's level → default size mapping (h1 is big, h4 smaller).
+    LEVEL_SIZE = { "1" => "7", "2" => "6", "3" => "5", "4" => "4" }.freeze
+
+    def initialize(level: nil, as: nil, size: nil, **attrs)
+      @level = level
+      @as = as
+      @size = size
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      send(element, **mix({ class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def element
+      (@as || (@level ? "h#{@level}" : "h1")).to_sym
+    end
+
+    def size_token
+      token = (@size || LEVEL_SIZE[@level.to_s] || "6").to_s
+      raise ArgumentError, "Invalid heading size: #{token.inspect}" unless SIZES.include?(token)
+      token
+    end
+
+    def classes
+      "pk-heading ui-heading-#{size_token}"
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Inline `<code>`, ported from ruby_ui's RubyUI::InlineCode. Replaces the legacy
+  # `code.key` utility. See heading.rb (same Typography family).
+  class InlineCode < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      code(**mix({ class: "pk-inline-code" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Inline text link, ported from ruby_ui's RubyUI::InlineLink — a brand-coloured
+  # underline-on-hover `<a>` for links inside prose (vs PhlexKit::Link, which is the
+  # button-styled link family). `href:` required; attrs pass through via mix.
+  class InlineLink < BaseComponent
+    def initialize(href:, **attrs)
+      @href = href
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      a(**mix({ href: @href, class: "pk-inline-link" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+module PhlexKit
+  # Body text, ported from ruby_ui's RubyUI::Text. `as:` picks the element
+  # (default :p), `size:` (1–9 or xs/sm/base/lg/xl/2xl…) the size, `weight:` the
+  # font-weight — plus ruby_ui's `:muted` "weight", which is really the muted
+  # COLOR (a drop-in for the legacy `.muted` utility). Attrs pass through via mix.
+  # `SIZES`/`WEIGHTS` fetch fails loud. Tailwind → vanilla `.pk-text*`.
+  class Text < BaseComponent
+    SIZES = {
+      "1" => "1", "xs" => "1",
+      "2" => "2", "sm" => "2",
+      "3" => "3", "base" => "3",
+      "4" => "4", "lg" => "4",
+      "5" => "5", "xl" => "5",
+      "6" => "6", "2xl" => "6",
+      "7" => "7", "3xl" => "7",
+      "8" => "8", "4xl" => "8",
+      "9" => "9", "5xl" => "9"
+    }.freeze
+
+    # weight => modifier class (nil = regular). `:muted` is a colour, not a weight,
+    # matching ruby_ui's API.
+    WEIGHTS = {
+      regular: nil,
+      light: "pk-text-light",
+      medium: "pk-text-medium",
+      semibold: "pk-text-semibold",
+      bold: "pk-text-bold",
+      muted: "pk-text-muted"
+    }.freeze
+
+    def initialize(as: :p, size: "3", weight: :regular, **attrs)
+      @as = as
+      @size = size.to_s
+      @weight = weight.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      send(@as, **mix({ class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-text", "pk-text-#{SIZES.fetch(@size)}", WEIGHTS.fetch(@weight) ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/typography/typography.css

@@ -0,0 +1,50 @@
+/* Co-located with the Typography family (heading.rb / text.rb / inline_code.rb /
+   inline_link.rb / blockquote.rb). ruby_ui's Tailwind → vanilla CSS on the
+   palette tokens. The size scale mirrors ruby_ui's text-xs … text-5xl. Theme
+   tokens come from the global stylesheet. */
+
+/* Heading */
+.pk-heading { margin: 0 0 .6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
+.pk-heading-1 { font-size: .75rem; }
+.pk-heading-2 { font-size: .875rem; }
+.pk-heading-3 { font-size: 1rem; }
+.pk-heading-4 { font-size: 1.125rem; }
+.pk-heading-5 { font-size: 1.25rem; }
+.pk-heading-6 { font-size: 1.5rem; }
+.pk-heading-7 { font-size: 1.875rem; }
+.pk-heading-8 { font-size: 2.25rem; }
+.pk-heading-9 { font-size: 3rem; }
+
+/* Text */
+.pk-text { margin: 0; }
+.pk-text-1 { font-size: .75rem; }
+.pk-text-2 { font-size: .875rem; }
+.pk-text-3 { font-size: 1rem; }
+.pk-text-4 { font-size: 1.125rem; }
+.pk-text-5 { font-size: 1.25rem; }
+.pk-text-6 { font-size: 1.5rem; }
+.pk-text-7 { font-size: 1.875rem; }
+.pk-text-8 { font-size: 2.25rem; }
+.pk-text-9 { font-size: 3rem; }
+.pk-text-light { font-weight: 300; }
+.pk-text-medium { font-weight: 500; }
+.pk-text-semibold { font-weight: 600; }
+.pk-text-bold { font-weight: 700; }
+.pk-text-muted { color: var(--pk-muted); }
+
+/* Inline code */
+.pk-inline-code {
+  font-family: ui-monospace, monospace;
+  font-size: .875rem;
+  background: var(--pk-bg);
+  border: 1px solid var(--pk-border);
+  border-radius: 6px;
+  padding: .15rem .4rem;
+}
+
+/* Inline link */
+.pk-inline-link { color: var(--pk-brand); font-weight: 500; text-underline-offset: 4px; }
+.pk-inline-link:hover { text-decoration: underline; }
+
+/* Blockquote */
+.pk-blockquote { margin: 1rem 0; border-left: 2px solid var(--pk-border); padding-left: 1rem; font-style: italic; }

data/app/javascript/phlex_kit/controllers/accordion_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--accordion"
+// Ported from ruby_ui's ruby-ui--accordion controller, reworked to use the native
+// Web Animations API instead of the `motion` package (no extra JS dependency).
+export default class extends Controller {
+  static targets = ["icon", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    animationDuration: { type: Number, default: 150 },
+    rotateIcon: { type: Number, default: 180 },
+  }
+
+  connect() {
+    const d = this.animationDurationValue
+    this.animationDurationValue = 0
+    this.openValue ? this.open() : this.close()
+    this.animationDurationValue = d
+  }
+
+  toggle() { this.openValue = !this.openValue }
+  openValueChanged(isOpen) { isOpen ? this.open() : this.close() }
+
+  open() {
+    if (!this.hasContentTarget) return
+    this.reveal()
+    if (this.hasIconTarget) this.rotate()
+  }
+
+  close() {
+    if (!this.hasContentTarget) return
+    this.hide()
+    if (this.hasIconTarget) this.rotate()
+  }
+
+  reveal() {
+    const c = this.contentTarget
+    c.removeAttribute("hidden")
+    c.dataset.state = "open"
+    const h = c.scrollHeight
+    c.animate([{ height: c.style.height || "0px" }, { height: `${h}px` }],
+      { duration: this.animationDurationValue, easing: "ease-in-out" })
+    c.style.height = `${h}px`
+  }
+
+  hide() {
+    const c = this.contentTarget
+    c.dataset.state = "closed"
+    const from = c.scrollHeight
+    const a = c.animate([{ height: `${from}px` }, { height: "0px" }],
+      { duration: this.animationDurationValue, easing: "ease-in-out" })
+    c.style.height = "0px"
+    a.finished.then(() => { if (c.dataset.state === "closed") c.setAttribute("hidden", "") }).catch(() => {})
+  }
+
+  rotate() {
+    this.iconTarget.style.transform = `rotate(${this.openValue ? this.rotateIconValue : 0}deg)`
+  }
+}

data/app/javascript/phlex_kit/controllers/alert_dialog_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's phlex-kit--alert-dialog controller. open() clones the
+// <template> content into <body> as a modal (the clone carries its own instance
+// of this controller); dismiss() removes it. The only change from upstream: lock
+// body scroll via inline style rather than a Tailwind `overflow-hidden` class.
+export default class extends Controller {
+  static targets = ["content"];
+  static values = { open: { type: Boolean, default: false } };
+
+  connect() {
+    if (this.openValue) this.open();
+  }
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    document.body.style.overflow = "hidden";
+  }
+
+  dismiss() {
+    document.body.style.overflow = "";
+    this.element.remove();
+  }
+}