@streamscloud/kit 0.2.4 → 0.2.5

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

@@ -0,0 +1,286 @@
+<script lang="ts">import { AppTheme } from '../../core/theme';
+import { randomString, Utils } from '../../core/utils';
+import { Icon } from '../icon';
+import { DatetimePickerLocalization } from './datetime-picker-localization';
+import { applyFlatpickrTheme } from './flatpickr-theme';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import flatpickr from 'flatpickr';
+let { datetime, placeholder = null, pickerOptions, disabled = false, icon, on } = $props();
+const id = randomString(10);
+const localization = new DatetimePickerLocalization();
+let timePartHolder;
+let showClearButton = $state(false);
+let fpInstance = $state(undefined);
+let picker;
+const preprocessInitialValue = (datetime) => {
+    let date = undefined;
+    if (!datetime) {
+        if (pickerOptions.noValueHandler !== 'allow-empty') {
+            date = pickerOptions.noValueHandler === 'reset-to-now' || !pickerOptions.noValueHandler ? new Date() : pickerOptions.noValueHandler;
+        }
+    }
+    else {
+        date = new Date(datetime);
+    }
+    if (date && pickerOptions.mode === 'date') {
+        date.setHours(0, 0, 0, 0);
+    }
+    if (pickerOptions.mode === 'date-keeping-time') {
+        timePartHolder = date || new Date(2000, 1, 1, 12, 0);
+    }
+    notifyChangedValue(date);
+    return date;
+};
+const notifyChangedValue = (date) => {
+    if (!date && !datetime) {
+        return;
+    }
+    if (!date && datetime) {
+        on?.change?.(undefined);
+        return;
+    }
+    if (!datetime || date.toISOString() !== new Date(datetime).toISOString()) {
+        on?.change?.(date.toISOString());
+    }
+};
+const getDefaultPlaceholder = () => {
+    switch (pickerOptions.mode) {
+        case 'date':
+        case 'date-keeping-time':
+            return localization.date;
+        case 'time':
+            return localization.time;
+        default:
+            return localization.dateTime;
+    }
+};
+const initPicker = (node) => {
+    picker = node;
+    const opts = pickerOptions ?? {};
+    const mode = opts.mode ?? 'datetime';
+    const noValueHandler = opts.noValueHandler ?? 'reset-to-now';
+    let format;
+    switch (mode) {
+        case 'datetime':
+            format = { picker: 'd M Y H:i', enableTime: true, showCalendar: true };
+            break;
+        case 'date':
+        case 'date-keeping-time':
+            format = { picker: 'd M Y', enableTime: false, showCalendar: true };
+            break;
+        case 'time':
+            format = { picker: 'H:i', enableTime: true, showCalendar: false };
+            break;
+        default:
+            return Utils.assertUnreachable(mode);
+    }
+    const defaultDate = preprocessInitialValue(datetime);
+    fpInstance = flatpickr(picker, {
+        dateFormat: format.picker,
+        defaultDate,
+        enableTime: format.enableTime,
+        noCalendar: !format.showCalendar,
+        time_24hr: true,
+        wrap: true,
+        locale: { firstDayOfWeek: 1 },
+        minDate: opts.minDate,
+        maxDate: opts.maxDate,
+        positionElement: picker,
+        onChange: (selectedDates) => {
+            let dateToProcess = !selectedDates.length && noValueHandler instanceof Date ? noValueHandler : selectedDates[0];
+            dateToProcess = dateToProcess ? new Date(dateToProcess.getTime()) : null;
+            if (dateToProcess) {
+                if (mode === 'date-keeping-time') {
+                    dateToProcess.setHours(timePartHolder.getHours(), timePartHolder.getMinutes());
+                }
+                fpInstance?.setDate(dateToProcess);
+            }
+            notifyChangedValue(dateToProcess);
+        },
+        onOpen: () => {
+            if (fpInstance?.selectedDates) {
+                fpInstance.jumpToDate(fpInstance.selectedDates[0]);
+            }
+        }
+    });
+};
+$effect(() => {
+    applyFlatpickrTheme(AppTheme.isDarkMode);
+});
+$effect(() => {
+    if (!datetime) {
+        showClearButton = false;
+    }
+    else {
+        const handler = pickerOptions.noValueHandler;
+        switch (handler) {
+            case 'reset-to-now':
+                showClearButton = false;
+                break;
+            case 'allow-empty':
+                showClearButton = true;
+                break;
+            default:
+                showClearButton = !!handler && new Date(datetime).getTime() !== handler.getTime();
+        }
+    }
+});
+$effect(() => {
+    if (fpInstance) {
+        const date = preprocessInitialValue(datetime);
+        if (date) {
+            fpInstance.setDate(date);
+        }
+        else {
+            fpInstance.clear();
+        }
+        fpInstance._input.disabled = disabled;
+    }
+});
+$effect(() => {
+    return () => {
+        fpInstance?.destroy();
+    };
+});
+</script>
+
+<div class="datetime-picker" class:datetime-picker--disabled={disabled} use:initPicker id={id}>
+  {#if icon}
+    <div class="datetime-picker__icon">
+      {@render icon()}
+    </div>
+  {/if}
+  <input data-input class="datetime-picker__input" placeholder={placeholder ?? getDefaultPlaceholder()} disabled={disabled} />
+  <button type="button" class="datetime-picker__clear-button" class:datetime-picker__clear-button--hidden={!showClearButton || disabled} data-clear>
+    <Icon src={IconDismiss} />
+  </button>
+</div>
+
+<!--
+@component
+A date/time picker powered by flatpickr, supporting date, time, and datetime modes.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--datetime-picker--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--datetime-picker--height` | Container height | `2em` |
+| `--sc-kit--datetime-picker--width` | Container width | `100%` |
+| `--sc-kit--datetime-picker--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--datetime-picker--padding--block` | Block (vertical) padding | `0` |
+| `--sc-kit--datetime-picker--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--datetime-picker--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--datetime-picker--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--datetime-picker--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--datetime-picker--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--datetime-picker--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--datetime-picker--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--datetime-picker--placeholder--color` | Placeholder color | inherited from border |
+| `--sc-kit--datetime-picker--icon--size` | Icon size | `1em` |
+| `--sc-kit--datetime-picker--icon--color` | Icon color | inherited from border |
+-->
+
+<style>.datetime-picker {
+  --_--input--root--font-size: var(--sc-kit--datetime-picker--root--font-size);
+  --_--input--height: var(--sc-kit--datetime-picker--height);
+  --_--input--width: var(--sc-kit--datetime-picker--width);
+  --_--input--background: var(--sc-kit--datetime-picker--background);
+  --_--input--background--disabled: var(--sc-kit--datetime-picker--background--disabled);
+  --_--input--border-color: var(--sc-kit--datetime-picker--border-color);
+  --_--input--border-radius: var(--sc-kit--datetime-picker--border-radius);
+  --_--input--icon--size: var(--sc-kit--datetime-picker--icon--size);
+  --_--input--icon--color: var(--sc-kit--datetime-picker--icon--color);
+  --_--input--text--font-size: var(--sc-kit--datetime-picker--text--font-size);
+  --_--input--text--color: var(--sc-kit--datetime-picker--text--color);
+  --_--input--placeholder--color: var(--sc-kit--datetime-picker--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--datetime-picker--accent-color);
+  --_--input--padding--inline: var(--sc-kit--datetime-picker--padding--inline);
+  --_--input--padding--block: var(--sc-kit--datetime-picker--padding--block);
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, 2em);
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
+  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
+  --_input--border-radius: var(--_--input--border-radius, 0.25em);
+  --_input--icon--size: var(--_--input--icon--size, 1em);
+  --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
+  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
+  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
+  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
+  --_input--padding--block: var(--_--input--padding--block, 0);
+  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
+  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
+  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
+  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
+  font-size: var(--_input--root--font-size);
+  height: var(--_input--height);
+  color: var(--_input--text--color);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  width: var(--_input--width);
+  min-width: var(--_input--width);
+  background: var(--_input--background);
+  padding-top: var(--_input--padding-top);
+  padding-right: var(--_input--padding-right);
+  padding-bottom: var(--_input--padding-bottom);
+  padding-left: var(--_input--padding-left);
+  --_input--default-shadow-color: transparent;
+  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
+  position: relative;
+  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.datetime-picker:focus, .datetime-picker:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.datetime-picker--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.datetime-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+  cursor: pointer;
+  position: relative;
+}
+.datetime-picker :global(.flatpickr-calendar) {
+  z-index: 9999993 !important;
+  display: none;
+}
+.datetime-picker :global(.flatpickr-calendar) :global(.flatpickr-time) :global(.numInputWrapper) :global(input[type=number]) {
+  outline: none;
+  border: none;
+  color: #2e2e2e;
+  height: inherit;
+}
+.datetime-picker__icon, .datetime-picker__clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--_input--icon--color);
+  font-size: var(--_input--icon--size);
+}
+.datetime-picker__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  background-color: transparent !important;
+  cursor: pointer;
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.datetime-picker__input::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.datetime-picker__input:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.datetime-picker__clear-button--hidden {
+  display: none;
+}</style>

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

@@ -0,0 +1,37 @@
+import type { DatetimePickerOptions, LikeDate } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    datetime: LikeDate | null | undefined;
+    placeholder?: string | null;
+    pickerOptions: DatetimePickerOptions;
+    disabled?: boolean;
+    on?: {
+        change: (value: string | undefined) => void;
+    };
+    icon?: Snippet;
+};
+/**
+ * A date/time picker powered by flatpickr, supporting date, time, and datetime modes.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--datetime-picker--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--datetime-picker--height` | Container height | `2em` |
+ * | `--sc-kit--datetime-picker--width` | Container width | `100%` |
+ * | `--sc-kit--datetime-picker--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--datetime-picker--padding--block` | Block (vertical) padding | `0` |
+ * | `--sc-kit--datetime-picker--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--datetime-picker--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--datetime-picker--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--datetime-picker--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--datetime-picker--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--datetime-picker--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--datetime-picker--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--datetime-picker--placeholder--color` | Placeholder color | inherited from border |
+ * | `--sc-kit--datetime-picker--icon--size` | Icon size | `1em` |
+ * | `--sc-kit--datetime-picker--icon--color` | Icon color | inherited from border |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,5 @@
+export declare class DatetimePickerLocalization {
+    get date(): string;
+    get time(): string;
+    get dateTime(): string;
+}

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

@@ -0,0 +1,26 @@
+import { AppLocale } from '../../core/locale';
+export class DatetimePickerLocalization {
+    get date() {
+        return loc.date[AppLocale.current];
+    }
+    get time() {
+        return loc.time[AppLocale.current];
+    }
+    get dateTime() {
+        return loc.dateTime[AppLocale.current];
+    }
+}
+const loc = {
+    date: {
+        en: 'Date',
+        no: 'Dato'
+    },
+    time: {
+        en: 'Time',
+        no: 'Tid'
+    },
+    dateTime: {
+        en: 'Date and time',
+        no: 'Dato og tid'
+    }
+};

package/dist/ui/datetime-picker/flatpickr-theme.d.ts

@@ -0,0 +1 @@
+export declare const applyFlatpickrTheme: (isDark: boolean) => void;

package/dist/ui/datetime-picker/flatpickr-theme.js

@@ -0,0 +1,13 @@
+import airbnbTheme from 'flatpickr/dist/themes/airbnb.css?inline';
+import darkTheme from 'flatpickr/dist/themes/dark.css?inline';
+let styleEl = null;
+export const applyFlatpickrTheme = (isDark) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = isDark ? darkTheme : airbnbTheme;
+};

