maquina-components 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a445c4fe008c07069fd7d0e9fd4249c9a169410e9a53fa6cdaa6c2455351b92
-  data.tar.gz: c0964a27ecfdbd92797ee8c03a24d7c9e6db2b5e41147d2d81bf18ff2e38540d
+  metadata.gz: ce8aead4098ab0b2b83aed60c45ffbcca78f03f8e800f43259a6a51f32f36e5d
+  data.tar.gz: e58baf4a3a6ce7dcd8c0b8cce1166b5afe9d21ced6751574195ab29d76329625
 SHA512:
-  metadata.gz: 7c59d1819376a7242cbac12758ceffdb6e221184a29150b6f70364b275545f84d8da7c3235a5d9bdc3a1044e08622dba5b379615e2bc7053e8647506f83b6b7c
-  data.tar.gz: 340d7fcd15e476d17e2244cb7e7b29563b27e7fff360c09f9427d2ccc0491379b4dc5c412e4b8be9447159bbb75fd9d47bade573fbfb9497284d3d9ada629931
+  metadata.gz: '03008f285333b7b4f7cc066a10f55366629b683c7518458ac3187ffff2e6e1fb93a8850f9225b16d98fc0e14bedcc8ccef5759ee628acc4865964b90daf54661'
+  data.tar.gz: 9ad4bb8c6d2b9ed0d0595d9571bb7d471e1fe6aaa4c3c294e0b58b6e2550a5d6f42fdbc5b3a077e44fb10ead2394e75cf07350edb884dd229663c15961b75201

data/app/assets/stylesheets/badge.css

@@ -133,8 +133,9 @@
 
   /* Focus state for keyboard navigation */
   [data-component="badge"]:where(a:focus-visible, button:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/breadcrumbs.css

@@ -55,7 +55,7 @@
     @apply text-sm;
     font-weight: var(--label-weight, 500);
     @apply underline-offset-4;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     color: var(--muted-foreground);
   }
 
@@ -73,9 +73,16 @@
     @apply underline;
   }
 
+  /* The underline is kept, but it cannot be the *only* signal: on a page whose
+     breadcrumbs are the sole keyboard stops, a text-decoration change reads as
+     nothing happening. Ring first, underline as reinforcement. */
   [data-breadcrumb-part="link"]:where(:focus-visible) {
-    @apply outline-none underline;
+    @apply underline;
     color: var(--foreground);
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
   }
 
   /* ===== Breadcrumb Page (current) ===== */
@@ -126,6 +133,15 @@
     color: var(--foreground);
   }
 
