@spectral_labs/ui 1.1.2 → 1.2.1

package/dist/components/tabs/__tests__/tabs.test.svelte.js

@@ -1,5 +1,5 @@
 import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import TabsRoot from '../components/tabs-root.svelte';
 import TabsTest from './TabsTest.svelte';
 describe('tabs', () => {
@@ -148,4 +148,80 @@ describe('tabs', () => {
         flushSync();
         expect(tabs[1]?.getAttribute('aria-selected')).toBe('true');
     });
+    // -------------------------------------------------------------------------
+    // overflow prop (mobile overflow strategy)
+    //
+    // Default is 'scroll' so long labels never silently truncate; consumers can
+    // opt into 'wrap' for multi-row pill layouts. When the active tab changes,
+    // the list scrolls it into view via `scrollIntoView` so the user is never
+    // looking at an out-of-viewport active tab.
+    // -------------------------------------------------------------------------
+    describe('overflow prop', () => {
+        it('default overflow="scroll" emits data-overflow="scroll" on tablist', () => {
+            setup();
+            const tablist = target.querySelector('[role="tablist"]');
+            expect(tablist.getAttribute('data-overflow')).toBe('scroll');
+        });
+        it('overflow="wrap" emits data-overflow="wrap" on tablist', () => {
+            setup({ overflow: 'wrap' });
+            const tablist = target.querySelector('[role="tablist"]');
+            expect(tablist.getAttribute('data-overflow')).toBe('wrap');
+        });
+        it('vertical + default overflow still emits data-overflow="scroll" alongside data-orientation', () => {
+            setup({ orientation: 'vertical' });
+            const tablist = target.querySelector('[role="tablist"]');
+            expect(tablist.getAttribute('data-overflow')).toBe('scroll');
+            expect(tablist.getAttribute('data-orientation')).toBe('vertical');
+        });
+        it('changing the active tab calls scrollIntoView on the newly active trigger when overflow="scroll"', () => {
+            // jsdom does not implement scrollIntoView — install a mock on the
+            // prototype so the component's call hits our spy instead of throwing.
+            const original = HTMLElement.prototype.scrollIntoView;
+            const spy = vi.fn();
+            HTMLElement.prototype.scrollIntoView = spy;
+            try {
+                setup({ value: 'tab1' });
+                const tabs = target.querySelectorAll('[role="tab"]');
+                spy.mockClear(); // ignore any call from the initial mount
+                tabs[1].click();
+                flushSync();
+                // The spy should have been called on the new active trigger with a
+                // sensible config that brings it into the viewport without scrolling
+                // the page vertically.
+                expect(spy).toHaveBeenCalled();
+                const lastCall = spy.mock.calls.at(-1);
+                const arg = lastCall?.[0];
+                expect(arg).toBeDefined();
+                expect(typeof arg).toBe('object');
+                expect(arg).toMatchObject({
+                    inline: expect.stringMatching(/^(nearest|center|start|end)$/),
+                    block: 'nearest',
+                });
+                // And the call target was the now-active trigger, not an arbitrary node.
+                const callTarget = spy.mock.contexts.at(-1);
+                expect(callTarget?.getAttribute('data-state')).toBe('active');
+            }
+            finally {
+                ;
+                HTMLElement.prototype.scrollIntoView = original;
+            }
+        });
+        it('overflow="wrap" does NOT call scrollIntoView on tab change (wrap layout shows all tabs)', () => {
+            const original = HTMLElement.prototype.scrollIntoView;
+            const spy = vi.fn();
+            HTMLElement.prototype.scrollIntoView = spy;
+            try {
+                setup({ value: 'tab1', overflow: 'wrap' });
+                const tabs = target.querySelectorAll('[role="tab"]');
+                spy.mockClear();
+                tabs[1].click();
+                flushSync();
+                expect(spy).not.toHaveBeenCalled();
+            }
+            finally {
+                ;
+                HTMLElement.prototype.scrollIntoView = original;
+            }
+        });
+    });
 });

package/dist/components/tabs/components/tabs-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsContentProps } from '../types.js'
   import { getTabsContext } from '../tabs.svelte.js'
 
