@streamscloud/kit 0.2.4 → 0.2.5

package/dist/ui/placeholder/cmp.placeholder.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+const { imageSrc, title, body, actions } = $props();
+</script>
+
+<div class="placeholder">
+  <div class="placeholder__body">
+    <div class="placeholder__image">
+      <img src={imageSrc} alt="" />
+    </div>
+    <div class="placeholder__text">
+      <div class="placeholder__text-title">{@html title ? HtmlHelper.sanitizeHtml(title) : ''}</div>
+      <span class="placeholder__text-body">{body}</span>
+    </div>
+  </div>
+  <div class="placeholder-actions">
+    {#if actions}
+      {@render actions()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+Displays an empty-state placeholder with optional image, title, body text, and action buttons.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--placeholder--flex-direction` | Body layout direction | `column` |
+| `--sc-kit--placeholder--margin-top` | Top margin | `5.25em` |
+-->
+
+<style>.placeholder {
+  --_placeholder--flex-direction: var(--sc-kit--placeholder--flex-direction, column);
+  --_placeholder--margin-top: var(--sc-kit--placeholder--margin-top, 5.25em);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: var(--_placeholder--margin-top);
+}
+.placeholder__body {
+  display: flex;
+  flex-direction: var(--_placeholder--flex-direction);
+  align-items: center;
+}
+.placeholder__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3125em;
+  margin-bottom: 3.125em;
+}
+.placeholder__text-title {
+  font-size: 2em;
+  font-weight: 500;
+  text-align: center;
+}
+.placeholder__text-title :global(span) {
+  color: light-dark(#144ab0, #5a8dec);
+}
+.placeholder__text-body {
+  font-size: 1.125em;
+  color: light-dark(#6b7280, #d1d5db);
+  font-weight: 300;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    imageSrc?: string;
+    title?: string;
+    body: string;
+    actions?: Snippet;
+};
+/**
+ * Displays an empty-state placeholder with optional image, title, body text, and action buttons.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--placeholder--flex-direction` | Body layout direction | `column` |
+ * | `--sc-kit--placeholder--margin-top` | Top margin | `5.25em` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/placeholder/index.js

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

package/dist/ui/selects/_multiselect.scss

@@ -140,7 +140,7 @@
 
   &__icon {
     --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: 1.25em;
+    --sc-kit--icon--size: #{functions.em(20)};
     display: flex;
     align-items: center;
 
@@ -258,7 +258,7 @@
 
   &__deselect {
     --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: #{functions.rem(20)};
+    --sc-kit--icon--size: #{functions.em(20)};
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -266,7 +266,7 @@
 
   &__drag-handle {
     --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: #{functions.rem(16)};
+    --sc-kit--icon--size: #{functions.em(16)};
     cursor: grab;
     display: flex;
     align-items: center;

package/dist/ui/selects/_singleselect.scss

@@ -114,7 +114,7 @@
 
   &__icon {
     --sc-kit--icon--color: var(--_singleselect--icon--color);
-    --sc-kit--icon--size: 1.25em;
+    --sc-kit--icon--size: #{functions.em(20)};
     display: flex;
     align-items: center;
 

package/dist/ui/selects/cmp.multiselect.svelte

@@ -514,14 +514,14 @@ Multi-value select dropdown built on svelte-select with fuzzy search. Supports e
 }
 .multiselect-tags__deselect {
   --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--size: 1.25em;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .multiselect-tags__drag-handle {
   --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--size: 1em;
   cursor: grab;
   display: flex;
   align-items: center;

package/dist/ui/selects/cmp.search-multiselect.svelte

@@ -510,14 +510,14 @@ Uses the same `--sc-kit--multiselect--*` variables as the Multiselect component.
 }
 .search-multiselect-tags__deselect {
   --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--size: 1.25em;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .search-multiselect-tags__drag-handle {
   --sc-kit--icon--color: var(--_multiselect--icon--color);
-  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--size: 1em;
   cursor: grab;
   display: flex;
   align-items: center;

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

@@ -0,0 +1,103 @@
+<script lang="ts">const { isOn, label = '', disabled = false, on } = $props();
+const toggleState = () => {
+    if (disabled) {
+        return;
+    }
+    on?.change(!isOn);
+};
+</script>
+
+<div class="toggle" class:toggle--disabled={disabled} onclick={toggleState} onkeydown={() => {}} role="none">
+  <button type="button" aria-label="Toggle" class="toggle-switch">
+    <input type="checkbox" class="toggle-switch__checkbox" checked={isOn} disabled={disabled} />
+    <span class="toggle-switch__slider"></span>
+  </button>
+  {#if label}
+    <span class="toggle__label">{label}</span>
+  {/if}
+</div>
+
+<!--
+@component
+A toggle switch for boolean on/off states with optional label.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
+| `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
+| `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
+| `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
+| `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
+| `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
+| `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+-->
+
+<style>.toggle {
+  --_toggle--color: var(--sc-kit--toggle--color, light-dark(#144ab0, #5a8dec));
+  --_toggle--root--font-size: var(--sc-kit--toggle--root--font-size, 1rem);
+  --_toggle--label--font-size: var(--sc-kit--toggle--label--font-size, 1em);
+  --_toggle--switch--font-size: var(--sc-kit--toggle--switch--font-size, 1em);
+  --_toggle--switch--width: var(--sc-kit--toggle--switch--width, 2.5em);
+  --_toggle--switch--height: var(--sc-kit--toggle--switch--height, 1.375em);
+  --_toggle--switch--border-radius: var(--sc-kit--toggle--switch--border-radius, var(--_toggle--switch--height));
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: var(--_toggle--root--font-size);
+}
+.toggle--disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.toggle .toggle-switch {
+  font-size: var(--_toggle--switch--font-size);
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  width: var(--_toggle--switch--width);
+  min-width: var(--_toggle--switch--width);
+  height: var(--_toggle--switch--height);
+}
+.toggle .toggle-switch .toggle-switch__checkbox {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider {
+  background-color: var(--_toggle--color);
+}
+.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider:before {
+  transform: translateX(calc(var(--_toggle--switch--width) - var(--_toggle--switch--height)));
+}
+.toggle .toggle-switch .toggle-switch__checkbox:focus + .toggle-switch__slider {
+  box-shadow: 0 0 1px var(--_toggle--color);
+}
+.toggle .toggle-switch .toggle-switch__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: light-dark(#d1d5db, #4b5563);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--_toggle--switch--border-radius);
+  margin: 0;
+}
+.toggle .toggle-switch .toggle-switch__slider:before {
+  position: absolute;
+  content: "";
+  background-color: #ffffff;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 50%;
+  height: calc(var(--_toggle--switch--height) - 2 * 0.125em);
+  width: calc(var(--_toggle--switch--height) - 2 * 0.125em);
+  left: 0.125em;
+  bottom: 0.125em;
+}
+.toggle .toggle__label {
+  margin-left: 0.875em;
+  font-size: var(--_toggle--label--font-size);
+  cursor: inherit;
+  user-select: none;
+}</style>

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

@@ -0,0 +1,25 @@
+type Props = {
+    isOn: boolean;
+    label?: string;
+    disabled?: boolean;
+    on?: {
+        change: (value: boolean) => void;
+    };
+};
+/**
+ * A toggle switch for boolean on/off states with optional label.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
+ * | `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
+ * | `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
+ * | `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
+ * | `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
+ * | `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
+ * | `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/toggle/index.js

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

package/dist/ui/tooltip/cmp.tooltip.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { createPopper } from '@popperjs/core';
+let { position = 'bottom-start', ignoreClick = false, disabled = false, fixedPosition = false, offset = 8, boundaryMargin = 8, children, trigger } = $props();
+let open = $state(false);
+let hidden = $state(false);
+let triggerRef = $state(null);
+let openedByHover = false;
+let popper;
+let _blocked = false;
+const toggleHandler = (ev) => {
+    if (ignoreClick) {
+        return;
+    }
+    const wasOpenedByHover = openedByHover;
+    openedByHover = false;
+    if (open && wasOpenedByHover) {
+        return;
+    }
+    if (ev.type === 'focusin' && !open) {
+        _blocked = true;
+        setTimeout(() => (_blocked = false), 250);
+    }
+    open = ev.type === 'click' && !_blocked ? !open : true;
+};
+const showHandlerOnHover = (ev) => {
+    if (open && !openedByHover) {
+        return;
+    }
+    if (ev.type === 'mouseenter') {
+        openedByHover = true;
+        open = true;
+    }
+};
+const hideHandler = (ev) => {
+    if (ignoreClick) {
+        return;
+    }
+    setTimeout(() => {
+        if (ev.type === 'focusout' && shouldBeHidden(ev)) {
+            hidden = true;
+        }
+        setTimeout(() => {
+            if (shouldBeHidden(ev)) {
+                open = false;
+            }
+        }, 100);
+    }, 50);
+};
+const hideHandlerOnHover = (ev) => {
+    if (!openedByHover) {
+        return;
+    }
+    if (ev.type === 'mouseleave' && openedByHover) {
+        open = false;
+    }
+    openedByHover = false;
+};
+const shouldBeHidden = (ev) => {
+    const hasFocus = (el) => !!el?.contains && el.contains(document.activeElement);
+    if (ev.type === 'focusout') {
+        if (hasFocus(ev.target)) {
+            return false;
+        }
+    }
+    return true;
+};
+$effect(() => {
+    popper?.setOptions({ placement: position });
+});
+$effect(() => {
+    if (open) {
+        hidden = false;
+    }
+});
+const init = (node, _triggerEl) => {
+    popper = createPopper(_triggerEl, node, {
+        placement: position,
+        strategy: fixedPosition ? 'fixed' : 'absolute',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: () => [0, offset]
+                }
+            },
+            { name: 'eventListeners', enabled: open },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: {
+                    boundary: document.body,
+                    padding: boundaryMargin
+                }
+            }
+        ]
+    });
+    return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+</script>
+
+<div
+  class="tooltip"
+  class:tooltip--disabled={disabled}
+  onclick={(e) => e.stopPropagation()}
+  onkeydown={() => {}}
+  onfocusout={hideHandler}
+  onmouseenter={showHandlerOnHover}
+  onmouseleave={hideHandlerOnHover}
+  role="none">
+  <button type="button" class="tooltip__trigger" bind:this={triggerRef} onclick={toggleHandler} data-role="tooltip-trigger">
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+  {#if open}
+    <div use:init={triggerRef} class="tooltip__content" class:tooltip__content--hidden={hidden} role="tooltip" tabindex="-1">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+A tooltip/popover that positions content relative to a trigger element using Popper.js.
+Supports hover-only mode, click toggle, and configurable placement.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--tooltip--background-color` | Tooltip background | light-dark white/gray-900 |
+| `--sc-kit--tooltip--border-radius` | Corner radius | `0` |
+| `--sc-kit--tooltip--box-shadow` | Drop shadow | `0 2px 10px` light-dark |
+-->
+
+<style>.tooltip {
+  --_tooltip--background-color: var(--sc-kit--tooltip--background-color, light-dark(#ffffff, #1c1c1c));
+  --_tooltip--border-radius: var(--sc-kit--tooltip--border-radius, 0);
+  --_tooltip--box-shadow: var(--sc-kit--tooltip--box-shadow, 0 2px 10px light-dark(rgb(0 0 0 / 15%), rgb(255 255 255 / 20%)));
+  height: 100%;
+  display: inline-block;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.tooltip :global([contenteditable]) {
+  user-select: text;
+}
+.tooltip__trigger {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+.tooltip--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.tooltip__content {
+  box-shadow: var(--_tooltip--box-shadow);
+  background: var(--_tooltip--background-color);
+  width: max-content;
+  z-index: 999;
+  border-radius: var(--_tooltip--border-radius);
+  animation: tooltip-appear 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.tooltip__content--hidden {
+  opacity: 0;
+}
+.tooltip :global([data-popper-escaped]) {
+  visibility: hidden !important;
+}
+
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}</style>

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

@@ -0,0 +1,31 @@
+import type { TooltipPosition } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** @default 'bottom-start' */
+    position?: TooltipPosition;
+    /** Tooltip will be activated on hover only */
+    ignoreClick?: boolean;
+    disabled?: boolean;
+    /** Use when tooltip appears in a fixed container to prevent unnecessary calculations */
+    fixedPosition?: boolean;
+    /** Offset from tooltip trigger @default 8 */
+    offset?: number;
+    /** Additional margin from document.body to prevent sticking to screen edges @default 8 */
+    boundaryMargin?: number;
+    children: Snippet;
+    trigger: Snippet;
+};
+/**
+ * A tooltip/popover that positions content relative to a trigger element using Popper.js.
+ * Supports hover-only mode, click toggle, and configurable placement.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--tooltip--background-color` | Tooltip background | light-dark white/gray-900 |
+ * | `--sc-kit--tooltip--border-radius` | Corner radius | `0` |
+ * | `--sc-kit--tooltip--box-shadow` | Drop shadow | `0 2px 10px` light-dark |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './cmp.tooltip.svelte';
+export type { TooltipPosition } from './types';

package/dist/ui/tooltip/index.js

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

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

@@ -0,0 +1,2 @@
+import type { Placement } from '@popperjs/core';
+export type TooltipPosition = Placement;

package/dist/ui/tooltip/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -85,6 +85,10 @@
       "types": "./dist/core/validation/index.d.ts",
       "svelte": "./dist/core/validation/index.js"
     },
+    "./ui/badge": {
+      "types": "./dist/ui/badge/index.d.ts",
+      "svelte": "./dist/ui/badge/index.js"
+    },
     "./ui/button": {
       "types": "./dist/ui/button/index.d.ts",
       "svelte": "./dist/ui/button/index.js"
@@ -93,14 +97,26 @@
       "types": "./dist/ui/card-actions/index.d.ts",
       "svelte": "./dist/ui/card-actions/index.js"
     },
+    "./ui/checkbox": {
+      "types": "./dist/ui/checkbox/index.d.ts",
+      "svelte": "./dist/ui/checkbox/index.js"
+    },
     "./ui/color-picker": {
       "types": "./dist/ui/color-picker/index.d.ts",
       "svelte": "./dist/ui/color-picker/index.js"
     },
+    "./ui/confirmation-dialog": {
+      "types": "./dist/ui/confirmation-dialog/index.d.ts",
+      "svelte": "./dist/ui/confirmation-dialog/index.js"
+    },
     "./ui/cropper": {
       "types": "./dist/ui/cropper/img-cropper/index.d.ts",
       "svelte": "./dist/ui/cropper/img-cropper/index.js"
     },
+    "./ui/datetime-picker": {
+      "types": "./dist/ui/datetime-picker/index.d.ts",
+      "svelte": "./dist/ui/datetime-picker/index.js"
+    },
     "./ui/dialog": {
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
@@ -181,6 +197,10 @@
       "types": "./dist/ui/player/providers/index.d.ts",
       "svelte": "./dist/ui/player/providers/index.js"
     },
+    "./ui/placeholder": {
+      "types": "./dist/ui/placeholder/index.d.ts",
+      "svelte": "./dist/ui/placeholder/index.js"
+    },
     "./ui/progress": {
       "types": "./dist/ui/progress/index.d.ts",
       "svelte": "./dist/ui/progress/index.js"
@@ -205,6 +225,14 @@
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"
     },
+    "./ui/toggle": {
+      "types": "./dist/ui/toggle/index.d.ts",
+      "svelte": "./dist/ui/toggle/index.js"
+    },
+    "./ui/tooltip": {
+      "types": "./dist/ui/tooltip/index.d.ts",
+      "svelte": "./dist/ui/tooltip/index.js"
+    },
     "./ui/validatable": {
       "types": "./dist/ui/validatable/index.d.ts",
       "svelte": "./dist/ui/validatable/index.js"
@@ -249,6 +277,7 @@
     "cropperjs": "^2.1.0",
     "dequal": "^2.0.0",
     "dompurify": "^3.3.0",
+    "flatpickr": "^4.6.13",
     "fuse.js": "^7.1.0",
     "mime": "^4.1.0",
     "nanoid": "^5.1.6",
@@ -287,6 +316,7 @@
     "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-svelte": "^3.15.0",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "flatpickr": "^4.6.13",
     "fuse.js": "^7.1.0",
     "globals": "^17.3.0",
     "mime": "^4.1.0",

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

@@ -1,29 +0,0 @@
-<script lang="ts">const { children } = $props();
-export {};
-</script>
-
-<div class="dropdown-panel">
-  {@render children()}
-</div>
-
-<!--
-@component
-Visual panel wrapper for dropdown content — provides background, box-shadow, and border-radius.
-Typically used as a direct child of `Dropdown`.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--dropdown-panel--background` | Panel background | light-dark white/gray-900 |
-| `--sc-kit--dropdown-panel--box-shadow` | Panel shadow | `0 2px 10px` light rgb(0 0 0 / 15%), dark rgb(255 255 255 / 20%) |
-| `--sc-kit--dropdown-panel--border-radius` | Corner radius | `0` |
--->
-
-<style>.dropdown-panel {
-  --_dropdown-panel--background: var(--sc-kit--dropdown-panel--background, light-dark(#ffffff, #1c1c1c));
-  --_dropdown-panel--box-shadow: var(--sc-kit--dropdown-panel--box-shadow, 0 2px 10px light-dark(rgb(0 0 0 / 15%), rgb(255 255 255 / 20%)));
-  --_dropdown-panel--border-radius: var(--sc-kit--dropdown-panel--border-radius, 0);
-  background: var(--_dropdown-panel--background);
-  box-shadow: var(--_dropdown-panel--box-shadow);
-  border-radius: var(--_dropdown-panel--border-radius);
-}</style>

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

@@ -1,18 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-/**
- * Visual panel wrapper for dropdown content — provides background, box-shadow, and border-radius.
- * Typically used as a direct child of `Dropdown`.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--dropdown-panel--background` | Panel background | light-dark white/gray-900 |
- * | `--sc-kit--dropdown-panel--box-shadow` | Panel shadow | `0 2px 10px` light rgb(0 0 0 / 15%), dark rgb(255 255 255 / 20%) |
- * | `--sc-kit--dropdown-panel--border-radius` | Corner radius | `0` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;