@streamscloud/kit 0.48.0 → 0.49.0

package/dist/ui/popover/cmp.popover.svelte

@@ -42,14 +42,24 @@ $effect(() => {
     const t = triggerEl;
     const c = contentEl;
     const update = async () => {
-        const middleware = [offsetMiddleware(offset), flip({ padding: boundaryMargin }), shift({ padding: boundaryMargin })];
-        if (matchWidth) {
-            middleware.push(size({
-                apply({ rects, elements }) {
-                    elements.floating.style.width = `${rects.reference.width}px`;
+        const middleware = [
+            offsetMiddleware(offset),
+            flip({ padding: boundaryMargin }),
+            shift({ padding: boundaryMargin }),
+            size({
+                padding: boundaryMargin,
+                apply({ rects, elements, availableWidth, availableHeight }) {
+                    elements.floating.style.setProperty('--_--popover--available-width', `${availableWidth}px`);
+                    elements.floating.style.setProperty('--_--popover--available-height', `${availableHeight}px`);
+                    if (matchWidth) {
+                        // Clamped here too, not just in CSS: the max-width rule is gated on `panel`, so panel={false} has no other bound.
+                        const width = Math.min(rects.reference.width, availableWidth);
+                        elements.floating.style.width = `${width}px`;
+                        elements.floating.style.minWidth = `${width}px`;
+                    }
                 }
-            }));
-        }
+            })
+        ];
         const result = await computePosition(t, c, {
             placement: position,
             strategy: fixedPosition ? 'fixed' : 'absolute',
@@ -187,13 +197,15 @@ const handleBackdropClick = (e) => {
     <div
       bind:this={contentEl}
       class="popover__content"
-      class:popover__content--panel={panel}
+      class:popover__content--bounded={panel}
       data-placement={resolvedPlacement}
       role="dialog"
       tabindex="-1"
       onclick={handleContentClick}
       onkeydown={() => undefined}>
-      {@render children()}
+      <div class="popover__panel" class:popover__panel--styled={panel}>
+        {@render children()}
+      </div>
     </div>
   {/if}
 </div>
@@ -224,6 +236,23 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 <button onclick={() => dd?.open()}>Open externally</button>
 ```
 
+With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+`flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+`text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+`--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+
+Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+
+Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+`outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+already carries the margin that keeps it clear.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -232,7 +261,10 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
 | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
-| `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+| `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+| `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+| `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+| `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
 | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
 | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
 
@@ -298,7 +330,10 @@ Props for keeping the popover open during interaction:
   --_dd--content-border-color: var(--sc-kit--popover--content--border-color, var(--sc-kit--color--border));
   --_dd--content-border-radius: var(--sc-kit--popover--content--border-radius, var(--sc-kit--radius--md));
   --_dd--content-shadow: var(--sc-kit--popover--content--box-shadow, var(--sc-kit--shadow--lg));
-  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12rem);
+  --_dd--content-max-height: var(--sc-kit--popover--content--max-height, var(--_--popover--available-height, 100vh));
+  --_dd--content-max-width: var(--sc-kit--popover--content--max-width, var(--_--popover--available-width, 100vw));
+  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12.5rem);
+  --_dd--content-overflow: var(--sc-kit--popover--content--overflow, hidden auto);
   --_dd--content-padding: var(--sc-kit--popover--content--padding, var(--sc-kit--space--1) 0);
   --_dd--content-z-index: var(--sc-kit--popover--content--z-index, var(--sc-kit--z-index--popover));
   --_dd--anim-shift-x: 0;
@@ -311,15 +346,9 @@ Props for keeping the popover open during interaction:
   z-index: var(--_dd--content-z-index);
   width: max-content;
   min-width: var(--_dd--content-min-width);
-  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
-  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out) both;
 }
-.popover__content--panel {
-  background: var(--_dd--content-background);
-  border: 1px solid var(--_dd--content-border-color);
-  border-radius: var(--_dd--content-border-radius);
-  box-shadow: var(--_dd--content-shadow);
-  padding: var(--_dd--content-padding);
+.popover__content--bounded {
+  max-width: var(--_dd--content-max-width);
 }
 .popover__content:focus-visible {
   outline: none;
@@ -364,6 +393,39 @@ Props for keeping the popover open during interaction:
 .popover__content[data-placement=right-end] {
   --_dd--anim-origin-y: bottom;
 }
+.popover__panel {
+  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
+  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out);
+}
+.popover__panel--styled {
+  background: var(--_dd--content-background);
+  border: 1px solid var(--_dd--content-border-color);
+  border-radius: var(--_dd--content-border-radius);
+  box-shadow: var(--_dd--content-shadow);
+  padding: var(--_dd--content-padding);
+  max-height: var(--_dd--content-max-height);
+  overflow: var(--_dd--content-overflow);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.popover__panel--styled::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.popover__panel--styled::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.popover__panel--styled::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .popover__panel--styled {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
 
 @keyframes popover-appear {
   from {

package/dist/ui/popover/cmp.popover.svelte.d.ts

@@ -12,7 +12,7 @@ type Props = {
     boundaryMargin?: number;
     /** Render a semi-transparent backdrop behind the content. */
     backdrop?: boolean;
-    /** Make the content match the trigger element width. */
+    /** Make the content match the trigger element width, overriding `--sc-kit--popover--content--min-width` (never growing past the available space). */
     matchWidth?: boolean;
     /** Apply built-in panel styling (background, shadow, border-radius). @default true */
     panel?: boolean;
@@ -61,6 +61,23 @@ type Props = {
  * <button onclick={() => dd?.open()}>Open externally</button>
  * ```
  *
+ * With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+ * `flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+ * `text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+ * `--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+ *
+ * Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+ * cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+ * an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+ * the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+ * clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+ *
+ * Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+ * panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+ * the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+ * `outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+ * already carries the margin that keeps it clear.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
@@ -69,7 +86,10 @@ type Props = {
  * | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
  * | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
- * | `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+ * | `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+ * | `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+ * | `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+ * | `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
  * | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
  * | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",