nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

data/app/components/nitro_kit/radio_button.rb

@@ -67,12 +67,15 @@ module NitroKit
           render_in_slot(Label.new(for: id), :label) do
             render_control
             span(**slot_attributes(:indicator), aria: { hidden: "true" })
-            span(**slot_attributes(:content)) do
-              span(**slot_attributes(:label_text)) { text_or_block(label, &block) }
-              span(**slot_attributes(:description, attributes: { id: description_id })) { plain(description) } if description
-            end
+            span(**slot_attributes(:label_text)) { text_or_block(label, &block) }
           end
         end
+
+        # The description stays outside the label so aria-describedby carries it
+        # instead of it joining the control's accessible name.
+        if description
+          span(**slot_attributes(:description, attributes: { id: description_id })) { plain(description) }
+        end
       end
     end
 

data/app/components/nitro_kit/radio_button_group.rb

@@ -99,30 +99,5 @@ module NitroKit
     def selected?(choice)
       !value.nil? && value.to_s == choice.value.to_s
     end
-
-    def deterministic_id(name)
-      derived = name.to_s.gsub(/[^a-zA-Z0-9_-]+/, "_").gsub(/\A_+|_+\z/, "")
-      return derived unless derived.empty?
-
-      raise ArgumentError, "name #{name.inspect} cannot derive an id; pass id:"
-    end
-
-    def choice_id(index)
-      "#{id}-#{index}" if id
-    end
-
-    def validate_text!(name, text)
-      return text if text.is_a?(String) && !text.strip.empty?
-
-      raise ArgumentError, "#{name} must be a non-blank String"
-    end
-
-    def validate_unique_choices!
-      duplicate_value = options.group_by { |choice| choice.value.to_s }.find { |_value, matches| matches.many? }
-      raise ArgumentError, "choice values must be unique" if duplicate_value
-
-      ids = options.each_with_index.filter_map { |choice, index| choice.id || choice_id(index) }
-      raise ArgumentError, "choice ids must be unique" unless ids.uniq.length == ids.length
-    end
   end
 end

data/app/components/nitro_kit/select.rb

@@ -26,7 +26,7 @@ module NitroKit
       @option_tags = validate_option_tags!(option_tags)
       @value = value
       @include_blank = validate_blank_option!(include_blank)
-      @prompt = validate_optional_text!(:prompt, prompt)
+      @prompt = validate_prompt!(prompt)
       if @include_blank && @prompt
         raise ArgumentError, "include_blank: and prompt: are mutually exclusive"
       end
@@ -77,20 +77,7 @@ module NitroKit
     def render_toggle_icon
       return if @multiple
 
-      svg(
-        **slot_attributes(
-          :icon,
-          attributes: {
-            viewbox: "0 0 20 20",
-            fill: "none",
-            stroke: "currentColor",
-            stroke_width: 1.5,
-            aria: { hidden: true }
-          }
-        )
-      ) do |icon|
-        icon.path(d: "m6.5 8 3.5 3.5L13.5 8", stroke_linecap: "round", stroke_linejoin: "round")
-      end
+      render_in_slot(Icon.new(:chevron_down, size: :sm), :icon)
     end
 
     def control_attributes
@@ -151,11 +138,11 @@ module NitroKit
       raise ArgumentError, "include_blank must be true, false, nil, or a String"
     end
 
-    def validate_optional_text!(name, value)
+    def validate_prompt!(value)
       return if value.nil? || value == false
       return value if value.is_a?(String) && !value.strip.empty?
 
-      raise ArgumentError, "#{name} must be a non-blank String, false, or nil"
+      raise ArgumentError, "prompt must be a non-blank String, false, or nil"
     end
   end
 end

data/app/components/nitro_kit/settings_layout.rb

@@ -2,7 +2,7 @@
 
 module NitroKit
   class SettingsLayout < Component
-    Item = ::Data.define(:text, :href, :icon, :current)
+    Item = ::Data.define(:text, :href, :icon, :current, :html, :aria, :data, :css_class)
 
     def initialize(id: nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
       @label = nil
@@ -42,7 +42,16 @@ module NitroKit
       nil
     end
 
-    def item(text, href:, icon: nil, current: false)
+    def item(
+      text,
+      href:,
+      icon: nil,
+      current: false,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
       ensure_phase!(:navigation, :item)
       text = validate_text!(:text, text)
       href = validate_text!(:href, href)
@@ -54,7 +63,7 @@ module NitroKit
       end
 
       @current_item = true if current
-      @items << Item.new(text:, href:, icon:, current:)
+      @items << Item.new(text:, href:, icon:, current:, html:, aria:, data:, css_class: desperately_need_a_class)
       nil
     end
 
@@ -107,7 +116,11 @@ module NitroKit
               href: item.href,
               aria: { current: item.current ? "page" : nil },
               data: { state: item.current ? "current" : "default" }
-            }
+            },
+            html: item.html,
+            aria: item.aria,
+            data: item.data,
+            desperately_need_a_class: item.css_class
           )
         ) do
           render_in_slot(item.icon, :item_icon) if item.icon

