maquina-components 0.5.1 → 0.6.0

data/app/helpers/maquina_components/icons_helper.rb

@@ -1,10 +1,20 @@
 module MaquinaComponents
   module IconsHelper
+    # Renders an icon by name, preferring the host app's main_icon_svg_for
+    # override and falling back to the engine's built-in set.
+    #
+    # An unknown name used to render nothing at all, which is invisible in
+    # review and in production. When MaquinaComponents.strict_icons is on
+    # (development and test by default) it raises instead; production keeps
+    # the nil so a typo can never take a page down.
     def icon_for(name, options = {})
       return nil unless name
 
       svg = main_icon_svg_for(name.to_sym) || icon_svg_for(name.to_sym)
-      return nil unless svg
+      unless svg
+        raise MaquinaComponents::UnknownIconError, unknown_icon_message(name) if MaquinaComponents.strict_icons?
+        return nil
+      end
 
       apply_icon_options(svg, options)
     end
@@ -25,6 +35,13 @@ module MaquinaComponents
 
     private
 
+    def unknown_icon_message(name)
+      "Unknown icon #{name.to_sym.inspect}. Define it in your app's " \
+      "main_icon_svg_for override, or use one of the engine's built-in icons " \
+      "(see app/helpers/maquina_components/icons_helper.rb). Set " \
+      "MaquinaComponents.strict_icons = false to fall back to rendering nothing."
+    end
+
     def apply_icon_options(svg, options)
       return svg.html_safe unless options&.any?
 
@@ -204,7 +221,7 @@ module MaquinaComponents
             <path d="M12 8h.01"/>
           </svg>
         SVG
-      when :triangle_alert
+      when :triangle_alert, :alert_triangle # :alert_triangle is a common lucide-era alias
         <<~SVG.freeze
           <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" class="">
             <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
@@ -212,6 +229,13 @@ module MaquinaComponents
             <path d="M12 17h.01"/>
           </svg>
         SVG
+      when :briefcase
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+            <rect width="20" height="14" x="2" y="6" rx="2"/>
+          </svg>
+        SVG
       when :check_circle
         <<~SVG.freeze
           <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" class="">

data/app/javascript/controllers/drawer_trigger_controller.js

@@ -7,11 +7,16 @@ import { Controller } from "@hotwired/stimulus";
  * state on the trigger (aria-expanded, aria-controls).
  * Can be placed anywhere on the page - finds drawer via outlet selector.
  *
+ * The outlet selector decides which drawer(s) a trigger controls. The default
+ * document-wide marker targets every drawer on the page; scope it to one
+ * provider's id when a page has more than one drawer (the drawer/trigger
+ * partial does this via its for_id: local).
+ *
  * @example
  * <button
  *   data-controller="drawer-trigger"
  *   data-action="click->drawer-trigger#triggerClick"
- *   data-drawer-trigger-drawer-outlet="[data-outlet='drawer']"
+ *   data-drawer-trigger-drawer-outlet="#drawer-provider-filters"
  * >
  *   Toggle
  * </button>
