lightning_ui_kit 0.3.1 → 0.3.3

data/app/components/lightning_ui_kit/sidebar_link_component.rb

@@ -1,28 +1,32 @@
 class LightningUiKit::SidebarLinkComponent < LightningUiKit::BaseComponent
-  def initialize(title:, url:, icon: nil, current: false, **options)
+  def initialize(title:, url:, icon: nil, current: false, animate_icon: false, **options)
     @title = title
     @url = url
     @icon = icon
     @current = current
+    @animate_icon = animate_icon
     @options = options
   end
 
   def classes
-    base_classes = "lui:flex lui:items-center lui:gap-3 lui:rounded-lg lui:px-3 lui:py-2 lui:text-sm lui:transition-colors"
+    base_classes = "lui:relative lui:flex lui:items-center lui:gap-3 lui:rounded-lg lui:px-3 lui:py-2 lui:text-sm lui:transition-all lui:duration-150 lui:ease-out"
 
     if @current
-      merge_classes([base_classes, "lui:bg-zinc-950/5 lui:text-zinc-950 lui:font-semibold", @options[:class]].compact.join(" "))
+      merge_classes([base_classes, "lui:bg-surface-hover lui:text-foreground lui:font-semibold", @options[:class]].compact.join(" "))
     else
-      merge_classes([base_classes, "lui:text-zinc-600 lui:hover:bg-zinc-950/5 lui:hover:text-zinc-950", @options[:class]].compact.join(" "))
+      merge_classes([base_classes, "lui:text-foreground-secondary lui:hover:bg-surface-hover lui:hover:text-foreground", @options[:class]].compact.join(" "))
     end
   end
 
   def icon_classes
-    if @current
-      "lui:size-5 lui:shrink-0 lui:text-zinc-600"
+    base = if @current
+      "lui:size-5 lui:shrink-0 lui:text-foreground"
     else
-      "lui:size-5 lui:shrink-0 lui:text-zinc-400"
+      "lui:size-5 lui:shrink-0 lui:text-foreground-faint lui:transition-colors lui:duration-150 lui:group-hover:text-foreground-secondary"
     end
+
+    base += " lui:group-hover:animate-icon-bounce" if @animate_icon
+    base
   end
 
   def data

data/app/components/lightning_ui_kit/sidebar_section_component.rb

@@ -11,6 +11,6 @@ class LightningUiKit::SidebarSectionComponent < LightningUiKit::BaseComponent
   end
 
   def title_classes
-    "lui:px-3 lui:py-2 lui:text-xs lui:font-medium lui:text-zinc-400 lui:uppercase lui:tracking-wider"
+    "lui:px-3 lui:py-2 lui:text-[0.6875rem] lui:font-semibold lui:text-foreground-faint lui:uppercase lui:tracking-widest"
   end
 end

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

@@ -1,10 +1,10 @@
 <div role="status" class="lui:animate-pulse">
   <% if @with_title %>
-    <h3 class="lui:h-3 lui:bg-gray-300 lui:rounded-full lui:w-48 lui:mb-4"></h3>
+    <h3 class="lui:h-3 lui:bg-surface-tertiary lui:rounded-full lui:w-48 lui:mb-4"></h3>
   <% end %>
   <div class="lui:space-y-2.5">
     <% @lines.times do %>
-      <p class="lui:h-2 lui:bg-gray-300 lui:rounded-full"></p>
+      <p class="lui:h-2 lui:bg-surface-tertiary lui:rounded-full"></p>
     <% end %>
   </div>
 </div>

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

@@ -1,10 +1,11 @@
-<svg class="lui:animate-spin lui:border-zinc-500"
+<svg class="lui:animate-spin"
   xmlns="http://www.w3.org/2000/svg" width="18" height="18"
