@streamscloud/kit 0.2.1 → 0.2.3

package/dist/styles/_input.scss

@@ -0,0 +1,98 @@
+@use 'colors';
+@use 'functions';
+@use 'transitions';
+
+@mixin input-container() {
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, #{functions.em(32)});
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
+  --_input--border-color: var(--_--input--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --_input--border-radius: var(--_--input--border-radius, #{functions.em(4)});
+
+  --_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, #{functions.em(14)});
+  --_input--text--color: var(--_--input--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
+
+  --_input--padding--inline: var(--_--input--padding--inline, #{functions.em(8)});
+  --_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);
+
+  @include input-accent-shadow;
+
+  &--disabled {
+    background-color: var(--_input--background--disabled);
+    cursor: default;
+  }
+}
+
+@mixin input-text() {
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+
+  &::placeholder {
+    color: var(--_input--placeholder--color);
+  }
+
+  &:-webkit-autofill {
+    -webkit-text-fill-color: var(--_input--text--color) !important;
+  }
+}
+
+@mixin input-icon() {
+  color: var(--_input--icon--color);
+  font-size: var(--_input--icon--size);
+}
+
+@mixin input-accent-shadow() {
+  --_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);
+  @include transitions.transition(box-shadow);
+
+  &:focus,
+  &:focus-within {
+    --_input--default-shadow-color: var(--_input--accent-color);
+  }
+}
+
+@mixin input-accented($color: null) {
+  @if ($color) {
+    --_input--explicit-shadow-color: #{$color};
+  } @else {
+    --_input--explicit-shadow-color: var(--_input--accent-color);
+  }
+}
+
+@mixin input-borderless() {
+  --_input--border-color: transparent;
+  --_input--background: transparent;
+  --_input--background--disabled: transparent;
+  --_input--accent-color: transparent;
+  --_input--explicit-shadow-color: transparent;
+  --_input--height: auto;
+}

package/dist/styles/_mixins.scss

@@ -70,14 +70,14 @@
   max-height: 100%;
 }
 
-@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333)), $track-color: var(--scrollbar--track-color, transparent)) {
+@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
   --_cross-browser-scrollbar--thumb-color: #{$thumb-color};
   --_cross-browser-scrollbar--track-color: #{$track-color};
 
   @include _cross-browser-scrollbar;
 }
 
