satis 2.3.2 → 2.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19da9e46f948a004f97fccfcd36011958214e1ac1e201bb2d5e9e321d10b00c4
-  data.tar.gz: 06642dbfe953bca966068d4c069dac4ed9192493c0cc5b720eaec151d397a4b9
+  metadata.gz: 829a8e971d57827a6d11f1a55e78d446f2b6bdddfa537c430033ce25001852d6
+  data.tar.gz: 1c2a317f42bc74014a128f077a6f4bd5a73590df7b05b8b35b8c374fda90c7ac
 SHA512:
-  metadata.gz: 76587fce50793eae7a826212ee649f1ba08f000534e596aad4ca81462c0e2f5b091cb18c66b202e686e6d4a00bf471e9eae7ca270e9d2167f4deed3b0dea2480
-  data.tar.gz: '09748b7347ff26f83307e18cf2c317303357325e2aa73c8c3b3874236e8755fb8ab0e7c736b607104fe21430580407f9914a1168a1b63235114f0789cd793d1d'
+  metadata.gz: fdd9653e86ca7d0fd87f4c66a14214e492d56a051cedbd8bb14b4004498bbd959ec0971fa53ae5f7f52049e7e4c340cb1935c3ce9b443d7d1731f40be2fe0d11
+  data.tar.gz: d56452d59a97b58647d6c1ae29bdcd7dd25e96d3fd312867cf93f064c6de3b2cffe7341de031c4c737172d340b9109eb9ac02ef208593b3843d70d08ba7d4b71

data/app/components/satis/card/component.css

@@ -5,6 +5,14 @@
     @apply px-4 py-5 sm:px-6 dark:bg-gray-900 bg-white dark:border-gray-700 dark:text-gray-300;
   }
 
+  &__header--compact {
+    @apply px-3 py-3 sm:px-4;
+  }
+
+  &[data-satis-card-collapsible-value="true"] .sts-card__header {
+    @apply cursor-pointer select-none;
+  }
+
   &__tabs {
     @apply bg-white px-4 border-b border-gray-200 sm:px-5 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;
 

data/app/components/satis/card/component.html.slim

@@ -1,38 +1,45 @@
-.sts-card data-controller="satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key id=identifier
+.sts-card data-controller="satis-card satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key data-satis-card-collapsible-value=collapsible data-satis-card-collapsed-value=collapsed data-satis-card-identifier-value=identifier id=identifier
   - if header?
-    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'}"
+    .sts-card__header class=header_classes data-action="#{collapsible ? 'click->satis-card#toggle' : ''}"
       .-ml-4.-mt-4.flex.justify-between.items-center.flex-wrap.sm:flex-nowrap
         - if icon
           .ml-4.mt-4.flex-shrink-0.text-primary-600.dark:text-gray-300
             i class=icon
         .ml-4.mt-4.flex-1
-          h3.text-lg.leading-6.font-medium.text-gray-900.dark:text-white
+          h3 class=title_classes
             = title
           - if description.present?
             p.mt-1.text-sm.text-gray-500.dark:text-gray-500
               = description
 
         - if actions.present? || initial_actions.present?
-          .ml-4.mt-4.flex-shrink-0
+          .ml-4.mt-4.flex-shrink-0 data-satis-card-target="actions"
             .grid.grid-flow-row.gap-1.sm:grid-flow-col
               - initial_actions.each do |action|
                 = action
               - actions.each do |action|
                 = action
 
+        - if collapsible
+          .ml-4.mt-4.flex-shrink-0
+            button.text-gray-400.hover:text-gray-600.dark:hover:text-gray-200.transition-transform.duration-200 type="button" data-satis-card-target="collapseIcon"
+              i.fas.fa-chevron-down
+
         - if menu
           .ml-4.mt-2.flex-shrink-0
             = render(Satis::Menu::Component.new(menu))
 
-  - if tabs?
-    = render Satis::Tabs::Component.new(custom_link: custom_tabs_link).tap {|c| c.original_view_context = view_context } do |t|
-      - tabs.each_with_index do |ta, i|
-        - t.with_tab ta.name, id: ta.id, icon: ta.icon, padding: ta.padding, badge: ta.badge, menu: ta.menu, dirty: ta.dirty, title: ta.title, responsive: ta.responsive, selected_tab_index: ta.selected_tab_index do
-          = ta
+  div data-satis-card-target="body"
+    - if tabs?
+      = render Satis::Tabs::Component.new(custom_link: custom_tabs_link).tap {|c| c.original_view_context = view_context } do |t|
+        - tabs.each_with_index do |ta, i|
+          - t.with_tab ta.name, id: ta.id, icon: ta.icon, padding: ta.padding, badge: ta.badge, menu: ta.menu, dirty: ta.dirty, title: ta.title, responsive: ta.responsive, selected_tab_index: ta.selected_tab_index do
+            = ta
 
-  - else
-    div class="#{content_padding ? 'px-6 py-6' : ''}"
-      = content
+    - else
+      div class=content_classes style=content_style
+        = content
 
   - if footer
-    = footer
+    div data-satis-card-target="footer"
+      = footer

data/app/components/satis/card/component.rb

@@ -7,7 +7,8 @@ module Satis
       renders_many :tabs, Tab::Component
       renders_one :footer
 
-      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key
+      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key,
+                  :collapsible, :collapsed, :height, :min_height, :max_height, :padding, :compact
       attr_writer :scope
 
       def initialize(identifier = nil,
@@ -23,7 +24,14 @@ module Satis
                      scope: [],
                      actions: [],
                      key: nil,
-                     persist: true)
+                     persist: true,
+                     collapsible: false,
+                     collapsed: false,
+                     height: nil,
+                     min_height: nil,
+                     max_height: nil,
+                     padding: nil,
+                     compact: false)
         super
 
         if identifier.blank?