@@ -11,7 +11,7 @@
 {#if isActive}
   <div
     class="sp-tabs-content {className ?? ''}"
-    role='tabpanel'
+    role="tabpanel"
     tabindex={0}
     data-state={isActive ? 'active' : 'inactive'}
   >

package/dist/components/tabs/components/tabs-list.svelte

@@ -1,9 +1,9 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsListProps } from '../types.js'
   import { RovingFocusGroup } from '../../../internal/roving-focus/index.js'
   import { getTabsContext } from '../tabs.svelte.js'
 
-  const { class: className, children }: TabsListProps = $props()
+  const { overflow = 'scroll', class: className, children }: TabsListProps = $props()
 
   const ctx = getTabsContext()
 
@@ -16,27 +16,50 @@
   let listEl: HTMLElement | undefined = $state()
 
   function onkeydown(event: KeyboardEvent) {
-    if (!listEl)
-      return
+    if (!listEl) return
     roving.handleKeydown(listEl, event)
 
     if (ctx.activationMode === 'automatic') {
       // In automatic mode, focus activates the tab immediately
-      const focused = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null
+      const focused = (
+        typeof document !== 'undefined' ? document.activeElement : null
+      ) as HTMLElement | null
       if (focused?.hasAttribute('data-roving-focus-item')) {
         focused.click()
       }
     }
   }
+
+  // When `overflow="scroll"`, the active trigger may sit outside the visible
+  // viewport (especially on mobile after a tab is selected via list-restored
+  // state or via keyboard navigation). Re-run scrollIntoView on every value
+  // change so the user never looks at an out-of-viewport active tab. We use
+  // `inline: 'nearest'` + `block: 'nearest'` so the scroll is minimal and
+  // never moves the page vertically when the tablist is horizontal.
+  $effect(() => {
+    if (overflow !== 'scroll') return
+    // Track ctx.value to retrigger on activation changes.
+    const _activeValue = ctx.value
+    if (!listEl) return
+    const active = listEl.querySelector<HTMLElement>('[role="tab"][data-state="active"]')
+    if (!active) return
+    // SSR-safe: $effect only runs in the browser, but scrollIntoView may still
+    // be undefined in jsdom-based tests — guard before calling.
+    if (typeof active.scrollIntoView !== 'function') return
+    active.scrollIntoView({ inline: 'nearest', block: 'nearest' })
+    // `_activeValue` is read above strictly for the reactive subscription.
+    void _activeValue
+  })
 </script>
 
 <div
   bind:this={listEl}
   class="sp-tabs-list {className ?? ''}"
-  role='tablist'
+  role="tablist"
   aria-orientation={ctx.orientation}
   tabindex={0}
   data-orientation={ctx.orientation}
+  data-overflow={overflow}
   {onkeydown}
 >
   {#if children}{@render children()}{/if}
@@ -54,4 +77,36 @@
     border-bottom: none;
     border-right: 1px solid var(--sp-sys-color-outline-variant);
   }
+
+  /* `overflow="scroll"` (default): horizontal scroll on horizontal tablist,
+     vertical scroll on vertical tablist. Native scrollbar hidden — the
+     active trigger is brought into view programmatically via scrollIntoView.
+     The tablist itself keeps its tabindex={0}, so it remains keyboard-scrollable. */
+  .sp-tabs-list[data-overflow='scroll'][data-orientation='horizontal'] {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .sp-tabs-list[data-overflow='scroll'][data-orientation='vertical'] {
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .sp-tabs-list[data-overflow='scroll']::-webkit-scrollbar {
+    display: none; /* WebKit */
+  }
+
+  /* `overflow="wrap"`: triggers wrap onto multiple lines. We also unset
+     `white-space: nowrap` on every trigger (set in tabs-trigger.svelte) via
+     a scoped `:global` selector — without this the trigger labels would
+     still refuse to wrap inside their pill, defeating the point of wrap. */
+  .sp-tabs-list[data-overflow='wrap'] {
+    flex-wrap: wrap;
+  }
+
+  .sp-tabs-list[data-overflow='wrap'] :global(.sp-tabs-trigger) {
+    white-space: normal;
+  }
 </style>

package/dist/components/tabs/components/tabs-list.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tabs/components/tabs-list.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AA4ChD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tabs-list.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tabs/components/tabs-list.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAkEhD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/tabs/components/tabs-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsProps } from '../types.js'
   import { setTabsContext } from '../tabs.svelte.js'
 

package/dist/components/tabs/components/tabs-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsTriggerProps } from '../types.js'
   import { getTabsContext } from '../tabs.svelte.js'
 
