@fluixi-ui/tokens 0.4.0-alpha.3 → 0.4.0-alpha.5

package/dist/css/sidenav.css

@@ -75,8 +75,11 @@
   transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
               color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where([data-sidenav-link]:hover) {
-  background: var(--flx-ui-color-bg-subtle);
+/* Hover uses an fg-relative tint (not gray-2, which is invisible on the gray-1
+   rail) so it stays legible on any surface, light or dark. `:not([data-active])`
+   keeps the active pill from being flattened by hover. */
+:where([data-sidenav-link]:hover:not([data-active])) {
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
   color: var(--flx-ui-color-fg);
 }
 :where([data-sidenav-link][data-active]) {
@@ -109,6 +112,7 @@
   justify-content: center;
   width: 2rem;
   height: 2rem;
+  flex-shrink: 0;
   padding: 0;
   background: transparent;
   border: none;
@@ -116,23 +120,64 @@
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
 }
+/* A trigger in the header sits at the trailing edge on its own — the consumer
+   drops in <SidenavTrigger/> without wiring any layout. On the compact icon rail
+   the header centres its contents, so the auto-margin is dropped. */
+:where([data-sidenav-header] [data-sidenav-trigger]) {
+  margin-inline-start: auto;
+}
+:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-header] [data-sidenav-trigger]) {
+  margin-inline-start: 0;
+}
 :where([data-sidenav-trigger]:hover) {
-  background: var(--flx-ui-color-bg-subtle);
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 6%, transparent);
   color: var(--flx-ui-color-fg);
 }
 :where([data-sidenav-trigger]:focus-visible) {
   outline: var(--flx-ui-ctl-ring);
   outline-offset: 2px;
 }
+/* Built-in trigger icon: a chevron pointing in the collapse direction, flipping
+   between expanded and compact (and mirrored for a right-side rail). */
+:where([data-sidenav-trigger-icon]) {
+  display: block;
+  width: 1.15em;
+  height: 1.15em;
+  background: currentColor;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  transform: rotate(90deg);
+  transition: transform var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-sidenav][data-collapsed] [data-sidenav-trigger-icon]),
+:where([data-sidenav][data-side='right'] [data-sidenav-trigger-icon]) {
+  transform: rotate(-90deg);
+}
+:where([data-sidenav][data-side='right'][data-collapsed] [data-sidenav-trigger-icon]) {
+  transform: rotate(90deg);
+}
 
-/* Compact icon rail: hide text labels, center the icons. Scoped to `compact` (not
-   the mobile drawer, which presents full-width) — `hidden` is clipped anyway. */
-:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-label]),
-:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-group-label]) {
+/* Compact icon rail: collapse each row to its leading icon. Scoped to `compact`
+   (not the mobile drawer, which is full-width; `hidden` is clipped anyway).
+   Applies to DIRECT rail rows ONLY — a sub's flyout content is portalled OUTSIDE
+   [data-sidenav], so these descendant rules never reach it (subitems keep their
+   labels in the popup). Three ways an element hides in compact:
+     1. [data-sidenav-label] / [data-sidenav-group-label] — the recommended wrapper.
+     2. [data-sidenav-hide-compact] — an explicit opt-in marker for ANY element.
+     3. auto — any non-leading child of a link / sub-trigger (the first child is the
+        icon), so unmarked label text collapses with no extra markup. */
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-label], [data-sidenav-group-label], [data-sidenav-hide-compact]) {
+  display: none;
+}
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-link], [data-sidenav-sub-trigger]) > :not(:first-child) {
   display: none;
 }
-:where([data-sidenav][data-state='compact']:not([data-mobile]) [data-sidenav-link]) {
+:where([data-sidenav][data-state='compact']:not([data-mobile]))
+  :where([data-sidenav-link], [data-sidenav-sub-trigger]) {
   justify-content: center;
+  gap: 0;
   padding-inline: 0;
 }
 
@@ -165,21 +210,23 @@
   display: none;
 }
 
-/* Inline nested list (expanded / mobile). Collapsed via grid-rows so it animates. */
+/* Inline nested list (expanded / mobile). Collapsed via max-height so every child
+   hides (a grid-rows 0fr trick only collapses a single grid child — the rest fall
+   into implicit auto rows and stay visible). The cap is generous; nav lists are short. */
 :where([data-sidenav-sub-content]:not([data-flyout])) {
-  display: grid;
-  grid-template-rows: 0fr;
   margin: 0;
   padding: 0 0 0 var(--flx-ui-space-5);
   list-style: none;
+  max-height: 0;
   overflow: hidden;
-  transition: grid-template-rows var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+  opacity: 0;
+  transition:
+    max-height var(--flx-ui-duration-normal) var(--flx-ui-ease-standard),
+    opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-sidenav-sub-content]:not([data-flyout])[data-open]) {
-  grid-template-rows: 1fr;
-}
-:where([data-sidenav-sub-content]:not([data-flyout]) > *) {
-  min-height: 0;
+  max-height: 40rem;
+  opacity: 1;
 }
 
 /* Flyout panel (compact rail): a floating anchored menu of the nested links. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/tokens",
-  "version": "0.4.0-alpha.3",
+  "version": "0.4.0-alpha.5",
   "description": "Design tokens and theming for the Fluixi UI ecosystem",
   "license": "MIT",
   "private": false,