@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/pin-input/cmp.pin-input.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
+let cells = $state([]);
+const cellValue = (i) => value[i] ?? '';
+const emit = (next) => {
+    on?.input?.(next);
+    on?.change?.(next);
+    if (next.length === length) {
+        on?.complete?.(next);
+    }
+};
+const writeAt = (idx, ch) => {
+    const arr = value.padEnd(length, ' ').split('');
+    arr[idx] = ch || ' ';
+    return arr.join('').replace(/ +$/, '');
+};
+const handleInput = (e, idx) => {
+    const target = e.target;
+    const ch = target.value.replace(/[^0-9]/g, '').slice(-1);
+    target.value = ch;
+    const next = writeAt(idx, ch);
+    emit(next);
+    if (ch && idx < length - 1) {
+        cells[idx + 1]?.focus();
+    }
+};
+const handleKeydown = (e, idx) => {
+    if (e.key === 'Backspace') {
+        const target = e.target;
+        if (!target.value && idx > 0) {
+            cells[idx - 1]?.focus();
+        }
+        return;
+    }
+    if (e.key === 'ArrowLeft' && idx > 0) {
+        e.preventDefault();
+        cells[idx - 1]?.focus();
+        return;
+    }
+    if (e.key === 'ArrowRight' && idx < length - 1) {
+        e.preventDefault();
+        cells[idx + 1]?.focus();
+    }
+};
+const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = (e.clipboardData?.getData('text') ?? '').replace(/[^0-9]/g, '').slice(0, length);
+    if (!pasted) {
+        return;
+    }
+    emit(pasted);
+    const focusIdx = Math.min(pasted.length, length - 1);
+    cells[focusIdx]?.focus();
+};
+const handleFocus = (e) => {
+    const target = e.target;
+    setTimeout(() => target.setSelectionRange(0, target.value.length));
+};
+</script>
+
+<div class="pin-input" class:pin-input--disabled={disabled} class:pin-input--error={error} role="group" aria-label={ariaLabel}>
+  {#each Array(length) as _, i (i)}
+    <input
+      bind:this={cells[i]}
+      class="pin-input__cell"
+      class:pin-input__cell--filled={cellValue(i) !== ''}
+      type={mask ? 'password' : 'text'}
+      inputmode="numeric"
+      maxlength="1"
+      autocomplete="one-time-code"
+      disabled={disabled}
+      value={cellValue(i)}
+      aria-invalid={error ? 'true' : undefined}
+      oninput={(e) => handleInput(e, i)}
+      onkeydown={(e) => handleKeydown(e, i)}
+      onpaste={handlePaste}
+      onfocus={handleFocus} />
+  {/each}
+</div>
+
+<!--
+@component
+Multi-cell one-time-code input. Auto-advances cursor on entry, backspaces back, supports
+paste of the full code, and arrow-key navigation between cells. Numeric-only (forces
+`inputmode="numeric"` + filters non-digits). Set `mask` for sensitive codes (renders cells
+as `<input type="password">`). Fires `on.complete` when all cells are filled.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--pin-input--gap` | Gap between cells | `var(--sc-kit--space--2)` |
+| `--sc-kit--pin-input--cell-width` | Cell width | `2.25rem` |
+| `--sc-kit--pin-input--cell-height` | Cell height | `2.75rem` |
+| `--sc-kit--pin-input--font-size` | Digit font size | `1.1875rem` |
+| `--sc-kit--pin-input--background` | Cell background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--pin-input--background--filled` | Filled-cell background | `var(--sc-kit--color--success--soft)` |
+| `--sc-kit--pin-input--border-color` | Cell border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--pin-input--border-color--focus` | Focused cell border color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--pin-input--border-color--filled` | Filled cell border color | `var(--sc-kit--color--success)` |
+| `--sc-kit--pin-input--border-color--error` | Error state border color | `var(--sc-kit--color--danger)` |
+| `--sc-kit--pin-input--border-radius` | Cell corner radius | `var(--sc-kit--radius--lg)` |
+| `--sc-kit--pin-input--color` | Digit color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--pin-input--focus-shadow` | Focused cell shadow | `var(--sc-kit--shadow--focus)` |
+-->
+
+<style>.pin-input {
+  --_pi--gap: var(--sc-kit--pin-input--gap, var(--sc-kit--space--2));
+  --_pi--cell-width: var(--sc-kit--pin-input--cell-width, 2.25rem);
+  --_pi--cell-height: var(--sc-kit--pin-input--cell-height, 2.75rem);
+  --_pi--font-size: var(--sc-kit--pin-input--font-size, 1.1875rem);
+  --_pi--background: var(--sc-kit--pin-input--background, var(--sc-kit--color--bg--field));
+  --_pi--background-filled: var(--sc-kit--pin-input--background--filled, var(--sc-kit--color--success--soft));
+  --_pi--border-color: var(--sc-kit--pin-input--border-color, var(--sc-kit--color--border--field));
+  --_pi--border-color-focus: var(--sc-kit--pin-input--border-color--focus, var(--sc-kit--color--accent));
+  --_pi--border-color-filled: var(--sc-kit--pin-input--border-color--filled, var(--sc-kit--color--success));
+  --_pi--border-color-error: var(--sc-kit--pin-input--border-color--error, var(--sc-kit--color--danger));
+  --_pi--border-radius: var(--sc-kit--pin-input--border-radius, var(--sc-kit--radius--lg));
+  --_pi--color: var(--sc-kit--pin-input--color, var(--sc-kit--color--text--primary));
+  --_pi--focus-shadow: var(--sc-kit--pin-input--focus-shadow, var(--sc-kit--shadow--focus));
+  display: inline-flex;
+  gap: var(--_pi--gap);
+}
+.pin-input--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.pin-input--error {
+  --sc-kit--pin-input--border-color: var(--_pi--border-color-error);
+  --sc-kit--pin-input--border-color--filled: var(--_pi--border-color-error);
+}
+.pin-input__cell {
+  box-sizing: border-box;
+  width: var(--_pi--cell-width);
+  height: var(--_pi--cell-height);
+  padding: 0;
+  margin: 0;
+  background: var(--_pi--background);
+  border: 1.5px solid var(--_pi--border-color);
+  border-radius: var(--_pi--border-radius);
+  color: var(--_pi--color);
+  font-family: inherit;
+  font-size: var(--_pi--font-size);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.pin-input__cell:focus, .pin-input__cell:focus-visible {
+  --sc-kit--pin-input--border-color: var(--_pi--border-color-focus);
+  box-shadow: var(--_pi--focus-shadow);
+}
+.pin-input__cell--filled {
+  --sc-kit--pin-input--background: var(--_pi--background-filled);
+  --sc-kit--pin-input--border-color: var(--_pi--border-color-filled);
+}</style>

package/dist/ui/pin-input/cmp.pin-input.svelte.d.ts

@@ -0,0 +1,44 @@
+type Props = {
+    value: string;
+    /** Number of cells. @default 6 */
+    length?: number;
+    /** Mask the digits (for sensitive codes — renders cells as `<input type="password">`). @default false */
+    mask?: boolean;
+    disabled?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"` on each cell. */
+    error?: boolean;
+    /** Accessible label for the cell group. Consumer-provided (no kit default). */
+    'aria-label'?: string;
+    on?: {
+        input?: (value: string) => void;
+        change?: (value: string) => void;
+        /** Fires when all cells are filled. */
+        complete?: (value: string) => void;
+    };
+};
+/**
+ * Multi-cell one-time-code input. Auto-advances cursor on entry, backspaces back, supports
+ * paste of the full code, and arrow-key navigation between cells. Numeric-only (forces
+ * `inputmode="numeric"` + filters non-digits). Set `mask` for sensitive codes (renders cells
+ * as `<input type="password">`). Fires `on.complete` when all cells are filled.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--pin-input--gap` | Gap between cells | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--pin-input--cell-width` | Cell width | `2.25rem` |
+ * | `--sc-kit--pin-input--cell-height` | Cell height | `2.75rem` |
+ * | `--sc-kit--pin-input--font-size` | Digit font size | `1.1875rem` |
+ * | `--sc-kit--pin-input--background` | Cell background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--pin-input--background--filled` | Filled-cell background | `var(--sc-kit--color--success--soft)` |
+ * | `--sc-kit--pin-input--border-color` | Cell border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--pin-input--border-color--focus` | Focused cell border color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--pin-input--border-color--filled` | Filled cell border color | `var(--sc-kit--color--success)` |
+ * | `--sc-kit--pin-input--border-color--error` | Error state border color | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--pin-input--border-radius` | Cell corner radius | `var(--sc-kit--radius--lg)` |
+ * | `--sc-kit--pin-input--color` | Digit color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--pin-input--focus-shadow` | Focused cell shadow | `var(--sc-kit--shadow--focus)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon } from '../../icon';
+<script lang="ts">import { IconSlot } from '../../icon';
 let { actions } = $props();
 </script>
 
@@ -6,7 +6,7 @@ let { actions } = $props();
   {#each actions as action (action.icon)}
     <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
       <span class="mobile-player-buttons__action-icon">
-        <Icon src={action.icon} color={action.iconColor} />
+        <IconSlot icon={action.icon} />
       </span>
     </button>
   {/each}
@@ -33,8 +33,8 @@ A vertically stacked column of player action buttons optimized for mobile touch
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1rem;
-  --sc-kit--icon--color: #ffffff;
+  padding: var(--sc-kit--space--4);
+  --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 2rem;
   --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
 }

package/dist/ui/player/buttons/cmp.player-buttons.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon } from '../../icon';
+<script lang="ts">import { IconSlot } from '../../icon';
 let { actions, scaleEffect = false, zoom = 1 } = $props();
 </script>
 
@@ -12,7 +12,7 @@ let { actions, scaleEffect = false, zoom = 1 } = $props();
     disabled={action.disabled}
     onclick={action.callback}>
     <span class="player-button__icon">
-      <Icon src={action.icon} color={action.iconColor} />
+      <IconSlot icon={action.icon} />
     </span>
   </button>
 {:else if actions.length > 1}
@@ -25,7 +25,7 @@ let { actions, scaleEffect = false, zoom = 1 } = $props();
         disabled={action.disabled}
         onclick={action.callback}>
         <span class="player-buttons__action-icon">
-          <Icon src={action.icon} color={action.iconColor} />
+          <IconSlot icon={action.icon} />
         </span>
       </button>
     {/each}
@@ -44,8 +44,8 @@ Desktop player action buttons — renders a single circular button or a vertical
 -->
 
 <style>.player-button {
-  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
-  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
   --_player-button--icon-scale: 1;
   pointer-events: auto;
   padding: 0.625rem;
@@ -55,8 +55,8 @@ Desktop player action buttons — renders a single circular button or a vertical
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
   border-radius: 50%;
-  color: #ffffff;
-  --sc-kit--icon--color: #ffffff;
+  color: var(--sc-kit--color--text--on-accent);
+  --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 1.75rem;
 }
 .player-button:hover:not(:disabled) {
@@ -85,8 +85,8 @@ Desktop player action buttons — renders a single circular button or a vertical
 }
 
 .player-buttons {
-  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
-  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -103,8 +103,8 @@ Desktop player action buttons — renders a single circular button or a vertical
   align-items: center;
   padding: 0.5625rem;
   border-radius: 1.25rem;
-  color: #ffffff;
-  --sc-kit--icon--color: #ffffff;
+  color: var(--sc-kit--color--text--on-accent);
+  --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 1.75rem;
   transition: background-color 0.5s;
 }

package/dist/ui/player/buttons/types.d.ts

@@ -1,7 +1,6 @@
-import type { IconColor } from '../../icon';
+import type { IconProp } from '../../icon';
 export type PlayerButtonDef = {
-    icon: string;
-    iconColor?: IconColor;
+    icon: IconProp;
     callback: () => void;
     disabled?: boolean;
 };

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -283,7 +283,8 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 | `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
 | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
 | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
-| `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+| `--sc-kit--carousel--text-color` | Arrow button icon color | `white` |
+| `--sc-kit--carousel--counts--color` | Counter text color (floats over media — white by default) | `white` |
 | `--sc-kit--carousel--counts--font-size` | Counter text font size | `0.9375rem` |
 | `--sc-kit--carousel--counts--width` | Counter container width | `5.625rem` |
 | `--sc-kit--carousel--counts--text-shadow` | Counter text shadow | `0 1px 0/3px/6px rgba(0,0,0,...)` |
@@ -294,9 +295,10 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 .carousel {
   /* Public API */
   --_carousel--button-color: var(--sc-kit--carousel--button-color, rgba(255, 255, 255, 0.2));
