@streamscloud/kit 0.75.0 → 0.76.0

package/dist/core/i18n/resolve-plural-form.js

@@ -1,3 +1,4 @@
+import { DEV } from 'esm-env';
 /**
  * Picks the plural form matching `count` for `locale`.
  *
@@ -17,7 +18,7 @@
  */
 export const resolvePluralForm = ({ count, candidates, locale }) => {
     const { index, categoriesLength } = indexerFor(locale);
-    if (import.meta.env?.DEV && candidates.length !== categoriesLength) {
+    if (DEV && candidates.length !== categoriesLength) {
         throw new Error(`resolvePluralForm(): locale "${locale}" needs ${categoriesLength} candidate(s), got ${JSON.stringify(candidates)}.`);
     }
     const template = candidates[index(count)] ?? candidates[candidates.length - 1];

package/dist/core/utils/dom-helper.d.ts

@@ -2,7 +2,8 @@ export declare class DomHelper {
     private static readonly _interactiveSelector;
     /**
      * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
-     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`). Anything inside an
+     * `inert` subtree is skipped — it takes neither focus nor clicks.
      */
     static findInteractiveDescendant(root: Element): HTMLElement | null;
     /**

package/dist/core/utils/dom-helper.js

@@ -2,10 +2,12 @@ export class DomHelper {
     static _interactiveSelector = 'button, a[href], input:not([type="hidden"]), select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])';
     /**
      * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
-     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`). Anything inside an
+     * `inert` subtree is skipped — it takes neither focus nor clicks.
      */
     static findInteractiveDescendant(root) {
-        return root.querySelector(DomHelper._interactiveSelector);
+        const candidates = root.querySelectorAll(DomHelper._interactiveSelector);
+        return Array.from(candidates).find((candidate) => !candidate.closest('[inert]')) ?? null;
     }
     /**
      * True when the target is, or sits inside, interactive content — i.e. something that owns its own

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -35,12 +35,9 @@ const previewBackgroundColor = $derived.by(() => {
 });
 const alphaPercent = $derived(displayColor ? `${Math.round(colord(displayColor).alpha() * 100)}%` : '');
 const triggerPlaceholder = $derived(placeholder ?? loc.notSet);
-const resetValue = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (clearable) {
-        on?.change?.('');
-    }
+const clearButtonVisible = $derived(clearable && !disabled && !children && variant === 'fill' && !!value);
+const resetValue = () => {
+    on?.change?.('');
 };
 const onColorPickerInput = ({ hex }) => {
     on?.change?.(ColorHelper.normalizeHex(hex));
@@ -88,10 +85,8 @@ const onColorPickerInput = ({ hex }) => {
                 <span class="color-picker__chevron" aria-hidden="true">
                   <Icon src={IconChevronDown} color={displayColor ? undefined : 'muted'} />
                 </span>
-              {:else if clearable}
-                <button type="button" class="color-picker__clear" aria-label={loc.clear} onclick={resetValue}>
-                  <Icon src={IconDismiss} />
-                </button>
+              {:else if clearButtonVisible}
+                <span class="color-picker__clear-glyph"><Icon src={IconDismiss} /></span>
               {:else}
                 <span class="color-picker__chevron" aria-hidden="true">
                   <Icon src={IconChevronDown} />
@@ -111,6 +106,9 @@ const onColorPickerInput = ({ hex }) => {
         textInputModes={['hex']} />
     </div>
   </Popover>
+  {#if clearButtonVisible}
+    <button type="button" class="color-picker__clear" class:color-picker__clear--sm={size === 'sm'} aria-label={loc.clear} onclick={resetValue}></button>
+  {/if}
 </div>
 
 <!--
@@ -123,19 +121,6 @@ same height.
 When `value` is set, the trigger's background fills with the color and the swatch text auto-flips
 between black and white for contrast.
 
-### Props
-| Prop | Type | Default |
-|---|---|---|
-| `value` | `string \| null \| undefined` | required |
-| `variant` | `'fill' \| 'field'` | `'fill'` |
-| `label` | `string` (field variant row label) | — |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
-| `clearable` | `boolean` | `false` |
-| `disabled` | `boolean` | `false` |
-| `defaultColor` | `string \| undefined` | `undefined` |
-| `placeholder` | `string \| undefined` | localized "not set" |
-| `previewIcon` | `string \| Snippet` | color-droplet glyph |
-
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -206,19 +191,29 @@ between black and white for contrast.
   color: var(--sc-kit--color--text--secondary);
   font-size: var(--sc-kit--font-size--sm);
 }
-.color-picker__chevron, .color-picker__clear {
+.color-picker__chevron, .color-picker__clear-glyph {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  line-height: 0;
+}
+.color-picker__clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  aspect-ratio: 1;
+  padding: 0;
   background: transparent;
   border: 0;
-  padding: 0;
-  line-height: 0;
-  color: inherit;
+  border-radius: var(--sc-kit--field--border-radius--md);
   cursor: pointer;
 }
-.color-picker__chevron {
-  cursor: inherit;
+.color-picker__clear:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.color-picker__clear--sm {
+  border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .color-picker__panel {
   --focus-color: none;

package/dist/ui/color-picker/cmp.color-picker.svelte.d.ts

@@ -13,7 +13,7 @@ type Props = {
     clearable?: boolean;
     /** Visual disabled state — popover won't open. */
     disabled?: boolean;
-    /** Placeholder shown on the swatch trigger when no value is selected. */
+    /** Placeholder shown on the swatch trigger when no value is selected. @default localized "Not set" */
     placeholder?: string;
     on?: {
         change?: (value: string) => void;
@@ -35,19 +35,6 @@ type Props = {
  * When `value` is set, the trigger's background fills with the color and the swatch text auto-flips
  * between black and white for contrast.
  *
- * ### Props
- * | Prop | Type | Default |
- * |---|---|---|
- * | `value` | `string \| null \| undefined` | required |
- * | `variant` | `'fill' \| 'field'` | `'fill'` |
- * | `label` | `string` (field variant row label) | — |
- * | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
- * | `clearable` | `boolean` | `false` |
- * | `disabled` | `boolean` | `false` |
- * | `defaultColor` | `string \| undefined` | `undefined` |
- * | `placeholder` | `string \| undefined` | localized "not set" |
- * | `previewIcon` | `string \| Snippet` | color-droplet glyph |
- *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -54,8 +54,8 @@ $effect(() => untrack(() => {
     {/snippet}
     {#snippet footer()}
       <div class="image-editor-dialog__footer">
-        <DialogCancelButton on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
-        <DialogButton on={{ click: save }}>{loc.save}</DialogButton>
+        <DialogCancelButton size="sm" on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
+        <DialogButton size="sm" on={{ click: save }}>{loc.save}</DialogButton>
       </div>
     {/snippet}
   </Dialog>
@@ -63,6 +63,14 @@ $effect(() => untrack(() => {
 
 <style>.image-editor-dialog {
   --sc-kit--dialog--height: calc(100vh - 2.5rem);
+  --sc-kit--dialog--footer--padding-block: var(--sc-kit--space--2);
+  --sc-kit--dialog--footer--padding-inline: var(--sc-kit--space--4);
+  --sc-kit--dialog--header--padding-block: var(--sc-kit--space--1);
+  --sc-kit--dialog--header--padding-inline: var(--sc-kit--space--3);
+  --sc-kit--dialog--title--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--dialog--title--line-height: var(--sc-kit--line-height--sm);
+  --sc-kit--dialog-close-button--size: 1.5rem;
+  --sc-kit--dialog-close-button--icon--size: 1rem;
   display: contents;
 }
 .image-editor-dialog__workspace {
@@ -70,7 +78,9 @@ $effect(() => untrack(() => {
   min-block-size: 0;
 }
 .image-editor-dialog__footer {
+  --sc-kit--dialog-cancel-button--min-width: 4.5rem;
+  --sc-kit--dialog-button--min-width: 7rem;
   display: flex;
   justify-content: flex-end;
-  gap: 1.5rem;
+  gap: var(--sc-kit--space--4);
 }</style>

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

@@ -1,9 +1,9 @@
 <script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
-let { type = 'button', disabled = false, loading = false, variant = 'primary', icon, on, children } = $props();
+let { type = 'button', disabled = false, loading = false, variant = 'primary', size = 'md', icon, on, children } = $props();
 </script>
 
 <div class="dialog-button">
-  <Button type={type} disabled={disabled} loading={loading} variant={variant} icon={icon} on={on}>
+  <Button type={type} disabled={disabled} loading={loading} variant={variant} size={size} icon={icon} on={on}>
     {@render children()}
   </Button>
 </div>

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

@@ -1,4 +1,4 @@
-import type { ButtonVariant } from '../button/types';
+import type { ButtonSize, ButtonVariant } from '../button/types';
 import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
@@ -9,6 +9,8 @@ type Props = {
     loading?: boolean;
     /** Button color variant @default 'primary' */
     variant?: ButtonVariant;
+    /** @default 'md' */
+    size?: ButtonSize;
     /** Leading icon — passed through to Button. */
     icon?: IconProp;
     on?: {

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
-let { disabled = false, on, children } = $props();
+let { disabled = false, size = 'md', on, children } = $props();
 </script>
 
 <div class="dialog-cancel-button">
-  <Button type="button" disabled={disabled} variant="secondary" on={on}>
+  <Button type="button" disabled={disabled} variant="secondary" size={size} on={on}>
     {@render children()}
   </Button>
 </div>

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { ButtonSize } from '../button/types';
 import type { Snippet } from 'svelte';
 type Props = {
     disabled?: boolean;
+    /** @default 'md' */
+    size?: ButtonSize;
     on?: {
         click?: (e: MouseEvent) => void;
     };

package/dist/ui/dialog/cmp.dialog.svelte

@@ -58,6 +58,8 @@ A structured dialog panel with header (title + close button), scrollable body, a
 | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
 | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
 | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+| `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | inherits `--padding-block` |
+| `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | inherits `--padding-inline` |
 | `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
 | `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
 -->
@@ -78,6 +80,8 @@ A structured dialog panel with header (title + close button), scrollable body, a
   --_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
   --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
   --_dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
+  --_dialog--footer--padding-block: var(--sc-kit--dialog--footer--padding-block, var(--_dialog--padding-block));
+  --_dialog--footer--padding-inline: var(--sc-kit--dialog--footer--padding-inline, var(--_dialog--padding-inline));
   --_dialog--title-font-size: var(--sc-kit--dialog--title--font-size, 1.125rem);
   --_dialog--title-line-height: var(--sc-kit--dialog--title--line-height, 1.4);
   display: flex;
@@ -155,7 +159,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   align-items: center;
   justify-content: flex-end;
   gap: var(--sc-kit--space--3);
-  padding: var(--_dialog--padding-block) var(--_dialog--padding-inline);
+  padding: var(--_dialog--footer--padding-block) var(--_dialog--footer--padding-inline);
   border-top: 1px solid var(--_dialog--border-color);
   -webkit-user-drag: none;
   user-select: none;

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

@@ -59,6 +59,8 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
  * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
  * | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+ * | `--sc-kit--dialog--footer--padding-block` | Footer-specific vertical padding | inherits `--padding-block` |
+ * | `--sc-kit--dialog--footer--padding-inline` | Footer-specific horizontal padding | inherits `--padding-inline` |
  * | `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
  * | `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
  */

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

@@ -1,4 +1,5 @@
 import { DomHelper } from '../../core/utils';
+import { DEV } from 'esm-env';
 /**
  * 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).
@@ -6,7 +7,7 @@ import { DomHelper } from '../../core/utils';
  * node and outlines the trigger in red. No-op in production.
  */
 export const validateTrigger = (node) => {
-    if (!import.meta.env?.DEV) {
+    if (!DEV) {
         return;
     }
     const check = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -495,6 +495,7 @@
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "dompurify": "^3.4.5",
+    "esm-env": "^1.2.2",
     "fuse.js": "^7.3.0",
     "hugerte": "^1.0.10",
     "mime": "^4.1.0",
@@ -534,6 +535,7 @@
     "eslint-plugin-promise": "^7.3.0",
     "eslint-plugin-svelte": "^3.23.0",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "esm-env": "^1.2.2",
     "fuse.js": "^7.3.0",
     "globals": "^17.12.0",
     "hugerte": "^1.0.10",