@@ -43,6 +51,13 @@ module Satis
         @key = key
         @custom_tabs_link = custom_tabs_link
         @scope = scope.present? ? scope : identifier
+        @collapsible = collapsible
+        @collapsed = collapsed
+        @height = height
+        @min_height = min_height
+        @max_height = max_height
+        @padding = padding
+        @compact = compact
       end
 
       # def key
@@ -70,6 +85,38 @@ module Satis
       def header?
         icon.present? || title.present? || description.present? || menu
       end
+
+      def content_style
+        styles = []
+        styles << "height: #{height}" if height
+        styles << "min-height: #{min_height}" if min_height
+        styles << "max-height: #{max_height}; overflow-y: auto" if max_height
+        styles.join('; ')
+      end
+
+      def content_classes
+        classes = []
+        if padding
+          classes << padding
+        elsif content_padding
+          classes << (compact ? 'px-4 py-3' : 'px-6 py-6')
+        end
+        classes.join(' ')
+      end
+
+      def header_classes
+        base = tabs? ? '' : 'border-b border-gray-200'
+        base += ' sts-card__header--compact' if compact
+        base
+      end
+
+      def title_classes
+        if compact
+          'text-sm leading-5 font-medium text-gray-900 dark:text-white'
+        else
+          'text-lg leading-6 font-medium text-gray-900 dark:text-white'
+        end
+      end
     end
   end
 end

data/app/components/satis/card/component_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["body", "collapseIcon", "actions", "footer"]
+  static values = {
+    collapsible: { type: Boolean, default: false },
+    collapsed: { type: Boolean, default: false },
+    identifier: String
+  }
+
+  connect() {
+    if (this.collapsibleValue) {
+      this._restoreState()
+      this._applyState(false)
+    }
+  }
+
+  toggle(event) {
+    if (!this.collapsibleValue) return
+
+    // Don't toggle when clicking on actions, buttons, links, or menus inside the header
+    if (event.target.closest('a, button:not([data-satis-card-target="collapseIcon"]), .sts-menu, [data-action]')) {
+      if (!event.target.closest('[data-satis-card-target="collapseIcon"]')) return
+    }
+
+    this.collapsedValue = !this.collapsedValue
+    this._applyState(true)
+    this._saveState()
+  }
+
+  _applyState(animate) {
+    const collapsed = this.collapsedValue
+
+    if (this.hasBodyTarget) {
+      if (animate) {
+        this.bodyTarget.style.transition = "max-height 0.2s ease-in-out, opacity 0.2s ease-in-out"
+      }
+
+      if (collapsed) {
+        this.bodyTarget.style.maxHeight = "0px"
+        this.bodyTarget.style.opacity = "0"
+        this.bodyTarget.style.overflow = "hidden"
+      } else {
+        this.bodyTarget.style.maxHeight = ""
+        this.bodyTarget.style.opacity = ""
+        this.bodyTarget.style.overflow = ""
+      }
+    }
+
+    if (this.hasFooterTarget) {
+      this.footerTarget.style.display = collapsed ? "none" : ""
+    }
+
+    // Actions stay visible when collapsed — they're in the header
+    if (this.hasCollapseIconTarget) {
+      this.collapseIconTarget.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)"
+    }
+  }
+
+  _storageKey() {
+    return `satis-card-${this.identifierValue}-collapsed`
+  }
+
+  _saveState() {
+    if (this.identifierValue) {
+      sessionStorage.setItem(this._storageKey(), this.collapsedValue)
+    }
+  }
+
+  _restoreState() {
+    if (this.identifierValue) {
+      const stored = sessionStorage.getItem(this._storageKey())
+      if (stored !== null) {
+        this.collapsedValue = stored === "true"
+      }
+    }
+  }
+}

