@spectral_labs/ui 1.1.2 → 1.2.1

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

@@ -5,7 +5,11 @@ import * as matchers from 'vitest-axe/matchers';
 import MenubarTest from './MenubarTest.svelte';
 expect.extend(matchers);
 const axe = configureAxe({
-    rules: { 'region': { enabled: false }, 'page-has-heading-one': { enabled: false }, 'landmark-one-main': { enabled: false } },
+    rules: {
+        region: { enabled: false },
+        'page-has-heading-one': { enabled: false },
+        'landmark-one-main': { enabled: false },
+    },
 });
 describe('menubar a11y', () => {
     let cleanup;

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { MenubarContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -31,7 +31,9 @@
   })
 
   const presence = new PresenceLayerState({
-    get present() { return menu.isOpen },
+    get present() {
+      return menu.isOpen
+    },
   })
 
   const escapeLayer = new EscapeLayerState({
@@ -49,8 +51,7 @@
     onInteractOutside(event) {
       const target = event.target as Node | null
       // Don't close if clicking another menubar trigger (hover-to-switch handles it)
-      if (target instanceof HTMLElement && target.hasAttribute('data-menubar-trigger'))
-        return
+      if (target instanceof HTMLElement && target.hasAttribute('data-menubar-trigger')) return
       root.closeMenu()
     },
   })
@@ -58,9 +59,15 @@
   const floating = new FloatingLayerState({
     reference: null,
     floating: null,
-    get side() { return side },
-    get sideOffset() { return sideOffset },
-    get align() { return align },
+    get side() {
+      return side
+    },
+    get sideOffset() {
+      return sideOffset
+    },
+    get align() {
+      return align
+    },
     avoidCollisions: true,
   })
 
@@ -73,7 +80,9 @@
       floating.startAutoUpdate()
 
       // Focus first interactive item
-      const firstItem = contentEl.querySelector<HTMLElement>('[data-roving-focus-item]:not([data-disabled])')
+      const firstItem = contentEl.querySelector<HTMLElement>(
+        '[data-roving-focus-item]:not([data-disabled])',
+      )
       firstItem?.focus()
     }
 
@@ -85,15 +94,12 @@
   })
 
   $effect(() => {
-    if (contentEl)
-      presence.setElement(contentEl)
+    if (contentEl) presence.setElement(contentEl)
   })
 
   function onkeydown(event: KeyboardEvent) {
-    if (!isBrowser)
-      return
-    if (!contentEl)
-      return
+    if (!isBrowser) return
+    if (!contentEl) return
 
     const items = Array.from(
       contentEl.querySelectorAll<HTMLElement>('[data-roving-focus-item]:not([data-disabled])'),
@@ -123,14 +129,16 @@
         const triggers = Array.from(
           document.querySelectorAll<HTMLElement>('[data-menubar-trigger]:not([data-disabled])'),
         )
-        const currentIdx = triggers.findIndex(t => t.getAttribute('data-menu-value') === menu.value)
-        const nextIdx = currentIdx < triggers.length - 1 ? currentIdx + 1 : (root.loop ? 0 : currentIdx)
+        const currentIdx = triggers.findIndex(
+          (t) => t.getAttribute('data-menu-value') === menu.value,
+        )
+        const nextIdx =
+          currentIdx < triggers.length - 1 ? currentIdx + 1 : root.loop ? 0 : currentIdx
         const nextTrigger = triggers[nextIdx]
         if (nextTrigger) {
           nextTrigger.focus()
           const nextValue = nextTrigger.getAttribute('data-menu-value')
-          if (nextValue)
-            root.openMenu(nextValue)
+          if (nextValue) root.openMenu(nextValue)
         }
         break
       }
@@ -141,14 +149,16 @@
         const triggers = Array.from(
           document.querySelectorAll<HTMLElement>('[data-menubar-trigger]:not([data-disabled])'),
         )
-        const currentIdx = triggers.findIndex(t => t.getAttribute('data-menu-value') === menu.value)
-        const prevIdx = currentIdx > 0 ? currentIdx - 1 : (root.loop ? triggers.length - 1 : currentIdx)
+        const currentIdx = triggers.findIndex(
+          (t) => t.getAttribute('data-menu-value') === menu.value,
+        )
+        const prevIdx =
+          currentIdx > 0 ? currentIdx - 1 : root.loop ? triggers.length - 1 : currentIdx
         const prevTrigger = triggers[prevIdx]
         if (prevTrigger) {
           prevTrigger.focus()
           const prevValue = prevTrigger.getAttribute('data-menu-value')
-          if (prevValue)
-            root.openMenu(prevValue)
+          if (prevValue) root.openMenu(prevValue)
         }
         break
       }
