m3-svelte 3.6.1 → 4.0.0-beta.0

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "m3-svelte",
-  "version": "3.6.1",
+  "version": "4.0.0-beta.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
     "name": "KTibow"
   },
   "homepage": "https://github.com/KTibow/m3-svelte",
-  "keywords": [
-    "svelte",
-    "material",
-    "material 3",
-    "material you",
-    "m3",
-    "ui",
-    "frontend",
-    "design-system",
-    "ui-library",
-    "theming"
+  "files": [
+    "package",
+    "!package/**/*.test.*",
+    "!package/**/*.spec.*"
   ],
+  "svelte": "./package/index.js",
+  "types": "./package/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./package/index.d.ts",
@@ -31,48 +27,53 @@
       "import": "./package/misc/recommended-styles.css"
     }
   },
+  "dependencies": {
+    "@iconify/types": "^2.0.0",
+    "@ktibow/iconset-material-symbols": "^0.0.1747426012",
+    "@material/material-color-utilities": "^0.3.0",
+    "svelte": "^5.0.0"
+  },
   "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.2",
-    "@sveltejs/package": "^2.3.10",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.5.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
     "fast-glob": "^3.3.3",
     "globals": "^16.0.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte-check": "^4.1.5",
-    "svelte-highlight": "^7.8.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.4"
+    "publint": "^0.3.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-highlight": "^7.8.3",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
   },
-  "dependencies": {
-    "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1742538575",
-    "@material/material-color-utilities": "^0.3.0",
-    "svelte": "^5.25.6"
-  },
-  "files": [
-    "package"
+  "keywords": [
+    "svelte",
+    "material",
+    "material 3",
+    "material you",
+    "m3",
+    "ui",
+    "frontend",
+    "design-system",
+    "ui-library",
+    "theming"
   ],
-  "svelte": "./package/index.js",
-  "types": "./package/index.d.ts",
-  "type": "module",
   "sideEffects": false,
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package -o package",
-    "package-components": "vite build -c vite.config.lib.js",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && eslint",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
   }
 }

package/package/buttons/ButtonLink.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAnchorAttributes = {};
-  export let iconType: "none" | "left" | "full" = "none";
-  export let type: "elevated" | "filled" | "tonal" | "outlined" | "text";
-  export let href: string;
-</script>
-
-<a
-  {href}
-  class="m3-container m3-font-label-large {type} icon-{iconType}"
-  style="display: {display};"
-  {...extraOptions}
->
-  <Layer />
-  <slot />
-</a>
-
-<style>
-  :root {
-    --m3-button-shape: var(--m3-util-rounding-full);
-  }
-
-  .m3-container {
-    height: 2.5rem;
-    padding: 0 1.5rem;
-    border-radius: var(--m3-button-shape);
-    transition: all 200ms;
-
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-  }
-
-  .m3-container > :global(*) {
-    flex-shrink: 0;
-  }
-  .icon-left {
-    padding-left: 1rem;
-    gap: 0.5rem;
-  }
-  .icon-left > :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-  .icon-full {
-    width: 2.5rem;
-    padding: 0;
-  }
-  .icon-full > :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .m3-container.elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    color: rgb(var(--m3-scheme-primary));
-    box-shadow: var(--m3-util-elevation-1);
-  }
-
-  .m3-container.filled {
-    background-color: rgb(var(--m3-scheme-primary));
-    color: rgb(var(--m3-scheme-on-primary));
-  }
-
-  .m3-container.tonal {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  .m3-container.outlined {
-    background-color: transparent;
-    border: 0.0625rem solid rgb(var(--m3-scheme-outline));
-    color: rgb(var(--m3-scheme-primary));
-  }
-
-  .m3-container.text {
-    background-color: transparent;
-    padding: 0 0.75rem;
-    color: rgb(var(--m3-scheme-primary));
-  }
-  .m3-container.text.icon-left {
-    padding-right: 1rem;
-  }
-
-  .m3-container {
-    -webkit-tap-highlight-color: transparent;
-  }
-  @media (hover: hover) {
-    .m3-container.elevated:hover {
-      box-shadow: var(--m3-util-elevation-2);
-    }
-    .m3-container.filled:hover {
-      box-shadow: var(--m3-util-elevation-1);
-    }
-    .m3-container.tonal:hover {
-      box-shadow: var(--m3-util-elevation-1);
-    }
-  }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    .m3-container:is(.elevated, .filled, .tonal) {
-      background-color: transparent;
-      border: 0.0625rem solid;
-    }
-  }
-</style>

