kiso 0.6.5.pre → 0.7.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6945cef88ebb1ed0f85502844448e5014a0fbeea1a4f723032d6d17c9fb61083
-  data.tar.gz: a0b8bd38fdaed32409c35930930467af8658ebc05ff85e2375d21ac9f96d798d
+  metadata.gz: 53a2af001d842909751b3494e9fd0978a60c7cb62bf028a7a3461f195ebd6988
+  data.tar.gz: 5a6ce4a5958a2460be62ac17d2cc315b8e185f801c6d1801778f9b88e609cccc
 SHA512:
-  metadata.gz: c11fd1e71b2eb52fe9d0a71633c7890b2c0ea89ab29bcd2590299f736b38165f7568ec43ce33fe4b48ab4d2fb072130a043e8062b69642fd4b43d25726d818b9
-  data.tar.gz: 1674670d2765c08e3a11cc2b0bc7ba2c0138dd83abc82677bdefe9f7b52ac219942d60ffe34eb3a47841e58beac896e3d8ba5ec345440ed26feaa9ad9d882edb
+  metadata.gz: 85ff1d9bbc10faa32d096149260d86ccb3feafa9a91673e8e8a8f9e479196166b4b244faa4d6f64db194a801ed33e25760c06b3673407038e845807b2dca1565
+  data.tar.gz: 86192d62578427cdf67dfc1e21028f8bf1f4accc208fdc2f65b3eb3179a780a244b40e39673fa214b9bf54b562bf466cb614ae5ca00a7f0a18846e40e84e23d4

data/app/assets/tailwind/kiso/engine.css

@@ -28,6 +28,7 @@
 @import "./input-otp.css";
 @import "./slider.css";
 @import "./tooltip.css";
+@import "./progress.css";
 
 /* === Tailwind Source Scanning ===
    Tell Tailwind v4 to scan Kiso's own source files for class references.

data/app/assets/tailwind/kiso/progress.css

@@ -0,0 +1,67 @@
+/* ── Progress ─────────────────────────────────────────────────────────
+ * Indeterminate animation keyframes for the progress indicator.
+ * 8 keyframes: 4 animation styles × 2 orientations (horizontal/vertical).
+ *
+ * Why CSS: @keyframes definitions and prefers-reduced-motion media
+ * queries cannot be expressed in ERB/Tailwind utilities.
+ * ──────────────────────────────────────────────────────────────────── */
+
+/* === Carousel === */
+
+@keyframes carousel {
+  0%, 100% { width: 50%; }
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+
+@keyframes carousel-vertical {
+  0%, 100% { height: 50%; }
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(200%); }
+}
+
+/* === Carousel Inverse === */
+
+@keyframes carousel-inverse {
+  0%, 100% { width: 50%; }
+  0% { transform: translateX(200%); }
+  100% { transform: translateX(-100%); }
+}
+
+@keyframes carousel-inverse-vertical {
+  0%, 100% { height: 50%; }
+  0% { transform: translateY(200%); }
+  100% { transform: translateY(-100%); }
+}
+
+/* === Swing === */
+
+@keyframes swing {
+  0%, 100% { width: 50%; transform: translateX(-25%); }
+  50% { transform: translateX(125%); }
+}
+
+@keyframes swing-vertical {
+  0%, 100% { height: 50%; transform: translateY(-25%); }
+  50% { transform: translateY(125%); }
+}
+
+/* === Elastic === */
+
+@keyframes elastic {
+  0%, 100% { width: 50%; margin-left: 25%; }
+  50% { width: 90%; margin-left: 5%; }
+}
+
+@keyframes elastic-vertical {
+  0%, 100% { height: 50%; margin-top: 25%; }
+  50% { height: 90%; margin-top: 5%; }
+}
+
+/* === Reduced motion === */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="progress-indicator"][data-state="indeterminate"] {
+    animation-duration: 0s !important;
+  }
+}

data/app/javascript/controllers/kiso/dropdown_menu_controller.js

