@streamscloud/kit 0.9.1 → 0.9.3

package/README.md

@@ -0,0 +1,28 @@
+# @streamscloud/kit
+
+Shared UI components + utilities for StreamsCloud frontend apps. Svelte 5 (runes), TypeScript strict, SCSS/BEM.
+
+## Develop
+
+```sh
+npm install
+npm run dev          # dev playground, http://localhost:3011
+```
+
+After cloning, run `./setup-claude.sh` (Windows: `.\setup-claude.ps1`) to wire shared Claude hooks and skills from the sibling `development-memory` checkout —
+without it agent sessions run with no hooks and no shared skills. Re-run after changing `.claude/sc-skills`.
+
+## Checks
+
+```sh
+npm run check        # svelte-check + tsc for node files
+npm run lint         # prettier --check + eslint
+```
+
+## Release
+
+Always via the npm scripts — `npm run publish:prod` / `npm run publish:dev`, never raw `npm publish`. The full workflow is in `.claude/CLAUDE.md`.
+
+## Context
+
+Project facts, decisions (ADRs), and reference live in [`project-dev-memory/`](project-dev-memory/README.md). Agent rules live in `.claude/`.

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

@@ -2,6 +2,11 @@ export declare class ArrayHelper {
     static distinct<T>(items: T[]): T[];
     static distinctBy<T>(items: T[], keyFn: (elem: T) => unknown): T[];
     static intersect<T>(arrays: T[][]): T[];
+    /**
+     * Splits `items` into sequential chunks of at most `size` elements.
+     * If `size < 1`, returns a single chunk containing all items.
+     */
+    static chunk<T>(items: T[], size: number): T[][];
     static assertHasValue<T>(value: T | null | undefined): value is T;
     /**
      * Find position ("from" and "to" indexes) of the element that was moved inside array (only one element should be moved)

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

@@ -11,6 +11,20 @@ export class ArrayHelper {
         }
         return arrays.reduce((result, current) => result.filter((item) => current.includes(item)));
     }
+    /**
+     * Splits `items` into sequential chunks of at most `size` elements.
+     * If `size < 1`, returns a single chunk containing all items.
+     */
+    static chunk(items, size) {
+        if (size < 1) {
+            return [[...items]];
+        }
+        const result = [];
+        for (let i = 0; i < items.length; i += size) {
+            result.push(items.slice(i, i + size));
+        }
+        return result;
+    }
     static assertHasValue(value) {
         return value !== null && value !== undefined;
     }

package/dist/ui/announcement-banner/announcement-banner-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class AnnouncementBannerLocalization {
+    get dismiss(): string;
+}

package/dist/ui/announcement-banner/announcement-banner-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    dismiss: {
+        en: 'Dismiss',
+        no: 'Lukk'
+    }
+};
+export class AnnouncementBannerLocalization {
+    get dismiss() {
+        return loc.dismiss[AppLocale.current];
+    }
+}