-@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333)), $track-color: var(--scrollbar--track-color, transparent)) {
+@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 

package/dist/styles/reset.css

@@ -121,7 +121,7 @@ input[type=number] {
 textarea {
   vertical-align: top;
   resize: vertical;
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 textarea::-webkit-scrollbar {

package/dist/ui/button/resources/button-base.svelte

@@ -20,7 +20,7 @@ export {};
   --_button--font--color--active: var(--sc-kit--button--font--color--active, var(--_button--font--color));
   --_button--font--color--disabled: var(--sc-kit--button--font--color--disabled, var(--_button--font--color));
   --_button--font-weight: var(--sc-kit--button--font-weight, 400);
-  --_button--text--font-size: var(--sc-kit--button--text--font-size, 0.75em);
+  --_button--text--font-size: var(--sc-kit--button--text--font-size, 0.875em);
   --_button--icon--font-size: var(--sc-kit--button--icon--font-size, 1em);
   --_button--justify-content: var(--sc-kit--button--justify-content, center);
   --_button--background: var(--sc-kit--button--background, white);
@@ -61,7 +61,7 @@ export {};
   width: 100%;
   text-align: center;
   font-size: var(--_button--text--font-size);
-  --sc-kit--icon-text--global--font-size: 1rem;
+  --sc-kit--icon-text--root--font-size: 1rem;
   --sc-kit--icon-text--text--font-size: var(--_button--text--font-size);
   --sc-kit--icon-text--icon--font-size: var(--_button--icon--font-size);
   --sc-kit--icon-text--justify-content: var(--_button--justify-content);

package/dist/ui/button/resources/button-theme.svelte

@@ -38,7 +38,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--primary--background--disabled, #91b3f3);
   --sc-kit--button--border: var(--sc-kit--button--primary--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--primary--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, inset 0px var(--_button--shadow-y, 2px) 0px 0px rgba(255, 255, 255, 0.3));
 }
 .button-theme--standard {
   --sc-kit--button--font--color: var(--sc-kit--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
@@ -68,7 +68,7 @@ export {};
     --sc-kit--button--standard--border--disabled,
     1px solid light-dark(#e5e7eb, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(--sc-kit--button--standard--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--standard--box-shadow, none);
 }
 .button-theme--white {
   --sc-kit--button--font--color: var(--sc-kit--button--white--font--color, light-dark(#2e2e2e, #ffffff));
@@ -92,7 +92,7 @@ export {};
   );
   --sc-kit--button--border: var(--sc-kit--button--white--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--white--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, none);
 }
 .button-theme--gray {
   --sc-kit--button--font--color: var(--sc-kit--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
@@ -119,7 +119,7 @@ export {};
     --sc-kit--button--gray--border--disabled,
     1px solid light-dark(#e5e7eb, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, none);
 }
 .button-theme--green {
   --sc-kit--button--font--color: var(--sc-kit--button--green--font--color, light-dark(#0cce6b, #ffffff));
@@ -149,7 +149,7 @@ export {};
     --sc-kit--button--green--border--disabled,
     1px solid light-dark(#0cce6b, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, none);
 }
 .button-theme--black {
   --sc-kit--button--font--color: var(--sc-kit--button--black--font--color, light-dark(#ffffff, #2e2e2e));
@@ -173,7 +173,7 @@ export {};
   );
   --sc-kit--button--border: var(--sc-kit--button--black--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--black--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, none);
 }
 .button-theme--alert {
   --sc-kit--button--font--color: var(--sc-kit--button--alert--font--color, #ffffff);
@@ -185,7 +185,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--alert--background--disabled, #f6a7b1);
   --sc-kit--button--border: var(--sc-kit--button--alert--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--alert--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, none);
 }
 .button-theme--warning {
   --sc-kit--button--font--color: var(--sc-kit--button--warning--font--color, #ffffff);
@@ -197,7 +197,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--warning--background--disabled, #fcd34d);
   --sc-kit--button--border: var(--sc-kit--button--warning--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--warning--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, none);
 }
 .button-theme--text-only {
   --sc-kit--button--font--color: var(--sc-kit--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));
@@ -318,15 +318,18 @@ export {};
 }
 .button-theme--size-standard {
   --sc-kit--button--height: 2em;
-  --sc-kit--button--text--font-size: 0.75em;
 }
 .button-theme--size-large {
-  --sc-kit--button--height: 3em;
-  --sc-kit--button--font-weight: 500;
-  --sc-kit--icon--stroke-width: 0.4;
-  --sc-kit--button--text--font-size: 0.9375em;
+  --sc-kit--button--height: 2.5em;
+  --sc-kit--button--text--font-size: 1.125em;
+  --sc-kit--button--icon--font-size: 1.25em;
+  --sc-kit--button--padding--horizontal: 1.5em;
+  --sc-kit--button--border-radius: 0.375em;
+  --_button--shadow-y: 3px;
 }
 .button-theme--size-small {
-  --sc-kit--button--height: 1.5em;
-  --sc-kit--button--text--font-size: 0.625em;
+  --sc-kit--button--height: 1.75em;
+  --sc-kit--button--text--font-size: 0.75em;
+  --sc-kit--button--padding--horizontal: 0.75em;
+  --_button--shadow-y: 1.5px;
 }</style>

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { ColorHelper } from '../../core/utils';
 import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
-import { default as InputStub } from './cmp.input-stub.svelte';
+import { Input } from '../inputs';
 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';
@@ -55,7 +55,7 @@ const onColorPickerInput = ({ hex }) => {
         {#if children}
           {@render children()}
         {:else}
-          <InputStub
+          <Input
             value={value || ''}
             on={{}}
             inert={true}
@@ -85,7 +85,7 @@ const onColorPickerInput = ({ hex }) => {
                 </button>
               {/if}
             {/snippet}
-          </InputStub>
+          </Input>
         {/if}
       </div>
     {/snippet}
@@ -100,15 +100,6 @@ const onColorPickerInput = ({ hex }) => {
 @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).
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `value` | `string \| null \| undefined` | — | Current color value (any CSS color format) |
-| `enableReset` | `boolean` | `false` | Show dismiss icon to clear the value |
-| `on.change` | `(value: string) => void` | — | Fires when color changes |
-| `children` | `Snippet` | — | Custom trigger snippet (replaces default preview) |
-| `defaultPreviewIcon` | `Snippet` | — | Custom icon in the default preview trigger |
-
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

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

@@ -1,25 +1,19 @@
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | null | undefined;
+    /** Show dismiss icon to clear the color value */
     enableReset?: boolean;
     on?: {
         change?: (value: string) => void;
     };
+    /** Custom trigger snippet (replaces default color preview) */
     children?: Snippet;
+    /** Custom icon in the default preview trigger */
     defaultPreviewIcon?: 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).
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `value` | `string \| null \| undefined` | — | Current color value (any CSS color format) |
- * | `enableReset` | `boolean` | `false` | Show dismiss icon to clear the value |
- * | `on.change` | `(value: string) => void` | — | Fires when color changes |
- * | `children` | `Snippet` | — | Custom trigger snippet (replaces default preview) |
- * | `defaultPreviewIcon` | `Snippet` | — | Custom icon in the default preview trigger |
- *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte

@@ -122,7 +122,7 @@ picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
   align-items: center;
   min-width: 0;
   gap: 0.5rem;
-  --sc-kit--icon-text--icon--size: 1rem;
+  --sc-kit--icon-text--icon--font-size: 1rem;
 }
 .img-cropper-toolbar__button {
   font-size: 0.75rem;

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

@@ -104,7 +104,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   min-height: 0;
   overflow-y: auto;
   padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .dialog__body::-webkit-scrollbar {

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

@@ -0,0 +1,93 @@
+<script lang="ts">import { dropdownIgnore } from './dropdown-ignore';
+let { disabled = false, keepDropdownOpen = false, on, children } = $props();
+const handleClick = () => {
+    on?.click?.();
+};
+</script>
+
+<div
+  class="dropdown-item"
+  use:dropdownIgnore={keepDropdownOpen}
+  class:dropdown-item--disabled={disabled}
+  onclick={handleClick}
+  onkeydown={() => ({})}
+  role="none">
+  <div class="dropdown-item__content">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+A single item within a dropdown menu. Supports hover state, disabled state, and separator lines between items.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dropdown-item--min-width` | Minimum item width | `max-content` |
+| `--sc-kit--dropdown-item--font-size` | Content font size | `0.875rem` |
+| `--sc-kit--dropdown-item--padding` | Item padding | `0.625rem 0.875rem` |
+| `--sc-kit--dropdown-item--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--dropdown-item--color--hover` | Text color on hover | light-dark gray-800/white |
+| `--sc-kit--dropdown-item--color--disabled` | Text color when disabled | light-dark neutral-400/neutral-500 |
+| `--sc-kit--dropdown-item--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--dropdown-item--background--hover` | Background on hover | light-dark neutral-100/neutral-800 |
+| `--sc-kit--dropdown-item--separator-color` | Separator line color | light-dark neutral-200/neutral-700 |
+| `--sc-kit--dropdown-item--separator-indent` | Separator horizontal indent | `0.875rem` |
+| `--sc-kit--dropdown-item--text-align` | Text alignment | `left` |
+| `--sc-kit--dropdown-item--border-radius` | Item border radius | `0` |
+-->
+
+<style>.dropdown-item {
+  --_dropdown-item--min-width: var(--sc-kit--dropdown-item--min-width, max-content);
+  --_dropdown-item--font-size: var(--sc-kit--dropdown-item--font-size, 0.875rem);
+  --_dropdown-item--padding: var(--sc-kit--dropdown-item--padding, 0.625rem 0.875rem);
+  --_dropdown-item--color: var(--sc-kit--dropdown-item--color, light-dark(#2e2e2e, #ffffff));
+  --_dropdown-item--color--hover: var(--sc-kit--dropdown-item--color--hover, light-dark(#2e2e2e, #ffffff));
+  --_dropdown-item--color--disabled: var(--sc-kit--dropdown-item--color--disabled, light-dark(#9ca3af, #6b7280));
+  --_dropdown-item--background: var(--sc-kit--dropdown-item--background, light-dark(#ffffff, #1c1c1c));
+  --_dropdown-item--background--hover: var(
+    --sc-kit--dropdown-item--background--hover,
+    light-dark(#f2f2f3, #1f2937)
+  );
+  --_dropdown-item--separator-color: var(--sc-kit--dropdown-item--separator-color, light-dark(#e5e7eb, #374151));
+  --_dropdown-item--text-align: var(--sc-kit--dropdown-item--text-align, left);
+  --_dropdown-item--border-radius: var(--sc-kit--dropdown-item--border-radius, 0);
+  --_dropdown-item--separator-indent: var(--sc-kit--dropdown-item--separator-indent, 0.875rem);
+  cursor: pointer;
+  color: var(--_dropdown-item--color);
+  min-width: var(--_dropdown-item--min-width);
+  position: relative;
+  text-align: var(--_dropdown-item--text-align);
+  background: var(--_dropdown-item--background);
+  border-radius: var(--_dropdown-item--border-radius);
+  display: flex;
+  align-items: center;
+  padding: var(--_dropdown-item--padding);
+}
+.dropdown-item__content {
+  font-size: var(--_dropdown-item--font-size);
+  line-height: 1.2;
+  flex: 1;
+}
+.dropdown-item:before {
+  content: "";
+  display: block;
+  width: calc(100% - 2 * var(--_dropdown-item--separator-indent));
+  height: 1px;
+  background: var(--_dropdown-item--separator-color);
+  position: absolute;
+  bottom: 0;
+  left: var(--_dropdown-item--separator-indent);
+}
+.dropdown-item:last-child:before {
+  display: none;
+}
+.dropdown-item:hover {
+  color: var(--_dropdown-item--color--hover);
+  background: var(--_dropdown-item--background--hover);
+}
+.dropdown-item--disabled {
+  color: var(--_dropdown-item--color--disabled);
+  pointer-events: none;
+}</style>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    disabled?: boolean;
+    /** Prevent dropdown from closing on click */
+    keepDropdownOpen?: boolean;
+    on?: {
+        click?: () => void;
+    };
+    children: Snippet;
+};
+/**
+ * A single item within a dropdown menu. Supports hover state, disabled state, and separator lines between items.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dropdown-item--min-width` | Minimum item width | `max-content` |
+ * | `--sc-kit--dropdown-item--font-size` | Content font size | `0.875rem` |
+ * | `--sc-kit--dropdown-item--padding` | Item padding | `0.625rem 0.875rem` |
+ * | `--sc-kit--dropdown-item--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--dropdown-item--color--hover` | Text color on hover | light-dark gray-800/white |
+ * | `--sc-kit--dropdown-item--color--disabled` | Text color when disabled | light-dark neutral-400/neutral-500 |
+ * | `--sc-kit--dropdown-item--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--dropdown-item--background--hover` | Background on hover | light-dark neutral-100/neutral-800 |
+ * | `--sc-kit--dropdown-item--separator-color` | Separator line color | light-dark neutral-200/neutral-700 |
+ * | `--sc-kit--dropdown-item--separator-indent` | Separator horizontal indent | `0.875rem` |
+ * | `--sc-kit--dropdown-item--text-align` | Text alignment | `left` |
+ * | `--sc-kit--dropdown-item--border-radius` | Item border radius | `0` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,18 @@
+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;

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

@@ -3,9 +3,10 @@ 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 = 8, boundaryMargin = 8, backdrop = false, isOpenRequested, on, children, trigger } = $props();
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, isOpenRequested, matchTriggerWidth = false, on, children, trigger } = $props();
 let opened = $state(false);
 let dropdownEl = $state(null);
+let actualPlacement = $state(untrack(() => position));
 $effect(() => untrack(() => {
     on?.mounted?.({
         toggleOpen: (value) => {
@@ -104,6 +105,23 @@ const initPopper = (node) => {
                     boundary: document.body,
                     padding: boundaryMargin
                 }
+            },
+            {
+                name: 'sameWidth',
+                enabled: matchTriggerWidth,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: ({ state }) => {
+                    state.styles.popper.width = `${state.rects.reference.width}px`;
+                }
+            },
+            {
+                name: 'syncPlacement',
+                enabled: true,
+                phase: 'afterWrite',
+                fn: ({ state }) => {
+                    actualPlacement = state.placement;
+                }
             }
         ]
     });
@@ -135,8 +153,8 @@ const initPopper = (node) => {
     {/if}
   </button>
   {#if opened}
-    <div use:initPopper class="dropdown__popper" role="tooltip" tabindex="-1">
-      <div class="dropdown__content">
+    <div use:initPopper class="dropdown__popper" data-placement={actualPlacement} role="tooltip" tabindex="-1">
+      <div class="dropdown__content" class:dropdown__content--match-width={matchTriggerWidth}>
         {@render children()}
       </div>
     </div>
@@ -145,7 +163,7 @@ const initPopper = (node) => {
 
 <!--
 @component
-A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, and imperative open/close control.
+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.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -183,12 +201,59 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
 }
 .dropdown__popper {
   z-index: 999;
+  --_dd-origin-y: top;
+  --_dd-shift-x: 0;
+  --_dd-shift-y: -4px;
+  --_dd-origin-x: left;
+}
+.dropdown__popper[data-placement=bottom] {
+  --_dd-origin-x: center;
+}
+.dropdown__popper[data-placement=bottom-end] {
+  --_dd-origin-x: right;
+}
+.dropdown__popper[data-placement^=top] {
+  --_dd-origin-y: bottom;
+  --_dd-shift-y: 4px;
+}
+.dropdown__popper[data-placement=top] {
+  --_dd-origin-x: center;
+}
+.dropdown__popper[data-placement=top-end] {
+  --_dd-origin-x: right;
+}
+.dropdown__popper[data-placement^=left] {
+  --_dd-origin-x: right;
+  --_dd-origin-y: top;
+  --_dd-shift-x: 4px;
+  --_dd-shift-y: 0;
+}
+.dropdown__popper[data-placement=left] {
+  --_dd-origin-y: center;
+}
+.dropdown__popper[data-placement=left-end] {
+  --_dd-origin-y: bottom;
+}
+.dropdown__popper[data-placement^=right] {
+  --_dd-origin-x: left;
+  --_dd-origin-y: top;
+  --_dd-shift-x: -4px;
+  --_dd-shift-y: 0;
+}
+.dropdown__popper[data-placement=right] {
+  --_dd-origin-y: center;
+}
+.dropdown__popper[data-placement=right-end] {
+  --_dd-origin-y: bottom;
 }
 .dropdown__content {
   width: max-content;
-  transform-origin: top left;
+  transform-origin: var(--_dd-origin-x) var(--_dd-origin-y);
   animation: dropdown-appear 150ms cubic-bezier(0, 0, 0.2, 1) both;
 }
+.dropdown__content--match-width {
+  width: 100%;
+}
 .dropdown :global([data-popper-escaped]) {
   visibility: hidden !important;
 }
@@ -196,10 +261,10 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
 @keyframes dropdown-appear {
   from {
     opacity: 0;
-    transform: scale(0.95) translateY(-4px);
+    transform: scale(0.95) translate(var(--_dd-shift-x), var(--_dd-shift-y));
   }
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: scale(1) translate(0, 0);
   }
 }</style>

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

@@ -16,6 +16,8 @@ type Props = {
     backdrop?: boolean;
     /** Programmatically request the dropdown to open */
     isOpenRequested?: boolean;
+    /** Make the popper content match the trigger element width */
+    matchTriggerWidth?: boolean;
     on?: {
         opened?: () => void;
         closed?: () => void;
@@ -29,7 +31,7 @@ type Props = {
     trigger?: Snippet;
 };
 /**
- * A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, and imperative open/close control.
+ * 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.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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

@@ -1,3 +1,5 @@
 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';