@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -1,58 +1,298 @@
-<script lang="ts">import { default as ButtonBase } from './resources/button-base.svelte';
-import { default as ButtonTheme } from './resources/button-theme.svelte';
-let { type = 'button', disabled = false, autofocus = false, variant = null, size = null, on, children } = $props();
+<script lang="ts">import { Spinner } from '../_internal/spinner';
+import { IconSlot } from '../icon';
+const { variant = 'primary', size = 'md', disabled = false, loading = false, fullWidth = false, 'aria-label': ariaLabel, icon, iconPosition = 'leading', children, ...mode } = $props();
+const inactive = $derived(disabled || loading);
+const isIconOnly = $derived(!children && (!!icon || loading));
+const disabledVariantClass = $derived(inactive ? `btn--${variant}-disabled` : '');
+const anchorRel = $derived.by(() => {
+    if (mode.type !== 'anchor') {
+        return undefined;
+    }
+    if (mode.rel) {
+        return mode.rel;
+    }
+    if (mode.target === '_blank') {
+        return 'noopener noreferrer';
+    }
+    return undefined;
+});
+const handleClick = (e) => {
+    if (inactive) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+    }
+    if (mode.type !== 'anchor') {
+        mode.on?.click?.(e);
+    }
+};
 </script>
 
-<ButtonTheme variant={variant} size={size}>
-  <ButtonBase disabled={disabled} type={type} autofocus={autofocus} on={on}>
-    {@render children()}
-  </ButtonBase>
-</ButtonTheme>
+{#snippet content()}
+  {#if loading}
+    <span class="btn__spinner"><Spinner /></span>
+  {:else if icon && iconPosition === 'leading'}
+    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+  {#if children}
+    <span class="btn__label">{@render children()}</span>
+  {/if}
+  {#if icon && iconPosition === 'trailing' && children}
+    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
+{/snippet}
+
+{#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}
+    href={inactive ? undefined : mode.href}
+    target={mode.target}
+    rel={anchorRel}
+    download={mode.download}
+    role="button"
+    aria-label={ariaLabel}
+    aria-disabled={inactive ? 'true' : undefined}
+    aria-busy={loading ? 'true' : undefined}
+    tabindex={inactive ? -1 : undefined}
+    onclick={handleClick}>
+    {@render content()}
+  </a>
+{: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}
+    type={mode.type}
+    disabled={disabled}
+    aria-label={ariaLabel}
+    aria-disabled={loading ? 'true' : undefined}
+    aria-busy={loading ? 'true' : undefined}
+    form={mode.form}
+    name={mode.name}
+    value={mode.value}
+    onclick={handleClick}>
+    {@render content()}
+  </button>
+{/if}
 
 <!--
 @component
-A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (colors/sizes).
+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'`).
 
-### Base CSS Custom Properties
+### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--button--font--size` | Root font size | `1rem` |
-| `--sc-kit--button--font--color` | Text color | `black` |
-| `--sc-kit--button--font--color--active` | Text color when pressed | inherits `--font--color` |
-| `--sc-kit--button--font--color--disabled` | Text color when disabled | inherits `--font--color` |
-| `--sc-kit--button--font-weight` | Font weight | `400` |
-| `--sc-kit--button--text--font-size` | Label text size | `0.75em` |
-| `--sc-kit--button--icon--font-size` | Icon size inside the button | `1em` |
-| `--sc-kit--button--justify-content` | Horizontal alignment | `center` |
-| `--sc-kit--button--background` | Background color | `white` |
-| `--sc-kit--button--background--hover` | Background on hover | inherits `--background` |
-| `--sc-kit--button--background--active` | Background when pressed | inherits `--background` |
-| `--sc-kit--button--background--disabled` | Background when disabled | inherits `--background` |
-| `--sc-kit--button--border` | Border shorthand | `none` |
-| `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
-| `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
-| `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
-| `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
-| `--sc-kit--button--min-width` | Minimum width | `0` |
+| `--sc-kit--button--color` | Foreground color | per variant |
+| `--sc-kit--button--background` | Background color | per variant |
+| `--sc-kit--button--background--hover` | Background on hover | per variant |
+| `--sc-kit--button--background--active` | Background when pressed | per variant |
+| `--sc-kit--button--border` | Border shorthand | per variant |
+| `--sc-kit--button--box-shadow` | Box shadow | per variant |
+| `--sc-kit--button--focus-ring-color` | Focus ring color | per variant |
+| `--sc-kit--button--height` | Button height | per size |
+| `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
+| `--sc-kit--button--font-size` | Label font size | per size |
+| `--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--height` | Button height | `2em` |
-| `--sc-kit--button--box-shadow` | Box shadow | `none` |
-
-### Variant CSS Custom Properties
-Each variant overrides the base properties above using the pattern:
-`--sc-kit--button--{variant}--{property}`
-
-**Available variants:** `primary`, `standard`, `alert`, `warning`, `white`, `gray`, `green`, `black`, `text-only`, `transparent-success`, `transparent-primary`, `transparent-gray`, `transparent-white`, `transparent-warning`, `transparent-destructive`
-
-**Overridable property suffixes per variant:**
-`font--color`, `font--color--active`, `font--color--disabled`, `background`, `background--hover`, `background--active`, `background--disabled`, `border`, `border--disabled`, `box-shadow`
-
-**Example:** `--sc-kit--button--primary--background: hotpink;`
-
-### Size Presets
-| Size | Height | Text size | Font weight |
-|---|---|---|---|
-| `standard` | `2em` | `0.75em` | `400` |
-| `large` | `3em` | `0.9375em` | `500` |
-| `small` | `1.5em` | `0.625em` | `400` |
+| `--sc-kit--button--min-width` | Minimum width | `0` |
+| `--sc-kit--button--max-width` | Maximum width | `100%` |
 -->
+
+<style>.btn {
+  --_btn--color: var(--sc-kit--button--color, var(--sc-kit--color--text--on-accent));
+  --_btn--background: var(--sc-kit--button--background, var(--sc-kit--color--accent));
+  --_btn--background-hover: var(--sc-kit--button--background--hover, var(--sc-kit--color--accent--hover));
+  --_btn--background-active: var(--sc-kit--button--background--active, var(--sc-kit--color--accent--hover));
+  --_btn--border: var(--sc-kit--button--border, 1px solid transparent);
+  --_btn--box-shadow: var(--sc-kit--button--box-shadow, inset 0 2px 0 rgba(255, 255, 255, 0.3));
+  --_btn--focus-ring-color: var(--sc-kit--button--focus-ring-color, var(--sc-kit--color--border--focus));
+  --_btn--height: var(--sc-kit--button--height, 2rem);
+  --_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--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;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_btn--gap);
+  width: var(--_btn--width);
+  min-width: var(--_btn--min-width);
+  max-width: var(--_btn--max-width);
+  height: var(--_btn--height);
+  padding-block: 0;
+  padding-inline: var(--_btn--padding-inline);
+  font-family: inherit;
+  font-size: var(--_btn--font-size);
+  font-weight: var(--_btn--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_btn--color);
+  background: var(--_btn--background);
+  border: var(--_btn--border);
+  border-radius: var(--_btn--border-radius);
+  box-shadow: var(--_btn--box-shadow);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.btn:hover:not(.btn--disabled) {
+  background: var(--_btn--background-hover);
+}
+.btn:active:not(.btn--disabled) {
+  background: var(--_btn--background-active);
+  box-shadow: none;
+}
+.btn:focus-visible {
+  outline: 2px solid var(--_btn--focus-ring-color);
+  outline-offset: 2px;
+}
+.btn__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.btn__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sc-kit--icon--size);
+  height: var(--sc-kit--icon--size);
+}
+.btn__spinner {
+  --sc-kit--spinner--size: var(--sc-kit--icon--size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.btn--full {
+  --sc-kit--button--width: 100%;
+  --sc-kit--button--max-width: 100%;
+}
+.btn--disabled {
+  cursor: default;
+}
+.btn--sm {
+  --sc-kit--button--height: 1.75rem;
+  --sc-kit--button--padding-inline: var(--sc-kit--space--3);
+  --sc-kit--button--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--button--gap: var(--sc-kit--space--1);
+  --sc-kit--icon--size: 1rem;
+}
+.btn--md {
+  --sc-kit--button--height: 2rem;
+  --sc-kit--button--padding-inline: var(--sc-kit--space--4);
+  --sc-kit--button--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--button--gap: var(--sc-kit--space--2);
+  --sc-kit--icon--size: 1rem;
+}
+.btn--lg {
+  --sc-kit--button--height: 2.5rem;
+  --sc-kit--button--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--button--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--button--gap: var(--sc-kit--space--2);
+  --sc-kit--icon--size: 1.25rem;
+}
+.btn--icon-only {
+  --sc-kit--button--padding-inline: 0;
+  --sc-kit--button--width: var(--_btn--height);
+  aspect-ratio: 1/1;
+}
+.btn--primary {
+  --sc-kit--button--color: var(--sc-kit--color--text--on-accent);
+  --sc-kit--button--background: var(--sc-kit--color--accent);
+  --sc-kit--button--background--hover: var(--sc-kit--color--accent--hover);
+  --sc-kit--button--background--active: var(--sc-kit--color--accent--hover);
+  --sc-kit--button--border: 1px solid transparent;
+  --sc-kit--button--box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--border--focus);
+}
+.btn--danger {
+  --sc-kit--button--color: var(--sc-kit--color--text--on-accent);
+  --sc-kit--button--background: var(--sc-kit--color--danger);
+  --sc-kit--button--background--hover: var(--sc-kit--color--danger--hover);
+  --sc-kit--button--background--active: var(--sc-kit--color--danger--hover);
+  --sc-kit--button--border: 1px solid transparent;
+  --sc-kit--button--box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--danger);
+}
+.btn--info {
+  --sc-kit--button--color: var(--sc-kit--color--info);
+  --sc-kit--button--background: var(--sc-kit--color--info--soft);
+  --sc-kit--button--background--hover: color-mix(in srgb, var(--sc-kit--color--info) 18%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--background--active: color-mix(in srgb, var(--sc-kit--color--info) 26%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--border: 1px solid var(--sc-kit--color--info);
+  --sc-kit--button--box-shadow: none;
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--info);
+}
+.btn--success {
+  --sc-kit--button--color: var(--sc-kit--color--success);
+  --sc-kit--button--background: var(--sc-kit--color--success--soft);
+  --sc-kit--button--background--hover: color-mix(in srgb, var(--sc-kit--color--success) 18%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--background--active: color-mix(in srgb, var(--sc-kit--color--success) 26%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--border: 1px solid var(--sc-kit--color--success);
+  --sc-kit--button--box-shadow: none;
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--success);
+}
+.btn--warning {
+  --sc-kit--button--color: var(--sc-kit--color--warning);
+  --sc-kit--button--background: var(--sc-kit--color--warning--soft);
+  --sc-kit--button--background--hover: color-mix(in srgb, var(--sc-kit--color--warning) 18%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--background--active: color-mix(in srgb, var(--sc-kit--color--warning) 26%, var(--sc-kit--color--bg--panel));
+  --sc-kit--button--border: 1px solid var(--sc-kit--color--warning);
+  --sc-kit--button--box-shadow: none;
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--warning);
+}
+.btn--secondary {
+  --sc-kit--button--color: var(--sc-kit--color--text--primary);
+  --sc-kit--button--background: var(--sc-kit--color--bg--panel);
+  --sc-kit--button--background--hover: var(--sc-kit--color--bg--hover);
+  --sc-kit--button--background--active: var(--sc-kit--color--bg--active);
+  --sc-kit--button--border: 1px solid var(--sc-kit--color--border);
+  --sc-kit--button--box-shadow: none;
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--border--focus);
+}
+.btn--ghost {
+  --sc-kit--button--color: var(--sc-kit--color--text--primary);
+  --sc-kit--button--background: transparent;
+  --sc-kit--button--background--hover: var(--sc-kit--color--bg--hover);
+  --sc-kit--button--background--active: var(--sc-kit--color--bg--active);
+  --sc-kit--button--border: 1px solid transparent;
+  --sc-kit--button--box-shadow: none;
+  --sc-kit--button--focus-ring-color: var(--sc-kit--color--border--focus);
+}
+.btn--primary-disabled, .btn--danger-disabled {
+  --sc-kit--button--background: var(--sc-kit--color--bg--hover);
+  --sc-kit--button--color: var(--sc-kit--color--text--muted);
+  --sc-kit--button--box-shadow: none;
+}
+.btn--secondary-disabled, .btn--info-disabled, .btn--success-disabled, .btn--warning-disabled {
+  --sc-kit--button--background: var(--sc-kit--color--bg--panel);
+  --sc-kit--button--color: var(--sc-kit--color--text--muted);
+  --sc-kit--button--border: 1px solid var(--sc-kit--color--border);
+}
+.btn--ghost-disabled {
+  --sc-kit--button--color: var(--sc-kit--color--text--muted);
+}</style>

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

@@ -1,64 +1,71 @@
-import type { ButtonSize, ButtonVariant } from './resources/types';
+import { type IconProp } from '../icon';
+import type { ButtonSize, ButtonVariant } from './types';
 import type { Snippet } from 'svelte';
-type Props = {
-    /** @default 'button' */
-    type?: 'button' | 'submit' | 'reset';
+type BaseProps = {
+    /** Color variant @default 'primary' */
+    variant?: ButtonVariant;
+    /** @default 'md' */
+    size?: ButtonSize;
     disabled?: boolean;
-    autofocus?: boolean;
-    /** Color variant applied via `ButtonTheme` */
-    variant?: ButtonVariant | null;
-    /** Size preset: `'standard'` (32px), `'large'` (48px), or `'small'` (24px) */
-    size?: ButtonSize | null;
+    /** Renders a spinner in place of the icon (when leading) and blocks clicks. */
+    loading?: boolean;
+    /** Stretch to fill the parent's inline axis. */
+    fullWidth?: boolean;
+    /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. Replaced by the spinner when `loading` and `iconPosition='leading'`. */
+    icon?: IconProp;
+    /** Side of the label where `icon` is rendered. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    /** Label. Omit for icon-only mode (`icon` set + no children + `aria-label` required). */
+    children?: Snippet;
+    /** Required when icon-only (no children). */
+    'aria-label'?: string;
+};
+type ButtonModeProps = BaseProps & {
+    /** Native button mode. */
+    type: 'button' | 'submit' | 'reset';
+    href?: never;
     on?: {
         click?: (e: MouseEvent) => void;
     };
-    children: Snippet;
+    form?: string;
+    name?: string;
+    value?: string;
+};
+type AnchorModeProps = BaseProps & {
+    /** Anchor mode — renders as `<a>`. */
+    type: 'anchor';
+    href: string;
+    target?: string;
+    rel?: string;
+    download?: string;
 };
+type Props = ButtonModeProps | AnchorModeProps;
 /**
- * A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (colors/sizes).
+ * 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`.
  *
- * ### Base CSS Custom Properties
+ * Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the native `<button type>` (`'button' | 'submit' | 'reset'`).
+ *
+ * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--button--font--size` | Root font size | `1rem` |
- * | `--sc-kit--button--font--color` | Text color | `black` |
- * | `--sc-kit--button--font--color--active` | Text color when pressed | inherits `--font--color` |
- * | `--sc-kit--button--font--color--disabled` | Text color when disabled | inherits `--font--color` |
- * | `--sc-kit--button--font-weight` | Font weight | `400` |
- * | `--sc-kit--button--text--font-size` | Label text size | `0.75em` |
- * | `--sc-kit--button--icon--font-size` | Icon size inside the button | `1em` |
- * | `--sc-kit--button--justify-content` | Horizontal alignment | `center` |
- * | `--sc-kit--button--background` | Background color | `white` |
- * | `--sc-kit--button--background--hover` | Background on hover | inherits `--background` |
- * | `--sc-kit--button--background--active` | Background when pressed | inherits `--background` |
- * | `--sc-kit--button--background--disabled` | Background when disabled | inherits `--background` |
- * | `--sc-kit--button--border` | Border shorthand | `none` |
- * | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
- * | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
- * | `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
- * | `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
- * | `--sc-kit--button--min-width` | Minimum width | `0` |
+ * | `--sc-kit--button--color` | Foreground color | per variant |
+ * | `--sc-kit--button--background` | Background color | per variant |
+ * | `--sc-kit--button--background--hover` | Background on hover | per variant |
+ * | `--sc-kit--button--background--active` | Background when pressed | per variant |
+ * | `--sc-kit--button--border` | Border shorthand | per variant |
+ * | `--sc-kit--button--box-shadow` | Box shadow | per variant |
+ * | `--sc-kit--button--focus-ring-color` | Focus ring color | per variant |
+ * | `--sc-kit--button--height` | Button height | per size |
+ * | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
+ * | `--sc-kit--button--font-size` | Label font size | per size |
+ * | `--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--height` | Button height | `2em` |
- * | `--sc-kit--button--box-shadow` | Box shadow | `none` |
- *
- * ### Variant CSS Custom Properties
- * Each variant overrides the base properties above using the pattern:
- * `--sc-kit--button--{variant}--{property}`
- *
- * **Available variants:** `primary`, `standard`, `alert`, `warning`, `white`, `gray`, `green`, `black`, `text-only`, `transparent-success`, `transparent-primary`, `transparent-gray`, `transparent-white`, `transparent-warning`, `transparent-destructive`
- *
- * **Overridable property suffixes per variant:**
- * `font--color`, `font--color--active`, `font--color--disabled`, `background`, `background--hover`, `background--active`, `background--disabled`, `border`, `border--disabled`, `box-shadow`
- *
- * **Example:** `--sc-kit--button--primary--background: hotpink;`
- *
- * ### Size Presets
- * | Size | Height | Text size | Font weight |
- * |---|---|---|---|
- * | `standard` | `2em` | `0.75em` | `400` |
- * | `large` | `3em` | `0.9375em` | `500` |
- * | `small` | `1.5em` | `0.625em` | `400` |
+ * | `--sc-kit--button--min-width` | Minimum width | `0` |
+ * | `--sc-kit--button--max-width` | Maximum width | `100%` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/button/index.d.ts

@@ -1,3 +1,2 @@
 export { default as Button } from './cmp.button.svelte';
-export { default as OptionsButton } from './cmp.options-button.svelte';
-export type { ButtonSize, ButtonVariant } from './resources/types';
+export type { ButtonSize, ButtonVariant } from './types';

package/dist/ui/button/index.js

@@ -1,2 +1 @@
 export { default as Button } from './cmp.button.svelte';
-export { default as OptionsButton } from './cmp.options-button.svelte';

package/dist/ui/button/types.d.ts

@@ -0,0 +1,2 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'info' | 'success' | 'warning' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,104 @@
+<script lang="ts">const { elevation = 'flat', padding = 'md', header, footer, children, on } = $props();
+const interactive = $derived(!!on?.click);
+export {};
+</script>
+
+{#snippet inner()}
+  {#if header}<div class="card__header">{@render header()}</div>{/if}
+  <div class="card__body">{@render children()}</div>
+  {#if footer}<div class="card__footer">{@render footer()}</div>{/if}
+{/snippet}
+
+{#if interactive}
+  <button type="button" class="card card--{elevation} card--pad-{padding} card--interactive" onclick={() => on?.click?.()}>
+    {@render inner()}
+  </button>
+{:else}
+  <div class="card card--{elevation} card--pad-{padding}">
+    {@render inner()}
+  </div>
+{/if}
+
+<!--
+@component
+Container surface with border, panel background, and rounded corners. Optional `header` and `footer`
+snippets render in chrome with their own dividers. Pass `on.click` to switch to button-mode — the
+whole card becomes a clickable target with hover and focus state, no `interactive` flag needed.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--card--background` | Body background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--card--border-color` | Border color | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--border-color--hover` | Border color in button-mode on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--card--border-radius` | Border radius | `var(--sc-kit--radius--lg)` |
+| `--sc-kit--card--shadow` | Box-shadow on `elevation='raised'` | `var(--sc-kit--shadow--md)` |
+| `--sc-kit--card--shadow--hover` | Box-shadow in button-mode on hover | `var(--sc-kit--shadow--sm)` |
+| `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--card--header--background` | Header bar background | `transparent` |
+| `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
+| `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+-->
+
+<style>.card {
+  --_card--background: var(--sc-kit--card--background, var(--sc-kit--color--bg--panel));
+  --_card--border-color: var(--sc-kit--card--border-color, var(--sc-kit--color--border));
+  --_card--border-color-hover: var(--sc-kit--card--border-color--hover, var(--sc-kit--color--border--strong));
+  --_card--border-radius: var(--sc-kit--card--border-radius, var(--sc-kit--radius--lg));
+  --_card--shadow: var(--sc-kit--card--shadow, var(--sc-kit--shadow--md));
+  --_card--shadow-hover: var(--sc-kit--card--shadow--hover, var(--sc-kit--shadow--sm));
+  --_card--color: var(--sc-kit--card--color, var(--sc-kit--color--text--primary));
+  --_card--header-background: var(--sc-kit--card--header--background, transparent);
+  --_card--header-border-color: var(--sc-kit--card--header--border-color, var(--sc-kit--color--border));
+  --_card--footer-background: var(--sc-kit--card--footer--background, var(--sc-kit--color--bg--element));
+  --_card--footer-border-color: var(--sc-kit--card--footer--border-color, var(--sc-kit--color--border));
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--_card--background);
+  border: 1px solid var(--_card--border-color);
+  border-radius: var(--_card--border-radius);
+  color: var(--_card--color);
+  text-align: left;
+  overflow: hidden;
+}
+.card--raised {
+  box-shadow: var(--_card--shadow);
+}
+.card--pad-none .card__body {
+  padding: 0;
+}
+.card--pad-sm .card__body {
+  padding: var(--sc-kit--space--3);
+}
+.card--pad-md .card__body {
+  padding: var(--sc-kit--space--5);
+}
+.card--pad-lg .card__body {
+  padding: var(--sc-kit--space--6);
+}
+.card__header {
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  background: var(--_card--header-background);
+  border-bottom: 1px solid var(--_card--header-border-color);
+}
+.card__footer {
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  background: var(--_card--footer-background);
+  border-top: 1px solid var(--_card--footer-border-color);
+}
+.card--interactive {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  transition: border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.card--interactive:hover {
+  --sc-kit--card--border-color: var(--_card--border-color-hover);
+  box-shadow: var(--_card--shadow-hover);
+}
+.card--interactive:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

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

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+type CardElevation = 'flat' | 'raised';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+type Props = {
+    /** Visual elevation. @default 'flat' */
+    elevation?: CardElevation;
+    /** Inner body padding preset. Header and footer have their own fixed chrome. @default 'md' */
+    padding?: CardPadding;
+    header?: Snippet;
+    footer?: Snippet;
+    children: Snippet;
+    /**
+     * Presence of `on.click` switches the card to button-mode: rendered as `<button type="button">`,
+     * gains hover/focus states. Without it the card is a plain `<div>`.
+     */
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * Container surface with border, panel background, and rounded corners. Optional `header` and `footer`
+ * snippets render in chrome with their own dividers. Pass `on.click` to switch to button-mode — the
+ * whole card becomes a clickable target with hover and focus state, no `interactive` flag needed.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--card--background` | Body background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--card--border-color` | Border color | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--border-color--hover` | Border color in button-mode on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--card--border-radius` | Border radius | `var(--sc-kit--radius--lg)` |
+ * | `--sc-kit--card--shadow` | Box-shadow on `elevation='raised'` | `var(--sc-kit--shadow--md)` |
+ * | `--sc-kit--card--shadow--hover` | Box-shadow in button-mode on hover | `var(--sc-kit--shadow--sm)` |
+ * | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--card--header--background` | Header bar background | `transparent` |
+ * | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
+ * | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Card } from './cmp.card.svelte';

package/dist/ui/card/index.js

@@ -0,0 +1 @@
+export { default as Card } from './cmp.card.svelte';