@@ -8,15 +8,14 @@
   const isActive = $derived(ctx.value === value)
 
   function onclick() {
-    if (!disabled)
-      ctx.setValue(value)
+    if (!disabled) ctx.setValue(value)
   }
 </script>
 
 <button
   class="sp-tabs-trigger {className ?? ''}"
-  type='button'
-  role='tab'
+  type="button"
+  role="tab"
   aria-selected={isActive}
   tabindex={isActive ? 0 : -1}
   {disabled}

package/dist/components/tabs/components/tabs-trigger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tabs/components/tabs-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AA0BnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"tabs-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/tabs/components/tabs-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAyBnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/tabs/index.d.ts

@@ -2,5 +2,5 @@ export { default as Content } from './components/tabs-content.svelte';
 export { default as List } from './components/tabs-list.svelte';
 export { default as Root } from './components/tabs-root.svelte';
 export { default as Trigger } from './components/tabs-trigger.svelte';
-export type { TabsActivationMode, TabsContentProps, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps, } from './types.js';
+export type { TabsActivationMode, TabsContentProps, TabsListOverflow, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAA;AACrE,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EACT,gBAAgB,GACjB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAA;AACrE,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EACT,gBAAgB,GACjB,MAAM,YAAY,CAAA"}

package/dist/components/tabs/types.d.ts

@@ -1,6 +1,27 @@
 import type { Snippet } from 'svelte';
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type TabsActivationMode = 'automatic' | 'manual';
+/**
+ * Strategy used by `Tabs.List` when its triggers exceed the available space.
+ *
+ * - `'scroll'` (default): the tablist becomes horizontally (or vertically, when
+ *   `orientation="vertical"`) scrollable, hides its native scrollbar, and
+ *   programmatically scrolls the newly active trigger into view via
+ *   `scrollIntoView({ inline: 'nearest', block: 'nearest' })` on every value
+ *   change. Suited to narrow viewports (mobile) and to surfaces with an
+ *   unknown number of tabs.
+ * - `'wrap'`: the tablist wraps its triggers onto multiple lines and unsets
+ *   `white-space: nowrap` on the trigger labels so long labels remain
+ *   readable on multi-row. No `scrollIntoView` is performed because every
+ *   trigger is already visible.
+ *
+ * The previous behaviour (no overflow handling at all — long labels silently
+ * truncated and the user had no scroll affordance) is intentionally not
+ * exposed in the API: consumers who need it can still use `class` to override
+ * the styling locally, but the design system does not offer a mode whose
+ * documented behaviour is "silently broken on narrow viewports".
+ */
+export type TabsListOverflow = 'scroll' | 'wrap';
 export interface TabsProps {
     /** The currently active tab value. */
     value?: string;
@@ -20,6 +41,11 @@ export interface TabsProps {
     children?: Snippet;
 }
 export interface TabsListProps {
+    /**
+     * Strategy used when triggers exceed the available space. Defaults to
+     * `'scroll'`. See {@link TabsListOverflow}.
+     */
+    overflow?: TabsListOverflow;
     /** Additional CSS class. */
     class?: string;
     /** Content snippet. */

package/dist/components/tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AACvD,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEvD,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AACvD,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEvD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEhD,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/textarea/__tests__/textarea.test.svelte.js

@@ -1,6 +1,10 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { mount, unmount } from 'svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 import Textarea from '../textarea.svelte';
+const componentSource = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../textarea.svelte'), 'utf8');
 describe('textarea', () => {
     let target;
     let instance;
@@ -23,4 +27,29 @@ describe('textarea', () => {
         setup({ invalid: true });
         expect(target.querySelector('textarea')?.getAttribute('aria-invalid')).toBe('true');
     });
+    // ── iOS Safari focus-zoom contract ────────────────────────────────
+    // Real WebKit focus-zoom cannot be reproduced in jsdom. These tests
+    // lock the CSS contract that prevents the regression on `size="sm"` :
+    // the `sm` typography stays token-driven for desktop, and a clamp to
+    // >= 1rem is applied on coarse pointers (touch / iOS). Other sizes
+    // inherit the base 1rem and are already iOS-safe.
+    describe('iOS Safari focus-zoom contract (size="sm")', () => {
+        it('keeps fine-pointer typography on the body-medium token', () => {
+            expect(componentSource).toMatch(/\.sp-textarea\.sm\s*\{[^}]*font-size:\s*var\(--sp-sys-typescale-body-medium-size[^}]*\}/);
+        });
+        it('clamps the sm textarea to at least 1rem on coarse pointers', () => {
+            expect(componentSource).toMatch(/@media\s*\(pointer:\s*coarse\)\s*\{[\s\S]*?\.sp-textarea\.sm\s*\{[^}]*font-size:\s*max\(1rem,[^)]*\)[\s\S]*?\}/);
+        });
+        it('only the sm variant is targeted by the coarse-pointer clamp', () => {
+            // The clamp must target `.sp-textarea.sm` and only `.sp-textarea.sm`.
+            // Other sizes inherit the base 1rem and must not get an override.
+            const coarseRules = [
+                ...componentSource.matchAll(/@media\s*\(pointer:\s*coarse\)\s*\{[^}]*\{/g),
+            ];
+            expect(coarseRules.length).toBe(1);
+            expect(coarseRules[0][0]).toContain('.sp-textarea.sm');
+            expect(coarseRules[0][0]).not.toContain('.sp-textarea.md');
+            expect(coarseRules[0][0]).not.toContain('.sp-textarea.lg');
+        });
+    });
 });

package/dist/components/textarea/textarea.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TextareaProps } from './types.js'
 
   let {
@@ -48,6 +48,19 @@
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
   }
 
+  /* iOS Safari focus zoom : WebKit auto-zooms the viewport when a focused
+     form control's computed font-size is < 16px. The `sm` size renders
+     at `body-medium` (14px by default), which crosses that threshold.
+     Clamp to at least 1rem on coarse pointers (touch / iOS) so dense
+     forms on mobile stay usable; `max()` preserves any theme that may
+     override `--sp-sys-typescale-body-medium-size` upward. Other sizes
+     inherit the base 1rem and are already iOS-safe. */
+  @media (pointer: coarse) {
+    .sp-textarea.sm {
+      font-size: max(1rem, var(--sp-sys-typescale-body-medium-size, 0.875rem));
+    }
+  }
+
   .sp-textarea.md {
     min-height: 96px;
   }

package/dist/components/time-field/__tests__/TimeFieldTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TimeValue } from '../types.js'
   import * as TimeField from '../index.js'
 

