maquina-components 0.7.3 → 0.8.0

data/app/views/components/breadcrumbs/_list.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :list
   ) %>
 
-<%= content_tag :ol, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :ol, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_page.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :page
   ) %>
 
-<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_separator.html.erb

@@ -6,8 +6,7 @@
 <li
   role="presentation"
   aria-hidden="true"
-  class="<%= css_classes %>"
-  <%= tag.attributes(data: merged_data, **html_options) %>
+  <%= tag.attributes(class: css_classes.presence, data: merged_data, **html_options) %>
 >
   <% if icon == :custom %>
     <%= yield %>

data/app/views/components/calendar/_header.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (month:, year:, month_name:, css_classes: "", **html_options) %>
+<%# locals: (month:, year:, month_name:, caption_layout: :label, years: nil, month_options: nil, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options, "calendar-part": "header") %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
@@ -9,9 +9,33 @@
     <%= builtin_icon_for :chevron_left, class: "size-4" %>
   </button>
 
-  <div data-calendar-part="caption">
-    <%= month_name %>
-  </div>
+  <% if caption_layout.to_sym == :dropdown %>
+    <div data-calendar-part="dropdowns">
+      <select data-component="select"
+              data-calendar-part="month-select"
+              data-calendar-target="monthSelect"
+              data-action="change->calendar#selectMonth"
+              aria-label="<%= t("maquina_components.calendar.month", default: "Month") %>">
+        <% month_options.each do |name, value, disabled| %>
+          <%= tag.option name, value: value, selected: value == month, disabled: disabled %>
+        <% end %>
+      </select>
+
+      <select data-component="select"
+              data-calendar-part="year-select"
+              data-calendar-target="yearSelect"
+              data-action="change->calendar#selectYear"
+              aria-label="<%= t("maquina_components.calendar.year", default: "Year") %>">
+        <% years.each do |value| %>
+          <%= tag.option value, value: value, selected: value == year %>
+        <% end %>
+      </select>
+    </div>
+  <% else %>
+    <div data-calendar-part="caption">
+      <%= month_name %>
+    </div>
+  <% end %>
 
   <button type="button"
           data-action="click->calendar#nextMonth"

data/app/views/components/calendar/_week.html.erb

@@ -3,8 +3,14 @@
 
 <%= content_tag :div, role: "row", class: css_classes.presence, data: merged_data, **html_options do %>
   <% days.each do |day| %>
+    <% is_outside = day.month != display_month %>
+    <%# A hidden outside day keeps its grid column, so the month's first day
+        still lands under the right weekday %>
+    <% if is_outside && !show_outside_days %>
+      <%= tag.span aria: {hidden: true}, data: {calendar_part: "outside-day"} %>
+      <% next %>
+    <% end %>
     <%
-      is_outside = day.month != display_month
       is_today = day == Date.current
       is_selected = selected_date && day == selected_date
       is_range_end = selected_end_date && day == selected_end_date
@@ -24,9 +30,6 @@
                     "selected"
                   end
 
