@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/containers/side-sheet/SideSheet.svelte

@@ -2,20 +2,86 @@
 @component
 Side sheets are supplementary surfaces which are anchored to the edge of the screen.
 
+Like BottomSheet, SideSheet owns its own overlay: it renders as a native `<dialog>` pinned to
+the right edge of the screen, dims the rest of the app behind a backdrop, and slides in/out.
+Mounting it calls `showModal()` immediately, so visibility is controlled by conditionally
+rendering the component ({#if open}<SideSheet ...>{/if}).
+
 @see https://m3.material.io/components/side-sheets/guidelines
 -->
 <script lang="ts">
   import type { SideSheetProps } from './types.js';
+  import type { TransitionConfig } from 'svelte/transition';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { outroClass } from '../../../animation/outroClass.js';
 
   let { headline, children, close }: SideSheetProps = $props();
+
+  const open = (node: HTMLDialogElement) => node.showModal();
+
+  const slideAnim = (
+    node: HTMLDialogElement,
+    options: { duration: number; easing: typeof easeEmphasizedDecel }
+  ): TransitionConfig => {
+    const width = node.getBoundingClientRect().width;
+    return {
+      duration: options.duration,
+      easing: options.easing,
+      css: (t) => `transform: translateX(${(1 - t) * width}px)`
+    };
+  };
 </script>
 
-<div class="flex flex-col">
-  <div class="flex items-center justify-between p-6">
-    <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant">{headline}</span
-    >
-    <ButtonIcon type="button" variant="text" iconProps={{ name: 'close' }} onclick={close} />
+<dialog
+  class="bg-md-sys-color-surface-container-low fixed inset-y-0 right-0 left-auto m-0 h-full w-full max-w-sm rounded-l-md"
+  use:open
+  use:outroClass
+  oncancel={(e) => {
+    e.preventDefault();
+    close();
+  }}
+  onmousedown={(e) => {
+    if (e.target != e.currentTarget) return;
+    close();
+  }}
+  in:slideAnim={{ easing: easeEmphasizedDecel, duration: 400 }}
+  out:slideAnim={{ easing: easeEmphasizedAccel, duration: 300 }}
+>
+  <div class="flex h-full flex-col">
+    <div class="flex items-center justify-between p-6">
+      <span class="md-sys-typescale-title-large text-md-sys-color-on-surface-variant"
+        >{headline}</span
+      >
+      <ButtonIcon type="button" variant="text" iconProps={{ name: 'close' }} onclick={close} />
+    </div>
+    {@render children()}
   </div>
-  {@render children()}
-</div>
+</dialog>
+
+<style>
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    animation: backdrop 400ms;
+  }
+  dialog:global(.leaving)::backdrop {
+    background-color: transparent;
+    animation: backdropReverse 400ms;
+  }
+  @keyframes backdrop {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+  @keyframes backdropReverse {
+    from {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+</style>

package/dist/components/containers/side-sheet/SideSheet.svelte.d.ts

@@ -2,6 +2,11 @@ import type { SideSheetProps } from './types.js';
 /**
  * Side sheets are supplementary surfaces which are anchored to the edge of the screen.
  *
+ * Like BottomSheet, SideSheet owns its own overlay: it renders as a native `<dialog>` pinned to
+ * the right edge of the screen, dims the rest of the app behind a backdrop, and slides in/out.
+ * Mounting it calls `showModal()` immediately, so visibility is controlled by conditionally
+ * rendering the component ({#if open}<SideSheet ...>{/if}).
+ *
  * @see https://m3.material.io/components/side-sheets/guidelines
  */
 declare const SideSheet: import("svelte").Component<SideSheetProps, {}, "">;

package/dist/components/containers/stack/theme.d.ts

@@ -2,65 +2,65 @@ import { type VariantProps } from 'tailwind-variants';
 export type StackVariants = VariantProps<typeof stack>;
 export declare const stack: import("tailwind-variants").TVReturnType<{
     type: {
-        vstack: string;
-        hstack: string;
-        vFlip: string;
-        hFlip: string;
-        zstaack: string;
+        vstack: "flex-row";
+        hstack: "flex-col";
+        vFlip: "md:flex-row flex-col";
+        hFlip: "md:flex-col flex-row";
+        zstaack: "flex";
     };
     size: {
-        full: string;
-        w: string;
-        h: string;
+        full: "size-full";
+        w: "w-full";
+        h: "h-full";
     };
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
     };
 }, undefined, "flex relative", {
     type: {
-        vstack: string;
-        hstack: string;
-        vFlip: string;
-        hFlip: string;
-        zstaack: string;
+        vstack: "flex-row";
+        hstack: "flex-col";
+        vFlip: "md:flex-row flex-col";
+        hFlip: "md:flex-col flex-row";
+        zstaack: "flex";
     };
     size: {
-        full: string;
-        w: string;
-        h: string;
+        full: "size-full";
+        w: "w-full";
+        h: "h-full";
     };
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     type: {
-        vstack: string;
-        hstack: string;
-        vFlip: string;
-        hFlip: string;
-        zstaack: string;
+        vstack: "flex-row";
+        hstack: "flex-col";
+        vFlip: "md:flex-row flex-col";
+        hFlip: "md:flex-col flex-row";
+        zstaack: "flex";
     };
     size: {
-        full: string;
-        w: string;
-        h: string;
+        full: "size-full";
+        w: "w-full";
+        h: "h-full";
     };
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
     };
-}, undefined, "flex relative", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/date/DateField.stories.svelte

@@ -0,0 +1,57 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DateField from './DateField.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Date/DateField',
+    component: DateField,
+    argTypes: {
+      label: { control: 'text' },
+      variant: { control: 'select', options: ['filled', 'outlined'] },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' },
+      required: { control: 'boolean' }
+    },
+    args: {
+      label: 'Date of birth',
+      variant: 'outlined',
+      disabled: false,
+      error: false,
+      required: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-sm p-6">
+      <DateField {...args} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Outlined States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <DateField variant="outlined" label="Default" />
+    <DateField variant="outlined" label="Required" required />
+    <DateField variant="outlined" label="Error" error>
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </DateField>
+    <DateField variant="outlined" label="Disabled" disabled />
+  </div>
+</Story>
+
+<Story name="Filled States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <DateField variant="filled" label="Default" />
+    <DateField variant="filled" label="Required" required />
+    <DateField variant="filled" label="Error" error>
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </DateField>
+    <DateField variant="filled" label="Disabled" disabled />
+  </div>
+</Story>

package/dist/components/{containers/panes/SplitPane.stories.svelte.d.ts → date/DateField.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import SplitPane from './SplitPane.svelte';
+import DateField from './DateField.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;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SplitPane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DateField: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type SplitPane = InstanceType<typeof SplitPane>;
-export default SplitPane;
+type DateField = InstanceType<typeof DateField>;
+export default DateField;

package/dist/components/date/DateField.svelte

@@ -19,12 +19,13 @@ DateField is a text field that allows users to enter a date or pick it from a ca
     required = false,
     disabled = false,
     error = false,
+    variant = 'outlined',
     supportingText,
     name,
     leadingIconProps
   }: DateFieldProps & { leadingIconProps?: any } = $props();
 
-  const cls = $derived(dateField({ disabled, error }));
+  const cls = $derived(dateField({ disabled, error, variant }));
 </script>
 
 <DatePicker.Root
@@ -45,7 +46,7 @@ DateField is a text field that allows users to enter a date or pick it from a ca
       <div class={cls.inputWrapper()}>
         <DatePicker.Input class={cls.input()} {name} id={id ?? undefined}>
           {#snippet children({ segments })}
-            <div class="flex w-full flex-col pt-4 tabular-nums">
+            <div class={cls.segments()}>
               <div class="flex items-center justify-between">
                 <div class="flex">
                   {#each segments as { part, value }}
@@ -86,6 +87,14 @@ DateField is a text field that allows users to enter a date or pick it from a ca
       <DatePicker.Trigger class={cls.trailingIcon({ class: 'flex items-center justify-center' })}>
         <Icon name="calendar_month" />
       </DatePicker.Trigger>
+
+      {#if variant === 'outlined'}
+        <fieldset class={cls.fieldset()} aria-hidden="true">
+          <legend class={cls.legend()}>
+            <span class={cls.legendLabel()}>{label}{required ? '*' : ''}</span>
+          </legend>
+        </fieldset>
+      {/if}
     </div>
 
     {#if supportingText}

package/dist/components/date/DateRangeField.stories.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DateRangeField from './DateRangeField.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Date/DateRangeField',
+    component: DateRangeField,
+    argTypes: {
+      variant: { control: 'select', options: ['filled', 'outlined'] },
+      disabled: { control: 'boolean' },
+      error: { control: 'boolean' },
+      required: { control: 'boolean' }
+    },
+    args: {
+      variant: 'outlined',
+      disabled: false,
+      error: false,
+      required: false
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <div class="max-w-sm p-6">
+      <DateRangeField {...args} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Outlined States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <DateRangeField variant="outlined" />
+    <DateRangeField variant="outlined" error>
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </DateRangeField>
+    <DateRangeField variant="outlined" disabled />
+  </div>
+</Story>
+
+<Story name="Filled States" asChild>
+  <div class="flex max-w-sm flex-col gap-6 p-6">
+    <DateRangeField variant="filled" />
+    <DateRangeField variant="filled" error>
+      {#snippet supportingText()}
+        This field is required.
+      {/snippet}
+    </DateRangeField>
+    <DateRangeField variant="filled" disabled />
+  </div>
+</Story>

package/dist/components/{containers/panes/SupportingPane.stories.svelte.d.ts → date/DateRangeField.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import SupportingPane from './SupportingPane.svelte';
+import DateRangeField from './DateRangeField.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;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SupportingPane: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DateRangeField: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type SupportingPane = InstanceType<typeof SupportingPane>;
-export default SupportingPane;
+type DateRangeField = InstanceType<typeof DateRangeField>;
+export default DateRangeField;

package/dist/components/date/DateRangeField.svelte

@@ -22,12 +22,13 @@ segment inputs and a shared calendar popover.
     required = false,
     disabled = false,
     error = false,
+    variant = 'outlined',
     supportingText,
     name,
     leadingIconProps
   }: DateRangeFieldProps & { leadingIconProps?: any } = $props();
 
-  const cls = $derived(dateRangeField({ disabled, error }));
+  const cls = $derived(dateRangeField({ disabled, error, variant }));
 </script>
 
 <DateRangePicker.Root

package/dist/components/date/theme.d.ts

@@ -2,6 +2,14 @@ import { type VariantProps } from 'tailwind-variants';
 export type DateFieldVariants = VariantProps<typeof dateField>;
 export type DateRangeFieldVariants = VariantProps<typeof dateRangeField>;
 export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -28,6 +36,14 @@ export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
     requiredAsterisk: string;
     supportingText: string;
 }, undefined, {
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -53,7 +69,15 @@ export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
     label: string;
     requiredAsterisk: string;
     supportingText: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+        };
+        outlined: {
+            base: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -79,8 +103,17 @@ export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
     label: string;
     requiredAsterisk: string;
     supportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const dateField: import("tailwind-variants").TVReturnType<{
+    variant: {
+        filled: {
+            base: string;
+            segments: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -89,23 +122,38 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
     base: string;
     inputWrapper: string;
     input: string;
+    segments: string;
     leadingIcon: string;
     trailingIcon: string;
     label: string;
     requiredAsterisk: string;
     supportingText: string;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
 }, undefined, {
+    variant: {
+        filled: {
+            base: string;
+            segments: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -114,23 +162,38 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
     base: string;
     inputWrapper: string;
     input: string;
+    segments: string;
     leadingIcon: string;
     trailingIcon: string;
     label: string;
     requiredAsterisk: string;
     supportingText: string;
-}, import("tailwind-variants").TVReturnType<{
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        filled: {
+            base: string;
+            segments: string;
+        };
+        outlined: {
+            label: string;
+        };
+    };
     error: {
         true: {
             base: string;
@@ -139,20 +202,26 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
             supportingText: string;
             leadingIcon: string;
             trailingIcon: string;
+            fieldset: string;
         };
     };
     disabled: {
         true: {
             base: string;
+            fieldset: string;
         };
     };
 }, {
     base: string;
     inputWrapper: string;
     input: string;
+    segments: string;
     leadingIcon: string;
     trailingIcon: string;
     label: string;
     requiredAsterisk: string;
     supportingText: string;
-}, undefined, unknown, unknown, undefined>>;
+    fieldset: string;
+    legend: string;
+    legendLabel: string;
+}>>;