@keenmate/pure-css 1.0.6 → 1.1.1

package/src/scss/_sidebar.scss

@@ -1,459 +1,447 @@
-/* ========================================
-   Sidebar Component
-   Sidebar navigation with nested submenus
-   ======================================== */
-@use 'variables/index' as *;
-@use 'resize-handle' as *;
-
-// Local CSS variables for sidebar (runtime state, modified by JS for resize)
-:root {
-  --pc-local-sidebar-width: #{$sidebar-width};
-  --pc-local-sidebar-min-width: 18rem;
-  --pc-local-sidebar-max-width: 50rem;
-}
-
-// Sidebar layout element - width in :where() for low specificity (utility classes can override)
-:where(.pc-layout__sidebar) {
-  width: var(--pc-local-sidebar-width);
-}
-
-.pc-layout__sidebar {
-  background-color: var(--pc-sidebar-bg, var(--base-page-bg));
-  border-inline-end: $border-width-base solid var(--pc-border-color); // RTL: flips to border-left
-  flex-shrink: 0;
-  position: relative;
-}
-
-// Resize handle on the sidebar edge. Shows the shared resize knob (see
-// _resize-handle.scss) so it's the same control as the splitter gutter — slim on
-// desktop, chunkier on small viewports. The knob is sticky at mid-viewport so it
-// stays on screen on long, page-height sidebars.
-.pc-sidebar-resize {
-  position: absolute;
-  top: 0;
-  inset-inline-end: 0; // RTL: flips to left
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  z-index: 100;
-  // Own the touch gesture. Without this the browser's touch-action heuristic can
-  // interpret a drag as a scroll/pan and CANCEL the touch sequence after
-  // touchstart — so touchmove never reaches the resize handler and the drag
-  // silently dies. Harmless for mouse (mousedown path is unaffected).
-  touch-action: none;
-  // Flex so the sticky knob can pin to the inline-end edge and ride the viewport.
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-
-  // Shared grab-knob. `position: sticky; top: 50vh` keeps it at the middle of the
-  // VISIBLE viewport, not the middle of the sidebar's full length — on a long
-  // page the sidebar stretches to the whole scroll height, so a plain top:50%
-  // knob ends up far off-screen. flex-end pins it to the inline-end edge;
-  // translateX(50%) straddles it onto the sidebar's border line; translateY(-50%)
-  // centres it on the 50vh sticky point.
-  &::before {
-    @include pa-resize-knob($axis: block);
-    position: sticky;
-    top: 50vh;
-    transform: translate(50%, -50%);
-  }
-
-  &:hover::before,
-  &--active::before {
-    @include pa-resize-knob-active;
-  }
-}
-
-// Touch: widen only the (invisible) grab area to a finger-sized target. The knob
-// LOOK is viewport-driven (handled by the shared mixin), so it's unchanged here.
-@media (pointer: coarse) {
-  .pc-sidebar-resize {
-    width: 24px;
-  }
-}
-
-// Sticky LAYOUT mode: the whole page doesn't scroll (body overflow:hidden) and
-// the sidebar is already ~viewport height, where position:sticky never engages.
-// Absolute-centre the knob instead — 50% of a viewport-height sidebar IS the
-// viewport centre.
-body.pc-layout--sticky .pc-sidebar-resize::before {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: 0;
-}
-
-// Disable text selection during resize
-body.pc-sidebar-resizing {
-  cursor: ew-resize !important;
-  user-select: none;
-
-  * {
-    cursor: ew-resize !important;
-  }
-}
-
-// Sticky mode - sidebar scrolls
-body.pc-layout--sticky .pc-layout__sidebar {
-  overflow-y: auto;
-  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
-  overflow-x: visible; // Allow tooltips to escape (right in LTR, left in RTL)
-}
-
-// Sidebar component (separate BEM block)
-.pc-sidebar {
-  &__nav {
-    padding: $spacing-base 0;
-
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &__item {
-    // Base styles for all sidebar items (regular links and submenu toggles)
-  }
-
-  // Flat section heading — a non-interactive group label ("PROJECT",
-  // "GUIDES", "LIVE DEMOS"). Use when the nav is grouped but the groups are
-  // NOT collapsible; for collapsible groups use __toggle + __submenu instead.
-  // Rendered as an <li class="pc-sidebar__section"> inside __nav's <ul>, so it
-  // sits in the list flow without a bullet (the <ul> already resets list-style).
-  &__section {
-    padding: $spacing-md $spacing-base $spacing-xs; // 16px inset aligns with __link text
-    font-size: $font-size-xs;
-    font-weight: $font-weight-semibold;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
-    user-select: none;
-
-    // First heading shouldn't push the whole nav down
-    &:first-child {
-      padding-top: $spacing-xs;
-    }
-  }
-
-  // Thin horizontal rule separating groups of items — e.g. between nav items
-  // folded in from the navbar (fit.js nav-collapse, sidebar sink) and the
-  // sidebar's own links. Rendered as an <li class="pc-sidebar__divider"> so it
-  // sits in the list flow; carries no text.
-  &__divider {
-    height: 0;
-    margin: $spacing-xs $spacing-base;
-    padding: 0;
-    border: 0;
-    border-top: $border-width-base solid var(--pc-border-color);
-    list-style: none;
-  }
-
-  &__link {
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
-    text-decoration: none;
-    font-weight: $font-weight-medium;
-    border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
-
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
-    &:hover {
-      color: var(--pc-sidebar-text, var(--base-text-color-1));
-      background-color: var(--pc-accent-light);
-    }
-
-    &--active {
-      color: var(--pc-accent);
-      background-color: var(--pc-accent-hover);
-      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
-      font-weight: $font-weight-semibold;
-    }
-  }
-
-  // Search affordance at the top of the sidebar — a TRIGGER (a consumer wires it
-  // to open a command palette / their own search), rendered as a framed
-  // faux-input row so it reads as "search" rather than another nav link:
-  // magnifier icon + muted label, inset from the sidebar edges. In icon-collapse
-  // mode it sheds the frame and centres to just the icon, exactly like the links
-  // below (its .pc-sidebar__label is hidden by the shared icon-collapse rule).
-  &__search {
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    width: calc(100% - #{$spacing-sm} * 2);
-    margin: $spacing-sm;
-    // Sized on the md input height (35px) to match the navbar search boxes,
-    // rather than the icon + $sidebar-padding metric of a nav row (40px). Trade-off:
-    // it sits ~5px shorter than the links below it. Block padding is dropped (fixed
-    // height + align-items:center owns the vertical).
-    // Inline padding: right = $spacing-base (the nav-row inset); left = $spacing-sm
-    // so that margin ($spacing-sm) + padding-left ($spacing-sm) = $spacing-base —
-    // landing the magnifier exactly where the nav-row icons below it sit, instead
-    // of one box-margin too far in.
-    height: #{$base-input-size-md-height}rem;
-    padding: 0 $spacing-base 0 $spacing-sm;
-    color: var(--pc-text-color-2);
-    background-color: var(--base-input-bg);
-    border: $border-width-base solid var(--pc-border-color);
-    border-radius: var(--pc-border-radius);
-    text-align: start; // RTL: flips to right
-    font-weight: $font-weight-medium;
-    cursor: pointer;
-
-    // Honor the standard HTML hidden attribute (display:flex above beats the UA
-    // `[hidden]{display:none}` rule otherwise).
-    &[hidden] {
-      display: none;
-    }
-
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
-    &:hover {
-      // $accent-color (foundation) — was $input-focus-border-color, an exact
-      // alias; inlined so the shell no longer depends on the component layer
-      // (variables/_components.scss now lives in pure-admin-core).
-      border-color: $accent-color;
-      // This framed box sits on the INPUT surface (--base-input-bg above), NOT
-      // the sidebar surface — so emphasise with the input text colour, not
-      // --pc-sidebar-text. In themes with a mode-independent sidebar (e.g.
-      // express: always-black sidebar → --pc-sidebar-text is white) the old
-      // sidebar-text hover went white-on-white on the light input bg.
-      color: var(--base-input-color);
-    }
-
-    // Collapsed rail ONLY (icon-collapse mode AND actually collapsed, i.e.
-    // body.sidebar-hidden): drop the frame, icon-only, matching link padding so
-    // the icon lands in the same column as every other sidebar icon. Must be
-    // gated by .sidebar-hidden — .pc-layout__sidebar--icon-collapse is the MODE
-    // class and stays on the element while the rail is expanded, so an unscoped
-    // rule would strip the search frame in the expanded state too.
-    .sidebar-hidden .pc-layout__sidebar--icon-collapse & {
-      width: auto;
-      margin: 0;
-      padding: $sidebar-padding;
-      background: transparent;
-      border-color: transparent;
-      border-radius: 0;
-    }
-
-    // Type-and-go variant: the framed row hosts a <form> whose native GET submit
-    // redirects to a results page on Enter — instead of a button that opens the
-    // palette. A single text field submits on Enter with no submit button; the
-    // magnifier is a type="submit" so that in icon-collapse mode (field hidden)
-    // clicking it still submits — an empty query lands on the bare results page.
-    // Keeps the base $sidebar-padding frame untouched so the outer box is
-    // identical to the trigger button; the submit icon mirrors .pc-sidebar__icon
-    // (fixed size, line-height 1) so it drives the row height exactly like a link,
-    // and the borderless field just fills the rest. (Don't feed $sidebar-padding —
-    // a two-value 0.5rem/1rem token — to padding-block: it maps to top/bottom and
-    // inflates the box.)
-    &--input {
-      cursor: text;
-
-      .pc-sidebar__search-icon {
-        width: $sidebar-icon-size;
-        min-width: $sidebar-icon-size;
-        height: $sidebar-icon-size;
-        flex-shrink: 0;
-        padding: 0;
-        border: none;
-        cursor: pointer;
-        color: inherit;
-        // Masked magnifier painted in currentColor — was a 🔍 text emoji, which
-        // rendered inconsistently across platforms/fonts (the same reason the
-        // sidebar chevron is masked above). Reads the shared --base-icon-search
-        // so it matches pure-admin's .pa-icon--search and the navbar search;
-        // #{$base-icon-search} is the standalone literal fallback. font-size:0
-        // collapses any legacy 🔍 still in markup so it never double-renders.
-        font-size: 0;
-        background-color: currentColor;
-        -webkit-mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
-                mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
-      }
-
-      .pc-sidebar__search-field {
-        flex: 1;
-        min-width: 0;
-        border: none;
-        outline: none;
-        background: transparent;
-        // The field shows through to the framed box's --base-input-bg surface,
-        // so its text must use the input text colour (--base-input-color), not
-        // the sidebar text colour. --pc-sidebar-text is tuned for the sidebar
-        // surface, which can be mode-independent (express: always-black sidebar
-        // → white sidebar text) and then renders white-on-white on a light
-        // input bg. --base-input-color is emitted per-mode alongside
-        // --base-input-bg, so the pair is always legible.
-        color: var(--base-input-color);
-        font: inherit;
-        padding: 0;
-
-        &::placeholder {
-          color: var(--pc-text-color-2);
-          opacity: $opacity-muted;
-        }
-
-        &::-webkit-search-decoration,
-        &::-webkit-search-cancel-button {
-          -webkit-appearance: none;
-        }
-      }
-    }
-
-    // Collapsed rail ONLY: the input variant sheds its field and centres on the
-    // submit icon; clicking it submits with an empty query (the bare results
-    // page). Gated by .sidebar-hidden so the field reappears when the icon-collapse
-    // rail is expanded (see frame rule above for why the mode class isn't enough).
-    .sidebar-hidden .pc-layout__sidebar--icon-collapse &--input {
-      justify-content: center;
-
-      .pc-sidebar__search-field {
-        display: none;
-      }
-    }
-  }
-
-  &__toggle {
-    // For submenu toggle buttons (non-link items)
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: start; // RTL: flips to right
-    font-weight: $font-weight-medium;
-    cursor: pointer;
-
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
-    &:hover {
-      color: var(--pc-sidebar-text, var(--base-text-color-1));
-      background-color: var(--pc-accent-light);
-    }
-
-    &--active {
-      color: var(--pc-accent);
-      background-color: var(--pc-accent-hover);
-    }
-  }
-
-  // Icon and label styles
-  &__icon {
-    width: $sidebar-icon-size;
-    min-width: $sidebar-icon-size;
-    height: $sidebar-icon-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: $font-size-base;
-    text-align: center;
-    line-height: 1; // Prevent emoji baseline shift
-  }
-
-  &__label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    body.loaded & {
-      transition: opacity $transition-normal $easing-snappy, width $transition-normal $easing-snappy;
-    }
-  }
-
-  // Submenu styles - Level 2
-  &__submenu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: none;
-    background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
-
-    &--open {
-      display: block;
-    }
-  }
-
-  // Level 2 submenu links
-  &__submenu > &__item > &__link {
-    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
-    font-size: $font-size-md;
-    border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
-
-    &:hover {
-      background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-hover-bg));
-    }
-
-    &--active {
-      background-color: var(--pc-sidebar-submenu-active-bg, var(--base-active-bg));
-      color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
-      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
-    }
-  }
-
-  // Level 2 submenu toggles (for third level)
-  &__submenu > &__item > &__toggle {
-    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
-    font-size: $font-size-md;
-  }
-
-  // Level 3 submenu links
-  &__submenu &__submenu > &__item > &__link {
-    padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
-    font-size: $font-size-sm;
-    border-inline-end: $border-width-base solid transparent; // RTL: flips to border-left
-
-    &--active {
-      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
-    }
-  }
-
-  // Chevron icon for toggle buttons. Rendered as an SVG mask painted in
-  // currentColor (was a bare "›" text glyph, which rendered inconsistently
-  // across platforms/fonts). Reads the shared --base-icon-chevron so it aligns
-  // with pure-admin + the web components; --pa-icon-chevron (core) lets pure-admin
-  // override, and #{$base-icon-chevron} is the standalone literal fallback.
-  // `font-size: 0` collapses any legacy "›" still present in older markup so it
-  // never double-renders alongside the mask.
-  &__chevron {
-    margin-inline-start: auto; // RTL: flips to margin-right: auto
-    inline-size: 1.6rem;
-    block-size: 1.6rem;
-    flex-shrink: 0;
-    font-size: 0;
-    background-color: currentColor;
-    -webkit-mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
-            mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
-
-    body.loaded & {
-      transition: transform $transition-fast $easing-snappy;
-    }
-
-    // Chevron points right (›) in LTR, left (‹) in RTL
-    // When open, rotates 90deg clockwise in LTR, -90deg (counter-clockwise) in RTL.
-    // Scoped to the item's OWN chevron (direct toggle child) — a plain descendant
-    // selector would also rotate nested items' chevrons whenever an ANCESTOR is
-    // open, so a closed sub-group would wrongly show a "down" chevron.
-    .pc-sidebar__item--open > .pc-sidebar__toggle > & {
-      transform: rotate(90deg);
-    }
-
-    [dir="rtl"] .pc-sidebar__item--open > .pc-sidebar__toggle > & {
-      transform: rotate(-90deg);
-    }
-  }
-}
+/* ========================================
+   Sidebar Component
+   Sidebar navigation with nested submenus
+   ======================================== */
+@use 'variables/index' as *;
+@use 'resize-handle' as *;
+
+// Local CSS variables for sidebar (runtime state, modified by JS for resize)
+:root {
+  --pc-local-sidebar-width: #{$sidebar-width};
+  --pc-local-sidebar-min-width: 18rem;
+  --pc-local-sidebar-max-width: 50rem;
+}
+
+// Sidebar layout element - width in :where() for low specificity (utility classes can override)
+:where(.pc-layout__sidebar) {
+  width: var(--pc-local-sidebar-width);
+}
+
+.pc-layout__sidebar {
+  background-color: var(--pc-sidebar-bg, var(--base-page-bg));
+  border-inline-end: $border-width-base solid var(--pc-border-color); // RTL: flips to border-left
+  flex-shrink: 0;
+  position: relative;
+}
+
+// Resize handle on the sidebar edge. Shows the shared resize knob (see
+// _resize-handle.scss) so it's the same control as the splitter gutter — slim on
+// desktop, chunkier on small viewports. The knob is sticky at mid-viewport so it
+// stays on screen on long, page-height sidebars.
+.pc-sidebar-resize {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0; // RTL: flips to left
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+  // Own the touch gesture. Without this the browser's touch-action heuristic can
+  // interpret a drag as a scroll/pan and CANCEL the touch sequence after
+  // touchstart — so touchmove never reaches the resize handler and the drag
+  // silently dies. Harmless for mouse (mousedown path is unaffected).
+  touch-action: none;
+  // Flex so the sticky knob can pin to the inline-end edge and ride the viewport.
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+
+  // Shared grab-knob. `position: sticky; top: 50vh` keeps it at the middle of the
+  // VISIBLE viewport, not the middle of the sidebar's full length — on a long
+  // page the sidebar stretches to the whole scroll height, so a plain top:50%
+  // knob ends up far off-screen. flex-end pins it to the inline-end edge;
+  // translateX(50%) straddles it onto the sidebar's border line; translateY(-50%)
+  // centres it on the 50vh sticky point.
+  &::before {
+    @include pa-resize-knob($axis: block);
+    position: sticky;
+    top: 50vh;
+    transform: translate(50%, -50%);
+  }
+
+  &:hover::before,
+  &--active::before {
+    @include pa-resize-knob-active;
+  }
+}
+
+// Touch: widen only the (invisible) grab area to a finger-sized target. The knob
+// LOOK is viewport-driven (handled by the shared mixin), so it's unchanged here.
+@media (pointer: coarse) {
+  .pc-sidebar-resize {
+    width: 24px;
+  }
+}
+
+// Sticky LAYOUT mode: the whole page doesn't scroll (body overflow:hidden) and
+// the sidebar is already ~viewport height, where position:sticky never engages.
+// Absolute-centre the knob instead — 50% of a viewport-height sidebar IS the
+// viewport centre.
+body.pc-layout--sticky .pc-sidebar-resize::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0;
+}
+
+// Disable text selection during resize
+body.pc-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+
+  * {
+    cursor: ew-resize !important;
+  }
+}
+
+// Sticky mode - sidebar scrolls
+body.pc-layout--sticky .pc-layout__sidebar {
+  overflow-y: auto;
+  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
+  overflow-x: visible; // Allow tooltips to escape (right in LTR, left in RTL)
+}
+
+// Sidebar component (separate BEM block)
+.pc-sidebar {
+  &__nav {
+    padding: $spacing-base 0;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__item {
+    // Base styles for all sidebar items (regular links and submenu toggles)
+  }
+
+  // Flat section heading — a non-interactive group label ("PROJECT",
+  // "GUIDES", "LIVE DEMOS"). Use when the nav is grouped but the groups are
+  // NOT collapsible; for collapsible groups use __toggle + __submenu instead.
+  // Rendered as an <li class="pc-sidebar__section"> inside __nav's <ul>, so it
+  // sits in the list flow without a bullet (the <ul> already resets list-style).
+  &__section {
+    padding: $spacing-md $spacing-base $spacing-xs; // 16px inset aligns with __link text
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
+    user-select: none;
+
+    // First heading shouldn't push the whole nav down
+    &:first-child {
+      padding-top: $spacing-xs;
+    }
+  }
+
+  // Thin horizontal rule separating groups of items — e.g. between nav items
+  // folded in from the navbar (fit.js nav-collapse, sidebar sink) and the
+  // sidebar's own links. Rendered as an <li class="pc-sidebar__divider"> so it
+  // sits in the list flow; carries no text.
+  &__divider {
+    height: 0;
+    margin: $spacing-xs $spacing-base;
+    padding: 0;
+    border: 0;
+    border-top: $border-width-base solid var(--pc-border-color);
+    list-style: none;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
+    text-decoration: none;
+    font-weight: $font-weight-medium;
+    border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
+
+    &:hover {
+      color: var(--pc-sidebar-text, var(--base-text-color-1));
+      background-color: var(--pc-accent-light);
+    }
+
+    &--active {
+      color: var(--pc-accent);
+      background-color: var(--pc-accent-hover);
+      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  // Search affordance at the top of the sidebar — a TRIGGER (a consumer wires it
+  // to open a command palette / their own search), rendered as a framed
+  // faux-input row so it reads as "search" rather than another nav link:
+  // magnifier icon + muted label, inset from the sidebar edges. In icon-collapse
+  // mode it sheds the frame and centres to just the icon, exactly like the links
+  // below (its .pc-sidebar__label is hidden by the shared icon-collapse rule).
+  &__search {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    width: calc(100% - #{$spacing-sm} * 2);
+    margin: $spacing-sm;
+    // Sized on the md input height (35px) to match the navbar search boxes,
+    // rather than the icon + $sidebar-padding metric of a nav row (40px). Trade-off:
+    // it sits ~5px shorter than the links below it. Block padding is dropped (fixed
+    // height + align-items:center owns the vertical).
+    // Inline padding: right = $spacing-base (the nav-row inset); left = $spacing-sm
+    // so that margin ($spacing-sm) + padding-left ($spacing-sm) = $spacing-base —
+    // landing the magnifier exactly where the nav-row icons below it sit, instead
+    // of one box-margin too far in.
+    height: #{$base-input-size-md-height}rem;
+    padding: 0 $spacing-base 0 $spacing-sm;
+    color: var(--pc-text-color-2);
+    background-color: var(--base-input-bg);
+    border: $border-width-base solid var(--pc-border-color);
+    border-radius: var(--pc-border-radius);
+    text-align: start; // RTL: flips to right
+    font-weight: $font-weight-medium;
+    cursor: pointer;
+
+    // Honor the standard HTML hidden attribute (display:flex above beats the UA
+    // `[hidden]{display:none}` rule otherwise).
+    &[hidden] {
+      display: none;
+    }
+
+    &:hover {
+      // $accent-color (foundation) — was $input-focus-border-color, an exact
+      // alias; inlined so the shell no longer depends on the component layer
+      // (variables/_components.scss now lives in pure-admin-core).
+      border-color: $accent-color;
+      // This framed box sits on the INPUT surface (--base-input-bg above), NOT
+      // the sidebar surface — so emphasise with the input text colour, not
+      // --pc-sidebar-text. In themes with a mode-independent sidebar (e.g.
+      // express: always-black sidebar → --pc-sidebar-text is white) the old
+      // sidebar-text hover went white-on-white on the light input bg.
+      color: var(--base-input-color);
+    }
+
+    // Collapsed rail ONLY (icon-collapse mode AND actually collapsed, i.e.
+    // body.sidebar-hidden): drop the frame, icon-only, matching link padding so
+    // the icon lands in the same column as every other sidebar icon. Must be
+    // gated by .sidebar-hidden — .pc-layout__sidebar--icon-collapse is the MODE
+    // class and stays on the element while the rail is expanded, so an unscoped
+    // rule would strip the search frame in the expanded state too.
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse & {
+      width: auto;
+      margin: 0;
+      padding: $sidebar-padding;
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+    }
+
+    // Type-and-go variant: the framed row hosts a <form> whose native GET submit
+    // redirects to a results page on Enter — instead of a button that opens the
+    // palette. A single text field submits on Enter with no submit button; the
+    // magnifier is a type="submit" so that in icon-collapse mode (field hidden)
+    // clicking it still submits — an empty query lands on the bare results page.
+    // Keeps the base $sidebar-padding frame untouched so the outer box is
+    // identical to the trigger button; the submit icon mirrors .pc-sidebar__icon
+    // (fixed size, line-height 1) so it drives the row height exactly like a link,
+    // and the borderless field just fills the rest. (Don't feed $sidebar-padding —
+    // a two-value 0.5rem/1rem token — to padding-block: it maps to top/bottom and
+    // inflates the box.)
+    &--input {
+      cursor: text;
+
+      .pc-sidebar__search-icon {
+        width: $sidebar-icon-size;
+        min-width: $sidebar-icon-size;
+        height: $sidebar-icon-size;
+        flex-shrink: 0;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        color: inherit;
+        // Masked magnifier painted in currentColor — was a 🔍 text emoji, which
+        // rendered inconsistently across platforms/fonts (the same reason the
+        // sidebar chevron is masked above). Reads the shared --base-icon-search
+        // so it matches pure-admin's .pa-icon--search and the navbar search;
+        // #{$base-icon-search} is the standalone literal fallback. font-size:0
+        // collapses any legacy 🔍 still in markup so it never double-renders.
+        font-size: 0;
+        background-color: currentColor;
+        -webkit-mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
+                mask: var(--base-icon-search, #{$base-icon-search}) center / #{$font-size-base} no-repeat;
+      }
+
+      .pc-sidebar__search-field {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        // The field shows through to the framed box's --base-input-bg surface,
+        // so its text must use the input text colour (--base-input-color), not
+        // the sidebar text colour. --pc-sidebar-text is tuned for the sidebar
+        // surface, which can be mode-independent (express: always-black sidebar
+        // → white sidebar text) and then renders white-on-white on a light
+        // input bg. --base-input-color is emitted per-mode alongside
+        // --base-input-bg, so the pair is always legible.
+        color: var(--base-input-color);
+        font: inherit;
+        padding: 0;
+
+        &::placeholder {
+          color: var(--pc-text-color-2);
+          opacity: $opacity-muted;
+        }
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button {
+          -webkit-appearance: none;
+        }
+      }
+    }
+
+    // Collapsed rail ONLY: the input variant sheds its field and centres on the
+    // submit icon; clicking it submits with an empty query (the bare results
+    // page). Gated by .sidebar-hidden so the field reappears when the icon-collapse
+    // rail is expanded (see frame rule above for why the mode class isn't enough).
+    .sidebar-hidden .pc-layout__sidebar--icon-collapse &--input {
+      justify-content: center;
+
+      .pc-sidebar__search-field {
+        display: none;
+      }
+    }
+  }
+
+  &__toggle {
+    // For submenu toggle buttons (non-link items)
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pc-sidebar-text-secondary, var(--base-text-color-2));
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: start; // RTL: flips to right
+    font-weight: $font-weight-medium;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--pc-sidebar-text, var(--base-text-color-1));
+      background-color: var(--pc-accent-light);
+    }
+
+    &--active {
+      color: var(--pc-accent);
+      background-color: var(--pc-accent-hover);
+    }
+  }
+
+  // Icon and label styles
+  &__icon {
+    width: $sidebar-icon-size;
+    min-width: $sidebar-icon-size;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    text-align: center;
+    line-height: 1; // Prevent emoji baseline shift
+  }
+
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    body.loaded & {
+      transition: opacity $transition-normal $easing-snappy, width $transition-normal $easing-snappy;
+    }
+  }
+
+  // Submenu styles - Level 2
+  &__submenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: none;
+    background-color: var(--pc-sidebar-submenu-bg, var(--base-subtle-bg));
+
+    &--open {
+      display: block;
+    }
+  }
+
+  // Level 2 submenu links
+  &__submenu > &__item > &__link {
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
+    font-size: $font-size-md;
+    border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
+
+    &:hover {
+      background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-hover-bg));
+    }
+
+    &--active {
+      background-color: var(--pc-sidebar-submenu-active-bg, var(--base-active-bg));
+      color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
+      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
+    }
+  }
+
+  // Level 2 submenu toggles (for third level)
+  &__submenu > &__item > &__toggle {
+    padding-inline-start: $sidebar-submenu-indent; // RTL: flips to padding-right
+    font-size: $font-size-md;
+  }
+
+  // Level 3 submenu links
+  &__submenu &__submenu > &__item > &__link {
+    padding-inline-start: calc($sidebar-submenu-indent * $sidebar-submenu-indent-multiplier); // RTL: flips
+    font-size: $font-size-sm;
+    border-inline-end: $border-width-base solid transparent; // RTL: flips to border-left
+
+    &--active {
+      border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
+    }
+  }
+
+  // Chevron icon for toggle buttons. Rendered as an SVG mask painted in
+  // currentColor (was a bare "›" text glyph, which rendered inconsistently
+  // across platforms/fonts). Reads the shared --base-icon-chevron so it aligns
+  // with pure-admin + the web components; --pa-icon-chevron (core) lets pure-admin
+  // override, and #{$base-icon-chevron} is the standalone literal fallback.
+  // `font-size: 0` collapses any legacy "›" still present in older markup so it
+  // never double-renders alongside the mask.
+  &__chevron {
+    margin-inline-start: auto; // RTL: flips to margin-right: auto
+    inline-size: 1.6rem;
+    block-size: 1.6rem;
+    flex-shrink: 0;
+    font-size: 0;
+    background-color: currentColor;
+    -webkit-mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
+            mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
+
+    body.loaded & {
+      transition: transform $transition-fast $easing-snappy;
+    }
+
+    // Chevron points right (›) in LTR, left (‹) in RTL
+    // When open, rotates 90deg clockwise in LTR, -90deg (counter-clockwise) in RTL.
+    // Scoped to the item's OWN chevron (direct toggle child) — a plain descendant
+    // selector would also rotate nested items' chevrons whenever an ANCESTOR is
+    // open, so a closed sub-group would wrongly show a "down" chevron.
+    .pc-sidebar__item--open > .pc-sidebar__toggle > & {
+      transform: rotate(90deg);
+    }
+
+    [dir="rtl"] .pc-sidebar__item--open > .pc-sidebar__toggle > & {
+      transform: rotate(-90deg);
+    }
+  }
+}