@lyeve-labs/ui-kit 0.38.4 → 0.38.5

package/dist/components/DatePicker.svelte

@@ -253,8 +253,11 @@
         days have to sit 44px apart or each box covers a third of its
         neighbors'. Seven 44px columns are 308px. Inside a 1px border and 6px
         of padding that is a 320px panel, the width of the narrowest phone,
-        and placePanel slides it back on screen from the page gutter. The rows
-        open a 12px gap for the same reason.
+        and placePanel slides it back on screen from the page gutter. In a
+        modal body narrower than that, placePanel shrinks it to the body and
+        the columns close up, but never below the grid: seven 32px days, six
+        2px gaps, the padding and the border, or the days would overflow and
+        the calendar scroll sideways inside itself. The rows open a 12px gap for the same reason.
       -->
       <div
         id={calendarId}
@@ -262,14 +265,17 @@
         aria-label="Choose date"
         use:placePanel
         transition:motion.popover|global
-        class="{PANEL_SURFACE} w-68 coarse:w-80"
+        class="{PANEL_SURFACE} w-68 min-w-65.5 coarse:w-80 coarse:min-w-62.5"
       >
         <div
           class="overflow-y-auto overscroll-contain p-3 coarse:p-1.5"
           data-panel-list={PANEL_LIST_UNCAPPED}
         >
-          <!-- Header -->
-          <div class="flex items-center justify-between mb-2">
+          <!-- Header. Under a finger each 26px month step takes a 44px box,
+               9px past it, and the region's padding is 6px, so the header
+               insets itself by the other 3px at the sides and the top. The
+               boxes stay whole inside the calendar, which no longer pans. -->
+          <div class="flex items-center justify-between mb-2 coarse:px-0.75 coarse:pt-0.75">
             <button
               type="button"
               aria-label="Previous month"
@@ -313,7 +319,17 @@
           </div>
 
           <!-- Day grid -->
