@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,170 @@
+<script lang="ts" generics="T">import { Icon } from '../icon';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_12_regular.svg?raw';
+const { chips, variant = 'soft', size = 'md', disabled = false, compare = (a, b) => a === b, ...mode } = $props();
+const isSelected = (chip) => {
+    if (mode.type === 'multi') {
+        return mode.value.some((v) => compare(v, chip.value));
+    }
+    return mode.value !== null && compare(mode.value, chip.value);
+};
+const handleClick = (chip) => {
+    if (disabled || chip.disabled) {
+        return;
+    }
+    if (mode.type === 'multi') {
+        const next = mode.value.some((v) => compare(v, chip.value)) ? mode.value.filter((v) => !compare(v, chip.value)) : [...mode.value, chip.value];
+        mode.on?.change?.(next);
+    }
+    else {
+        const next = mode.value !== null && compare(mode.value, chip.value) ? null : chip.value;
+        mode.on?.change?.(next);
+    }
+};
+</script>
+
+<div class="chip-group chip-group--{size} chip-group--{variant}" class:chip-group--disabled={disabled} role={mode.type === 'multi' ? 'group' : 'radiogroup'}>
+  {#each chips as chip (chip.value)}
+    {@const selected = isSelected(chip)}
+    <button
+      type="button"
+      class="chip-group__chip"
+      class:chip-group__chip--selected={selected}
+      class:chip-group__chip--disabled={chip.disabled}
+      role={mode.type === 'multi' ? 'checkbox' : 'radio'}
+      aria-checked={selected}
+      disabled={disabled || chip.disabled}
+      onclick={() => handleClick(chip)}>
+      {#if variant === 'solid' && selected}
+        <span class="chip-group__check" aria-hidden="true"><Icon src={IconCheckmark} /></span>
+      {/if}
+      <span class="chip-group__label">{chip.label}</span>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+Pill-shaped chip group for single or multi selection. Discriminated by `type`:
+pass `type="single"` with `value: T | null` or `type="multi"` with `value: T[]`.
+Clicking an active chip in single mode deselects it. `solid` variant shows a
+checkmark on selected chips.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--chip-group--gap` | Gap between chips | `var(--sc-kit--space--2)` |
+| `--sc-kit--chip-group--height` | Chip height | per size |
+| `--sc-kit--chip-group--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--chip-group--font-size` | Chip font size | per size |
+| `--sc-kit--chip-group--font-weight` | Chip font weight | `var(--sc-kit--font-weight--medium)` |
+| `--sc-kit--chip-group--background` | Chip background (unselected) | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--chip-group--background--hover` | Chip background on hover (unselected) | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--chip-group--border-color` | Chip border (unselected) | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--chip-group--border-color--hover` | Chip border on hover (unselected) | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--chip-group--color` | Chip text color | per state |
+| `--sc-kit--chip-group--background--selected` | Selected background | per variant |
+| `--sc-kit--chip-group--border-color--selected` | Selected border | per variant |
+| `--sc-kit--chip-group--color--selected` | Selected text color | per variant |
+| `--sc-kit--chip-group--background--selected-hover` | Selected background on hover | per variant |
+| `--sc-kit--chip-group--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+-->
+
+<style>.chip-group {
+  --_cg--gap: var(--sc-kit--chip-group--gap, var(--sc-kit--space--2));
+  --_cg--height: var(--sc-kit--chip-group--height, 2rem);
+  --_cg--padding-inline: var(--sc-kit--chip-group--padding-inline, 0.875rem);
+  --_cg--font-size: var(--sc-kit--chip-group--font-size, var(--sc-kit--font-size--md));
+  --_cg--font-weight: var(--sc-kit--chip-group--font-weight, var(--sc-kit--font-weight--medium));
+  --_cg--background: var(--sc-kit--chip-group--background, var(--sc-kit--color--bg--field));
+  --_cg--background-hover: var(--sc-kit--chip-group--background--hover, var(--sc-kit--color--bg--hover));
+  --_cg--border-color: var(--sc-kit--chip-group--border-color, var(--sc-kit--color--border--field));
+  --_cg--border-color-hover: var(--sc-kit--chip-group--border-color--hover, var(--sc-kit--color--border--strong));
+  --_cg--color: var(--sc-kit--chip-group--color, var(--sc-kit--color--text--primary));
+  --_cg--background-selected: var(--sc-kit--chip-group--background--selected, var(--sc-kit--color--accent--soft));
+  --_cg--border-color-selected: var(--sc-kit--chip-group--border-color--selected, var(--sc-kit--color--accent));
+  --_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;
+  flex-wrap: wrap;
+  gap: var(--_cg--gap);
+  max-width: 100%;
+}
+.chip-group--sm {
+  --sc-kit--chip-group--height: 1.75rem;
+  --sc-kit--chip-group--padding-inline: 0.75rem;
+  --sc-kit--chip-group--font-size: var(--sc-kit--font-size--sm);
+}
+.chip-group--md {
+  --sc-kit--chip-group--height: 2rem;
+  --sc-kit--chip-group--padding-inline: 0.875rem;
+  --sc-kit--chip-group--font-size: var(--sc-kit--font-size--md);
+}
+.chip-group--soft {
+  --sc-kit--chip-group--background--selected: var(--sc-kit--color--accent--soft);
+  --sc-kit--chip-group--border-color--selected: var(--sc-kit--color--accent);
+  --sc-kit--chip-group--color--selected: var(--sc-kit--color--accent);
+  --sc-kit--chip-group--background--selected-hover: var(--sc-kit--color--accent--softer);
+}
+.chip-group--solid {
+  --sc-kit--chip-group--background--selected: var(--sc-kit--color--accent);
+  --sc-kit--chip-group--border-color--selected: var(--sc-kit--color--accent);
+  --sc-kit--chip-group--color--selected: var(--sc-kit--color--text--on-accent);
+  --sc-kit--chip-group--background--selected-hover: var(--sc-kit--color--accent--hover);
+}
+.chip-group--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.chip-group__chip {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  height: var(--_cg--height);
+  max-width: 100%;
+  padding: 0 var(--_cg--padding-inline);
+  background: var(--_cg--background);
+  border: 1px solid var(--_cg--border-color);
+  border-radius: var(--sc-kit--radius--pill);
+  color: var(--_cg--color);
+  font-family: inherit;
+  font-size: var(--_cg--font-size);
+  font-weight: var(--_cg--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.chip-group__chip:hover:not(:disabled):not(.chip-group__chip--selected) {
+  background: var(--_cg--background-hover);
+  border-color: var(--_cg--border-color-hover);
+}
+.chip-group__chip--selected {
+  background: var(--_cg--background-selected);
+  border-color: var(--_cg--border-color-selected);
+  color: var(--_cg--color-selected);
+}
+.chip-group__chip--selected:hover:not(:disabled) {
+  background: var(--_cg--background-selected-hover);
+}
+.chip-group__chip--disabled, .chip-group__chip:disabled {
+  color: var(--sc-kit--color--text--muted);
+  cursor: default;
+}
+.chip-group__chip:focus-visible {
+  outline: 2px solid var(--_cg--focus-ring-color);
+  outline-offset: 2px;
+}
+.chip-group__check {
+  --sc-kit--icon--size: 0.75rem;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+.chip-group__label {
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

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

@@ -0,0 +1,84 @@
+import type { ChipGroupChip } from './types';
+declare function $$render<T>(): {
+    props: ({
+        chips: ChipGroupChip<T>[];
+        /** Visual treatment of selected chips. @default 'soft' */
+        variant?: "soft" | "solid";
+        /** @default 'md' */
+        size?: "sm" | "md";
+        /** Disable the whole group. */
+        disabled?: boolean;
+        /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+    } & {
+        /** Single-select mode. */
+        type: "single";
+        value: T | null;
+        on?: {
+            change?: (value: T | null) => void;
+        };
+    }) | ({
+        chips: ChipGroupChip<T>[];
+        /** Visual treatment of selected chips. @default 'soft' */
+        variant?: "soft" | "solid";
+        /** @default 'md' */
+        size?: "sm" | "md";
+        /** Disable the whole group. */
+        disabled?: boolean;
+        /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+    } & {
+        /** Multi-select mode. */
+        type: "multi";
+        value: T[];
+        on?: {
+            change?: (value: T[]) => void;
+        };
+    });
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Pill-shaped chip group for single or multi selection. Discriminated by `type`:
+ * pass `type="single"` with `value: T | null` or `type="multi"` with `value: T[]`.
+ * Clicking an active chip in single mode deselects it. `solid` variant shows a
+ * checkmark on selected chips.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--chip-group--gap` | Gap between chips | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--chip-group--height` | Chip height | per size |
+ * | `--sc-kit--chip-group--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--chip-group--font-size` | Chip font size | per size |
+ * | `--sc-kit--chip-group--font-weight` | Chip font weight | `var(--sc-kit--font-weight--medium)` |
+ * | `--sc-kit--chip-group--background` | Chip background (unselected) | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--chip-group--background--hover` | Chip background on hover (unselected) | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--chip-group--border-color` | Chip border (unselected) | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--chip-group--border-color--hover` | Chip border on hover (unselected) | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--chip-group--color` | Chip text color | per state |
+ * | `--sc-kit--chip-group--background--selected` | Selected background | per variant |
+ * | `--sc-kit--chip-group--border-color--selected` | Selected border | per variant |
+ * | `--sc-kit--chip-group--color--selected` | Selected text color | per variant |
+ * | `--sc-kit--chip-group--background--selected-hover` | Selected background on hover | per variant |
+ * | `--sc-kit--chip-group--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/chip-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChipGroup } from './cmp.chip-group.svelte';
+export type { ChipGroupChip } from './types';

package/dist/ui/chip-group/index.js

@@ -0,0 +1 @@
+export { default as ChipGroup } from './cmp.chip-group.svelte';

package/dist/ui/chip-group/types.d.ts

@@ -0,0 +1,5 @@
+export type ChipGroupChip<T> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};

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

@@ -1,14 +1,14 @@
 <script lang="ts">import { ColorHelper } from '../../core/utils';
-import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
-import { Input } from '../inputs';
+import { Input } from '../input';
+import { Popover } from '../popover';
 import { ColorPickerLocalization } from './color-picker-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import { colord } from 'colord';
 import AwesomeColorPicker from 'svelte-awesome-color-picker';
-let { value, defaultColor, enableReset = false, on, children, defaultPreviewIcon } = $props();
+let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon } = $props();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
@@ -33,10 +33,12 @@ const previewBackgroundColor = $derived.by(() => {
     }
     return colord(displayColor).toHex().substring(0, 7);
 });
+const alphaPercent = $derived(displayColor ? `${Math.round(colord(displayColor).alpha() * 100)}%` : '');
+const triggerPlaceholder = $derived(placeholder ?? loc.notSet);
 const resetValue = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (enableReset) {
+    if (clearable) {
         on?.change?.('');
     }
 };
@@ -46,41 +48,54 @@ const onColorPickerInput = ({ hex }) => {
 </script>
 
 <div class="color-picker">
-  <Dropdown position="bottom-start" keepDropdownOpen panel={false}>
+  <Popover position="bottom-start" keepOpen panel={false} disabled={disabled}>
     {#snippet trigger()}
       <div class="color-picker__trigger">
         {#if children}
           {@render children()}
+        {:else if variant === 'field'}
+          <div class="color-picker__field color-picker__field--{size}">
+            <span class="color-picker__field-swatch" style:background={previewBackgroundColor} aria-hidden="true"></span>
+            <span class="color-picker__field-label">{label}</span>
+            {#if displayColor}
+              <span class="color-picker__field-value">{alphaPercent}</span>
+            {/if}
+          </div>
         {:else}
           <Input
             value={value || ''}
+            size={size}
             on={{}}
             inert={true}
-            placeholder={loc.notSet}
+            placeholder={triggerPlaceholder}
             --sc-kit--input--background={previewBackgroundColor}
-            --sc-kit--input--text--color={textColor}
+            --sc-kit--input--color={textColor}
             --sc-kit--input--icon--color={textColor}
             --sc-kit--input--placeholder--color={textColor}>
             {#snippet icon()}
-              {#if defaultPreviewIcon}
-                {@render defaultPreviewIcon()}
+              {#if previewIcon !== undefined}
+                {#if typeof previewIcon === 'string'}
+                  <Icon src={previewIcon} color={displayColor ? undefined : 'muted'} />
+                {:else}
+                  {@render previewIcon()}
+                {/if}
               {:else}
-                <Icon src={IconColorF} color={displayColor ? null : 'gray'} />
+                <Icon src={IconColorF} color={displayColor ? undefined : 'muted'} />
               {/if}
             {/snippet}
-            {#snippet clearButton()}
+            {#snippet secondaryIcon()}
               {#if !value}
-                <button type="button" inert={true}>
-                  <Icon src={IconChevronDown} color={displayColor ? null : 'gray'} />
+                <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}
-                <button type="button" inert={!enableReset} onclick={resetValue}>
-                  {#if enableReset}
-                    <Icon src={IconDismiss} />
-                  {:else}
-                    <Icon src={IconChevronDown} />
-                  {/if}
-                </button>
+                <span class="color-picker__chevron" aria-hidden="true">
+                  <Icon src={IconChevronDown} />
+                </span>
               {/if}
             {/snippet}
           </Input>
@@ -95,27 +110,44 @@ const onColorPickerInput = ({ hex }) => {
         onInput={onColorPickerInput}
         textInputModes={['hex']} />
     </div>
-  </Dropdown>
+  </Popover>
 </div>
 
 <!--
 @component
-A color picker that displays a swatch preview trigger and opens a dropdown panel with a full color picker (powered by svelte-awesome-color-picker).
+A color picker with an Input-shaped swatch trigger that opens a popover hosting a full hex/rgb picker
+(powered by `svelte-awesome-color-picker`). Designed to drop into forms next to Input / DatePicker /
+Select — shares the same `size` preset and field tokens, so visually it sits in the same row at the
+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 |
 |---|---|---|
 | `--sc-kit--color-picker--width` | Component width | `100%` |
-| `--sc-kit--color-picker--default-preview--font-size` | Preview text font size | inherited |
-| `--sc-kit--color-picker--default-preview--icon-size` | Preview icon size | `1rem` |
-| `--sc-kit--color-picker--default-preview--height` | Preview trigger height | inherited |
+| `--sc-kit--color-picker--panel--background` | Popover panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--color-picker--panel--border-color` | Popover panel border | `--sc-kit--color--border` |
+| `--sc-kit--color-picker--panel--input-bg` | svelte-awesome input bg | `--sc-kit--color--bg--field` |
+| `--sc-kit--color-picker--panel--text-color` | Popover panel text | `--sc-kit--color--text--primary` |
 -->
 
 <style>.color-picker {
-  --sc-kit--dropdown--width: 100%;
-  --_color-picker--default-preview--font-size: var(--sc-kit--color-picker--default-preview--font-size);
-  --_color-picker--default-preview--icon-size: var(--sc-kit--color-picker--default-preview--icon-size, 1rem);
-  --_color-picker--default-preview--height: var(--sc-kit--color-picker--default-preview--height);
+  --sc-kit--popover--width: 100%;
   --_color-picker--width: var(--sc-kit--color-picker--width, 100%);
   display: flex;
   position: relative;
@@ -124,17 +156,76 @@ A color picker that displays a swatch preview trigger and opens a dropdown panel
 .color-picker__trigger {
   width: 100%;
   transition: none;
-  --sc-kit--input--text--font-size: var(--_color-picker--default-preview--font-size);
-  --sc-kit--input--icon--size: var(--_color-picker--default-preview--icon-size);
-  --sc-kit--input--height: var(--_color-picker--default-preview--height);
   --sc-kit--input--cursor--inert: pointer;
 }
+.color-picker__field {
+  --_color-picker--field-height: var(--sc-kit--field--height--md);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--md);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  height: var(--_color-picker--field-height);
+  padding-inline: var(--_color-picker--field-padding-inline);
+  background: var(--sc-kit--color--bg--field);
+  border: 1px solid var(--sc-kit--color--border--field);
+  border-radius: var(--sc-kit--radius--md);
+  cursor: pointer;
+  transition: border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.color-picker__field--sm {
+  --_color-picker--field-height: var(--sc-kit--field--height--sm);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.color-picker__field--lg {
+  --_color-picker--field-height: var(--sc-kit--field--height--lg);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--lg);
+}
+.color-picker__field:hover {
+  border-color: var(--sc-kit--color--border--strong);
+}
+.color-picker__field-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  border: 1px solid var(--sc-kit--color--border);
+  border-radius: var(--sc-kit--radius--sm);
+}
+.color-picker__field-label {
+  flex: 1;
+  min-width: 0;
+  color: var(--sc-kit--color--text--primary);
+  font-size: var(--sc-kit--font-size--sm);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.color-picker__field-value {
+  flex-shrink: 0;
+  color: var(--sc-kit--color--text--secondary);
+  font-size: var(--sc-kit--font-size--sm);
+}
+.color-picker__chevron, .color-picker__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  line-height: 0;
+  color: inherit;
+  cursor: pointer;
+}
+.color-picker__chevron {
+  cursor: inherit;
+}
 .color-picker__panel {
   --focus-color: none;
-  --cp-bg-color: light-dark(#ffffff, #1c1c1c);
-  --cp-border-color: light-dark(#d1d5db, #4b5563);
-  --cp-input-color: light-dark(#f2f2f3, #4b5563);
-  --cp-text-color: light-dark(#2e2e2e, #ffffff);
+  --cp-bg-color: var(--sc-kit--color-picker--panel--background, var(--sc-kit--color--bg--panel));
+  --cp-border-color: var(--sc-kit--color-picker--panel--border-color, var(--sc-kit--color--border));
+  --cp-input-color: var(--sc-kit--color-picker--panel--input-bg, var(--sc-kit--color--bg--field));
+  --cp-text-color: var(--sc-kit--color-picker--panel--text-color, var(--sc-kit--color--text--primary));
 }
 .color-picker__panel :global(.button-like) {
   display: none;

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

@@ -1,28 +1,61 @@
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | null | undefined;
-    /** Default color shown in the picker when value is empty (does not set the value itself) */
+    /** Trigger presentation: `'fill'` floods the field with the color; `'field'` is a compact row (swatch + label + opacity). @default 'fill' */
+    variant?: 'fill' | 'field';
+    /** Row label for the `'field'` variant (e.g. "Background Color"). */
+    label?: string;
+    /** Size preset (shared with Input / DatePicker / Select). @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Default color shown in the picker UI when value is empty (does not set the value itself). */
     defaultColor?: string;
-    /** Show dismiss icon to clear the color value */
-    enableReset?: boolean;
+    /** Show a × clear button on the trigger to wipe the value. */
+    clearable?: boolean;
+    /** Visual disabled state — popover won't open. */
+    disabled?: boolean;
+    /** Placeholder shown on the swatch trigger when no value is selected. */
+    placeholder?: string;
     on?: {
         change?: (value: string) => void;
     };
-    /** Custom trigger snippet (replaces default color preview) */
+    /** Custom trigger snippet — replaces the default swatch+text trigger entirely. */
     children?: Snippet;
-    /** Custom icon in the default preview trigger */
-    defaultPreviewIcon?: Snippet;
+    /**
+     * Custom leading icon for the default trigger — SVG source string or snippet. Defaults to a color
+     * droplet glyph. Same shape as Input's `icon` prop (Rule 9).
+     */
+    previewIcon?: string | Snippet;
 };
 /**
- * A color picker that displays a swatch preview trigger and opens a dropdown panel with a full color picker (powered by svelte-awesome-color-picker).
+ * A color picker with an Input-shaped swatch trigger that opens a popover hosting a full hex/rgb picker
+ * (powered by `svelte-awesome-color-picker`). Designed to drop into forms next to Input / DatePicker /
+ * Select — shares the same `size` preset and field tokens, so visually it sits in the same row at the
+ * 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 |
  * |---|---|---|
  * | `--sc-kit--color-picker--width` | Component width | `100%` |
- * | `--sc-kit--color-picker--default-preview--font-size` | Preview text font size | inherited |
- * | `--sc-kit--color-picker--default-preview--icon-size` | Preview icon size | `1rem` |
- * | `--sc-kit--color-picker--default-preview--height` | Preview trigger height | inherited |
+ * | `--sc-kit--color-picker--panel--background` | Popover panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--color-picker--panel--border-color` | Popover panel border | `--sc-kit--color--border` |
+ * | `--sc-kit--color-picker--panel--input-bg` | svelte-awesome input bg | `--sc-kit--color--bg--field` |
+ * | `--sc-kit--color-picker--panel--text-color` | Popover panel text | `--sc-kit--color--text--primary` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/color-picker/color-picker-localization.d.ts

@@ -1,3 +1,4 @@
 export declare class ColorPickerLocalization {
     get notSet(): string;
+    get clear(): string;
 }

package/dist/ui/color-picker/color-picker-localization.js

@@ -3,10 +3,17 @@ const loc = {
     notSet: {
         en: 'Not set',
         no: 'Ikke angitt'
+    },
+    clear: {
+        en: 'Clear color',
+        no: 'Fjern farge'
     }
 };
 export class ColorPickerLocalization {
     get notSet() {
         return loc.notSet[AppLocale.current];
     }
+    get clear() {
+        return loc.clear[AppLocale.current];
+    }
 }

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

@@ -1,5 +1,4 @@
 <script lang="ts">import { Dialog, DialogButton, DialogCancelButton } from '../dialog';
-import { IconText } from '../icon-text';
 import { ConfirmationDialogLocalization } from './confirmation-dialog-localization';
 import {} from './types';
 import { untrack } from 'svelte';
@@ -10,7 +9,7 @@ const bodyText = $derived(data.text);
 const style = $derived(data.style);
 const icon = $derived(data.icon);
 const STYLE_TO_VARIANT = {
-    alert: 'alert',
+    alert: 'danger',
     warning: 'warning',
     info: 'primary'
 };
@@ -27,7 +26,7 @@ untrack(() => {
 });
 </script>
 
-<div class="confirmation-dialog" class:confirmation-dialog--alert={style === 'alert'} class:confirmation-dialog--warning={style === 'warning'}>
+<div class="confirmation-dialog confirmation-dialog--{style}">
   <Dialog controller={controller} hideCloseButton={true}>
     {#snippet title()}
       {titleText}
@@ -39,20 +38,24 @@ untrack(() => {
     {/snippet}
     {#snippet footer()}
       <DialogCancelButton on={{ click: close }}>{localization.no}</DialogCancelButton>
-      <DialogButton on={{ click: confirm }} autofocus={true} variant={buttonVariant}>
-        {#if icon}
-          <IconText icon={icon}>
-            {localization.yes}
-          </IconText>
-        {:else}
-          {localization.yes}
-        {/if}
+      <DialogButton on={{ click: confirm }} variant={buttonVariant} icon={icon}>
+        {localization.yes}
       </DialogButton>
     {/snippet}
   </Dialog>
 </div>
 
+<!--
+@component
+Internal view for `openConfirmationDialog`. Renders the Dialog body + Yes/No footer. The Yes button's
+Button variant is derived from `data.style` (`alert → danger`, `warning → warning`, `info → primary`)
+so the confirmation reads the same as the surrounding banner color.
+
+Use the imperative `openConfirmationDialog({ title, text, style, icon })` from the package barrel —
+never render this view directly.
+-->
+
 <style>.confirmation-dialog {
-  --sc-kit--dialog--body--padding-inline: 1.5rem;
-  --sc-kit--dialog--body--padding-block: 1.5rem 3rem;
+  --sc-kit--dialog--body--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--dialog--body--padding-block: var(--sc-kit--space--6) var(--sc-kit--space--12);
 }</style>