New Navigation Rail Component

eslint.config.js

@@ -55,6 +55,12 @@ export default ts.config(
       "svelte/prefer-writable-derived": "off",
     },
   },
+  {
+    files: ["src/routes/*.svelte"],
+    rules: {
+      "svelte/prefer-writable-derived": "off",
+    },
+  },
   {
     files: ["src/routes/*.svelte"],
     rules: {

src/app.html

@@ -4,10 +4,7 @@
     <meta charset="utf-8" />
     <meta property="og:image" content="%sveltekit.assets%/og.png" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>

src/demos.md

@@ -1195,3 +1195,73 @@ let errored = $state(false);
   {/if}
 {/snippet}
 ```
+
+## Navigation Rail
+
+Minimal demo:
+
+```svelte
+<NavigationRail>
+  {#snippet fab(open)}
+    <FAB color="primary-container" icon={iconEdit} text={open ? "Label" : ""} onclick={() => alert("!")} />
+  {/snippet}
+
+  <NavigationRailItem label="Label" icon={iconStars} active />
+
+  <NavigationRailItem label="Label" icon={iconStarsOutline} />
+
+  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline, 3)} />
+
+  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline)} />
+</NavigationRail>
+```
+
+Full demo:
+
+```use
+DateField
+DateFieldOutlined
+```
+
+```ts
+let collapse = $state<'full' | 'normal' | 'no'>('normal');
+let alignment = $state<'top' | 'center'>('center');
+let modal = $state<boolean>(false);
+```
+
+```svelte
+<label>
+  <Switch bind:checked={modal} />
+  {modal ? "Modal" : "Normal"}
+</label>
+<label>
+  <Arrows list={['top', 'center']} bind:value={alignment} />
+  {alignment == "top"
+  ? "Top"
+  : "Center"}
+</label>
+<label>
+  <Arrows list={['normal', 'full', 'no']} bind:value={collapse} />
+  {collapse == "normal"
+  ? "Collapse"
+  : collapse == "full"
+    ? "Fully Collapse"
+    : "Don't Collapse"}
+</label>
+
+{#snippet demo()}
+  <NavigationRail {collapse} {alignment} {modal}>
+    {#snippet fab(open)}
+      <FAB color="primary-container" icon={iconEdit} text={open ? "Label" : ""} onclick={() => {}} />
+    {/snippet}
+
+    <NavigationRailItem label="Label" icon={iconStar} active />
+
+    <NavigationRailItem label="Label" icon={iconStarsOutline} />
+
+    <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline, 3)} />
+
+    <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline)} />
+  </NavigationRail>
+{/snippet}
+```

src/lib/buttons/FAB.svelte

@@ -19,6 +19,7 @@
   let {
     color = "primary",
     elevation = "normal",
+    showLabel = "auto",
     size = "normal",
     icon,
     text,
@@ -32,22 +33,24 @@
       | "secondary"
       | "tertiary";
     elevation?: "normal" | "lowered" | "none";
+    showLabel?: boolean | "auto";
   } & ContentProps &
     ButtonAttrs = $props();
 </script>
 
 <button
   type="button"
   class="m3-container m3-font-label-large color-{color} size-{size} elevation-{elevation}"
+  class:label={showLabel === null ? !!text : showLabel}
   {...extra}
 >
   <Layer />
   {#if icon}
-    <Icon {icon} />
-  {/if}
-  {#if text}
-    {text}
+    <div class="icon">
+      <Icon {icon} />
+    </div>
   {/if}
+  <span>{text}</span>
 </button>
 
 <style>
@@ -61,10 +64,31 @@
     border: none;
     position: relative;
     overflow: hidden;
+    flex-direction: row;
 
     align-items: center;
-    justify-content: center;
     cursor: pointer;
+    transition: width var(--m3-util-easing);
+  }
+
+  .m3-container > span {
+    transition: opacity var(--m3-util-easing-fast);
+  }
+
+  .m3-container.label {
+    width: max-content;
+  }
+
+  .m3-container:has(span:empty) {
+    gap: 0;
+  }
+
+  .m3-container.label > span {
+    opacity: 1;
+  }
+
+  .m3-container:not(.label) > span {
+    opacity: 0;
   }
 
   .elevation-normal {
@@ -76,28 +100,37 @@
 
   .size-small {
     height: 2.5rem;
+    width: 2.5rem;
     padding: 0.5rem;
     gap: 0.5rem;
     border-radius: var(--m3-fab-small-shape);
   }
+
   .size-normal {
     height: 3.5rem;
+    width: 3.5rem;
     padding: 1rem;
     gap: 0.75rem;
     border-radius: var(--m3-fab-normal-shape);
   }
+
   .size-large {
     height: 6rem;
+    width: 6rem;
     padding: 1.875rem;
     gap: 1.875rem;
     border-radius: var(--m3-fab-large-shape);
   }
-  .size-small > :global(svg),
-  .size-normal > :global(svg) {
+
+  .size-small > .icon > :global(svg),
+  .size-normal > .icon > :global(svg),
+  .size-small > .icon,
+  .size-normal > .icon {
     width: 1.5rem;
     height: 1.5rem;
   }
-  .size-large > :global(svg) {
+  .size-large > .icon > :global(svg),
+  .size-large > .icon {
     width: 2.25rem;
     height: 2.25rem;
   }

src/lib/index.ts

@@ -50,6 +50,8 @@ export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgres
 
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
+export { default as NavigationRail } from "./nav/NavigationRail.svelte";
+export { default as NavigationRailItem } from "./nav/NavigationRailItem.svelte";
 export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";

src/lib/misc/recommended-styles.css

@@ -36,4 +36,4 @@
 ::selection {
   background-color: rgb(var(--m3-scheme-tertiary-container));
   color: rgb(var(--m3-scheme-on-tertiary-container));
-}
+}

src/lib/misc/styles.css

@@ -1,5 +1,6 @@
 /* Needed for elevation to work */
 :root {
+  interpolate-size: allow-keywords;
   --m3-util-elevation-0: none;
   --m3-util-elevation-1:
     /* Spot */

src/lib/nav/NavigationRail.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import NavigationToggle from "./NavigationToggle.svelte";
+
+  let {
+    open = $bindable(false),
+    collapse = 'normal',
+    modal = false,
+    alignment = 'top',
+    fab,
+    children,
+  } = $props<{
+    open?: boolean;
+    collapse?: 'normal' | 'full' | 'no' | boolean;
+    modal?: boolean;
+    alignment?: 'top' | 'center';
+    fab?: Snippet<[open: boolean]>;
+    children: Snippet;
+  }>();
+
+  const onkeydown = (e: KeyboardEvent) => {
+    if (modal && open && e.key === 'Escape') {
+      e.preventDefault();
+
+      open = false;
+    }
+  }
+</script>
+
+<svelte:window {onkeydown} />
+
+<div class="m3-container">
+  <div class="rail" class:open={open && (collapse !== 'no' && collapse !== false)} class:centered={alignment === 'center'} class:fullyCollapse={collapse === 'full'} class:modal>
+    {#if (collapse !== 'no' && collapse !== false) || fab}
+      <div class="top">
+        {#if collapse !== 'no' && collapse !== false}
+          <NavigationToggle mode={collapse === 'full' ? 'inline-detached' : 'inline'} bind:active={open} />
+        {/if}
+
+        {#if fab}
+          <div>
+            {@render fab(open && (collapse !== 'no' && collapse !== false))}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="items" role="menu" aria-labelledby="m3-navigationtoggle">
+      {@render children()}
+    </div>
+  </div>
+
+  {#if modal}
+    <!--svelte-ignore a11y_no_static_element_interactions--><!--svelte-ignore a11y_click_events_have_key_events-->
+    <div class="shadow" onclick={() => open = false}></div>
+  {/if}
+</div>
+
+<style>
+  .m3-container {
+    width: 96px;
+    height: 100%;
+    transition: width var(--m3-util-easing-spatial);
+  }
+
+  .m3-container:has(>.rail.fullyCollapse) {
+    width: 0;
+  }
+
+  .rail.open,
+  .m3-container:has(>.rail.open:not(.modal)),
+  .rail.fullyCollapse {
+    width: 220px;
+  }
+
+  .rail {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    width: 96px;
+    height: 100%;
+    padding: 44px 0px 56px 0px;
+    transition: all var(--m3-util-easing-spatial);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  .rail:not(.open).fullyCollapse {
+    pointer-events: none;
+    width: 0px;
+  }
+
+  .rail:not(.open).fullyCollapse > .top > :not(:global(.toggle)),
+  .rail:not(.open).fullyCollapse > .items {
+    opacity: 0;
+  }
+
+  .rail.modal {
+    border-start-end-radius: var(--m3-util-rounding-large);
+    border-end-end-radius: var(--m3-util-rounding-large);
+  }
+
+  .rail.modal.open,
+  .rail:not(.modal) {
+    background: rgb(var(--m3-scheme-surface-container));
+  }
+
+  .top {
+    margin-inline: 20px;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 96px;
+    height: 100%;
+    align-self: stretch;
+    transition: gap var(--m3-util-easing-fast), width 0.2s;
+    height: 100%;
+  }
+
+  .rail.open > .items,
+  .rail.fullyCollapse > .items {
+    gap: 0px;
+    width: 220px;
+  }
+
+  .rail.centered > .items {
+    justify-content: center;
+  }
+
+  .shadow {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: rgb(var(--m3-scheme-scrim) / 0.5);
+    transition: opacity var(--m3-util-easing);
+  }
+
+  .rail:not(.open) + .shadow {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (width <= 300px) {
+    .rail.open {
+      border-radius: 0px !important;
+      width: 100vw;
+    }
+  }
+</style>