m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/containers/ListItemButton.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { 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;
-}
-declare const ListItemButton: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLButtonAttributes;
-    overline?: string;
-    headline?: string;
-    supporting?: string;
-    lines?: number | undefined;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leading: {};
-    trailing: {};
-}, {}, string>;
-type ListItemButton = InstanceType<typeof ListItemButton>;
-export default ListItemButton;

package/package/containers/ListItemLabel.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-  import type { HTMLLabelAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-
-  export let display = "flex";
-  export let extraOptions: HTMLLabelAttributes = {};
-  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>
-
-<label 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}
-</label>
-
-<style>
-  .m3-container {
-    align-items: center;
-    padding: 0.5rem 1.5rem 0.5rem 1rem;
-    gap: 1rem;
-
-    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>

package/package/containers/ListItemLabel.svelte.d.ts

@@ -1,29 +0,0 @@
-import type { HTMLLabelAttributes } 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;
-}
-declare const ListItemLabel: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLLabelAttributes;
-    overline?: string;
-    headline?: string;
-    supporting?: string;
-    lines?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leading: {};
-    trailing: {};
-}, {}, string>;
-type ListItemLabel = InstanceType<typeof ListItemLabel>;
-export default ListItemLabel;

package/package/containers/SnackbarAnim.svelte

@@ -1,127 +0,0 @@
-<script context="module" lang="ts">
-  export type SnackbarIn = {
-    message: string;
-    actions?: Record<string, () => void>;
-    closable?: boolean;
-    timeout?: number | null;
-    /*
-    timeout: undefined/unset -> 4s timeout
-    timeout: null -> no timeout
-    timeout: 2000 -> 2s timeout
-    */
-  };
-</script>
-
-<script lang="ts">
-  import { onDestroy, type ComponentProps } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
-  import { fade } from "svelte/transition";
-  import Icon from "../misc/_icon.svelte";
-  import iconX from "@ktibow/iconset-material-symbols/close";
-  import SnackbarItem from "./SnackbarItem.svelte";
-  type SnackbarData = {
-    message: string;
-    actions: Record<string, () => void>;
-    closable: boolean;
-    timeout: number | null;
-  };
-
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: ComponentProps<SnackbarItem> = {};
-  export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
-    snackbar = { message, actions, closable, timeout };
-    clearTimeout(timeoutId);
-    if (timeout)
-      timeoutId = setTimeout(() => {
-        snackbar = undefined;
-      }, timeout);
-  };
-
-  let snackbar: SnackbarData | undefined;
-  let timeoutId: number;
-  onDestroy(() => {
-    clearTimeout(timeoutId);
-  });
-</script>
-
-{#if snackbar}
-  <div class="holder" out:fade={{ duration: 200 }} {...extraWrapperOptions}>
-    {#key snackbar}
-      <SnackbarItem {...extraOptions}>
-        <p class="m3-font-body-medium">{snackbar.message}</p>
-        {#each Object.entries(snackbar.actions) as [key, action]}
-          <button
-            class="action m3-font-label-large"
-            on:click={() => {
-              snackbar = undefined;
-              action();
-            }}
-          >
-            {key}
-          </button>
-        {/each}
-        {#if snackbar.closable}
-          <button
-            class="close"
-            on:click={() => {
-              snackbar = undefined;
-            }}
-          >
-            <Icon icon={iconX} />
-          </button>
-        {/if}
-      </SnackbarItem>
-    {/key}
-  </div>
-{/if}
-
-<style>
-  .holder {
-    position: fixed;
-    padding-bottom: 1rem;
-    bottom: var(--m3-util-bottom-offset);
-    left: 50%;
-    transform: translate(-50%, 0);
-    z-index: 3;
-  }
-  p {
-    margin-right: auto;
-  }
-  button {
-    display: flex;
-    align-self: stretch;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    border: none;
-
-    background-color: transparent;
-    color: rgb(var(--text));
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-    transition: all 200ms;
-  }
-  button :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .action {
-    --text: var(--m3-scheme-inverse-primary);
-    padding: 0 0.5rem;
-  }
-  .close {
-    --text: var(--m3-scheme-inverse-on-surface);
-    padding: 0 0.75rem;
-    margin-right: -1rem;
-  }
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--text) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--text) / 0.12);
-  }
-</style>

package/package/containers/SnackbarAnim.svelte.d.ts

@@ -1,33 +0,0 @@
-export type SnackbarIn = {
-    message: string;
-    actions?: Record<string, () => void>;
-    closable?: boolean;
-    timeout?: number | null;
-};
-import { type ComponentProps } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import SnackbarItem from "./SnackbarItem.svelte";
-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;
-}
-declare const SnackbarAnim: $$__sveltets_2_IsomorphicComponent<{
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: ComponentProps<SnackbarItem>;
-    show?: ({ message, actions, closable, timeout }: SnackbarIn) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
-}, string>;
-type SnackbarAnim = InstanceType<typeof SnackbarAnim>;
-export default SnackbarAnim;

package/package/forms/CheckboxAnim.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
-  // MUST BE WRAPPED IN A <label>
-</script>
-
-<div class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
-  <div class="layer-container">
-    <Layer />
-    <div class="checkbox-box"></div>
-  </div>
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M 4.83 13.41 L 9 17.585 L 19.59 7"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.41"
-    />
-  </svg>
-</div>
-
-<style>
-  .m3-container {
-    position: relative;
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-  .m3-container :global(input) {
-    position: absolute;
-    opacity: 0;
-  }
-
-  .layer-container {
-    position: absolute;
-    inset: -0.6875rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: var(--m3-util-rounding-full);
-    color: rgb(var(--m3-scheme-on-surface-variant));
-    cursor: pointer;
-  }
-
-  .checkbox-box {
-    position: absolute;
-    inset: 0.6875rem;
-    border-radius: 0.125rem;
-    border: solid 0.125rem currentColor;
-    transition: all 200ms;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  svg {
-    position: absolute;
-    inset: 0;
-    color: rgb(var(--m3-scheme-on-primary));
-    pointer-events: none;
-  }
-  path {
-    stroke-dasharray: 20.874 20.874;
-    stroke-dashoffset: 20.874;
-    opacity: 0;
-    transition:
-      opacity 200ms,
-      stroke-dashoffset 0ms 200ms;
-  }
-
-  :global(input:focus-visible) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface));
-  }
-
-  :global(input:checked) + .layer-container {
-    color: rgb(var(--m3-scheme-primary));
-  }
-  :global(input:checked) + .layer-container .checkbox-box {
-    background-color: rgb(var(--m3-scheme-primary));
-  }
-  :global(input:checked) ~ svg > path {
-    stroke-dashoffset: 0;
-    opacity: 1;
-    transition: stroke-dashoffset 200ms;
-  }
-
-  :global(input:disabled) + .layer-container {
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
-    cursor: not-allowed;
-  }
-
-  :global(input:disabled:checked) + .layer-container {
-    color: transparent;
-  }
-  :global(input:disabled:checked) + .layer-container .checkbox-box {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-
-  :global(input:disabled) ~ svg {
-    color: rgb(var(--m3-scheme-surface));
-  }
-
-  .m3-container {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-  }
-  @media screen and (forced-colors: active) {
-    :global(input:checked) + .layer-container .checkbox-box {
-      background-color: selecteditem;
-      border-color: selecteditem !important;
-    }
-    :global(input:disabled) + .layer-container {
-      opacity: 0.38;
-    }
-  }
-</style>

package/package/forms/CheckboxAnim.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 CheckboxAnim: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CheckboxAnim = InstanceType<typeof CheckboxAnim>;
-export default CheckboxAnim;