lightning_ui_kit 0.3.5 → 0.4.0

data/app/components/lightning_ui_kit/resizable_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div data-lui-resizable-target="panelOne" class="lui:grow-0 lui:shrink-0 lui:overflow-auto" style="<%= panel_one_style %>">
+    <%= panel_one %>
+  </div>
+  <div
+    data-lui-resizable-target="handle"
+    data-action="pointerdown->lui-resizable#start"
+    role="separator"
+    aria-orientation="<%= horizontal? ? "vertical" : "horizontal" %>"
+    class="<%= handle_classes %>"
+  >
+    <span class="<%= grip_classes %>"></span>
+  </div>
+  <div class="lui:flex-1 lui:overflow-auto">
+    <%= panel_two %>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/resizable_component.rb

@@ -0,0 +1,52 @@
+class LightningUiKit::ResizableComponent < LightningUiKit::BaseComponent
+  renders_one :panel_one
+  renders_one :panel_two
+
+  DIRECTIONS = %i[horizontal vertical].freeze
+
+  def initialize(direction: :horizontal, initial: 50, **options)
+    @direction = DIRECTIONS.include?(direction) ? direction : :horizontal
+    @initial = initial
+    @options = options
+  end
+
+  def horizontal?
+    @direction == :horizontal
+  end
+
+  def classes
+    layout = horizontal? ? "lui:flex-row" : "lui:flex-col"
+    merge_classes([
+      "lui:flex lui:h-full lui:w-full lui:overflow-hidden lui:rounded-lg lui:border lui:border-border",
+      layout,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def panel_one_style
+    "flex-basis: #{@initial}%;"
+  end
+
+  def handle_classes
+    if horizontal?
+      "lui:relative lui:flex lui:w-px lui:shrink-0 lui:cursor-col-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
+    else
+      "lui:relative lui:flex lui:h-px lui:shrink-0 lui:cursor-row-resize lui:items-center lui:justify-center lui:bg-border lui:transition-colors lui:hover:bg-interactive"
+    end
+  end
+
+  def grip_classes
+    if horizontal?
+      "lui:absolute lui:h-8 lui:w-1 lui:rounded-full lui:bg-border-hover"
+    else
+      "lui:absolute lui:h-1 lui:w-8 lui:rounded-full lui:bg-border-hover"
+    end
+  end
+
+  def data
+    {
+      controller: "lui-resizable",
+      lui_resizable_direction_value: @direction.to_s
+    }.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui_kit/scroll_area_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div(class: classes, data: data) do %>
+  <%= content %>
+<% end %>

data/app/components/lightning_ui_kit/scroll_area_component.rb

@@ -0,0 +1,32 @@
+class LightningUiKit::ScrollAreaComponent < LightningUiKit::BaseComponent
+  ORIENTATIONS = %i[vertical horizontal both].freeze
+
+  def initialize(orientation: :vertical, **options)
+    @orientation = ORIENTATIONS.include?(orientation) ? orientation : :vertical
+    @options = options
+  end
+
+  def classes
+    scrollbar = "lui:[scrollbar-width:thin] " \
+      "lui:[&::-webkit-scrollbar]:h-2 lui:[&::-webkit-scrollbar]:w-2 " \
+      "lui:[&::-webkit-scrollbar-track]:bg-transparent " \
+      "lui:[&::-webkit-scrollbar-thumb]:rounded-full lui:[&::-webkit-scrollbar-thumb]:bg-border-hover " \
+      "lui:[&::-webkit-scrollbar-thumb:hover]:bg-foreground-faint"
+
+    merge_classes(["lui:relative", overflow_classes, scrollbar, @options[:class]].compact.join(" "))
+  end
+
+  def data
+    @options[:data] || {}
+  end
+
+  private
+
+  def overflow_classes
+    case @orientation
+    when :horizontal then "lui:overflow-x-auto lui:overflow-y-hidden"
+    when :both then "lui:overflow-auto"
+    else "lui:overflow-y-auto lui:overflow-x-hidden"
+    end
+  end
+end

data/app/components/lightning_ui_kit/separator_component.html.erb

@@ -0,0 +1 @@
+<%= tag.div(class: classes, data: data, **aria_attributes) %>

data/app/components/lightning_ui_kit/separator_component.rb

@@ -0,0 +1,36 @@
+class LightningUiKit::SeparatorComponent < LightningUiKit::BaseComponent
+  ORIENTATIONS = %i[horizontal vertical].freeze
+
+  def initialize(orientation: :horizontal, decorative: true, **options)
+    @orientation = ORIENTATIONS.include?(orientation) ? orientation : :horizontal
+    @decorative = decorative
+    @options = options
+  end
+
+  def classes
+    orientation_classes =
+      if @orientation == :vertical
+        "lui:h-full lui:w-px"
+      else
+        "lui:h-px lui:w-full"
+      end
+
+    merge_classes([
+      "lui:shrink-0 lui:bg-border",
+      orientation_classes,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def aria_attributes
+    if @decorative
+      {role: "none"}
+    else
+      {role: "separator", "aria-orientation": @orientation.to_s}
+    end
+  end
+
+  def data
+    @options[:data] || {}
+  end
+end

data/app/components/lightning_ui_kit/sheet_component.html.erb

@@ -0,0 +1,53 @@
+<%= tag.div(data: data) do %>
+  <% if trigger? %>
+    <div data-action="click->lui-sheet#open" class="lui:inline-block lui:cursor-pointer">
+      <%= trigger %>
+    </div>
+  <% end %>
+
+  <dialog
+    id="<%= @id %>"
+    data-lui-sheet-target="dialog"
+    class="lui:fixed lui:inset-0 lui:m-0 lui:h-full lui:max-h-none lui:w-full lui:max-w-none lui:overflow-hidden lui:bg-transparent lui:backdrop:bg-transparent"
+  >
+    <div
+      data-lui-sheet-target="overlay"
+      data-action="click->lui-sheet#close"
+      class="lui:fixed lui:inset-0 lui:bg-surface-overlay lui:transition-opacity lui:duration-300 <%= overlay_closed_class %>"
+    ></div>
+
+    <div data-lui-sheet-target="panel" class="<%= panel_classes %> <%= panel_closed_class %>">
+      <button
+        type="button"
+        data-action="click->lui-sheet#close"
+        aria-label="Close"
+        class="lui:absolute lui:right-4 lui:top-4 lui:rounded-sm lui:text-foreground-muted lui:transition-colors lui:hover:text-foreground lui:focus:outline-focus"
+      >
+        <%= heroicon("x-mark", variant: :outline, options: {class: "lui:size-5"}) %>
+      </button>
+
+      <% if @title || @description %>
+        <div class="lui:flex lui:flex-col lui:gap-1.5">
+          <% if @title %>
+            <h2 class="lui:text-lg lui:font-semibold lui:text-foreground"><%= @title %></h2>
+          <% end %>
+          <% if @description %>
+            <p class="lui:text-sm lui:text-foreground-muted"><%= @description %></p>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="lui:flex-1 lui:overflow-y-auto">
+        <%= body %>
+      </div>
+
+      <% if actions.any? %>
+        <div class="lui:flex lui:flex-col-reverse lui:gap-2 lui:sm:flex-row lui:sm:justify-end">
+          <% actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </dialog>
+<% end %>

data/app/components/lightning_ui_kit/sheet_component.rb

@@ -0,0 +1,60 @@
+class LightningUiKit::SheetComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
+  renders_one :body
+  renders_many :actions
+
+  SIDES = %i[top right bottom left].freeze
+
+  def initialize(id: nil, title: nil, description: nil, side: :right, **options)
+    @id = id
+    @title = title
+    @description = description
+    @side = SIDES.include?(side) ? side : :right
+    @options = options
+  end
+
+  def panel_classes
+    merge_classes([
+      "lui:fixed lui:z-50 lui:flex lui:flex-col lui:gap-4 lui:bg-surface lui:p-6 lui:text-foreground lui:shadow-lg lui:transition-transform lui:duration-300 lui:ease-in-out",
+      side_classes,
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  # Class(es) applied to the panel while the sheet is closed (offscreen).
+  def panel_closed_class
+    case @side
+    when :left then "lui:-translate-x-full"
+    when :top then "lui:-translate-y-full"
+    when :bottom then "lui:translate-y-full"
+    else "lui:translate-x-full"
+    end
+  end
+
+  def overlay_closed_class
+    "lui:opacity-0"
+  end
+
+  def data
+    {
+      controller: "lui-sheet",
+      lui_sheet_panel_closed_class: panel_closed_class,
+      lui_sheet_overlay_closed_class: overlay_closed_class
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def side_classes
+    case @side
+    when :left
+      "lui:inset-y-0 lui:left-0 lui:h-full lui:w-3/4 lui:max-w-sm lui:border-r lui:border-border"
+    when :top
+      "lui:inset-x-0 lui:top-0 lui:w-full lui:border-b lui:border-border"
+    when :bottom
+      "lui:inset-x-0 lui:bottom-0 lui:w-full lui:border-t lui:border-border"
+    else
+      "lui:inset-y-0 lui:right-0 lui:h-full lui:w-3/4 lui:max-w-sm lui:border-l lui:border-border"
+    end
+  end
+end

data/app/components/lightning_ui_kit/slider_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div class="lui:absolute lui:inset-x-0 lui:h-1.5 lui:rounded-full lui:bg-surface-tertiary"></div>
+  <div data-lui-slider-target="fill" class="lui:absolute lui:left-0 lui:h-1.5 lui:rounded-full lui:bg-surface-invert" style="<%= fill_style %>"></div>
+  <div data-lui-slider-target="thumb" class="lui:absolute lui:size-4 lui:-translate-x-1/2 lui:rounded-full lui:border lui:border-border-invert lui:bg-surface lui:shadow-sm lui:pointer-events-none" style="<%= thumb_style %>"></div>
+  <%= tag.input(
+        type: "range",
+        name: input_name,
+        min: min,
+        max: max,
+        step: step,
+        value: value,
+        disabled: disabled,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        data: {lui_slider_target: "input"},
+        class: "lui:absolute lui:inset-0 lui:h-full lui:w-full lui:cursor-pointer lui:opacity-0 lui:disabled:cursor-not-allowed"
+      ) %>
+<% end %>

data/app/components/lightning_ui_kit/slider_component.rb

@@ -0,0 +1,56 @@
+class LightningUiKit::SliderComponent < LightningUiKit::BaseComponent
+  def initialize(name: nil, min: 0, max: 100, step: 1, value: nil, disabled: false, form: nil, **options)
+    @name = name
+    @min = min
+    @max = max
+    @step = step
+    @value = value.nil? ? min : value
+    @disabled = disabled
+    @form = form
+    @options = options
+  end
+
+  attr_reader :min, :max, :step, :value, :disabled
+
+  def percent
+    range = (@max - @min).to_f
+    return 0 if range <= 0
+
+    (((@value - @min) / range) * 100).clamp(0, 100)
+  end
+
+  def input_name
+    return @name unless @form && @name
+
+    "#{@form.object_name}[#{@name}]"
+  end
+
+  def classes
+    merge_classes([
+      "lui:relative lui:flex lui:h-5 lui:w-full lui:touch-none lui:select-none lui:items-center",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def fill_style
+    "width: #{formatted_percent}%;"
+  end
+
+  def thumb_style
+    "left: #{formatted_percent}%;"
+  end
+
+  def data
+    {
+      controller: "lui-slider",
+      action: "input->lui-slider#update"
+    }.merge(@options[:data] || {})
+  end
+
+  private
+
+  def formatted_percent
+    p = percent
+    (p % 1).zero? ? p.to_i : p.round(2)
+  end
+end

data/app/components/lightning_ui_kit/table/column_component.rb

@@ -1,11 +1,28 @@
 class LightningUiKit::Table::ColumnComponent < LightningUiKit::BaseComponent
-  attr_reader :title
+  attr_reader :title, :sort_key, :align
 
-  def initialize(title, &block)
+  def initialize(title, sort_key: nil, align: :left, &block)
     @title = title
+    @sort_key = sort_key
+    @align = align
     @block = block
   end
 
+  def sortable?
+    !@sort_key.nil?
+  end
+
+  def alignment_classes
+    case @align
+    when :right
+      "lui:text-right"
+    when :center
+      "lui:text-center"
+    else
+      "lui:text-left"
+    end
+  end
+
   def call(row)
     @block.call(row)
   end

data/app/components/lightning_ui_kit/table_component.html.erb

@@ -1,35 +1,126 @@
-<div class="lui:border-border-subtle lui:border lui:rounded-lg">
+<div <% if interactive? %>data-controller="lui-table"<% end %> class="lui:relative lui:border-border-subtle lui:border lui:rounded-lg">
+  <% if selectable? && bulk_actions? %>
+    <div
+      data-lui-table-target="bulkBar"
+      class="lui:absolute lui:inset-x-0 lui:top-0 lui:z-10 lui:hidden lui:h-[calc(2.5rem+1px)] lui:items-center lui:gap-4 lui:rounded-t-[calc(var(--radius-lg)-1px)] lui:border-b lui:border-b-border lui:bg-surface lui:pl-4 lui:pr-4"
+      >
+      <span class="lui:group/cb lui:relative lui:inline-flex lui:items-center lui:justify-center">
+        <input
+          type="checkbox"
+          class="<%= checkbox_input_classes %>"
+          aria-label="Select all"
+          data-lui-table-target="selectAll"
+          data-action="change->lui-table#toggleAll"
+          >
+        <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+          <path class="lui:group-has-[:indeterminate]/cb:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+          <path class="lui:opacity-0 lui:group-has-[:indeterminate]/cb:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </span>
+      <span class="lui:text-sm/6 lui:font-medium lui:text-foreground lui:whitespace-nowrap">
+        <span data-lui-table-target="count">0</span> <%= @selected_label %>
+      </span>
+      <div class="lui:flex lui:flex-wrap lui:items-center lui:gap-2">
+        <%= bulk_actions %>
+      </div>
+    </div>
+  <% end %>
   <table class="lui:w-full lui:text-left lui:text-sm/6 lui:text-foreground lui:border-collapse lui:border-inherit">
     <thead class="lui:text-foreground-muted">
-      <tr class="">
+      <tr>
+        <% if selectable? %>
+          <th scope="col" class="lui:w-px lui:border-b lui:border-b-border lui:py-2 lui:pl-4 lui:pr-2">
+            <span class="lui:group/cb lui:relative lui:inline-flex lui:items-center lui:justify-center lui:align-middle">
+              <input
+                type="checkbox"
+                class="<%= checkbox_input_classes %>"
+                aria-label="Select all"
+                data-lui-table-target="selectAll"
+                data-action="change->lui-table#toggleAll"
+                >
+              <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+                <path class="lui:group-has-[:indeterminate]/cb:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path class="lui:opacity-0 lui:group-has-[:indeterminate]/cb:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              </svg>
+            </span>
+          </th>
+        <% end %>
         <% columns.each do |column| %>
-          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
+          <th
+            scope="col"
+            class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium <%= column.alignment_classes %>"
+            <% if aria_sort(column) %>aria-sort="<%= aria_sort(column) %>"<% end %>
+            >
+            <% if column.sortable? %>
+              <a
+                href="<%= sort_url(column) %>"
+                class="lui:group/sort lui:inline-flex lui:items-center lui:gap-1 lui:hover:text-foreground <%= "lui:text-foreground" if sorted_by?(column) %>"
+                >
+                <%= column.title %>
+                <%= heroicon(sort_icon(column), variant: :outline, options: {class: "lui:size-3.5 lui:shrink-0 #{"lui:text-foreground-faint lui:group-hover/sort:text-foreground-muted" unless sorted_by?(column)}"}) %>
+              </a>
+            <% else %>
+              <%= column.title %>
+            <% end %>
+          </th>
         <% end %>
         <% if actions.present? %>
-          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
+          <th scope="col" class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
         <% end %>
       </tr>
     </thead>
     <tbody>
       <% if @data.empty? %>
         <tr>
-          <td class="lui:p-4 lui:text-center" colspan="<%= columns.size + (actions.present? ? 1 : 0) %>">
+          <td class="lui:p-4 lui:text-center lui:break-words" colspan="<%= colspan %>">
             <p class="lui:font-medium"><%= @empty_message %></p>
           </td>
         </tr>
       <% else %>
         <% @data.each do |row| %>
-          <tr class="lui:group">
+          <% url = row_url_for(row) %>
+          <tr
+            class="lui:group lui:data-selected:bg-surface-hover <%= "lui:cursor-pointer lui:hover:bg-surface-hover" if url || selectable? %>"
+            <% if url %>
+              data-url="<%= url %>"
+              data-action="click->lui-table#visitRow"
+            <% elsif selectable? %>
+              data-action="click->lui-table#toggleRow"
+            <% end %>
+            >
+            <% if selectable? %>
+              <td
+                class="lui:w-px lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:py-4 lui:pl-4 lui:pr-2"
+                data-action="click->lui-table#toggleCell"
+                >
+                <span class="lui:relative lui:inline-flex lui:items-center lui:justify-center lui:align-middle">
+                  <input
+                    type="checkbox"
+                    name="<%= @select_name %>"
+                    value="<%= row_value(row) %>"
+                    class="<%= checkbox_input_classes %>"
+                    aria-label="Select row"
+                    data-lui-table-target="rowCheckbox"
+                    data-action="change->lui-table#update"
+                    >
+                  <svg class="<%= checkbox_icon_classes %>" viewBox="0 0 14 14" fill="none">
+                    <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </span>
+              </td>
+            <% end %>
             <% columns.each do |column| %>
-              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
+              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:break-words <%= column.alignment_classes %>">
                 <%= column.call(row) %>
               </td>
             <% end %>
             <% if actions.present? %>
-              <td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
-                <% actions.each do |action| %>
-                  <%= action.call(row) %>
-                <% end %>
+              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0 lui:break-words">
+                <div class="lui:flex lui:gap-3">
+                  <% actions.each do |action| %>
+                    <%= action.call(row) %>
+                  <% end %>
+                </div>
               </td>
             <% end %>
           </tr>

data/app/components/lightning_ui_kit/table_component.rb

@@ -1,14 +1,148 @@
 class LightningUiKit::TableComponent < LightningUiKit::BaseComponent
-  renders_many :columns, ->(title, &block) do
-    LightningUiKit::Table::ColumnComponent.new(title, &block)
+  renders_many :columns, ->(title, sort_key: nil, align: :left, &block) do
+    LightningUiKit::Table::ColumnComponent.new(title, sort_key: sort_key, align: align, &block)
   end
   renders_many :actions, ->(&block) do
     LightningUiKit::Table::ActionComponent.new(&block)
   end
+  renders_one :bulk_actions
 
-  def initialize(data:, actions_title: "Actions", empty_message: "No data available")
+  def initialize(
+    data:,
+    selectable: false,
+    select_name: "ids[]",
+    row_id: :id,
+    row_url: nil,
+    sort_key: nil,
+    sort_direction: nil,
+    sort_param: :sort,
+    direction_param: :direction,
+    selected_label: "selected",
+    actions_title: "Actions",
+    empty_message: "No data available"
+  )
     @data = data
+    @selectable = selectable
+    @select_name = select_name
+    @row_id = row_id
+    @row_url = row_url
+    @sort_key = sort_key
+    @sort_direction = sort_direction
+    @sort_param = sort_param
+    @direction_param = direction_param
+    @selected_label = selected_label
     @actions_title = actions_title
     @empty_message = empty_message
   end
+
+  def selectable?
+    @selectable
+  end
+
+  def interactive?
+    selectable? || !@row_url.nil?
+  end
+
+  def row_value(row)
+    case @row_id
+    when Proc
+      @row_id.call(row)
+    else
+      if row.is_a?(Hash)
+        row[@row_id] || row[@row_id.to_s]
+      elsif row.respond_to?(@row_id)
+        row.public_send(@row_id)
+      elsif row.respond_to?(:[])
+        row[@row_id] || row[@row_id.to_s]
+      end
+    end
+  end
+
+  def row_url_for(row)
+    @row_url&.call(row)
+  end
+
+  def sorted_by?(column)
+    column.sortable? && column.sort_key.to_s == current_sort_key
+  end
+
+  def sort_url(column)
+    direction = (sorted_by?(column) && current_sort_direction == "asc") ? "desc" : "asc"
+    query = current_query_parameters.merge(
+      @sort_param.to_s => column.sort_key.to_s,
+      @direction_param.to_s => direction
+    )
+    "#{current_path}?#{query.to_query}"
+  end
+
+  def sort_icon(column)
+    return "chevron-up-down" unless sorted_by?(column)
+
+    (current_sort_direction == "desc") ? "chevron-down" : "chevron-up"
+  end
+
+  def aria_sort(column)
+    return unless sorted_by?(column)
+
+    (current_sort_direction == "desc") ? "descending" : "ascending"
+  end
+
+  # Current sort state: the sort/direction request params when present
+  # (validated), otherwise the explicit sort_key:/sort_direction: defaults.
+  def current_sort_key
+    sort_state[0]
+  end
+
+  def current_sort_direction
+    sort_state[1]
+  end
+
+  def colspan
+    columns.size + (selectable? ? 1 : 0) + (actions.present? ? 1 : 0)
+  end
+
+  def checkbox_input_classes
+    <<~CLASSES.squish
+      lui:peer lui:size-[1.125rem] lui:shrink-0 lui:cursor-pointer lui:appearance-none
+      lui:rounded-[0.3125rem] lui:border lui:border-border-strong lui:bg-surface-input lui:shadow-sm
+      lui:hover:border-border-hover lui:sm:size-4
+      lui:checked:border-border-invert lui:checked:bg-surface-invert lui:checked:hover:border-border-invert
+      lui:indeterminate:border-border-invert lui:indeterminate:bg-surface-invert lui:indeterminate:hover:border-border-invert
+      lui:focus-visible:outline lui:focus-visible:outline-2 lui:focus-visible:outline-offset-2 lui:focus-visible:outline-focus
+      lui:disabled:cursor-not-allowed lui:disabled:opacity-50
+    CLASSES
+  end
+
+  def checkbox_icon_classes
+    <<~CLASSES.squish
+      lui:pointer-events-none lui:absolute lui:inset-0 lui:m-auto lui:size-4
+      lui:stroke-foreground-invert lui:opacity-0
+      lui:peer-checked:opacity-100 lui:peer-indeterminate:opacity-100 lui:sm:size-3.5
+    CLASSES
+  end
+
+  private
+
+  def sort_state
+    @sort_state ||= begin
+      url_key = current_query_parameters[@sort_param.to_s].to_s
+      if url_key.empty?
+        [@sort_key.to_s, normalize_direction(@sort_direction.to_s)]
+      else
+        [url_key, normalize_direction(current_query_parameters[@direction_param.to_s].to_s)]
+      end
+    end
+  end
+
+  def normalize_direction(direction)
+    LightningUiKit::Sorting::DIRECTIONS.include?(direction) ? direction : "asc"
+  end
+
+  def current_query_parameters
+    request&.query_parameters || {}
+  end
+
+  def current_path
+    request&.path || ""
+  end
 end

data/app/components/lightning_ui_kit/toggle_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.button(type: "button", class: classes, disabled: disabled?, data: data, "data-state": state, "aria-pressed": pressed) do %>
+  <%= content %>
+<% end %>