@@ -159,11 +169,10 @@
       default: {
         if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
           const labels = items.map(
-            el => el.getAttribute('data-text-value') ?? el.textContent?.trim() ?? '',
+            (el) => el.getAttribute('data-text-value') ?? el.textContent?.trim() ?? '',
           )
           const match = typeahead.handleTypeahead(event.key, labels)
-          if (match >= 0)
-            items[match]?.focus()
+          if (match >= 0) items[match]?.focus()
         }
       }
     }
@@ -176,8 +185,8 @@
       bind:this={contentEl}
       class="sp-menubar-content {className ?? ''}"
       id={menu.contentId}
-      role='menu'
-      aria-orientation='vertical'
+      role="menu"
+      aria-orientation="vertical"
       aria-labelledby={menu.triggerId}
       tabindex={-1}
       data-state={menu.isOpen ? 'open' : 'closed'}

package/dist/components/menubar/components/menubar-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAmMtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"menubar-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AA4MtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/menubar/components/menubar-menu.svelte

@@ -1,7 +1,11 @@
-<script lang='ts'>
+<script lang="ts">
   import type { MenubarMenuProps } from '../types.js'
   import { setMenuContext } from '../../../internal/menu-context/index.js'
-  import { createMenubarMenuIds, getMenubarContext, setMenubarMenuContext } from '../menubar.svelte.js'
+  import {
+    createMenubarMenuIds,
+    getMenubarContext,
+    setMenubarMenuContext,
+  } from '../menubar.svelte.js'
 
   const { value, children }: MenubarMenuProps = $props()
   const root = getMenubarContext()
@@ -36,7 +40,7 @@
   })
 </script>
 