package/package/buttons/ButtonLink.svelte.d.ts

@@ -1,34 +0,0 @@
-import type { HTMLAnchorAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ButtonLink: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAnchorAttributes;
-    iconType?: "none" | "left" | "full";
-    type: "elevated" | "filled" | "tonal" | "outlined" | "text";
-    href: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ButtonLink = InstanceType<typeof ButtonLink>;
-export default ButtonLink;

package/package/buttons/SegmentedButtonContainer.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
-</script>
-
-<div class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
-</div>
-
-<style>
-  :root {
-    --m3-segmented-button-shape: var(--m3-util-rounding-full);
-  }
-
-  .m3-container {
-    border: 0.0625rem solid rgb(var(--m3-scheme-outline));
-    height: 2.5rem;
-    border-radius: var(--m3-segmented-button-shape);
-    overflow: hidden;
-  }
-  .m3-container > :global(input) {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-</style>

package/package/buttons/SegmentedButtonContainer.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { HTMLAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SegmentedButtonContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type SegmentedButtonContainer = InstanceType<typeof SegmentedButtonContainer>;
-export default SegmentedButtonContainer;

package/package/buttons/SegmentedButtonItem.svelte

@@ -1,119 +0,0 @@
-<script lang="ts">
-  import type { HTMLLabelAttributes } from "svelte/elements";
-  import type { IconifyIcon } from "@iconify/types";
-  import iconCheck from "@ktibow/iconset-material-symbols/check";
-  import Icon from "../misc/_icon.svelte";
-  import Layer from "../misc/Layer.svelte";
-
-  export let display = "flex";
-  export let extraOptions: HTMLLabelAttributes = {};
-  export let input: string;
-  export let icon: IconifyIcon | undefined = undefined;
-</script>
-
-<label
-  for={input}
-  class="m3-font-label-large"
-  style="display: {display}; overflow: hidden;"
-  {...extraOptions}
->
-  <Layer />
-  {#if icon}
-    <div class="custom icon">
-      <Icon {icon} />
-    </div>
-  {/if}
-  <div class="check icon">
-    <Icon icon={iconCheck} />
-  </div>
-  <div class="start-pad pad"></div>
-  <slot />
-  {#if !icon}
-    <div class="end-pad pad"></div>
-  {/if}
-</label>
-
-<style>
-  label {
-    padding: 0 1rem;
-    /* flex: 1; */
-    min-width: 3rem;
-    align-items: center;
-    justify-content: center;
-
-    color: rgb(var(--m3-scheme-on-surface));
-    transition: all 200ms;
-
-    cursor: pointer;
-    white-space: nowrap;
-    user-select: none;
-    position: relative;
-  }
-  :global(label) ~ label {
-    border-left: 0.0625rem solid rgb(var(--m3-scheme-outline));
-  }
-  :global(input:disabled) + label {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
-    cursor: auto;
-  }
-  .icon {
-    height: 1.125rem;
-    transition: all 200ms;
-    flex-shrink: 0;
-    transform-origin: 0.563rem 0.563rem;
-  }
-  .icon > :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-
-  .check.icon {
-    width: 0;
-    opacity: 0;
-  }
-  :global(input:checked) + label > .check.icon {
-    opacity: 1;
-  }
-  .custom.icon + .check.icon {
-    rotate: -60deg;
-  }
-  :global(input:checked) + label > .custom.icon + .check.icon {
-    rotate: 0deg;
-  }
-  .custom.icon {
-    width: 0;
-    opacity: 0;
-    rotate: 60deg;
-  }
-  :global(input:not(:checked)) + label > .custom.icon {
-    opacity: 1;
-    rotate: 0deg;
-  }
-
-  .pad {
-    transition: all 200ms;
-    flex-shrink: 0;
-  }
-  .start-pad {
-    width: 0.8125rem;
-  }
-  .end-pad {
-    width: 0.8125rem;
-  }
-  :global(input:checked) + label > .start-pad,
-  .custom.icon ~ .start-pad {
-    width: 1.625rem;
-  }
-  :global(input:checked) + label > .end-pad {
-    width: 0rem;
-  }
-
-  label {
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :global(input:checked) + label {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-</style>

package/package/buttons/SegmentedButtonItem.svelte.d.ts

@@ -1,34 +0,0 @@
-import type { HTMLLabelAttributes } from "svelte/elements";
-import type { IconifyIcon } from "@iconify/types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SegmentedButtonItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLLabelAttributes;
-    input: string;
-    icon?: IconifyIcon | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type SegmentedButtonItem = InstanceType<typeof SegmentedButtonItem>;
-export default SegmentedButtonItem;

package/package/containers/CardClickable.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes = {};
-  export let type: "elevated" | "filled" | "outlined";
-</script>
-
-<button
-  on:click|stopPropagation
-  class="m3-container type-{type}"
-  style="display: {display};"
-  {...extraOptions}
->
-  <Layer />
-  <slot />
-</button>
-
-<style>
-  :root {
-    --m3-card-shape: var(--m3-util-rounding-medium);
-  }
-  .m3-container {
-    flex-direction: column;
-    position: relative;
-    padding: 1rem; /* protip: use margin: -1rem (adjust as needed) to make images stretch to the end */
-    border: none;
-    border-radius: var(--m3-card-shape);
-    background-color: rgb(var(--m3-scheme-surface));
-    color: rgb(var(--m3-scheme-on-surface));
-    transition: all 200ms;
-  }
-
-  .type-elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-  }
-  .type-filled {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-  }
-  .type-outlined {
-    border: solid 0.0625rem rgb(var(--m3-scheme-outline));
-  }
-
-  .type-elevated {
-    box-shadow: var(--m3-util-elevation-1);
-  }
-
-  button {
-    text-align: inherit;
-    font: inherit;
-    letter-spacing: inherit;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-  @media (hover: hover) {
-    button:hover {
-      box-shadow: var(--m3-util-elevation-1);
-    }
-    button.type-elevated:hover {
-      box-shadow: var(--m3-util-elevation-2);
-    }
-  }
-
-  @media print, (forced-colors: active) {
-    .layer {
-      display: none;
-    }
-    .type-filled {
-      outline: solid 0.125rem;
-    }
-  }
-  @media (forced-colors: active) {
-    .type-elevated {
-      outline: solid 0.125rem;
-    }
-  }
-</style>

package/package/containers/CardClickable.svelte.d.ts

@@ -1,34 +0,0 @@
-import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CardClickable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes;
-    type: "elevated" | "filled" | "outlined";
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CardClickable = InstanceType<typeof CardClickable>;
-export default CardClickable;

package/package/containers/ListItemButton.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-
-  export let display = "flex";
-  export let extraOptions: HTMLButtonAttributes = {};
-  export let overline = "";
-  export let headline = "";
-  export let supporting = "";
-  export let lines: number | undefined = undefined;
-  $: _lines = lines || (overline && supporting ? 3 : overline || supporting ? 2 : 1);
-</script>
-
-<button on:click class="m3-container lines-{_lines}" style="display: {display}" {...extraOptions}>
-  <Layer />
-  {#if $$slots.leading}
-    <div class="leading">
-      <slot name="leading" />
-    </div>
-  {/if}
-  <div class="body">
-    {#if overline}
-      <p class="overline m3-font-label-small">{overline}</p>
-    {/if}
-    <p class="headline m3-font-body-large">{headline}</p>
-    {#if supporting}
-      <p class="supporting m3-font-body-medium">{supporting}</p>
-    {/if}
-  </div>
-  {#if $$slots.trailing}
-    <div class="trailing m3-font-label-small">
-      <slot name="trailing" />
-    </div>
-  {/if}
-</button>
-
-<style>
-  .m3-container {
-    align-items: center;
-    padding: 0.5rem 1.5rem 0.5rem 1rem;
-    gap: 1rem;
-    text-align: inherit;
-
-    background-color: transparent;
-    border: none;
-    position: relative;
-
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-    transition: background-color 200ms;
-  }
-  .lines-1 {
-    height: 3.5rem;
-  }
-  .lines-2 {
-    height: 4.5rem;
-  }
-  .lines-3 {
-    height: 5.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    align-items: flex-start;
-  }
-  .leading,
-  .trailing {
-    display: contents;
-    color: rgb(var(--m3-scheme-on-surface-variant));
-  }
-  .leading > :global(svg),
-  .trailing > :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-  .supporting,
-  .overline {
-    color: rgb(var(--m3-scheme-on-surface-variant));
-  }
-  .headline {
-    color: rgb(var(--m3-scheme-on-surface));
-  }
-</style>