@@ -461,13 +461,16 @@ export default class extends Controller {
   }
 
   /**
-   * Positions the dropdown content relative to the trigger.
+   * Positions the dropdown content relative to the trigger using fixed
+   * positioning to escape ancestor overflow clipping (e.g., DashboardToolbar).
    * Starts auto-updating on scroll/resize.
    *
    * @private
    */
   _positionContent() {
-    this._cleanupPosition = startPositioning(this.triggerTarget, this.contentTarget)
+    this._cleanupPosition = startPositioning(this.triggerTarget, this.contentTarget, {
+      strategy: "fixed",
+    })
   }
 
   /**

data/app/javascript/controllers/kiso/tooltip_controller.js

@@ -54,11 +54,23 @@ export default class extends Controller {
     this._tooltipId = this.contentTarget.id || `tooltip-${crypto.randomUUID().slice(0, 8)}`
     this.contentTarget.id = this._tooltipId
     this._triggerEl.setAttribute("aria-describedby", this._tooltipId)
+
+    // Strip native title tooltip to prevent double tooltip
+    if (this._triggerEl.hasAttribute("title")) {
+      this._originalTitle = this._triggerEl.getAttribute("title")
+      this._triggerEl.removeAttribute("title")
+    }
   }
 
   disconnect() {
     this._cleanupPosition?.()
     this._clearTimers()
+
+    // Restore native title attribute
+    if (this._originalTitle != null) {
+      this._triggerEl.setAttribute("title", this._originalTitle)
+      this._originalTitle = null
+    }
   }
 
   /**

data/app/views/kiso/components/_action_icon.html.erb

@@ -0,0 +1,45 @@
+<%# locals: (icon:, size: :sm, title: nil, href: nil, method: nil, disabled: false, css_classes: "", **component_options) %>
+<%# Inline icon-only action trigger. Polymorphic tag: <button> by default,
+    <a> with href:, or button_to with href: + method: (non-GET).
+    No fixed height — flows inline with surrounding text. %>
+<%
+  css = Kiso::Themes::ActionIcon.render(size: size, class: css_classes)
+  label = title || t("kiso.action_icon.action")
+  data = kiso_prepare_options(component_options, slot: "action-icon")
+  use_button_to = href.present? && method.present? && method.to_s != "get"
+%>
+<% if use_button_to %>
+  <%= button_to href,
+      method: method,
+      class: css,
+      form_class: "contents",
+      data: data,
+      disabled: disabled || nil,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a,
+      class: css,
+      data: data,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% else %>
+  <%= content_tag :button,
+      class: css,
+      data: data,
+      type: "button",
+      disabled: disabled || nil,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_button.html.erb

@@ -37,7 +37,8 @@
   <% end %>
 <% else %>
   <% component_options[:type] = type
-     component_options[:disabled] = true if is_disabled %>
+     component_options[:disabled] = true if is_disabled
+     component_options[:form] = form if form.is_a?(String) %>
   <%= content_tag :button, class: css, data: data, **component_options do %>
     <%= kiso_component_icon(:spinner, class: "animate-spin") if loading %>
     <%= yield %>

data/app/views/kiso/components/_progress.html.erb

@@ -0,0 +1,74 @@
+<%# locals: (value: nil, max: 100, status: false, color: :primary, size: :md, animation: :carousel, orientation: :horizontal, inverted: false, ui: {}, css_classes: "", **component_options) %>
+<%# Div-based progress bar with optional status text and step labels.
+    Indeterminate state when value: is nil (animated indicator via CSS).
+    Steps mode when max: is an array of labels. %>
+<% is_indeterminate = value.nil? %>
+<% has_steps = max.is_a?(Array) %>
+<% real_max = has_steps ? [max.length - 1, 1].max : [max.to_i, 1].max %>
+<% percent = is_indeterminate ? 0 : ((value.to_f / real_max) * 100).clamp(0, 100) %>
+<%
+  vertical = orientation == :vertical
+
+  # Indicator transform
+  if is_indeterminate
+    indicator_style = nil
+  elsif vertical
+    indicator_style = inverted ? "transform: translateY(#{100 - percent}%)" : "transform: translateY(-#{100 - percent}%)"
+  else
+    indicator_style = inverted ? "transform: translateX(#{100 - percent}%)" : "transform: translateX(-#{100 - percent}%)"
+  end
+%>
+<%= content_tag :div,
+    class: Kiso::Themes::Progress.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "progress", orientation: orientation),
+    **component_options do %>
+  <% if !is_indeterminate && status %>
+    <%= tag.div(
+        class: Kiso::Themes::ProgressStatus.render(orientation: orientation, size: size, class: ui[:status]),
+        style: vertical ? "height: #{percent}%" : "width: #{percent}%",
+        data: {slot: "progress-status"}) do %>
+      <%= "#{percent.round}%" %>
+    <% end %>
+  <% end %>
+  <%= tag.div(
+      class: Kiso::Themes::ProgressTrack.render(orientation: orientation, size: size, class: ui[:track]),
+      role: "progressbar",
+      aria: {
+        valuenow: (is_indeterminate ? nil : value),
+        valuemin: 0,
+        valuemax: real_max,
+        label: component_options.dig(:aria, :label) || t("kiso.progress.label")
+      },
+      style: "transform: translateZ(0)",
+      data: {slot: "progress-track"}) do %>
+    <%= tag.div(
+        class: Kiso::Themes::ProgressIndicator.render(color: color, animation: animation, orientation: orientation, class: ui[:indicator]),
+        style: indicator_style,
+        data: {
+          slot: "progress-indicator",
+          state: is_indeterminate ? "indeterminate" : "loading"
+        }) %>
+  <% end %>
+  <% if has_steps %>
+    <%= tag.div(
+        class: Kiso::Themes::ProgressSteps.render(color: color, size: size, class: ui[:steps]),
+        data: {slot: "progress-steps"}) do %>
+      <% max.each_with_index do |step_label, index| %>
+        <%
+          step_variant = if index == value && index == 0
+            :first
+          elsif index == value && index == real_max
+            :last
+          elsif index == value
+            :active
+          else
+            :other
+          end
+        %>
+        <%= tag.div(step_label,
+            class: Kiso::Themes::ProgressStep.render(step: step_variant, class: ui[:step]),
+            data: {slot: "progress-step"}) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/dashboard_sidebar/_collapse.html.erb

@@ -1,6 +1,7 @@
-<%# locals: (css_classes: "", **component_options) %>
+<%# locals: (open_icon: nil, closed_icon: nil, css_classes: "", **component_options) %>
 <%# Sidebar collapse toggle for desktop. Shows open/closed panel icons that swap
-    visibility based on sidebar state via CSS. Placed inside the sidebar itself. %>
+    visibility based on sidebar state via CSS. Placed inside the sidebar itself.
+    Pass open_icon: / closed_icon: to override the default panel icons per-instance. %>
 <%= content_tag :button,
     class: Kiso::Themes::DashboardSidebarCollapse.render(class: css_classes),
     data: kiso_prepare_options(component_options, slot: "dashboard-sidebar-collapse",
@@ -9,6 +10,6 @@
     aria: { label: t("kiso.dashboard_sidebar.collapse"), expanded: "false", controls: "dashboard-sidebar" },
     type: "button",
     **component_options do %>
-  <span data-slot="collapse-icon-open"><%= kiso_component_icon(:panel_left_close) %></span>
-  <span data-slot="collapse-icon-closed"><%= kiso_component_icon(:panel_left_open) %></span>
+  <span data-slot="collapse-icon-open"><%= open_icon || kiso_component_icon(:panel_left_close) %></span>
+  <span data-slot="collapse-icon-closed"><%= closed_icon || kiso_component_icon(:panel_left_open) %></span>
 <% end %>

data/config/locales/en.yml

@@ -1,5 +1,7 @@
 en:
   kiso:
+    action_icon:
+      action: "Action"
     alert:
       dismiss: "Dismiss"
     breadcrumb:
@@ -28,6 +30,8 @@ en:
       loading: "Loading"
     tooltip:
       label: "Tooltip"
+    progress:
+      label: "Progress"
     pagination:
       label: "pagination"
       more_pages: "More pages"

data/lib/kiso/presets/rounded.rb

@@ -10,6 +10,9 @@ module Kiso
     # - Checkbox — uses rounded-[4px] for checkmark alignment
     # - Shared::CHECKABLE_ITEM — uses rounded-sm for menu items (structural)
     ROUNDED = {
+      # ActionIcon: rounded-md → rounded-full
+      action_icon: {base: "rounded-full"},
+
       # Buttons: rounded-md → rounded-full (pill shape)
       button: {
         variants: {

data/lib/kiso/presets/sharp.rb

@@ -5,6 +5,9 @@ module Kiso
     # No border-radius anywhere — geometric, brutalist aesthetic.
     # Applies rounded-none to every component that has border-radius.
     SHARP = {
+      # ActionIcon: rounded-md → rounded-none
+      action_icon: {base: "rounded-none"},
+
       # Buttons: rounded-md → rounded-none
       button: {
         variants: {
@@ -136,6 +139,10 @@ module Kiso
       slider_track: {base: "rounded-none"},
       slider_thumb: {base: "rounded-none"},
 
+      # Progress: rounded-full → rounded-none
+      progress_track: {base: "rounded-none"},
+      progress_indicator: {base: "rounded-none"},
+
       # RadioGroup indicator: rounded-full → rounded-none
       radio_group_item: {base: "rounded-none"},
 

data/lib/kiso/themes/action_icon.rb

@@ -0,0 +1,38 @@
+module Kiso
+  module Themes
+    # Inline icon-only action trigger for table cells, card headers,
+    # and text rows.
+    #
+    # Quiet by default — muted foreground that brightens on hover with
+    # a subtle background. No fixed height; flows inline with
+    # surrounding text.
+    #
+    # @example
+    #   ActionIcon.render(size: :sm)
+    #
+    # Variants:
+    # - +size+ — :xs, :sm (default), :md
+    #
+    # shadcn base: n/a (no shadcn equivalent — inspired by Mantine ActionIcon
+    # and Outport's appui(:icon_action))
+    ActionIcon = ClassVariants.build(
+      base: "inline-flex items-center justify-center " \
+            "text-muted-foreground hover:text-foreground " \
+            "hover:bg-accent rounded-md " \
+            "cursor-pointer transition-colors duration-150 " \
+            "disabled:pointer-events-none disabled:opacity-50 " \
+            "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 " \
+            "focus-visible:outline-2 focus-visible:outline-offset-2 " \
+            "focus-visible:outline-inverted " \
+            "#{Shared::SVG_BASE}",
+      variants: {
+        size: {
+          xs: "p-0.5 [&_svg:not([class*='size-'])]:size-3",
+          sm: "p-1 [&_svg:not([class*='size-'])]:size-3.5",
+          md: "p-1.5 [&_svg:not([class*='size-'])]:size-4"
+        }
+      },
+      defaults: {size: :sm}
+    )
+  end
+end

data/lib/kiso/themes/dashboard.rb

@@ -75,7 +75,7 @@ module Kiso
 
     # Right-aligned content area within {DashboardToolbar}.
     DashboardToolbarRight = ClassVariants.build(
-      base: "flex items-center gap-1.5"
+      base: "ml-auto flex items-center gap-1.5"
     )
   end
 end

data/lib/kiso/themes/pagination.rb

@@ -37,7 +37,7 @@ module Kiso
 
     # Flex row container for pagination items.
     PaginationContent = ClassVariants.build(
-      base: "flex flex-row items-center gap-1"
+      base: "flex flex-row flex-wrap items-center justify-center gap-1"
     )
 
     # Wrapper for a single pagination element (link, ellipsis, etc.).

data/lib/kiso/themes/progress.rb

@@ -0,0 +1,161 @@
+module Kiso
+  module Themes
+    # Visual progress bar with color, size, and orientation axes.
+    #
+    # Div-based structure (not native <progress>) for full Tailwind control.
+    # Optional status percentage text and step labels (when +max:+ is an array).
+    # Indeterminate animation when +value:+ is nil.
+    #
+    # @example
+    #   Progress.render(orientation: :horizontal)
+    #
+    # Variants:
+    # - +orientation+ — :horizontal (default), :vertical
+    #
+    # Sub-parts: {ProgressTrack}, {ProgressIndicator}, {ProgressStatus},
+    #            {ProgressSteps}, {ProgressStep}
+    #
+    # shadcn base: (no direct equivalent — shadcn wraps in Radix ProgressRoot)
+    Progress = ClassVariants.build(
+      base: "text-foreground gap-2",
+      variants: {
+        orientation: {
+          horizontal: "w-full flex flex-col",
+          vertical: "h-full flex flex-row-reverse"
+        }
+      },
+      defaults: {orientation: :horizontal}
+    )
+
+    # Track (bar background) with orientation × size compound variants.
+    #
+    # shadcn base: bg-primary/20 relative h-2 w-full overflow-hidden rounded-full
+    ProgressTrack = ClassVariants.build(
+      base: "relative overflow-hidden rounded-full bg-accented",
+      variants: {
+        orientation: {
+          horizontal: "w-full",
+          vertical: "h-full"
+        },
+        size: {
+          xs: "", sm: "", md: "", lg: "", xl: ""
+        }
+      },
+      compound_variants: [
+        # == horizontal sizes (height) ==
+        {orientation: :horizontal, size: :xs, class: "h-0.5"},
+        {orientation: :horizontal, size: :sm, class: "h-1"},
+        {orientation: :horizontal, size: :md, class: "h-2"},
+        {orientation: :horizontal, size: :lg, class: "h-3"},
+        {orientation: :horizontal, size: :xl, class: "h-4"},
+        # == vertical sizes (width) ==
+        {orientation: :vertical, size: :xs, class: "w-0.5"},
+        {orientation: :vertical, size: :sm, class: "w-1"},
+        {orientation: :vertical, size: :md, class: "w-2"},
+        {orientation: :vertical, size: :lg, class: "w-3"},
+        {orientation: :vertical, size: :xl, class: "w-4"}
+      ],
+      defaults: {orientation: :horizontal, size: :md}
+    )
+
+    # Indicator (fill bar) — color axis maps directly to bg-{color}.
+    # No variant axis (solid/outline/soft/subtle) — just direct color.
+    # Indeterminate animations gated by data-[state=indeterminate]: selector
+    # so the class is always present but only activates when indeterminate.
+    #
+    # shadcn base: bg-primary h-full w-full flex-1 transition-all
+    ProgressIndicator = ClassVariants.build(
+      base: "rounded-full size-full transition-transform duration-200 ease-out",
+      variants: {
+        color: {
+          primary: "bg-primary",
+          secondary: "bg-secondary",
+          success: "bg-success",
+          info: "bg-info",
+          warning: "bg-warning",
+          error: "bg-error",
+          neutral: "bg-inverted"
+        },
+        animation: {
+          carousel: "", carousel_inverse: "", swing: "", elastic: ""
+        },
+        orientation: {
+          horizontal: "", vertical: ""
+        }
+      },
+      compound_variants: [
+        # == indeterminate animation: horizontal ==
+        {animation: :carousel, orientation: :horizontal,
+         class: "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"},
+        {animation: :carousel_inverse, orientation: :horizontal,
+         class: "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"},
+        {animation: :swing, orientation: :horizontal,
+         class: "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"},
+        {animation: :elastic, orientation: :horizontal,
+         class: "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"},
+        # == indeterminate animation: vertical ==
+        {animation: :carousel, orientation: :vertical,
+         class: "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"},
+        {animation: :carousel_inverse, orientation: :vertical,
+         class: "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"},
+        {animation: :swing, orientation: :vertical,
+         class: "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"},
+        {animation: :elastic, orientation: :vertical,
+         class: "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"}
+      ],
+      defaults: {color: :primary, animation: :carousel, orientation: :horizontal}
+    )
+
+    # Status text showing percentage above/beside the bar.
+    ProgressStatus = ClassVariants.build(
+      base: "flex text-muted-foreground transition-[width] duration-200",
+      variants: {
+        orientation: {
+          horizontal: "flex-row items-center justify-end min-w-fit",
+          vertical: "flex-col justify-end min-h-fit"
+        },
+        size: {
+          xs: "text-xs", sm: "text-xs", md: "text-sm", lg: "text-sm", xl: "text-base"
+        }
+      },
+      defaults: {orientation: :horizontal, size: :md}
+    )
+
+    # Container for step labels — grid overlay technique.
+    ProgressSteps = ClassVariants.build(
+      base: "grid items-end",
+      variants: {
+        color: {
+          primary: "text-primary",
+          secondary: "text-secondary",
+          success: "text-success",
+          info: "text-info",
+          warning: "text-warning",
+          error: "text-error",
+          # text-inverted (not text-inverted-foreground) — step labels sit on
+          # the page background, so we want dark-on-light / light-on-dark text.
+          neutral: "text-inverted"
+        },
+        size: {
+          xs: "text-xs", sm: "text-xs", md: "text-sm", lg: "text-sm", xl: "text-base"
+        }
+      },
+      defaults: {color: :primary, size: :md}
+    )
+
+    # Individual step label — stacked in same grid cell via row/col-start-1.
+    # Only the active step is visible (opacity-100), others hidden (opacity-0).
+    ProgressStep = ClassVariants.build(
+      base: "truncate text-end row-start-1 col-start-1 transition-opacity",
+      variants: {
+        step: {
+          active: "opacity-100",
+          first: "opacity-50",
+          other: "opacity-0",
+          last: ""
+        }
+      },
+      defaults: {step: :other}
+    )
+  end
+end

data/lib/kiso/themes/tooltip.rb

@@ -12,7 +12,7 @@ module Kiso
     # Kiso: bg-inverted text-inverted-foreground (semantic equivalents)
     TooltipContent = ClassVariants.build(
       base: "bg-inverted text-inverted-foreground px-3 py-1.5 text-xs rounded-md " \
-            "flex items-center gap-1.5 select-none w-max max-w-xs"
+            "flex items-center gap-1.5 select-none w-max max-w-xs overflow-hidden"
     )
 
     # Arrow element pointing from tooltip content to the trigger.

data/lib/kiso/version.rb

@@ -5,5 +5,5 @@ module Kiso
   # Updated by +bin/release+.
   #
   # @return [String]
-  VERSION = "0.6.5.pre"
+  VERSION = "0.7.0.pre"
 end

data/lib/kiso.rb

@@ -11,6 +11,7 @@ require "kiso/propshaft_tailwind_stub_filter"
 require "kiso/engine"
 require "kiso/themes/shared"
 require "kiso/themes/badge"
+require "kiso/themes/action_icon"
 require "kiso/themes/alert"
 require "kiso/themes/aspect_ratio"
 require "kiso/themes/button"
@@ -53,6 +54,7 @@ require "kiso/themes/skeleton"
 require "kiso/themes/spinner"
 require "kiso/themes/tooltip"
 require "kiso/themes/slider"
+require "kiso/themes/progress"
 require "kiso/themes/layout"
 require "kiso/icons"
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.6.5.pre
+  version: 0.7.0.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -91,6 +91,7 @@ files:
 - app/assets/tailwind/kiso/palettes/orange.css
 - app/assets/tailwind/kiso/palettes/violet.css
 - app/assets/tailwind/kiso/palettes/zinc.css
+- app/assets/tailwind/kiso/progress.css
 - app/assets/tailwind/kiso/radio-group.css
 - app/assets/tailwind/kiso/slider.css
 - app/assets/tailwind/kiso/tooltip.css
@@ -123,6 +124,7 @@ files:
 - app/javascript/kiso/utils/positioning.js
 - app/javascript/kiso/vendor/floating-ui-core.js
 - app/javascript/kiso/vendor/floating-ui-dom.js
+- app/views/kiso/components/_action_icon.html.erb
 - app/views/kiso/components/_alert.html.erb
 - app/views/kiso/components/_alert_dialog.html.erb
 - app/views/kiso/components/_app.html.erb
@@ -166,6 +168,7 @@ files:
 - app/views/kiso/components/_page_section.html.erb
 - app/views/kiso/components/_pagination.html.erb
 - app/views/kiso/components/_popover.html.erb
+- app/views/kiso/components/_progress.html.erb
 - app/views/kiso/components/_radio_group.html.erb
 - app/views/kiso/components/_select.html.erb
 - app/views/kiso/components/_select_native.html.erb
@@ -356,6 +359,7 @@ files:
 - lib/kiso/presets/sharp.rb
 - lib/kiso/propshaft_tailwind_stub_filter.rb
 - lib/kiso/theme_overrides.rb
+- lib/kiso/themes/action_icon.rb
 - lib/kiso/themes/alert.rb
 - lib/kiso/themes/alert_dialog.rb
 - lib/kiso/themes/aspect_ratio.rb
@@ -386,6 +390,7 @@ files:
 - lib/kiso/themes/page.rb
 - lib/kiso/themes/pagination.rb
 - lib/kiso/themes/popover.rb
+- lib/kiso/themes/progress.rb
 - lib/kiso/themes/radio_group.rb
 - lib/kiso/themes/select.rb
 - lib/kiso/themes/select_native.rb