package/dist/components/time-field/__tests__/time-field.test.svelte.js

@@ -29,10 +29,9 @@ describe('timeField', () => {
     // 3. Segments include hour and minute labels
     it('segments include hour and minute labels', () => {
         setup();
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]'))
-            .map(s => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some(l => l && (l.includes('hour') || l.includes('heure')))).toBe(true);
-        expect(labels.some(l => l && l.includes('minute'))).toBe(true);
+        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
+        expect(labels.some((l) => l && (l.includes('hour') || l.includes('heure')))).toBe(true);
+        expect(labels.some((l) => l && l.includes('minute'))).toBe(true);
     });
     // 4. Renders value when provided (minute field shows 30)
     it('renders value when provided', () => {
@@ -76,9 +75,8 @@ describe('timeField', () => {
     // 9. granularity="second" adds seconds segment
     it('granularity="second" adds seconds segment', () => {
         setup({ granularity: 'second', value: { hour: 14, minute: 30, second: 45 } });
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]'))
-            .map(s => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some(l => l && l.includes('second'))).toBe(true);
+        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
+        expect(labels.some((l) => l && l.includes('second'))).toBe(true);
     });
     // 10. disabled marks group with data-disabled
     it('disabled marks group as disabled', () => {
@@ -90,7 +88,7 @@ describe('timeField', () => {
     it('readonly marks segments as readonly', () => {
         setup({ readonly: true });
         const segments = target.querySelectorAll('[role="spinbutton"]');
-        const readonlySegments = Array.from(segments).filter(s => s.getAttribute('aria-readonly') === 'true');
+        const readonlySegments = Array.from(segments).filter((s) => s.getAttribute('aria-readonly') === 'true');
         expect(readonlySegments.length).toBeGreaterThanOrEqual(2);
     });
     // 12. group has aria-label