-  viewBox="0 0 30 30" fill="none">
+  viewBox="0 0 30 30" fill="none"
+  style="--lui-spinner-primary: var(--lui-theme-spinner-primary); --lui-spinner-secondary: var(--lui-theme-spinner-secondary);">
   <path fill-rule="evenodd" clip-rule="evenodd"
   d="M14.4304 0.0323927C14.0002 0.172039 13.7522 0.420298 13.6321 0.825659C13.5643 1.05258 13.5527 1.58013 13.5527 4.33426C13.5527 7.98251 13.5488 7.93596 13.9208 8.30835C14.4187 8.80487 15.5812 8.80487 16.0792 8.30835C16.4511 7.93596 16.4473 7.98251 16.4473 4.33426C16.4473 0.804324 16.4415 0.742259 16.1547 0.400903C15.9145 0.115792 15.6568 0.0207556 15.0775 0.00523939C14.8614 -0.00695113 14.6447 0.00214369 14.4304 0.0323927ZM24.4026 3.89593C24.1643 4.00648 23.7574 4.38857 21.816 6.33779C20.0316 8.12797 19.4872 8.70595 19.4 8.89602C19.3276 9.05362 19.2902 9.2251 19.2905 9.39857C19.2909 9.57205 19.3289 9.74338 19.4019 9.9007C19.5376 10.1916 19.9832 10.6494 20.2835 10.8065C20.5877 10.9655 21.0391 10.9636 21.3549 10.8026C21.6785 10.6358 26.1541 6.15547 26.3207 5.83157C26.4001 5.66482 26.4417 5.4826 26.4427 5.29788C26.4437 5.11317 26.404 4.93051 26.3265 4.7629C26.1121 4.40396 25.8092 4.10611 25.4469 3.89787C25.2865 3.81116 25.1072 3.7656 24.925 3.76526C24.7427 3.76492 24.5633 3.80982 24.4026 3.89593ZM22.2559 13.5858C21.9939 13.6581 21.7571 13.8017 21.5719 14.0009C21.3065 14.3597 21.2232 15.0889 21.3898 15.6029C21.5022 15.952 21.785 16.2352 22.1338 16.3477C22.3702 16.4253 22.7557 16.435 25.6406 16.435C28.4093 16.435 28.9189 16.4233 29.1475 16.3554C29.719 16.1848 29.998 15.7348 30 14.9842C30 14.2375 29.7152 13.7894 29.1242 13.611C28.9247 13.5509 28.2989 13.5392 25.6484 13.5431C23.8698 13.547 22.343 13.5664 22.2559 13.5858ZM20.3339 19.3811C20.0277 19.5207 19.5763 19.963 19.4194 20.2772C19.3393 20.4342 19.2957 20.6073 19.2916 20.7836C19.2876 20.9599 19.3233 21.1348 19.3961 21.2954C19.5395 21.6154 24.0422 26.1384 24.3968 26.3188C24.8986 26.5767 25.4139 26.4507 25.9332 25.9425C26.4447 25.4421 26.5803 24.899 26.3207 24.3928C26.1405 24.0379 21.6223 19.5304 21.3026 19.3869C21.1498 19.3207 20.9853 19.286 20.8188 19.285C20.6524 19.284 20.4874 19.3167 20.3339 19.3811ZM14.5059 21.342C14.2442 21.4158 14.0076 21.56 13.822 21.759C13.5546 22.1197 13.5527 22.1449 13.5527 25.6322C13.5527 28.4096 13.5643 28.9197 13.6321 29.1485C13.8026 29.7207 14.254 30 15 30C15.7459 30 16.1973 29.7207 16.3678 29.1485C16.488 28.7374 16.486 22.5018 16.364 22.143C16.3264 21.9983 16.2577 21.8636 16.1627 21.7484C16.0676 21.6331 15.9485 21.5401 15.8137 21.4758C15.6006 21.3594 15.4766 21.3303 15.1104 21.3167C14.9086 21.3046 14.706 21.313 14.5059 21.342Z"
-  fill="#9F9FA9" />
+  fill="var(--lui-spinner-primary)" />
   <path fill-rule="evenodd" clip-rule="evenodd"
   d="M4.83402 3.86487C4.5279 4.00452 4.07647 4.44673 3.91953 4.76093C3.83948 4.918 3.79581 5.09111 3.79179 5.2674C3.78776 5.44369 3.82348 5.61861 3.89628 5.77918C4.03965 6.0992 8.54237 10.6222 8.89693 10.8026C9.39873 11.0605 9.91411 10.9344 10.4334 10.4263C10.9448 9.92589 11.0805 9.38282 10.8208 8.8766C10.6407 8.52167 6.12245 4.01421 5.80276 3.87069C5.65 3.80447 5.48545 3.76982 5.31899 3.76882C5.15252 3.76782 4.98757 3.80049 4.83402 3.86487ZM0.85443 13.6129C0.282873 13.7933 0 14.2491 0 14.9842C0.00193748 15.7348 0.280935 16.1847 0.852493 16.3554C1.08112 16.4233 1.59067 16.4349 4.35934 16.4349C7.24425 16.4349 7.62981 16.4252 7.86618 16.3477C8.03981 16.2905 8.19761 16.1934 8.32684 16.064C8.45607 15.9347 8.55313 15.7767 8.61018 15.6029C8.7768 15.0889 8.69349 14.3596 8.42805 13.9989C8.32166 13.8831 8.19656 13.7861 8.058 13.7118L7.79256 13.5644L4.4349 13.5528C1.73211 13.545 1.03268 13.5567 0.85443 13.6129ZM8.90274 19.4121C8.66443 19.5227 8.25756 19.9047 6.3162 21.854C4.53177 23.6442 3.98734 24.2221 3.90016 24.4122C3.82771 24.5698 3.79037 24.7413 3.7907 24.9148C3.79104 25.0882 3.82904 25.2596 3.90209 25.4169C4.03772 25.7078 4.48334 26.1655 4.78365 26.3226C5.08783 26.4817 5.53927 26.4797 5.85508 26.3188C6.17864 26.152 10.6542 21.6717 10.8208 21.3478C10.9002 21.181 10.9419 20.9988 10.9429 20.8141C10.9439 20.6294 10.9042 20.4467 10.8267 20.2791C10.6122 19.9201 10.3094 19.6223 9.94704 19.414C9.7867 19.3273 9.60738 19.2818 9.42513 19.2814C9.24289 19.2811 9.06341 19.326 8.90274 19.4121Z"
