silex_ui 0.2.0 → 0.8.0

data/app/components/silex_ui/field_component.rb

@@ -8,12 +8,13 @@ module SilexUi
   #   <%= render SilexUi::FieldComponent.new(form: f, attribute: :registrar, type: :select,
   #         collection: Website.registrars.keys, include_blank: "—") %>
   class FieldComponent < BaseComponent
-    INPUT_CLASS = "w-full rounded-sm border border-sand-300 bg-white text-sm font-light " \
-                  "text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none"
+    INPUT_CLASS = "w-full rounded-badge border border-surface-200 bg-surface-0 text-sm text-ink-900 " \
+                  "transition placeholder:text-ink-400 focus:border-brand-500 focus:ring-2 " \
+                  "focus:ring-brand-500/20 focus:outline-none"
 
     # Deux densités : serrée pour les barres de filtres, aérée pour les pages de
     # formulaire où le champ est le sujet.
-    SIZES = { md: "px-3 py-2", lg: "px-4 py-3" }.freeze
+    SIZES = { md: "px-3 py-2", lg: "px-4 py-2.5" }.freeze
 
     TEXT_TYPES = %i[text email password url tel number date datetime search].freeze
 
@@ -71,7 +72,7 @@ module SilexUi
     end
 
     def checkbox_class
-      "cursor-pointer rounded-sm border-sand-300 text-ink-900 focus:ring-0"
+      "size-4 cursor-pointer rounded border-surface-300 text-brand-500 focus:ring-brand-500/30"
     end
 
     def css_classes
@@ -81,7 +82,9 @@ module SilexUi
     private
 
     def field_html
-      classes = class_names(INPUT_CLASS, SIZES[@size], ("border-alert-700" if errors?), @input_html[:class])
+      classes = class_names(INPUT_CLASS, SIZES[@size],
+                            ("border-alert-500 focus:border-alert-500 focus:ring-alert-500/20" if errors?),
+                            @input_html[:class])
       @input_html.merge(class: classes)
     end
   end

data/app/components/silex_ui/filter_bar_component.html.erb

@@ -0,0 +1,22 @@
+<div class="<%= css_classes %>">
+  <%# Cinq par ligne comme au Silex, mais en grille : des colonnes égales se %>
+  <%# répartissent sans qu'un libellé long écrase son voisin. %>
+  <div class="grid flex-1 grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+    <%= safe_join(filters) %>
+  </div>
+
+  <div class="flex items-center gap-3">
+    <% if count? %>
+      <span class="text-[13px] font-semibold whitespace-nowrap text-ink-500"><%= count_label %></span>
+    <% end %>
+
+    <%= actions %>
+
+    <% if reset_href.present? %>
+      <%= link_to reset_href, class: reset_classes do %>
+        <%= render SilexUi::IconComponent.new(name: "refresh", size: :sm) %>
+        <span><%= reset_label %></span>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/silex_ui/filter_bar_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # La barre de filtres du Silex : les champs à gauche, le compte de résultats
+  # et la remise à zéro à droite.
+  #
+  #   <%= form_with url: websites_path, method: :get do |f| %>
+  #     <%= render SilexUi::FilterBarComponent.new(count: @pagination.count, reset_href: websites_path) do |bar| %>
+  #       <% bar.with_filter do %>
+  #         <%= render SilexUi::FilterFieldComponent.new(form: f, attribute: :tag, label: "Tous les tags") %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # Le formulaire reste à l'appelant : lui seul sait quels paramètres survivent
+  # à un changement de filtre.
+  class FilterBarComponent < BaseComponent
+    renders_many :filters
+    renders_one :actions
+
+    SIZES = { sm: "h-[42px]", md: "h-13" }.freeze
+
+    def initialize(count: nil, reset_href: nil, reset_label: "Réinitialiser", size: :md, **options)
+      @count = count
+      @reset_href = reset_href
+      @reset_label = reset_label
+      @size = SIZES.key?(size&.to_sym) ? size.to_sym : :md
+      super(**options)
+    end
+
+    # La remise à zéro s'aligne sur la hauteur des champs : un bouton plus haut
+    # qu'eux casse la ligne.
+    def reset_classes
+      class_names("inline-flex items-center gap-2 rounded-[10px] border-[1.5px] border-surface-200",
+                  "bg-surface-50 px-4 text-[13px] font-semibold text-ink-500 transition",
+                  "hover:border-alert-300 hover:bg-alert-50 hover:text-alert-500", SIZES[@size])
+    end
+
+    attr_reader :reset_href, :reset_label
+
+    def count?
+      !@count.nil?
+    end
+
+    # Un compte au singulier reste au singulier : « 1 résultats » se remarque.
+    def count_label
+      "#{helpers.number_with_delimiter(@count)} résultat#{'s' if @count.to_i > 1}"
+    end
+
+    def css_classes
+      merge_class("flex flex-wrap items-center gap-4")
+    end
+  end
+end

