m3-svelte 4.0.0-beta.0 → 4.0.0-beta.1

package/package/buttons/Button.svelte

@@ -13,7 +13,7 @@
     | ({ href: string } & HTMLAnchorAttributes)
     | ({ for: string } & HTMLLabelAttributes);
   type Props = {
-    variant: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
     children: Snippet;
@@ -24,7 +24,7 @@
 
 {#if "click" in props}
   {@const {
-    variant,
+    variant = "filled",
     click,
     disabled,
     square = false,
@@ -39,29 +39,43 @@
     class:square
     {...extra}
   >
-    <Layer morph />
+    <Layer />
     {@render children()}
   </button>
 {:else if "href" in props}
-  {@const { variant, href, square = false, iconType = "none", children, ...extra } = props}
+  {@const {
+    variant = "filled",
+    href,
+    square = false,
+    iconType = "none",
+    children,
+    ...extra
+  } = props}
   <a
     {href}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}
   >
-    <Layer morph />
+    <Layer />
     {@render children()}
   </a>
 {:else}
-  {@const { variant, for: forItem, square = false, iconType = "none", children, ...extra } = props}
+  {@const {
+    variant = "filled",
+    for: forItem,
+    square = false,
+    iconType = "none",
+    children,
+    ...extra
+  } = props}
   <label
     for={forItem}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}
   >
-    <Layer morph />
+    <Layer />
     {@render children()}
   </label>
 {/if}
@@ -82,6 +96,7 @@
 
     align-items: center;
     justify-content: center;
+    background-color: transparent;
     cursor: pointer;
     user-select: none;
     position: relative;
@@ -143,7 +158,6 @@
       background-color: transparent;
     }
     &.text:not(:disabled, :global(input:disabled) + label) {
-      background-color: transparent;
       color: rgb(var(--m3-scheme-primary));
     }
     @media (hover: hover) {

package/package/buttons/Button.svelte.d.ts

@@ -9,7 +9,7 @@ type ActionProps = ({
     for: string;
 } & HTMLLabelAttributes);
 type Props = {
-    variant: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
     iconType?: "none" | "left" | "full";
     children: Snippet;

package/package/buttons/TogglePrimitive.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Button from "./Button.svelte";
+
+  let {
+    toggle = $bindable(),
+    variant,
+    round = false,
+    children,
+  }: {
+    toggle: boolean;
+    variant?: "filled" | "tonal";
+    round?: boolean;
+    children: Snippet;
+  } = $props();
+  const id = crypto.randomUUID();
+</script>
+
+<input type="checkbox" {id} bind:checked={toggle} />
+<Button for={id} {variant} square={!round} {children} />

package/package/buttons/TogglePrimitive.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    toggle: boolean;
+    variant?: "filled" | "tonal";
+    round?: boolean;
+    children: Snippet;
+};
+declare const TogglePrimitive: import("svelte").Component<$$ComponentProps, {}, "toggle">;
+type TogglePrimitive = ReturnType<typeof TogglePrimitive>;
+export default TogglePrimitive;

package/package/index.d.ts

@@ -8,6 +8,7 @@ export * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
+export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";
@@ -34,12 +35,8 @@ export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
 export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
 export { default as Chip } from "./forms/Chip.svelte";
-export { default as NavDrawer } from "./nav/NavDrawer.svelte";
-export { default as NavDrawerButton } from "./nav/NavDrawerButton.svelte";
-export { default as NavDrawerLink } from "./nav/NavDrawerLink.svelte";
-export { default as NavList } from "./nav/NavList.svelte";
-export { default as NavListButton } from "./nav/NavListButton.svelte";
-export { default as NavListLink } from "./nav/NavListLink.svelte";
+export { default as NavCMLX } from "./nav/NavCMLX.svelte";
+export { default as NavCMLXItem } from "./nav/NavCMLXItem.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";

package/package/index.js

@@ -8,6 +8,7 @@ export * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
+export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";
@@ -33,12 +34,8 @@ export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
 export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
 export { default as Chip } from "./forms/Chip.svelte";
-export { default as NavDrawer } from "./nav/NavDrawer.svelte";
-export { default as NavDrawerButton } from "./nav/NavDrawerButton.svelte";
-export { default as NavDrawerLink } from "./nav/NavDrawerLink.svelte";
-export { default as NavList } from "./nav/NavList.svelte";
-export { default as NavListButton } from "./nav/NavListButton.svelte";
-export { default as NavListLink } from "./nav/NavListLink.svelte";
+export { default as NavCMLX } from "./nav/NavCMLX.svelte";
+export { default as NavCMLXItem } from "./nav/NavCMLXItem.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";

package/package/misc/Layer.svelte

@@ -2,8 +2,6 @@
   import Ripple from "./_ripple.svelte";
   import RippleSimple from "./_ripplesimple.svelte";
 
-  let { morph = false }: { morph?: boolean } = $props();
-
   let ripple = $state(RippleSimple);
   if (
     // @ts-expect-error about M3_SVELTE_NO_RIPPLE
@@ -16,4 +14,4 @@
   const Component = $derived(ripple);
 </script>
 
-<Component {morph} />
+<Component />

package/package/misc/Layer.svelte.d.ts

@@ -1,6 +1,3 @@
-type $$ComponentProps = {
-    morph?: boolean;
-};
-declare const Layer: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Layer: import("svelte").Component<Record<string, never>, {}, "">;
 type Layer = ReturnType<typeof Layer>;
 export default Layer;

package/package/misc/_ripple.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { parseSize } from "./utils";
-
-  let { morph }: { morph: boolean } = $props();
-
   let cancelRipples: (() => void)[] = $state([]);
 
   const createRipple = (node: HTMLDivElement) => {

package/package/misc/_ripple.svelte.d.ts

@@ -1,6 +1,3 @@
-type $$ComponentProps = {
-    morph: boolean;
-};
-declare const Ripple: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Ripple: import("svelte").Component<Record<string, never>, {}, "">;
 type Ripple = ReturnType<typeof Ripple>;
 export default Ripple;

package/package/misc/_ripplesimple.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  let _: { morph: boolean } = $props();
-</script>
+<svelte:options runes />
 
 <div class="tint"></div>
 

package/package/misc/_ripplesimple.svelte.d.ts

@@ -1,6 +1,6 @@
-type $$ComponentProps = {
-    morph: boolean;
-};
-declare const Ripplesimple: import("svelte").Component<$$ComponentProps, {}, "">;
-type Ripplesimple = ReturnType<typeof Ripplesimple>;
 export default Ripplesimple;
+type Ripplesimple = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Ripplesimple: import("svelte").Component<Record<string, never>, {}, "">;

package/package/nav/NavCMLX.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    variant,
+    children,
+  }: {
+    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    children: Snippet;
+  } = $props();
+</script>
+
+<nav class="m3-container {variant}">
+  {@render children()}
+</nav>
+
+<style>
+  .m3-container {
+    display: flex;
+    &.compact,
+    &.medium {
+      background-color: rgb(var(--m3-scheme-surface-container));
+    }
+    &.compact {
+      justify-content: space-evenly;
+    }
+    &.medium {
+      justify-content: center;
+    }
+    &.large,
+    &.expanded {
+      flex-direction: column;
+    }
+    &.large {
+      width: 6rem;
+      gap: 0.25rem;
+    }
+    &.expanded {
+      padding-top: 1.25rem;
+      min-width: 13.75rem;
+      max-width: 22.5rem;
+    }
+  }
+  .m3-container.auto {
+    @media (width < 37.5rem) {
+      /* Compact */
+      background-color: rgb(var(--m3-scheme-surface-container));
+      justify-content: space-evenly;
+    }
+    @media (37.5rem <= width < 52.5rem) {
+      /* Medium */
+      background-color: rgb(var(--m3-scheme-surface-container));
+      justify-content: center;
+    }
+    @media (52.5rem <= width < 100rem) {
+      /* Large */
+      gap: 0.25rem;
+      flex-direction: column;
+      width: 6rem;
+    }
+    @media (100rem <= width) {
+      /* Expanded */
+      flex-direction: column;
+      padding-top: 1.25rem;
+      min-width: 13.75rem;
+      max-width: 22.5rem;
+    }
+  }
+</style>

package/package/nav/NavCMLX.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    children: Snippet;
+};
+declare const NavCmlx: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavCmlx = ReturnType<typeof NavCmlx>;
+export default NavCmlx;

package/package/nav/NavCMLXItem.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+  import type { IconifyIcon } from "@iconify/types";
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import Icon from "../misc/_icon.svelte";
+  import Layer from "../misc/Layer.svelte";
+
+  type ActionProps =
+    | ({ click: () => void } & HTMLButtonAttributes)
+    | ({ href: string } & HTMLAnchorAttributes);
+  let props: {
+    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    icon: IconifyIcon;
+    text: string;
+    selected: boolean;
+  } & ActionProps = $props();
+</script>
+
+{#if "click" in props}
+  {@const { variant, icon, text, selected, click, ...extra } = props}
+  <button
+    onclick={click}
+    class="m3-container m3-font-label-medium {variant}"
+    class:selected
+    {...extra}
+  >
+    <div class="content">
+      <Layer />
+      <div class="icon">
+        <Icon {icon} width="1.5rem" height="1.5rem" />
+      </div>
+      {text}
+    </div>
+  </button>
+{:else}
+  {@const { variant, icon, text, selected, href, ...extra } = props}
+  <a {href} class="m3-container m3-font-label-medium {variant}" {...extra}>
+    <div class="content" class:selected>
+      <Layer />
+      <div class="icon">
+        <Icon {icon} width="1.5rem" height="1.5rem" />
+      </div>
+      {text}
+    </div>
+  </a>
+{/if}
+
+<style>
+  .m3-container {
+    display: flex;
+
+    .content {
+      display: flex;
+      gap: 0.25rem;
+      align-items: center;
+      position: relative;
+      color: rgb(var(--m3-scheme-on-surface-variant));
+      transition: all var(--m3-util-easing);
+      &:is(.compact .content, .large .content) {
+        flex-direction: column;
+        &.selected {
+          color: rgb(var(--m3-scheme-secondary));
+          > .icon {
+            color: rgb(var(--m3-scheme-on-secondary-container));
+          }
+          > .icon::before {
+            opacity: 1;
+            width: 100%;
+            inset: 0;
+            transition:
+              width var(--m3-util-easing-fast-spatial),
+              inset var(--m3-util-easing-fast-spatial);
+          }
+        }
+        &:hover {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+          }
+        }
+        &:focus-visible,
+        &:active {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+          }
+        }
+        > .icon {
+          width: 3.5rem;
+          height: 2rem;
+        }
+        > :global(:is(.ripple-container, .tint)) {
+          display: none;
+        }
+      }
+      &:is(.medium .content, .expanded .content) {
+        padding-inline: 1rem;
+        border-radius: var(--m3-util-rounding-full);
+        &.selected {
+          background-color: rgb(var(--m3-scheme-secondary-container));
+          color: rgb(var(--m3-scheme-on-secondary-container));
+        }
+      }
+      &:is(.expanded .content) {
+        gap: 0.75rem;
+      }
+    }
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--m3-util-rounding-full);
+      position: relative;
+      transition: all var(--m3-util-easing);
+    }
+    .icon::before {
+      position: absolute;
+      display: block;
+      content: " ";
+      background-color: rgb(var(--m3-scheme-secondary-container));
+
+      opacity: 0;
+      inset: 0 50%;
+      width: 0;
+      border-radius: 2rem;
+      transition:
+        opacity var(--m3-util-easing),
+        inset 0ms 500ms,
+        width 0ms 500ms;
+    }
+    .icon > :global(svg) {
+      z-index: 1;
+    }
+    &.compact {
+      flex-direction: column;
+      height: 4rem;
+      padding-block: 0.375rem;
+    }
+    &.medium {
+      height: 4rem;
+      padding-block: 0.75rem;
+    }
+    &.large {
+      flex-direction: column;
+      height: 4rem;
+      padding-block: 0.375rem;
+    }
+    &.expanded {
+      height: 3.5rem;
+      padding-inline: 1.25rem;
+      font-size: var(--m3-font-label-large-size, 0.875rem);
+      line-height: var(--m3-font-label-large-height, 1.429);
+      letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+      font-weight: var(--m3-font-label-large-weight, 500);
+    }
+  }
+
+  .m3-container.auto {
+    @media (width < 37.5rem) {
+      /* Compact */
+      flex-direction: column;
+      height: 4rem;
+      padding-block: 0.375rem;
+
+      .content {
+        flex-direction: column;
+
+        &.selected {
+          color: rgb(var(--m3-scheme-secondary));
+          > .icon {
+            color: rgb(var(--m3-scheme-on-secondary-container));
+          }
+          > .icon::before {
+            opacity: 1;
+            width: 100%;
+            inset: 0;
+            transition:
+              width var(--m3-util-easing-fast-spatial),
+              inset var(--m3-util-easing-fast-spatial);
+          }
+        }
+
+        &:hover {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+          }
+        }
+
+        &:focus-visible,
+        &:active {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+          }
+        }
+
+        > .icon {
+          width: 3.5rem;
+          height: 2rem;
+        }
+
+        > :global(:is(.ripple-container, .tint)) {
+          display: none;
+        }
+      }
+    }
+    @media (37.5rem <= width < 52.5rem) {
+      /* Medium */
+      height: 4rem;
+      padding-block: 0.75rem;
+
+      .content {
+        padding-inline: 1rem;
+        border-radius: var(--m3-util-rounding-full);
+
+        &.selected {
+          background-color: rgb(var(--m3-scheme-secondary-container));
+          color: rgb(var(--m3-scheme-on-secondary-container));
+        }
+      }
+    }
+    @media (52.5rem <= width < 100rem) {
+      /* Large */
+      flex-direction: column;
+      height: 4rem;
+      padding-block: 0.375rem;
+
+      .content {
+        flex-direction: column;
+
+        &.selected {
+          color: rgb(var(--m3-scheme-secondary));
+          > .icon {
+            color: rgb(var(--m3-scheme-on-secondary-container));
+          }
+          > .icon::before {
+            opacity: 1;
+            width: 100%;
+            inset: 0;
+            transition:
+              width var(--m3-util-easing-fast-spatial),
+              inset var(--m3-util-easing-fast-spatial);
+          }
+        }
+
+        &:hover {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+          }
+        }
+
+        &:focus-visible,
+        &:active {
+          > .icon {
+            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+          }
+        }
+
+        > .icon {
+          width: 3.5rem;
+          height: 2rem;
+        }
+
+        > :global(:is(.ripple-container, .tint)) {
+          display: none;
+        }
+      }
+    }
+    @media (100rem <= width) {
+      /* Expanded */
+      height: 3.5rem;
+      padding-inline: 1.25rem;
+      font-size: var(--m3-font-label-large-size, 0.875rem);
+      line-height: var(--m3-font-label-large-height, 1.429);
+      letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
+      font-weight: var(--m3-font-label-large-weight, 500);
+
+      .content {
+        padding-inline: 1rem;
+        border-radius: var(--m3-util-rounding-full);
+        gap: 0.75rem;
+
+        &.selected {
+          background-color: rgb(var(--m3-scheme-secondary-container));
+          color: rgb(var(--m3-scheme-on-secondary-container));
+        }
+      }
+    }
+  }
+</style>