-<div class='sp-menubar-menu' data-state={isOpen ? 'open' : 'closed'}>
+<div class="sp-menubar-menu" data-state={isOpen ? 'open' : 'closed'}>
   {#if children}{@render children()}{/if}
 </div>
 

package/dist/components/menubar/components/menubar-menu.svelte.d.ts.map

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

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { MenubarProps } from '../types.js'
   import { setMenubarContext } from '../menubar.svelte.js'
 
@@ -29,26 +29,24 @@
     },
     toggleMenu(value: string) {
       activeMenu = activeMenu === value ? '' : value
-      if (activeMenu !== '')
-        rovingValue = activeMenu
+      if (activeMenu !== '') rovingValue = activeMenu
     },
     registerMenu(value: string) {
-      if (rovingValue === '')
-        rovingValue = value
+      if (rovingValue === '') rovingValue = value
     },
   })
 
   function onkeydown(event: KeyboardEvent) {
     const target = event.target as HTMLElement
-    if (!target?.hasAttribute('data-menubar-trigger'))
-      return
+    if (!target?.hasAttribute('data-menubar-trigger')) return
 
     const triggers = Array.from(
-      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>('[data-menubar-trigger]:not([data-disabled])'),
+      (event.currentTarget as HTMLElement).querySelectorAll<HTMLElement>(
+        '[data-menubar-trigger]:not([data-disabled])',
+      ),
     )
     const currentIndex = triggers.indexOf(target)
-    if (currentIndex === -1)
-      return
+    if (currentIndex === -1) return
 
     let nextIndex: number | undefined
 
@@ -57,8 +55,7 @@
         event.preventDefault()
         if (currentIndex < triggers.length - 1) {
           nextIndex = currentIndex + 1
-        }
-        else if (loop) {
+        } else if (loop) {
           nextIndex = 0
         }
         break
@@ -67,8 +64,7 @@
         event.preventDefault()
         if (currentIndex > 0) {
           nextIndex = currentIndex - 1
-        }
-        else if (loop) {
+        } else if (loop) {
           nextIndex = triggers.length - 1
         }
         break
@@ -97,8 +93,7 @@
     if (nextIndex !== undefined) {
       const nextTrigger = triggers[nextIndex]!
       const menuValue = nextTrigger.getAttribute('data-menu-value')
-      if (menuValue)
-        rovingValue = menuValue
+      if (menuValue) rovingValue = menuValue
       nextTrigger.focus()
       if (activeMenu !== '' && menuValue) {
         activeMenu = menuValue
@@ -107,12 +102,7 @@
   }
 </script>
 
-<div
-  class="sp-menubar {className ?? ''}"
-  role='menubar'
-  tabindex='0'
-  {onkeydown}
->
+<div class="sp-menubar {className ?? ''}" role="menubar" tabindex="0" {onkeydown}>
   {#if children}{@render children()}{/if}
 </div>
 

package/dist/components/menubar/components/menubar-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAwH/C,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"menubar-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAmH/C,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { MenubarTriggerProps } from '../types.js'
   import { getMenubarContext, getMenubarMenuContext } from '../menubar.svelte.js'
 
@@ -9,13 +9,11 @@
   let el: HTMLElement | undefined = $state()
 
   $effect(() => {
-    if (el)
-      menu.setTriggerEl(el)
+    if (el) menu.setTriggerEl(el)
   })
 
   function onclick() {
-    if (!disabled)
-      root.toggleMenu(menu.value)
+    if (!disabled) root.toggleMenu(menu.value)
   }
 
   function onmouseenter() {
@@ -29,10 +27,10 @@
 <button
   bind:this={el}
   class="sp-menubar-trigger {className ?? ''}"
-  type='button'
-  role='menuitem'
+  type="button"
+  role="menuitem"
   id={menu.triggerId}
-  aria-haspopup='menu'
+  aria-haspopup="menu"
   aria-expanded={menu.isOpen}
   aria-controls={menu.isOpen ? menu.contentId : undefined}
   tabindex={root.rovingValue === menu.value ? 0 : -1}

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

@@ -1 +1 @@
-{"version":3,"file":"menubar-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAuCtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"menubar-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAqCtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/meter/meter.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { MeterProps } from './types.js'
 
   const {
@@ -15,25 +15,22 @@
   const percentage = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)))
 
   const autoColor = $derived.by(() => {
-    if (color)
-      return color
-    if (low !== undefined && value < low)
-      return 'error'
-    if (high !== undefined && value > high)
-      return 'warning'
+    if (color) return color
+    if (low !== undefined && value < low) return 'error'
+    if (high !== undefined && value > high) return 'warning'
     return 'primary'
   })
 </script>
 
 <div
   class="sp-meter {autoColor} {className ?? ''}"
-  role='meter'
+  role="meter"
   aria-valuenow={value}
   aria-valuemin={min}
   aria-valuemax={max}
   aria-label={label}
 >
-  <div class='sp-meter-bar' style='width: {percentage}%'></div>
+  <div class="sp-meter-bar" style="width: {percentage}%"></div>
 </div>
 
 <style>

package/dist/components/meter/meter.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/meter/meter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAqC7C,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"meter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/meter/meter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAkC7C,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/nav-bar/components/nav-bar-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { NavBarItemProps } from '../types.js'
   import { getNavBarContext } from '../nav-bar.svelte.js'
 
@@ -17,13 +17,11 @@
 
   function moveInTabList(current: HTMLElement, direction: 'next' | 'prev' | 'first' | 'last') {
     const list = current.closest<HTMLElement>('[role="tablist"]')
-    if (!list)
-      return
+    if (!list) return
     const tabs = Array.from(
       list.querySelectorAll<HTMLElement>('[role="tab"]:not([aria-disabled="true"])'),
     )
-    if (tabs.length === 0)
-      return
+    if (tabs.length === 0) return
 
     const currentIdx = tabs.indexOf(current)
     let nextIdx = currentIdx
@@ -54,8 +52,8 @@
 
 <button
   class="sp-nav-bar-item {className ?? ''}"
-  type='button'
-  role='tab'
+  type="button"
+  role="tab"
   data-value={value}
   aria-selected={isActive}
   aria-current={isActive ? 'page' : undefined}
@@ -65,8 +63,7 @@
   {disabled}
   data-state={isActive ? 'active' : 'inactive'}
   onclick={() => {
-    if (!disabled)
-      ctx.select(value)
+    if (!disabled) ctx.select(value)
   }}
   onkeydown={(event) => {
     const current = event.currentTarget as HTMLElement
@@ -90,15 +87,15 @@
     }
   }}
 >
-  <span class='sp-nav-bar-icon'>
+  <span class="sp-nav-bar-icon">
     {#if icon}{@render icon()}{/if}
     {#if children}{@render children()}{/if}
     {#if badge != null}
-      <span class='sp-nav-bar-badge'>{badge}</span>
+      <span class="sp-nav-bar-badge">{badge}</span>
     {/if}
   </span>
   {#if label}
-    <span class='sp-nav-bar-label'>{label}</span>
+    <span class="sp-nav-bar-label">{label}</span>
   {/if}
 </button>
 

package/dist/components/nav-bar/components/nav-bar-item.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-bar/components/nav-bar-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAiGlD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"nav-bar-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-bar/components/nav-bar-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AA8FlD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/nav-bar/components/nav-bar-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { NavBarProps } from '../types.js'
   import { setNavBarContext } from '../nav-bar.svelte.js'
 
@@ -14,8 +14,8 @@
   })
 </script>
 
-<nav class="sp-nav-bar {className ?? ''}" aria-label='Main navigation'>
-  <div class='sp-nav-bar-list' role='tablist' aria-orientation='horizontal'>
+<nav class="sp-nav-bar {className ?? ''}" aria-label="Main navigation">
+  <div class="sp-nav-bar-list" role="tablist" aria-orientation="horizontal">
     {#if children}{@render children()}{/if}
   </div>
 </nav>

package/dist/components/nav-drawer/components/nav-drawer-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { NavDrawerItemProps } from '../types.js'
   import { getNavDrawerContext } from '../nav-drawer.svelte.js'
 
@@ -16,13 +16,11 @@
 
   function moveInTabList(current: HTMLElement, direction: 'next' | 'prev' | 'first' | 'last') {
     const list = current.closest<HTMLElement>('[role="tablist"]')
-    if (!list)
-      return
+    if (!list) return
     const tabs = Array.from(
       list.querySelectorAll<HTMLElement>('[role="tab"]:not([aria-disabled="true"])'),
     )
-    if (tabs.length === 0)
-      return
+    if (tabs.length === 0) return
 
     const currentIdx = tabs.indexOf(current)
     let nextIdx = currentIdx
@@ -53,8 +51,8 @@
 
 <button
   class="sp-nav-drawer-item {className ?? ''}"
-  type='button'
-  role='tab'
+  type="button"
+  role="tab"
   data-value={value}
   aria-selected={isActive}
   aria-current={isActive ? 'page' : undefined}
@@ -63,8 +61,7 @@
   {disabled}
   data-state={isActive ? 'active' : 'inactive'}
   onclick={() => {
-    if (!disabled)
-      ctx.select(value)
+    if (!disabled) ctx.select(value)
   }}
   onkeydown={(event) => {
     const current = event.currentTarget as HTMLElement
@@ -89,9 +86,9 @@
   }}
 >
   {#if icon}
-    <span class='sp-nav-drawer-item-icon'>{@render icon()}</span>
+    <span class="sp-nav-drawer-item-icon">{@render icon()}</span>
   {/if}
-  <span class='sp-nav-drawer-item-label'>
+  <span class="sp-nav-drawer-item-label">
     {#if children}{@render children()}{:else}{label}{/if}
   </span>
 </button>

package/dist/components/nav-drawer/components/nav-drawer-item.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-drawer/components/nav-drawer-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AA4FrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"nav-drawer-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-drawer/components/nav-drawer-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAyFrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/nav-drawer/components/nav-drawer-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { NavDrawerProps } from '../types.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
   import { isBrowser } from '../../../internal/helpers/index.js'
@@ -17,8 +17,7 @@
   const escapeLayer = new EscapeLayerState({
     enabled: true,
     onEscapeKeydown() {
-      if (mode === 'modal')
-        open = false
+      if (mode === 'modal') open = false
     },
   })
 
@@ -43,8 +42,8 @@
 
 {#if mode === 'modal' && open}
   <div
-    class='sp-nav-drawer-overlay'
-    aria-hidden='true'
+    class="sp-nav-drawer-overlay"
+    aria-hidden="true"
     onclick={() => {
       open = false
     }}
@@ -54,15 +53,15 @@
 {#if open}
   <nav
     class="sp-nav-drawer {mode} {className ?? ''}"
-    aria-label='Drawer navigation'
+    aria-label="Drawer navigation"
     data-mode={mode}
   >
-    <ScrollArea type='auto' class='sp-nav-drawer-scroll-area'>
-      <div class='sp-nav-drawer-scroll-content'>
+    <ScrollArea type="auto" class="sp-nav-drawer-scroll-area">
+      <div class="sp-nav-drawer-scroll-content">
         {#if header}
-          <div class='sp-nav-drawer-header'>{@render header()}</div>
+          <div class="sp-nav-drawer-header">{@render header()}</div>
         {/if}
-        <div class='sp-nav-drawer-items' role='tablist' aria-orientation='vertical'>
+        <div class="sp-nav-drawer-items" role="tablist" aria-orientation="vertical">
           {#if children}{@render children()}{/if}
         </div>
       </div>
@@ -126,7 +125,8 @@
   }
 
   .sp-nav-drawer.modal {
-    --sp-nav-drawer-radius: 0 var(--sp-sys-shape-corner-lg, 16px) var(--sp-sys-shape-corner-lg, 16px) 0;
+    --sp-nav-drawer-radius: 0 var(--sp-sys-shape-corner-lg, 16px)
+      var(--sp-sys-shape-corner-lg, 16px) 0;
     position: fixed;
     top: 0;
     left: 0;

package/dist/components/nav-drawer/components/nav-drawer-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-drawer/components/nav-drawer-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AA0EjD,QAAA,MAAM,aAAa,kEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"nav-drawer-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/nav-drawer/components/nav-drawer-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAyEjD,QAAA,MAAM,aAAa,kEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/nav-rail/components/nav-rail-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { NavRailItemProps } from '../types.js'
   import { getNavRailContext } from '../nav-rail.svelte.js'
 
@@ -16,13 +16,11 @@
 
   function moveInTabList(current: HTMLElement, direction: 'next' | 'prev' | 'first' | 'last') {
     const list = current.closest<HTMLElement>('[role="tablist"]')
-    if (!list)
-      return
+    if (!list) return
     const tabs = Array.from(
       list.querySelectorAll<HTMLElement>('[role="tab"]:not([aria-disabled="true"])'),
     )
-    if (tabs.length === 0)
-      return
+    if (tabs.length === 0) return
 
     const currentIdx = tabs.indexOf(current)
     let nextIdx = currentIdx
@@ -53,8 +51,8 @@
 
 <button
   class="sp-nav-rail-item {className ?? ''}"
-  type='button'
-  role='tab'
+  type="button"
+  role="tab"
   data-value={value}
   aria-selected={isActive}
   aria-current={isActive ? 'page' : undefined}
@@ -65,8 +63,7 @@
   {disabled}
   data-state={isActive ? 'active' : 'inactive'}
   onclick={() => {
-    if (!disabled)
-      ctx.select(value)
+    if (!disabled) ctx.select(value)
   }}
   onkeydown={(event) => {
     const current = event.currentTarget as HTMLElement
@@ -90,12 +87,12 @@
     }
   }}
 >
-  <span class='sp-nav-rail-item-icon'>
+  <span class="sp-nav-rail-item-icon">
     {#if icon}{@render icon()}{/if}
     {#if children}{@render children()}{/if}
   </span>
   {#if label}
-    <span class='sp-nav-rail-item-label' aria-hidden={!ctx.expanded}>{label}</span>
+    <span class="sp-nav-rail-item-label" aria-hidden={!ctx.expanded}>{label}</span>
   {/if}
 </button>
 
@@ -176,7 +173,8 @@
     pointer-events: none;
     transition:
       opacity var(--sp-sys-motion-duration-short3, 150ms) var(--sp-sys-motion-easing-standard, ease),
-      transform var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-standard, ease);
+      transform var(--sp-sys-motion-duration-medium2, 300ms)
+        var(--sp-sys-motion-easing-standard, ease);
   }
 
   :global(.sp-nav-rail.expanded) .sp-nav-rail-item-label {

package/dist/components/nav-rail/components/nav-rail-item.svelte.d.ts.map

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