package/dist/ui/announcement-banner/cmp.announcement-banner.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">import { Icon, IconSlot } from '../icon';
+import { AnnouncementBannerLocalization } from './announcement-banner-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+let { variant = 'info', title, dismissible = false, icon, action, children, on } = $props();
+const localization = new AnnouncementBannerLocalization();
+let visible = $state(true);
+const role = $derived(variant === 'maintenance' ? 'alert' : 'status');
+const dismiss = () => {
+    visible = false;
+    on?.dismiss?.();
+};
+</script>
+
+{#if visible}
+  <div class="announcement-banner announcement-banner--{variant}" class:announcement-banner--dismissible={dismissible} role={role}>
+    <div class="announcement-banner__content">
+      {#if icon}
+        <span class="announcement-banner__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+      {/if}
+      <div class="announcement-banner__body">
+        {#if title}<strong class="announcement-banner__title">{title}</strong>{/if}
+        {#if children}<span class="announcement-banner__description">{@render children()}</span>{/if}
+      </div>
+      {#if action}<div class="announcement-banner__action">{@render action()}</div>{/if}
+    </div>
+    {#if dismissible}
+      <button class="announcement-banner__close" type="button" aria-label={localization.dismiss} onclick={dismiss}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+Full-width ribbon notification for site-wide announcements placed at the top of a page or layout.
+Supports four visual variants; `variant='maintenance'` uses `role="alert"` (assertive); all others use `role="status"` (polite).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--announcement-banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+| `--sc-kit--announcement-banner--padding-inline` | Horizontal padding | `--sc-kit--space--5` |
+| `--sc-kit--announcement-banner--gap` | Gap between icon / body / action | `--sc-kit--space--3` |
+| `--sc-kit--announcement-banner--background` | Background color | per `variant` |
+| `--sc-kit--announcement-banner--border-color` | Bottom border color | per `variant` |
+| `--sc-kit--announcement-banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+| `--sc-kit--announcement-banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--announcement-banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+-->
+
+<style>.announcement-banner {
+  --_ab--padding-block: var(--sc-kit--announcement-banner--padding-block, var(--sc-kit--space--3));
+  --_ab--padding-inline: var(--sc-kit--announcement-banner--padding-inline, var(--sc-kit--space--5));
+  --_ab--gap: var(--sc-kit--announcement-banner--gap, var(--sc-kit--space--3));
+  --_ab--title-color: var(--sc-kit--announcement-banner--title--color, var(--sc-kit--color--text--primary));
+  --_ab--description-color: var(--sc-kit--announcement-banner--description--color, var(--sc-kit--color--text--secondary));
+  --_ab--background-default: var(--sc-kit--color--accent--softer);
+  --_ab--border-default: var(--sc-kit--color--accent--soft);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+  --_ab--background: var(--sc-kit--announcement-banner--background, var(--_ab--background-default));
+  --_ab--border-color: var(--sc-kit--announcement-banner--border-color, var(--_ab--border-default));
+  --_ab--accent-color: var(--sc-kit--announcement-banner--accent-color, var(--_ab--accent-default));
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--_ab--padding-block) var(--_ab--padding-inline);
+  background: var(--_ab--background);
+  border-bottom: 1px solid var(--_ab--border-color);
+  color: var(--_ab--accent-color);
+  position: relative;
+}
+.announcement-banner--dismissible {
+  padding-inline-end: calc(var(--_ab--padding-inline) + 2rem);
+}
+.announcement-banner--info {
+  --_ab--background-default: var(--sc-kit--color--accent--softer);
+  --_ab--border-default: var(--sc-kit--color--accent--soft);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+}
+.announcement-banner--announcement {
+  --_ab--background-default: var(--sc-kit--color--accent--soft);
+  --_ab--border-default: var(--sc-kit--color--accent);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+}
+.announcement-banner--warning {
+  --_ab--background-default: var(--sc-kit--color--warning--soft);
+  --_ab--border-default: var(--sc-kit--color--warning);
+  --_ab--accent-default: var(--sc-kit--color--warning);
+}
+.announcement-banner--maintenance {
+  --_ab--background-default: var(--sc-kit--color--danger--soft);
+  --_ab--border-default: var(--sc-kit--color--danger);
+  --_ab--accent-default: var(--sc-kit--color--danger);
+}
+.announcement-banner__content {
+  display: flex;
+  align-items: center;
+  gap: var(--_ab--gap);
+}
+.announcement-banner__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.announcement-banner__body {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--sc-kit--space--2);
+}
+.announcement-banner__title {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_ab--title-color);
+}
+.announcement-banner__description {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--leading--normal);
+  color: var(--_ab--description-color);
+}
+.announcement-banner__action {
+  flex-shrink: 0;
+}
+.announcement-banner__close {
+  position: absolute;
+  inset-inline-end: var(--_ab--padding-inline);
+  top: 50%;
+  transform: translateY(-50%);
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: var(--sc-kit--radius--sm);
+  background: transparent;
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  cursor: pointer;
+  --sc-kit--icon--size: 0.75rem;
+}
+.announcement-banner__close:hover {
+  opacity: 1;
+}
+.announcement-banner__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

package/dist/ui/announcement-banner/cmp.announcement-banner.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type IconProp } from '../icon';
+import type { AnnouncementBannerVariant } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** @default 'info' */
+    variant?: AnnouncementBannerVariant;
+    /** Short headline rendered in bold. */
+    title?: string;
+    /** Show a dismiss button. Hides the banner locally when clicked and fires `on.dismiss`. @default false */
+    dismissible?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Optional inline call-to-action area (e.g. "Learn more →", "See status page"). */
+    action?: Snippet;
+    /** Announcement body text. */
+    children?: Snippet;
+    on?: {
+        dismiss?: () => void;
+    };
+};
+/**
+ * Full-width ribbon notification for site-wide announcements placed at the top of a page or layout.
+ * Supports four visual variants; `variant='maintenance'` uses `role="alert"` (assertive); all others use `role="status"` (polite).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--announcement-banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+ * | `--sc-kit--announcement-banner--padding-inline` | Horizontal padding | `--sc-kit--space--5` |
+ * | `--sc-kit--announcement-banner--gap` | Gap between icon / body / action | `--sc-kit--space--3` |
+ * | `--sc-kit--announcement-banner--background` | Background color | per `variant` |
+ * | `--sc-kit--announcement-banner--border-color` | Bottom border color | per `variant` |
+ * | `--sc-kit--announcement-banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+ * | `--sc-kit--announcement-banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--announcement-banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/announcement-banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnnouncementBanner } from './cmp.announcement-banner.svelte';
+export type { AnnouncementBannerVariant } from './types';

package/dist/ui/announcement-banner/index.js

@@ -0,0 +1 @@
+export { default as AnnouncementBanner } from './cmp.announcement-banner.svelte';

package/dist/ui/announcement-banner/types.d.ts

@@ -0,0 +1 @@
+export type AnnouncementBannerVariant = 'info' | 'announcement' | 'warning' | 'maintenance';

package/dist/ui/announcement-banner/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/avatar/cmp.avatar.svelte

@@ -62,7 +62,7 @@ the load / error / stub state machine.
   --sc-kit--image--border-radius: 50%;
   --sc-kit--image--background: var(--_avatar--background);
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   width: var(--_avatar--size);

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

@@ -105,7 +105,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
 | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
-| `--sc-kit--button--width` | Explicit width | `auto` |
+| `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--max-width` | Maximum width | `100%` |
 -->
@@ -122,13 +122,13 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--sc-kit--space--4));
   --_btn--font-size: var(--sc-kit--button--font-size, var(--sc-kit--font-size--md));
   --_btn--gap: var(--sc-kit--button--gap, var(--sc-kit--space--2));
-  --_btn--width: var(--sc-kit--button--width, auto);
+  --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
   --_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
   --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--medium));
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--_btn--gap);

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

@@ -63,7 +63,7 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
- * | `--sc-kit--button--width` | Explicit width | `auto` |
+ * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--max-width` | Maximum width | `100%` |
  */