-  fill="#D1D5DB" />
+  fill="var(--lui-spinner-secondary)" />
 </svg>

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

@@ -3,14 +3,14 @@
   <% if @description %>
     <%= tag.p(
       @description,
-      class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: description_data
     ) %>
   <% end %>
   <% if has_errors? %>
     <%= tag.p(
       error_messages,
-      class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-destructive-text lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: error_data
     ) %>
   <% end %>

data/app/components/lightning_ui_kit/switch_component.rb

@@ -53,13 +53,13 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
   def button_classes
     "lui:group lui:relative lui:isolate lui:inline-flex lui:h-6 lui:w-10 lui:cursor-default lui:rounded-full " \
     "lui:p-[3px] lui:sm:h-5 lui:sm:w-8 lui:transition lui:duration-200 lui:ease-in-out " \
-    "lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] lui:bg-zinc-200 lui:ring-1 lui:ring-black/5 lui:ring-inset " \
+    "lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] lui:bg-surface-tertiary lui:ring-1 lui:ring-black/5 lui:ring-inset " \
     "lui:data-checked:bg-(--switch-bg) lui:data-checked:ring-(--switch-bg-ring) lui:focus:outline-hidden lui:data-focus:outline-2 " \
-    "lui:data-focus:outline-offset-2 lui:data-focus:outline-blue-500 lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring) " \
-    "lui:data-disabled:bg-zinc-200 lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-zinc-200 lui:data-disabled:data-checked:ring-black/5 " \
-    "lui:[--switch-bg-ring:var(--lui-color-zinc-950)]/90 " \
-    "lui:[--switch-bg:var(--lui-color-zinc-900)] " \
-    "lui:[--switch-ring:var(--lui-color-zinc-950)]/90 " \
+    "lui:data-focus:outline-offset-2 lui:data-focus:outline-focus lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring) " \
+    "lui:data-disabled:bg-surface-tertiary lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-surface-tertiary lui:data-disabled:data-checked:ring-black/5 " \
+    "lui:[--switch-bg-ring:var(--lui-theme-border-invert)] " \
+    "lui:[--switch-bg:var(--lui-theme-surface-invert)] " \
+    "lui:[--switch-ring:var(--lui-theme-border-invert)] " \
     "lui:[--switch-shadow:var(--lui-color-black)]/10 " \
     "lui:[--switch:white]"
   end
@@ -97,7 +97,7 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
   def render_label
     return unless render_label?
 