data/app/components/nitro_kit/{form_section.rb → settings_section.rb}

@@ -1,26 +1,29 @@
 # frozen_string_literal: true
 
 module NitroKit
-  class FormSection < Component
+  class SettingsSection < Component
     Child = Data.define(:component, :content)
+    TITLE_LEVELS = (1..6).freeze
 
     def initialize(
       title: nil,
       description: nil,
+      level: 2,
       id: nil,
       html: {},
       aria: {},
       data: {},
       desperately_need_a_class: nil
     )
+      @title_level = validate_choice!(:level, level, TITLE_LEVELS)
       @title_content = content_from_keyword(:title, title)
       @description_content = content_from_keyword(:description, description)
       @status = nil
       @form = nil
-      @title_id = "#{id || "nk-form-section-#{SecureRandom.hex(4)}"}-title"
+      @title_id = "#{id || "nk-settings-section-#{SecureRandom.hex(4)}"}-title"
 
       super(
-        component: :form_section,
+        component: :settings_section,
         attributes: { id:, aria: { labelledby: @title_id } }.compact,
         html:,
         aria:,
@@ -31,12 +34,15 @@ module NitroKit
 
     def view_template
       yield self if block_given?
-      require_content!("FormSection", :title, @title_content)
-      raise ArgumentError, "FormSection requires exactly one form" unless @form
+      require_content!("SettingsSection", :title, @title_content)
+      raise ArgumentError, "SettingsSection requires exactly one form" unless @form
 
       section(**root_attributes) do
         header(**slot_attributes(:header)) do
-          h2(**slot_attributes(:title, attributes: { id: @title_id })) do
+          public_send(
+            :"h#{@title_level}",
+            **slot_attributes(:title, attributes: { id: @title_id })
+          ) do
             render_deferred_content(@title_content)
           end
           if @description_content
@@ -48,7 +54,8 @@ module NitroKit
       end
     end
 
-    def title(text = nil, &block)
+    def title(text = nil, level: nil, &block)
+      @title_level = validate_choice!(:level, level, TITLE_LEVELS) if level
       @title_content = declare_content(:title, @title_content, text, &block)
       nil
     end
@@ -60,17 +67,17 @@ module NitroKit
 
     def status(component, &content)
       unless component.is_a?(NitroKit::Alert)
-        raise ArgumentError, "FormSection status must be a NitroKit::Alert"
+        raise ArgumentError, "SettingsSection status must be a NitroKit::Alert"
       end
-      raise ArgumentError, "FormSection accepts at most one status" if @status
+      raise ArgumentError, "SettingsSection accepts at most one status" if @status
 
       @status = Child.new(component:, content:)
       nil
     end
 
     def form(&content)
-      raise ArgumentError, "FormSection form requires a block" unless content
-      raise ArgumentError, "FormSection accepts exactly one form" if @form
+      raise ArgumentError, "SettingsSection form requires a block" unless content
+      raise ArgumentError, "SettingsSection accepts exactly one form" if @form
 
       @form = content
       nil

data/app/components/nitro_kit/sheet.rb

@@ -5,10 +5,10 @@ module NitroKit
     SIDES = %i[left right].freeze
     SIZES = %i[sm md lg].freeze
 
-    Trigger = Data.define(:text, :variant, :size, :icon, :icon_end, :label, :disabled, :html, :aria, :data, :content)
+    Trigger = Data.define(:text, :variant, :size, :icon, :icon_end, :label, :disabled, :html, :aria, :data, :css_class, :content)
     private_constant :Trigger
 
-    Panel = Data.define(:title, :description, :content)
+    Panel = Data.define(:title, :description, :html, :aria, :data, :css_class, :content)
     private_constant :Panel
 
     def initialize(
@@ -39,6 +39,10 @@ module NitroKit
           id:,
           data: {
             controller: "nk--dialog",
+            action: [
+              "click->nk--dialog#invoke",
+              "turbo:before-cache@document->nk--dialog#closeForCache"
+            ].join(" "),
             side: @side,
             nk__dialog_dismissible_value: true
           }
@@ -73,6 +77,7 @@ module NitroKit
       html: {},
       aria: {},
       data: {},
+      desperately_need_a_class: nil,
       &content
     )
       ensure_collecting!
@@ -89,12 +94,21 @@ module NitroKit
         html:,
         aria:,
         data:,
+        css_class: desperately_need_a_class,
         content:
       )
       nil
     end
 