package/package/nav/NavCMLXItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { IconifyIcon } from "@iconify/types";
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type ActionProps = ({
+    click: () => void;
+} & HTMLButtonAttributes) | ({
+    href: string;
+} & HTMLAnchorAttributes);
+type $$ComponentProps = {
+    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    icon: IconifyIcon;
+    text: string;
+    selected: boolean;
+} & ActionProps;
+declare const NavCmlxItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavCmlxItem = ReturnType<typeof NavCmlxItem>;
+export default NavCmlxItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {

package/package/nav/NavDrawer.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  let {
-    children,
-  }: {
-    children: Snippet;
-  } = $props();
-</script>
-
-<nav class="m3-container">
-  {@render children()}
-</nav>
-
-<style>
-  .m3-container {
-    display: flex;
-    flex-direction: column;
-    width: 22.5rem;
-    padding: 1rem 0.75rem 0 0.75rem;
-    background-color: rgb(var(--m3-scheme-surface));
-  }
-</style>

package/package/nav/NavDrawer.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    children: Snippet;
-};
-declare const NavDrawer: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavDrawer = ReturnType<typeof NavDrawer>;
-export default NavDrawer;

package/package/nav/NavDrawerButton.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
-  import Layer from "../misc/Layer.svelte";
-
-  let {
-    selected,
-    icon,
-    children,
-    click,
-    ...extra
-  }: {
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    click: () => void;
-  } & HTMLButtonAttributes = $props();
-</script>
-
-<button class="destination" disabled={selected} onclick={click} {...extra}>
-  <Layer />
-  <Icon {icon} />
-  <span class="m3-font-label-large">{@render children()}</span>
-</button>
-
-<style>
-  .destination {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    position: relative;
-    overflow: hidden;
-
-    height: 3.5rem;
-    border: none;
-    border-radius: 1.75rem;
-    padding: 0 1.5rem 0 1rem;
-
-    background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    transition: all 300ms;
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-  .destination :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  @media (hover: hover) {
-    .destination:hover {
-      color: rgb(var(--m3-scheme-on-surface));
-    }
-  }
-
-  .destination:disabled {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
-    cursor: auto;
-  }
-
-  .destination {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .destination:disabled {
-      background-color: selecteditem;
-    }
-  }
-</style>

package/package/nav/NavDrawerButton.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type { IconifyIcon } from "@iconify/types";
-type $$ComponentProps = {
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    click: () => void;
-} & HTMLButtonAttributes;
-declare const NavDrawerButton: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavDrawerButton = ReturnType<typeof NavDrawerButton>;
-export default NavDrawerButton;

package/package/nav/NavDrawerLink.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-  import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
-  import Layer from "../misc/Layer.svelte";
-
-  let {
-    selected,
-    icon,
-    children,
-    href,
-    ...extra
-  }: {
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    href: string;
-  } & HTMLAnchorAttributes = $props();
-</script>
-
-<a {href} class="destination" class:selected {...extra}>
-  <Layer />
-  <Icon {icon} />
-  <span class="m3-font-label-large">{@render children?.()}</span>
-</a>
-
-<style>
-  .destination {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    position: relative;
-    overflow: hidden;
-
-    height: 3.5rem;
-    border-radius: 1.75rem;
-    padding: 0 1.5rem 0 1rem;
-
-    background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    transition: all 300ms;
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-  .destination :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  @media (hover: hover) {
-    .destination:hover {
-      color: rgb(var(--m3-scheme-on-surface));
-    }
-  }
-
-  .destination.selected {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  .destination {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .destination.selected {
-      background-color: selecteditem;
-    }
-  }
-</style>

package/package/nav/NavDrawerLink.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes } from "svelte/elements";
-import type { IconifyIcon } from "@iconify/types";
-type $$ComponentProps = {
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    href: string;
-} & HTMLAnchorAttributes;
-declare const NavDrawerLink: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavDrawerLink = ReturnType<typeof NavDrawerLink>;
-export default NavDrawerLink;

package/package/nav/NavList.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  let {
-    variant,
-    children,
-  }: {
-    variant: "rail" | "bar" | "auto";
-    children: Snippet;
-  } = $props();
-</script>
-
-<nav class="m3-container {variant}">
-  {@render children()}
-</nav>
-
-<style>
-  .m3-container {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-    background-color: rgb(var(--m3-scheme-surface-container));
-    padding: 0.75rem 0.5rem 1rem 0.5rem;
-    justify-content: space-evenly;
-    gap: 0.5rem;
-  }
-
-  .rail {
-    background-color: rgb(var(--m3-scheme-surface));
-    flex-direction: column;
-    width: 5rem;
-    padding: 3.5rem 0;
-    justify-content: flex-start;
-    gap: 0.75rem;
-  }
-  @media (min-width: 37.5rem) {
-    .auto {
-      background-color: rgb(var(--m3-scheme-surface));
-      flex-direction: column;
-      width: 5rem;
-      padding: 3.5rem 0;
-      justify-content: flex-start;
-      gap: 0.75rem;
-    }
-  }
-</style>

package/package/nav/NavList.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    variant: "rail" | "bar" | "auto";
-    children: Snippet;
-};
-declare const NavList: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavList = ReturnType<typeof NavList>;
-export default NavList;

package/package/nav/NavListButton.svelte

@@ -1,136 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
-
-  let {
-    variant,
-    selected,
-    icon,
-    children,
-    click,
-    ...extra
-  }: {
-    variant: "rail" | "bar" | "auto";
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    click: () => void;
-  } & HTMLButtonAttributes = $props();
-</script>
-
-<button class="m3-container {variant}" class:selected onclick={click} {...extra}>
-  <div class="icon-space">
-    <Icon {icon} />
-  </div>
-  <p class="m3-font-label-medium">{@render children()}</p>
-</button>
-
-<style>
-  .m3-container {
-    display: flex;
-    flex-direction: column;
-    height: 3.25rem;
-    gap: 0.25rem;
-    padding: 0;
-    border: none;
-    align-items: stretch;
-    text-align: center;
-
-    background-color: transparent;
-    --text: var(--m3-scheme-on-surface-variant);
-    color: rgb(var(--text));
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-  .icon-space {
-    display: flex;
-    flex: none;
-    align-self: center;
-    justify-content: center;
-    align-items: center;
-
-    position: relative;
-    width: 4rem;
-    height: 2rem;
-    border-radius: 2rem;
-    transition: background-color 200ms;
-  }
-  .icon-space::before {
-    position: absolute;
-    display: block;
-    content: " ";
-    background-color: rgb(var(--m3-scheme-secondary-container));
-
-    opacity: 0;
-    inset: 0 50%;
-    width: 0;
-    border-radius: 2rem;
-    transition:
-      opacity 200ms,
-      inset 0ms 200ms,
-      width 0ms 200ms;
-  }
-  .icon-space > :global(svg) {
-    z-index: 1;
-    width: 1.5rem;
-    height: 1.5rem;
-    transition: color 200ms;
-  }
-  p {
-    margin: 0;
-    transition: color 200ms;
-  }
-
-  .rail {
-    height: 3.5rem;
-  }
-  .rail > .icon-space {
-    width: 3.5rem;
-  }
-  @media (min-width: 37.5rem) {
-    .auto {
-      height: 3.5rem;
-    }
-    .auto > .icon-space {
-      width: 3.5rem;
-    }
-  }
-
-  .selected {
-    --text: var(--m3-scheme-on-surface);
-  }
-  .selected > .icon-space::before {
-    opacity: 1;
-    inset: 0 0;
-    width: 100%;
-    transition:
-      width var(--m3-util-easing-fast-spatial),
-      inset var(--m3-util-easing-fast-spatial);
-  }
-  .selected > .icon-space > :global(svg) {
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  @media (hover: hover) {
-    .m3-container:hover > .icon-space {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  .m3-container:focus-visible > .icon-space,
-  .m3-container:active > .icon-space {
-    background-color: rgb(var(--text) / 0.12);
-  }
-
-  .selected {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .icon-space::before {
-      background-color: selecteditem;
-      color: selecteditemtext;
-    }
-  }
-</style>

package/package/nav/NavListButton.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type { IconifyIcon } from "@iconify/types";
-type $$ComponentProps = {
-    variant: "rail" | "bar" | "auto";
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    click: () => void;
-} & HTMLButtonAttributes;
-declare const NavListButton: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavListButton = ReturnType<typeof NavListButton>;
-export default NavListButton;

package/package/nav/NavListLink.svelte

@@ -1,134 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-  import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
-
-  let {
-    variant,
-    selected,
-    icon,
-    children,
-    href,
-    ...extra
-  }: {
-    variant: "rail" | "bar" | "auto";
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    href: string;
-  } & HTMLAnchorAttributes = $props();
-</script>
-
-<a class="m3-container {variant}" class:selected {href} {...extra}>
-  <div class="icon-space">
-    <Icon {icon} />
-  </div>
-  <p class="m3-font-label-medium">{@render children()}</p>
-</a>
-
-<style>
-  .m3-container {
-    display: flex;
-    flex-direction: column;
-    height: 3.25rem;
-    gap: 0.25rem;
-    padding: 0;
-    text-align: center;
-
-    background-color: transparent;
-    --text: var(--m3-scheme-on-surface-variant);
-    color: rgb(var(--text));
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-  .icon-space {
-    display: flex;
-    flex: none;
-    align-self: center;
-    justify-content: center;
-    align-items: center;
-
-    position: relative;
-    width: 4rem;
-    height: 2rem;
-    border-radius: 2rem;
-    transition: background-color 200ms;
-  }
-  .icon-space::before {
-    position: absolute;
-    display: block;
-    content: " ";
-    background-color: rgb(var(--m3-scheme-secondary-container));
-
-    opacity: 0;
-    inset: 0 50%;
-    width: 0;
-    border-radius: 2rem;
-    transition:
-      opacity 200ms,
-      inset 0ms 200ms,
-      width 0ms 200ms;
-  }
-  .icon-space > :global(svg) {
-    z-index: 1;
-    width: 1.5rem;
-    height: 1.5rem;
-    transition: color 200ms;
-  }
-  p {
-    margin: 0;
-    transition: color 200ms;
-  }
-
-  .rail {
-    height: 3.5rem;
-  }
-  .rail > .icon-space {
-    width: 3.5rem;
-  }
-  @media (min-width: 37.5rem) {
-    .auto {
-      height: 3.5rem;
-    }
-    .auto > .icon-space {
-      width: 3.5rem;
-    }
-  }
-
-  .selected {
-    --text: var(--m3-scheme-on-surface);
-  }
-  .selected > .icon-space::before {
-    opacity: 1;
-    inset: 0 0;
-    width: 100%;
-    transition:
-      width var(--m3-util-easing-fast-spatial),
-      inset var(--m3-util-easing-fast-spatial);
-  }
-  .selected > .icon-space > :global(svg) {
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  @media (hover: hover) {
-    .m3-container:hover > .icon-space {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  .m3-container:focus-visible > .icon-space,
-  .m3-container:active > .icon-space {
-    background-color: rgb(var(--text) / 0.12);
-  }
-
-  .selected {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .icon-space::before {
-      background-color: selecteditem;
-      color: selecteditemtext;
-    }
-  }
-</style>

package/package/nav/NavListLink.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes } from "svelte/elements";
-import type { IconifyIcon } from "@iconify/types";
-type $$ComponentProps = {
-    variant: "rail" | "bar" | "auto";
-    selected: boolean;
-    icon: IconifyIcon;
-    children: Snippet;
-    href: string;
-} & HTMLAnchorAttributes;
-declare const NavListLink: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavListLink = ReturnType<typeof NavListLink>;
-export default NavListLink;