-      # Skip rendering if outside day and not showing them
-      next if is_outside && !show_outside_days
-
       day_data = {
         "calendar-part": "day",
         "calendar-target": "day",

data/app/views/components/card/_content.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (spacing: :default, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :content,
-    spacing: (spacing == :full ? :full : nil)
+    spacing: (spacing.to_sym == :full ? :full : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_footer.html.erb

@@ -1,15 +1,8 @@
 <%# locals: (align: :start, spacing: :default, css_classes: "", **html_options) %>
-<% align_value = case align.to_sym
-    when :between then :between
-    when :end then :end
-    when :center then :center
-    else nil
-  end
-  
-  merged_data = merge_component_data(html_options,
+<% merged_data = merge_component_data(html_options,
     card_part: :footer,
-    align: align_value,
-    spacing: (spacing == :full ? :full : nil)
+    align: align.to_sym.presence_in(%i[between end center]),
+    spacing: (spacing.to_sym == :full ? :full : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_header.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (layout: :column, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :header,
-    layout: (layout == :row ? :row : nil)
+    layout: (layout.to_sym == :row ? :row : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_title.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (text: nil, content: nil, size: :default, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :title,
-    size: (size == :sm ? :sm : nil)
+    size: (size.to_sym == :sm ? :sm : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/combobox/_option.html.erb

@@ -17,8 +17,8 @@
       class: css_classes.presence,
       data: merged_data,
       **html_options do %>
-  <span data-combobox-part="check" class="<%= 'invisible' unless selected %>">
+  <%= tag.span data: {combobox_part: "check"}, class: ("invisible" unless selected) do %>
     <%= builtin_icon_for :check, class: "size-4" %>
-  </span>
+  <% end %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_close.html.erb

@@ -1,10 +1,16 @@
-<%# locals: (show_icon: true, css_classes: "", **html_options) %>
-<% merged_data = merge_component_data(html_options,
+<%# locals: (show_icon: true, variant: nil, size: nil, css_classes: "", **html_options) %>
+<%
+  # Without variant: it is the drawer's icon button (drawer.css). With one it
+  # renders as a regular data-component="button" in that variant and size.
+  button_data = variant ? {component: :button, variant: variant, size: size} : {}
+  merged_data = merge_component_data(html_options,
+    **button_data,
     drawer_part: :close,
     action: "click->drawer#close"
-  ) %>
-<%= content_tag :button, type: :button, class: css_classes, data: merged_data, **html_options do %>
-  <% if show_icon %> 
+  )
+%>
+<%= content_tag :button, type: :button, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if show_icon %>
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M18 6 6 18"></path>
       <path d="m6 6 12 12"></path>

data/app/views/components/drawer/_content.html.erb

@@ -2,6 +2,6 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :content
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_footer.html.erb

@@ -2,6 +2,6 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :footer
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_header.html.erb

@@ -2,7 +2,7 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :header
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <div data-drawer-part="header-content">
     <%= yield %>
   </div>

data/app/views/components/drawer/_provider.html.erb

@@ -18,6 +18,6 @@
     action: "keydown.meta+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.esc@window->drawer#closeOnEscape"
   )
 %>
-<%= content_tag :div, id: provider_id, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, id: provider_id, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_trigger.html.erb

@@ -23,9 +23,11 @@
     action: "click->drawer-trigger#triggerClick",
     drawer_trigger_drawer_outlet: drawer_selector
   )
-  button_data = merged_data.merge(component: "button")
+  # The variant:/size: locals style the button. A caller's data: { variant: }
+  # (the pre-0.7.4 workaround) still wins so existing markup keeps its look.
+  button_data = {variant: variant, size: size}.merge(merged_data, component: "button")
 %>
-<%= content_tag :button, type: :button, class: css_classes, data: button_data, **html_options do %>
+<%= content_tag :button, type: :button, class: css_classes.presence, data: button_data, **html_options do %>
   <%= icon_for(icon_name) if icon_name %>
   <%= yield %>
 <% end %>

data/app/views/components/pagination/_ellipsis.html.erb

@@ -1,12 +1,9 @@
 <%# locals: (css_classes: "", **html_options) %>
-<% sr_label = t("maquina_components.pagination.more_pages", default: "More pages") %>
+<% sr_label = t("maquina_components.pagination.more_pages", default: "More pages")
+  merged_data = merge_component_data(html_options, "pagination-part": "ellipsis") %>
 
-<span
-  class="<%= css_classes.presence %>"
-  data-pagination-part="ellipsis"
-  aria-hidden="true"
-  <%= tag.attributes(html_options.except(:data)) %>
->
+<%# Only the glyph is hidden from assistive tech, so the label is announced. %>
+<%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -25,4 +22,4 @@
   </svg>
 
   <span class="sr-only"><%= sr_label %></span>
-</span>
+<% end %>

data/app/views/components/pagination/_link.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (href:, active: false, disabled: false, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     "pagination-part": "link",
-    active: active
+    active: (active ? true : nil)
   ) %>
 
 <% if disabled %>

data/app/views/components/pagination/_next.html.erb

@@ -4,12 +4,11 @@
   merged_data = merge_component_data(html_options, "pagination-part": "next") %>
 
 <% if is_disabled %>
-  <span
-    class="<%= css_classes.presence %>"
-    data-pagination-part="next"
-    aria-disabled="true"
-    <%= tag.attributes(html_options.except(:data)) %>
-  >
+  <%= content_tag :span,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-disabled": "true",
+        **html_options do %>
     <% if show_label %>
       <span><%= display_label %></span>
     <% end %>
@@ -28,7 +27,7 @@
     >
       <path d="m9 18 6-6-6-6" />
     </svg>
-  </span>
+  <% end %>
 <% else %>
   <%= link_to href,
         class: css_classes.presence,

data/app/views/components/pagination/_previous.html.erb

@@ -4,12 +4,11 @@
   merged_data = merge_component_data(html_options, "pagination-part": "previous") %>
 
 <% if is_disabled %>
-  <span
-    class="<%= css_classes.presence %>"
-    data-pagination-part="previous"
-    aria-disabled="true"
-    <%= tag.attributes(html_options.except(:data)) %>
-  >
+  <%= content_tag :span,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-disabled": "true",
+        **html_options do %>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -28,7 +27,7 @@
     <% if show_label %>
       <span><%= display_label %></span>
     <% end %>
-  </span>
+  <% end %>
 <% else %>
   <%= link_to href,
         class: css_classes.presence,

data/app/views/components/sidebar/_content.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :content
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_footer.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :footer
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_group.html.erb

@@ -3,7 +3,7 @@
     sidebar_part: :group
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <% if title.present? %>
     <div data-sidebar-part="group-label"><%= title %></div>
   <% end %>

data/app/views/components/sidebar/_header.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :header
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_inset.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :inset
   ) %>
 
-<%= content_tag :main, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :main, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_menu.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :menu
   ) %>
 
-<%= content_tag :ul, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :ul, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_menu_button.html.erb

@@ -5,7 +5,7 @@
     active: (active ? true : nil)
   ) %>
 
-<%= link_to url, class: css_classes, data: merged_data,
+<%= link_to url, class: css_classes.presence, data: merged_data,
       "aria-current": (active ? "page" : nil), **html_options do %>
   <% if icon_name.present? %>
     <%= icon_for(icon_name) %>

data/app/views/components/sidebar/_menu_item.html.erb

@@ -2,6 +2,6 @@
 <% merged_data =
   merge_component_data(html_options, sidebar_part: "menu-item") %>
 
-<%= content_tag :li, class: "group/menu-item #{css_classes}", data: merged_data, **html_options do %>
+<%= content_tag :li, class: class_names("group/menu-item", css_classes), data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_menu_link.html.erb

@@ -4,14 +4,14 @@
     active: (active ? true : nil)
   ) %>
 
-<%= link_to url, class: css_classes, data: merged_data,
+<%= link_to url, class: css_classes.presence, data: merged_data,
       "aria-current": (active ? "page" : nil), **html_options do %>
   <% if icon.present? || text_icon.present? %>
     <div data-sidebar-part="menu-avatar">
       <% if icon.present? %>
-        <%= image_tag icon, class: icon_classes %>
+        <%= image_tag icon, class: icon_classes.presence %>
       <% elsif text_icon.present? %>
-        <span class="<%= icon_classes %>"><%= text_icon %></span>
+        <%= tag.span text_icon, class: icon_classes.presence %>
       <% end %>
     </div>
   <% end %>

data/app/views/components/sidebar/_provider.html.erb

@@ -11,6 +11,6 @@
     action: "keydown.meta+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard"
   ) %>
 
-<%= content_tag :div, id: id || "sidebar-provider", class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, id: id || "sidebar-provider", class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_trigger.html.erb

@@ -6,7 +6,7 @@
     sidebar_trigger_sidebar_outlet: "[data-outlet='sidebar']"
   ) %>
 
-<%= button_tag type: :button, class: css_classes, data: merged_data, **html_options do %>
+<%= button_tag type: :button, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= icon_for(icon_name) %>
   <span class="sr-only">Toggle Sidebar</span>
 <% end %>

data/app/views/components/stats/_stats_card.html.erb

@@ -5,8 +5,9 @@
   icon_classes = icon_classes.presence || icon_class
   value_classes = value_classes.presence || value_class
 
-  # Legacy string icon names map to built-in icons; symbols pass straight
-  # through; anything else renders as custom icon markup.
+  # Symbols resolve through icon_for (app icons first, then built-ins);
+  # legacy kebab-case strings map to built-in names; anything else renders
+  # as custom icon markup.
   legacy_icons = {
     "message-square" => :message_square,
     "arrow-up" => :arrow_up,
@@ -25,16 +26,16 @@
   <div data-stats-part="body">
     <div data-stats-part="text">
       <p data-stats-part="title"><%= title %></p>
-      <p data-stats-part="value" class="<%= value_classes.presence %>"><%= value %></p>
+      <%= tag.p value, class: value_classes.presence, data: {stats_part: "value"} %>
       <% if subtitle.present? %>
         <p data-stats-part="subtitle"><%= subtitle %></p>
       <% end %>
     </div>
 
     <% if icon.present? %>
-      <div data-stats-part="icon" class="<%= icon_classes.presence %>">
-        <%= icon_name ? builtin_icon_for(icon_name, class: "size-8") : icon %>
-      </div>
+      <%= tag.div class: icon_classes.presence, data: {stats_part: "icon"} do %>
+        <%= icon_name ? icon_for(icon_name, class: "size-8") : icon %>
+      <% end %>
     <% end %>
   </div>
 <% end %>

data/app/views/components/toast/_action.html.erb

@@ -1,6 +1,7 @@
 <%# locals: (label:, href: nil, method: nil, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
-    toast_part: "action"
+    toast_part: "action",
+    action: ("toast#handleAction" if href.blank?)
   ) %>
 
 <% merged_data["turbo-method"] = method if method.present? %>

data/lib/generators/maquina_components/install/templates/theme.css.tt

@@ -155,6 +155,17 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
 
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  /* --info and --info-foreground are declared in the shape/state token block
+     the installer appends below this palette. */
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
   --color-input: var(--input);
   --color-border: var(--border);
   --color-ring: var(--ring);

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.7.3"
+  VERSION = "0.8.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.7.3
+  version: 0.8.0
 platform: ruby
 authors:
 - Mario Alberto Chávez