@spectral_labs/ui 1.4.0 → 1.5.1

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);
@@ -66,7 +66,7 @@
     outline: none;
   }
 
-  .sp-dropdown-menu-item.checkbox:focus,
+  .sp-dropdown-menu-item.checkbox:focus-visible,
   .sp-dropdown-menu-item.checkbox:hover:not([data-disabled]) {
     background-color: color-mix(
       in oklch,

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);
@@ -56,7 +56,7 @@
       var(--sp-sys-motion-easing-effects, ease);
   }
 
-  .sp-dropdown-menu-item:focus {
+  .sp-dropdown-menu-item:focus-visible {
     background-color: color-mix(
       in oklch,
       var(--sp-sys-color-on-surface) calc(var(--sp-sys-state-hover-opacity, 0.08) * 100%),

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-visible,
+  .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/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.4.0",
+  "version": "1.5.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"