-    tag.label(effective_label, id: label_id, class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6", data: label_data)
+    tag.label(effective_label, id: label_id, class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6", data: label_data)
   end
 
   def render_hidden_field

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

@@ -1,12 +1,12 @@
-<div class="lui:border-zinc-950/5 lui:border lui:rounded-lg">
-  <table class="lui:min-w-full lui:text-left lui:text-sm/6 lui:text-zinc-950 lui:border-collapse lui:border-inherit">
-    <thead class="lui:text-zinc-500">
+<div class="lui:border-border-subtle lui:border lui:rounded-lg">
+  <table class="lui:min-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="">
         <% columns.each do |column| %>
-          <th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
+          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
         <% end %>
         <% if actions.present? %>
-          <th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
+          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
         <% end %>
       </tr>
     </thead>
@@ -21,12 +21,12 @@
         <% @data.each do |row| %>
           <tr class="lui:group">
             <% columns.each do |column| %>
-              <td class="lui:p-4 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
+              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
                 <%= column.call(row) %>
               </td>
             <% end %>
             <% if actions.present? %>
-              <td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
+              <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 %>

data/app/components/lightning_ui_kit/text_component.rb

@@ -5,6 +5,6 @@ class LightningUiKit::TextComponent < LightningUiKit::BaseComponent
   end
 
   def classes
-    merge_classes(["lui:text-zinc-600 lui:text-#{@size}", @options[:class]].compact.join(" "))
+    merge_classes(["lui:text-foreground-secondary lui:text-#{@size}", @options[:class]].compact.join(" "))
   end
 end

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

@@ -8,7 +8,7 @@
   <% if @description %>
     <%= tag.p(
       @description,
-      class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: description_data
     ) %>
   <% end %>
@@ -18,7 +18,7 @@
   <% if has_errors? %>
     <%= tag.p(
       error_messages,
-      class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-destructive-text lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: error_data
     ) %>
   <% end %>

data/app/components/lightning_ui_kit/textarea_component.rb

@@ -48,7 +48,7 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
 
   def label_html_options
     {
-      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: label_data
     }
   end
@@ -70,7 +70,7 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
       cols: @cols,
       multiple: @multiple,
       data: input_data,
-      class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500 lui:data-disabled:border-zinc-950/20",
+      class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-foreground lui:placeholder:text-foreground-muted lui:sm:text-sm/6 lui:border lui:border-border lui:data-[hover]:border-border-hover lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-destructive-border lui:data-invalid:data-[hover]:border-destructive-border lui:data-disabled:border-border-hover",
       disabled: @disabled,
       autofocus: @autofocus
     }
@@ -85,6 +85,6 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
   end
 
   def control_classes
-    "lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10"
+    "lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-surface-input lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-focus lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-surface-hover lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-destructive-border/10"
   end
 end

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

@@ -7,12 +7,12 @@
     lui_toast_dismiss_after_value: @dismiss_after,
   }
 ) do %>
-  <div class="lui:flex lui:items-center lui:w-full lui:max-w-xs lui:p-4 lui:text-zinc-600 lui:bg-white lui:rounded-lg lui:shadow" role="alert">
+  <div class="lui:flex lui:items-center lui:w-full lui:max-w-xs lui:p-4 lui:text-foreground-secondary lui:bg-surface-secondary lui:rounded-lg lui:shadow" role="alert">
     <div class="lui:ml-3 lui:text-sm lui:font-normal"><%= content %></div>
     <button
       type="button"
-      class="lui:ml-auto lui:-mx-1.5 lui:-my-1.5 lui:bg-white lui:text-zinc-600 lui:hover:text-zinc-950
-      lui:rounded-lg lui:focus:ring-2 lui:focus:ring-zinc-950/10 lui:p-1.5 lui:hover:bg-gray-100 lui:inline-flex
+      class="lui:ml-auto lui:-mx-1.5 lui:-my-1.5 lui:bg-surface-secondary lui:text-foreground-secondary lui:hover:text-foreground
+      lui:rounded-lg lui:focus:ring-2 lui:focus:ring-border lui:p-1.5 lui:hover:bg-surface-tertiary lui:inline-flex
       lui:items-center lui:justify-center lui:h-8 lui:w-8 lui:cursor-pointer" data-action="click->lui-toast#close" aria-label="Close">
       <svg class="lui:w-3 lui:h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>

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

@@ -7,9 +7,9 @@
   <%= content %>
 
   <%= tag.div(data: { "lui-tooltip-target" => "template" }, class: "lui:hidden") do %>
-    <%= tag.div( class: "lui:absolute lui:z-50 lui:px-3 lui:py-2 lui:text-sm lui:font-medium lui:text-white lui:bg-zinc-800 lui:rounded-lg lui:shadow-sm lui:opacity-0 lui:transition-opacity lui:duration-200 lui:ease-in-out") do %>
+    <%= tag.div( class: "lui:absolute lui:z-50 lui:px-3 lui:py-2 lui:text-sm lui:font-medium lui:text-tooltip-text lui:bg-tooltip-bg lui:rounded-lg lui:shadow-sm lui:opacity-0 lui:transition-opacity lui:duration-200 lui:ease-in-out") do %>
       <%= @text %>