+  /* It is a trigger, so it is a tab stop, so it rings. */
+  [data-breadcrumb-part="ellipsis"]:where(:focus-visible) {
+    color: var(--foreground);
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===== Overflow Dropdown (top-layer popover) ===== */
   /* Visual styling comes from dropdown_menu.css via data-dropdown-menu-part.
      Anchor positioning places the popover in modern browsers;
@@ -156,17 +172,38 @@
     @apply shrink-0 whitespace-nowrap;
   }
 
-  /* Allow the last item (current page) to truncate gracefully instead of hard-clipping */
+  /* The last item (current page) is the overflow sponge of last resort: when a
+     single long title cannot be helped by collapsing anything, it truncates
+     rather than pushing the bar out of its box. */
   :where([data-controller="breadcrumb"]) [data-breadcrumb-part="item"]:where(:last-child) {
     @apply shrink min-w-0 overflow-hidden;
-    text-overflow: ellipsis;
   }
 
+  /* display:block, not the inline-flex the other parts get. text-overflow has
+     no effect on a flex container's own box, so this rule used to hard-clip
+     mid-word -- "A Very Long Current Pag" -- while claiming to truncate
+     gracefully. A block box renders the ellipsis. An icon inside still flows
+     inline and keeps its margin. */
   :where([data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child) :is([data-breadcrumb-part="page"], [data-breadcrumb-part="link"]) {
-    @apply overflow-hidden;
+    @apply block overflow-hidden whitespace-nowrap;
     text-overflow: ellipsis;
   }
 
+  /* Measuring mode, toggled by breadcrumb_controller.js for the length of one
+     measurement. The sponge above is exactly what makes scrollWidth useless:
+     flex resolves a deficit by shrinking a shrinkable item *before* it lets the
+     line overflow, so the label absorbs everything down to 0px and
+     scrollWidth === clientWidth at every width. Measured: content wanting 430px
+     in a 300px box reported no overflow at all, which is why the width-based
+     collapse never fired and collapse_after had to be invented to fake it.
+     Pinning the last item to its natural width for the measurement makes the
+     list report the space it actually wants. */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="list"].breadcrumb-measuring [data-breadcrumb-part="item"]:where(:last-child) {
+    flex-shrink: 0;
+    min-width: max-content;
+    overflow: visible;
+  }
+
   /* Items hidden by Stimulus controller */
   :where([data-controller="breadcrumb"]) [data-breadcrumb-target="item"]:where(.hidden),
   :where([data-controller="breadcrumb"]) [data-breadcrumb-target="ellipsisSeparator"]:where(.hidden) {
@@ -183,11 +220,6 @@
     [data-breadcrumb-part="list"] {
       @apply gap-1;
     }
-
-    /* Hide middle items on very small screens by default */
-    :where([data-component="breadcrumbs"][data-auto-collapse]) [data-breadcrumb-part="item"]:where(:not(:first-child):not(:last-child)) {
-      @apply hidden sm:inline-flex;
-    }
   }
 
   /* ===== Separator Variants ===== */

data/app/assets/stylesheets/calendar.css

@@ -65,7 +65,7 @@
     cursor: pointer;
     background-color: transparent;
     color: var(--foreground);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   [data-calendar-part="header"] button svg {
@@ -78,8 +78,9 @@
   }
 
   [data-calendar-part="header"] button:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -135,7 +136,7 @@
     cursor: pointer;
     background-color: transparent;
     color: var(--foreground);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   /* ===== Day Variants ===== */
@@ -228,8 +229,9 @@
   [data-calendar-part="day"]:where(:focus-visible) {
     position: relative;
     z-index: 10;
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 }

data/app/assets/stylesheets/card.css

@@ -127,8 +127,9 @@
   }
 
   [data-component="card"]:where(a:focus-visible, button:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 }

data/app/assets/stylesheets/combobox.css

@@ -159,6 +159,15 @@
     @apply disabled:cursor-not-allowed disabled:opacity-50;
   }
 
+  /* The search field is a real tab stop -- the popover opens onto it -- so the
+     `outline-none` above has to be paid back here, like every other field. */
+  [data-combobox-part="input"]:where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===== Options List ===== */
   [data-combobox-part="list"] {
     @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
@@ -172,7 +181,7 @@
     cursor: default;
     user-select: none;
     color: var(--popover-foreground, var(--foreground));
-    @apply gap-2 py-1.5 text-sm outline-none transition-colors;
+    @apply gap-2 py-1.5 text-sm outline-none transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--combobox-item-radius, var(--control-radius, 0.375rem));
     @apply pl-8 pr-2; /* Space for check icon on left */
   }

data/app/assets/stylesheets/date_picker.css

@@ -48,7 +48,7 @@
     color: var(--foreground);
     cursor: pointer;
     text-align: left;
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   [data-date-picker-part="trigger"] svg {
@@ -102,8 +102,9 @@
 
   [data-date-picker-part="trigger"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/drawer.css

@@ -114,7 +114,7 @@
   /* ===== Drawer Close Button ===== */
   [data-drawer-part="close"] {
     @apply inline-flex items-center justify-center p-1;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--drawer-close-radius, var(--control-radius, 0.375rem));
     color: var(--foreground);
   }
@@ -130,8 +130,9 @@
 
   /* outline, not a ring: the drawer panel clips box-shadow rings */
   [data-drawer-part="close"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/dropdown_menu.css

@@ -149,7 +149,7 @@
     cursor: default;
     user-select: none;
     color: var(--popover-foreground, var(--foreground));
-    @apply gap-2 px-2 py-1.5 text-sm outline-none transition-colors;
+    @apply gap-2 px-2 py-1.5 text-sm outline-none transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--dropdown-menu-item-radius, var(--control-radius, 0.375rem));
   }
 

