@noxlovette/material 0.4.8 → 0.5.0

package/dist/components/time/TimeField.svelte

@@ -6,12 +6,11 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
 @see https://m3.material.io/components/time-pickers/overview
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../animation/index.js';
   import type { HTMLInputAttributes } from 'svelte/elements';
   import Textfield from '../forms/textfield/Textfield.svelte';
   import TimepickerInput from './TimepickerInput.svelte';
-  import { clickOutside, positionFloating } from '../../actions/index.js';
-  import { enterExit } from '../../animation/enterExit.js';
-  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+  import { Popover } from 'bits-ui';
 
   let {
     label = 'Время',
@@ -48,64 +47,66 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
   let anchorEl = $state<HTMLDivElement>();
 </script>
 
-<div
-  class="relative w-full"
-  bind:this={anchorEl}
-  use:clickOutside={() => {
-    picker = false;
-  }}
->
-  <Textfield
-    id={id as string}
-    {label}
-    {value}
-    {name}
-    {disabled}
-    {error}
-    {leadingIconProps}
-    class="pointer-events-none"
-    trailingIconProps={{ name: 'timer' }}
-    trailingOnClick={() => !disabled && (picker = !picker)}
-    {...restProps as any}
-  >
-    {#snippet supportingText()}
-      ЧЧ-ММ
-    {/snippet}
-  </Textfield>
+<Popover.Root bind:open={picker}>
+  <div class="relative w-full" bind:this={anchorEl}>
+    <Textfield
+      id={id as string}
+      {label}
+      {value}
+      {name}
+      {disabled}
+      {error}
+      {leadingIconProps}
+      class="pointer-events-none"
+      trailingIconProps={{ name: 'timer' }}
+      trailingOnClick={() => !disabled && (picker = !picker)}
+      {...restProps as any}
+    >
+      {#snippet supportingText()}
+        ЧЧ-ММ
+      {/snippet}
+    </Textfield>
 
-  <button
-    {disabled}
-    title="time-overlay"
-    class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
-    type="button"
-    onclick={() => !disabled && (picker = !picker)}
-    data-cy="calendar-time-toggle"
-  ></button>
+    <Popover.Trigger {disabled}>
+      {#snippet child({ props })}
+        <button
+          {...props}
+          title="time-overlay"
+          class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+          type="button"
+          data-cy="calendar-time-toggle"
+        ></button>
+      {/snippet}
+    </Popover.Trigger>
+  </div>
 
-  {#if picker}
-    <div
-      class="picker"
-      use:positionFloating={{ anchor: anchorEl, offset: 12 }}
-      in:enterExit={{
-        duration: 200,
-        easing: easeEmphasizedDecel,
-        mode: 'scale'
-      }}
-      out:enterExit={{
-        duration: 150,
-        easing: easeEmphasizedAccel,
-        mode: 'scale'
-      }}
-      style="transform-origin: top center;"
+  <Popover.Portal>
+    <Popover.Content
+      customAnchor={anchorEl}
+      side="bottom"
+      align="start"
+      sideOffset={12}
+      collisionPadding={8}
+      class="z-100"
     >
-      <TimepickerInput time={value} close={() => (picker = false)} setTime={(t) => (value = t)} />
-    </div>
-  {/if}
-</div>
-
-<style>
-  .picker {
-    z-index: 1;
-    position: absolute;
-  }
-</style>
+      {#snippet child({ wrapperProps, props, open })}
+        <div {...wrapperProps}>
+          <div
+            {...props}
+            class={[
+              props.class,
+              'max-h-(--bits-floating-available-height) min-w-(--bits-floating-anchor-width) overflow-auto'
+            ]}
+            {@attach presence(() => open, enterExit.scale)}
+          >
+            <TimepickerInput
+              time={value}
+              close={() => (picker = false)}
+              setTime={(t) => (value = t)}
+            />
+          </div>
+        </div>
+      {/snippet}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

package/dist/components/toolbar/theme.js

@@ -48,7 +48,7 @@ export const toolbar = tv({
 });
 export const toolbarButton = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
     },
     variants: {
@@ -61,7 +61,7 @@ export const toolbarButton = tv({
 });
 export const toolbarGroupItem = tv({
     slots: {
-        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38',
+        base: 'layer-container state-layer before:rounded-full relative inline-flex size-10 items-center justify-center rounded-full outline-none transition-colors md-sys-motion-fast-effects disabled:cursor-not-allowed disabled:opacity-38',
         icon: 'size-5 text-[20px]'
     },
     variants: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from './actions/index.js';
 export * from './animation/index.js';
+export * from './attachments/index.js';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from './actions/index.js';
 export * from './animation/index.js';
+export * from './attachments/index.js';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/styles/component.css

@@ -12,17 +12,20 @@
      * `fixed`/`absolute`/`sticky` override. Baking it into this custom class's own compiled
      * CSS rule would set `position` outside of anything twMerge can see or override. */
     @apply state-layer md-sys-state-focus-indicator disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:before:bg-md-sys-color-on-surface/38 inline-flex items-center justify-center select-none disabled:cursor-not-allowed;
-    transition: box-shadow var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: box-shadow var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
   }
 
+  /* Shape morphs run on the fast spatial spring in both directions (press and release). */
   .md-btn-morph {
     border-radius: var(--btn-shape-override, var(--btn-shape, 9999px));
-    transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+    transition: border-radius var(--md-sys-motion-duration-fast-spatial)
+      var(--md-sys-motion-timing-function-fast-spatial);
 
     &::before {
       border-radius: inherit;
-      transition: border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+      transition: border-radius var(--md-sys-motion-duration-fast-spatial)
+        var(--md-sys-motion-timing-function-fast-spatial);
     }
 
     &:active:not(:disabled) {
@@ -30,7 +33,6 @@
         --btn-pressed-shape,
         var(--btn-shape-override, var(--btn-shape, 9999px))
       ) !important;
-      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
     }
   }
 
@@ -85,9 +87,10 @@
     > * {
       padding-inline: var(--btn-group-base-px, 1rem);
       transition:
-        padding-inline var(--md-sys-motion-duration-fast-spatial, 350ms)
-          var(--md-sys-motion-timing-function-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.9)),
-        border-radius 200ms var(--md-sys-motion-timing-function-emphasized-accel);
+        padding-inline var(--md-sys-motion-duration-fast-spatial)
+          var(--md-sys-motion-timing-function-fast-spatial),
+        border-radius var(--md-sys-motion-duration-fast-spatial)
+          var(--md-sys-motion-timing-function-fast-spatial);
     }
 
     > *:active:not(:disabled) {
@@ -114,11 +117,12 @@
   .md-btn-connected {
     border-radius: var(--cbg-inner, 9999px);
     transition:
-      border-radius 250ms var(--md-sys-motion-timing-function-emphasized-accel),
-      background-color var(--md-sys-motion-duration-fast, 150ms)
-        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1)),
-      color var(--md-sys-motion-duration-fast, 150ms)
-        var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+      border-radius var(--md-sys-motion-duration-fast-spatial)
+        var(--md-sys-motion-timing-function-fast-spatial),
+      background-color var(--md-sys-motion-duration-fast-effects-spring)
+        var(--md-sys-motion-timing-function-fast-effects-spring),
+      color var(--md-sys-motion-duration-fast-effects-spring)
+        var(--md-sys-motion-timing-function-fast-effects-spring);
 
     &:only-child {
       border-radius: var(--cbg-outer, 9999px);
@@ -144,11 +148,6 @@
     &:active:not(:disabled),
     &[data-state='on'] {
       border-radius: var(--cbg-inner, 4px) !important;
-      transition-timing-function: var(--md-sys-motion-timing-function-emphasized-decel);
-    }
-
-    &:active:not(:disabled) {
-      transition-duration: 150ms;
     }
   }
 
@@ -245,8 +244,8 @@
 
   .text-link {
     @apply text-md-sys-color-primary hover:text-md-sys-color-secondary underline;
-    transition: color var(--md-sys-motion-duration, 200ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: color var(--md-sys-motion-duration-effects-spring)
+      var(--md-sys-motion-timing-function-effects-spring);
   }
 
   .text-link.md-sys-typescale-label-small {
@@ -270,7 +269,7 @@
 @utility state-layer {
   @apply before:pointer-events-none before:absolute before:inset-0 before:content-[''];
   &::before {
-    transition: background-color var(--md-sys-motion-duration-fast, 150ms)
-      var(--md-sys-motion-timing-function, cubic-bezier(0.2, 0, 0, 1));
+    transition: background-color var(--md-sys-motion-duration-fast-effects-spring)
+      var(--md-sys-motion-timing-function-fast-effects-spring);
   }
 }

package/dist/styles/motion.css

@@ -1,54 +1,333 @@
 @theme {
-  /* Expressive easing */
-  --md-sys-motion-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
-  --md-sys-motion-duration-fast-spatial: 350ms;
+  /* Expressive springs — generated from src/lib/animation/spring.ts, do not edit by hand.
+     Regenerate with `bun scripts/generate-motion-springs.ts`. Each is a `linear()` sampling of a
+     real spring plus its settle time. Spatial tokens overshoot; effects tokens don't. */
+  /* @generated:springs:start */
+  --md-sys-motion-timing-function-fast-spatial: linear(
+    0,
+    0.0373,
+    0.1315,
+    0.2592,
+    0.4017,
+    0.5444,
+    0.6773,
+    0.794,
+    0.8908,
+    0.9669,
+    1.023,
+    1.061,
+    1.0835,
+    1.0935,
+    1.094,
+    1.0877,
+    1.0771,
+    1.0642,
+    1.0505,
+    1.0373,
+    1.0253,
+    1.0151,
+    1.0068,
+    1.0005,
+    0.996,
+    0.9931,
+    0.9915,
+    0.991,
+    0.9913,
+    0.9921,
+    0.9932,
+    0.9945,
+    0.9958,
+    0.997,
+    0.9981,
+    0.9989,
+    0.9996,
+    1.0002,
+    1.0005,
+    1.0007,
+    1
+  );
+  --md-sys-motion-duration-fast-spatial: 410ms;
   --md-sys-motion-easing-fast-spatial: var(--md-sys-motion-timing-function-fast-spatial)
     var(--md-sys-motion-duration-fast-spatial);
 
-  --md-sys-motion-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
-  --md-sys-motion-duration-spatial: 500ms;
+  --md-sys-motion-timing-function-spatial: linear(
+    0,
+    0.0178,
+    0.0639,
+    0.1291,
+    0.206,
+    0.2888,
+    0.373,
+    0.4554,
+    0.5338,
+    0.6066,
+    0.6728,
+    0.732,
+    0.7841,
+    0.8294,
+    0.868,
+    0.9006,
+    0.9276,
+    0.9498,
+    0.9675,
+    0.9816,
+    0.9924,
+    1.0005,
+    1.0064,
+    1.0105,
+    1.0131,
+    1.0146,
+    1.0151,
+    1.015,
+    1.0145,
+    1.0135,
+    1.0124,
+    1.0112,
+    1.0099,
+    1.0086,
+    1.0074,
+    1.0063,
+    1.0053,
+    1.0043,
+    1.0035,
+    1.0028,
+    1.0022,
+    1.0017,
+    1.0012,
+    1.0009,
+    1.0006,
+    1.0003,
+    1.0002,
+    1,
+    1
+  );
+  --md-sys-motion-duration-spatial: 490ms;
   --md-sys-motion-easing-spatial: var(--md-sys-motion-timing-function-spatial)
     var(--md-sys-motion-duration-spatial);
 
-  --md-sys-motion-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-  --md-sys-motion-duration-slow-spatial: 650ms;
+  --md-sys-motion-timing-function-slow-spatial: linear(
+    0,
+    0.0095,
+    0.0354,
+    0.0736,
+    0.121,
+    0.1749,
+    0.2329,
+    0.2931,
+    0.3539,
+    0.4141,
+    0.4728,
+    0.5291,
+    0.5825,
+    0.6326,
+    0.6792,
+    0.7221,
+    0.7613,
+    0.7969,
+    0.8289,
+    0.8575,
+    0.8828,
+    0.9051,
+    0.9245,
+    0.9414,
+    0.9559,
+    0.9682,
+    0.9785,
+    0.9872,
+    0.9943,
+    1,
+    1.0046,
+    1.0081,
+    1.0108,
+    1.0127,
+    1.014,
+    1.0148,
+    1.0151,
+    1.0151,
+    1.0148,
+    1.0143,
+    1.0137,
+    1.0129,
+    1.012,
+    1.0111,
+    1.0102,
+    1.0093,
+    1.0084,
+    1.0075,
+    1.0067,
+    1.0059,
+    1.0052,
+    1.0045,
+    1.0039,
+    1.0033,
+    1.0028,
+    1.0024,
+    1.0019,
+    1.0016,
+    1.0013,
+    1.001,
+    1.0008,
+    1.0006,
+    1.0004,
+    1.0003,
+    1.0001,
+    1
+  );
+  --md-sys-motion-duration-slow-spatial: 660ms;
   --md-sys-motion-easing-slow-spatial: var(--md-sys-motion-timing-function-slow-spatial)
     var(--md-sys-motion-duration-slow-spatial);
 
-  /* Standard easing — md.sys.motion.easing.standard, cubic-bezier(0.2, 0, 0, 1) per
-     m3.material.io/styles/motion/easing-and-duration/tokens-specs. Same curve across all
-     three durations; only the duration changes per tier. */
-  --md-sys-motion-timing-function-fast: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration-fast: 150ms;
-  --md-sys-motion-easing-fast: var(--md-sys-motion-timing-function-fast)
-    var(--md-sys-motion-duration-fast);
-
-  --md-sys-motion-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration: 200ms;
-  --md-sys-motion-easing: var(--md-sys-motion-timing-function) var(--md-sys-motion-duration);
+  --md-sys-motion-timing-function-fast-effects-spring: linear(
+    0,
+    0.1389,
+    0.3737,
+    0.5809,
+    0.7331,
+    0.8356,
+    0.9011,
+    0.9416,
+    0.966,
+    0.9804,
+    0.9888,
+    0.9936,
+    0.9964,
+    0.998,
+    0.9989,
+    0.9994,
+    0.9997,
+    0.9998,
+    1
+  );
+  --md-sys-motion-duration-fast-effects-spring: 190ms;
+  --md-sys-motion-easing-fast-effects-spring: var(
+      --md-sys-motion-timing-function-fast-effects-spring
+    )
+    var(--md-sys-motion-duration-fast-effects-spring);
 
-  --md-sys-motion-timing-function-slow: cubic-bezier(0.2, 0, 0, 1);
-  --md-sys-motion-duration-slow: 300ms;
-  --md-sys-motion-easing-slow: var(--md-sys-motion-timing-function-slow)
-    var(--md-sys-motion-duration-slow);
+  --md-sys-motion-timing-function-effects-spring: linear(
+    0,
+    0.0657,
+    0.2023,
+    0.354,
+    0.4947,
+    0.6144,
+    0.7111,
+    0.7866,
+    0.8442,
+    0.8873,
+    0.9191,
+    0.9423,
+    0.9591,
+    0.9711,
+    0.9797,
+    0.9858,
+    0.9901,
+    0.9931,
+    0.9952,
+    0.9967,
+    0.9977,
+    0.9984,
+    0.9989,
+    0.9993,
+    0.9995,
+    0.9996,
+    1
+  );
+  --md-sys-motion-duration-effects-spring: 270ms;
+  --md-sys-motion-easing-effects-spring: var(--md-sys-motion-timing-function-effects-spring)
+    var(--md-sys-motion-duration-effects-spring);
 
-  --md-sys-motion-timing-function-emphasized: linear(
+  --md-sys-motion-timing-function-slow-effects-spring: linear(
     0,
-    0.034 6%,
-    0.073 9%,
-    0.126 11%,
-    0.194 13%,
-    0.273 15%,
-    0.351 16%,
-    0.541 18%,
-    0.652 20%,
-    0.755 24%,
-    0.839 30%,
-    0.91 39%,
-    0.959 53%,
-    0.989 72%,
+    0.0349,
+    0.1158,
+    0.2173,
+    0.3239,
+    0.4265,
+    0.5204,
+    0.6034,
+    0.675,
+    0.7357,
+    0.7865,
+    0.8285,
+    0.8629,
+    0.8908,
+    0.9134,
+    0.9315,
+    0.946,
+    0.9576,
+    0.9667,
+    0.974,
+    0.9797,
+    0.9841,
+    0.9877,
+    0.9904,
+    0.9926,
+    0.9942,
+    0.9955,
+    0.9965,
+    0.9973,
+    0.9979,
+    0.9984,
+    0.9988,
+    0.9991,
+    0.9993,
+    0.9994,
+    0.9996,
     1
   );
-  --md-sys-motion-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
-  --md-sys-motion-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --md-sys-motion-duration-slow-effects-spring: 370ms;
+  --md-sys-motion-easing-slow-effects-spring: var(
+      --md-sys-motion-timing-function-slow-effects-spring
+    )
+    var(--md-sys-motion-duration-slow-effects-spring);
+  /* @generated:springs:end */
+}
+
+/*
+  One utility per Expressive spring, setting duration + timing function together. Pair with a
+  Tailwind transition-property utility: `transition-colors md-sys-motion-fast-effects`.
+  They set Tailwind's own --tw-duration/--tw-ease, so they win over `transition-*` regardless of
+  source order.
+
+  - spatial: position, size, shape (transform, width, top, border-radius…). Overshoots slightly.
+  - effects: color, opacity, shadow. Critically damped, never overshoots.
+  - fast-*: small parts and direct feedback (handles, indicators, hover/press); default: component
+    containers; slow-*: large or full-screen surfaces.
+*/
+@utility md-sys-motion-fast-spatial {
+  --tw-duration: var(--md-sys-motion-duration-fast-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-fast-spatial);
+  transition-duration: var(--md-sys-motion-duration-fast-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-fast-spatial);
+}
+@utility md-sys-motion-spatial {
+  --tw-duration: var(--md-sys-motion-duration-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-spatial);
+  transition-duration: var(--md-sys-motion-duration-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-spatial);
+}
+@utility md-sys-motion-slow-spatial {
+  --tw-duration: var(--md-sys-motion-duration-slow-spatial);
+  --tw-ease: var(--md-sys-motion-timing-function-slow-spatial);
+  transition-duration: var(--md-sys-motion-duration-slow-spatial);
+  transition-timing-function: var(--md-sys-motion-timing-function-slow-spatial);
+}
+@utility md-sys-motion-fast-effects {
+  --tw-duration: var(--md-sys-motion-duration-fast-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-fast-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-fast-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-fast-effects-spring);
+}
+@utility md-sys-motion-effects {
+  --tw-duration: var(--md-sys-motion-duration-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-effects-spring);
+}
+@utility md-sys-motion-slow-effects {
+  --tw-duration: var(--md-sys-motion-duration-slow-effects-spring);
+  --tw-ease: var(--md-sys-motion-timing-function-slow-effects-spring);
+  transition-duration: var(--md-sys-motion-duration-slow-effects-spring);
+  transition-timing-function: var(--md-sys-motion-timing-function-slow-effects-spring);
 }