@streamscloud/kit 0.79.0 → 0.80.0

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

@@ -1,8 +1,8 @@
 <script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
-import { Icon } from '../icon';
+import { IconSlot } from '../icon';
 import { formatNumeral, NumeralThousandGroupStyles, registerCursorTracker } from 'cleave-zen';
 import { untrack } from 'svelte';
-const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, decimals = 2, suffix, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
+const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, decimals = 2, suffix, hideResolvedValue = false, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
 let inputEl = $state.raw(undefined);
 let focused = $state(false);
 let typedValue = $state(undefined);
@@ -33,7 +33,7 @@ const resolveValue = (typed) => {
     return mode.clearable ? null : (min ?? mode.value);
 };
 const resolvedTypedValue = $derived(typedValue === undefined ? undefined : resolveValue(typedValue));
-const valueHintVisible = $derived(resolvedTypedValue !== typedValue);
+const valueHintVisible = $derived(!hideResolvedValue && resolvedTypedValue !== typedValue);
 const initialText = untrack(() => displayValue);
 // Writing the prop into the field while focused would overwrite a typed "1" with min "8" before "12" can be typed.
 $effect(() => {
@@ -121,14 +121,10 @@ const initInput = (node) => {
   onkeydown={() => undefined}
   role="none">
   {#if icon && iconPosition === 'leading'}
-    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
-      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true"><IconSlot icon={icon} /></span>
   {/if}
   {#if secondaryIcon && iconPosition === 'trailing'}
-    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
-      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
   {/if}
 
   <!-- svelte-ignore a11y_autofocus -->
@@ -169,14 +165,10 @@ const initInput = (node) => {
   {/if}
 
   {#if icon && iconPosition === 'trailing'}
-    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
-      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true"><IconSlot icon={icon} /></span>
   {/if}
   {#if secondaryIcon && iconPosition === 'leading'}
-    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
-      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
-    </span>
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true"><IconSlot icon={secondaryIcon} /></span>
   {/if}
 </div>
 
@@ -191,7 +183,7 @@ While focused the text belongs to the user: a value change from outside lands on
 emitted value is clamped to `min` / `max`, but the typed text is left alone until commit (blur,
 Enter, `change`) — so a prefix below `min` stays typeable. With `clearable: false` an empty
 field emits `min`, or keeps the held value when there is no `min`. Whenever the typed text resolves
-to a different value, that value shows next to the field as `→ 12`.
+to a different value, that value shows next to the field as `→ 12` (off with `hideResolvedValue`).
 
 ### CSS Custom Properties
 | Property | Description | Default |

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

@@ -1,4 +1,4 @@
-import { type Snippet } from 'svelte';
+import { type IconProp } from '../icon';
 type BaseProps = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
@@ -24,15 +24,17 @@ type BaseProps = {
     decimals?: number;
     /** Muted unit rendered after the value, outside the editable text (`px`, `%`, `°`). */
     suffix?: string;
+    /** Hides the `→ 12` hint shown while the typed text resolves to a different value — for narrow fields. */
+    hideResolvedValue?: boolean;
     'aria-describedby'?: string;
     'aria-label'?: string;
     'aria-required'?: boolean;
-    /** Primary icon — SVG source string or snippet. */
-    icon?: string | Snippet;
+    /** Primary icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
     /** Side of the input where the primary icon sits. @default 'leading' */
     iconPosition?: 'leading' | 'trailing';
     /** Optional secondary icon — always on the opposite side from `icon`. */
-    secondaryIcon?: string | Snippet;
+    secondaryIcon?: IconProp;
 };
 type ClearableProps = BaseProps & {
     /** Value can be cleared to `null`. Trigger shows an × button when set. */
@@ -73,7 +75,7 @@ type Props = ClearableProps | RequiredProps;
  * emitted value is clamped to `min` / `max`, but the typed text is left alone until commit (blur,
  * Enter, `change`) — so a prefix below `min` stays typeable. With `clearable: false` an empty
  * field emits `min`, or keeps the held value when there is no `min`. Whenever the typed text resolves
- * to a different value, that value shows next to the field as `→ 12`.
+ * to a different value, that value shows next to the field as `→ 12` (off with `hideResolvedValue`).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tile-card/cmp.tile-card.svelte

@@ -1,16 +1,59 @@
 <script lang="ts">import { Checkbox } from '../checkbox';
-import { ToolbarIconButton } from '../page-toolbar';
+import { Icon, IconSlot } from '../icon';
+import { IconText } from '../icon-text';
 import { PlayIndicator } from '../play-indicator';
-import { Popover } from '../popover';
+import { Popover, PopoverItem } from '../popover';
 import { TileCardLocalization } from './tile-card-localization';
 import IconMore from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-const { title, meta, preview, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
+const { title, meta, preview, actions, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
+const actionItems = $derived(actions?.items ?? []);
+const actionsPosition = $derived(preview ? (actions?.position ?? 'footer') : 'footer');
+let menuOpened = $state(false);
+let keyboardFocused = $state(false);
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 </script>
 
-<div class="tile-card" class:tile-card--selected={selected} class:tile-card--checkbox-always={checkboxVisibility === 'always'}>
+{#snippet actionsBlock()}
+  {#if actionItems.length}
+    <div class="tile-card__actions tile-card__actions--{actionsPosition}">
+      {#if actionItems.length === 1 && actionsPosition === 'top' && actions?.singleAsButton}
+        <button
+          type="button"
+          class="tile-card__action"
+          class:tile-card__action--overlay={actionsPosition === 'top'}
+          aria-label={actionItems[0].label}
+          title={actionItems[0].label}
+          onclick={() => actionItems[0].onClick()}>
+          <IconSlot icon={actionItems[0].icon} fallbacks={{ size: 'control-md' }} />
+        </button>
+      {:else}
+        <Popover
+          position="bottom-end"
+          fixedPosition
+          aria-label={actions?.label ?? localization.actions}
+          on={{ opened: () => (menuOpened = true), closed: () => (menuOpened = false) }}>
+          {#snippet trigger()}
+            <span class="tile-card__action" class:tile-card__action--overlay={actionsPosition === 'top'}><Icon src={IconMore} size="control-md" /></span>
+          {/snippet}
+          {#each actionItems as action, index (index)}
+            <PopoverItem on={{ click: action.onClick }}><IconText icon={action.icon} size="sm">{action.label}</IconText></PopoverItem>
+          {/each}
+        </Popover>
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<div
+  class="tile-card"
+  class:tile-card--selected={selected}
+  class:tile-card--checkbox-always={checkboxVisibility === 'always'}
+  class:tile-card--menu-opened={menuOpened}
+  class:tile-card--keyboard-focused={keyboardFocused}
+  onfocusin={(e) => (keyboardFocused = (e.target as HTMLElement).matches(':focus-visible'))}
+  onfocusout={() => (keyboardFocused = false)}>
   {#if on?.activate}
     <button type="button" class="tile-card__hit" aria-label={title} title={title} onclick={() => on?.activate?.()}></button>
   {/if}
@@ -33,17 +76,13 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
         <span class="tile-card__meta">{meta}</span>
       {/if}
     </div>
-    {#if menu}
-      <div class="tile-card__menu">
-        <Popover position="bottom-end" fixedPosition aria-label={menuLabel ?? localization.actions}>
-          {#snippet trigger()}
-            <ToolbarIconButton icon={IconMore} presentational />
-          {/snippet}
-          {@render menu()}
-        </Popover>
-      </div>
+    {#if actionsPosition === 'footer'}
+      {@render actionsBlock()}
     {/if}
   </div>
+  {#if actionsPosition === 'top'}
+    {@render actionsBlock()}
+  {/if}
   {#if on?.select}
     <div class="tile-card__checkbox">
       <Checkbox checked={selected} variant="on-accent" title={localization.select} on={{ change: (value) => on?.select?.(value) }} />
@@ -53,8 +92,9 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 
 <!--
 @component
-File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
-checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+File-browser style tile: a full-bleed preview on top and a footer with title and optional meta line. `actions` sit at the end
+of the footer or over the preview's top-right corner. Selection checkbox via `on.select`, whole-card activation via
+`on.activate`. For a drop-target highlight wrap it in `DropZone`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -79,6 +119,7 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   --_tile-card--preview-aspect-ratio: var(--sc-kit--tile-card--preview--aspect-ratio, 7 / 5);
   --_tile-card--footer-min-height: var(--sc-kit--tile-card--footer--min-height, 3.25rem);
   --_tile-card--checkbox-opacity: 0;
+  --_tile-card--top-actions-opacity: 0;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -93,8 +134,12 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
 .tile-card:hover {
   --_tile-card--border-color: var(--_tile-card--border-color-hover);
 }
-.tile-card:hover, .tile-card:focus-within {
+.tile-card:hover, .tile-card--keyboard-focused {
   --_tile-card--checkbox-opacity: 1;
+  --_tile-card--top-actions-opacity: 1;
+}
+.tile-card--menu-opened {
+  --_tile-card--top-actions-opacity: 1;
 }
 .tile-card:has(> .tile-card__hit:focus-visible) {
   outline: 2px solid var(--sc-kit--color--border--focus);
@@ -112,6 +157,7 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
 @media (hover: none) {
   .tile-card {
     --_tile-card--checkbox-opacity: 1;
+    --_tile-card--top-actions-opacity: 1;
   }
 }
 .tile-card__hit {
@@ -182,10 +228,46 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   white-space: nowrap;
   overflow: hidden;
 }
-.tile-card__menu {
+.tile-card__actions {
   position: relative;
   display: flex;
 }
+.tile-card__actions--top {
+  position: absolute;
+  inset-block-start: var(--sc-kit--space--3);
+  inset-inline-end: var(--sc-kit--space--3);
+  opacity: var(--_tile-card--top-actions-opacity);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tile-card__action {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sc-kit--field--border-radius--sm);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tile-card__action:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
+.tile-card__action:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.tile-card__action--overlay {
+  --sc-kit--icon--color: var(--sc-kit--color--text--primary);
+  background: var(--sc-kit--color--bg--panel);
+  box-shadow: var(--sc-kit--shadow--md);
+}
+.tile-card__action--overlay:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
 .tile-card__checkbox {
   position: absolute;
   inset-block-start: var(--sc-kit--space--3);

package/dist/ui/tile-card/cmp.tile-card.svelte.d.ts

@@ -1,28 +1,25 @@
-import type { TileCardCheckboxVisibility, TileCardPreview } from './types';
-import type { Snippet } from 'svelte';
+import type { TileCardActions, TileCardCheckboxVisibility, TileCardPreview } from './types';
 type Props = {
     title: string;
     /** Secondary line under the title. */
     meta?: string;
-    /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `menu` or `on.activate`. */
+    /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `actions` or `on.activate`. */
     preview?: TileCardPreview;
-    /** `PopoverItem`s of the kebab menu at the end of the footer. */
-    menu?: Snippet;
-    /** Accessible name of the kebab menu. @default localized "Actions" */
-    menuLabel?: string;
+    actions?: TileCardActions;
     selected?: boolean;
-    /** When the checkbox shows: `'hover'` — on hover, focus-within, when selected and on touch screens; `'always'` — permanently. @default 'hover' */
+    /** When the checkbox shows: `'hover'` — on hover, keyboard focus, when selected and on touch screens; `'always'` — permanently. @default 'hover' */
     checkboxVisibility?: TileCardCheckboxVisibility;
     on?: {
         /** Renders the checkbox at the top-left of the preview. */
         select?: (value: boolean) => void;
-        /** Fires on a click on the card surface or Enter / Space; the checkbox and the menu don't trigger it. */
+        /** Fires on a click on the card surface or Enter / Space; the checkbox and the actions don't trigger it. */
         activate?: () => void;
     };
 };
 /**
- * File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
- * checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+ * File-browser style tile: a full-bleed preview on top and a footer with title and optional meta line. `actions` sit at the end
+ * of the footer or over the preview's top-right corner. Selection checkbox via `on.select`, whole-card activation via
+ * `on.activate`. For a drop-target highlight wrap it in `DropZone`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tile-card/index.d.ts

@@ -1,2 +1,2 @@
-export type { TileCardCheckboxVisibility, TileCardPreview } from './types';
+export type { TileCardAction, TileCardActions, TileCardCheckboxVisibility, TileCardPreview } from './types';
 export { default as TileCard } from './cmp.tile-card.svelte';

package/dist/ui/tile-card/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 export type TileCardPreview = {
     image: string;
@@ -6,3 +7,22 @@ export type TileCardPreview = {
     poster?: string;
 } | Snippet;
 export type TileCardCheckboxVisibility = 'hover' | 'always';
+/** One card action. `label` is the menu item text, or the accessible name and tooltip when it renders as a lone icon button. */
+export type TileCardAction = {
+    label: string;
+    icon: IconProp;
+    onClick: () => void;
+};
+export type TileCardActions = {
+    items: TileCardAction[];
+    /**
+     * `'footer'` — at the end of the footer; `'top'` — over the top-right corner of the preview, revealed on hover, keyboard focus, while its menu is
+     * open and on touch screens. A card without a `preview` always uses `'footer'`.
+     * @default 'footer'
+     */
+    position?: 'footer' | 'top';
+    /** With `position: 'top'`, a single item renders as its own icon button instead of a one-item kebab menu. @default false */
+    singleAsButton?: boolean;
+    /** Accessible name of the kebab menu. @default localized "Actions" */
+    label?: string;
+};

package/package.json

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