@@ -31,9 +36,25 @@ export default class extends Controller {
   drawerOutletConnected(outlet) {
     this.element.setAttribute("aria-haspopup", "dialog")
     this.syncExpanded(outlet.openValue)
+    this.syncControls()
+  }
+
+  drawerOutletDisconnected() {
+    this.syncControls()
+  }
+
+  // aria-controls takes a space-separated id list, so a trigger wired to more
+  // than one drawer stays accurate instead of pointing at whichever outlet
+  // connected last.
+  syncControls() {
+    const ids = this.drawerOutlets
+      .filter(outlet => outlet.hasPanelTarget && outlet.panelTarget.id)
+      .map(outlet => outlet.panelTarget.id)
 
-    if (outlet.hasPanelTarget && outlet.panelTarget.id) {
-      this.element.setAttribute("aria-controls", outlet.panelTarget.id)
+    if (ids.length) {
+      this.element.setAttribute("aria-controls", ids.join(" "))
+    } else {
+      this.element.removeAttribute("aria-controls")
     }
   }
 

data/app/views/components/_label.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (text: nil, content: nil, for_id: nil, required: false, css_classes: "", **html_options) %>
+<%
+  # `for` is a Ruby keyword and cannot be a strict-local name, so the local is
+  # for_id: — a caller-supplied for: is honored as well.
+  label_for = for_id.presence || html_options.delete(:for).presence
+
+  merged_data = merge_component_data(html_options,
+    component: :label,
+    required: (required ? true : nil)
+  )
+%>
+<%= content_tag :label, for: label_for, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text.presence || content || yield %>
+<% end %>

data/app/views/components/_table.html.erb

@@ -9,11 +9,11 @@
   container_data[:variant] = variant if variant
 %>
 <% if container %>
-<div data-table-part="container"<%= " data-variant=\"#{variant}\"" if variant %>>
+<%= tag.div data: container_data do %>
   <%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
     <%= yield %>
   <% end %>
-</div>
+<% end %>
 <% else %>
 <%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
   <%= yield %>

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

@@ -37,17 +37,9 @@
         action: "click->calendar#selectDay keydown->calendar#handleKeydown"
       }.compact
     %>
-    <button type="button"
-            data-calendar-part="day"
-            data-calendar-target="day"
-            data-date="<%= day.iso8601 %>"
-            <%= "data-state=\"#{day_state}\"" if day_state %>
-            <%= "data-outside" if is_outside %>
-            <%= "data-today" if is_today %>
-            data-action="click->calendar#selectDay keydown->calendar#handleKeydown"
-            <%= "disabled" if is_disabled %>
-            tabindex="<%= is_today ? '0' : '-1' %>"
-            <%= "aria-selected=\"true\"" if day_state&.include?("selected") || day_state == "range-start" || day_state == "range-end" %>
-            <%= "aria-current=\"date\"" if is_today %>><%= day.day %></button>
+    <%= tag.button day.day, type: "button", disabled: is_disabled,
+          tabindex: (is_today ? 0 : -1),
+          aria: {selected: (day_state ? true : nil), current: (is_today ? "date" : nil)}.compact,
+          data: day_data %>
   <% end %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<%# locals: (show_icon: true, css_classes: "btn btn-ghost", **html_options) %>
+<%# locals: (show_icon: true, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     drawer_part: :close,
     action: "click->drawer#close"

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

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, content: nil, tag: :p, css_classes: "", **html_options) %>
+<% merged_data = merge_component_data(html_options, drawer_part: :description) %>
+
+<%= content_tag tag, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || content %>
+<% end %>

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

@@ -7,6 +7,6 @@
     <%= yield %>
   </div>
   <% if show_close %>
-    <%= render "components/drawer/close", css_classes: "btn btn-ghost btn-icon-sm" %>
+    <%= render "components/drawer/close" %>
   <% end %>
 <% end %>

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

@@ -1,14 +1,23 @@
-<%# locals: (id: nil, default_open: false, css_classes: "", cookie_name: "drawer_state", keyboard_shortcut: "d", **html_options) %>
-<% merged_data = merge_component_data(html_options,
+<%# locals: (id: nil, name: nil, default_open: false, css_classes: "", cookie_name: "drawer_state", keyboard_shortcut: "d", **html_options) %>
+<%
+  # Deterministic ids only — random ids break idiomorph matching across morphs.
+  # Pass name: (or id:) when a page has more than one drawer, and point each
+  # trigger at it with for_id:.
+  provider_id = id.presence ||
+    ["drawer-provider", name.presence && name.to_s.parameterize.presence].compact.join("-")
+
+  merged_data = merge_component_data(html_options,
     component: :drawer,
     controller: "drawer",
     outlet: "drawer",
+    drawer_name: name.presence,
     drawer_default_open_value: default_open,
     drawer_open_value: default_open,
     drawer_cookie_name_value: cookie_name,
     drawer_keyboard_shortcut_value: keyboard_shortcut,
     action: "keydown.meta+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.esc@window->drawer#closeOnEscape"
-  ) %>
-<%= content_tag :div, id: id || "drawer-provider", class: css_classes, data: merged_data, **html_options do %>
+  )
+%>
+<%= content_tag :div, id: provider_id, class: css_classes, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

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

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = merge_component_data(html_options,
+    drawer_part: :section
+  ) %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,11 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **html_options) %>
+<%# Renders the separator primitive so the divider keeps its 1px track, then
+    tags it with the drawer part that re-spaces it for the panel. %>
+<% merged_data = merge_component_data(html_options,
+    drawer_part: :separator
+  ) %>
+<%= render "components/separator",
+      orientation: orientation,
+      css_classes: css_classes,
+      data: merged_data,
+      **html_options %>

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

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, content: nil, tag: :h2, css_classes: "", **html_options) %>
+<% merged_data = merge_component_data(html_options, drawer_part: :title) %>
+
+<%= content_tag tag, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || content %>
+<% end %>

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

