@w5-ui/svelte 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",
@@ -48,7 +48,7 @@
     "@w5-ui/tokens": "^0.5.0"
   },
   "devDependencies": {
-    "svelte": "^5.55.9",
+    "svelte": "^5.56.4",
     "typescript": "^5.5.0"
   },
   "files": [

package/src/lib/components/Popover.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">
   let counter = 0;
+  export type PopoverWidth = 'sm' | 'md' | 'lg' | 'xl';
 </script>
 
 <script lang="ts">
@@ -13,6 +14,14 @@
     variant?: 'ghost' | 'primary';
     title?: string | undefined;
     placement?: 'bottom-start' | 'bottom-end' | 'bottom';
+    /**
+     * Panel max-width. `sm` (320px) is the default and suits menus /
+     * option lists. Wider sizes suit content-dense panels (e.g. a
+     * folder picker with a path field, breadcrumb and file rows).
+     * The panel still shrinks to its content and is kept on-screen by
+     * the viewport-clamp in `recomputePosition`.
+     */
+    width?: PopoverWidth;
     /**
      * Controlled open state. Default uncontrolled (`$bindable(false)`):
      * the trigger button toggles it and outside-clicks close it.
@@ -42,10 +51,20 @@
     title = undefined,
     placement = 'bottom-start',
     open = $bindable(false),
+    width = 'sm',
     trigger,
     children,
   }: Props = $props();
 
+  // Pre-composed width utilities so Tailwind's static scanner keeps
+  // each class in the build (mirrors `Modal`'s `size` scale).
+  const WIDTH: Record<PopoverWidth, string> = {
+    sm: 'max-w-[320px]',
+    md: 'max-w-[400px]',
+    lg: 'max-w-[480px]',
+    xl: 'max-w-[560px]',
+  };
+
   const uid = `dash-ui-pop-${++counter}`;
   const titleId = `${uid}-title`;
 
@@ -181,7 +200,7 @@
       use:portal
       role="dialog"
       aria-labelledby={title ? titleId : undefined}
-      class="fixed z-[9100] min-w-[200px] max-w-[320px] rounded-[10px] border border-border-3 bg-bg-2 shadow-[0_8px_32px_rgba(0,0,0,0.5)] focus:outline-none"
+      class={`fixed z-[9100] min-w-[200px] ${WIDTH[width]} rounded-[10px] border border-border-3 bg-bg-2 shadow-[0_8px_32px_rgba(0,0,0,0.5)] focus:outline-none`}
       style={`top: ${panelTop}px; left: ${panelLeft}px`}
       tabindex={-1}
     >

package/src/lib/components/Topbar.svelte

@@ -144,7 +144,7 @@
   {#if siteSwitchable}
     <button
       type="button"
-      class="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"
+      class="flex shrink-0 cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-row-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05 max-md:px-1.5"
       aria-label="Switch site: {siteName}"
       aria-haspopup="menu"
       title={`${siteName} — status: ${status}`}
@@ -164,12 +164,12 @@
       {:else}
         <span class={ringWrapClass}><span class={ringDotClass}></span></span>
       {/if}
-      <span class="text-13 font-medium text-text-1" aria-hidden="true">{siteName}</span>
-      <CaretIcon class="h-3.5 w-3.5 text-text-3" />
+      <span class="text-13 font-medium text-text-1 max-md:hidden" aria-hidden="true">{siteName}</span>
+      <CaretIcon class="h-3.5 w-3.5 text-text-3 max-md:hidden" />
     </button>
   {:else}
     <div
-      class="flex items-center gap-2 px-2.5 py-1.5"
+      class="flex shrink-0 items-center gap-2 px-2.5 py-1.5 max-md:px-1.5"
       role="presentation"
       title={`${siteName} — status: ${status}`}
     >
@@ -188,11 +188,21 @@
       {:else}
         <span class={ringWrapClass}><span class={ringDotClass}></span></span>
       {/if}
-      <span class="text-13 font-medium text-text-1">{siteName}</span>
+      <span class="text-13 font-medium text-text-1 max-md:hidden">{siteName}</span>
     </div>
   {/if}
 
-  <nav class="ml-3.5 flex h-12 items-center gap-0.5" aria-label="Apps">
+  <!--
+    Apps nav. On phones (< md) the fixed-width app buttons can exceed
+    the viewport, so the strip becomes a horizontally swipeable rail
+    (`flex-1 min-w-0 overflow-x-auto`, scrollbar hidden) instead of
+    overflowing the header. Desktop keeps its natural auto width with
+    the flex spacer pushing the actions to the right edge.
+  -->
+  <nav
+    class="ml-3.5 flex h-12 items-center gap-0.5 max-md:ml-1 max-md:min-w-0 max-md:flex-1 max-md:overflow-x-auto max-md:[scrollbar-width:none] max-md:[&::-webkit-scrollbar]:hidden"
+    aria-label="Apps"
+  >
     {#each apps as a (a.id)}
       <button
         type="button"
@@ -213,14 +223,14 @@
               ? 'opacity-100 dark:brightness-[1.6]'
               : 'opacity-65 hover:opacity-90 dark:hover:brightness-[1.4]'}"
         />
-        <span class="mt-0.5 text-[10px] font-medium leading-none">{a.label}</span>
+        <span class="mt-0.5 text-[10px] font-medium leading-none max-md:hidden">{a.label}</span>
       </button>
     {/each}
   </nav>
 
-  <div class="flex-1"></div>
+  <div class="flex-1 max-md:hidden"></div>
 
-  <div class="flex items-center gap-1 pr-2">
+  <div class="flex shrink-0 items-center gap-1 pr-2">
     {#if actions}
       {@render actions()}
     {:else}

package/src/lib/index.ts

@@ -68,6 +68,7 @@ export type { StepperStep } from './components/Stepper.svelte'
 export { default as SegmentedControl } from './components/SegmentedControl.svelte'
 export type { SegmentOption } from './components/SegmentedControl.svelte'
 export { default as Popover } from './components/Popover.svelte'
+export type { PopoverWidth } from './components/Popover.svelte'
 export { default as FileUpload } from './components/FileUpload.svelte'
 export { default as Combobox } from './components/Combobox.svelte'
 export type { ComboboxOption } from './components/Combobox.svelte'