-    def panel(title:, description: nil, &content)
+    def panel(
+      title:,
+      description: nil,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil,
+      &content
+    )
       ensure_collecting!
       raise ArgumentError, "Sheet accepts exactly one panel" if @panel
       unless title.is_a?(String) && title.present?
@@ -104,7 +118,7 @@ module NitroKit
         raise ArgumentError, "Sheet description: must be nil or a non-blank String"
       end
 
-      @panel = Panel.new(title:, description:, content:)
+      @panel = Panel.new(title:, description:, html:, aria:, data:, css_class: desperately_need_a_class, content:)
       nil
     end
 
@@ -130,9 +144,10 @@ module NitroKit
         icon_end: @trigger.icon_end,
         label: @trigger.label,
         disabled: @trigger.disabled,
-        html: command_attributes(@trigger.html, "show-modal", disabled: @trigger.disabled),
+        html: command_attributes(@trigger.html, "show-modal", commandfor: panel_id, disabled: @trigger.disabled),
         aria: @trigger.aria.merge(haspopup: "dialog"),
-        data: @trigger.data
+        data: command_data(@trigger.data, "show-modal", disabled: @trigger.disabled),
+        desperately_need_a_class: @trigger.css_class
       )
 
       render_in_slot(button, :trigger, &@trigger.content)
@@ -151,9 +166,13 @@ module NitroKit
             }.compact,
             data: {
               nk__dialog_target: "panel",
-              action: "click->nk--dialog#dismiss cancel->nk--dialog#cancel"
+              action: "click->nk--dialog#dismiss cancel->nk--dialog#cancel close->nk--dialog#restoreFocus"
             }
-          }
+          },
+          html: @panel.html,
+          aria: @panel.aria,
+          data: @panel.data,
+          desperately_need_a_class: @panel.css_class
         )
       ) do
         render_close
@@ -172,23 +191,13 @@ module NitroKit
           label: @close_label,
           variant: :ghost,
           size: :sm,
-          html: command_attributes({}, "close")
+          html: command_attributes({}, "close", commandfor: panel_id),
+          data: command_data({}, "close")
         ),
         :close
       )
     end
 
-    def command_attributes(html, command, disabled: false)
-      unless html.is_a?(Hash)
-        raise ArgumentError, "html must be a Hash"
-      end
-      if html.keys.any? { |key| %w[command commandfor].include?(key.to_s.downcase) }
-        raise ArgumentError, "command and commandfor are owned by Sheet"
-      end
-
-      disabled ? html : html.merge(command:, commandfor: panel_id)
-    end
-
     def panel_id = "#{id}-panel"
     def title_id = "#{id}-title"
     def description_id = "#{id}-description"

data/app/components/nitro_kit/stat_grid.rb

@@ -27,8 +27,8 @@ module NitroKit
       )
     end
 
-    def view_template
-      yield self if block_given?
+    def view_template(&block)
+      collect_declarations(&block)
       raise ArgumentError, "StatGrid requires at least one stat" if @stats.empty?
 
       div(**root_attributes) do
@@ -41,6 +41,7 @@ module NitroKit
     end
 
     def stat(key:, label:, value:, detail: nil)
+      ensure_collecting!
       key = normalize_identity(key, name: "stat key")
       raise ArgumentError, "StatGrid stat keys must be unique: #{key.inspect}" if @stats.any? { |stat| stat.key == key }
 
@@ -57,6 +58,21 @@ module NitroKit
 
     private
 
+    def collect_declarations
+      return unless block_given?
+
+      @collecting = true
+      yield(self)
+    ensure
+      @collecting = false
+    end
+
+    def ensure_collecting!
+      return if @collecting
+
+      raise ArgumentError, "StatGrid stats must be declared inside the render block"
+    end
+
     def render_stat(stat)
       div(**slot_attributes(:stat, attributes: { data: { key: stat.key } })) do
         dt(**slot_attributes(:label)) { plain(stat.label) }

data/app/components/nitro_kit/table.rb

