@streamscloud/kit 0.11.3 → 0.13.0

package/dist/core/validation/validation-schemas/number-validations.d.ts

@@ -1,4 +1,4 @@
 import type { MinNumberValidation, NumberValidation } from './types';
 import * as yup from 'yup';
-export declare const numberValidationSchema: (rules: NumberValidation) => yup.NumberSchema<number | undefined, yup.AnyObject, undefined, "">;
-export declare const minNumberValidationSchema: (rules: MinNumberValidation) => yup.NumberSchema<number | undefined, yup.AnyObject, undefined, "">;
+export declare const numberValidationSchema: (rules: NumberValidation) => yup.NumberSchema<number | null | undefined, yup.AnyObject, undefined, "">;
+export declare const minNumberValidationSchema: (rules: MinNumberValidation) => yup.NumberSchema<number | null | undefined, yup.AnyObject, undefined, "">;

package/dist/core/validation/validation-schemas/number-validations.js

@@ -2,10 +2,7 @@ import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 export const numberValidationSchema = (rules) => {
     const msg = new ValidationLocalization();
-    let schema = yup.number().typeError(msg.badFormat);
-    if (rules.isRequired) {
-        schema = schema.required(msg.required);
-    }
+    let schema = yup.number().typeError(msg.badFormat).nullable();
     if (rules.minValue !== null) {
         const minValue = rules.minExclusive ? rules.minValue + 1 : rules.minValue;
         schema = schema.min(minValue, msg.min(minValue));
@@ -18,10 +15,7 @@ export const numberValidationSchema = (rules) => {
 };
 export const minNumberValidationSchema = (rules) => {
     const msg = new ValidationLocalization();
-    let schema = yup.number().typeError(msg.badFormat);
-    if (rules.isRequired) {
-        schema = schema.required(msg.required);
-    }
+    let schema = yup.number().typeError(msg.badFormat).nullable();
     if (rules.minValue !== null) {
         const minValue = rules.minExclusive ? rules.minValue + 1 : rules.minValue;
         schema = schema.min(minValue, msg.min(minValue));

package/dist/core/validation/validation-schemas/types.d.ts

@@ -6,14 +6,12 @@ export type TextWithFormatValidation = TextValidation & {
     format: string;
 };
 export type NumberValidation = {
-    isRequired: boolean;
     minValue: number | null;
     maxValue: number | null;
     minExclusive: boolean;
     maxExclusive: boolean;
 };
 export type MinNumberValidation = {
-    isRequired: boolean;
     minValue: number | null;
     minExclusive: boolean;
 };

package/dist/ui/button/cmp.button.svelte

@@ -4,7 +4,18 @@ const { variant = 'primary', size = 'md', iconScale = 'default', disabled = fals
 const inactive = $derived(disabled || loading);
 const isIconOnly = $derived(!children && (!!icon || loading));
 const iconFallbacks = $derived({ size: CONTROL_ICON_SIZE[size], scale: iconScale });
-const disabledVariantClass = $derived(inactive ? `btn--${variant}-disabled` : '');
+const btnClass = $derived([
+    'btn',
+    `btn--${variant}`,
+    `btn--${size}`,
+    inactive && `btn--${variant}-disabled`,
+    fullWidth && 'btn--full',
+    loading && 'btn--loading',
+    isIconOnly && 'btn--icon-only',
+    inactive && 'btn--disabled'
+]
+    .filter(Boolean)
+    .join(' '));
 const anchorRel = $derived.by(() => {
     if (mode.type !== 'anchor') {
         return undefined;
@@ -23,7 +34,7 @@ const handleClick = (e) => {
         e.stopPropagation();
         return;
     }
-    if (mode.type !== 'anchor') {
+    if (mode.type !== 'anchor' && mode.type !== 'presentational') {
         mode.on?.click?.(e);
     }
 };
@@ -45,11 +56,7 @@ const handleClick = (e) => {
 
 {#if mode.type === 'anchor'}
   <a
-    class="btn btn--{variant} btn--{size} {disabledVariantClass}"
-    class:btn--full={fullWidth}
-    class:btn--loading={loading}
-    class:btn--icon-only={isIconOnly}
-    class:btn--disabled={inactive}
+    class={btnClass}
     href={inactive ? undefined : mode.href}
     target={mode.target}
     rel={anchorRel}
@@ -62,13 +69,13 @@ const handleClick = (e) => {
     onclick={handleClick}>
     {@render content()}
   </a>
+{:else if mode.type === 'presentational'}
+  <span class={btnClass}>
+    {@render content()}
+  </span>
 {:else}
   <button
-    class="btn btn--{variant} btn--{size} {disabledVariantClass}"
-    class:btn--full={fullWidth}
-    class:btn--loading={loading}
-    class:btn--icon-only={isIconOnly}
-    class:btn--disabled={inactive}
+    class={btnClass}
     type={mode.type}
     disabled={disabled}
     aria-label={ariaLabel}
@@ -88,7 +95,7 @@ A button with configurable variant, size, loading state, and an anchor mode. Wid
 
 The `icon` slot accepts an SVG source string or a snippet; `iconPosition` ('leading' / 'trailing', default leading) flips which side of the label the icon renders on. Icon-only mode kicks in automatically when `icon` is set without `children` — the button becomes square and requires an `aria-label`.
 
-Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the native `<button type>` (`'button' | 'submit' | 'reset'`).
+Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"` to render a non-interactive `<span>` styled as a button (for use as the visual inside another interactive element, e.g. a Popover trigger). Otherwise `type` is the native `<button type>` (`'button' | 'submit' | 'reset'`).
 
 ### CSS Custom Properties
 | Property | Description | Default |

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

@@ -41,13 +41,18 @@ type AnchorModeProps = BaseProps & {
     rel?: string;
     download?: string;
 };
-type Props = ButtonModeProps | AnchorModeProps;
+type PresentationalModeProps = BaseProps & {
+    /** Presentational mode — renders a non-interactive `<span>` styled as a button. Use as the visual inside another interactive element (e.g. a Popover trigger) to avoid nesting interactive elements. Accepts no `href` / click callback. */
+    type: 'presentational';
+    href?: never;
+};
+type Props = ButtonModeProps | AnchorModeProps | PresentationalModeProps;
 /**
  * A button with configurable variant, size, loading state, and an anchor mode. Width is intrinsic by default — use `fullWidth` for inline-axis stretch, or override `--sc-kit--button--{min,max,}width` from CSS for fine-grained control. Overflowing labels are truncated with an ellipsis.
  *
  * The `icon` slot accepts an SVG source string or a snippet; `iconPosition` ('leading' / 'trailing', default leading) flips which side of the label the icon renders on. Icon-only mode kicks in automatically when `icon` is set without `children` — the button becomes square and requires an `aria-label`.
  *
- * Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the native `<button type>` (`'button' | 'submit' | 'reset'`).
+ * Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"` to render a non-interactive `<span>` styled as a button (for use as the visual inside another interactive element, e.g. a Popover trigger). Otherwise `type` is the native `<button type>` (`'button' | 'submit' | 'reset'`).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">import { IconSlot } from '../icon';
-let { action, on } = $props();
+let { action, presentational = false, on } = $props();
 </script>
 
-<button
-  type="button"
-  class="card-action"
-  title={action.title ?? ''}
-  disabled={action.disabled}
-  onclick={(e) => {
-    if (!action.propagateClickEvent) {
-      e.stopPropagation();
-    }
+{#if presentational}
+  <span class="card-action" title={action.title ?? ''}>
+    <IconSlot icon={action.icon} fallbacks={{ color: 'text' }} />
+  </span>
+{:else}
+  <button
+    type="button"
+    class="card-action"
+    title={action.title ?? ''}
+    disabled={action.disabled}
+    onclick={(e) => {
+      if (!action.propagateClickEvent) {
+        e.stopPropagation();
+      }
 
-    action.callback?.();
-    on?.click?.();
-  }}>
-  <IconSlot icon={action.icon} fallbacks={{ color: 'text' }} />
-</button>
+      action.callback?.();
+      on?.click?.();
+    }}>
+    <IconSlot icon={action.icon} fallbacks={{ color: 'text' }} />
+  </button>
+{/if}
 
 <!--
 @component
@@ -32,7 +38,7 @@ render a disabled button (no callback, no hover effect via the native `:disabled
 
 <style>.card-action {
   --_card-action--padding: var(--sc-kit--card-action--padding, 0.3125em);
-  --_card-action--hover-scale: var(--sc-kit--card-action--hover-scale, 1.2);
+  --_card-action--hover-scale: var(--sc-kit--card-action--hover-scale, 1.1);
   appearance: none;
   background: transparent;
   border: 0;
@@ -40,6 +46,8 @@ render a disabled button (no callback, no hover effect via the native `:disabled
   cursor: pointer;
   padding: var(--_card-action--padding);
   transition: transform var(--sc-kit--duration--slow) var(--sc-kit--ease--default);
+  transform-origin: center;
+  will-change: transform;
   line-height: 0;
 }
 .card-action:hover:not(:disabled) {

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -2,6 +2,8 @@ import type { CardActionModel } from './types';
 type Props = {
     /** Action definition containing icon, callback, and title */
     action: CardActionModel;
+    /** Render a non-interactive `<span>` (same look, no button) — for use as the visual inside another interactive element, e.g. a Popover trigger. */
+    presentational?: boolean;
     on?: {
         click?: () => void;
     };

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

@@ -10,7 +10,7 @@ const closePopover = () => popover?.close();
   <div class="card-actions">
     <Popover bind:this={popover} position={popoverPosition}>
       {#snippet trigger()}
-        <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
+        <CardAction action={{ icon: IconMoreVertical }} presentational />
       {/snippet}
 
       <div class="card-actions__dropdown-content">
@@ -32,9 +32,9 @@ this is a deliberate scope rule, not a class to slap on by accident.
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--element` |
 | `--sc-kit--card-actions--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
-| `--sc-kit--card-actions--popover-background` | Popover panel background | inherits `--background` |
+| `--sc-kit--card-actions--popover-background` | Popover panel background | `--sc-kit--color--bg--panel` |
 | `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
 | `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
 | `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |
@@ -43,9 +43,9 @@ this is a deliberate scope rule, not a class to slap on by accident.
 -->
 
 <style>.card-actions {
-  --_card-actions--background: var(--sc-kit--card-actions--background, var(--sc-kit--color--bg--panel));
+  --_card-actions--background: var(--sc-kit--card-actions--background, var(--sc-kit--color--bg--element));
   --_card-actions--border-radius: var(--sc-kit--card-actions--border-radius, var(--sc-kit--radius--sm));
-  --_card-actions--popover-background: var(--sc-kit--card-actions--popover-background, var(--_card-actions--background));
+  --_card-actions--popover-background: var(--sc-kit--card-actions--popover-background, var(--sc-kit--color--bg--panel));
   --_card-actions--font-size: var(--sc-kit--card-actions--font-size, 1rem);
   --_card-actions--left-offset: var(--sc-kit--card-actions--left-offset, 0.3125em);
   --_card-actions--opacity: var(--sc-kit--card-actions--opacity, 0);

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

@@ -15,9 +15,9 @@ type Props = {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--card-actions--background` | Trigger background | `--sc-kit--color--bg--element` |
  * | `--sc-kit--card-actions--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
- * | `--sc-kit--card-actions--popover-background` | Popover panel background | inherits `--background` |
+ * | `--sc-kit--card-actions--popover-background` | Popover panel background | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
  * | `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
  * | `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |

package/dist/ui/grid-card/cmp.grid-card-media.svelte

@@ -49,15 +49,17 @@ const onCarouselIndexChanged = (index) => {
         <Icon src={IconImageOff} color="on-accent" />
       </div>
     {:else if items.length === 1}
-      {#if items[0].playable}
-        <VideoPlayer
-          src={items[0].url}
-          poster={items[0].cover}
-          active={true}
-          on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
-      {:else}
-        <Image src={items[0].url} showStubOnError={true} />
-      {/if}
+      <div class="grid-card-media__slide">
+        {#if items[0].playable}
+          <VideoPlayer
+            src={items[0].url}
+            poster={items[0].cover}
+            active={true}
+            on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
+        {:else}
+          <Image src={items[0].url} showStubOnError={true} />
+        {/if}
+      </div>
     {:else}
       <div class="grid-card-media__carousel">
         <Carousel items={items} mode="arrows-with-counts" initialIndex={0} on={{ indexChanged: onCarouselIndexChanged }}>

package/dist/ui/page-toolbar/cmp.toolbar-popover.svelte

@@ -9,7 +9,7 @@ const { title, triggerLabel, icon, size = 'sm', position = 'bottom-end', childre
 <div class="toolbar-popover">
   <Popover position={position} keepOpen>
     {#snippet trigger()}
-      <Button type="button" variant="secondary" size={size}>
+      <Button type="presentational" variant="secondary" size={size}>
         <IconText icon={icon} secondaryIcon={IconChevronDown} size={size} iconScale="large">{triggerLabel}</IconText>
       </Button>
     {/snippet}

package/dist/ui/pagination/cmp.pagination.svelte

@@ -57,12 +57,12 @@ const setSize = (size) => {
 {#if state.total > 0 || preserveSpace}
   <div class="pagination" class:pagination--hidden={!state.total} role="navigation" aria-label={localization.label}>
     {#if pageSizes && !compact}
-      <Popover position="top-end">
+      <Popover position="top-end" aria-label={localization.pageSize}>
         {#snippet trigger()}
-          <button type="button" class="pagination__node pagination__node--trigger" aria-label={localization.pageSize}>
+          <span class="pagination__node pagination__node--trigger">
             {state.pageSize}
             <Icon src={IconChevronDown} />
-          </button>
+          </span>
         {/snippet}
         {#each pageSizes as size (size)}
           <PopoverItem on={{ click: () => setSize(size) }}>{size}</PopoverItem>

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

@@ -53,7 +53,7 @@ small visual gap between trigger and content.
 import { HoverPopover, PopoverItem } from '@streamscloud/kit/ui/popover';
 
 <HoverPopover>
-  {#snippet trigger()}<Button type="button">Hover me</Button>{/snippet}
+  {#snippet trigger()}<Button type="presentational">Hover me</Button>{/snippet}
   <PopoverItem>Action</PopoverItem>
 </HoverPopover>
 ```

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

@@ -38,7 +38,7 @@ type Props = {
  * import { HoverPopover, PopoverItem } from '@streamscloud/kit/ui/popover';
  *
  * <HoverPopover>
- * {#snippet trigger()}<Button type="button">Hover me</Button>{/snippet}
+ * {#snippet trigger()}<Button type="presentational">Hover me</Button>{/snippet}
  * <PopoverItem>Action</PopoverItem>
  * </HoverPopover>
  * ```

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { popoverIgnore } from './popover-ignore';
-const { disabled = false, keepOpen = false, divider = false, inset = false, on, children } = $props();
+const { disabled = false, keepOpen = false, divider = false, inset = true, on, children } = $props();
 const handleClick = () => {
     if (disabled) {
         return;
@@ -43,8 +43,8 @@ for toggle items inside menus).
 | `--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` |
-| `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` | `var(--sc-kit--space--2)` |
-| `--sc-kit--popover-item--border-radius` | Corner radius when `inset` | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` (default on) | `var(--sc-kit--space--2)` |
+| `--sc-kit--popover-item--border-radius` | Corner radius when `inset` (default on) | `var(--sc-kit--radius--sm)` |
 -->
 
 <style>.popover-item {

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

@@ -5,7 +5,10 @@ type Props = {
     keepOpen?: boolean;
     /** Render a separator line below this item — useful for grouping menu sections. */
     divider?: boolean;
-    /** Inset the item from the popover edges: adds an inline margin and rounds the hover background. */
+    /**
+     * Inset the item from the popover edges: adds an inline margin and rounds the hover background.
+     * @default true
+     */
     inset?: boolean;
     on?: {
         click?: () => void;
@@ -31,8 +34,8 @@ type Props = {
  * | `--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` |
- * | `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` | `var(--sc-kit--space--2)` |
- * | `--sc-kit--popover-item--border-radius` | Corner radius when `inset` | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` (default on) | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--popover-item--border-radius` | Corner radius when `inset` (default on) | `var(--sc-kit--radius--sm)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,9 +1,10 @@
 <script lang="ts">import { Icon } from '../icon';
 import { isIgnored } from './popover-ignore';
+import { validateTrigger } from './validate-trigger';
 import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size } from '@floating-ui/dom';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import { tick } from 'svelte';
-let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, on, children, trigger } = $props();
+let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, on, children, trigger, 'aria-label': ariaLabel } = $props();
 let opened = $state(false);
 let triggerEl = $state.raw(undefined);
 let contentEl = $state.raw(undefined);
@@ -169,9 +170,11 @@ const handleBackdropClick = (e) => {
     class="popover__trigger"
     class:popover__trigger--fill={fillContainer}
     disabled={disabled}
+    aria-label={ariaLabel}
     aria-haspopup="true"
     aria-expanded={opened}
-    onclick={handleTriggerClick}>
+    onclick={handleTriggerClick}
+    use:validateTrigger>
     {#if trigger}
       {@render trigger()}
     {:else}
@@ -200,6 +203,11 @@ Popover — floating content anchored to a trigger element. Click trigger to ope
 click outside, Escape, or click inside content (default) to close. Use `popoverIgnore`
 action on a sub-tree to keep the popover open when clicks land inside that sub-tree.
 
+The trigger renders inside a `<button>`, so trigger content must be non-interactive (an icon,
+text). For a button-looking trigger, pass `Button` with `type="presentational"` (a styled `<span>`)
+— never an interactive element, which would nest inside the trigger `<button>`. A dev-only guard
+warns and outlines the trigger in red if interactive content is detected.
+
 Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
 methods. Import `PopoverInstance` type from the barrel for typing the ref.
 

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

@@ -25,14 +25,25 @@ type Props = {
         closed?: () => void;
     };
     children: Snippet;
-    /** Custom trigger snippet; defaults to a chevron-down icon. */
+    /**
+     * Custom trigger content; defaults to a chevron-down icon. Renders inside the trigger `<button>`,
+     * so content MUST be non-interactive — for a button-looking trigger use `Button` with
+     * `type="presentational"`. Nesting an interactive element triggers a dev-only warning.
+     */
     trigger?: Snippet;
+    /** Accessible name for the trigger button — required when the trigger content carries no text (an icon-only trigger). */
+    'aria-label'?: string;
 };
 /**
  * Popover — floating content anchored to a trigger element. Click trigger to open;
  * click outside, Escape, or click inside content (default) to close. Use `popoverIgnore`
  * action on a sub-tree to keep the popover open when clicks land inside that sub-tree.
  *
+ * The trigger renders inside a `<button>`, so trigger content must be non-interactive (an icon,
+ * text). For a button-looking trigger, pass `Button` with `type="presentational"` (a styled `<span>`)
+ * — never an interactive element, which would nest inside the trigger `<button>`. A dev-only guard
+ * warns and outlines the trigger in red if interactive content is detected.
+ *
  * Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
  * methods. Import `PopoverInstance` type from the barrel for typing the ref.
  *

package/dist/ui/popover/validate-trigger.d.ts

@@ -0,0 +1,8 @@
+import type { Action } from 'svelte/action';
+/**
+ * Dev-only guard for the Popover trigger. The trigger renders inside a `<button>`, so its content
+ * must be non-interactive (use `Button` with `type="presentational"` for a button-looking trigger).
+ * If an interactive element is found inside, it logs a console warning pointing at the offending
+ * node and outlines the trigger in red. No-op in production.
+ */
+export declare const validateTrigger: Action<HTMLElement>;

package/dist/ui/popover/validate-trigger.js

@@ -0,0 +1,32 @@
+const INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])';
+/**
+ * Dev-only guard for the Popover trigger. The trigger renders inside a `<button>`, so its content
+ * must be non-interactive (use `Button` with `type="presentational"` for a button-looking trigger).
+ * If an interactive element is found inside, it logs a console warning pointing at the offending
+ * node and outlines the trigger in red. No-op in production.
+ */
+export const validateTrigger = (node) => {
+    if (!import.meta.env?.DEV) {
+        return;
+    }
+    const check = () => {
+        const offender = node.querySelector(INTERACTIVE_SELECTOR);
+        if (offender) {
+            node.style.outline = '2px solid red';
+            node.style.outlineOffset = '1px';
+            console.warn('[Popover] Trigger content must be non-interactive — it renders inside a <button>. Use <Button type="presentational"> (or plain markup) instead of an interactive element. Offending element:', offender);
+        }
+        else {
+            node.style.removeProperty('outline');
+            node.style.removeProperty('outline-offset');
+        }
+    };
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(node, { childList: true });
+    return {
+        destroy() {
+            observer.disconnect();
+        }
+    };
+};

package/dist/ui/table/table-cells/table-actions-cell.svelte

@@ -2,21 +2,18 @@
 import { Popover } from '../../popover';
 import IconMoreHorizontal from '@fluentui/svg-icons/icons/more_horizontal_20_regular.svg?raw';
 let { popoverPosition = 'bottom-end', children } = $props();
-let popover = $state.raw(undefined);
 </script>
 
-<button type="button" class="table-actions-cell__dropdown-wrapper" onclick={() => popover?.toggle()}>
-  <span>
-    <Popover bind:this={popover} position={popoverPosition}>
-      {#snippet trigger()}
-        <button type="button" class="table-actions-cell__trigger">
-          <Icon src={IconMoreHorizontal} />
-        </button>
-      {/snippet}
-      {@render children()}
-    </Popover>
-  </span>
-</button>
+<div class="table-actions-cell__dropdown-wrapper">
+  <Popover position={popoverPosition} fillContainer>
+    {#snippet trigger()}
+      <span class="table-actions-cell__trigger">
+        <Icon src={IconMoreHorizontal} />
+      </span>
+    {/snippet}
+    {@render children()}
+  </Popover>
+</div>
 
 <!--
 @component

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -77,7 +77,7 @@ const handleChange = (updatedItems) => {
 
 <Popover position="bottom-start" keepOpen>
   {#snippet trigger()}
-    <Button type="button" variant="secondary" size="sm">
+    <Button type="presentational" variant="secondary" size="sm">
       <IconText icon={{ src: IconColumnTwo, color: 'accent' }} secondaryIcon={IconChevronDown} size="sm" iconScale="large">{localization.columns}</IconText>
     </Button>
   {/snippet}

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -17,7 +17,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
     {#if availableGroupActions.length > 1}
       <Popover position="bottom-end">
         {#snippet trigger()}
-          <Button type="button" variant="secondary" size="sm">
+          <Button type="presentational" variant="secondary" size="sm">
             <IconText icon={IconChevronDown} iconPosition="trailing">{localization.actions}</IconText>
           </Button>
         {/snippet}

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -23,12 +23,12 @@ const changeSort = (direction) => {
     <span>&nbsp;</span>
     <Popover position="bottom-start">
       {#snippet trigger()}
-        <button type="button" class="th-sortable__marker">
+        <span class="th-sortable__marker">
           <span class="th-sortable__title">
             {column.title}
           </span>
           <Icon src={IconCaretDownFilled} />
-        </button>
+        </span>
       {/snippet}
 
       <div class="th-sortable__popover">
@@ -97,6 +97,7 @@ const changeSort = (direction) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-weight: 400;
 }
 .th-sortable__marker {
   --sc-kit--icon--size: 0.75em;

package/dist/ui/video/cmp.video.svelte

@@ -2,6 +2,7 @@
 import { Icon } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
 import { SeekBar } from '../seek-bar';
+import { VideoLocalization } from './video-localization';
 import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
 import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
 import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
@@ -9,6 +10,7 @@ import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.s
 import { untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 let { src, poster, id = randomNanoid(), autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+const localization = new VideoLocalization();
 let video = $state(null);
 let videoContainerRef = $state(null);
 let showControlsOnHover = $state(false);
@@ -270,17 +272,22 @@ const handleSeek = (percent) => {
     onmouseleave={() => (showControlsOnHover = false)}
     role="none">
     {#if isVideoPaused && !hidePlayButton}
-      <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
+      <button type="button" aria-label={localization.play} class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
         <Icon src={IconPlay} color="on-accent" />
       </button>
     {:else if showControlsOnHover && !hidePlayButton}
-      <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
+      <button
+        type="button"
+        aria-label={localization.pause}
+        class="video__playback-button video__playback-button--pause"
+        onclick={togglePlay}
+        onkeydown={() => ({})}>
         <Icon src={IconPause} color="on-accent" />
       </button>
     {/if}
 
-    {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
-      <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
+    {#if everActivated && (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
+      <button type="button" aria-label={MediaVolumeManager.isMuted ? localization.unmute : localization.mute} class="video__mute-button" onclick={toggleMute}>
         {#if MediaVolumeManager.isMuted}
           <Icon src={IconSpeakerMute} color="on-accent" />
         {:else}
@@ -322,6 +329,7 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
 | `--sc-kit--video--background-color` | Player background | `black` |
 | `--sc-kit--video--border-radius` | Corner rounding | `0` |
 | `--sc-kit--video--media-fit` | Video object-fit mode | `contain` |
+| `--sc-kit--video--playback-button--size` | Size of the custom Play button | `2.5rem` |
 | `--sc-kit--video--poster--media-fit` | Poster image object-fit mode | `cover` |
 -->
 
@@ -329,6 +337,7 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   --_video--background-color: var(--sc-kit--video--background-color, #000);
   --_video--border-radius: var(--sc-kit--video--border-radius, 0);
   --_video--media-fit: var(--sc-kit--video--media-fit, contain);
+  --_video--playback-button--size: var(--sc-kit--video--playback-button--size, 2.5rem);
   --_video--poster--media-fit: var(--sc-kit--video--poster--media-fit, cover);
   height: 100%;
   min-height: 100%;
@@ -343,7 +352,7 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   background: var(--_video--background-color);
 }
 .video__playback-button {
-  --sc-kit--icon--size: 2.5rem;
+  --sc-kit--icon--size: var(--_video--playback-button--size);
   --sc-kit--icon--filter: drop-shadow(1px 1px #000);
   position: absolute;
   top: 50%;

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

@@ -47,6 +47,7 @@ type Props = {
  * | `--sc-kit--video--background-color` | Player background | `black` |
  * | `--sc-kit--video--border-radius` | Corner rounding | `0` |
  * | `--sc-kit--video--media-fit` | Video object-fit mode | `contain` |
+ * | `--sc-kit--video--playback-button--size` | Size of the custom Play button | `2.5rem` |
  * | `--sc-kit--video--poster--media-fit` | Poster image object-fit mode | `cover` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/video/video-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class VideoLocalization {
+    get play(): string;
+    get pause(): string;
+    get mute(): string;
+    get unmute(): string;
+}

package/dist/ui/video/video-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    play: {
+        en: 'Play',
+        no: 'Spill av'
+    },
+    pause: {
+        en: 'Pause',
+        no: 'Pause'
+    },
+    mute: {
+        en: 'Mute',
+        no: 'Demp lyd'
+    },
+    unmute: {
+        en: 'Unmute',
+        no: 'Slå på lyd'
+    }
+};
+export class VideoLocalization {
+    get play() {
+        return loc.play[AppLocale.current];
+    }
+    get pause() {
+        return loc.pause[AppLocale.current];
+    }
+    get mute() {
+        return loc.mute[AppLocale.current];
+    }
+    get unmute() {
+        return loc.unmute[AppLocale.current];
+    }
+}

package/package.json

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