data/app/components/satis/dropdown/component.html.slim

@@ -9,10 +9,10 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
     div.hidden.py-1 data-satis-dropdown-target="pills"
     .flex.flex-col.items-center
       .w-full.sts-dropdown class=input_class
-        .h-12.p-1.flex.rounded
+        div class=input_wrapper_classes
           .flex.flex-auto.flex-wrap.sts-dropdown-input
             / Input where you can search
-            input.focus:ring-0.border-none.p-1.px-2.appearance-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
+            input class=search_input_classes data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
           div
             / Reset button
             - unless @reset_button == false
@@ -28,7 +28,7 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
     template data-satis-dropdown-target="selectedItemsTemplate"
 
     / Container for results
-    .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
+    div class=results_classes style=results_style data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
       .flex.flex-col.w-full data-satis-dropdown-target="items"
         - options[:collection]&.each do |item|
           - data_attrs = item.try(:third) ? item.third : {}

data/app/components/satis/dropdown/component.rb

@@ -3,7 +3,7 @@
 module Satis
   module Dropdown
     class Component < ViewComponent::Base
-      attr_reader :url, :form, :attribute, :title, :options
+      attr_reader :url, :form, :attribute, :title, :options, :dropdown_max_height, :dropdown_min_height, :dropdown_width, :dropdown_height, :compact
 
       def initialize(form:, attribute:, **options, &block)
         super
@@ -18,6 +18,11 @@ module Satis
         @needs_exact_match = options[:needs_exact_match]
         @reset_button = options[:reset_button] || options[:include_blank]
         @toggle_button = options[:toggle_button] != false
+        @dropdown_max_height = options[:max_height]
+        @dropdown_min_height = options[:min_height]
+        @dropdown_width = options[:width]
+        @dropdown_height = options[:height]
+        @compact = options[:compact] || false
 
         options[:input_html] ||= {}
 
@@ -113,6 +118,31 @@ module Satis
       def input_class
         [@options.fetch(:input_html, {}).fetch(:class, ""), form.has_error?(attribute) ? "is-invalid" : ""].join(" ")
       end
+
+      def results_style
+        styles = []
+        styles << "max-height: #{dropdown_max_height}" if dropdown_max_height
+        styles << "min-height: #{dropdown_min_height}" if dropdown_min_height
+        styles << "width: #{dropdown_width}" if dropdown_width
+        styles << "height: #{dropdown_height}" if dropdown_height
+        styles.join('; ')
+      end
+
+      def results_classes
+        classes = "hidden container sts-dropdown-results shadow dark:text-gray-300 z-10 rounded overflow-y-auto w-full"
+        classes += " max-h-select" unless dropdown_max_height
+        classes
+      end
+
+      def input_wrapper_classes
+        compact ? 'h-9 p-1 flex rounded' : 'h-12 p-1 flex rounded'
+      end
+
+      def search_input_classes
+        base = 'focus:ring-0 border-none p-1 px-2 appearance-none w-full sts-dropdown-input text-gray-800 dark:text-gray-300'
+        base += ' text-sm' if compact
+        base
+      end
     end
   end
 end

data/app/components/satis/dropdown/component_controller.js

