diff --git a/eslint.config.js b/eslint.config.js index 2040136d..f8301bae 100644 --- a/eslint.config.js +++ b/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: { diff --git a/src/app.html b/src/app.html index 1fd2b6d6..7cd0777a 100644 --- a/src/app.html +++ b/src/app.html @@ -4,10 +4,7 @@ - + %sveltekit.head% diff --git a/src/demos.md b/src/demos.md index 785f47f1..857752da 100644 --- a/src/demos.md +++ b/src/demos.md @@ -1195,3 +1195,73 @@ let errored = $state(false); {/if} {/snippet} ``` + +## Navigation Rail + +Minimal demo: + +```svelte + + {#snippet fab(open)} + alert("!")} /> + {/snippet} + + + + + + + + + +``` + +Full demo: + +```use +DateField +DateFieldOutlined +``` + +```ts +let collapse = $state<'full' | 'normal' | 'no'>('normal'); +let alignment = $state<'top' | 'center'>('center'); +let modal = $state(false); +``` + +```svelte + + + + +{#snippet demo()} + + {#snippet fab(open)} + {}} /> + {/snippet} + + + + + + + + + +{/snippet} +``` diff --git a/src/lib/buttons/FAB.svelte b/src/lib/buttons/FAB.svelte index 474739ed..bc2dfa25 100644 --- a/src/lib/buttons/FAB.svelte +++ b/src/lib/buttons/FAB.svelte @@ -19,6 +19,7 @@ let { color = "primary", elevation = "normal", + showLabel = "auto", size = "normal", icon, text, @@ -32,6 +33,7 @@ | "secondary" | "tertiary"; elevation?: "normal" | "lowered" | "none"; + showLabel?: boolean | "auto"; } & ContentProps & ButtonAttrs = $props(); @@ -39,15 +41,16 @@ diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte new file mode 100644 index 00000000..acff9f55 --- /dev/null +++ b/src/lib/nav/NavigationRailItem.svelte @@ -0,0 +1,203 @@ + + +{#if "href" in props} + + {@render item()} + +{:else} + +{/if} + +{#snippet item()} +
+ + +
+ +
+ + {label} +
+{/snippet} + + diff --git a/src/lib/nav/NavigationToggle.svelte b/src/lib/nav/NavigationToggle.svelte new file mode 100644 index 00000000..7bccb230 --- /dev/null +++ b/src/lib/nav/NavigationToggle.svelte @@ -0,0 +1,82 @@ + + + + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9e44e896..03a02e08 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -141,4 +141,4 @@ grid-column: 2; } } - + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc3eef57..a7042c01 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,5 @@ + + M3 Svelte + {#if doc && innerWidth.current && innerWidth.current >= 600} -
- (doc = undefined)}> +
+ doc = undefined}> {@render docs()}
+ + +
doc = undefined}>
{:else if doc} - (doc = undefined)}> + doc = undefined}> {@render docs()} {/if} @@ -113,18 +128,24 @@ grid-column: 1; } .sheet { + position: fixed; + z-index: 3; + inset: 0; + left: auto; display: flex; flex-direction: column; - width: 16rem; - margin-inline-start: 1rem; - border-inline-start: solid 1px rgb(var(--m3-scheme-outline)); - - position: sticky; - top: 0; - height: 100dvh; - overflow: auto; - grid-row: 1 / span 3; - grid-column: 2; + width: 20rem; + background: rgb(var(--m3-scheme-surface-container)); + border-top-left-radius: var(--m3-util-rounding-large); + border-bottom-left-radius: var(--m3-util-rounding-large); + } + + .shadow { + position: fixed; + z-index: 2; + inset: 0; + background: rgb(var(--m3-scheme-scrim) / 0.5); + transition: all 200ms; } @media (width >= 52.5rem) { diff --git a/src/routes/21.svelte b/src/routes/21.svelte new file mode 100644 index 00000000..66f35c9d --- /dev/null +++ b/src/routes/21.svelte @@ -0,0 +1,105 @@ + + + showCode("Navigation Rail", minimalDemo, relevantLinks)} +> + + + + + {#snippet demo()} +
+ + {#snippet fab(open)} + {}} /> + {/snippet} + + + + + + + + + +
+ {/snippet} + + + diff --git a/src/routes/theme/TransformChooser.svelte b/src/routes/theme/TransformChooser.svelte index 20da9b2c..1b23a2d6 100644 --- a/src/routes/theme/TransformChooser.svelte +++ b/src/routes/theme/TransformChooser.svelte @@ -131,6 +131,7 @@ .content { background-color: rgb(var(--m3-scheme-surface-container-low)); padding: 1rem; + width: calc(100% - 2rem); border-radius: 0.5rem; } @@ -138,6 +139,7 @@ display: flex; flex-direction: column; flex-wrap: wrap; + gap: 0.5rem; @media (min-width: 52.5rem) { flex-direction: row; diff --git a/static/llms.txt b/static/llms.txt index 8d2b5bd8..14e56647 100644 --- a/static/llms.txt +++ b/static/llms.txt @@ -1518,6 +1518,65 @@ let errored = $state(false);` to make this demo: {/snippet} ``` +### Navigation Rail + +Minimal demo: +```svelte + + {#snippet fab(open)} + alert("!")} /> + {/snippet} + + + + + + + + + +``` + +The M3 Svelte interactive demo for this component uses DateField, DateFieldOutlined with the TS `let collapse = $state<'full' | 'normal' | 'no'>('normal'); +let alignment = $state<'top' | 'center'>('center'); +let modal = $state(false);` to make this demo: +```svelte + + + + +{#snippet demo()} + + {#snippet fab(open)} + {}} /> + {/snippet} + + + + + + + + + +{/snippet} +``` + ## Addendum: more components ### Nav CMLX