package/dist/ui/checkbox/cmp.checkbox.svelte

@@ -17,11 +17,9 @@ const handleClick = (event) => {
 
 <label class="check" class:check--on={isOn} class:check--indeterminate={isIndeterminate} class:check--disabled={disabled} title={title}>
   <button type="button" class="check__box" role="checkbox" aria-checked={ariaChecked} disabled={disabled} onclick={handleClick}>
-    {#if isOn}
-      <span class="check__mark" aria-hidden="true"><Icon src={IconCheckmark} /></span>
-    {:else if isIndeterminate}
-      <span class="check__mark" aria-hidden="true"><Icon src={IconSubtract} /></span>
-    {/if}
+    <span class="check__mark" class:check__mark--visible={isOn || isIndeterminate} aria-hidden="true">
+      <Icon src={isIndeterminate ? IconSubtract : IconCheckmark} />
+    </span>
   </button>
   {#if typeof label === 'string'}
     <span class="check__label">{label}</span>
@@ -66,9 +64,10 @@ so it can be safely nested inside clickable rows.
   --_check--label-font-size: var(--sc-kit--checkbox--label--font-size, var(--sc-kit--font-size--md));
   --_check--label-line-height: var(--sc-kit--checkbox--label--line-height, var(--sc-kit--line-height--md));
   --_check--label-color: var(--sc-kit--checkbox--label--color, var(--sc-kit--color--text--primary));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_check--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
   user-select: none;
@@ -110,6 +109,11 @@ so it can be safely nested inside clickable rows.
 .check__mark {
   --sc-kit--icon--size: 0.75rem;
   display: inline-flex;
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.check__mark--visible {
+  opacity: 1;
 }
 .check__label {
   min-width: 0;

package/dist/ui/chip-group/cmp.chip-group.svelte

@@ -85,9 +85,10 @@ checkmark on selected chips.
   --_cg--color-selected: var(--sc-kit--chip-group--color--selected, var(--sc-kit--color--accent));
   --_cg--background-selected-hover: var(--sc-kit--chip-group--background--selected-hover, var(--sc-kit--color--accent--softer));
   --_cg--focus-ring-color: var(--sc-kit--chip-group--focus-ring-color, var(--sc-kit--color--border--focus));
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: var(--_cg--gap);
+  width: fit-content;
   max-width: 100%;
 }
 .chip-group--sm {

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

@@ -222,7 +222,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
 }
 .date-picker {
   position: relative;
-  display: inline-block;
+  display: flex;
   width: var(--_dp--width);
   max-width: 100%;
 }

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

@@ -195,7 +195,7 @@ or the clear button (see `HandleInput`'s availability pill).
 }
 .input {
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   width: var(--_in--width);
   max-width: 100%;

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

@@ -232,7 +232,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 }
 .numeral-input {
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   width: var(--_ni--width);
   max-width: 100%;

package/dist/ui/option-pill/cmp.option-pill.svelte

@@ -77,9 +77,10 @@ or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
   --_op--thumb-size: var(--sc-kit--option-pill--thumb--size, 1.75rem);
   --_op--thumb-background: var(--sc-kit--option-pill--thumb--background, var(--sc-kit--color--bg--active));
   --_op--thumb-color: var(--sc-kit--option-pill--thumb--color, var(--sc-kit--color--text--muted));
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: var(--_op--gap);
+  width: fit-content;
 }
 .option-pill--disabled {
   opacity: 0.6;

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

@@ -116,8 +116,9 @@ as `<input type="password">`). Fires `on.complete` when all cells are filled.
   --_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;
+  display: flex;
   gap: var(--_pi--gap);
+  width: fit-content;
 }
 .pin-input--disabled {
   opacity: 0.6;

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, on, children } = $props();
+const { disabled = false, keepOpen = false, divider = false, inset = false, on, children } = $props();
 const handleClick = () => {
     if (disabled) {
         return;
@@ -12,6 +12,7 @@ const handleClick = () => {
   class="popover-item"
   class:popover-item--disabled={disabled}
   class:popover-item--divider={divider}
+  class:popover-item--inset={inset}
   use:popoverIgnore={keepOpen}
   role="menuitem"
   tabindex={disabled ? -1 : 0}
@@ -42,6 +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)` |
 -->
 
 <style>.popover-item {
@@ -56,6 +59,8 @@ for toggle items inside menus).
   --_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);
+  --_di--margin-inline: var(--sc-kit--popover-item--margin-inline, var(--sc-kit--space--2));
+  --_di--border-radius: var(--sc-kit--popover-item--border-radius, var(--sc-kit--radius--sm));
   display: flex;
   align-items: center;
   gap: var(--_di--gap);
@@ -81,6 +86,10 @@ for toggle items inside menus).
   margin-bottom: var(--_di--divider-spacing);
   padding-bottom: calc(var(--_di--padding-block) + 1px);
 }
+.popover-item--inset {
+  margin-inline: var(--_di--margin-inline);
+  border-radius: var(--_di--border-radius);
+}
 .popover-item__content {
   flex: 1;
   min-width: 0;

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

@@ -5,6 +5,8 @@ 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?: boolean;
     on?: {
         click?: () => void;
     };
@@ -29,6 +31,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)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -19,7 +19,7 @@ const handleClick = (event) => {
   disabled={disabled}
   onclick={handleClick}>
   <span class="radio-card__dot" aria-hidden="true">
-    {#if selected}<span class="radio-card__inner"></span>{/if}
+    <span class="radio-card__inner" class:radio-card__inner--visible={selected}></span>
   </span>
   <span class="radio-card__body">
     <span class="radio-card__title">{title}</span>
@@ -78,7 +78,7 @@ label line (plan picker, account type, theme picker).
   --_card--dot-background: var(--sc-kit--radio-card--dot--background, var(--sc-kit--color--bg--field));
   --_card--dot-inner-color: var(--sc-kit--radio-card--dot--inner-color, var(--sc-kit--color--accent));
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: flex-start;
   gap: var(--_card--gap);
   width: 100%;
@@ -127,6 +127,11 @@ label line (plan picker, account type, theme picker).
   height: var(--_card--dot-inner-size);
   background: var(--_card--dot-inner-color);
   border-radius: var(--sc-kit--radius--circle);
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio-card__inner--visible {
+  opacity: 1;
 }
 .radio-card__body {
   display: inline-flex;

package/dist/ui/radio/cmp.radio.svelte

@@ -12,7 +12,7 @@ export {};
 
 <label class="radio" class:radio--on={selected} class:radio--disabled={disabled} title={title}>
   <button type="button" class="radio__dot" role="radio" aria-checked={selected} aria-label={ariaLabel} disabled={disabled} onclick={handleClick}>
-    {#if selected}<span class="radio__inner" aria-hidden="true"></span>{/if}
+    <span class="radio__inner" class:radio__inner--visible={selected} aria-hidden="true"></span>
   </button>
   {#if typeof label === 'string'}
     <span class="radio__label">{label}</span>
@@ -55,9 +55,10 @@ its state to this option's value. Pair with `RadioCard` for option-card layouts.
   --_radio--label-font-size: var(--sc-kit--radio--label--font-size, var(--sc-kit--font-size--md));
   --_radio--label-line-height: var(--sc-kit--radio--label--line-height, var(--sc-kit--line-height--md));
   --_radio--label-color: var(--sc-kit--radio--label--color, var(--sc-kit--color--text--primary));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_radio--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
   user-select: none;
@@ -95,6 +96,11 @@ its state to this option's value. Pair with `RadioCard` for option-card layouts.
   height: var(--_radio--inner-size);
   background: var(--_radio--inner-color);
   border-radius: var(--sc-kit--radius--circle);
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio__inner--visible {
+  opacity: 1;
 }
 .radio__label {
   min-width: 0;

package/dist/ui/toggle/cmp.toggle.svelte

@@ -80,14 +80,14 @@ switch left + label right, intrinsic width).
   --_row--label-color: var(--sc-kit--toggle-row--label--color, var(--sc-kit--color--text--primary));
   --_row--sub-font-size: var(--sc-kit--toggle-row--sub--font-size, var(--sc-kit--font-size--sm));
   --_row--sub-color: var(--sc-kit--toggle-row--sub--color, var(--sc-kit--color--text--muted));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_row--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
 }
 .toggle-row--spread {
-  display: flex;
   justify-content: space-between;
   width: 100%;
 }

package/package.json

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