m3-svelte 4.5.6 → 4.6.0

package/package/containers/Card.svelte

@@ -39,6 +39,7 @@
     border: none;
     border-radius: var(--m3-card-shape);
     background-color: rgb(var(--m3-scheme-surface));
+    --m3-util-background: var(--m3-scheme-surface);
     color: rgb(var(--m3-scheme-on-surface));
   }
 
@@ -60,10 +61,12 @@
 
   .elevated {
     background-color: rgb(var(--m3-scheme-surface-container-low));
+    --m3-util-background: var(--m3-scheme-surface-container-low);
     box-shadow: var(--m3-util-elevation-1);
   }
   .filled {
     background-color: rgb(var(--m3-scheme-surface-container-highest));
+    --m3-util-background: var(--m3-scheme-surface-container-highest);
   }
   .outlined {
     border: solid 1px rgb(var(--m3-scheme-outline-variant));

package/package/containers/Dialog.svelte

@@ -77,6 +77,7 @@
     display: flex;
     flex-direction: column;
     background-color: rgb(var(--m3-scheme-surface-container-high));
+    --m3-util-background: var(--m3-scheme-surface-container-high);
     border: none;
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;
@@ -139,7 +140,6 @@
     animation: opacity var(--m3-util-easing-fast) 50ms both;
   }
   dialog[open] .buttons {
-    position: relative;
     animation:
       buttonsIn var(--m3-util-curve-decel) 500ms,
       opacity var(--m3-util-easing-fast) 100ms both;
@@ -160,9 +160,11 @@
   }
   @keyframes buttonsIn {
     0% {
+      position: relative;
       bottom: 100%;
     }
     100% {
+      position: relative;
       bottom: 0;
     }
   }

package/package/forms/TextFieldOutlined.svelte

@@ -99,7 +99,9 @@
     left: 0.75rem;
     top: 1rem;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: rgb(var(--m3-util-background, var(--m3-scheme-surface)));