@@ -1,13 +1,30 @@
-<%# locals: (variant: :default, size: :default, icon_name: nil, css_classes: "", **html_options) %>
-<% merged_data = merge_component_data(html_options,
+<%# locals: (variant: :default, size: :default, icon_name: nil, for_id: nil, css_classes: "", **html_options) %>
+<%
+  # `for` is a Ruby keyword and cannot be a strict-local name, so the local is
+  # for_id: — but a caller-supplied for: is accepted too, popped out of
+  # html_options before it can leak onto the button as a stray attribute.
+  target = for_id.presence || html_options.delete(:for).presence
+
+  # Default keeps the document-wide selector, so single-drawer pages behave as
+  # before. A bare value is treated as an element id (the drawer provider's);
+  # anything starting with #, [ or . is used verbatim as a selector.
+  drawer_selector =
+    if target.blank?
+      "[data-outlet='drawer']"
+    elsif target.to_s.start_with?("#", "[", ".")
+      target.to_s
+    else
+      "##{target}"
+    end
+
+  merged_data = merge_component_data(html_options,
     drawer_part: :trigger,
     controller: "drawer-trigger",
     action: "click->drawer-trigger#triggerClick",
-    drawer_trigger_drawer_outlet: "[data-outlet='drawer']"
-  ) %>
-<% button_data = merged_data.merge(
-    component: "button"
-  ) %>
+    drawer_trigger_drawer_outlet: drawer_selector
+  )
+  button_data = merged_data.merge(component: "button")
+%>
 <%= content_tag :button, type: :button, class: css_classes, data: button_data, **html_options do %>
   <%= icon_for(icon_name) if icon_name %>
   <%= yield %>

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

@@ -0,0 +1,26 @@
+<%# locals: (label:, url: nil, icon_name: :ellipsis, css_classes: "", **html_options) %>
+<%#
+  Render this inside a sidebar/group, alongside the group label — `ml-auto`
+  pushes it to the right edge of the group and the group is the positioning
+  context its expanded touch target resolves against.
+
+  label: is required: the control is icon-only, so without it there is
+  nothing for a screen reader to announce.
+%>
+<% merged_data = merge_component_data(html_options,
+    sidebar_part: "group-action"
+  ) %>
+<% action_content = capture do %>
+  <%= icon_for(icon_name) if icon_name.present? %>
+  <span class="sr-only"><%= label %></span>
+<% end %>
+<% if url.present? %>
+  <%= link_to url, class: css_classes.presence, data: merged_data,
+        "aria-label": label, **html_options do %>
+    <%= action_content %>
+  <% end %>
+<% else %>
+  <%= content_tag :button, action_content, type: :button,
+        class: css_classes.presence, data: merged_data,
+        "aria-label": label, **html_options %>
+<% end %>

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

@@ -0,0 +1,28 @@
+<%# locals: (label:, url: nil, icon_name: :ellipsis, show_on_hover: false, css_classes: "", **html_options) %>
+<%#
+  Render this INSIDE a menu_item, as a sibling of the menu_button or
+  menu_link — the item is the positioning context this absolute action
+  resolves against, and `menu-item:has(menu-action)` is what reserves the
+  right-hand padding on the button so the two never overlap.
+
+  label: is required: the control is icon-only, so without it there is
+  nothing for a screen reader to announce.
+%>
+<% merged_data = merge_component_data(html_options,
+    sidebar_part: "menu-action",
+    show_on_hover: (show_on_hover ? true : nil)
+  ) %>
+<% action_content = capture do %>
+  <%= icon_for(icon_name) if icon_name.present? %>
+  <span class="sr-only"><%= label %></span>
+<% end %>
+<% if url.present? %>
+  <%= link_to url, class: css_classes.presence, data: merged_data,
+        "aria-label": label, **html_options do %>
+    <%= action_content %>
+  <% end %>
+<% else %>
+  <%= content_tag :button, action_content, type: :button,
+        class: css_classes.presence, data: merged_data,
+        "aria-label": label, **html_options %>
+<% end %>

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

@@ -0,0 +1,10 @@
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
+<%# Pinned inside a menu_item, next to the button or link. It is decorative
+    for pointer users — the CSS makes it pointer-events-none — so keep the
+    count meaningful in the button's own label when it matters. %>
+<% merged_data = merge_component_data(html_options,
+    sidebar_part: "menu-badge"
+  ) %>
+<%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || content || yield %>
+<% end %>

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

@@ -2,10 +2,11 @@
 <% merged_data = merge_component_data(html_options,
     sidebar_part: "menu-button",
     size: size,
-    active: active
+    active: (active ? true : nil)
   ) %>
 
-<%= link_to url, class: css_classes, data: merged_data, **html_options do %>
+<%= link_to url, class: css_classes, data: merged_data,
+      "aria-current": (active ? "page" : nil), **html_options do %>
   <% if icon_name.present? %>
     <%= icon_for(icon_name) %>
   <% end %>

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

