@scattered-light/loomiere-base-ui 0.9.0 → 0.10.0

package/dist/styles/custom/SideNav.css

@@ -0,0 +1,181 @@
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
+/* SideNav
+ *
+ * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
+ * current row (aria-current="page") sits on the raised surface with a rule under it in the
+ * working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a
+ * small round button on the column's edge, whose chevron turns with the state. The parent
+ * sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge.
+ * Tokens: side-nav.* (tokens/component/side-nav.json).
+ */
+
+.SideNav {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  padding-block: var(--sl-space-4);
+  background: var(--sl-side-nav-background);
+  border-inline-end: var(--sl-stroke-default) solid var(--sl-side-nav-border-color);
+}
+
+.SideNav[data-collapsed] {
+  min-width: var(--sl-side-nav-collapsed-width);
+}
+
+/* Collapsed: only the toggle stays. */
+.SideNav[data-collapsed] > :not(.SideNavToggle) {
+  display: none;
+}
+
+.SideNavItem {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-side-nav-item-gap);
+  min-height: var(--sl-side-nav-item-height);
+  padding-inline: var(--sl-side-nav-item-padding-inline);
+  color: var(--sl-side-nav-item-color);
+  text-decoration: none;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-side-nav-item-divider-color);
+  cursor: pointer;
+  transition: background var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.SideNavItemText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.SideNavItemLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.SideNavItemHint {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  color: var(--sl-side-nav-item-color-disabled);
+}
+
+.SideNavItem:hover:not([data-current]):not([data-disabled]) {
+  background: var(--sl-side-nav-item-background-hover);
+}
+
+.SideNavItem:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.SideNavItem[data-current] {
+  background: var(--sl-side-nav-item-background-current);
+  font-weight: var(--sl-font-weight-semibold);
+  box-shadow: inset 0 calc(-1 * var(--sl-side-nav-indicator-width)) 0 var(--sl-side-nav-indicator-color);
+}
+
+.SideNavItem[data-disabled] {
+  color: var(--sl-side-nav-item-color-disabled);
+  cursor: default;
+}
+
+.SideNavItemCount {
+  flex: none;
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-weight-semibold);
+  line-height: var(--sl-font-figures-condense-line-height);
+  color: var(--sl-side-nav-count-color);
+}
+
+.SideNavItemCount[data-tone='quiet'] {
+  color: var(--sl-side-nav-count-color-quiet);
+}
+
+.SideNavGroupLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  padding-top: var(--sl-side-nav-group-padding-top);
+  padding-bottom: var(--sl-space-1-5);
+  padding-inline: var(--sl-side-nav-item-padding-inline);
+  color: var(--sl-side-nav-group-label-color);
+}
+
+/* ============================================
+   COLLAPSE BUTTON
+   ============================================ */
+
+.SideNavToggle {
+  all: unset;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  top: var(--sl-side-nav-toggle-offset);
+  inset-inline-end: calc(-0.5 * var(--sl-side-nav-toggle-size));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-side-nav-toggle-size);
+  height: var(--sl-side-nav-toggle-size);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-side-nav-toggle-background);
+  border: var(--sl-stroke-default) solid var(--sl-side-nav-toggle-border-color);
+  color: var(--sl-text-secondary);
+  cursor: pointer;
+  transition: color var(--sl-duration-fast) var(--sl-easing-default),
+    border-color var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.SideNavToggle:hover {
+  color: var(--sl-text-primary);
+  border-color: var(--sl-text-primary);
+}
+
+.SideNavToggle:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+}
+
+.SideNavToggleIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+/* The chevron points the way the column will go: left to collapse, right to expand. */
+.SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
+  transform: rotate(180deg);
+}
+
+[dir='rtl'] .SideNavToggleIcon {
+  transform: scaleX(-1);
+}
+
+[dir='rtl'] .SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
+  transform: scaleX(-1) rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .SideNavToggleIcon,
+  .SideNavItem,
+  .SideNavToggle {
+    transition: none;
+  }
+}

package/dist/styles/custom/Splitter.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the

package/dist/styles/custom/StatFigure.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is

package/dist/styles/custom/Table.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -66,3 +66,4 @@
 @import './custom/DescriptionList.css';
 @import './custom/AppBar.css';
 @import './custom/PickerButton.css';
+@import './custom/SideNav.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {

package/dist/styles/reset/reset-accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */

package/dist/styles/reset/reset-tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/reset/reset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.10.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
      @import 'tailwindcss';
      @import '<your theme>/tokens.css';
@@ -69,3 +69,4 @@
 @import './custom/DescriptionList.css' layer(components);
 @import './custom/AppBar.css' layer(components);
 @import './custom/PickerButton.css' layer(components);
+@import './custom/SideNav.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
   "keywords": [
     "base-ui",
@@ -76,7 +76,7 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.9.0",
+    "@scattered-light/loomiere": "0.10.0",
     "@tanstack/react-table": "^9.3.1"
   }
 }