@spectral_labs/ui 1.3.1 → 1.5.0

package/dist/components/combobox/components/combobox-item.svelte

@@ -55,7 +55,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border-radius: var(--sp-sys-shape-corner-xs, 4px);
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
     color: var(--sp-sys-color-on-surface);
     cursor: pointer;

package/dist/components/dropdown-menu/__tests__/DropdownMenuTest.svelte

@@ -2,24 +2,49 @@
   import DropdownMenuContent from '../components/dropdown-menu-content.svelte'
   import DropdownMenuItem from '../components/dropdown-menu-item.svelte'
   import DropdownMenuRoot from '../components/dropdown-menu-root.svelte'
+  import DropdownMenuSubContent from '../components/dropdown-menu-sub-content.svelte'
+  import DropdownMenuSubTrigger from '../components/dropdown-menu-sub-trigger.svelte'
+  import DropdownMenuSub from '../components/dropdown-menu-sub.svelte'
   import DropdownMenuTrigger from '../components/dropdown-menu-trigger.svelte'
 
   let {
     open = $bindable(false),
     portalTo,
     onOpenChange,
+    withSub = false,
+    subFirst = false,
+    subDisabled = false,
   }: {
     open?: boolean
     portalTo?: HTMLElement | string
     onOpenChange?: (open: boolean) => void
+    withSub?: boolean
+    subFirst?: boolean
+    subDisabled?: boolean
   } = $props()
 </script>
 