@@ -1,10 +1,11 @@
 <%# locals: (url: "#", active: false, title: nil, subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     sidebar_part: "menu-link",
-    active: active
+    active: (active ? true : nil)
   ) %>
 
-<%= link_to url, class: css_classes, data: merged_data, **html_options do %>
+<%= link_to url, class: css_classes, 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? %>

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

@@ -0,0 +1,12 @@
+<%# locals: (orientation: :horizontal, css_classes: "", **html_options) %>
+<%# Renders the separator primitive so the divider keeps its 1px track, then
+    tags it with the sidebar part that re-spaces it and swaps in the sidebar's
+    own border token. %>
+<% merged_data = merge_component_data(html_options,
+    sidebar_part: :separator
+  ) %>
+<%= render "components/separator",
+      orientation: orientation,
+      css_classes: css_classes,
+      data: merged_data,
+      **html_options %>

data/lib/generators/maquina_components/install/install_generator.rb

@@ -9,6 +9,12 @@ module MaquinaComponents
 
       desc "Install maquina_components into your Rails application"
 
+      # Marker comment carried by the shape/state token block. Its presence is
+      # what makes a second `rails g maquina_components:install` a no-op for
+      # that block instead of a second copy.
+      TOKENS_MARKER = "maquina_components:shape-state-tokens"
+      APP_CSS_PATH = "app/assets/tailwind/application.css"
+
       class_option :skip_theme, type: :boolean, default: false,
         desc: "Skip adding theme variables to application.css"
       class_option :skip_helper, type: :boolean, default: false,
@@ -73,6 +79,30 @@ module MaquinaComponents
         say_status :append, "Added theme variables to application.css", :green
       end
 
+      # Safe to re-run against an app that installed an earlier version: the
+      # existing palette is left exactly as it is and only the new shape/state
+      # token block is appended, guarded by TOKENS_MARKER.
+      def add_shape_and_state_tokens
+        return if options[:skip_theme]
+
+        full_path = File.join(destination_root, APP_CSS_PATH)
+
+        unless File.exist?(full_path)
+          say_status :skip, "#{APP_CSS_PATH} not found", :yellow
+          return
+        end
+
+        if File.read(full_path).include?(TOKENS_MARKER)
+          say_status :skip, "Shape/state tokens already present", :blue
+          return
+        end
+
+        tokens = File.read(File.expand_path("templates/shape_state_tokens.css.tt", __dir__))
+        append_to_file APP_CSS_PATH, "\n#{tokens}"
+
+        say_status :append, "Added shape/state token block to #{APP_CSS_PATH}", :green
+      end
+
       def create_helper
         return if options[:skip_helper]
 
@@ -97,7 +127,12 @@ module MaquinaComponents
         say "Next steps:"
         say ""
         say "1. Customize theme variables in app/assets/tailwind/application.css"
-        say "   to match your design system."
+        say "   to match your design system. Shape, focus-ring, elevation and"
+        say "   control-mark tokens are listed there too, commented out at their"
+        say "   0.5.1 values - uncomment a line to pin the old look."
+        say ""
+        say "   Upgrading an existing app? Run `bin/rails maquina:doctor` for a"
+        say "   report of app CSS the 0.6 token layer makes redundant or breaks."
         say ""
         say "2. Override the icon helper in app/helpers/maquina_components_helper.rb"
         say "   to use your own icon system (Heroicons, Lucide, etc.)."

data/lib/generators/maquina_components/install/templates/maquina_components_helper.rb.tt

@@ -26,6 +26,11 @@ module MaquinaComponentsHelper
   # @param options [Hash] Options hash with :class, :stroke_width, etc.
   # @return [String, nil] SVG string or nil to fall back to engine's icons
   #
+  # A name neither this method nor the engine can resolve raises
+  # MaquinaComponents::UnknownIconError in development and test, and renders
+  # nothing in production. Set MaquinaComponents.strict_icons = false in an
+  # initializer to opt out of the raise.
+  #
   # @example Using Heroicons
   #   def main_icon_svg_for(name)
   #     heroicon_tag(name, variant: :outline)

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