data/app/components/silex_ui/filter_field_component.html.erb

@@ -0,0 +1,10 @@
+<div class="<%= css_classes %>">
+  <span class="silex-ui-filter__icon">
+    <%= render SilexUi::IconComponent.new(name: icon_name, size: :sm) %>
+  </span>
+
+  <%= control %>
+
+  <%# Après le champ, jamais avant : le CSS le fait réagir par `~`. %>
+  <label class="silex-ui-filter__label"><%= label %></label>
+</div>

data/app/components/silex_ui/filter_field_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Un filtre flottant : le libellé vit dans le champ et remonte dès qu'une
+  # valeur est choisie, en violet. C'est le `floating-filter` du Silex.
+  #
+  #   <%= render SilexUi::FilterFieldComponent.new(form: f, attribute: :registrar,
+  #         label: "Tous les registrars", icon: "database", collection: registrars) %>
+  #
+  # Le libellé est écrit après le champ dans le balisage : c'est ce qui permet
+  # au CSS de le faire réagir à l'état du champ, sans contrôleur.
+  class FilterFieldComponent < BaseComponent
+    SIZES = { sm: "silex-ui-filter--sm", md: nil }.freeze
+
+    def initialize(form:, attribute:, label:, icon: "filter", type: :select, size: :md,
+                   collection: nil, value: nil, include_blank: nil, input_html: {}, **options)
+      @form = form
+      @attribute = attribute
+      @label = label
+      @icon = icon
+      @type = type.to_sym
+      @size = SIZES.key?(size&.to_sym) ? size.to_sym : :md
+      @collection = collection
+      @value = value
+      @include_blank = include_blank
+      @input_html = input_html
+      super(**options)
+    end
+
+    attr_reader :label, :icon_name
+
+    def icon_name = @icon
+
+    def control
+      case @type
+      when :search then search_control
+      else select_control
+      end
+    end
+
+    def css_classes
+      merge_class("silex-ui-filter", SIZES[@size])
+    end
+
+    private
+
+    def select_control
+      raise ArgumentError, "collection is required for a select filter" if @collection.nil?
+
+      # L'option vide reste vide : le libellé flottant tient déjà lieu de texte
+      # de substitution, et l'écrire deux fois donne deux libellés superposés.
+      @form.select(@attribute,
+                   helpers.options_for_select(@collection, @value),
+                   { include_blank: @include_blank.to_s },
+                   field_html)
+    end
+
+    # Le repli du libellé s'appuie sur `:placeholder-shown` : sans espace en
+    # guise de valeur, le navigateur ne considère jamais le champ comme vide.
+    def search_control
+      @form.search_field(@attribute, field_html.merge(value: @value, placeholder: " "))
+    end
+
+    def field_html
+      { class: class_names("silex-ui-filter__control", @input_html[:class]) }
+        .merge(@input_html.except(:class))
+    end
+  end
+end

data/app/components/silex_ui/flash_component.html.erb

@@ -1,6 +1,6 @@
 <div class="<%= css_classes %>">
   <% messages.each do |item| %>
     <%= render SilexUi::AlertComponent.new(text: item[:message], tone: item[:tone],
-          class: "w-full max-w-md shadow-sm") %>
+          class: "w-full max-w-md bg-surface-0 shadow-card-hover") %>
   <% end %>
 </div>