data/app/assets/stylesheets/form.css

@@ -95,7 +95,7 @@
     @apply border px-3 py-1;
     @apply text-base md:text-sm;
     @apply outline-none;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--input-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
@@ -141,8 +141,9 @@
   /* Focus state — keyboard only. The bare :focus used to ring on mouse click. */
   [data-component="input"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -156,8 +157,9 @@
   [data-component="input"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -178,7 +180,7 @@
     @apply border px-3 py-2;
     @apply text-base md:text-sm;
     @apply outline-none resize-y;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--textarea-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
@@ -194,8 +196,9 @@
   /* ----- States ----- */
   [data-component="textarea"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -206,8 +209,9 @@
   [data-component="textarea"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -220,7 +224,7 @@
     @apply border px-3 py-1 pr-8;
     @apply text-base md:text-sm;
     @apply outline-none appearance-none cursor-pointer;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--select-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-select-fill-default, var(--background)));
@@ -257,8 +261,9 @@
   /* ----- States ----- */
   [data-component="select"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -338,8 +343,9 @@
 
   [data-component="checkbox"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -350,8 +356,9 @@
   [data-component="checkbox"]:where([aria-invalid="true"]) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -392,8 +399,9 @@
 
   [data-component="radio"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -435,8 +443,9 @@
   }
 
   [data-component="switch"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -474,7 +483,15 @@
     @apply h-9 px-4 py-2;
     @apply cursor-default;
     @apply outline-none;
-    @apply transition-colors;
+    /* NOT `transition-colors`. Tailwind v4 folds outline-color into that
+       utility, so the focus ring would animate from its pre-focus value -- the
+       initial `currentColor`, i.e. the control's own text color -- over 150ms.
+       On a filled variant that is a near-white ring for the first frames, which
+       is no focus indicator at all; it also makes every getComputedStyle read
+       taken right after a Tab press report the previous color, which is how
+       this was mis-reported as an inert --focus-ring-color token. Keep
+       outline-color out of every transition in this engine. */
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     @apply select-none;
 
     /* SVG icons inside buttons */
@@ -591,10 +608,20 @@
    * variant declares, so a single selector suffices and no variant can clobber
    * it; it also survives forced-colors mode and overflow-hidden ancestors, and
    * needs no knowledge of the backdrop color.
+   *
+   * Longhands, not the `outline` shorthand. The shorthand is invalid at
+   * computed-value time as a unit: if any one var() fails to resolve, all three
+   * longhands reset to their initial values and the ring vanishes entirely --
+   * and `outline-color: currentColor` looks plausible on a dark-text control,
+   * which is how a missing ring stays unreported. Longhands isolate a failure
+   * to the property that actually failed.
+   *
+   * The base rule must never transition outline-color -- see the note there.
    */
   [data-component="button"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -639,8 +666,9 @@
   :where(.field_with_errors) [data-component="select"] {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
     border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/menu_button.css

@@ -77,8 +77,9 @@
   }
 
   [data-menu-button-part="trigger"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/pagination.css

@@ -58,7 +58,7 @@
     @apply text-sm;
     border-radius: var(--pagination-radius, var(--control-radius, 0.375rem));
     font-weight: var(--label-weight, 500);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
 
     /* Size */
     @apply h-9 min-w-9 px-3;
@@ -136,8 +136,9 @@
   [data-pagination-part="link"]:where(:focus-visible),
   [data-pagination-part="previous"]:where(:focus-visible),
   [data-pagination-part="next"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/sidebar.css

@@ -71,6 +71,22 @@
     width: calc(var(--sidebar-width-icon) + 1rem);
   }
 
+  /* Below 768px the container is a fixed overlay with a backdrop, so there is no
+     state in which the gap should also reserve flow. The comment above claims JS
+     keeps this at 0 on mobile, but updateState() computes
+     `isOpen ? "none" : (isMobile ? "offcanvas" : "icon")` -- isOpen wins over
+     isMobile -- so an expanded sidebar_state cookie reserves a full 288px on
+     every phone load until the mobile check runs, and a sidebar opened on a
+     phone reserves it for as long as it is open. Structural on purpose: no JS
+     has to have run for this to hold. Declared last so source order carries it
+     over the width rules above, which are all 0,1,0 like everything else here. */
+  @media (width < 768px) {
+    :where([data-sidebar-part="root"]) [data-sidebar-part="gap"] {
+      width: 0;
+      transition: none;
+    }
+  }
+
   /* ===== Sidebar Backdrop (mobile overlay) ===== */
   [data-sidebar-part="backdrop"] {
     @apply fixed inset-0 z-40 hidden bg-black opacity-0;
@@ -180,8 +196,9 @@
   }
 
   [data-sidebar-part="group-label"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -212,8 +229,9 @@
   }
 
   [data-sidebar-part="group-action"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -278,8 +296,9 @@
   /* Menu Button States */
   /* outline, not a ring: the sidebar container clips box-shadow rings */
   [data-sidebar-part="menu-button"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -337,8 +356,9 @@
 
   /* Menu Link States */
   [data-sidebar-part="menu-link"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -407,8 +427,9 @@
   }
 
   [data-sidebar-part="menu-action"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -435,8 +456,9 @@
 
   [data-sidebar-part="trigger"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -499,7 +521,7 @@
   /* ===== Sidebar Primary Button (Quick Create style) ===== */
   .sidebar-primary-button {
     @apply flex flex-1 items-center gap-2 overflow-hidden p-2 text-left text-sm;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--sidebar-item-radius, var(--control-radius, 0.375rem));
     font-weight: var(--label-weight, 500);
     background-color: var(--sidebar-primary);
@@ -515,15 +537,16 @@
   }
 
   .sidebar-primary-button:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
   /* ===== Sidebar Outline Button ===== */
   .sidebar-outline-button {
     @apply flex items-center justify-center p-2;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     @apply border;
     border-radius: var(--sidebar-item-radius, var(--control-radius, 0.375rem));
     border-color: var(--sidebar-border);
@@ -540,8 +563,9 @@
   }
 
   .sidebar-outline-button:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 }

data/app/assets/stylesheets/toast.css

@@ -154,8 +154,9 @@
 
   [data-toast-part="close"]:where(:focus-visible) {
     opacity: 1;
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -169,7 +170,7 @@
     color: var(--foreground);
     cursor: pointer;
     text-decoration: none;
-    @apply mt-2 h-8 px-3 text-xs transition-colors;
+    @apply mt-2 h-8 px-3 text-xs transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--toast-action-radius, var(--control-radius, 0.375rem));
     font-weight: var(--label-weight, 500);
   }
@@ -180,8 +181,9 @@
   }
 
   [data-toast-part="action"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/toggle_group.css

@@ -37,7 +37,7 @@
     @apply gap-2 text-sm;
     border-radius: var(--toggle-group-radius, var(--control-radius, 0.375rem));
     font-weight: var(--label-weight, 500);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
 
     /* Default size */
     @apply h-9 px-3;
@@ -132,8 +132,9 @@
   [data-toggle-group-part="item"]:where(:focus-visible) {
     z-index: 1;
     position: relative;
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/helpers/maquina_components/breadcrumbs_helper.rb

@@ -36,6 +36,7 @@ module MaquinaComponents
     # @param links [Hash] Hash of text => path pairs
     # @param current_page [String, nil] Text for current page (no link)
     # @param css_classes [String] Additional CSS classes for nav element
+    # @param collapse_after [Integer] Deprecated, ignored. Removed in 0.8.0.
     # @return [String] HTML string
     #
     # @example
@@ -44,8 +45,15 @@ module MaquinaComponents
     #     "Button"
     #   )
     #
-    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "", collapse_after: 0)
-      render "components/breadcrumbs", css_classes: css_classes, responsive: true, collapse_after: collapse_after do
+    # collapse_after is accepted and ignored. It existed only because the
+    # width-based collapse never fired -- the last item's flex-shrink absorbed
+    # the overflow, so scrollWidth never exceeded clientWidth -- and it
+    # compensated by collapsing on item count alone, with no idea how much room
+    # there was. Space-based collapsing works now, so a count threshold can only
+    # collapse a bar that fits. Still in the signature so existing callers do
+    # not raise; drop it in 0.8.0.
+    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "", collapse_after: nil)
+      render "components/breadcrumbs", css_classes: css_classes, responsive: true do
         render "components/breadcrumbs/list" do
           build_breadcrumb_items(links, current_page, responsive: true)
         end

data/app/helpers/maquina_components/icons_helper.rb

@@ -21,11 +21,19 @@ module MaquinaComponents
 
     # Internal icon helper for engine components. Always uses built-in SVGs
     # so components work reliably regardless of the app's icon configuration.
+    #
+    # It raises under strict_icons for the same reason icon_for does, and the
+    # reason is sharper here: a component asking for an icon the engine does not
+    # ship renders nothing, and no host-app override can rescue it. That is how
+    # the dropdown and combobox triggers shipped without their chevrons.
     def builtin_icon_for(name, options = {})
       return nil unless name
 
       svg = icon_svg_for(name.to_sym)
-      return nil unless svg
+      unless svg
+        raise MaquinaComponents::UnknownIconError, unknown_builtin_icon_message(name) if MaquinaComponents.strict_icons?
+        return nil
+      end
 
       apply_icon_options(svg, options)
     end
@@ -35,6 +43,17 @@ module MaquinaComponents
 
     private
 
+    def unknown_builtin_icon_message(name)
+      "Unknown built-in icon #{name.to_sym.inspect}. An engine component asked " \
+      "for an icon the engine does not ship. Defining it in your app's " \
+      "main_icon_svg_for override will NOT help: builtin_icon_for deliberately " \
+      "never consults it, so that components render the same in every app. Add " \
+      "the icon to icon_svg_for in " \
+      "app/helpers/maquina_components/icons_helper.rb and report it upstream. " \
+      "Set MaquinaComponents.strict_icons = false to fall back to rendering " \
+      "nothing."
+    end
+
     def unknown_icon_message(name)
       "Unknown icon #{name.to_sym.inspect}. Define it in your app's " \
       "main_icon_svg_for override, or use one of the engine's built-in icons " \
@@ -59,6 +78,19 @@ module MaquinaComponents
         svg = svg.gsub('stroke-width="2"', "stroke-width=\"#{options[:stroke_width]}\"")
       end
 
+      # Without this, options[:data] was accepted and silently dropped, which
+      # left dropdown_menu.css's chevron rotation targeting an attribute that
+      # never reached the DOM.
+      if options[:data].is_a?(Hash)
+        attributes = options[:data].filter_map do |key, value|
+          next if value.nil? || value == false
+
+          name = ERB::Util.html_escape("data-#{key.to_s.tr("_", "-")}")
+          %(#{name}="#{ERB::Util.html_escape(value.to_s)}")
+        end
+        svg = svg.sub(/<svg(?=(\s|>))/, "<svg #{attributes.join(" ")}") if attributes.any?
+      end
+
       svg.html_safe
     end
 
@@ -142,7 +174,7 @@ module MaquinaComponents
             <polyline points="12 19 5 12 12 5"></polyline>
           </svg>
         SVG
-      when :select_chevron
+      when :select_chevron, :chevron_down
         <<~SVG.freeze
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="" aria-hidden="true">
             <path d="m6 9 6 6 6-6"></path>
@@ -170,7 +202,7 @@ module MaquinaComponents
             <line x1="21" x2="9" y1="12" y2="12"></line>
           </svg>
         SVG
-      when :chevron_up_down
+      when :chevron_up_down, :chevrons_up_down
         <<~SVG.freeze
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
             <path d="m7 15 5 5 5-5"></path>

data/app/javascript/controllers/breadcrumb_controller.js

@@ -2,7 +2,16 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["item", "ellipsis", "ellipsisSeparator"]
-  static values = { collapseAfter: { type: Number, default: 0 } }
+
+  // Shared with breadcrumbs.css. While it is on the list, the last item is
+  // pinned to its natural width; see _fits() for why that is the whole trick.
+  // test/stylesheets/css_conventions_test.rb asserts the two agree.
+  static MEASURING_CLASS = "breadcrumb-measuring"
+
+  // Sub-pixel slack. scrollWidth and clientWidth are integer-rounded, so
+  // content of 500.4px in a 500px box reports 501 > 500 and would collapse a
+  // bar that visually fits.
+  static FIT_TOLERANCE = 1
 
   // True when CSS anchor positioning (breadcrumbs.css) places the popover
   static supportsAnchorPositioning =
@@ -12,20 +21,56 @@ export default class extends Controller {
 
   connect() {
     this._dropdown = null
+    this._fitting = false
+    this._frame = null
     this._popoverToggleHandler = this._handlePopoverToggle.bind(this)
     this._teardownHandler = this._teardown.bind(this)
+    this._morphHandler = this.fit.bind(this)
 
     document.addEventListener("turbo:before-cache", this._teardownHandler)
+    // Morphing does not replace the element, so connect() never re-runs and the
+    // bar would keep whatever collapsed state it had for different content.
+    document.addEventListener("turbo:morph", this._morphHandler)
+
+    // A ResizeObserver on the list, not a window resize listener. The container
+    // changes width without the window doing anything -- most obviously when
+    // this engine's own sidebar collapses -- and a window listener never sees it.
+    const list = this._list()
+    if (list && typeof ResizeObserver !== "undefined") {
+      this._observer = new ResizeObserver(() => this._scheduleFit())
+      this._observer.observe(list)
+    }
 
-    this.windowResizeHandler = this.handleResize.bind(this)
-    window.addEventListener('resize', this.windowResizeHandler)
-    this.handleResize()
+    // Fallback metrics are wider than the real face often enough to matter, and
+    // nothing else would re-measure once the swap lands.
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(() => this.fit())
+    }
+
+    this.fit()
   }
 
   disconnect() {
-    window.removeEventListener('resize', this.windowResizeHandler)
+    if (this._observer) {
+      this._observer.disconnect()
+      this._observer = null
+    }
+    if (this._frame) cancelAnimationFrame(this._frame)
     this._teardown()
     document.removeEventListener("turbo:before-cache", this._teardownHandler)
+    document.removeEventListener("turbo:morph", this._morphHandler)
+  }
+
+  // fit() writes classes, which resizes the list, which re-notifies the
+  // observer. Coalescing into one frame and guarding re-entry keeps that from
+  // becoming a "ResizeObserver loop completed with undelivered notifications".
+  _scheduleFit() {
+    if (this._fitting) return
+    if (this._frame) cancelAnimationFrame(this._frame)
+    this._frame = requestAnimationFrame(() => {
+      this._frame = null
+      this.fit()
+    })
   }
 
   ellipsisTargetConnected(element) {
@@ -45,8 +90,11 @@ export default class extends Controller {
     }
   }
 
-  handleResize() {
-    const list = this.element.querySelector('[data-breadcrumb-part="list"]')
+  // Collapse only when the bar genuinely does not fit, and re-expand when it
+  // does. Both halves are the same pass: every run starts fully expanded and
+  // re-derives the answer, so nothing is one-way.
+  fit() {
+    const list = this._list()
     if (!list) return
 
     const items = this.itemTargets
@@ -55,50 +103,59 @@ export default class extends Controller {
 
     if (items.length < 1 || !ellipsis) return
 
-    // Reset all items and their adjacent separators to visible
-    ellipsis.classList.add('hidden')
-    if (ellipsisSeparator) ellipsisSeparator.classList.add('hidden')
-    items.forEach(item => {
-      item.classList.remove('hidden')
-      const sep = this._adjacentSeparator(item)
-      if (sep) sep.classList.remove('hidden')
-    })
+    // A zero-width container means "not laid out yet" -- inside a collapsing
+    // sidebar, a Turbo Frame mid-swap, an unshown tab panel. Measuring there
+    // reads as infinite overflow and hides every middle item, permanently,
+    // because nothing used to schedule a re-measure. The observer will call us
+    // back once it has a width.
+    if (list.clientWidth === 0) return
 
-    // Count-based collapsing: force-collapse when total items exceed threshold
-    // items are middle targets only; total visible = middle targets + first + last (2)
-    const totalItems = items.length + 2
-    if (this.collapseAfterValue > 0 && totalItems > this.collapseAfterValue) {
-      ellipsis.classList.remove('hidden')
-      if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
+    this._fitting = true
 
-      // collapseAfterValue includes first + last, so middle budget = collapseAfterValue - 2
-      const maxMiddleVisible = Math.max(this.collapseAfterValue - 2, 0)
-      let visibleMiddle = items.length
+    try {
+      // Reset to fully expanded before deciding anything.
+      ellipsis.classList.add('hidden')
+      if (ellipsisSeparator) ellipsisSeparator.classList.add('hidden')
+      items.forEach(item => {
+        item.classList.remove('hidden')
+        const sep = this._adjacentSeparator(item)
+        if (sep) sep.classList.remove('hidden')
+      })
 
-      for (let i = items.length - 1; i >= 0 && visibleMiddle > maxMiddleVisible; i--) {
-        items[i].classList.add('hidden')
-        const sep = this._adjacentSeparator(items[i])
-        if (sep) sep.classList.add('hidden')
-        visibleMiddle--
-      }
-    }
+      list.classList.add(this.constructor.MEASURING_CLASS)
+
+      if (this._fits(list)) return
 
-    // Check overflow using scrollWidth vs clientWidth
-    if (list.scrollWidth > list.clientWidth) {
       ellipsis.classList.remove('hidden')
       if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
 
-      // Hide middle items one at a time until it fits
-      const visibleItems = items.filter(item => !item.classList.contains('hidden'))
-      for (let i = visibleItems.length - 1; i >= 0; i--) {
-        visibleItems[i].classList.add('hidden')
-        const sep = this._adjacentSeparator(visibleItems[i])
+      // Hide from the FRONT. The ellipsis is rendered immediately after the
+      // first item, so it can only honestly stand for the items that follow it.
+      // Hiding from the back put the "..." in front of items it did not
+      // represent and listed the tail in its dropdown.
+      for (let i = 0; i < items.length; i++) {
+        items[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(items[i])
         if (sep) sep.classList.add('hidden')
-        if (list.scrollWidth <= list.clientWidth) break
+        if (this._fits(list)) break
       }
+    } finally {
+      list.classList.remove(this.constructor.MEASURING_CLASS)
+      this._fitting = false
+      this._updateDropdown()
     }
+  }
+
+  // Only meaningful inside measuring mode. Outside it the last item is
+  // flex-shrinkable, so the flex algorithm absorbs the whole deficit into the
+  // current-page label rather than overflowing the line, and scrollWidth equals
+  // clientWidth at every width -- which is why the old check never fired.
+  _fits(list) {
+    return list.scrollWidth <= list.clientWidth + this.constructor.FIT_TOLERANCE
+  }
 
-    this._updateDropdown()
+  _list() {
+    return this.element.querySelector('[data-breadcrumb-part="list"]')
   }
 
   // Find the next sibling separator <li> (not the managed ellipsisSeparator)

data/app/javascript/controllers/sidebar_controller.js

@@ -149,6 +149,8 @@ export default class extends Controller {
     // Update sidebar visual state
     this.sidebarTarget.setAttribute("data-collapsible", collapsible)
 
+    this.updateInert(state, collapsible)
+
     // Update backdrop (only visible on mobile when open)
     if (this.hasBackdropTarget) {
       const backdropState = (isOpen && isMobile) ? "visible" : "hidden"
@@ -177,6 +179,27 @@ export default class extends Controller {
     }
   }
 
+  // An offcanvas-collapsed sidebar is parked at `left: -(--sidebar-width)` with
+  // visibility: visible, so without this every link in it stays a tab stop --
+  // a keyboard user walks through a screenful of off-screen destinations that
+  // no pointer can reach. `inert`, not `aria-hidden`: the latter hides the
+  // subtree from the accessibility tree while leaving it focusable, which is
+  // the worse outcome of a focused element the screen reader will not announce.
+  //
+  // Only the offcanvas-collapsed case. A `collapsible: "icon"` sidebar is a
+  // visible rail and must stay reachable, and an open one obviously must.
+  updateInert(state, collapsible) {
+    if (!this.hasContainerTarget) return
+
+    const offscreen = state === "collapsed" && collapsible === "offcanvas"
+
+    if (offscreen) {
+      this.containerTarget.setAttribute("inert", "")
+    } else {
+      this.containerTarget.removeAttribute("inert")
+    }
+  }
+
   updateStateImmediate() {
     // Update state without transitions (for initial render)
     if (!this.hasSidebarTarget) return

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

@@ -1,14 +1,10 @@
-<%# locals: (css_classes: "", responsive: false, collapse_after: 0, **html_options) %>
+<%# locals: (css_classes: "", responsive: false, collapse_after: nil, **html_options) %>
+<%# collapse_after is deprecated and ignored; see BreadcrumbsHelper. %>
 <% merged_data = merge_component_data(html_options,
     component: :breadcrumbs
   )
 
-  if responsive
-    merged_data[:controller] = "breadcrumb"
-    if collapse_after > 0
-      merged_data[:breadcrumb_collapse_after_value] = collapse_after
-    end
-  end %>
+  merged_data[:controller] = "breadcrumb" if responsive %>
 
 <nav
   aria-label="Breadcrumb"

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

@@ -27,10 +27,14 @@
   ></div>
 
   <%# Sidebar container (fixed positioned) %>
+  <%# inert for the offcanvas-collapsed case, server-side, so the sidebar is out
+      of the tab order before Stimulus connects rather than after. The controller
+      keeps it in sync from updateInert(); see sidebar_controller.js. %>
   <div
     id="<%= stable_id %>-container"
     data-sidebar-part="container"
     data-sidebar-target="container"
+    <%= tag.attributes(inert: true) if state.to_s == "collapsed" && collapsible.to_s == "offcanvas" %>
   >
     <%# Inner sidebar content wrapper %>
     <div id="<%= stable_id %>-inner" data-sidebar-part="inner">

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

@@ -18,5 +18,5 @@
       data: merged_data,
       **html_options do %>
   <span data-combobox-target="label"><%= placeholder %></span>
-  <%= builtin_icon_for :chevrons_up_down, class: "size-4 shrink-0 opacity-50" %>
+  <%= builtin_icon_for :chevron_up_down, class: "size-4 shrink-0 opacity-50" %>
 <% end %>

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.6.1"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.7.0
 platform: ruby
 authors:
 - Mario Alberto Chávez