@streamscloud/kit 0.10.2 → 0.10.4

package/dist/ui/divider/cmp.divider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { orientation = 'horizontal', label } = $props();
+<script lang="ts">"use strict";
+let { orientation = 'horizontal', label } = $props();
 </script>
 
 {#if label}

package/dist/ui/duration/cmp.duration.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">const { seconds, variant = 'raw', showZero = false } = $props();
+<script lang="ts">"use strict";
+const { seconds, variant = 'raw', showZero = false } = $props();
 const format = (secs) => {
     const total = Math.max(0, Math.round(secs));
     const hours = Math.floor(total / 3600);

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">const { label = 'Id:', text } = $props();
+<script lang="ts">"use strict";
+const { label = 'Id:', text } = $props();
 </script>
 
 <div class="grid-card-id-field">

package/dist/ui/logo/cmp.logo.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { mark = false, subheading = null, variant = 'mono', ariaLabel } = $props();
+<script lang="ts">"use strict";
+let { mark = false, subheading = null, variant = 'mono', ariaLabel } = $props();
 // Resolve fills per variant. `mono` keeps the existing currentColor behavior;
 // `standard` paints the mark in the brand accent and the type in primary text,
 // matching the Figma master Standard lockup.

package/dist/ui/navigation/cmp.nav-menu-divider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts"></script>
+<script lang="ts">"use strict";
+</script>
 
 <div class="nav-menu-divider" role="separator"></div>
 

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { Icon } from '../icon';
+import { ToolbarValueStepperLocalization } from './toolbar-value-stepper-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_16_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_16_regular.svg?raw';
+const { value, min = 0, max = 100, step = 1, valueSuffix = '', size = 'sm', on } = $props();
+const localization = new ToolbarValueStepperLocalization();
+const atMin = $derived(value <= min);
+const atMax = $derived(value >= max);
+const decrease = () => {
+    on?.change?.(Math.max(min, value - step));
+};
+const increase = () => {
+    on?.change?.(Math.min(max, value + step));
+};
+</script>
+
+<div class="toolbar-value-stepper toolbar-value-stepper--{size}" role="group" aria-label={localization.value}>
+  <button type="button" class="toolbar-value-stepper__btn" onclick={decrease} disabled={atMin} aria-label={localization.decreaseValue}>
+    <Icon src={IconChevronLeft} />
+  </button>
+  <span class="toolbar-value-stepper__value">{value}{valueSuffix}</span>
+  <button type="button" class="toolbar-value-stepper__btn" onclick={increase} disabled={atMax} aria-label={localization.increaseValue}>
+    <Icon src={IconChevronRight} />
+  </button>
+</div>
+
+<!--
+@component
+A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
+and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+Shares the field-height preset so it lines up with other toolbar controls.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
+| `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.toolbar-value-stepper {
+  --_toolbar-value-stepper--value--min-inline-size: var(--sc-kit--toolbar-value-stepper--value--min-inline-size, 2.25rem);
+  --_toolbar-value-stepper--icon--color: var(--sc-kit--toolbar-value-stepper--icon--color, var(--sc-kit--color--accent));
+  --sc-kit--icon--color: var(--_toolbar-value-stepper--icon--color);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  block-size: var(--_toolbar-value-stepper--height);
+  padding-inline: var(--sc-kit--space--2);
+  border: 1px solid var(--sc-kit--color--border--field);
+  border-radius: var(--sc-kit--radius--md);
+  background: var(--sc-kit--color--bg--field);
+}
+.toolbar-value-stepper--sm {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
+}
+.toolbar-value-stepper--md {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
+}
+.toolbar-value-stepper--lg {
+  --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
+  --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
+}
+.toolbar-value-stepper__btn {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--sc-kit--space--1);
+  border: 0;
+  background: none;
+  cursor: pointer;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toolbar-value-stepper__btn:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.toolbar-value-stepper__value {
+  min-inline-size: var(--_toolbar-value-stepper--value--min-inline-size);
+  text-align: center;
+  font-size: var(--_toolbar-value-stepper--font-size);
+  color: var(--sc-kit--color--text--primary);
+  font-variant-numeric: tabular-nums;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte.d.ts

@@ -0,0 +1,30 @@
+type Props = {
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** Suffix appended to the displayed value (e.g. ' %'). @default '' */
+    valueSuffix?: string;
+    /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+    on?: {
+        change?: (value: number) => void;
+    };
+};
+/**
+ * A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
+ * and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+ * Shares the field-height preset so it lines up with other toolbar controls.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
+ * | `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/index.d.ts

@@ -7,4 +7,5 @@ export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
 export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';
 export type { ReorderableToggleItem } from './types';

package/dist/ui/page-toolbar/index.js

@@ -7,3 +7,4 @@ export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
 export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';

package/dist/ui/page-toolbar/toolbar-value-stepper-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class ToolbarValueStepperLocalization {
+    get value(): string;
+    get decreaseValue(): string;
+    get increaseValue(): string;
+}

package/dist/ui/page-toolbar/toolbar-value-stepper-localization.js

@@ -0,0 +1,26 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    value: {
+        en: 'Value',
+        no: 'Verdi'
+    },
+    decreaseValue: {
+        en: 'Decrease value',
+        no: 'Reduser verdi'
+    },
+    increaseValue: {
+        en: 'Increase value',
+        no: 'Øk verdi'
+    }
+};
+export class ToolbarValueStepperLocalization {
+    get value() {
+        return loc.value[AppLocale.current];
+    }
+    get decreaseValue() {
+        return loc.decreaseValue[AppLocale.current];
+    }
+    get increaseValue() {
+        return loc.increaseValue[AppLocale.current];
+    }
+}

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

@@ -1,4 +1,5 @@
-<script lang="ts">const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
+<script lang="ts">"use strict";
+const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
 let cells = $state([]);
 const cellValue = (i) => value[i] ?? '';
 const emit = (next) => {

package/dist/ui/progress/cmp.progress.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { value, size = 'md', color, label } = $props();
+<script lang="ts">"use strict";
+let { value, size = 'md', color, label } = $props();
 const clamped = $derived(Math.max(0, Math.min(1, value)));
 const cssWidth = $derived(`${100 * clamped}%`);
 const percent = $derived(Math.round(100 * clamped));

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

@@ -1,4 +1,5 @@
-<script lang="ts">const { selected, title, description, disabled = false, name, on } = $props();
+<script lang="ts">"use strict";
+const { selected, title, description, disabled = false, name, on } = $props();
 const handleClick = (event) => {
     event.stopPropagation();
     if (disabled || selected) {

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
+<script lang="ts" generics="T">"use strict";
+const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
 const isActive = (segment) => (compare ? compare(value, segment.value) : value === segment.value);
 const handleClick = (segment) => {
     if (segment.disabled || isActive(segment)) {

package/dist/ui/skeleton/cmp.skeleton.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { shape = 'rect', lines = 1 } = $props();
+<script lang="ts">"use strict";
+let { shape = 'rect', lines = 1 } = $props();
 </script>
 
 {#if shape === 'text' && lines > 1}

package/dist/ui/slider/cmp.slider.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
+<script lang="ts">"use strict";
+let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
 let focused = $state(false);
 const fillPct = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 const handleInput = (e) => {

package/dist/ui/spinner/cmp.spinner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">let { size = 'md', color, label, position, blocking = false, timeout = 0 } = $props();
+<script lang="ts">"use strict";
+let { size = 'md', color, label, position, blocking = false, timeout = 0 } = $props();
 let visible = $state(false);
 $effect(() => {
     if (timeout <= 0) {

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

@@ -6,7 +6,7 @@ const variant = $derived(column.variantFactory ? column.variantFactory(item) : '
 
 {#if getValueForColumn(column, item) !== null}
   <div class="table-badge-cell">
-    <Badge variant={variant}>{getValueForColumn(column, item)}</Badge>
+    <Badge variant={variant} fullWidth={column.fullWidth}>{getValueForColumn(column, item)}</Badge>
   </div>
 {/if}
 

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

@@ -40,6 +40,8 @@ export interface ITableBadgeColumn<T> extends ITableColumn<T> {
     type: 'badge';
     variantFactory?: ((item: T) => BadgeVariant) | null;
     valueFactory?: ((item: T) => string) | null;
+    /** Stretch the badge to fill the column width. @default false */
+    fullWidth?: boolean;
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -519,7 +519,7 @@
     "nanoid": "^5.1.11",
     "p-limit": "^7.3.0",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-svelte": "^4.1.0",
     "publint": "^0.3.21",
     "rfdc": "^1.4.1",
     "sass": "^1.99.0",
@@ -528,7 +528,7 @@
     "svelte-check": "^4.4.8",
     "svelte-dnd-action": "^0.9.69",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.3",
     "vite": "^8.0.13",
     "vite-tsconfig-paths": "^6.1.1",