@@ -28,6 +28,9 @@ module NitroKit
       desperately_need_a_class: nil
     )
       @sort = sort.nil? ? nil : normalize_sort_key(sort, name: "sort")
+      unless direction.nil? || direction.is_a?(Symbol) || direction.is_a?(String)
+        raise ArgumentError, "Table direction must be a Symbol or String"
+      end
       @direction = direction.nil? ? nil : validate_choice!(:direction, direction.to_sym, DIRECTIONS)
       unless @sort.nil? == @direction.nil?
         raise ArgumentError, "Table sort: and direction: must both be set or both be nil"
@@ -49,6 +52,7 @@ module NitroKit
         data: table_data
       )
       @caption = nil
+      @caption_id = "#{id || "nk-table-#{SecureRandom.hex(4)}"}-caption"
       @head = nil
       @bodies = []
       @sort_keys = []
@@ -61,7 +65,7 @@ module NitroKit
       yield self if block_given?
       @collecting_sections = false
 
-      div(**root_attributes) do
+      div(**scroll_region_attributes) do
         table(**@table_attributes) do
           render_caption if @caption
           render_section(:head, @head, :html_thead) if @head
@@ -141,6 +145,7 @@ module NitroKit
       ensure_rendering_row!(:th)
       raise ArgumentError, "Table th accepts text or a block, not both" if !text.nil? && block
       raise ArgumentError, "Table th href: requires sort:" if sort.nil? && !href.nil?
+      raise ArgumentError, "Table th sort: must be declared inside thead" if !sort.nil? && @rendering_section != :head
       alignment = validate_choice!(:align, align, ALIGNMENTS)
       scope = validate_choice!(:scope, scope, SCOPES)
       key = sort.nil? ? nil : declare_sort_header!(sort, href:)
@@ -235,10 +240,24 @@ module NitroKit
       raise ArgumentError, "Table #{name} must be a Symbol or non-blank String"
     end
 
+    # The wrapper scrolls horizontally, so keyboard users need it focusable and
+    # named. The caption is the only Nitro-owned name source, so the region is
+    # only exposed when one exists.
+    def scroll_region_attributes
+      return root_attributes unless @caption
+
+      root_attributes.merge(
+        tabindex: "0",
+        role: "region",
+        aria: root_attributes.fetch(:aria, {}).merge(labelledby: @caption_id)
+      )
+    end
+
     def render_caption
       html_caption(
         **slot_attributes(
           :caption,
+          attributes: { id: @caption_id },
           html: @caption.html,
           aria: @caption.aria,
           data: @caption.data,
@@ -258,10 +277,10 @@ module NitroKit
           desperately_need_a_class: section.css_class
         )
       ) do
-        @rendering_section = true
+        @rendering_section = slot
         render(section.content)
       ensure
-        @rendering_section = false
+        @rendering_section = nil
       end
     end
 

data/app/components/nitro_kit/tabs.rb

@@ -17,7 +17,7 @@ module NitroKit
       data: {},
       desperately_need_a_class: nil
     )
-      @identifier = component_id(id)
+      @identifier = validate_id!("Tabs id", id)
       @default = default.nil? ? nil : normalize_identity(default, name: "default tab key")
       @label = validate_label!(label)
       @orientation = validate_choice!(:orientation, orientation, ORIENTATIONS)
@@ -140,6 +140,7 @@ module NitroKit
             data: {
               key: tab.key,
               state: active ? "active" : "inactive",
+              action: "beforematch->nk--tabs#reveal",
               nk__tabs_target: "panel"
             }
           }
@@ -193,17 +194,5 @@ module NitroKit
 
       raise ArgumentError, "Tabs labels must be non-blank Strings"
     end
-
-    def validate_boolean!(name, value)
-      return value if value == true || value == false
-
-      raise ArgumentError, "Tabs #{name} must be true or false"
-    end
-
-    def component_id(value)
-      return value if value.is_a?(String) && value.present? && !value.match?(/\s/)
-
-      raise ArgumentError, "Tabs id must be a non-blank String without whitespace"
-    end
   end
 end

data/app/components/nitro_kit/toast.rb

@@ -32,6 +32,7 @@ module NitroKit
           attributes: {
             id:,
             role: ASSERTIVE_VARIANTS.include?(@variant) ? "alert" : "status",
+            aria: { atomic: true },
             data: {
               state: "open",
               turbo_temporary: true,
@@ -47,7 +48,7 @@ module NitroKit
             }
           },
           html:,
-          aria: aria.merge(atomic: true),
+          aria:,
           data:,
           variant:,
           desperately_need_a_class:
