phlex_kit 0.2.0

data/app/components/phlex_kit/table/table.rb

@@ -0,0 +1,35 @@
+module PhlexKit
+  # Data table, ported from ruby_ui's RubyUI::Table. Presentational, no JS.
+  # Multi-part, like PhlexKit::Card — the lead Table wraps a <table> in an overflow
+  # container; the rest map 1:1 onto the table elements:
+  #
+  #   render PhlexKit::Table.new do
+  #     render PhlexKit::TableHeader.new do
+  #       render PhlexKit::TableRow.new do
+  #         render PhlexKit::TableHead.new { "Name" }
+  #         render PhlexKit::TableHead.new { "Email" }
+  #       end
+  #     end
+  #     render PhlexKit::TableBody.new do
+  #       @users.each do |u|
+  #         render PhlexKit::TableRow.new do
+  #           render PhlexKit::TableCell.new { u.name }
+  #           render PhlexKit::TableCell.new { u.email }
+  #         end
+  #       end
+  #     end
+  #   end
+  #
+  # Tailwind → vanilla `.pk-table-*` (table.css), palette from the global tokens.
+  class Table < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(class: "pk-table-wrapper") do
+        table(**mix({ class: "pk-table" }, @attrs), &block)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/table/table_body.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The <tbody> of a PhlexKit::Table. See table.rb.
+  class TableBody < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      tbody(**mix({ class: "pk-table-body" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_caption.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The <caption> of a PhlexKit::Table (muted, below the table). See table.rb.
+  class TableCaption < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      caption(**mix({ class: "pk-table-caption" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_cell.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A body cell (<td>) in a PhlexKit::TableRow. See table.rb.
+  class TableCell < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      td(**mix({ class: "pk-table-cell" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_footer.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The <tfoot> of a PhlexKit::Table (e.g. a totals row). See table.rb.
+  class TableFooter < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      tfoot(**mix({ class: "pk-table-footer" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_head.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A header cell (<th>) in a PhlexKit::TableHeader row. See table.rb.
+  class TableHead < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      th(**mix({ class: "pk-table-head" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_header.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # The <thead> of a PhlexKit::Table. See table.rb.
+  class TableHeader < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      thead(**mix({ class: "pk-table-header" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/table/table_row.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # A <tr> in a PhlexKit::Table — bottom border + hover highlight. See table.rb.
+  class TableRow < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      tr(**mix({ class: "pk-table-row" }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+/* Co-located with tabs.rb. Theme tokens from the global stylesheet. */
+.pk-tabs-list {
+  display: inline-flex; height: 2.25rem; align-items: center; justify-content: center;
+  border-radius: var(--pk-radius); background: var(--pk-surface-2); padding: .25rem; color: var(--pk-muted);
+}
+.pk-tabs-trigger {
+  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
+  border-radius: calc(var(--pk-radius) - 2px); padding: .25rem .75rem; font-size: .875rem; font-weight: 500;
+  background: none; border: 0; cursor: pointer; color: inherit; transition: all .15s ease;
+}
+.pk-tabs-trigger[data-state="active"] { background: var(--pk-bg); color: var(--pk-text); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
+.pk-tabs-trigger:disabled { pointer-events: none; opacity: .5; }
+.pk-tabs-content { margin-top: .5rem; }

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Tabbed panels. Ported from ruby_ui's RubyUI::Tabs. Compose Tabs(default:) >
+  # (TabsList > TabsTrigger(value:)) + TabsContent(value:). phlex-kit--tabs.
+  class Tabs < BaseComponent
+    def initialize(default: nil, **attrs)
+      @default = default
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-tabs", data: { controller: "phlex-kit--tabs", phlex_kit__tabs_active_value: @default } }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+module PhlexKit
+  class TabsContent < BaseComponent
+    def initialize(value:, **attrs)
+      @value = value
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-tabs-content pk-hidden", role: "tabpanel", data: { phlex_kit__tabs_target: "content", value: @value } }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+module PhlexKit
+  class TabsList < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-tabs-list", role: "tablist" }, @attrs), &)
+  end
+end

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

@@ -0,0 +1,17 @@
+module PhlexKit
+  class TabsTrigger < BaseComponent
+    def initialize(value:, as: :button, **attrs)
+      @value = value
+      @as = as.to_sym
+      @attrs = attrs
+    end
+    def view_template(&)
+      base = { class: "pk-tabs-trigger", role: "tab", data: { phlex_kit__tabs_target: "trigger", action: "click->phlex-kit--tabs#show", value: @value } }
+      if @as == :a
+        a(**mix(base, @attrs), &)
+      else
+        button(**mix(base.merge(type: :button), @attrs), &)
+      end
+    end
+  end
+end

data/app/components/phlex_kit/textarea/textarea.css

@@ -0,0 +1,27 @@
+/* Co-located with textarea.rb — UI::Textarea. Same vanilla treatment as
+   .pk-input (input.css): ruby_ui's geometry (rounded-md / px-3 / text-sm /
+   shadow / ring-on-focus), our palette tokens, height left to the `rows`
+   attribute exactly as ruby_ui does. Theme tokens come from the global
+   stylesheet. */
+.pk-textarea {
+  width: 100%;
+  border-radius: calc(var(--pk-radius) - 2px);
+  border: 1px solid var(--pk-input);
+  background: var(--pk-bg);
+  color: var(--pk-text);
+  padding: .5rem .75rem;
+  font: inherit;
+  font-size: .875rem;
+    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
+}
+.pk-textarea::placeholder { color: var(--pk-muted); }
+.pk-textarea:focus-visible {
+  outline: none;
+  border-color: var(--pk-brand);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-textarea:disabled { cursor: not-allowed; opacity: .5; }
+.pk-textarea[aria-invalid="true"] {
+  border-color: var(--pk-red);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-red) 30%, transparent);
+}

data/app/components/phlex_kit/textarea/textarea.rb

@@ -0,0 +1,24 @@
+module PhlexKit
+  # Multi-line text input, ported from ruby_ui's RubyUI::Textarea. Same plain-CSS
+  # treatment (and form-field wiring) as PhlexKit::Input — `rows:` sets the initial height,
+  # the yielded block is the textarea's content (an edit form's current value),
+  # and every other attr (`name:`, `id:`, `placeholder:`, `**on(...)`) passes
+  # through via `mix`. No VARIANTS. Styled by `.pk-textarea` (textarea.css).
+  class Textarea < BaseComponent
+    def initialize(rows: 4, **attrs)
+      @rows = rows
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      textarea(**mix({
+        rows: @rows,
+        class: "pk-textarea",
+        data: {
+          phlex_kit__form_field_target: "input",
+          action: "input->phlex-kit--form-field#onInput invalid->phlex-kit--form-field#onInvalid"
+        }
+      }, @attrs), &block)
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+module PhlexKit
+  # Light/dark theme switch built on Toggle. Ported from ruby_ui's RubyUI::
+  # ThemeToggle. The sibling phlex-kit--theme-toggle controller listens for the
+  # toggle's change event and flips :root[data-theme] (matching the token system).
+  class ThemeToggle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      render PhlexKit::Toggle.new(
+        aria: { label: "Toggle theme" },
+        wrapper: { data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } },
+        **@attrs, &block
+      )
+    end
+  end
+end

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

@@ -0,0 +1,163 @@
+/* Co-located with toast_region.rb — UI::Toast (region / item / parts). ruby_ui's
+   sonner-style toaster kept (phlex-kit--toaster clones <template> skeletons and
+   stacks toasts via inline --y-offset/--scale/--opacity; phlex-kit--toast runs the
+   timer + swipe); Tailwind replaced with vanilla CSS on the palette tokens.
+   Geometry from ruby_ui (356px stack, rounded-lg, p-4, 13px text, positions via
+   [data-position=…]). Theme tokens come from the global stylesheet. */
+.pk-toast-region {
+  position: fixed;
+  z-index: 100;
+  padding: 1.5rem;
+  pointer-events: none;
+}
+.pk-toast-region[data-position="top-left"] { top: 0; left: 0; }
+.pk-toast-region[data-position="top-center"] { top: 0; left: 50%; transform: translateX(-50%); }
+.pk-toast-region[data-position="top-right"] { top: 0; right: 0; }
+.pk-toast-region[data-position="bottom-left"] { bottom: 0; left: 0; }
+.pk-toast-region[data-position="bottom-center"] { bottom: 0; left: 50%; transform: translateX(-50%); }
+.pk-toast-region[data-position="bottom-right"] { bottom: 0; right: 0; }
+
+/* The <ol> stack. The toaster sets its min-height as toasts come and go. */
+.pk-toast-list {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 356px;
+  max-width: 100%;
+  pointer-events: auto;
+}
+
+/* One toast. The stacking transform/opacity/z-index are inline (set by the
+   toaster's reflow); this only styles the card and the state transitions. */
+.pk-toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: .375rem;
+  width: 356px;
+  max-width: 100%;
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  padding: 1rem;
+  font-size: 13px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
+  transition: transform .3s ease-out, opacity .3s ease-out;
+  will-change: transform;
+  opacity: var(--opacity, 1);
+}
+.pk-toast[data-state="pending"], .pk-toast[data-state="closing"] { opacity: 0; }
+.pk-toast[data-swipe="move"] { transition: none; }
+
+/* Room for the corner close button (region-wide, or per-spawned-toast). */
+.pk-toast-region[data-close-button="true"] .pk-toast,
+.pk-toast.pk-toast-with-close { padding-right: 2.5rem; }
+
+.pk-toast-icon {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 1rem;
+  height: 1rem;
+  margin-left: -3px;
+  margin-right: .25rem;
+  color: var(--pk-text);
+}
+.pk-toast-icon-svg { width: 1rem; height: 1rem; margin-left: -1px; }
+.pk-toast-icon-svg.spin { animation: pk-toast-spin 1s linear infinite; }
+@keyframes pk-toast-spin { to { transform: rotate(360deg); } }
+
+/* Title + description column in the skeletons. */
+.pk-toast-body {
+  display: flex;
+  flex-direction: column;
+  gap: .125rem;
+  flex: 1;
+  min-width: 0;
+}
+.pk-toast-title { font-weight: 500; line-height: 1.5; }
+.pk-toast-title:empty { display: none; }
+.pk-toast-description { font-weight: 400; line-height: 1.4; color: var(--pk-muted); }
+.pk-toast-description:empty { display: none; }
+
+/* Filled action button ("Undo"). */
+.pk-toast-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  height: 1.5rem;
+  margin-left: auto;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: 0 .5rem;
+  font: inherit;
+  font-size: .75rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--pk-text);
+  color: var(--pk-bg);
+  transition: opacity .15s ease;
+}
+.pk-toast-action:hover { opacity: .9; }
+.pk-toast-action:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-toast-action:disabled { pointer-events: none; opacity: .5; }
+
+/* Subtle cancel button. */
+.pk-toast-cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  height: 1.5rem;
+  margin-left: auto;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: 0 .5rem;
+  font: inherit;
+  font-size: .75rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: color-mix(in oklab, var(--pk-text) 10%, transparent);
+  color: var(--pk-text);
+  transition: background-color .15s ease;
+}
+.pk-toast-cancel:hover { background: color-mix(in oklab, var(--pk-text) 15%, transparent); }
+.pk-toast-cancel:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+
+/* Corner × close. */
+.pk-toast-close {
+  position: absolute;
+  right: .5rem;
+  top: .5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 2px);
+  background: transparent;
+  cursor: pointer;
+  color: color-mix(in oklab, var(--pk-text) 60%, transparent);
+  transition: background-color .15s ease, color .15s ease;
+}
+.pk-toast-close:hover { background: var(--pk-accent); color: var(--pk-text); }
+.pk-toast-close:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-toast-close svg { width: .875rem; height: .875rem; }

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

@@ -0,0 +1,21 @@
+module PhlexKit
+  # Flash-key → toast-variant mapping, ported from ruby_ui's RubyUI::Toast.
+  # Used by PhlexKit::ToastRegion when rendering `flash:` server-side:
+  # `PhlexKit::Toast.flash_variant(:notice) #=> :info`. Unknown keys fall back
+  # to :default (flash keys are app-defined, so this map is deliberately
+  # permissive — unlike the component VARIANTS, which fail loud).
+  module Toast
+    FLASH_VARIANTS = {
+      "notice" => :info,
+      "alert" => :warning,
+      "success" => :success,
+      "error" => :error,
+      "warning" => :warning,
+      "info" => :info
+    }.freeze
+
+    def self.flash_variant(key)
+      FLASH_VARIANTS[key.to_s] || :default
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Filled action button in a toast (e.g. "Undo"). Pass `on:` a Stimulus action
+  # string for server-rendered toasts; client-spawned toasts get their onClick
+  # wired by the toaster when it clones the action slot template.
+  # See toast_region.rb.
+  class ToastAction < BaseComponent
+    def initialize(label:, on: nil, **attrs)
+      @label = label
+      @on = on
+      @attrs = attrs
+    end
+
+    def view_template
+      data = { slot: "action" }
+      data[:action] = @on if @on
+      button(**mix({ type: :button, class: "pk-toast-action", data: data }, @attrs)) { @label }
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Subtle dismiss button in a toast (the "Cancel" counterpart to ToastAction).
+  # Dismisses via the phlex-kit--toast controller. See toast_region.rb.
+  class ToastCancel < BaseComponent
+    def initialize(label:, **attrs)
+      @label = label
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        class: "pk-toast-cancel",
+        data: { slot: "cancel", action: "click->phlex-kit--toast#dismiss" }
+      }, @attrs)) { @label }
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+module PhlexKit
+  # The ×-in-the-corner close button, shown when the region has close_button:
+  # true (or a spawn asks for one). See toast_region.rb.
+  class ToastClose < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        class: "pk-toast-close",
+        aria: { label: "Close toast" },
+        data: { slot: "close", action: "click->phlex-kit--toast#dismiss" }
+      }, @attrs)) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "14",
+          height: "14",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+        span(class: "pk-sr-only") { "Close" }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module PhlexKit
+  # Muted secondary line under a PhlexKit::ToastTitle. The toaster removes it from a
+  # cloned skeleton when the spawn has no description. See toast_region.rb.
+  class ToastDescription < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-toast-description", data: { slot: "description" } }, @attrs), &)
+    end
+  end
+end

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

@@ -0,0 +1,63 @@
+module PhlexKit
+  # Leading status icon for a PhlexKit::ToastItem. Renders nothing for :default /
+  # nil (matching ruby_ui — only the status-ful variants get an icon); the
+  # toaster swaps its innerHTML when a toast mutates (e.g. loading → success).
+  # See toast_region.rb.
+  class ToastIcon < BaseComponent
+    def initialize(variant: nil, **attrs)
+      @variant = variant&.to_sym
+      @attrs = attrs
+    end
+
+    def view_template
+      return unless renderable?
+      span(**mix({ class: "pk-toast-icon", data: { slot: "icon" } }, @attrs)) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: svg_classes,
+          "aria-hidden": "true"
+        ) { |s| paths(s) }
+      end
+    end
+
+    private
+
+    def renderable?
+      %i[success error warning info loading].include?(@variant)
+    end
+
+    def svg_classes
+      [ "pk-toast-icon-svg", ("spin" if @variant == :loading) ].compact.join(" ")
+    end
+
+    def paths(s)
+      case @variant
+      when :success
+        s.circle(cx: "12", cy: "12", r: "10")
+        s.path(d: "m9 12 2 2 4-4")
+      when :error
+        s.path(d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z")
+        s.path(d: "m15 9-6 6")
+        s.path(d: "m9 9 6 6")
+      when :warning
+        s.path(d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3")
+        s.path(d: "M12 9v4")
+        s.path(d: "M12 17h.01")
+      when :info
+        s.circle(cx: "12", cy: "12", r: "10")
+        s.path(d: "M12 16v-4")
+        s.path(d: "M12 8h.01")
+      when :loading
+        s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,70 @@
+module PhlexKit
+  # A single toast <li> — rendered server-side (flash) or cloned from a skeleton
+  # template by the toaster. The phlex-kit--toast controller runs the auto-close
+  # timer (pause on hover), swipe-to-dismiss, and Escape. The toaster stacks it
+  # via inline --y-offset/--scale/--opacity. See toast_region.rb.
+  class ToastItem < BaseComponent
+    VARIANTS = {
+      default: "default",
+      success: "success",
+      error: "error",
+      warning: "warning",
+      info: "info",
+      loading: "loading"
+    }.freeze
+
+    # Variants announced assertively (role="alert" instead of "status").
+    ALERT_VARIANTS = %i[error].freeze
+
+    def initialize(
+      variant: :default,
+      id: nil,
+      duration: nil,
+      dismissible: true,
+      invert: false,
+      on_dismiss: nil,
+      on_auto_close: nil,
+      **attrs
+    )
+      @variant = variant.to_sym
+      @id = id
+      @duration = duration
+      @dismissible = dismissible
+      @invert = invert
+      @on_dismiss = on_dismiss
+      @on_auto_close = on_auto_close
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      li(**mix(item_attrs, @attrs), &)
+    end
+
+    private
+
+    def item_attrs
+      data = {
+        variant: VARIANTS.fetch(@variant),
+        state: "pending",
+        swipe: "none",
+        controller: "phlex-kit--toast",
+        phlex_kit__toaster_target: "toast",
+        phlex_kit__toast_dismissible_value: @dismissible.to_s,
+        phlex_kit__toast_invert_value: @invert.to_s
+      }
+      data[:phlex_kit__toast_duration_value] = @duration.to_s if @duration
+      data[:phlex_kit__toast_on_dismiss_value] = @on_dismiss if @on_dismiss
+      data[:phlex_kit__toast_on_auto_close_value] = @on_auto_close if @on_auto_close
+
+      attrs = {
+        role: ALERT_VARIANTS.include?(@variant) ? "alert" : "status",
+        tabindex: "0",
+        class: "pk-toast",
+        aria: { atomic: "true" },
+        data: data
+      }
+      attrs[:id] = @id if @id
+      attrs
+    end
+  end
+end