data/app/components/silex_ui/icon_component.rb

@@ -0,0 +1,211 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Une icône, dans le vocabulaire du Silex.
+  #
+  #   <%= render SilexUi::IconComponent.new(name: :globe) %>
+  #   <%= render SilexUi::IconComponent.new(name: "alert", class: "text-alert-500") %>
+  #
+  # Deux rendus possibles, selon ce dont dispose l'application :
+  #
+  # - `:svg` (défaut) — le tracé est embarqué dans le gem. Aucune requête, aucun
+  #   flash au chargement, et l'icône hérite de la couleur du texte. Les tracés
+  #   viennent de Font Awesome **Free** (CC BY 4.0), seule édition qu'un gem
+  #   public a le droit de redistribuer.
+  # - `:font` — le gem rend `<i class="fa-solid fa-globe">` et laisse
+  #   l'application fournir la police. C'est le mode à choisir quand elle charge
+  #   un kit Font Awesome **Pro** : les icônes Pro restent chez elle, sous sa
+  #   licence, et le design system n'en transporte aucune.
+  #
+  #   SilexUi.configure { |config| config.icon_renderer = :font }
+  class IconComponent < BaseComponent
+    ICONS = {
+      "address-book" => { fa: "fa-address-book", box: "0 0 512 512",
+                     path: %(<path d="M96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L96 0zM208 288l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64zM496 192c-8.8 0-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64z"/>) },
+      "alert" => { fa: "fa-triangle-exclamation", box: "0 0 512 512",
+                     path: %(<path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/>) },
+      "arrow-down" => { fa: "fa-arrow-down", box: "0 0 384 512",
+                     path: %(<path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>) },
+      "arrow-right" => { fa: "fa-arrow-right", box: "0 0 448 512",
+                     path: %(<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>) },
+      "arrow-up" => { fa: "fa-arrow-up", box: "0 0 384 512",
+                     path: %(<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>) },
+      "ban" => { fa: "fa-ban", box: "0 0 512 512",
+                     path: %(<path d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/>) },
+      "bell" => { fa: "fa-bell", box: "0 0 448 512",
+                     path: %(<path d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416l384 0c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8l0-18.8c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>) },
+      "bolt" => { fa: "fa-bolt", box: "0 0 448 512",
+                     path: %(<path d="M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6-22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z"/>) },
+      "bullhorn" => { fa: "fa-bullhorn", box: "0 0 512 512",
+                     path: %(<path d="M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75l-8.7 0-32 0-96 0c-35.3 0-64 28.7-64 64l0 96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32l0-128 8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-147.6c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4L480 32zm-64 76.7L416 240l0 131.3C357.2 317.8 280.5 288 200.7 288l-8.7 0 0-96 8.7 0c79.8 0 156.5-29.8 215.3-83.3z"/>) },
+      "calendar" => { fa: "fa-calendar-days", box: "0 0 448 512",
+                     path: %(<path d="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z"/>) },
+      "chart" => { fa: "fa-chart-line", box: "0 0 512 512",
+                     path: %(<path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 400c0 44.2 35.8 80 80 80l400 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 416c-8.8 0-16-7.2-16-16L64 64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/>) },
+      "check" => { fa: "fa-check", box: "0 0 448 512",
+                     path: %(<path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>) },
+      "contrast" => { fa: "fa-circle-half-stroke", box: "0 0 512 512",
+                     path: %(<path d="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/>) },
+      "chevron-down" => { fa: "fa-chevron-down", box: "0 0 512 512",
+                     path: %(<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>) },
+      "chevron-left" => { fa: "fa-chevron-left", box: "0 0 320 512",
+                     path: %(<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>) },
+      "chevron-right" => { fa: "fa-chevron-right", box: "0 0 320 512",
+                     path: %(<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>) },
+      "chevron-up" => { fa: "fa-chevron-up", box: "0 0 512 512",
+                     path: %(<path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/>) },
+      "clock" => { fa: "fa-clock", box: "0 0 512 512",
+                     path: %(<path d="M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/>) },
+      "close" => { fa: "fa-xmark", box: "0 0 384 512",
+                     path: %(<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>) },
+      "cloud" => { fa: "fa-cloud", box: "0 0 640 512",
+                     path: %(<path d="M0 336c0 79.5 64.5 144 144 144l368 0c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"/>) },
+      "code" => { fa: "fa-code", box: "0 0 640 512",
+                     path: %(<path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/>) },
+      "copy" => { fa: "fa-copy", box: "0 0 448 512",
+                     path: %(<path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/>) },
+      "database" => { fa: "fa-database", box: "0 0 448 512",
+                     path: %(<path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>) },
+      "document" => { fa: "fa-file-lines", box: "0 0 384 512",
+                     path: %(<path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM112 256l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>) },
+      "edit" => { fa: "fa-pen-to-square", box: "0 0 512 512",
+                     path: %(<path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"/>) },
+      "envelope" => { fa: "fa-envelope", box: "0 0 512 512",
+                     path: %(<path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/>) },
+      "error" => { fa: "fa-circle-xmark", box: "0 0 512 512",
+                     path: %(<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/>) },
+      "euro" => { fa: "fa-euro-sign", box: "0 0 320 512",
+                     path: %(<path d="M48.1 240c-.1 2.7-.1 5.3-.1 8l0 16c0 2.7 0 5.3 .1 8L32 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l28.3 0C89.9 419.9 170 480 264 480l24 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-24 0c-57.9 0-108.2-32.4-133.9-80L256 336c17.7 0 32-14.3 32-32s-14.3-32-32-32l-143.8 0c-.1-2.6-.2-5.3-.2-8l0-16c0-2.7 .1-5.4 .2-8L256 240c17.7 0 32-14.3 32-32s-14.3-32-32-32l-125.9 0c25.7-47.6 76-80 133.9-80l24 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-24 0C170 32 89.9 92.1 60.3 176L32 176c-17.7 0-32 14.3-32 32s14.3 32 32 32l16.1 0z"/>) },
+      "external" => { fa: "fa-arrow-up-right-from-square", box: "0 0 512 512",
+                     path: %(<path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/>) },
+      "eye" => { fa: "fa-eye", box: "0 0 576 512",
+                     path: %(<path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>) },
+      "filter" => { fa: "fa-filter", box: "0 0 512 512",
+                     path: %(<path d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/>) },
+      "folder" => { fa: "fa-folder", box: "0 0 512 512",
+                     path: %(<path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/>) },
+      "globe" => { fa: "fa-globe", box: "0 0 512 512",
+                     path: %(<path d="M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z"/>) },
+      "grid" => { fa: "fa-table-cells-large", box: "0 0 512 512",
+                     path: %(<path d="M448 96l0 128-160 0 0-128 160 0zm0 192l0 128-160 0 0-128 160 0zM224 224L64 224 64 96l160 0 0 128zM64 288l160 0 0 128L64 416l0-128zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"/>) },
+      "home" => { fa: "fa-house", box: "0 0 576 512",
+                     path: %(<path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>) },
+      "hourglass" => { fa: "fa-hourglass-half", box: "0 0 384 512",
+                     path: %(<path d="M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64l0 11c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437l0 11c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0 256 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-11c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1l0-11c17.7 0 32-14.3 32-32s-14.3-32-32-32L320 0 64 0 32 0zM96 75l0-11 192 0 0 11c0 19-5.6 37.4-16 53L112 128c-10.3-15.6-16-34-16-53zm16 309c3.5-5.3 7.6-10.3 12.1-14.9L192 301.3l67.9 67.9c4.6 4.6 8.6 9.6 12.1 14.9L112 384z"/>) },
+      "info" => { fa: "fa-circle-info", box: "0 0 512 512",
+                     path: %(<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>) },
+      "invoice" => { fa: "fa-file-invoice-dollar", box: "0 0 384 512",
+                     path: %(<path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM64 80c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L80 96c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16l0 17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1s0 0 0 0s0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1l0 17.1c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-17.8c-11.2-2.1-21.7-5.7-30.9-8.9c0 0 0 0 0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5s0 0 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7l0-17.3c0-8.8 7.2-16 16-16z"/>) },
+      "key" => { fa: "fa-key", box: "0 0 512 512",
+                     path: %(<path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/>) },
+      "lightbulb" => { fa: "fa-lightbulb", box: "0 0 384 512",
+                     path: %(<path d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z"/>) },
+      "link" => { fa: "fa-link", box: "0 0 640 512",
+                     path: %(<path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/>) },
+      "lock" => { fa: "fa-lock", box: "0 0 448 512",
+                     path: %(<path d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/>) },
+      "logout" => { fa: "fa-right-from-bracket", box: "0 0 512 512",
+                     path: %(<path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/>) },
+      "moon" => { fa: "fa-moon", box: "0 0 384 512",
+                     path: %(<path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/>) },
+      "more" => { fa: "fa-ellipsis", box: "0 0 448 512",
+                     path: %(<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>) },
+      "newspaper" => { fa: "fa-newspaper", box: "0 0 512 512",
+                     path: %(<path d="M96 96c0-35.3 28.7-64 64-64l288 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L80 480c-44.2 0-80-35.8-80-80L0 128c0-17.7 14.3-32 32-32s32 14.3 32 32l0 272c0 8.8 7.2 16 16 16s16-7.2 16-16L96 96zm64 24l0 80c0 13.3 10.7 24 24 24l112 0c13.3 0 24-10.7 24-24l0-80c0-13.3-10.7-24-24-24L184 96c-13.3 0-24 10.7-24 24zm208-8c0 8.8 7.2 16 16 16l48 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16l48 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16zM160 304c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-256 0c-8.8 0-16 7.2-16 16zm0 96c0 8.8 7.2 16 16 16l256 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-256 0c-8.8 0-16 7.2-16 16z"/>) },
+      "pen" => { fa: "fa-pen", box: "0 0 512 512",
+                     path: %(<path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/>) },
+      "plus" => { fa: "fa-plus", box: "0 0 448 512",
+                     path: %(<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/>) },
+      "refresh" => { fa: "fa-arrows-rotate", box: "0 0 512 512",
+                     path: %(<path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/>) },
+      "robot" => { fa: "fa-robot", box: "0 0 640 512",
+                     path: %(<path d="M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z"/>) },
+      "save" => { fa: "fa-floppy-disk", box: "0 0 448 512",
+                     path: %(<path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-242.7c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32L64 32zm0 96c0-17.7 14.3-32 32-32l192 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32L96 224c-17.7 0-32-14.3-32-32l0-64zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>) },
+      "search" => { fa: "fa-magnifying-glass", box: "0 0 512 512",
+                     path: %(<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>) },
+      "send" => { fa: "fa-paper-plane", box: "0 0 512 512",
+                     path: %(<path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/>) },
+      "server" => { fa: "fa-server", box: "0 0 512 512",
+                     path: %(<path d="M64 32C28.7 32 0 60.7 0 96l0 64c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64L64 32zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64l0 64c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64L64 288zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/>) },
+      "settings" => { fa: "fa-gear", box: "0 0 512 512",
+                     path: %(<path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/>) },
+      "shield" => { fa: "fa-shield-halved", box: "0 0 512 512",
+                     path: %(<path d="M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8l0 378.1C394 378 431.1 230.1 432 141.4L256 66.8s0 0 0 0z"/>) },
+      "sliders" => { fa: "fa-sliders", box: "0 0 512 512",
+                     path: %(<path d="M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z"/>) },
+      "sort" => { fa: "fa-sort", box: "0 0 320 512",
+                     path: %(<path d="M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8L32 224c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z"/>) },
+      "sparkles" => { fa: "fa-wand-magic-sparkles", box: "0 0 576 512",
+                     path: %(<path d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"/>) },
+      "spinner" => { fa: "fa-spinner", box: "0 0 512 512",
+                     path: %(<path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/>) },
+      "star" => { fa: "fa-star", box: "0 0 576 512",
+                     path: %(<path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>) },
+      "success" => { fa: "fa-circle-check", box: "0 0 512 512",
+                     path: %(<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>) },
+      "sun" => { fa: "fa-sun", box: "0 0 512 512",
+                     path: %(<path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/>) },
+      "tag" => { fa: "fa-tag", box: "0 0 448 512",
+                     path: %(<path d="M0 80L0 229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7L48 32C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>) },
+      "trash" => { fa: "fa-trash", box: "0 0 448 512",
+                     path: %(<path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/>) },
+      "user" => { fa: "fa-user", box: "0 0 448 512",
+                     path: %(<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/>) },
+      "user-plus" => { fa: "fa-user-plus", box: "0 0 640 512",
+                     path: %(<path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/>) },
+      "users" => { fa: "fa-users", box: "0 0 640 512",
+                     path: %(<path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z"/>) },
+      "wallet" => { fa: "fa-wallet", box: "0 0 512 512",
+                     path: %(<path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L80 128c-8.8 0-16-7.2-16-16s7.2-16 16-16l368 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L64 32zM416 272a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>) }
+    }.freeze
+
+    NAMES = ICONS.keys.freeze
+
+    SIZES = { xs: "size-3.5", sm: "size-4", md: "size-5", lg: "size-6", xl: "size-8" }.freeze
+
+    def initialize(name:, size: :md, **options)
+      @name = name.to_s
+      @size = size
+      super(**options)
+    end
+
+    def render?
+      ICONS.key?(@name)
+    end
+
+    def call
+      font? ? font_icon : svg_icon
+    end
+
+    private
+
+    def icon = ICONS.fetch(@name)
+
+    def font?
+      SilexUi.configuration.icon_renderer.to_sym == :font
+    end
+
+    def font_icon
+      tag.i(nil, class: merge_class(SilexUi.configuration.icon_font_style, icon[:fa],
+                                    "inline-flex items-center justify-center"),
+                 "aria-hidden": true, **html_attributes)
+    end
+
+    def svg_icon
+      tag.svg(icon[:path].html_safe, **svg_attributes)
+    end
+
+    def svg_attributes
+      {
+        viewBox: icon[:box],
+        fill: "currentColor",
+        "aria-hidden": true,
+        # Pas de classe d'affichage ici : `.inline-block` est écrit après
+        # `.hidden` dans la feuille Tailwind, et écraserait tout `hidden` que
+        # l'appelant passerait pour masquer une icône.
+        class: merge_class("shrink-0 align-middle", SIZES.fetch(@size.to_sym, SIZES[:md]))
+      }.merge(html_attributes)
+    end
+  end
+end

data/app/components/silex_ui/inline_edit_component.html.erb

@@ -0,0 +1,23 @@
+<div class="<%= css_classes %>" <%= tag.attributes(stimulus_attributes) %>>
+  <button type="button" data-silex-ui--inline-edit-target="display"
+          data-action="silex-ui--inline-edit#edit"
+          title="<%= label %>"
+          class="inline-flex cursor-text items-center gap-1.5 rounded-badge px-1.5 py-0.5 text-left transition hover:bg-surface-100">
+    <% if value %>
+      <span><%= value %></span>
+    <% else %>
+      <span class="text-ink-300"><%= placeholder %></span>
+    <% end %>
+
+    <%# Le crayon n'apparaît qu'au survol : une cellule constellée d'icônes ne %>
+    <%# se lit plus. %>
+    <span class="text-ink-300 opacity-0 transition group-hover/inline:opacity-100">
+      <%= render SilexUi::IconComponent.new(name: "pen", size: :xs) %>
+    </span>
+  </button>
+
+  <div hidden data-silex-ui--inline-edit-target="form"
+       data-action="keydown.esc->silex-ui--inline-edit#cancel focusout->silex-ui--inline-edit#submitOnBlur">
+    <%= content %>
+  </div>
+</div>

data/app/components/silex_ui/inline_edit_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Une valeur qu'on corrige sur place.
+  #
+  # Affiche le contenu ; au clic, il cède la place au formulaire donné en bloc.
+  # Échap annule, Entrée envoie, et quitter le champ envoie aussi — un champ
+  # ouvert qu'on abandonne est un champ qu'on croit avoir enregistré.
+  #
+  #   <%= render SilexUi::InlineEditComponent.new(value: site.moon, placeholder: "—") do %>
+  #     <%= form_with model: site do |f| %>
+  #       <%= f.text_field :moon, class: "…", data: { silex_ui__inline_edit_target: "field" } %>
+  #     <% end %>
+  #   <% end %>
+  class InlineEditComponent < BaseComponent
+    def initialize(value: nil, placeholder: "—", label: "Modifier", submit_on_blur: true, **options)
+      @value = value
+      @placeholder = placeholder
+      @label = label
+      @submit_on_blur = submit_on_blur
+      super(**options)
+    end
+
+    attr_reader :label
+
+    def value
+      @value.presence
+    end
+
+    def placeholder
+      @placeholder
+    end
+
+    def stimulus_attributes
+      html_attributes.deep_merge(
+        data: {
+          controller: "silex-ui--inline-edit",
+          silex_ui__inline_edit_submit_on_blur_value: @submit_on_blur.to_s
+        }
+      )
+    end
+
+    def css_classes
+      merge_class("group/inline relative")
+    end
+  end
+end

data/app/components/silex_ui/modal_component.html.erb

@@ -8,11 +8,13 @@
           data-action="click->silex-ui--modal#closeOnBackdrop">
     <div class="flex items-baseline justify-between gap-4">
       <% if title.present? %>
-        <h2 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h2>
+        <h2 class="text-base font-bold text-ink-900"><%= title %></h2>
       <% end %>
 
       <button type="button" aria-label="Fermer" data-action="silex-ui--modal#close"
-              class="cursor-pointer text-ink-400 transition hover:text-ink-900">&times;</button>
+              class="inline-flex size-8 cursor-pointer items-center justify-center rounded-badge text-ink-400 transition hover:bg-surface-100 hover:text-ink-900">
+        <%= render SilexUi::IconComponent.new(name: "close", size: :md) %>
+      </button>
     </div>
 
     <div class="mt-4"><%= content %></div>

data/app/components/silex_ui/modal_component.rb

@@ -25,8 +25,9 @@ module SilexUi
 
     def css_classes
       merge_class(
-        "m-auto w-full max-w-lg rounded-sm border border-sand-200 bg-white p-6",
-        "text-sm font-light text-ink-600 backdrop:bg-ink-900/30"
+        "m-auto max-h-[85vh] w-full max-w-lg overflow-y-auto rounded-2xl border border-surface-200",
+        "bg-surface-0 p-6",
+        "text-sm text-ink-700 shadow-card-hover backdrop:bg-slate-900/40 backdrop:backdrop-blur-sm"
       )
     end
   end

data/app/components/silex_ui/nav_component.html.erb

@@ -1,15 +1,16 @@
 <nav class="<%= css_classes %>">
-  <div class="flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4">
+  <div class="flex min-w-0 flex-wrap items-center gap-x-6 gap-y-3">
     <% if brand.present? %>
-      <%= link_to brand, brand_href || "/", class: "text-sm font-light tracking-[0.2em] text-ink-900 uppercase" %>
+      <%= link_to brand, brand_href || "/",
+            class: "bg-gradient-to-br from-brand-500 to-brand-700 bg-clip-text text-lg font-bold tracking-tight text-transparent" %>
     <% end %>
 
     <% if items.any? %>
-      <div class="flex flex-wrap gap-x-6 gap-y-3 text-sm font-light"><%= safe_join(items) %></div>
+      <div class="flex flex-wrap items-center gap-1"><%= safe_join(items) %></div>
     <% end %>
   </div>
 
   <% if aside? %>
-    <div class="flex items-center gap-5 text-sm font-light text-ink-600"><%= aside %></div>
+    <div class="flex items-center gap-3 text-sm text-ink-500"><%= aside %></div>
   <% end %>
 </nav>