@fikar-ai/design 1.6.0 → 1.6.1

package/README.md

@@ -149,7 +149,9 @@ Rules, in force on every surface:
 - From 1024px the sidebar shows open at 248px. It can collapse to an icon rail at 72px.
 - The account cluster (launcher, theme control, avatar) sits at the top right of the top bar on every surface.
 - The collapse control (`.shell-collapse`) is the last child of the sidebar, so it sits at the bottom in
-  the same position open or collapsed. It is hidden below 1024px.
+  the same position open or collapsed. It is an icon-only button with a static panel icon: left-aligned in
+  line with the nav icons when open, centred in the rail when collapsed. Its `<span class="nav-label">Collapse</span>`
+  is clipped (not removed) in both states and stays as the accessible name. It is hidden below 1024px.
 - The choice is stored in `localStorage` under `fikar.shell.collapsed`: the value `"1"` means collapsed,
   `"0"` means open, and an absent key is read as open. Since 0.8.0 both `shell.js` and `@fikar-ai/design-react` write `"0"` on
   expand; an older surface that removes the key is still read correctly. Storage is per origin, so the choice does not follow a person from

package/components.css

@@ -187,20 +187,23 @@ nav.side { display: flex; flex-direction: column; gap: 2px; }
    renders as before and the phone drawer never sees the state. Labels are
    clipped, not display:none, so they stay in the accessibility tree and give
    the host's tooltip its text. The collapse control is the last child of the
-   sidebar, so it holds the same place open or collapsed. ── */
+   sidebar, so it holds the same place open or collapsed. It is an icon-only 38px
+   square (panel icon, static): its "Collapse" label is clipped in both states and
+   stays as the accessible name. Open, it sits left so its icon lines up with the nav
+   icons (14px sidebar padding + 10px item padding); collapsed, it is centred in the rail. ── */
 .shell-collapse { display: none; }
 @media (min-width: 1024px) {
-  .shell-collapse { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 8px; padding: 8px 10px; border: 0; border-radius: var(--r-sm);
-    background: none; color: hsl(var(--muted-foreground)); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
+  .shell-collapse { position: relative; display: flex; align-items: center; justify-content: center; align-self: flex-start; width: 38px; height: 38px; margin-top: 8px; padding: 0; border: 0; border-radius: var(--r-sm);
+    background: none; color: hsl(var(--muted-foreground)); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
     transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
   .shell-collapse:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
   .shell-collapse svg { width: 18px; height: 18px; flex: 0 0 auto; }
   .shell.is-collapsed { grid-template-columns: 72px 1fr; }
-  .shell.is-collapsed .nav-item, .shell.is-collapsed .shell-collapse { position: relative; justify-content: center; padding-left: 0; padding-right: 0; }
-  .shell.is-collapsed .nav-label, .shell.is-collapsed .brand .word, .shell.is-collapsed .side-foot .meta {
+  .shell.is-collapsed .nav-item { position: relative; justify-content: center; padding-left: 0; padding-right: 0; }
+  .shell.is-collapsed .shell-collapse { align-self: center; }
+  .shell-collapse .nav-label, .shell.is-collapsed .nav-label, .shell.is-collapsed .brand .word, .shell.is-collapsed .side-foot .meta {
     position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
   .shell.is-collapsed .sidebar .brand, .shell.is-collapsed .side-foot { justify-content: center; padding-left: 0; padding-right: 0; }
-  .shell.is-collapsed .shell-collapse svg { transform: rotate(180deg); }
 }
 
 /* ── app shell: theme-aware logo (KAN-322) ──

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fikar-ai/design",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Fikar Ink design language — tokens, Tailwind preset + component layer. Single source of truth across all Fikar surfaces.",
   "type": "module",
   "license": "UNLICENSED",

package/recipes/shell.html

@@ -22,7 +22,7 @@
       <div class="meta"><b>Alex Morgan</b><br><span>Admin</span></div>
     </div>
     <button class="shell-collapse" type="button" aria-controls="sidebar" aria-pressed="false" title="Collapse sidebar">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
       <span class="nav-label">Collapse</span>
     </button>
   </aside>

package/templates/jinja/shell.html

@@ -46,7 +46,7 @@
     </div>
     {%- endif %}
     <button class="shell-collapse" type="button" aria-controls="sidebar" aria-pressed="false" title="Collapse sidebar">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
       <span class="nav-label">Collapse</span>
     </button>
   </aside>