-  --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
+  --_carousel--dot-color: var(--sc-kit--carousel--dot-color, var(--sc-kit--color--text--on-accent));
   --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
-  --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);
+  --_carousel--text-color: var(--sc-kit--carousel--text-color, var(--sc-kit--color--text--on-accent));
+  --_carousel--counts--color: var(--sc-kit--carousel--counts--color, var(--sc-kit--color--text--on-accent));
   --_carousel--counts--font-size: var(--sc-kit--carousel--counts--font-size, 0.9375rem);
   --_carousel--counts--width: var(--sc-kit--carousel--counts--width, 5.625rem);
   --_carousel--counts--text-shadow: var(
@@ -433,7 +435,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
   font-weight: 300;
   width: var(--_carousel--counts--width);
   text-align: center;
-  color: var(--_carousel--text-color);
+  color: var(--_carousel--counts--color);
   text-shadow: var(--_carousel--counts--text-shadow);
 }
 .carousel__counts-navigation-button {

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -51,7 +51,8 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
  * | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
  * | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
- * | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+ * | `--sc-kit--carousel--text-color` | Arrow button icon color | `white` |
+ * | `--sc-kit--carousel--counts--color` | Counter text color (floats over media — white by default) | `white` |
  * | `--sc-kit--carousel--counts--font-size` | Counter text font size | `0.9375rem` |
  * | `--sc-kit--carousel--counts--width` | Counter container width | `5.625rem` |
  * | `--sc-kit--carousel--counts--text-shadow` | Counter text shadow | `0 1px 0/3px/6px rgba(0,0,0,...)` |

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

@@ -0,0 +1,64 @@
+<script lang="ts">import Popover from './cmp.popover.svelte';
+const { openDelay = 100, closeDelay = 200, ...rest } = $props();
+let popover = $state.raw(undefined);
+let openTimer;
+let closeTimer;
+const cancelTimers = () => {
+    if (openTimer !== undefined) {
+        clearTimeout(openTimer);
+        openTimer = undefined;
+    }
+    if (closeTimer !== undefined) {
+        clearTimeout(closeTimer);
+        closeTimer = undefined;
+    }
+};
+const scheduleOpen = () => {
+    cancelTimers();
+    openTimer = setTimeout(() => {
+        popover?.open();
+        openTimer = undefined;
+    }, openDelay);
+};
+const scheduleClose = () => {
+    cancelTimers();
+    closeTimer = setTimeout(() => {
+        popover?.close();
+        closeTimer = undefined;
+    }, closeDelay);
+};
+/** Imperative API — bind:this on HoverPopover to access. */
+export const open = () => popover?.open();
+export const close = () => popover?.close();
+export const toggle = () => popover?.toggle();
+$effect(() => {
+    return () => cancelTimers();
+});
+</script>
+
+<span class="hover-popover" role="presentation" onmouseenter={scheduleOpen} onmouseleave={scheduleClose} onfocusin={scheduleOpen} onfocusout={scheduleClose}>
+  <Popover bind:this={popover} {...rest} />
+</span>
+
+<!--
+@component
+HoverPopover — thin wrapper around Popover that opens on hover/focus instead of click.
+Content is rendered as a DOM descendant of the wrapper, so moving the cursor from trigger
+to content stays "inside" the hover zone (no close fires). The `closeDelay` covers the
+small visual gap between trigger and content.
+
+`bind:this` on HoverPopover forwards `open() / close() / toggle()` from the inner Popover.
+
+```svelte
+import { HoverPopover, PopoverItem } from '@streamscloud/kit/ui/popover';
+
+<HoverPopover>
+  {#snippet trigger()}<Button type="button">Hover me</Button>{/snippet}
+  <PopoverItem>Action</PopoverItem>
+</HoverPopover>
+```
+-->
+
+<style>.hover-popover {
+  display: contents;
+}</style>

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

@@ -0,0 +1,52 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Floating UI placement. @default 'bottom-start' */
+    position?: Placement;
+    /** Distance in px between the trigger and the content. @default 4 */
+    offset?: number;
+    /** Padding in px from the viewport boundary before content shifts/flips. @default 8 */
+    boundaryMargin?: number;
+    fixedPosition?: boolean;
+    matchWidth?: boolean;
+    disabled?: boolean;
+    backdrop?: boolean;
+    /** Apply built-in panel styling. @default true */
+    panel?: boolean;
+    /** Keep open on any click inside the content. */
+    keepOpen?: boolean;
+    on?: {
+        opened?: () => void;
+        closed?: () => void;
+    };
+    trigger?: Snippet;
+    children: Snippet;
+    /** ms before hover-open fires (debounce against accidental hovers). @default 100 */
+    openDelay?: number;
+    /** ms after mouse leaves trigger+content before close fires (gives time to bridge into the panel). @default 200 */
+    closeDelay?: number;
+};
+/**
+ * HoverPopover — thin wrapper around Popover that opens on hover/focus instead of click.
+ * Content is rendered as a DOM descendant of the wrapper, so moving the cursor from trigger
+ * to content stays "inside" the hover zone (no close fires). The `closeDelay` covers the
+ * small visual gap between trigger and content.
+ *
+ * `bind:this` on HoverPopover forwards `open() / close() / toggle()` from the inner Popover.
+ *
+ * ```svelte
+ * import { HoverPopover, PopoverItem } from '@streamscloud/kit/ui/popover';
+ *
+ * <HoverPopover>
+ * {#snippet trigger()}<Button type="button">Hover me</Button>{/snippet}
+ * <PopoverItem>Action</PopoverItem>
+ * </HoverPopover>
+ * ```
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API — bind:this on HoverPopover to access. */ open: () => void;
+    close: () => void;
+    toggle: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,89 @@
+<script lang="ts">import { popoverIgnore } from './popover-ignore';
+const { disabled = false, keepOpen = false, divider = false, on, children } = $props();
+const handleClick = () => {
+    if (disabled) {
+        return;
+    }
+    on?.click?.();
+};
+</script>
+
+<div
+  class="popover-item"
+  class:popover-item--disabled={disabled}
+  class:popover-item--divider={divider}
+  use:popoverIgnore={keepOpen}
+  role="menuitem"
+  tabindex={disabled ? -1 : 0}
+  onclick={handleClick}
+  onkeydown={() => undefined}>
+  <div class="popover-item__content">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+PopoverItem — single row inside a Popover's content. Hover / disabled / opt-in divider
+variants. Set `keepOpen` to prevent the parent popover from closing when clicked (useful
+for toggle items inside menus).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--popover-item--padding-block` | Item vertical padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--popover-item--padding-inline` | Item horizontal padding | `var(--sc-kit--space--4)` |
+| `--sc-kit--popover-item--gap` | Gap between icon / label / shortcut | `var(--sc-kit--space--2)` |
+| `--sc-kit--popover-item--font-size` | Content font size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--popover-item--line-height` | Content line height | `var(--sc-kit--leading--normal)` |
+| `--sc-kit--popover-item--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--popover-item--color--disabled` | Disabled text color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--popover-item--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--popover-item--divider-color` | Divider line color | `var(--sc-kit--color--border)` |
+| `--sc-kit--popover-item--divider-spacing` | Vertical gap added by divider | `var(--sc-kit--space--1)` |
+| `--sc-kit--popover-item--text-align` | Text alignment | `left` |
+-->
+
+<style>.popover-item {
+  --_di--padding-block: var(--sc-kit--popover-item--padding-block, var(--sc-kit--space--2));
+  --_di--padding-inline: var(--sc-kit--popover-item--padding-inline, var(--sc-kit--space--4));
+  --_di--gap: var(--sc-kit--popover-item--gap, var(--sc-kit--space--2));
+  --_di--font-size: var(--sc-kit--popover-item--font-size, var(--sc-kit--font-size--md));
+  --_di--line-height: var(--sc-kit--popover-item--line-height, var(--sc-kit--leading--normal));
+  --_di--color: var(--sc-kit--popover-item--color, var(--sc-kit--color--text--primary));
+  --_di--color-disabled: var(--sc-kit--popover-item--color--disabled, var(--sc-kit--color--text--muted));
+  --_di--background-hover: var(--sc-kit--popover-item--background--hover, var(--sc-kit--color--bg--hover));
+  --_di--divider-color: var(--sc-kit--popover-item--divider-color, var(--sc-kit--color--border));
+  --_di--divider-spacing: var(--sc-kit--popover-item--divider-spacing, var(--sc-kit--space--1));
+  --_di--text-align: var(--sc-kit--popover-item--text-align, left);
+  display: flex;
+  align-items: center;
+  gap: var(--_di--gap);
+  padding: var(--_di--padding-block) var(--_di--padding-inline);
+  color: var(--_di--color);
+  text-align: var(--_di--text-align);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.popover-item:hover:not(.popover-item--disabled) {
+  background: var(--_di--background-hover);
+}
+.popover-item:focus-visible {
+  outline: none;
+  background: var(--_di--background-hover);
+}
+.popover-item--disabled {
+  color: var(--_di--color-disabled);
+  cursor: default;
+}
+.popover-item--divider {
+  box-shadow: 0 1px 0 0 var(--_di--divider-color);
+  margin-bottom: var(--_di--divider-spacing);
+  padding-bottom: calc(var(--_di--padding-block) + 1px);
+}
+.popover-item__content {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--_di--font-size);
+  line-height: var(--_di--line-height);
+}</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    disabled?: boolean;
+    /** Prevent the parent popover from closing when this item is clicked. */
+    keepOpen?: boolean;
+    /** Render a separator line below this item — useful for grouping menu sections. */
+    divider?: boolean;
+    on?: {
+        click?: () => void;
+    };
+    children: Snippet;
+};
+/**
+ * PopoverItem — single row inside a Popover's content. Hover / disabled / opt-in divider
+ * variants. Set `keepOpen` to prevent the parent popover from closing when clicked (useful
+ * for toggle items inside menus).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--popover-item--padding-block` | Item vertical padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--popover-item--padding-inline` | Item horizontal padding | `var(--sc-kit--space--4)` |
+ * | `--sc-kit--popover-item--gap` | Gap between icon / label / shortcut | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--popover-item--font-size` | Content font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--popover-item--line-height` | Content line height | `var(--sc-kit--leading--normal)` |
+ * | `--sc-kit--popover-item--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--popover-item--color--disabled` | Disabled text color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--popover-item--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--popover-item--divider-color` | Divider line color | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--popover-item--divider-spacing` | Vertical gap added by divider | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--popover-item--text-align` | Text alignment | `left` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;