@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/nav/tabs/TabHolder.svelte

@@ -4,15 +4,18 @@ Material 3 Tabs container.
 
 Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
 Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+Switching panels runs the M3 lateral transition: the new panel pushes the old one out in the
+direction of the selected tab.
 
 @see https://m3.material.io/components/tabs/overview
 -->
 <script lang="ts">
+  import { lateral } from '../../../animation/index.js';
   import { tabHolder } from './theme.js';
   import type { TabHolderProps } from './types.js';
   import Tab from './Tab.svelte';
   import { Tabs } from 'bits-ui';
-  import type { Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
 
   let {
     items,
@@ -27,9 +30,28 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
   const idx = $derived(items.findIndex((i) => i.value === value));
   const count = $derived(items.length);
   const { base, bar } = $derived(tabHolder({ rounded }));
+
+  let panels = $state<HTMLElement>();
+
+  /**
+   * Tabs are peers, so switching panels is the M3 lateral transition: the new panel pushes the
+   * old one out toward the side of the newly selected tab. Navigation (href) tabs have no panels
+   * here — the route change is the app's to animate.
+   * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+   */
+  const select = (next: string) => {
+    const from = idx;
+    const to = items.findIndex((i) => i.value === next);
+    const update = async () => {
+      value = next;
+      await tick();
+    };
+    if (!children || !panels || from === -1 || to === -1 || from === to) return void update();
+    lateral(update, { target: panels, direction: to > from ? 'forward' : 'backward' });
+  };
 </script>
 
-<Tabs.Root bind:value {onValueChange} {activationMode}>
+<Tabs.Root bind:value={() => value, select} {onValueChange} {activationMode}>
   <Tabs.List class={base()}>
     {#each items as item (item)}
       <Tab {...item} {variant} />
@@ -41,5 +63,9 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
     ></div>
   </Tabs.List>
 
-  {@render children?.()}
+  {#if children}
+    <div bind:this={panels}>
+      {@render children()}
+    </div>
+  {/if}
 </Tabs.Root>

package/dist/components/nav/tabs/TabHolder.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { TabHolderProps } from './types.js';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = TabHolderProps & {
     children?: Snippet;
 };
@@ -8,6 +8,8 @@ type $$ComponentProps = TabHolderProps & {
  *
  * Wraps bits-ui Tabs.Root + Tabs.List and renders a sliding active indicator.
  * Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
+ * Switching panels runs the M3 lateral transition: the new panel pushes the old one out in the
+ * direction of the selected tab.
  *
  * @see https://m3.material.io/components/tabs/overview
  */

package/dist/components/nav/tabs/Tabs.mdx

@@ -0,0 +1,62 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TabsStories from './Tabs.stories.svelte';
+
+<Meta of={TabsStories} />
+
+<Title />
+
+<Subtitle>Tabs organise related content across views at the same level.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/tabs/specs) ·
+`import { TabHolder, TabContent } from '@noxlovette/material';`
+
+<Canvas of={TabsStories.Playground} />
+
+<Controls of={TabsStories.Playground} />
+
+## Anatomy
+
+- **`TabHolder`** renders the tab row from an `items` array, plus the sliding active indicator.
+- **`Tab`** is one trigger, rendered by `TabHolder` for each item: an `<a>` when the item has
+  `href`, a `<button>` otherwise.
+- **`TabContent`** is the panel matched to a tab by `value`, for content tabs only.
+
+## Content tabs
+
+Give each item a `value` and a matching `TabContent`:
+
+```svelte
+<TabHolder
+  bind:value
+  items={[
+    { value: 'flights', name: 'Flights', iconProps: { name: 'flight' } },
+    { value: 'trips', name: 'Trips', iconProps: { name: 'luggage' } }
+  ]}
+/>
+
+<TabContent value="flights">Flights panel</TabContent>
+<TabContent value="trips">Trips panel</TabContent>
+```
+
+## Navigation tabs
+
+Give each item an `href` instead of a `value`, and leave out `TabContent`. The tabs then route
+between pages.
+
+<Canvas of={TabsStories.NavigationTabsHref} />
+
+## Motion
+
+Tabs are peers, so switching panels runs the M3 lateral transition: the new panel pushes the old
+one out toward the selected tab's side. The indicator slides on the fast spatial spring. Nothing
+needs configuring.
+
+Navigation tabs have no panels inside `TabHolder`, so animate the route change yourself with
+`lateral()` from `@noxlovette/material`.
+
+## Accessibility
+
+- **Keyboard.** Arrow keys move between tabs. With `activationMode="automatic"`, focus selects;
+  with `manual`, Enter or Space does.
+- **Selection.** The active tab gets `aria-selected`; the indicator is decoration.
+- **Disabled tabs** are skipped by the arrow keys.

package/dist/components/nav/tabs/Tabs.stories.svelte

@@ -32,7 +32,7 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="flex flex-col gap-4">
+    <div class="gap-spacing-200 flex flex-col">
       <TabHolder {...args} {items}>
         <TabContent value="flights"><Body>Flights panel content.</Body></TabContent>
         <TabContent value="trips"><Body>Trips panel content.</Body></TabContent>

package/dist/components/nav/tabs/theme.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',
-        bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform md-sys-motion-fast-spatial'
+        bar: 'absolute bottom-spacing-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform md-sys-motion-fast-spatial'
     },
     variants: {
         rounded: {
@@ -19,15 +19,15 @@ export const tab = tv({
             'data-[state=inactive]:text-md-sys-color-on-surface-variant'
         ].join(' '),
         label: 'md-sys-typescale-title-small',
-        icon: 'size-6 text-[24px]'
+        icon: 'size-spacing-300 text-[24px]'
     },
     variants: {
         variant: {
             primary: {
-                base: 'h-16 gap-1 py-3'
+                base: 'h-spacing-800 gap-spacing-50 py-spacing-150'
             },
             secondary: {
-                base: 'h-12 py-3',
+                base: 'h-spacing-600 py-spacing-150',
                 icon: 'hidden'
             }
         },

package/dist/components/pill/Pill.mdx

@@ -0,0 +1,32 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PillStories from './Pill.stories.svelte';
+
+<Meta of={PillStories} />
+
+<Title />
+
+<Subtitle>A small rounded label for short static text: a status, a count, a category.</Subtitle>
+
+`import { Pill } from '@noxlovette/material';`
+
+<Canvas of={PillStories.Playground} />
+
+<Controls of={PillStories.Playground} />
+
+## Pill or Chip
+
+`Pill` is not an M3 component. It renders a plain `<div>` with no click handler, remove button or
+selected state. For anything the user interacts with, use `Chip`, which implements M3 chips.
+
+## Variants
+
+The system variants (`primary`, `secondary-container`, and so on) use M3 color roles, so they
+follow the theme. `yellow` and `green` are fixed colors for status labels like "New" or "Beta"
+that should look the same in every theme.
+
+<Canvas of={PillStories.Variants} />
+
+## Accessibility
+
+- **Not a control.** A pill has no role and isn't focusable, so never make one clickable.
+- **Contrast.** Each system variant pairs a container with its `on-*` role.

package/dist/components/pill/Pill.stories.svelte

@@ -32,7 +32,7 @@
 <Story name="Playground">New</Story>
 
 <Story name="Variants" asChild>
-  <div class="flex flex-wrap items-center gap-3 p-6">
+  <div class="gap-spacing-150 p-spacing-300 flex flex-wrap items-center">
     <Pill variant="primary">Primary</Pill>
     <Pill variant="secondary">Secondary</Pill>
     <Pill variant="tertiary">Tertiary</Pill>

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

@@ -14,7 +14,7 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
         yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
         green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap", {
+}, undefined, "relative inline-flex items-center justify-center px-spacing-200 py-spacing-75 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap", {
     variant: {
         primary: "md-component-button-filled-primary";
         secondary: "md-component-button-filled-secondary";

package/dist/components/pill/theme.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const pill = tv({
-    base: 'relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
+    base: 'relative inline-flex items-center justify-center px-spacing-200 py-spacing-75 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
     variants: {
         variant: {
             primary: 'md-component-button-filled-primary',

package/dist/components/progress/LinearProgress.svelte

@@ -35,7 +35,7 @@ The track always keeps a gap either side of the bar.
   const linearProgress = tv({
     slots: {
       container: 'relative overflow-hidden',
-      segment: 'absolute inset-y-0 rounded-full',
+      segment: 'absolute inset-y-spacing-0 rounded-full',
       bar: 'bg-md-sys-color-primary',
       track: 'bg-md-sys-color-secondary-container'
     }

package/dist/components/progress/Progress.mdx

@@ -0,0 +1,50 @@
+import { Meta, Title, Subtitle, Canvas } from '@storybook/addon-docs/blocks';
+import * as ProgressStories from './Progress.stories.svelte';
+
+<Meta of={ProgressStories} />
+
+<Title />
+
+<Subtitle>Progress indicators show the status of an ongoing process.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/progress-indicators/specs) ·
+`import { CircularProgress, LinearProgress, WavyLinearProgress } from '@noxlovette/material';`
+
+## Three components
+
+There's no shared `variant` prop. Pick the component for the shape you need:
+
+- **`CircularProgress`** and **`LinearProgress`** are M3's circular and linear indicators.
+- **`WavyLinearProgress`** is this library's own sine-wave linear indicator, inspired by M3
+  Expressive but not a literal reproduction of the spec.
+
+All three take the same `percent`: a number from 0 to 100 for a determinate indicator, or
+omitted (or `null`) for an indeterminate one.
+
+```svelte
+<CircularProgress percent={uploadPercent} />
+<LinearProgress percent={uploadPercent} class="w-full" />
+
+<!-- Indeterminate: omit percent -->
+<CircularProgress />
+```
+
+<Canvas of={ProgressStories.CircularDeterminate} />
+
+<Canvas of={ProgressStories.CircularIndeterminate} />
+
+<Canvas of={ProgressStories.LinearDeterminate} />
+
+<Canvas of={ProgressStories.WavyDeterminate} />
+
+## Motion
+
+A determinate indicator springs to each new `percent` on a critically damped spring, so progress
+never visibly runs backwards. Indeterminate indicators animate continuously.
+
+## Accessibility
+
+- **Role.** Each renders `role="progressbar"`, with `aria-valuenow` set from `percent` and left
+  out when indeterminate.
+- **Label.** None of them says what is loading. Give each an `aria-label`, or put visible text
+  next to it.

package/dist/components/progress/Progress.stories.svelte

@@ -23,42 +23,42 @@
 
 <Story name="Circular (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center justify-center p-6">
+    <div class="p-spacing-300 flex items-center justify-center">
       <CircularProgress percent={args.percent} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Circular (Indeterminate)" asChild>
-  <div class="flex items-center justify-center p-6">
+  <div class="p-spacing-300 flex items-center justify-center">
     <CircularProgress />
   </div>
 </Story>
 
 <Story name="Linear (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center p-6">
+    <div class="p-spacing-300 flex items-center">
       <LinearProgress percent={args.percent} class="w-full max-w-sm" />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Linear (Indeterminate)" asChild>
-  <div class="flex items-center p-6">
+  <div class="p-spacing-300 flex items-center">
     <LinearProgress class="w-full max-w-sm" />
   </div>
 </Story>
 
 <Story name="Wavy (Determinate)">
   {#snippet template(args)}
-    <div class="flex items-center p-6">
+    <div class="p-spacing-300 flex items-center">
       <WavyLinearProgress percent={args.percent} class="w-full max-w-sm" />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Wavy (Indeterminate)" asChild>
-  <div class="flex items-center p-6">
+  <div class="p-spacing-300 flex items-center">
     <WavyLinearProgress class="w-full max-w-sm" />
   </div>
 </Story>

package/dist/components/snackbar/Snackbar.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SnackbarStories from './Snackbar.stories.svelte';
+
+<Meta of={SnackbarStories} />
+
+<Title />
+
+<Subtitle>
+  Snackbars show a brief message about an app process at the bottom of the screen.
+</Subtitle>
+
+[M3 spec](https://m3.material.io/components/snackbar/specs) ·
+`import { Snackbar } from '@noxlovette/material';`
+
+<Canvas of={SnackbarStories.Playground} />
+
+<Controls of={SnackbarStories.Playground} />
+
+## Showing a snackbar
+
+There's no `toast()` function or queue. Mount one `Snackbar`, bind its `message`, and assign to
+that state to show it:
+
+```svelte
+<script lang="ts">
+  import { Snackbar } from '@noxlovette/material';
+
+  let snackbarMessage = $state('');
+</script>
+
+<button onclick={() => (snackbarMessage = 'Changes saved.')}>Save</button>
+
+<Snackbar bind:message={snackbarMessage} label="Undo" callback={undoSave} />
+```
+
+When `message` becomes non-empty (a string or a snippet), the snackbar slides in. After 4
+seconds it hides and resets a string `message` to `''`, so the same text can be shown again. With
+`static`, it stays until the user closes it.
+
+`label` and `callback` add an action button.
+
+<Canvas of={SnackbarStories.Triggered} />
+
+<Canvas of={SnackbarStories.WithAction} />
+
+## Accessibility
+
+- **Timing.** A non-static snackbar disappears on its own, so never make it the only place
+  critical information appears.
+- **Dismiss.** `showClose` (on by default) renders a close button labelled "Dismiss snackbar".
+- **One at a time.** Mount one snackbar per region and drive it through one binding; stacking
+  instances isn't supported.

package/dist/components/snackbar/Snackbar.stories.svelte

@@ -9,10 +9,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Snackbar from './Snackbar.svelte';
-</script>
-
-<script lang="ts">
-  import Button from '../buttons/Button.svelte';
 
   const { Story } = defineMeta({
     title: 'Feedback/Snackbar',
@@ -28,6 +24,10 @@
       static: false
     }
   });
+</script>
+
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
 
   let playgroundMessage = $state('This is a snackbar message.');
   let triggeredMessage = $state('');
@@ -50,7 +50,7 @@
 </Story>
 
 <Story name="Triggered" asChild>
-  <div class="relative flex min-h-32 flex-col items-center justify-center gap-4">
+  <div class="gap-spacing-200 relative flex min-h-32 flex-col items-center justify-center">
     <Button
       variant="tonal"
       onclick={() => {

package/dist/components/snackbar/Snackbar.svelte

@@ -88,7 +88,7 @@ Snackbars provide brief messages about app processes at the bottom of the screen
 
       {#if showClose}
         <button
-          class="relative rounded-full p-1"
+          class="p-spacing-50 relative rounded-full"
           onclick={() => {
             dismissed = true;
             if (typeof message === 'string') {

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

@@ -2,7 +2,7 @@ import { type VariantProps } from 'tailwind-variants';
 export type SnackBarVariants = VariantProps<typeof snackbar>;
 export declare const snackbar: import("tailwind-variants").TVReturnType<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -13,7 +13,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {
@@ -24,7 +24,7 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     fixed: {
-        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        true: "fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2";
         false: "";
     };
 }, {

package/dist/components/snackbar/theme.js

@@ -1,15 +1,15 @@
 import { tv } from 'tailwind-variants';
 export const snackbar = tv({
     slots: {
-        base: 'rounded-xs relative min-h-12 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-2 pl-4 justify-between h-max py-3',
-        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-3 cursor-pointer ',
+        base: 'rounded-xs relative min-h-spacing-600 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-spacing-100 pl-spacing-200 justify-between h-max py-spacing-150',
+        label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
         actionWrapper: 'flex items-center z-40',
         supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',
-        icon: 'size-6 text-[24px] text-md-sys-color-inverse-on-surface mr-1 ml-3'
+        icon: 'size-spacing-300 text-[24px] text-md-sys-color-inverse-on-surface mr-spacing-50 ml-spacing-150'
     },
     variants: {
         fixed: {
-            true: 'fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2',
+            true: 'fixed bottom-20 md:bottom-spacing-300 left-1/2 -translate-x-1/2',
             false: ''
         }
     }

package/dist/components/table/Table.stories.svelte

@@ -11,6 +11,7 @@
 
   const { Story } = defineMeta({
     title: 'Table/Table',
+    tags: ['autodocs'],
     component: Table,
     argTypes: {
       rounded: { control: 'boolean' }

package/dist/components/table/TableHeader.svelte

@@ -25,7 +25,7 @@ and `sortDirection` props. Defaults to `scope="col"`.
 </script>
 
 <th {scope} class={header({ class: clsx(className) })} {...restProps}>
-  <span class="inline-flex items-center gap-1">
+  <span class="gap-spacing-50 inline-flex items-center">
     {@render children?.()}
     {#if sortable}
       <span

package/dist/components/table/theme.js

@@ -6,8 +6,8 @@ export const table = tv({
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',
         row: 'border-b border-md-sys-color-outline-variant transition-colors md-sys-motion-fast-effects focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-md-sys-color-primary',
-        cell: 'px-4 py-3 align-middle',
-        header: 'px-4 py-4 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface font-medium whitespace-nowrap'
+        cell: 'px-spacing-200 py-spacing-150 align-middle',
+        header: 'px-spacing-200 py-spacing-200 align-middle md-sys-typescale-label-large text-md-sys-color-on-surface whitespace-nowrap'
     },
     variants: {
         hoverable: {
@@ -43,7 +43,7 @@ export const table = tv({
         },
         sticky: {
             true: {
-                head: 'sticky top-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
+                head: 'sticky top-spacing-0 z-10 bg-md-sys-color-surface-container-high shadow-[0_1px_0_0_var(--md-sys-color-outline-variant)]'
             }
         }
     }

package/dist/components/time/TimeField.stories.svelte

@@ -9,6 +9,7 @@
 
   const { Story } = defineMeta({
     title: 'Time/TimeField',
+    tags: ['autodocs'],
     component: TimeField,
     argTypes: {
       label: { control: 'text' },
@@ -28,14 +29,14 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-xs p-8">
+    <div class="p-spacing-400 max-w-xs">
       <TimeField {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Near Bottom Edge" asChild>
-  <div class="flex min-h-dvh max-w-xs flex-col justify-end p-8">
+  <div class="p-spacing-400 flex min-h-dvh max-w-xs flex-col justify-end">
     <TimeField label="Time" value="18:45" />
   </div>
 </Story>

package/dist/components/time/TimeField.svelte

@@ -11,9 +11,11 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
   import Textfield from '../forms/textfield/Textfield.svelte';
   import TimepickerInput from './TimepickerInput.svelte';
   import { Popover } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { TimepickerLabels } from './types.js';
 
   let {
-    label = 'Время',
+    label = 'Time',
     value = $bindable(),
     required = false,
     disabled = false,
@@ -21,6 +23,8 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle = 'Pick date',
     name,
     leadingIconProps,
+    supportingText,
+    pickerLabels,
     ...restProps
   }: {
     /** The label for the text field. */
@@ -39,6 +43,10 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -58,21 +66,18 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
       {error}
       {leadingIconProps}
       class="pointer-events-none"
-      trailingIconProps={{ name: 'timer' }}
+      trailingIconProps={{ name: 'schedule' }}
       trailingOnClick={() => !disabled && (picker = !picker)}
+      {supportingText}
       {...restProps as any}
-    >
-      {#snippet supportingText()}
-        ЧЧ-ММ
-      {/snippet}
-    </Textfield>
+    />
 
     <Popover.Trigger {disabled}>
       {#snippet child({ props })}
         <button
           {...props}
           title="time-overlay"
-          class="absolute inset-0 cursor-pointer disabled:cursor-not-allowed"
+          class="inset-spacing-0 absolute cursor-pointer disabled:cursor-not-allowed"
           type="button"
           data-cy="calendar-time-toggle"
         ></button>
@@ -100,6 +105,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
             {@attach presence(() => open, enterExit.scale)}
           >
             <TimepickerInput
+              {...pickerLabels}
               time={value}
               close={() => (picker = false)}
               setTime={(t) => (value = t)}

package/dist/components/time/TimeField.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { TimepickerLabels } from './types.js';
 type $$ComponentProps = {
     /** The label for the text field. */
     label?: string;
@@ -16,6 +18,10 @@ type $$ComponentProps = {
     datePickerTitle?: string;
     /** Props for the leading icon. */
     leadingIconProps?: any;
+    /** Supporting text under the field. */
+    supportingText?: Snippet;
+    /** Headline, input and button strings for the picker overlay (English by default). */
+    pickerLabels?: TimepickerLabels;
 } & HTMLInputAttributes;
 /**
  * TimeField component provides a text input that opens a Timepicker overlay when interacted with.