@@ -0,0 +1,76 @@
+/* maquina_components:shape-state-tokens ===================================
+   Added by `rails generate maquina_components:install`. The marker comment on
+   the line above is how the generator knows not to add this block twice, and
+   re-running the generator never touches your palette above - keep the marker.
+
+   0.6.0 moves shape, elevation, focus rings, hover fills and control marks out
+   of per-component CSS and into tokens. Everything has a built-in default, so
+   you only declare what you want to change.
+   ========================================================================== */
+
+:root {
+  /* Hover fills - 0.5.1 hardcoded these color-mix() calls per button variant.
+     Same values, now in one place. */
+  --primary-hover: color-mix(in oklch, var(--primary) 90%, black);
+  --secondary-hover: color-mix(in oklch, var(--secondary) 80%, black);
+  --destructive-hover: color-mix(in oklch, var(--destructive) 90%, black);
+  --accent-hover: var(--accent);
+
+  /* Info - 0.5.1 had no --info at all, so info toasts fell back to the brand
+     accent. Set them to your own blue (or to var(--primary)) if you prefer. */
+  --info: oklch(0.93 0.04 240);
+  --info-foreground: oklch(0.4 0.12 250);
+
+  .dark {
+    --info: oklch(0.34 0.07 250);
+    --info-foreground: oklch(0.88 0.06 240);
+  }
+}
+
+/* -------------------------------------------------------------------------
+   The tokens below are listed at their 0.5.1 values. 0.6.0 ships its own
+   defaults for all of them; uncomment a line to pin the old look instead.
+   ------------------------------------------------------------------------- */
+
+:root {
+  /* --- Shape -------------------------------------------------------------
+     0.5.1 hardcoded: rounded-md on inputs/buttons/selects, rounded-xl on
+     cards, rounded-[4px] on checkbox marks, rounded-full on radios/switches. */
+  /* --control-radius: 0.375rem; */
+  /* --surface-radius: 0.75rem; */
+  /* --mark-radius: 4px; */
+  /* --pill-radius: 9999px; */
+
+  /* --- Focus ring -------------------------------------------------------
+     0.5.1 hardcoded: box-shadow 0 0 0 2px var(--background),
+                                 0 0 0 4px var(--ring). */
+  /* --focus-ring-width: 2px; */
+  /* --focus-ring-offset: 2px; */
+  /* --focus-ring-style: solid; */
+  /* --focus-ring-color: var(--ring); */
+
+  /* --- Elevation --------------------------------------------------------
+     0.5.1 hardcoded: shadow-xs/shadow-sm on controls, shadow on cards,
+     shadow-md on dropdowns, popovers and toasts. */
+  /* --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
+  /* --elevation-raised: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
+  /* --elevation-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
+
+  /* --- Typography weights ----------------------------------------------
+     0.5.1 hardcoded: font-medium on labels, font-bold on stat values. */
+  /* --label-weight: 500; */
+  /* --value-weight: 700; */
+
+  /* --- Control fill -----------------------------------------------------
+     0.5.1 hardcoded: background-color: transparent on inputs. */
+  /* --control-fill: transparent; */
+
+  /* --- Control marks ---------------------------------------------------
+     0.5.1 baked these SVGs into the engine's own rules. Uncomment to keep
+     the 0.5.1 artwork, or point them at your own. */
+  /* --checkbox-mark-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); */
+  /* --checkbox-indeterminate-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e"); */
+  /* --radio-mark-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); */
+  /* --switch-thumb-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='8' fill='white'/%3e%3c/svg%3e"); */
+  /* --select-chevron-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); */
+}

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

@@ -173,7 +173,14 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-/* Global border color */
-* {
-  border-color: var(--color-border);
+/* Global border color.
+ *
+ * This must stay inside @layer base. Unlayered CSS beats every layer at any
+ * specificity, so an unlayered `*` here would override the border-color of
+ * every component in @layer components — the tinted borders on the alert and
+ * toast variants would silently fall back to --border. */
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
 }

data/lib/maquina-components.rb

@@ -7,5 +7,33 @@ require "maquina_components/version"
 require "maquina_components/engine"
 
 module MaquinaComponents
-  # Your code goes here...
+  # Raised by icon_for when a name resolves to no SVG and strict_icons is on.
+  class UnknownIconError < ArgumentError; end
+
+  class << self
+    # When true, icon_for raises UnknownIconError for a name it can't resolve
+    # instead of silently rendering nothing. Defaults to Rails.env.local?
+    # (development and test), so typos surface while you work but never break
+    # a production page.
+    #
+    #   # config/initializers/maquina_components.rb
+    #   MaquinaComponents.strict_icons = false
+    attr_writer :strict_icons
+
+    def strict_icons
+      return @strict_icons if defined?(@strict_icons)
+
+      default_strict_icons
+    end
+
+    def strict_icons?
+      !!strict_icons
+    end
+
+    private
+
+    def default_strict_icons
+      defined?(Rails) && Rails.respond_to?(:env) && Rails.env.respond_to?(:local?) && Rails.env.local?
+    end
+  end
 end