@@ -355,6 +355,9 @@ export default class DropdownComponentController extends ApplicationController {
   }
 
   setHiddenSelect() {
+    if (this.element.querySelector('select[name*="[TEMPLATE]"]')) {
+        return
+    } 
     if (this.hiddenSelectTarget.options.length === 0) {
       this.searchInputTarget.value = ""
       this.pillsTarget.innerHTML = ""
@@ -542,7 +545,7 @@ export default class DropdownComponentController extends ApplicationController {
     // auto select if there is only one match and we are not in freetext mode
     if (!this.freeTextValue) {
       if (matches.length === 1) {
-        if (this.filteredSearchQuery.length >= this.minSearchQueryLengthValue &&
+        if (this.filteredSearchQuery?.length >= this.minSearchQueryLengthValue &&
           matches[0].getAttribute("data-satis-dropdown-item-text").toLowerCase().indexOf(this.lastSearch.toLowerCase()) >= 0) {
           const dataDiv = matches[0].closest('[data-satis-dropdown-target="item"]')
           this.selectItem(dataDiv)
@@ -601,15 +604,14 @@ export default class DropdownComponentController extends ApplicationController {
       this.fetchResultsWith(ourUrl).then((itemCount) => {
         if (this.hasResults) {
           this.filterResultsChainTo()
-
-          if (!this.resultsShown && !this.chainToValue) {
+          if (!this.resultsShown) {
             this.showResultsList()
           }
 
           // auto select when there is only 1 value
-          if (this.filteredSearchQuery.length >= this.minSearchQueryLengthValue && this.nrOfItems === 1 && !this.freeTextValue) {
+          if (this.filteredSearchQuery?.length >= this.minSearchQueryLengthValue && this.nrOfItems === 1 && !this.freeTextValue) {
             const dataDiv = this.itemTargets[0].closest('[data-satis-dropdown-target="item"]')
-            this.selectItem(dataDiv)
+            this.selectItem(dataDiv, true)
             this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
             this.searchQueryValue = ""
           } else if (this.searchQueryValue?.length > 0) {

data/app/components/satis/sidebar/component.css

@@ -1,3 +1,4 @@
+/* ── Sidebar container ── */
 .h-screen.flex .sidebar {
   @apply dark:bg-gray-700 bg-white;
   width: 260px;
@@ -6,77 +7,44 @@
   left: 0;
   margin-top: 4rem;
   position: absolute;
-  overflow: visible;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   scrollbar-width: none;
   z-index: 999;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
-
-}
-
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item{
-  z-index: 1100;
-  position: relative;
-  opacity: 0.99;
-  margin-left: 10px;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
 }
 
-
 .h-screen.flex .sidebar.close {
-  position: absolute;
-  overflow: visible;
-  top: 0;
-  left: 0;
-  height: calc(100% - 4rem);
-  margin-top: 4rem;
   width: 60px;
-  z-index: 999;
-  scrollbar-width: none;
+  overflow: visible;
 }
 
 .sidebar::-webkit-scrollbar {
   display: none;
 }
 
+.dark .h-screen.flex .sidebar {
+  @apply bg-gray-800;
+}
 
+/* ── Topbar ── */
 .h-screen.flex .topbar {
   @apply bg-white dark:bg-gray-800;
   height: 4rem;
   display: flex;
   max-width: 100%;
-  left:0;
-  margin-left: 0;
   position: relative;
-  z-index: 10000;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  z-index: 1000;
 }
 
+/* ── Page body ── */
 .page_body.close {
-  margin-left: 50px;
-  max-width: 97%;
-}
-
-.h-screen.flex .sidebar .boxture-logo{
-  margin-top: 30px;
-}
-
-.sidebar.close .boxture-logo {
-  opacity: 0;
-}
-
-.h-screen.flex .sidebar.close .icon-link {
-  margin-top: 0;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
+  margin-left: 60px;
+  max-width: calc(100% - 60px);
 }
 
-
-.sidebar.close .sts-sidebar-menu-item{
-  margin-left: 2px;
-}
-
-.sidebar .boxture-logo {
+/* ── Logo ── */
+.h-screen.flex .sidebar .boxture-logo {
   height: 52px;
   width: 52px;
   opacity: 0.5;
@@ -84,66 +52,76 @@
   border-radius: 16px;
   font-size: 30px;
   color: #fff;
-  margin-top: 80px;
+  margin-top: 30px;
   mix-blend-mode: multiply;
+  transition: opacity 0.3s ease-in-out;
 }
 
 .dark .sidebar .boxture-logo {
   mix-blend-mode: normal;
 }
 
-.sidebar.close .profile-logo {
-  display: none;
+.sidebar.close .boxture-logo {
+  opacity: 0;
+  pointer-events: none;
 }
 
-.sidebar .arrow:hover {
-  color: #555555;
-  cursor: pointer;
+.sidebar .logo_name {
+  font-size: 10px;
+  opacity: 0.5;
+  text-align: center;
+  display: block;
 }
 
-.dark .sidebar .arrow:hover {
-  color: #c0c0c0;
+.sidebar.close .logo_name {
+  display: none;
 }
 
-.dark .sidebar .arrow {
-  color: #ffffff;
-  opacity: 1;
-  margin-top: 20px;
+.dark .sidebar .logo_name {
+  color: #edecec;
+}
+
+.sidebar.close .profile-logo {
+  display: none;
 }
 
+/* ── Collapse arrow ── */
 .h-screen.flex .sidebar .arrow {
   margin-top: 20px;
   font-size: 20px;
   opacity: 0.5;
-  left: 0;
   margin-left: 10px;
   margin-right: 10px;
   transform: scaleX(-1);
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
 }
 
-.h-screen.flex .sidebar.close .arrow{
+.h-screen.flex .sidebar.close .arrow {
   margin-left: 15px;
-  left: 0;
   transform: scaleX(1);
 }
 
-.sidebar .logo_name {
-  font-size: 10px;
-  opacity: 0.5;
-  text-align: center;
-  display: block;
+.sidebar .arrow:hover {
+  color: #555555;
+  cursor: pointer;
 }
 
-.sidebar.close .logo_name {
-  display: none;
+.dark .sidebar .arrow {
+  color: #ffffff;
+  opacity: 1;
+  margin-top: 20px;
 }
 
-.dark .h-screen.flex .sidebar {
-  @apply bg-gray-800;
+.dark .sidebar .arrow:hover {
+  color: #c0c0c0;
 }
 
-.dark .sidebar .logo_name {
-  color: #edecec;
+.h-screen.flex .sidebar.close .icon-link {
+  margin-top: 0;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
 }
 
+.sidebar.close .sts-sidebar-menu-item {
+  margin-left: 2px;
+}

data/app/components/satis/sidebar_menu_item/component.css

@@ -1,5 +1,8 @@
+/* ── Base menu item ── */
 .sts-sidebar-menu-item {
   @apply pt-1;
+  position: relative;
+
   & a.focus {
     background: rgba(1, 1, 1, 0.1);
 
@@ -15,9 +18,8 @@
     @apply rotate-90;
   }
 
-
   &__link {
-    @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
+    @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500;
   }
 
   &__icon {
@@ -34,166 +36,143 @@
   }
 }
 
-
-.sidebar.close .sts-sidebar-menu-item__label {
+/* submenu-label always hidden in expanded sidebar */
+.sidebar .sts-sidebar-menu-item .submenu-label {
   display: none;
 }
 
-.sidebar.close .sts-sidebar-menu-item:hover > .sts-sidebar-menu-item__link {
-  width: 40px;
-}
-
+/* ===================================
+   COLLAPSED SIDEBAR (.sidebar.close)
+   =================================== */
 
-.sidebar.close .sts-sidebar-menu-item [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item{
-  display: none;
-  visibility: hidden;
-  opacity: 0;
+/* Center icons in collapsed sidebar */
+.sidebar.close .icon-link > .sts-sidebar-menu-item {
+  margin-left: 6px;
 }
 
-.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"]{
-  opacity: 0;
+/* Hide labels and chevrons */
+.sidebar.close .sts-sidebar-menu-item__label {
   display: none;
-  visibility: hidden;
 }
 
-
-.sidebar.close .sts-sidebar-menu-item .sts-sidebar-menu-item__link .sts-sidebar-menu-item__menu-icon{
+.sidebar.close .sts-sidebar-menu-item__menu-icon {
   display: none;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.sidebar.close .icon-link > .sts-sidebar-menu-item:hover:not(:has([data-satis-sidebar-menu-item-target="submenu"])) .sts-sidebar-menu-item__label {
-  @apply rounded-md bg-gray-50 dark:bg-gray-900 shadow-md py-2;
-  text-decoration-thickness: 2px;
-  display: block;
-  position: absolute;
-  padding-right: 20px;
-  padding-left: 20px;
-  margin-left: 40px;
 }
 
-.sidebar.close .icon-link > .sts-sidebar-menu-item:has([data-satis-sidebar-menu-item-target="submenu"]):hover > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label {
-  @apply text-white dark:bg-gray-600;
-  display: block;
+/* ── Flyout panel (shown via JS .flyout-visible) ── */
+.sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"].flyout-visible {
+  @apply bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10;
+  display: block !important;
   position: absolute;
-  background-color: rgba(0, 0, 0, 1);
-  padding: 5px 10px;
-  border-radius: 4px;
+  left: 54px;
   width: 220px;
-  margin-left: 22px;
-  margin-bottom: 80px;
+  padding: 4px 0;
+  z-index: 1100;
+  border-radius: 0 0.5rem 0.5rem 0.5rem;
 }
 
-
-.sidebar.close .icon-link > .sts-sidebar-menu-item:has([data-satis-sidebar-menu-item-target="submenu"]):last-child:hover > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label {
-  margin-top: -760px;
-  margin-left: 20px;
+/* Invisible bridge: prevents hover gap between sidebar icon and flyout */
+.sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"].flyout-visible::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -20px;
+  width: 20px;
+  bottom: 0;
 }
 
-.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
-  @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0 shadow-lg;
-  display: block;
-  visibility: visible;
-  opacity: 1;
+/* Nested flyout panels (level 3+) */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible [data-satis-sidebar-menu-item-target="submenu"].flyout-visible {
+  @apply bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 rounded-lg;
+  display: block !important;
   position: absolute;
-  margin-left: 30px;
-  margin-top: -45px;
-
+  left: 100%;
   width: 220px;
-
+  padding: 4px 0;
+  z-index: 1100;
 }
 
-.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:only-child {
-  @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0 shadow-lg;
-  display: block;
-  visibility: visible;
-  opacity: 1;
-  position: fixed;
-  width: 220px;
-  margin-left: 0;
-
+/* Nested bridge */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible [data-satis-sidebar-menu-item-target="submenu"].flyout-visible::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -8px;
+  width: 8px;
+  bottom: 0;
 }
 
-.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item {
+/* Items inside a visible flyout */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible > .sts-sidebar-menu-item {
   @apply py-0 px-0;
+  display: block;
   margin-left: 0;
 }
 
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item a.focus{
-  @apply bg-white dark:bg-gray-900;
+/* Flyout item links: Tailwind UI dropdown style */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__link {
+  @apply rounded-none px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white;
 }
 
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item a.focus{
-  @apply bg-white dark:bg-gray-900;
-}
-
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item.pl-4 {
-  @apply py-0 px-0 ;
+/* Show regular labels inside flyout (not submenu-label) */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__label:not(.submenu-label) {
   display: block;
-  visibility: visible;
-  opacity: 100;
-
-}
-
-.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item .sts-sidebar-menu-item__label {
   background: none;
-  display:block;
-  overflow: visible;
   padding: 0;
 }
 
-
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:last-child:hover > [data-satis-sidebar-menu-item-target="submenu"] {
-  margin-top: -425px;
-}
-
-.h-screen.flex .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
-  position: fixed;
-  margin-left: 185px;
-  margin-top: -80px;
+/* Reset focus style inside flyout */
+.sidebar.close .icon-link .sts-sidebar-menu-item a.focus {
+  @apply bg-white dark:bg-gray-800;
 }
 
-
-.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"]::-webkit-scrollbar {
-  display: none;
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item a.focus {
+  @apply bg-gray-100 dark:bg-gray-700;
 }
 
-.h-screen.flex .sidebar .icon-link .sts-sidebar-menu-item .submenu-label {
-  display: none;
+/* ── Tooltip label for items without submenus (shown via JS .tooltip-visible) ── */
+.sidebar.close .sts-sidebar-menu-item__label.tooltip-visible {
+  @apply bg-gray-900 dark:bg-gray-700 text-white text-xs font-medium shadow-lg ring-1 ring-black/5 rounded-md;
+  display: block !important;
+  position: absolute;
+  left: 54px;
+  padding: 6px 12px;
+  white-space: nowrap;
+  z-index: 1100;
 }
 
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item .submenu-label {
-  display: none;
+/* Invisible bridge for tooltip */
+.sidebar.close .sts-sidebar-menu-item__label.tooltip-visible::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -20px;
+  width: 20px;
+  bottom: 0;
 }
 
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .submenu-label {
-  @apply text-white dark:bg-gray-600;
-  display: block;
+/* ── Submenu-label header (shown via JS .tooltip-visible) — flush with flyout ── */
+.sidebar.close .submenu-label.tooltip-visible {
+  @apply bg-gray-900 dark:bg-gray-700 text-white text-xs font-semibold;
+  display: block !important;
   position: absolute;
-  background-color: rgba(0, 0, 0, 1);
-  padding: 5px 10px;
-  border-radius: 4px;
-  z-index: 10;
+  left: 54px;
+  padding: 6px 12px;
+  white-space: nowrap;
+  z-index: 1100;
   width: 220px;
-  margin-left: 177px;
-  margin-top: 0;
-  margin-bottom: 150px;
+  border-radius: 0.5rem 0.5rem 0 0;
 }
 
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item .submenu-label {
-  display: none;
+/* Nested submenu-label tooltips position off the flyout edge */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .submenu-label.tooltip-visible {
+  @apply rounded-lg;
+  left: 100%;
+  width: max-content;
+  max-width: 220px;
 }
 
-.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .submenu-label {
-  @apply text-white dark:bg-gray-600;
-  display: block;
-  position: absolute;
-  background-color: rgba(0, 0, 0, 1);
-  padding: 5px 10px;
-  border-radius: 4px;
-  z-index: 10;
-  width: 220px;
-  margin-left: 177px;
-  margin-bottom: 150px;
+/* Nested tooltip labels shouldn't show (already visible in flyout) */
+.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__label.tooltip-visible {
+  display: none !important;
 }

data/app/components/satis/sidebar_menu_item/component_controller.js

@@ -15,18 +15,131 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
 
     this.boundUpdateFocus = this.updateFocus.bind(this)
     this.boundOpenListener = this.openListener.bind(this)
+    this.boundShowFlyout = this.showFlyout.bind(this)
+    this.boundHideFlyout = this.hideFlyout.bind(this)
+    this.hideTimer = null
 
     this.updateFocus(true)
     this.element.addEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
+    this.element.addEventListener('mouseenter', this.boundShowFlyout)
+    this.element.addEventListener('mouseleave', this.boundHideFlyout)
     window.addEventListener('popstate', debounce(this.boundUpdateFocus, 200))
   }
 
   disconnect() {
     super.disconnect()
+    clearTimeout(this.hideTimer)
     this.element.removeEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
+    this.element.removeEventListener('mouseenter', this.boundShowFlyout)
+    this.element.removeEventListener('mouseleave', this.boundHideFlyout)
     window.removeEventListener('popstate', debounce(this.boundUpdateFocus, 200))
   }
 
+  // ── Collapsed sidebar flyout logic ──
+
+  get isSidebarClosed() {
+    const sidebar = this.element.closest('.sidebar')
+    return sidebar?.classList.contains('close')
+  }
+
+  get isInsideFlyout() {
+    return !!this.element.closest('[data-satis-sidebar-menu-item-target="submenu"].flyout-visible')
+  }
+
+  showFlyout() {
+    if (!this.isSidebarClosed) return
+
+    // Cancel any pending hide
+    clearTimeout(this.hideTimer)
+
+    if (this.hasSubmenuTarget) {
+      const submenuLabel = this.element.querySelector(':scope > .sts-sidebar-menu-item__link > .submenu-label')
+
+      this.submenuTarget.classList.add('flyout-visible')
+      if (submenuLabel) submenuLabel.classList.add('tooltip-visible')
+
+      this.positionFlyout(this.submenuTarget, submenuLabel)
+    } else if (!this.isInsideFlyout) {
+      const label = this.element.querySelector(':scope > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label:not(.submenu-label)')
+      if (label) {
+        label.classList.add('tooltip-visible')
+        this.positionWithinViewport(label)
+      }
+    }
+  }
+
+  hideFlyout() {
+    if (!this.isSidebarClosed) return
+
+    // Delay hiding so the user can move to the flyout without it disappearing
+    this.hideTimer = setTimeout(() => {
+      if (this.hasSubmenuTarget) {
+        this.submenuTarget.classList.remove('flyout-visible')
+        this.submenuTarget.style.top = ''
+      }
+
+      this.element.querySelectorAll('.tooltip-visible').forEach(el => {
+        el.classList.remove('tooltip-visible')
+        el.style.top = ''
+      })
+    }, 150)
+  }
+
+  positionFlyout(flyout, label) {
+    requestAnimationFrame(() => {
+      const flyoutRect = flyout.getBoundingClientRect()
+      if (flyoutRect.height === 0) return
+
+      const viewportHeight = window.innerHeight
+      const margin = 8
+      const labelHeight = label ? label.getBoundingClientRect().height : 0
+
+      let flyoutTop = parseFloat(getComputedStyle(flyout).top) || 0
+
+      // Check if flyout overflows bottom
+      if (flyoutRect.bottom > viewportHeight - margin) {
+        const overflow = flyoutRect.bottom - viewportHeight + margin
+        flyoutTop -= overflow
+      }
+
+      // Check if label above flyout would overflow top
+      const parentRect = flyout.offsetParent?.getBoundingClientRect()
+      const parentTop = parentRect?.top || 0
+      if (parentTop + flyoutTop - labelHeight < margin) {
+        flyoutTop = margin - parentTop + labelHeight
+      }
+
+      flyout.style.top = `${flyoutTop}px`
+
+      // Position label flush against the top of the flyout panel (no gap)
+      if (label) {
+        label.style.top = `${flyoutTop - labelHeight}px`
+      }
+    })
+  }
+
+  positionWithinViewport(el) {
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect()
+      if (rect.height === 0) return
+
+      const viewportHeight = window.innerHeight
+      const margin = 8
+
+      if (rect.bottom > viewportHeight - margin) {
+        const overflow = rect.bottom - viewportHeight + margin
+        const currentTop = parseFloat(getComputedStyle(el).top) || 0
+        el.style.top = `${currentTop - overflow}px`
+      }
+
+      if (rect.top < margin) {
+        el.style.top = `${margin - el.parentElement.getBoundingClientRect().top}px`
+      }
+    })
+  }
+
+  // ── Submenu expand/collapse (expanded sidebar) ──
+
   open(event) {
     if (this.hasSubmenuTarget) {
       const sidebar = this.element.closest('.sidebar')
@@ -43,8 +156,6 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
         event.preventDefault()
       }
     }
-    // This breaks turbo, so we need to keep the propagation.
-    // event.stopPropagation();
   }
 
   openListener(event) {
@@ -54,7 +165,6 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     }
   }
 
-  // This method is used to show the submenu
   showSubmenu() {
     if (!this.hasSubmenuTarget || this.isSubmenuVisible) return
 
@@ -62,7 +172,6 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     this.element.classList.toggle("active", true)
   }
 
-  // This method is used to hide the submenu
   hideSubmenu() {
     if (!this.hasSubmenuTarget || !this.isSubmenuVisible) return
 
@@ -110,12 +219,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     return this.openSubmenus.length > 0
   }
 
-  /**
-   * Get a list of all open submenus
-   * @returns {NodeListOf<Element>}
-   */
   get openSubmenus() {
-    // scope to first match. check if there are any submenus that are not hidden
     return this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="submenu"]:not([class*="hidden"])')
   }
 

data/app/javascript/satis/controllers/fields_for_controller.js

@@ -132,7 +132,7 @@ export default class FieldsForController extends ApplicationController {
   }
 
   monitorChanges(event) {
-    if (event?.detail?.src == "satis-dropdown") {
+    if (event?.detail?.src == "satis-dropdown" || event?.detail?.src == "prepopulate" ) {
       // Skip events caused by the initial load of a satis-dropdown
       return
     }

data/app/javascript/satis/controllers/index.js

@@ -6,6 +6,9 @@ application.register("satis-appearance-switcher", AppearanceSwitcherComponentCon
 import DateTimePickerComponentController from "satis/components/date_time_picker/component_controller";
 application.register("satis-date-time-picker", DateTimePickerComponentController);
 
+import CardComponentController from "satis/components/card/component_controller";
+application.register("satis-card", CardComponentController);
+
 import DropdownComponentController from "satis/components/dropdown/component_controller";
 application.register("satis-dropdown", DropdownComponentController);
 

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.3.2"
+  VERSION = "2.3.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.3.2
+  version: 2.3.3
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-10 00:00:00.000000000 Z
+date: 2026-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -766,6 +766,7 @@ files:
 - app/components/satis/card/component.css
 - app/components/satis/card/component.html.slim
 - app/components/satis/card/component.rb
+- app/components/satis/card/component_controller.js
 - app/components/satis/color_picker/component.css
 - app/components/satis/color_picker/component.rb
 - app/components/satis/color_picker/component.slim