+    background-color: rgb(
+      var(--m3-util-background, var(--m3-scheme-surface))
+    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
     padding: 0 0.25rem;
     pointer-events: none;
     transition:

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -88,7 +88,9 @@
     left: 0.75rem;
     top: 1rem;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: rgb(var(--m3-util-background, var(--m3-scheme-surface)));
+    background-color: rgb(
+      var(--m3-util-background, var(--m3-scheme-surface))
+    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
     padding: 0 0.25rem;
     pointer-events: none;
     transition:

package/package/index.d.ts

@@ -49,3 +49,4 @@ export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";
 export { default as DateField } from "./utils/DateField.svelte";
+export { default as DateFieldOutlined } from "./utils/DateFieldOutlined.svelte";

package/package/index.js

@@ -48,3 +48,4 @@ export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";
 export { default as DateField } from "./utils/DateField.svelte";
+export { default as DateFieldOutlined } from "./utils/DateFieldOutlined.svelte";

package/package/utils/DateField.svelte

@@ -14,12 +14,14 @@
     date = $bindable(""),
     required = false,
     disabled = false,
+    error = false,
     ...extra
   }: {
     label: string;
     date?: string;
     required?: boolean;
     disabled?: boolean;
+    error?: boolean;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -56,10 +58,10 @@ opacity: ${Math.min(t * 3, 1)};`,
   let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
-<div class="m3-container" class:has-js={hasJs} class:disabled use:clickOutside>
+<div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
   <input
     type="date"
-    class="m3-font-body-large"
+    class="focus-none m3-font-body-large"
     {disabled}
     {required}
     {id}
@@ -69,7 +71,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} onclick={() => (picker = !picker)}>
     <Layer />
-    <Icon icon={iconCalendar} />
+    <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
   </button>
   {#if picker}
     <div class="picker" transition:enterExit>
@@ -93,7 +95,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     min-width: 15rem;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border-radius: var(--m3-datefield-shape) var(--m3-datefield-shape) 0 0;
-    border-bottom: solid 1px rgb(var(--m3-scheme-on-surface-variant));
+    border-bottom: solid 1px rgb(var(--error, var(--m3-scheme-on-surface-variant)));
   }
   input {
     position: absolute;
@@ -110,7 +112,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     position: absolute;
     left: 1rem;
     top: 0.5rem;
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     pointer-events: none;
   }
   input {
@@ -153,10 +155,10 @@ opacity: ${Math.min(t * 3, 1)};`,
     cursor: auto;
   }
 
-  button > :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
+  .error {
+    --error: var(--m3-scheme-error);
   }
+
   .picker {
     position: absolute;
     top: calc(100% + 1rem);

package/package/utils/DateField.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     date?: string;
     required?: boolean;
     disabled?: boolean;
+    error?: boolean;
 } & HTMLInputAttributes;
 declare const DateField: import("svelte").Component<$$ComponentProps, {}, "date">;
 type DateField = ReturnType<typeof DateField>;

package/package/utils/DateFieldOutlined.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { TransitionConfig } from "svelte/transition";
+  import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
+  import Icon from "../misc/_icon.svelte";
+  import Layer from "../misc/Layer.svelte";
+
+  import DatePickerDocked from "../forms/DatePickerDocked.svelte";
+  import { easeEmphasized } from "../misc/easing";
+
+  let {
+    label: _label,
+    date = $bindable(""),
+    required = false,
+    disabled = false,
+    error = false,
+    ...extra
+  }: {
+    label: string;
+    date?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+  } & HTMLInputAttributes = $props();
+
+  const id = $props.id();
+  let hasJs = $state(false);
+  onMount(() => {
+    hasJs = true;
+  });
+
+  let picker = $state(false);
+  const clickOutside = (container: Node) => {
+    const handleClick = (event: Event) => {
+      if (!container.contains(event.target as Node)) {
+        picker = false;
+      }
+    };
+    document.addEventListener("click", handleClick, true);
+    return {
+      destroy() {
+        document.removeEventListener("click", handleClick, true);
+      },
+    };
+  };
+  const enterExit = (_: Node): TransitionConfig => {
+    return {
+      duration: 400,
+      easing: easeEmphasized,
+      css: (t, u) => `clip-path: inset(-100% 0 ${u * 100}% 0 round 1rem);
+transform-origin: top;
+transform: scaleY(${(t * 0.3 + 0.7) * 100}%);
+opacity: ${Math.min(t * 3, 1)};`,
+    };
+  };
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
+</script>
+
+<div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
+  <input
+    type="date"
+    class="focus-none m3-font-body-large"
+    {disabled}
+    {required}
+    {id}
+    bind:value={date}
+    {...extra}
+  />
+  <div class="layer"></div>
+  <label class="m3-font-body-small" for={id}>{label}</label>
+  <button type="button" {disabled} onclick={() => (picker = !picker)}>
+    <Layer />
+    <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
+  </button>
+  {#if picker}
+    <div class="picker" transition:enterExit>
+      <DatePickerDocked
+        {date}
+        clearable={!required}
+        close={() => (picker = false)}
+        setDate={(d) => (date = d)}
+      />
+    </div>
+  {/if}
+</div>
+
+<style>
+  /*
+  want to customize the label's background?
+  do this: <DateFieldOutlined --m3-util-background="var(--m3-scheme-surface-container)" />
+  */
+  :root {
+    --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
+  }
+  .m3-container {
+    display: inline-flex;
+    position: relative;
+    height: 3.5rem;
+    min-width: 15rem;
+  }
+  input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    padding: 1rem;
+    border-radius: var(--m3-datefield-outlined-shape);
+    background-color: transparent;
+    color: rgb(var(--m3-scheme-on-surface));
+  }
+  label {
+    position: absolute;
+    left: 0.75rem;
+    top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
+    color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    background-color: rgb(
+      var(--m3-util-background, var(--m3-scheme-surface))
+    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
+    padding: 0 0.25rem;
+    pointer-events: none;
+    transition: all 200ms;
+  }
+  .layer {
+    position: absolute;
+    inset: 0;
+    border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
+    border-radius: var(--m3-datefield-outlined-shape);
+    pointer-events: none;
+    transition: all 200ms;
+  }
+
+  button {
+    display: none;
+    position: absolute;
+    width: 3.5rem;
+    height: 100%;
+    right: 0;
+
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: transparent;
+    color: rgb(var(--m3-scheme-on-surface-variant));
+    border-top-right-radius: var(--m3-datefield-outlined-shape);
+
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+  }
+
+  input {
+    padding-left: 0.875rem;
+  }
+  @supports (-moz-appearance: none) {
+    input {
+      padding-left: 0.75rem;
+    }
+  }
+
+  input:hover ~ label {
+    color: rgb(var(--error, var(--m3-scheme-on-surface)));
+  }
+  input:hover ~ .layer {
+    border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
+  }
+  input:focus ~ label {
+    color: rgb(var(--error, var(--m3-scheme-primary)));
+  }
+  input:focus ~ .layer {
+    border-color: rgb(var(--error, var(--m3-scheme-primary)));
+    border-width: 0.125rem;
+  }
+  @media (hover: hover) {
+    button:hover {
+      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
+    }
+  }
+  button:focus-visible,
+  button:active {
+    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
+  }
+
+  .error {
+    --error: var(--m3-scheme-error);
+  }
+  .error > input:hover ~ label,
+  .error > input:hover ~ .layer {
+    --error: var(--m3-scheme-on-error-container);
+  }
+
+  .m3-container.disabled {
+    opacity: 0.38;
+  }
+  input:disabled {
+    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+  }
+  input:disabled ~ label {
+    color: rgb(var(--m3-scheme-on-surface) / 0.38);
+  }
+  input:disabled ~ .layer {
+    border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+  }
+  button:disabled {
+    color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
+    cursor: auto;
+  }
+
+  .picker {
+    position: absolute;
+    top: calc(100% + 1rem);
+    right: 0;
+    z-index: 1;
+  }
+
+  @media (min-width: 37.5rem) {
+    .has-js button {
+      display: flex;
+    }
+    .has-js input {
+      clip-path: inset(0 3.5rem 0 0);
+    }
+  }
+</style>

package/package/utils/DateFieldOutlined.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type $$ComponentProps = {
+    label: string;
+    date?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+} & HTMLInputAttributes;
+declare const DateFieldOutlined: import("svelte").Component<$$ComponentProps, {}, "date">;
+type DateFieldOutlined = ReturnType<typeof DateFieldOutlined>;
+export default DateFieldOutlined;

package/package.json

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