+{#snippet subBlock()}
+  <DropdownMenuSub>
+    <DropdownMenuSubTrigger disabled={subDisabled}>More options</DropdownMenuSubTrigger>
+    <DropdownMenuSubContent>
+      <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
+      <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
+    </DropdownMenuSubContent>
+  </DropdownMenuSub>
+{/snippet}
+
 <DropdownMenuRoot bind:open {onOpenChange}>
   <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
   <DropdownMenuContent {portalTo}>
+    {#if withSub && subFirst}
+      {@render subBlock()}
+    {/if}
     <DropdownMenuItem>Item 1</DropdownMenuItem>
     <DropdownMenuItem>Item 2</DropdownMenuItem>
     <DropdownMenuItem>Item 3</DropdownMenuItem>
+    {#if withSub && !subFirst}
+      {@render subBlock()}
+    {/if}
   </DropdownMenuContent>
 </DropdownMenuRoot>

package/dist/components/dropdown-menu/__tests__/dropdown-menu.test.svelte.js

@@ -60,4 +60,71 @@ describe('dropdown-menu', () => {
         flushSync();
         expect(calls).toEqual([true, false]);
     });
+    describe('subTrigger', () => {
+        function pressKey(key) {
+            const el = document.activeElement;
+            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+            flushSync();
+        }
+        it('participates in roving focus (data-roving-focus-item + tabindex -1)', () => {
+            setup({ open: true, withSub: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(subTrigger).toBeTruthy();
+            expect(subTrigger.hasAttribute('data-roving-focus-item')).toBe(true);
+            expect(subTrigger.getAttribute('tabindex')).toBe('-1');
+        });
+        it('carries both item and sub-trigger classes (visual parity hook)', () => {
+            setup({ open: true, withSub: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(subTrigger.classList.contains('sp-dropdown-menu-item')).toBe(true);
+            expect(subTrigger.classList.contains('sp-dropdown-sub-trigger')).toBe(true);
+        });
+        it('is autofocused on open when it is the first row', () => {
+            setup({ open: true, withSub: true, subFirst: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(document.activeElement).toBe(subTrigger);
+        });
+        it('is reached by ArrowDown/ArrowUp roving among plain items', () => {
+            setup({ open: true, withSub: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            // Autofocus lands on Item 1; sub-trigger is the 4th row.
+            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
+            pressKey('ArrowDown');
+            pressKey('ArrowDown');
+            pressKey('ArrowDown');
+            expect(document.activeElement).toBe(subTrigger);
+            pressKey('ArrowUp');
+            expect(document.activeElement?.textContent?.trim()).toBe('Item 3');
+        });
+        it('is skipped by autofocus and roving when disabled', () => {
+            setup({ open: true, withSub: true, subFirst: true, subDisabled: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(subTrigger.hasAttribute('data-disabled')).toBe(true);
+            // Autofocus skips the disabled sub-trigger even though it is first.
+            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
+            // Roving loops over the three plain items without ever landing on it.
+            pressKey('ArrowDown');
+            pressKey('ArrowDown');
+            pressKey('ArrowDown');
+            expect(document.activeElement?.textContent?.trim()).toBe('Item 1');
+            pressKey('ArrowUp');
+            expect(document.activeElement?.textContent?.trim()).toBe('Item 3');
+        });
+        it('opens the sub content on ArrowRight and reflects aria-expanded', () => {
+            setup({ open: true, withSub: true, subFirst: true });
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(document.activeElement).toBe(subTrigger);
+            expect(subTrigger.getAttribute('aria-expanded')).toBe('false');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            pressKey('ArrowRight');
+            expect(subTrigger.getAttribute('aria-expanded')).toBe('true');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
+        });
+        it('opens the sub content on Enter', () => {
+            setup({ open: true, withSub: true, subFirst: true });
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            pressKey('Enter');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
+        });
+    });
 });

package/dist/components/dropdown-menu/components/dropdown-menu-checkbox-item.svelte

@@ -57,7 +57,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border-radius: var(--sp-sys-shape-corner-xs, 4px);
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
     font-family: var(--sp-sys-typescale-body-medium-font, inherit);
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
     color: var(--sp-sys-color-on-surface);

package/dist/components/dropdown-menu/components/dropdown-menu-item.svelte

@@ -45,7 +45,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border-radius: var(--sp-sys-shape-corner-xs, 4px);
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
     font-family: var(--sp-sys-typescale-body-medium-font, inherit);
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
     color: var(--sp-sys-color-on-surface);

package/dist/components/dropdown-menu/components/dropdown-menu-sub-trigger.svelte

@@ -29,6 +29,12 @@
     if (disabled) return
     if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
+      // The key is fully handled here: stop it from bubbling to ancestor menu
+      // keydown handlers (menubar-content treats ArrowRight as "close menu +
+      // open the next menubar menu", which would immediately undo openSub;
+      // Space would also leak into content-level typeahead). Same pattern as
+      // dropdown-menu-sub-content.svelte for ArrowLeft/Escape.
+      e.stopPropagation()
       sub.openSub()
     }
   }
@@ -47,7 +53,8 @@
   aria-expanded={sub.open}
   aria-disabled={disabled || undefined}
   data-disabled={disabled || undefined}
-  tabindex={disabled ? -1 : 0}
+  data-roving-focus-item
+  tabindex={-1}
   onpointerenter={onPointerEnter}
   onpointerleave={onPointerLeave}
   onkeydown={onKeyDown}
@@ -71,11 +78,40 @@
 </div>
 
 <style>
+  /* Svelte scoped styles don't cross components: sharing the `sp-dropdown-menu-item`
+     class name inherits nothing from dropdown-menu-item.svelte. The item base styles
+     are duplicated here (same pattern as dropdown-menu-checkbox-item.svelte) and must
+     stay in sync with dropdown-menu-item.svelte. */
   .sp-dropdown-sub-trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
+    font-family: var(--sp-sys-typescale-body-medium-font, inherit);
+    font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
+    color: var(--sp-sys-color-on-surface);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color var(--sp-sys-motion-duration-short2, 100ms)
+      var(--sp-sys-motion-easing-effects, ease);
+  }
+
+  .sp-dropdown-sub-trigger:focus,
+  .sp-dropdown-sub-trigger:hover:not([data-disabled]),
+  .sp-dropdown-sub-trigger[aria-expanded='true'] {
+    background-color: color-mix(
+      in oklch,
+      var(--sp-sys-color-on-surface) calc(var(--sp-sys-state-hover-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  .sp-dropdown-sub-trigger[data-disabled] {
+    opacity: 0.38;
+    cursor: not-allowed;
   }
 
   .sp-dropdown-sub-trigger-label {

package/dist/components/dropdown-menu/components/dropdown-menu-sub-trigger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-sub-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-sub-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AAyD9D,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"dropdown-menu-sub-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-sub-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AA+D9D,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/menubar/__tests__/MenubarTest.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
   import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
   import DropdownMenuSeparator from '../../dropdown-menu/components/dropdown-menu-separator.svelte'
+  import DropdownMenuSubContent from '../../dropdown-menu/components/dropdown-menu-sub-content.svelte'
+  import DropdownMenuSubTrigger from '../../dropdown-menu/components/dropdown-menu-sub-trigger.svelte'
+  import DropdownMenuSub from '../../dropdown-menu/components/dropdown-menu-sub.svelte'
   import MenubarContent from '../components/menubar-content.svelte'
   import MenubarMenu from '../components/menubar-menu.svelte'
   import MenubarRoot from '../components/menubar-root.svelte'
   import MenubarTrigger from '../components/menubar-trigger.svelte'
 
-  const { loop = true, portalTo }: { loop?: boolean; portalTo?: HTMLElement | string } = $props()
+  const {
+    loop = true,
+    portalTo,
+    withSub = false,
+  }: { loop?: boolean; portalTo?: HTMLElement | string; withSub?: boolean } = $props()
 </script>
 
 <MenubarRoot {loop}>
@@ -17,6 +24,15 @@
       <DropdownMenuItem>Open</DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem>Save</DropdownMenuItem>
+      {#if withSub}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Copy Link</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      {/if}
     </MenubarContent>
   </MenubarMenu>
   <MenubarMenu value="edit">

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

@@ -195,4 +195,39 @@ describe('menubar', () => {
         // No menu should open from hover alone
         expect(target.querySelector('[role="menu"]')).toBeNull();
     });
+    // --- SubTrigger inside a menubar menu ---
+    describe('subTrigger', () => {
+        function pressKey(key) {
+            const el = document.activeElement;
+            el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+            flushSync();
+        }
+        it('arrowRight on a plain item moves to the next menubar menu', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            // Autofocus lands on the first item of the opened menu
+            expect(document.activeElement?.textContent?.trim()).toBe('New');
+            pressKey('ArrowRight');
+            expect(triggers[0].getAttribute('data-state')).toBe('closed');
+            expect(triggers[1].getAttribute('data-state')).toBe('open');
+        });
+        it('arrowRight on the sub-trigger opens the submenu without switching menubar menus', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            expect(subTrigger).toBeTruthy();
+            subTrigger.focus();
+            pressKey('ArrowRight');
+            // Submenu opened…
+            expect(subTrigger.getAttribute('aria-expanded')).toBe('true');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
+            // …and the menubar neither closed the current menu nor advanced to the next one
+            expect(triggers[0].getAttribute('data-state')).toBe('open');
+            expect(triggers[1].getAttribute('data-state')).toBe('closed');
+        });
+    });
 });

package/dist/components/pin-input/__tests__/pin-input.test.svelte.js

@@ -1,4 +1,4 @@
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 import PinInput from '../pin-input.svelte';
 describe('pin-input', () => {
@@ -23,4 +23,49 @@ describe('pin-input', () => {
         setup({ length: 6 });
         expect(target.querySelectorAll('input').length).toBe(6);
     });
+    it('uses the inputmode prop on slots', () => {
+        setup({ length: 4, inputmode: 'text' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('text');
+    });
+    it('defaults inputmode to numeric (backward compat)', () => {
+        setup({ length: 4 });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('inputmode')).toBe('numeric');
+    });
+    it('uses ariaLabelPrefix in slot aria-labels', () => {
+        setup({ length: 4, ariaLabelPrefix: 'Character' });
+        const input = target.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('Character 1 of 4');
+    });
+    it('pasteTransformer strips separators before distributing', () => {
+        setup({ length: 6, pasteTransformer: (raw) => raw.replace(/[^0-9A-Z]/gi, '').toUpperCase() });
+        const input = target.querySelector('input');
+        const ev = new Event('paste', { bubbles: true });
+        Object.defineProperty(ev, 'clipboardData', { value: { getData: () => 'ab-cd-ef' } });
+        input.dispatchEvent(ev);
+        flushSync();
+        const joined = Array.from(target.querySelectorAll('input')).map((i) => i.value).join('');
+        expect(joined).toBe('ABCDEF');
+    });
+    it('charTransformer uppercases typed input', () => {
+        setup({ length: 4, charTransformer: (c) => c.toUpperCase() });
+        const input = target.querySelector('input');
+        input.value = 'a';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('A');
+    });
+    it('allowedPattern rejects disallowed typed characters', () => {
+        setup({ length: 4, allowedPattern: /[2-9A-HJKMNP-Z]/i });
+        const input = target.querySelector('input');
+        input.value = '0';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        flushSync();
+        expect(target.querySelectorAll('input')[0].value).toBe('');
+    });
+    it('renders group separators when groupSize is set', () => {
+        setup({ length: 8, groupSize: 4 });
+        expect(target.querySelectorAll('.sp-pin-input-separator').length).toBe(1);
+    });
 });

package/dist/components/pin-input/pin-input.svelte

@@ -12,19 +12,27 @@
     name,
     required = false,
     class: className,
+    inputmode = 'numeric',
+    ariaLabelPrefix = 'Digit',
+    pasteTransformer,
+    charTransformer,
+    allowedPattern,
   }: PinInputProps = $props()
 
   const inputs: HTMLInputElement[] = $state.raw([])
 
   function handleInput(index: number, event: Event) {
     const target = event.target as HTMLInputElement
-    const char = target.value.slice(-1)
+    let char = target.value.slice(-1)
+    if (char && allowedPattern && !allowedPattern.test(char)) {
+      target.value = value[index] ?? '' // reject: value state unchanged ⇒ Svelte won't re-render this slot
+      return
+    }
+    if (char && charTransformer) char = charTransformer(char)
     const chars = value.split('')
     chars[index] = char
     value = chars.join('').slice(0, length)
-
     if (char && index < length - 1) inputs[index + 1]?.focus()
-
     if (value.length === length) onComplete?.(value)
   }
 
@@ -45,38 +53,31 @@
 
   function handlePaste(event: ClipboardEvent) {
     event.preventDefault()
-    const pasted = event.clipboardData?.getData('text')?.slice(0, length) ?? ''
-    value = pasted
-    const nextIndex = Math.min(pasted.length, length - 1)
+    const raw = event.clipboardData?.getData('text') ?? ''
+    const cleaned = pasteTransformer ? pasteTransformer(raw) : raw
+    value = cleaned.slice(0, length)
+    const nextIndex = Math.min(value.length, length - 1)
     inputs[nextIndex]?.focus()
-    if (pasted.length === length) onComplete?.(pasted)
+    if (value.length === length) onComplete?.(value)
   }
 </script>
 
 <div class="sp-pin-input {className ?? ''}" role="group">
   {#each { length } as _, i (i)}
     {#if groupSize > 0 && i > 0 && i % groupSize === 0}
-      <span class="sp-pin-input-separator" aria-hidden="true">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12" /></svg
-        >
-      </span>
+      <span class="sp-pin-input-separator" aria-hidden="true"></span>
     {/if}
     <input
       bind:this={inputs[i]}
       class="sp-pin-input-slot"
       type={mask ? 'password' : 'text'}
-      inputmode="numeric"
+      inputmode={inputmode}
       maxlength={1}
       autocomplete="off"
       {placeholder}
       {disabled}
       value={value[i] ?? ''}
-      aria-label={`Digit ${i + 1} of ${length}`}
+      aria-label={`${ariaLabelPrefix} ${i + 1} of ${length}`}
       oninput={(e) => handleInput(i, e)}
       onkeydown={(e) => handleKeydown(i, e)}
       onpaste={handlePaste}
@@ -96,14 +97,14 @@
   }
 
   .sp-pin-input-separator {
-    display: flex;
-    align-items: center;
-    color: var(--sp-sys-color-outline);
-  }
-
-  .sp-pin-input-separator svg {
-    width: 16px;
-    height: 16px;
+    /* A reliable CSS dash between groups. The previous inline <svg viewBox> rendered at 0 width
+       (no intrinsic size), so groupSize separators were invisible. */
+    flex: 0 0 auto;
+    align-self: center;
+    width: 0.75rem;
+    height: 2px;
+    border-radius: 999px;
+    background-color: var(--sp-sys-color-outline);
   }
 
   .sp-pin-input-slot {
@@ -132,6 +133,12 @@
     opacity: 0.5;
   }
 
+  /* Empty focused slot: hide the placeholder so the caret never overlaps the ○.
+     Stable class hook (.sp-pin-input-slot), no generated s-... classes. */
+  .sp-pin-input-slot:focus::placeholder {
+    color: transparent;
+  }
+
   .sp-pin-input-slot:disabled {
     opacity: 0.38;
     cursor: not-allowed;

package/dist/components/pin-input/pin-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA4EhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"pin-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/pin-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAmFhD,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/pin-input/types.d.ts

@@ -19,5 +19,15 @@ export interface PinInputProps {
     required?: boolean;
     /** Additional CSS class. */
     class?: string;
+    /** Virtual-keyboard hint applied to every slot. Default 'numeric' (PIN). Use 'text' for alphanumeric codes. */
+    inputmode?: 'numeric' | 'text' | 'tel' | 'email' | 'url' | 'decimal' | 'search' | 'none';
+    /** Noun used in each slot's aria-label: `${ariaLabelPrefix} N of M`. Default 'Digit'. */
+    ariaLabelPrefix?: string;
+    /** Transform pasted clipboard text BEFORE distributing into slots (e.g. strip separators, uppercase). */
+    pasteTransformer?: (raw: string) => string;
+    /** Transform each typed character before storing (e.g. uppercase). Applied only to characters accepted by `allowedPattern`. */
+    charTransformer?: (char: string) => string;
+    /** When set, a typed character is accepted only if it matches this pattern (paste is filtered by pasteTransformer instead). */
+    allowedPattern?: RegExp;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/pin-input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/pin-input/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;IACxF,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,+HAA+H;IAC/H,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB"}

package/dist/components/select/components/select-item.svelte

@@ -65,7 +65,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0.75rem;
-    border-radius: var(--sp-sys-shape-corner-xs, 4px);
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
     font-family: var(--sp-sys-typescale-body-medium-font, inherit);
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
     color: var(--sp-sys-color-on-surface);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"