-          <div class="grid grid-cols-7 gap-0.5 coarse:gap-y-3" data-day-grid>
+          <!--
+            Shrunk into a narrow modal, the columns close below 44px and the
+            day boxes would overlap. The grid is a container, so each box
+            takes the smaller of the control size and one column's pitch, the
+            grid's width and one gap over seven, and keeps its height. The
+            boxes meet at any width.
+          -->
+          <div
+            class="@container grid grid-cols-7 gap-0.5 coarse:gap-y-3 coarse:[--hit-width:min(var(--spacing-control),calc((100cqw_+_0.125rem)_/_7))]"
+            data-day-grid
+          >
             {#each cells as d}
               {#if d === null}
                 <span></span>

package/dist/components/Drawer.svelte

@@ -66,6 +66,19 @@
 
   const rung = $derived(size === 'auto' ? fitOverlay(fields) : size);
 
+  let frameEl = $state<HTMLDivElement | undefined>();
+
+  /**
+   * The edge the panel slides from. It docks by the start and end of the
+   * line, so `right` sits at the left edge of a right-to-left page, and a
+   * slide from the right would cross the whole screen to get there. Read when
+   * the panel moves, as AppShell reads its own drawer's.
+   */
+  function edge(): Side {
+    const rtl = frameEl !== undefined && getComputedStyle(frameEl).direction === 'rtl';
+    return (side === 'right') !== rtl ? 'right' : 'left';
+  }
+
   const headingId = $props.id();
   const descriptionId = `${headingId}-description`;
 
@@ -86,6 +99,7 @@
 
 {#if open}
   <div
+    bind:this={frameEl}
     data-print="hide"
     class="fixed inset-0 z-drawer flex {side === 'right' ? 'justify-end' : 'justify-start'}"
   >
@@ -100,7 +114,7 @@
 
     <div
       use:overlay
-      transition:motion.drawer|global={{ side }}
+      transition:motion.drawer|global={{ side: edge() }}
       class="relative flex h-full w-full flex-col {OVERLAY_WIDTH[rung]} bg-surface shadow-2xl
         {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"

package/dist/components/MultiSelect.svelte

@@ -178,12 +178,18 @@
       which a screen reader reads as one widget and a keyboard cannot sort
       out. A press anywhere on the frame that is not a remove button opens the
       list from the combobox, as a press on the field always did.
+
+      Under a finger each remove cross takes a 44px box on a 20px chip, which
+      reaches 12px above and below the chip and 8px past its end. The chips
+      sit 8px apart there and their rows 24px apart, so no box covers the
+      next chip or the row below, and a tap meant to open the list lands on
+      the field.
     -->
     <div
       role="presentation"
       onclick={onFrameClick}
-      class="flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-lg
-        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors
+      class="relative flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 coarse:gap-x-2 coarse:gap-y-6 rounded-lg
+        border bg-surface-2 py-1.5 ps-2.5 pe-7 text-start text-sm transition-colors
         has-[[role=combobox]:focus-visible]:ring-2 has-[[role=combobox]:focus-visible]:ring-inset
         has-[[role=combobox]:focus-visible]:ring-brand
         {disabled ? 'cursor-not-allowed opacity-50' : ''}
@@ -193,8 +199,11 @@
         A div and not an input: there is nothing to type here. The labels of
         the chosen values are its text, so focusing it reads the label and
         then what is chosen, as a select reads its value. It comes first in
-        the markup, so Tab reaches the field before any remove button, and
-        order-last draws it after the chips.
+        the markup, so Tab reaches the field before any remove button, and it
+        spans the frame as the field itself, so it comes first on screen too.
+        A press on a chip lands on it. The remove buttons are positioned and
+        later in the markup, so they sit above it and take their own presses.
+        The frame keeps room at its end for the chevron.
       -->
       <div
         bind:this={triggerEl}
@@ -207,10 +216,10 @@
         aria-describedby={describedBy(fieldId, error, hint)}
         onkeydown={onTriggerKeydown}
         {...box.triggerAttrs}
-        class="order-last flex min-w-12 flex-1 items-center gap-1.5 self-stretch outline-none"
+        class="absolute inset-0 flex items-center gap-1.5 rounded-lg px-2.5 outline-none"
       >
         {#if selected.length === 0}
-          <span class="px-0.5 text-faint">{placeholder}</span>
+          <span class="min-w-0 truncate px-0.5 text-faint">{placeholder}</span>
         {:else}
           <span class="sr-only">{selected.map((option) => option.label).join(', ')}</span>
         {/if}

package/dist/components/Tag.svelte

@@ -28,9 +28,18 @@
   };
 </script>
 
+<!--
+  Under a finger the remove cross takes a 44px box on a 22px tag, which
+  reaches 11px above and below the tag and 8px past its end. A removable tag
+  claims that room as margin there, so the boxes in a row of tags meet
+  without overlapping, wrapped or not, whatever gap the row sets. That
+  margin makes a removable tag 44px tall in a row, so every tag centers
+  itself, and a plain tag beside it neither stretches to 44px nor sits at
+  the top of the line, whatever the row aligns.
+-->
 <span
-  class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5
-    text-xs font-medium {tones[tone]} {cls}"
+  class="inline-flex items-center self-center gap-1 rounded-md border px-2 py-0.5
+    text-xs font-medium {removable ? 'coarse:my-2.75 coarse:me-2' : ''} {tones[tone]} {cls}"
 >
   {label}
   {#if removable}

package/dist/components/TreeView.svelte

@@ -45,10 +45,10 @@
   const expandedSet = $derived(new Set(expanded));
 
   /**
-   * Branches whose children have been shown once. They stay mounted after a
-   * collapse so the collapse can animate. A branch nobody opened mounts
-   * nothing, so a tree of thousands of nodes renders what a reader opened and
-   * not the whole tree.
+   * Branches whose children are mounted. A branch stays mounted after a
+   * collapse until the collapse has played, and then unmounts. A branch nobody
+   * opened mounts nothing, so a tree of thousands of nodes renders the rows a
+   * reader has open and not the whole tree, nor every row it ever showed.
    */
   const shown = $state<Record<string, boolean>>({});
   $effect.pre(() => {
@@ -347,10 +347,16 @@
         A branch opens and shuts on grid-template-rows, the AccordionItem
         collapse, so its children slide rather than appear in one frame. Shut,
         they are inert: out of the tab order and the accessibility tree while
-        they stay mounted for the collapse to play.
+        they stay mounted for the collapse to play, and they unmount when it
+        ends. A nested branch's transition bubbles up here, so only this
+        wrapper's own counts.
       -->
       {#if isBranch(node)}
         <div
+          ontransitionend={(event) => {
+            if (event.target !== event.currentTarget || open) return;
+            if (event.propertyName === 'grid-template-rows') shown[node.id] = false;
+          }}
           class="grid transition-[grid-template-rows] duration-base {open
             ? 'grid-rows-[1fr]'
             : 'grid-rows-[0fr]'}"

package/dist/index.d.ts

@@ -103,4 +103,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.38.4";
+export declare const VERSION = "0.38.5";

package/dist/index.js

@@ -116,4 +116,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.38.4';
+export const VERSION = '0.38.5';

package/dist/internal/panel.d.ts

@@ -160,7 +160,7 @@ export declare const PANEL_ABOVE = "bottom-full mb-1 origin-bottom";
  *
  * A panel that would run past the left or the right edge of the clipping
  * ancestor or the viewport slides back inside both, and one wider than that
- * room keeps its start edge in view.
+ * room shrinks to it.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the

package/dist/internal/panel.js

@@ -199,7 +199,7 @@ function swap(node, remove, add) {
  *
  * A panel that would run past the left or the right edge of the clipping
  * ancestor or the viewport slides back inside both, and one wider than that
- * room keeps its start edge in view.
+ * room shrinks to it.
  *
  * Measured on mount, on resize and on scroll of the clipping ancestor, since
  * each moves the anchor relative to the edge. Scroll does not bubble, so the
@@ -235,12 +235,18 @@ export function placePanel(node) {
         // A panel wider than the room beside its anchor slides back inside what
         // the reader can see, which is the clip and the viewport both: the
         // calendar under a finger is as wide as a 320px phone, and its field
-        // starts at the page gutter or inside a modal body's padding. Where it is
-        // wider than that room it keeps its start edge in view. Read from the
-        // layout box, which the entrance preset's scale does not shrink.
+        // starts at the page gutter or inside a modal body's padding. A panel
+        // wider than that room shrinks to it, since a modal body on a 320px phone
+        // is narrower than the calendar and scrolled sideways around it. Should
+        // it still be wider, it keeps its start edge in view. Read from the
+        // layout box, which the entrance preset's scale does not shrink, and from
+        // the width the class gives, not one an earlier measurement capped.
+        node.style.maxWidth = '';
         const viewport = document.documentElement.clientWidth || window.innerWidth;
         const lo = Math.max(0, clipBox?.left ?? 0);
         const hi = Math.min(viewport, clipBox?.right ?? viewport);
+        if (node.offsetWidth > hi - lo)
+            node.style.maxWidth = `${hi - lo}px`;
         const left = rect.left + node.offsetLeft;
         const right = left + node.offsetWidth;
         let shift = 0;

package/dist/styles/theme.css

@@ -358,7 +358,10 @@
  * position it set would fight the `absolute` an input's clear button relies
  * on. Neighbors are spaced so their boxes meet rather than overlap: the
  * later one in document order takes an overlap, so a tap near the edge of
- * one control lands on the next.
+ * one control lands on the next. Where the room cannot hold that spacing, a
+ * calendar shrunk into a narrow modal for instance, the row sets
+ * `--hit-width` to the width each target has, and the boxes take that width
+ * and keep the control height.
  */
 @custom-variant coarse (@media (pointer: coarse));
 
@@ -377,7 +380,7 @@
       top: 50%;
       width: 100%;
       height: 100%;
-      min-width: var(--spacing-control);
+      min-width: var(--hit-width, var(--spacing-control));
       min-height: var(--spacing-control);
       translate: -50% -50%;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.38.4",
+  "version": "0.38.5",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",

package/src/lib/styles/theme.css

@@ -358,7 +358,10 @@
  * position it set would fight the `absolute` an input's clear button relies
  * on. Neighbors are spaced so their boxes meet rather than overlap: the
  * later one in document order takes an overlap, so a tap near the edge of
- * one control lands on the next.
+ * one control lands on the next. Where the room cannot hold that spacing, a
+ * calendar shrunk into a narrow modal for instance, the row sets
+ * `--hit-width` to the width each target has, and the boxes take that width
+ * and keep the control height.
  */
 @custom-variant coarse (@media (pointer: coarse));
 
@@ -377,7 +380,7 @@
       top: 50%;
       width: 100%;
       height: 100%;
-      min-width: var(--spacing-control);
+      min-width: var(--hit-width, var(--spacing-control));
       min-height: var(--spacing-control);
       translate: -50% -50%;
     }