-      <%= tag.div( class: "tooltip-arrow lui:absolute lui:w-2 lui:h-2 lui:bg-zinc-800 lui:transform lui:rotate-45", data: { "tooltip-arrow" => "true" }) %>
+      <%= tag.div( class: "tooltip-arrow lui:absolute lui:w-2 lui:h-2 lui:bg-tooltip-bg lui:transform lui:rotate-45", data: { "tooltip-arrow" => "true" }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/javascript/lightning_ui_kit/controllers/combobox_controller.js

@@ -391,10 +391,10 @@ export default class extends Controller {
 
       const tag = document.createElement("span")
       tag.setAttribute("data-combobox-tag", "true")
-      tag.className = "lui:inline-flex lui:items-center lui:gap-1 lui:rounded-md lui:bg-zinc-100 lui:px-2 lui:py-0.5 lui:text-sm lui:text-zinc-700"
+      tag.className = "lui:inline-flex lui:items-center lui:gap-1 lui:rounded-md lui:bg-surface-tertiary lui:px-2 lui:py-0.5 lui:text-sm lui:text-foreground-secondary"
       tag.innerHTML = `
         <span class="lui:truncate lui:max-w-[150px]">${this.escapeHtml(label)}</span>
-        <button type="button" data-value="${this.escapeHtml(String(value))}" data-action="click->lui-combobox#removeTag" class="lui:text-zinc-500 lui:hover:text-zinc-700 lui:flex-shrink-0 lui:ml-0.5">
+        <button type="button" data-value="${this.escapeHtml(String(value))}" data-action="click->lui-combobox#removeTag" class="lui:text-foreground-muted lui:hover:text-foreground-secondary lui:flex-shrink-0 lui:ml-0.5">
           <svg class="lui:h-3.5 lui:w-3.5" viewBox="0 0 16 16" fill="currentColor">
             <path d="M5.28 4.22a.75.75 0 00-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 101.06 1.06L8 9.06l2.72 2.72a.75.75 0 101.06-1.06L9.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L8 6.94 5.28 4.22z"/>
           </svg>

data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js

@@ -16,7 +16,7 @@ class Upload {
         const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
         const status = fileContainer.querySelector("[data-lui-dropzone-target='status']")
         status.textContent = "Failed. " + error
-        status.classList.add("text-red-500")
+        status.classList.add("text-destructive-text")
       } else {
         const hiddenField = document.createElement('input')
         hiddenField.setAttribute("type", "hidden");

data/lib/lightning_ui_kit/builder.rb

@@ -4,116 +4,116 @@ module LightningUiKit
       @view_context = view_context
     end
 
-    def alert(...)
-      render(AlertComponent.new(...))
+    def alert(*, **, &block)
+      render(AlertComponent.new(*, **), &block)
     end
 
-    def avatar(...)
-      render(AvatarComponent.new(...))
+    def avatar(*, **, &block)
+      render(AvatarComponent.new(*, **), &block)
     end
 
-    def badge(...)
-      render(BadgeComponent.new(...))
+    def badge(*, **, &block)
+      render(BadgeComponent.new(*, **), &block)
     end
 
-    def banner(...)
-      render(BannerComponent.new(...))
+    def banner(*, **, &block)
+      render(BannerComponent.new(*, **), &block)
     end
 
-    def button(...)
-      render(ButtonComponent.new(...))
+    def button(*, **, &block)
+      render(ButtonComponent.new(*, **), &block)
     end
 
-    def checkbox(...)
-      render(CheckboxComponent.new(...))
+    def checkbox(*, **, &block)
+      render(CheckboxComponent.new(*, **), &block)
     end
 
-    def combobox(...)
-      render(ComboboxComponent.new(...))
+    def combobox(*, **, &block)
+      render(ComboboxComponent.new(*, **), &block)
     end
 
-    def description_list(...)
-      render(DescriptionListComponent.new(...))
+    def description_list(*, **, &block)
+      render(DescriptionListComponent.new(*, **), &block)
     end
 
-    def dropdown(...)
-      render(DropdownComponent.new(...))
+    def dropdown(*, **, &block)
+      render(DropdownComponent.new(*, **), &block)
     end
 
-    def dropzone(...)
-      render(DropzoneComponent.new(...))
+    def dropzone(*, **, &block)
+      render(DropzoneComponent.new(*, **), &block)
     end
 
-    def file_input(...)
-      render(FileInputComponent.new(...))
+    def file_input(*, **, &block)
+      render(FileInputComponent.new(*, **), &block)
     end
 
-    def input(...)
-      render(InputComponent.new(...))
+    def input(*, **, &block)
+      render(InputComponent.new(*, **), &block)
     end
 
-    def layout(...)
-      render(LayoutComponent.new(...))
+    def layout(*, **, &block)
+      render(LayoutComponent.new(*, **), &block)
     end
 
-    def link(...)
-      render(LinkComponent.new(...))
+    def link(*, **, &block)
+      render(LinkComponent.new(*, **), &block)
     end
 
-    def modal(...)
-      render(ModalComponent.new(...))
+    def modal(*, **, &block)
+      render(ModalComponent.new(*, **), &block)
     end
 
-    def pagination(...)
-      render(PaginationComponent.new(...))
+    def pagination(*, **, &block)
+      render(PaginationComponent.new(*, **), &block)
     end
 
-    def select(...)
-      render(SelectComponent.new(...))
+    def select(*, **, &block)
+      render(SelectComponent.new(*, **), &block)
     end
 
-    def sidebar(...)
-      render(SidebarComponent.new(...))
+    def sidebar(*, **, &block)
+      render(SidebarComponent.new(*, **), &block)
     end
 
-    def sidebar_link(...)
-      render(SidebarLinkComponent.new(...))
+    def sidebar_link(*, **, &block)
+      render(SidebarLinkComponent.new(*, **), &block)
     end
 
-    def sidebar_section(...)
-      render(SidebarSectionComponent.new(...))
+    def sidebar_section(*, **, &block)
+      render(SidebarSectionComponent.new(*, **), &block)
     end
 
-    def skeleton(...)
-      render(SkeletonComponent.new(...))
+    def skeleton(*, **, &block)
+      render(SkeletonComponent.new(*, **), &block)
     end
 
-    def spinner(...)
-      render(SpinnerComponent.new(...))
+    def spinner(*, **, &block)
+      render(SpinnerComponent.new(*, **), &block)
     end
 
-    def switch(...)
-      render(SwitchComponent.new(...))
+    def switch(*, **, &block)
+      render(SwitchComponent.new(*, **), &block)
     end
 
-    def table(...)
-      render(TableComponent.new(...))
+    def table(*, **, &block)
+      render(TableComponent.new(*, **), &block)
     end
 
-    def text(...)
-      render(TextComponent.new(...))
+    def text(*, **, &block)
+      render(TextComponent.new(*, **), &block)
     end
 
-    def textarea(...)
-      render(TextareaComponent.new(...))
+    def textarea(*, **, &block)
+      render(TextareaComponent.new(*, **), &block)
     end
 
-    def toast(...)
-      render(ToastComponent.new(...))
+    def toast(*, **, &block)
+      render(ToastComponent.new(*, **), &block)
     end
 
-    def tooltip(...)
-      render(TooltipComponent.new(...))
+    def tooltip(*, **, &block)
+      render(TooltipComponent.new(*, **), &block)
     end
 
     private

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.3.1"
+  VERSION = "0.3.3"
 end

data/vendor/bundle/ruby/3.4.0/extensions/x86_64-linux/3.4.0/bigdecimal-3.2.2/gem_make.out

@@ -28,17 +28,17 @@ checking for RB_WARN_CATEGORY_DEPRECATED in ruby.h... yes
 creating Makefile
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-hs68jf sitelibdir\=./.gem.20260118-2168-hs68jf clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-upzaqc sitelibdir\=./.gem.20260219-2287-upzaqc clean
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-hs68jf sitelibdir\=./.gem.20260118-2168-hs68jf
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-upzaqc sitelibdir\=./.gem.20260219-2287-upzaqc
 compiling bigdecimal.c
 compiling missing.c
 linking shared-object bigdecimal.so
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-hs68jf sitelibdir\=./.gem.20260118-2168-hs68jf install
-/usr/bin/install -c -m 0755 bigdecimal.so ./.gem.20260118-2168-hs68jf
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-upzaqc sitelibdir\=./.gem.20260219-2287-upzaqc install
+/usr/bin/install -c -m 0755 bigdecimal.so ./.gem.20260219-2287-upzaqc
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-hs68jf sitelibdir\=./.gem.20260118-2168-hs68jf clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-upzaqc sitelibdir\=./.gem.20260219-2287-upzaqc clean

data/vendor/bundle/ruby/3.4.0/extensions/x86_64-linux/3.4.0/bigdecimal-3.2.2/mkmf.log

@@ -135,7 +135,7 @@ checked program was:
 have_func: checking for _lzcnt_u32() in x86intrin.h... -------------------- no
 
 LD_LIBRARY_PATH=.:/opt/hostedtoolcache/Ruby/3.4.8/x64/lib ASAN_OPTIONS=detect_leaks=0 "gcc -o conftest -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/x86_64-linux -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/ruby/backward -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0 -I. -DENABLE_PATH_CHECK=0   -fstack-protector-strong -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2  -O3 -fno-fast-math -ggdb3 -Wall -Wextra -Wdeprecated-declarations -Wdiv-by-zero -Wduplicated-cond -Wimplicit-function-declaration -Wimplicit-int -Wpointer-arith -Wwrite-strings -Wold-style-definition -Wimplicit-fallthrough=0 -Wmissing-noreturn -Wno-cast-function-type -Wno-constant-logical-operand -Wno-long-long -Wno-missing-field-initializers -Wno-overlength-strings -Wno-packed-bitfield-compat -Wno-parentheses-equality -Wno-self-assign -Wno-tautological-compare -Wno-unused-parameter -Wno-unused-value -Wsuggest-attribute=format -Wsuggest-attribute=noreturn -Wunused-variable -Wmisleading-indentation -Wundef  -fPIC conftest.c -L. -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L. -fstack-protector-strong -rdynamic -Wl,-export-dynamic -Wl,--no-as-needed     -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -lruby  -lm -lpthread  -lc"
-/usr/bin/ld: /tmp/ccsWqpog.o: in function `t':
+/usr/bin/ld: /tmp/ccR67fFp.o: in function `t':
 /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal/conftest.c:16:(.text+0x7): undefined reference to `_lzcnt_u32'
 collect2: error: ld returned 1 exit status
 checked program was:
@@ -197,7 +197,7 @@ checked program was:
 have_func: checking for _lzcnt_u64() in x86intrin.h... -------------------- no
 
 LD_LIBRARY_PATH=.:/opt/hostedtoolcache/Ruby/3.4.8/x64/lib ASAN_OPTIONS=detect_leaks=0 "gcc -o conftest -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/x86_64-linux -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/ruby/backward -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0 -I. -DENABLE_PATH_CHECK=0   -fstack-protector-strong -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2  -O3 -fno-fast-math -ggdb3 -Wall -Wextra -Wdeprecated-declarations -Wdiv-by-zero -Wduplicated-cond -Wimplicit-function-declaration -Wimplicit-int -Wpointer-arith -Wwrite-strings -Wold-style-definition -Wimplicit-fallthrough=0 -Wmissing-noreturn -Wno-cast-function-type -Wno-constant-logical-operand -Wno-long-long -Wno-missing-field-initializers -Wno-overlength-strings -Wno-packed-bitfield-compat -Wno-parentheses-equality -Wno-self-assign -Wno-tautological-compare -Wno-unused-parameter -Wno-unused-value -Wsuggest-attribute=format -Wsuggest-attribute=noreturn -Wunused-variable -Wmisleading-indentation -Wundef  -fPIC conftest.c -L. -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L. -fstack-protector-strong -rdynamic -Wl,-export-dynamic -Wl,--no-as-needed     -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -lruby  -lm -lpthread  -lc"
-/usr/bin/ld: /tmp/ccpsyZag.o: in function `t':
+/usr/bin/ld: /tmp/ccydACiN.o: in function `t':
 /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal/conftest.c:16:(.text+0x7): undefined reference to `_lzcnt_u64'
 collect2: error: ld returned 1 exit status
 checked program was:
@@ -381,7 +381,7 @@ checked program was:
 /* end */
 
 LD_LIBRARY_PATH=.:/opt/hostedtoolcache/Ruby/3.4.8/x64/lib ASAN_OPTIONS=detect_leaks=0 "gcc -o conftest -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/x86_64-linux -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0/ruby/backward -I/opt/hostedtoolcache/Ruby/3.4.8/x64/include/ruby-3.4.0 -I. -DENABLE_PATH_CHECK=0   -fstack-protector-strong -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2  -O3 -fno-fast-math -ggdb3 -Wall -Wextra -Wdeprecated-declarations -Wdiv-by-zero -Wduplicated-cond -Wimplicit-function-declaration -Wimplicit-int -Wpointer-arith -Wwrite-strings -Wold-style-definition -Wimplicit-fallthrough=0 -Wmissing-noreturn -Wno-cast-function-type -Wno-constant-logical-operand -Wno-long-long -Wno-missing-field-initializers -Wno-overlength-strings -Wno-packed-bitfield-compat -Wno-parentheses-equality -Wno-self-assign -Wno-tautological-compare -Wno-unused-parameter -Wno-unused-value -Wsuggest-attribute=format -Wsuggest-attribute=noreturn -Wunused-variable -Wmisleading-indentation -Wundef  -fPIC conftest.c -L. -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L. -fstack-protector-strong -rdynamic -Wl,-export-dynamic -Wl,--no-as-needed     -Wl,-rpath,/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -L/opt/hostedtoolcache/Ruby/3.4.8/x64/lib -lruby  -lm -lpthread  -lc"
-/usr/bin/ld: /tmp/ccQoEAnR.o: in function `t':
+/usr/bin/ld: /tmp/cczaSyKC.o: in function `t':
 /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/bigdecimal-3.2.2/ext/bigdecimal/conftest.c:17:(.text+0xb): undefined reference to `__builtin_isfinite'
 collect2: error: ld returned 1 exit status
 checked program was:

data/vendor/bundle/ruby/3.4.0/extensions/x86_64-linux/3.4.0/date-3.4.1/gem_make.out

@@ -6,10 +6,10 @@ checking for altzone in time.h with -Werror... no
 creating Makefile
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/date-3.4.1/ext/date
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-sewwxo sitelibdir\=./.gem.20260118-2168-sewwxo clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-38b6b6 sitelibdir\=./.gem.20260219-2287-38b6b6 clean
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/date-3.4.1/ext/date
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-sewwxo sitelibdir\=./.gem.20260118-2168-sewwxo
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-38b6b6 sitelibdir\=./.gem.20260219-2287-38b6b6
 compiling date_core.c
 compiling date_parse.c
 compiling date_strftime.c
@@ -17,8 +17,8 @@ compiling date_strptime.c
 linking shared-object date_core.so
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/date-3.4.1/ext/date
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-sewwxo sitelibdir\=./.gem.20260118-2168-sewwxo install
-/usr/bin/install -c -m 0755 date_core.so ./.gem.20260118-2168-sewwxo
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-38b6b6 sitelibdir\=./.gem.20260219-2287-38b6b6 install
+/usr/bin/install -c -m 0755 date_core.so ./.gem.20260219-2287-38b6b6
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/date-3.4.1/ext/date
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-sewwxo sitelibdir\=./.gem.20260118-2168-sewwxo clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-38b6b6 sitelibdir\=./.gem.20260219-2287-38b6b6 clean

data/vendor/bundle/ruby/3.4.0/extensions/x86_64-linux/3.4.0/erb-5.0.2/gem_make.out

@@ -4,16 +4,16 @@ checking for rb_ext_ractor_safe() in ruby.h... yes
 creating Makefile
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/erb-5.0.2/ext/erb/escape
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-jxrpw6 sitelibdir\=./.gem.20260118-2168-jxrpw6 clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-sdznal sitelibdir\=./.gem.20260219-2287-sdznal clean
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/erb-5.0.2/ext/erb/escape
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-jxrpw6 sitelibdir\=./.gem.20260118-2168-jxrpw6
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-sdznal sitelibdir\=./.gem.20260219-2287-sdznal
 compiling escape.c
 linking shared-object erb/escape.so
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/erb-5.0.2/ext/erb/escape
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-jxrpw6 sitelibdir\=./.gem.20260118-2168-jxrpw6 install
-/usr/bin/install -c -m 0755 escape.so ./.gem.20260118-2168-jxrpw6/erb
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-sdznal sitelibdir\=./.gem.20260219-2287-sdznal install
+/usr/bin/install -c -m 0755 escape.so ./.gem.20260219-2287-sdznal/erb
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/erb-5.0.2/ext/erb/escape
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-jxrpw6 sitelibdir\=./.gem.20260118-2168-jxrpw6 clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-sdznal sitelibdir\=./.gem.20260219-2287-sdznal clean

data/vendor/bundle/ruby/3.4.0/extensions/x86_64-linux/3.4.0/io-console-0.8.1/gem_make.out

@@ -16,16 +16,16 @@ checking for ttyname_r()... yes
 creating Makefile
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/io-console-0.8.1/ext/io/console
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-2t9eyt sitelibdir\=./.gem.20260118-2168-2t9eyt clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-tnwloq sitelibdir\=./.gem.20260219-2287-tnwloq clean
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/io-console-0.8.1/ext/io/console
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-2t9eyt sitelibdir\=./.gem.20260118-2168-2t9eyt
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-tnwloq sitelibdir\=./.gem.20260219-2287-tnwloq
 compiling console.c
 linking shared-object io/console.so
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/io-console-0.8.1/ext/io/console
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-2t9eyt sitelibdir\=./.gem.20260118-2168-2t9eyt install
-/usr/bin/install -c -m 0755 console.so ./.gem.20260118-2168-2t9eyt/io
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-tnwloq sitelibdir\=./.gem.20260219-2287-tnwloq install
+/usr/bin/install -c -m 0755 console.so ./.gem.20260219-2287-tnwloq/io
 
 current directory: /home/runner/work/lightning_ui_kit/lightning_ui_kit/vendor/bundle/ruby/3.4.0/gems/io-console-0.8.1/ext/io/console
-make DESTDIR\= sitearchdir\=./.gem.20260118-2168-2t9eyt sitelibdir\=./.gem.20260118-2168-2t9eyt clean
+make DESTDIR\= sitearchdir\=./.gem.20260219-2287-tnwloq sitelibdir\=./.gem.20260219-2287-tnwloq clean