package/dist/ui/datetime-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatetimePicker } from './cmp.datetime-picker.svelte';
+export type { DatetimePickerMode, DatetimePickerNoValueHandler, DatetimePickerOptions } from './types';

package/dist/ui/datetime-picker/index.js

@@ -0,0 +1 @@
+export { default as DatetimePicker } from './cmp.datetime-picker.svelte';

package/dist/ui/datetime-picker/types.d.ts

@@ -0,0 +1,16 @@
+export type LikeDate = string | number | Date;
+export type PickerFormat = {
+    picker: string;
+    enableTime: boolean;
+    showCalendar: boolean;
+};
+export type DatetimePickerMode = 'datetime' | 'date' | 'date-keeping-time' | 'time';
+export type DatetimePickerNoValueHandler = 'reset-to-now' | 'allow-empty' | Date;
+export type DatetimePickerOptions = {
+    /** @default 'datetime' */
+    mode?: DatetimePickerMode;
+    /** @default 'reset-to-now' */
+    noValueHandler?: DatetimePickerNoValueHandler;
+    minDate?: Date;
+    maxDate?: Date;
+};

package/dist/ui/datetime-picker/types.js

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

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

@@ -1,6 +1,7 @@
 import type { ButtonVariant } from '../button/resources/types';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** @default 'button' */
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -3,7 +3,7 @@ import { isIgnored } from './dropdown-ignore';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import { createPopper } from '@popperjs/core';
 import { untrack } from 'svelte';
