npm - @scattered-light/loomiere-mojave - Versions diffs - 0.17.0 → 0.18.0 - Mend

@scattered-light/loomiere-mojave 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/exports/design-system/components/SideNav/README.md CHANGED Viewed

@@ -12,7 +12,7 @@ Not a Base UI part, so there is no base-ui.com page for it.
 |---|---|
 | `SideNav` | `data-collapsed` |
 | `SideNavToggle` |   |
-| `SideNavItem` | `data-current`; `data-disabled` |
+| `SideNavItem` | `data-current`; `data-disabled`; `data-nested` |
 | `SideNavItemText` |   |
 | `SideNavItemLabel` |   |
 | `SideNavItemHint` |   |
@@ -51,6 +51,12 @@ export const Default: Story = {
             <SideNavItem current={current === 'accounts'} onClick={go('accounts')}>
               Financial Accounts
             </SideNavItem>
+            <SideNavItem nested current={current === 'checking'} onClick={go('checking')}>
+              Test Checking
+            </SideNavItem>
+            <SideNavItem nested current={current === 'savings'} onClick={go('savings')}>
+              Reserve Savings
+            </SideNavItem>
             <SideNavItem current={current === 'chart'} onClick={go('chart')}>
               Chart of Accounts
             </SideNavItem>

package/dist/exports/design-system/components/SideNav/preview.html CHANGED Viewed

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var C=Object.create;var l=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},D=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of I(t))!x.call(e,s)&&s!==n&&l(e,s,{get:()=>t[s],enumerable:!(r=E(t,s))||r.enumerable});return e};var S=(e,t,n)=>(n=e!=null?C(R(e)):{},D(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var N=v((L,y)=>{y.exports=window.React});var g=v((Q,f)=>{f.exports=window.Loomiere});var p={};k(p,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(N(),1),a=S(g(),1);var d=window.React;function o(e,t,n){let{children:r,...s}=t||{};return n!==void 0&&(s.key=n),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var T=d.Fragment;var A={title:"Components/Lib/SideNav",component:a.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,n]=m.useState(!1),[r,s]=m.useState("dashboard"),c=w=>b=>{b.preventDefault(),s(w)};return o("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:o(a.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[o(a.SideNavItem,{current:r==="dashboard",onClick:c("dashboard"),children:"Entity Dashboard"}),o(a.SideNavItem,{current:r==="open",count:5,onClick:c("open"),children:"Open Items"}),o(a.SideNavItem,{current:r==="review",count:2,onClick:c("review"),children:"For Review"}),o(a.SideNavGroup,{label:"Books",children:[o(a.SideNavItem,{current:r==="accounts",onClick:c("accounts"),children:"Financial Accounts"}),o(a.SideNavItem,{current:r==="chart",onClick:c("chart"),children:"Chart of Accounts"})]}),o(a.SideNavGroup,{label:"Coming later",children:o(a.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),o(a.SideNavToggle,{collapsed:t,onCollapsedChange:n})]})})}},O={render:()=>o("div",{style:{width:240},children:o(a.SideNav,{"aria-label":"Client navigation",children:[o(a.SideNavItem,{current:!0,children:"Client Dashboard"}),o(a.SideNavItem,{count:6,children:"Open Items"}),o(a.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var i=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=p[e],n={...h.args||{},...t.args||{}};return(t.render||(s=>i.createElement(h.component,s)))(n,{args:n,id:e,name:e})}var G=j.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
+(()=>{var b=Object.create;var l=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of E(t))!k.call(e,s)&&s!==o&&l(e,s,{get:()=>t[s],enumerable:!(r=I(t,s))||r.enumerable});return e};var S=(e,t,o)=>(o=e!=null?b(R(e)):{},D(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e));var g=p((B,y)=>{y.exports=window.React});var f=p((L,N)=>{N.exports=window.Loomiere});var v={};x(v,{Default:()=>F,QuietCount:()=>O,default:()=>u});var m=S(g(),1),n=S(f(),1);var d=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?d.createElement(e,s):Array.isArray(r)?d.createElement(e,s,...r):d.createElement(e,s,r)}var Q=d.Fragment;var A={title:"Components/Lib/SideNav",component:n.SideNav,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},u=A,F={render:function(){let[t,o]=m.useState(!1),[r,s]=m.useState("dashboard"),i=C=>w=>{w.preventDefault(),s(C)};return a("div",{style:{display:"flex",height:520,width:t?44:240,transition:"width 150ms"},children:a(n.SideNav,{"aria-label":"Entity navigation",collapsed:t,style:{width:"100%"},children:[a(n.SideNavItem,{current:r==="dashboard",onClick:i("dashboard"),children:"Entity Dashboard"}),a(n.SideNavItem,{current:r==="open",count:5,onClick:i("open"),children:"Open Items"}),a(n.SideNavItem,{current:r==="review",count:2,onClick:i("review"),children:"For Review"}),a(n.SideNavGroup,{label:"Books",children:[a(n.SideNavItem,{current:r==="accounts",onClick:i("accounts"),children:"Financial Accounts"}),a(n.SideNavItem,{nested:!0,current:r==="checking",onClick:i("checking"),children:"Test Checking"}),a(n.SideNavItem,{nested:!0,current:r==="savings",onClick:i("savings"),children:"Reserve Savings"}),a(n.SideNavItem,{current:r==="chart",onClick:i("chart"),children:"Chart of Accounts"})]}),a(n.SideNavGroup,{label:"Coming later",children:a(n.SideNavItem,{disabled:!0,hint:"Not yet available",children:"Invoicing"})}),a(n.SideNavToggle,{collapsed:t,onCollapsedChange:o})]})})}},O={render:()=>a("div",{style:{width:240},children:a(n.SideNav,{"aria-label":"Client navigation",children:[a(n.SideNavItem,{current:!0,children:"Client Dashboard"}),a(n.SideNavItem,{count:6,children:"Open Items"}),a(n.SideNavItem,{count:2,countTone:"quiet",children:"All Entities"})]})})};var c=window.React,h=u||{},j=["Default","QuietCount"];function M({id:e}){let t=v[e],o={...h.args||{},...t.args||{}};return(t.render||(s=>c.createElement(h.component,s)))(o,{args:o,id:e,name:e})}var G=j.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(M,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,G));})();
 </script>
 </body>

package/dist/exports/design-system/components/bundle.css CHANGED Viewed

@@ -6731,7 +6731,7 @@
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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';
@@ -6741,7 +6741,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 /* ============================================
@@ -7185,7 +7185,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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 */
@@ -7298,7 +7298,7 @@ main:focus {
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 :focus-visible {
@@ -7366,7 +7366,7 @@ button,
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7487,7 +7487,7 @@ button,
   overflow: hidden;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7496,7 +7496,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7698,7 +7698,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7806,7 +7806,7 @@ button,
   }
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7956,7 +7956,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8113,7 +8113,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8129,7 +8129,7 @@ button,
   pointer-events: none;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8245,7 +8245,7 @@ button,
   background: var(--sl-surface-raised);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8730,7 +8730,7 @@ button,
   color: var(--sl-text-tertiary);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8899,7 +8899,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -9045,7 +9045,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9178,7 +9178,7 @@ button,
   color: var(--sl-modal-description-color);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9239,7 +9239,7 @@ textarea.FieldControl {
   height: auto;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9281,7 +9281,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -9301,7 +9301,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9448,7 +9448,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9597,7 +9597,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9790,7 +9790,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9853,7 +9853,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10273,7 +10273,7 @@ textarea.FieldControl {
   width: 100%;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10364,7 +10364,7 @@ textarea.FieldControl {
   user-select: none;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10427,7 +10427,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 /* ============================================
@@ -10592,7 +10592,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10709,7 +10709,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10786,7 +10786,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -10938,7 +10938,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -11020,7 +11020,7 @@ textarea.FieldControl {
   background: transparent;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11305,7 +11305,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11333,7 +11333,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11499,7 +11499,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11665,7 +11665,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11801,7 +11801,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -12037,7 +12037,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12149,7 +12149,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12211,7 +12211,7 @@ textarea.FieldControl {
   outline-offset: var(--sl-focus-outline-offset-inset);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12273,7 +12273,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12334,7 +12334,7 @@ textarea.FieldControl {
 }
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12439,7 +12439,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -13012,7 +13012,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13357,7 +13357,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13484,7 +13484,7 @@ textarea.FieldControl {
   background: transparent;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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
@@ -13692,7 +13692,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13948,7 +13948,7 @@ textarea.FieldControl {
   color: inherit;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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
@@ -14225,7 +14225,7 @@ textarea.FieldControl {
   color: inherit;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14236,7 +14236,7 @@ textarea.FieldControl {
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14402,7 +14402,7 @@ textarea.FieldControl {
   border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14601,7 +14601,7 @@ textarea.FieldControl {
   }
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14743,7 +14743,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14768,7 +14768,7 @@ textarea.FieldControl {
   margin: 0;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14867,7 +14867,7 @@ textarea.FieldControl {
   }
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14966,7 +14966,7 @@ textarea.FieldControl {
   border-top: 0;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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
@@ -15027,7 +15027,7 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* StatCard
  *
  * A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
@@ -15146,7 +15146,7 @@ textarea.FieldControl {
   border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* DescriptionList
  *
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -15224,7 +15224,7 @@ textarea.FieldControl {
   text-align: end;
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* AppBar
  *
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -15258,7 +15258,7 @@ textarea.FieldControl {
   background: var(--sl-app-bar-divider-color);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* PickerButton
  *
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
@@ -15358,7 +15358,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.0 · styles for @base-ui/react 1.9.0 */
 /* PickerSplit
  *
  * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
@@ -15456,7 +15456,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
-/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.18.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
@@ -15544,6 +15544,15 @@ textarea.FieldControl {
   box-shadow: inset 0 calc(-1 * var(--sl-side-nav-indicator-width)) 0 var(--sl-side-nav-indicator-color);
 }
+/* A nested row is indented one step and set in regular weight, even when current. */
+.SideNavItem[data-nested] {
+  padding-inline-start: calc(var(--sl-side-nav-item-padding-inline) + var(--sl-space-4));
+}
+.SideNavItem[data-nested]:not([data-current]) {
+  font-weight: var(--sl-font-weight-normal);
+}
 .SideNavItem[data-disabled] {
   color: var(--sl-side-nav-item-color-disabled);
   cursor: default;