satis 2.2.1 → 2.2.2

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/app/javascript/satis/utility_controllers/show_hide_controller.js

@@ -20,7 +20,7 @@ export default class extends ApplicationController {
     this.boundUpdate = this.update.bind(this)
 
     this.watchOn = "input"
-    if (this.inputTarget.type == "hidden") {
+    if (this.inputTarget.type == "hidden" || this.inputTarget.type ==  "select-one") {
       this.watchOn = "change"
     }
 

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.2.1"
+  VERSION = "2.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.2.2
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-18 00:00:00.000000000 Z
+date: 2026-05-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -196,10 +196,7 @@ files:
 - Rakefile
 - TODO.md
 - app/assets/config/satis_manifest.js
-- app/assets/fontawesome/brands.js
-- app/assets/fontawesome/fontawesome.js
 - app/assets/fontawesome/regular.js
-- app/assets/fontawesome/solid.js
 - app/assets/images/satis/.keep
 - app/assets/images/satis/flags/1x1/ac.svg
 - app/assets/images/satis/flags/1x1/ad.svg
@@ -770,6 +767,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