-let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, isOpenRequested, matchTriggerWidth = false, on, children, trigger } = $props();
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, isOpenRequested, matchTriggerWidth = false, panel = true, on, children, trigger } = $props();
 let opened = $state(false);
 let dropdownEl = $state(null);
 let actualPlacement = $state(untrack(() => position));
@@ -35,17 +35,17 @@ $effect(() => {
         on?.closed?.();
     }
 });
-$effect(() => untrack(() => {
+untrack(() => {
     if (isOpenRequested) {
         open();
     }
-}));
+});
 $effect(() => {
     return () => {
-        window.removeEventListener('click', handleOutsideClick, true);
+        window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
     };
 });
-const handleOutsideClick = (event) => {
+const handleOutsidePointerDown = (event) => {
     if (dropdownEl?.contains(event.target)) {
         return;
     }
@@ -53,11 +53,11 @@ const handleOutsideClick = (event) => {
 };
 const open = () => {
     opened = true;
-    window.addEventListener('click', handleOutsideClick, true);
+    window.addEventListener('pointerdown', handleOutsidePointerDown, true);
 };
 const close = () => {
     opened = false;
-    window.removeEventListener('click', handleOutsideClick, true);
+    window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
 };
 const handleClick = (event) => {
     event.stopPropagation();
@@ -154,7 +154,7 @@ const initPopper = (node) => {
   </button>
   {#if opened}
     <div use:initPopper class="dropdown__popper" data-placement={actualPlacement} role="tooltip" tabindex="-1">
-      <div class="dropdown__content" class:dropdown__content--match-width={matchTriggerWidth}>
+      <div class="dropdown__content" class:dropdown__content--match-width={matchTriggerWidth} class:dropdown__content--panel={panel}>
         {@render children()}
       </div>
     </div>
@@ -163,12 +163,15 @@ const initPopper = (node) => {
 
 <!--
 @component
-A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, imperative open/close control, and optional trigger-width matching.
+A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, imperative open/close control, and optional trigger-width matching. Includes built-in panel styling (background, shadow, radius) enabled by default.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--dropdown--width` | Trigger element width | `auto` |
+| `--sc-kit--dropdown--content--background` | Content background | light-dark white/gray-900 |
+| `--sc-kit--dropdown--content--box-shadow` | Content shadow | `0 2px 10px` light/dark |
+| `--sc-kit--dropdown--content--border-radius` | Content corner radius | `0` |
 -->
 
 <style>.dropdown-backdrop {
@@ -180,6 +183,9 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
 
 .dropdown {
   --_dropdown--width: var(--sc-kit--dropdown--width, auto);
+  --_dropdown--content--background: var(--sc-kit--dropdown--content--background);
+  --_dropdown--content--box-shadow: var(--sc-kit--dropdown--content--box-shadow);
+  --_dropdown--content--border-radius: var(--sc-kit--dropdown--content--border-radius);
   height: 100%;
   width: var(--_dropdown--width);
   -webkit-user-drag: none;
@@ -250,10 +256,18 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
   width: max-content;
   transform-origin: var(--_dd-origin-x) var(--_dd-origin-y);
   animation: dropdown-appear 150ms cubic-bezier(0, 0, 0.2, 1) both;
+  background: var(--_dropdown--content--background);
+  box-shadow: var(--_dropdown--content--box-shadow);
+  border-radius: var(--_dropdown--content--border-radius);
 }
 .dropdown__content--match-width {
   width: 100%;
 }
+.dropdown__content--panel {
+  --_dropdown--content--background: var(--sc-kit--dropdown--content--background, light-dark(#ffffff, #1c1c1c));
+  --_dropdown--content--box-shadow: var(--sc-kit--dropdown--content--box-shadow, 0 2px 10px light-dark(rgb(0 0 0 / 15%), rgb(255 255 255 / 20%)));
+  --_dropdown--content--border-radius: var(--sc-kit--dropdown--content--border-radius, 0);
+}
 .dropdown :global([data-popper-escaped]) {
   visibility: hidden !important;
 }

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

@@ -8,7 +8,7 @@ type Props = {
     keepDropdownOpen?: boolean;
     /** Use `position: fixed` for the Popper strategy (useful inside overflow containers) */
     fixedPosition?: boolean;
-    /** Distance in px between the trigger and the dropdown content @default 8 */
+    /** Distance in px between the trigger and the dropdown content @default 4 */
     offset?: number;
     /** Padding in px from the viewport boundary @default 8 */
     boundaryMargin?: number;
@@ -18,6 +18,8 @@ type Props = {
     isOpenRequested?: boolean;
     /** Make the popper content match the trigger element width */
     matchTriggerWidth?: boolean;
+    /** Apply content styling (background, box-shadow, border-radius) @default true */
+    panel?: boolean;
     on?: {
         opened?: () => void;
         closed?: () => void;
@@ -31,12 +33,15 @@ type Props = {
     trigger?: Snippet;
 };
 /**
- * A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, imperative open/close control, and optional trigger-width matching.
+ * A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, imperative open/close control, and optional trigger-width matching. Includes built-in panel styling (background, shadow, radius) enabled by default.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--dropdown--width` | Trigger element width | `auto` |
+ * | `--sc-kit--dropdown--content--background` | Content background | light-dark white/gray-900 |
+ * | `--sc-kit--dropdown--content--box-shadow` | Content shadow | `0 2px 10px` light/dark |
+ * | `--sc-kit--dropdown--content--border-radius` | Content corner radius | `0` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,5 +1,4 @@
 export { default as Dropdown } from './cmp.dropdown.svelte';
 export { default as DropdownItem } from './cmp.dropdown-item.svelte';
-export { default as DropdownPanel } from './cmp.dropdown-panel.svelte';
 export type { Placement as DropdownPosition } from '@popperjs/core';
 export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dropdown/index.js

@@ -1,4 +1,3 @@
 export { default as Dropdown } from './cmp.dropdown.svelte';
 export { default as DropdownItem } from './cmp.dropdown-item.svelte';
-export { default as DropdownPanel } from './cmp.dropdown-panel.svelte';
 export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -61,7 +61,7 @@ opposite side of the text from the primary icon.
   --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color, var(--_icon-text--root--color));
   --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
   --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
-  --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--text--font-size));
+  --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--icon--font-size));
   --_icon-text--secondary-icon--color: var(--sc-kit--icon-text--secondary-icon--color, var(--_icon-text--root--color));
   display: flex;
   align-items: center;

package/dist/ui/inputs/input/cmp.input-validatable.svelte.d.ts

@@ -7,6 +7,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
         /** Form validation handler instance */
         handler: FormValidationHandler<T>;
         id?: string;
+        /** @default 'text' */
         type?: "text" | "password";
         /** Debounce delay in ms for input/change handlers @default 0 */
         debounce?: number;

package/dist/ui/inputs/input/cmp.input.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | null | undefined;
+    /** @default 'text' */
     type?: 'text' | 'password';
     name?: string;
     id?: string | null;

package/dist/ui/inputs/textarea/cmp.textarea-validatable.svelte.d.ts

@@ -10,10 +10,11 @@ declare function $$render<T extends Record<string, unknown>>(): {
         debounce?: number;
         /** Hide placeholder text when focused @default true */
         hidePlaceholderOnFocus?: boolean;
-        /** Fire submit callback on Enter key */
+        /** Fire submit callback on Enter key @default false */
         submitOnEnter?: boolean;
         /** Minimum visible rows @default 0 */
         rows?: number;
+        /** @default 50000 */
         maxlength?: number;
         id?: string;
         disabled?: boolean;

package/dist/ui/inputs/textarea/cmp.textarea.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     singleLine?: boolean;
     /** Minimum visible rows (0 = auto height) @default 0 */
     rows?: number;
+    /** @default 50000 */
     maxlength?: number;
     id?: string;
     disabled?: boolean;