@@ -175,6 +176,7 @@ module NitroKit
         attributes: {
           id:,
           role: "region",
+          aria: { label: },
           data: {
             controller: "nk--toast",
             action: "turbo:before-cache@document->nk--toast#teardown",
@@ -182,7 +184,7 @@ module NitroKit
           }
         },
         html:,
-        aria: aria.merge(label:, live: "polite"),
+        aria:,
         data:,
         desperately_need_a_class:
       )

data/app/components/nitro_kit/toolbar.rb

@@ -30,6 +30,7 @@ module NitroKit
 
     def leading(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
       raise ArgumentError, "Toolbar accepts at most one leading region" if @leading_region
+      raise ArgumentError, "Toolbar leading region requires a block" unless block
       @leading_region = Region.new(
         content: block,
         html:,
@@ -42,6 +43,7 @@ module NitroKit
 
     def trailing(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
       raise ArgumentError, "Toolbar accepts at most one trailing region" if @trailing_region
+      raise ArgumentError, "Toolbar trailing region requires a block" unless block
       @trailing_region = Region.new(
         content: block,
         html:,

data/app/components/nitro_kit/tooltip.rb

@@ -16,7 +16,6 @@ module NitroKit
       :icon,
       :icon_end,
       :label,
-      :disabled,
       :target,
       :rel,
       :download,
@@ -48,7 +47,7 @@ module NitroKit
             controller: "nk--tooltip",
             placement: @placement,
             dismissed: nil,
-            action: "pointerleave->nk--tooltip#resetIfUninterested focusout->nk--tooltip#resetIfUninterested"
+            action: "keydown.esc@document->nk--tooltip#dismiss pointerleave->nk--tooltip#resetIfUninterested focusout->nk--tooltip#resetIfUninterested"
           }
         },
         html:,
@@ -81,8 +80,8 @@ module NitroKit
       text = nil,
       as: Button,
       href: nil,
-      variant: :default,
-      size: :md,
+      variant: nil,
+      size: nil,
       icon: nil,
       icon_end: nil,
       label: nil,
@@ -106,7 +105,7 @@ module NitroKit
       if as == :custom && content&.arity != 1
         raise ArgumentError, "Tooltip custom trigger block must accept trigger attributes"
       end
-      if as != Button && [ href, icon, icon_end, label, target, rel, download ].any?
+      if as != Button && [ href, variant, size, icon, icon_end, label, target, rel, download ].any?
         raise ArgumentError, "Tooltip #{as.inspect} trigger does not accept Button options"
       end
 
@@ -114,12 +113,11 @@ module NitroKit
         as:,
         text:,
         href:,
-        variant:,
-        size:,
+        variant: variant || :default,
+        size: size || :md,
         icon:,
         icon_end:,
         label:,
-        disabled: false,
         target:,
         rel:,
         download:,
@@ -156,7 +154,6 @@ module NitroKit
         icon: @trigger.icon,
         icon_end: @trigger.icon_end,
         label: @trigger.label,
-        disabled: @trigger.disabled,
         target: @trigger.target,
         rel: @trigger.rel,
         download: @trigger.download,
@@ -192,7 +189,7 @@ module NitroKit
     end
 
     def render_custom_trigger
-      span(**slot_attributes(:trigger)) do
+      div(**slot_attributes(:trigger)) do
         raw(safe(capture(trigger_attributes, &@trigger.content)))
       end
     end

data/app/javascript/controllers/nk/app_shell_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 
-const narrowViewport = "(max-width: 48rem)";
+const narrowViewport = "(width < 48rem)";
 
 export default class extends Controller {
   static targets = ["dialog", "navigation", "sidebar", "trigger"];
@@ -168,8 +168,8 @@ export default class extends Controller {
     const focusTarget = this.previouslyFocused?.isConnected
       ? this.previouslyFocused
       : this.hasTriggerTarget
-        ? this.triggerTarget
-        : null;
+      ? this.triggerTarget
+      : null;
 
     this.restoreNavigation();
     this.setState(false);

data/app/javascript/controllers/nk/appearance_controller.js

@@ -48,6 +48,12 @@ export default class extends Controller {
         input.checked = input.value === preference;
       } else if (input.localName === "select") {
         input.value = preference;
+      } else if (input.dataset.appearancePreference) {
+        input.setAttribute("role", "menuitemradio");
+        input.setAttribute(
+          "aria-checked",
+          input.dataset.appearancePreference === preference,
+        );
       }
     });
     this.updateTriggerGlyph(preference);