@ibobbyts/svelte-ui-utils 0.2.11 → 0.2.13

package/README.md

@@ -76,6 +76,14 @@ import { ToastManager, Dropdown, DropdownSearch, Dialog, DataTable } from '@ibob
 Supported positions are `top-left`, `top-center`, `top-right`, `right-center`,
 `bottom-right`, `bottom-center`, `bottom-left`, and `left-center`.
 
+## Dropdown
+
+Dropdown menus default to `placement="auto"` and open toward whichever side of
+the trigger has more available viewport space. The direction is recalculated
+while the menu is open when the viewport is resized or a scroll container
+moves. Set `placement="up"` or `placement="down"` to force a direction. Use
+`fitViewport={true}` as well to constrain the panel height to the chosen side.
+
 ## DropdownSearch
 
 ```svelte
@@ -162,6 +170,98 @@ In multiselect mode, the text input remains a search query. Selecting an item
 adds or removes it from `selectedItems`, clears the query, and emits both
 `onChange` and `onSelectedItemsChange`.
 
+## SortableList
+
+`SortableList` provides controlled vertical HTML5 drag-and-drop ordering. Each
+item has a string `id` (and may contain any additional fields); `getId` can
+project a different string key while retaining that typed item contract. The
+caller owns the item array and receives the reordered array through
+`onReorder`. Use the third snippet argument to attach drag bindings to a
+dedicated handle. `listTag` and `itemTag` can be changed when the list must
+render valid table markup such as direct `<tr>` children under `<tbody>`.
+
+```svelte
+<script lang="ts">
+  import { SortableList } from '@ibobbyts/svelte-ui-utils/sortable-list';
+
+  let items = [{ id: 'a', label: 'First' }, { id: 'b', label: 'Second' }];
+</script>
+
+<SortableList {items} onReorder={(next) => (items = next)}>
+  {#snippet children(item, _index, handle)}
+    <div {...handle} aria-label={`Drag ${item.label}`}>⠿</div>
+    <span>{item.label}</span>
+  {/snippet}
+</SortableList>
+```
+
+Dragging over the target item's upper or lower half displays a before/after
+insertion indicator. Dropping on the same item or while `disabled={true}` is a
+no-op. The component does not persist order or perform rollback; those remain
+the responsibility of the controlled parent.
+
+## OrderedListEditor
+
+`OrderedListEditor` is the shared editor for ordered fields. It renders the
+provided content first, an optional current/select action next, and a trash-icon
+remove action at the far right. Reorder arrows are intentionally not rendered;
+use `SortableList` when drag-and-drop ordering is needed. Set
+`allowRemoveLast={true}` when an empty list is valid.
+
+```svelte
+<script lang="ts">
+  import { OrderedListEditor } from '@ibobbyts/svelte-ui-utils/ordered-list';
+</script>
+
+<OrderedListEditor items={rows} onremove={(id) => remove(id)}>
+  {#snippet children(item)}
+    <input value={item.value ?? ''} />
+  {/snippet}
+</OrderedListEditor>
+```
+
+## SortableTable
+
+`SortableTable` is the table-level ordering primitive. It owns the table rows,
+the left drag-handle column, and the right trash-icon delete column. Callers
+provide only the header cells and the middle row cells through snippets.
+Use `getDragLabel(item, index)` and `getRemoveLabel(item, index)` when the
+controls need caller-owned accessible labels. Each label is applied to both
+`aria-label` and `title`; defaults remain `Drag ${getId(item)}` and
+`Remove ${getId(item)}`.
+
+```svelte
+<SortableTable items={rows} onReorder={reorder} onRemove={remove}>
+  {#snippet header()}<th>Name</th><th>Protocol</th>{/snippet}
+  {#snippet children(row)}<td>{row.name}</td><td>{row.protocol}</td>{/snippet}
+</SortableTable>
+```
+
+`SortableTableEnhanced` composes the same table and adds a controlled current
+radio immediately after each drag handle. `currentId` is read-only input;
+`onCurrentChange` asks the caller to persist a new current item. Use
+`getCurrentDisabled` for per-row eligibility and `getRowColorPreset` to select
+the package-owned `red`, `yellow`, or `green` background. The presets include
+light and dark defaults and expose `--suu-sortable-table-row-*-light` and
+`--suu-sortable-table-row-*-dark` override variables.
+
+```svelte
+<SortableTableEnhanced
+  items={rows}
+  currentId={currentRowId}
+  getDragLabel={(row) => `Reorder ${row.name}`}
+  getRemoveLabel={(row) => `Remove ${row.name}`}
+  onCurrentChange={(row) => selectCurrent(row.id)}
+  getCurrentDisabled={(row) => row.exhausted}
+  getRowColorPreset={(row) => row.exhausted ? 'red' : row.cooling ? 'yellow' : 'green'}
+  onReorder={reorder}
+  onRemove={remove}
+>
+  {#snippet header()}<th>Name</th><th>Protocol</th>{/snippet}
+  {#snippet children(row)}<td>{row.name}</td><td>{row.protocol}</td>{/snippet}
+</SortableTableEnhanced>
+```
+
 ## Dialogs
 
 ```svelte
@@ -181,6 +281,7 @@ adds or removes it from `selectedItems`, clears the query, and emits both
   open={dialogOpen}
   title="Edit record"
   description="Update the shared fields."
+  padding="12px 16px"
   closeLabel="Close dialog"
   blurBackdrop={true}
   showCountdown={true}
@@ -237,7 +338,10 @@ from the close button, backdrop, or Escape key when dismissible; it does not
 mutate `open` internally. Set `dimBackdrop={false}` to disable background
 darkening, `blurBackdrop={true}` to blur content behind the dialog, and
 `showCountdown={true}` with `countdownDurationMs` to show a toast-style top
-countdown bar.
+countdown bar. The optional `padding` prop accepts a CSS padding shorthand and
+applies it consistently to the dialog header, body, and footer. The default
+section-specific spacing is preserved when `padding` is omitted, and the same
+prop is available on all dialog wrapper components.
 
 ## Dropdown
 
@@ -279,6 +383,13 @@ scrollable when its contents exceed that height. When `fitViewport` is enabled,
 the component replaces that default with the space available above or below the
 trigger.
 
+The original flat `options` API and all default behavior remain unchanged. New
+callers may opt into grouped options with `optionGroups`; each group can have an
+optional accessible label and its options keep the same keyboard and disabled
+semantics. `width`, `minWidth`, `maxWidth`, and `className` are optional styling
+hooks. `onTriggerClick` runs before the dropdown toggles, so a nested control
+can stop event propagation without preventing the dropdown from opening.
+
 ## DataTable
 
 ```svelte

package/dist/dialog/ConfirmDialog.svelte

@@ -12,6 +12,7 @@
   export let closeLabel = 'Close dialog';
   export let intent: ConfirmDialogIntent = 'default';
   export let size: DialogSize = 'sm';
+  export let padding: string | undefined = undefined;
   export let confirmDisabled = false;
   export let cancelDisabled = false;
   export let dismissible = true;
@@ -47,6 +48,7 @@
   {title}
   {closeLabel}
   {size}
+  {padding}
   {dismissible}
   {closeOnBackdrop}
   {closeOnEscape}

package/dist/dialog/ConfirmDialog.svelte.d.ts

@@ -26,6 +26,7 @@ declare const ConfirmDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     closeLabel?: string;
     intent?: ConfirmDialogIntent;
     size?: DialogSize;
+    padding?: string | undefined;
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
     dismissible?: boolean;

package/dist/dialog/ConfirmDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAiElE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;;aAfqxB,mBAAmB;WAAS,UAAU;;;;;;;;sBAA8R,MAAM,GAAG,MAAM;;;;;gBAAkL,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;cAetzC,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAkElE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;;aAfwyB,mBAAmB;WAAS,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;;sBAA8R,MAAM,GAAG,MAAM;;;;;gBAAkL,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;cAev2C,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/dialog/CsvUploadDialog.svelte

@@ -9,6 +9,7 @@
   export let description = '';
   export let closeLabel = 'Close dialog';
   export let size: DialogSize = 'lg';
+  export let padding: string | undefined = undefined;
   export let dismissible = true;
   export let closeOnBackdrop = true;
   export let closeOnEscape = true;
@@ -103,6 +104,7 @@
   {description}
   {closeLabel}
   {size}
+  {padding}
   {dismissible}
   {closeOnBackdrop}
   {closeOnEscape}

package/dist/dialog/CsvUploadDialog.svelte.d.ts

@@ -18,6 +18,7 @@ declare const CsvUploadDialog: $$__sveltets_2_IsomorphicComponent<{
     description?: string;
     closeLabel?: string;
     size?: DialogSize;
+    padding?: string | undefined;
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;

package/dist/dialog/CsvUploadDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CsvUploadDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/CsvUploadDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA6K7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,eAAe;;;;;WAfggC,UAAU;;;;;;sBAA4M,MAAM,GAAG,MAAM;;kBAAoD,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;;;;;;;;mBAAqS,MAAM,EAAE;;;;;;;eAAiP,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;mBAAiB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAep9D,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CsvUploadDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/CsvUploadDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA8K7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,eAAe;;;;;WAfmhC,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;sBAA4M,MAAM,GAAG,MAAM;;kBAAoD,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;;;;;;;;mBAAqS,MAAM,EAAE;;;;;;;eAAiP,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;mBAAiB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAergE,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/dialog/Dialog.svelte

@@ -9,6 +9,7 @@
   export let description = '';
   export let closeLabel = 'Close dialog';
   export let size: DialogSize = 'md';
+  export let padding: string | undefined = undefined;
   export let dismissible = true;
   export let showCloseButton = true;
   export let closeOnBackdrop = true;
@@ -35,6 +36,7 @@
     describedBy ?? (description ? descriptionId : undefined);
   $: backdropStyle =
     `--suu-dialog-backdrop-opacity: ${backdropOpacity}; --suu-dialog-backdrop-blur: ${backdropBlur};`;
+  $: dialogStyle = padding ? `--suu-dialog-padding: ${padding};` : '';
   $: countdownStyle = `--suu-dialog-countdown-duration: ${Math.max(0, countdownDurationMs)}ms;`;
   $: if (open && !wasOpen) {
     wasOpen = true;
@@ -99,6 +101,7 @@
     <div
       bind:this={dialogElement}
       class={`suu-dialog suu-dialog--${size}`}
+      style={dialogStyle}
       role="dialog"
       aria-modal="true"
       aria-labelledby={resolvedLabelledBy}

package/dist/dialog/Dialog.svelte.d.ts

@@ -23,6 +23,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     description?: string;
     closeLabel?: string;
     size?: DialogSize;
+    padding?: string | undefined;
     dismissible?: boolean;
     showCloseButton?: boolean;
     closeOnBackdrop?: boolean;

package/dist/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAoI7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfkoB,UAAU;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAevkC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAsI7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfqpB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAexnC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/dialog/ImagePreviewDialog.svelte

@@ -12,6 +12,7 @@
   export let closeLabel = 'Close dialog';
   export let downloadLabel = 'Download';
   export let size: DialogSize = 'lg';
+  export let padding: string | undefined = undefined;
   export let dismissible = true;
   export let closeOnBackdrop = true;
   export let closeOnEscape = true;
@@ -45,6 +46,7 @@
   title={resolvedTitle}
   {closeLabel}
   {size}
+  {padding}
   {dismissible}
   {closeOnBackdrop}
   {closeOnEscape}

package/dist/dialog/ImagePreviewDialog.svelte.d.ts

@@ -21,6 +21,7 @@ declare const ImagePreviewDialog: $$__sveltets_2_IsomorphicComponent<{
     closeLabel?: string;
     downloadLabel?: string;
     size?: DialogSize;
+    padding?: string | undefined;
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;

package/dist/dialog/ImagePreviewDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreviewDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/ImagePreviewDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA8D7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;;;;;;;WAVwlB,UAAU;;;;;;sBAA4M,MAAM,GAAG,MAAM;;;cAAoF,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;kBAU11B,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ImagePreviewDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/ImagePreviewDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA+D7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;;;;;;;WAV2mB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;sBAA4M,MAAM,GAAG,MAAM;;;cAAoF,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;kBAU34B,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/dialog/InputDialog.svelte

@@ -16,6 +16,7 @@
   export let cancelLabel = 'Cancel';
   export let closeLabel = 'Close dialog';
   export let size: DialogSize = 'sm';
+  export let padding: string | undefined = undefined;
   export let confirmDisabled = false;
   export let cancelDisabled = false;
   export let dismissible = true;
@@ -81,6 +82,7 @@
   {title}
   {closeLabel}
   {size}
+  {padding}
   {dismissible}
   {closeOnBackdrop}
   {closeOnEscape}

package/dist/dialog/InputDialog.svelte.d.ts

@@ -24,6 +24,7 @@ declare const InputDialog: $$__sveltets_2_IsomorphicComponent<{
     cancelLabel?: string;
     closeLabel?: string;
     size?: DialogSize;
+    padding?: string | undefined;
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
     dismissible?: boolean;

package/dist/dialog/InputDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/InputDialog.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAyG9D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;;;;gBAVmtB,eAAe;;;;;;WAAiL,UAAU;;;;;;;;sBAA8R,MAAM,GAAG,MAAM;;;gBAAgF,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;kBAUz0C,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"InputDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/InputDialog.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA0G9D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;;;;gBAVsuB,eAAe;;;;;;WAAiL,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;;sBAA8R,MAAM,GAAG,MAAM;;;gBAAgF,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;kBAU13C,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/dialog/PasswordCopyDialog.svelte

@@ -14,6 +14,7 @@
   export let doneLabel = 'Done';
   export let closeLabel = 'Close dialog';
   export let size: DialogSize = 'sm';
+  export let padding: string | undefined = undefined;
   export let dismissible = true;
   export let closeOnBackdrop = true;
   export let closeOnEscape = true;
@@ -53,6 +54,7 @@
   {title}
   {closeLabel}
   {size}
+  {padding}
   {dismissible}
   {closeOnBackdrop}
   {closeOnEscape}

package/dist/dialog/PasswordCopyDialog.svelte.d.ts

@@ -23,6 +23,7 @@ declare const PasswordCopyDialog: $$__sveltets_2_IsomorphicComponent<{
     doneLabel?: string;
     closeLabel?: string;
     size?: DialogSize;
+    padding?: string | undefined;
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;

package/dist/dialog/PasswordCopyDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordCopyDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/PasswordCopyDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA8E7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;;;;;;;;;WAV0rB,UAAU;;;;;;sBAA4M,MAAM,GAAG,MAAM;;cAAgD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;aAAW,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;;;kBAU38B,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PasswordCopyDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/PasswordCopyDialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA+E7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,kBAAkB;;;;;;;;;;WAV6sB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;sBAA4M,MAAM,GAAG,MAAM;;cAAgD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;aAAW,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;;;kBAU5/B,CAAC;AACtF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/dropdown/Dropdown.svelte

@@ -2,18 +2,32 @@
 
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
-  import type { DropdownChangeHandler, DropdownMenuAlign, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
+  import type {
+    DropdownChangeHandler,
+    DropdownMenuAlign,
+    DropdownOption,
+    DropdownOptionGroup,
+    DropdownPlacement,
+    DropdownTriggerClickHandler,
+    DropdownValue
+  } from './types.js';
 
   export let id: string | undefined = undefined;
   export let value: DropdownValue = '';
   export let options: DropdownOption[] = [];
+  export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
-  export let placement: DropdownPlacement = 'down';
+  export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'right';
   export let fitViewport = false;
   export let fitContent = false;
   export let disabled = false;
+  export let width: string | undefined = undefined;
+  export let minWidth: string | undefined = undefined;
+  export let maxWidth: string | undefined = undefined;
+  export let className: string | undefined = undefined;
   export let onChange: DropdownChangeHandler | undefined = undefined;
+  export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
   const viewportMargin = 20;
   const menuGap = 6;
@@ -22,10 +36,12 @@
   let activeValue: DropdownValue = value;
   let dropdownElement: HTMLSpanElement | undefined;
   let buttonElement: HTMLButtonElement | undefined;
+  let resolvedPlacement: Exclude<DropdownPlacement, 'auto'> = placement === 'up' ? 'up' : 'down';
   let viewportPanelMaxHeight: string | undefined = undefined;
   let removeOpenViewportListeners: (() => void) | undefined = undefined;
 
-  $: selectedOption = options.find((option) => option.value === value);
+  $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
+  $: selectedOption = resolvedOptions.find((option) => option.value === value);
   $: selectedText = selectedOption?.label ?? String(value);
   $: if (!open) {
     activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
@@ -37,28 +53,29 @@
       void updateViewportPanelMaxHeight();
     } else {
       disableOpenViewportTracking();
+      resolvedPlacement = placement === 'up' ? 'up' : 'down';
       viewportPanelMaxHeight = undefined;
     }
   }
 
   function firstEnabledOption(): DropdownOption | undefined {
-    return options.find((option) => !option.disabled);
+    return resolvedOptions.find((option) => !option.disabled);
   }
 
   function activeOptionIndex(nextActiveValue: DropdownValue): number {
-    const index = options.findIndex((option) => option.value === nextActiveValue && !option.disabled);
+    const index = resolvedOptions.findIndex((option) => option.value === nextActiveValue && !option.disabled);
     if (index >= 0) {
       return index;
     }
-    const fallbackIndex = options.findIndex((option) => option.value === value && !option.disabled);
+    const fallbackIndex = resolvedOptions.findIndex((option) => option.value === value && !option.disabled);
     if (fallbackIndex >= 0) {
       return fallbackIndex;
     }
-    return options.findIndex((option) => !option.disabled);
+    return resolvedOptions.findIndex((option) => !option.disabled);
   }
 
   function moveActiveOption(offset: number) {
-    const enabledOptions = options.filter((option) => !option.disabled);
+    const enabledOptions = resolvedOptions.filter((option) => !option.disabled);
     if (enabledOptions.length === 0) {
       return;
     }
@@ -82,10 +99,18 @@
     if (disabled) {
       return;
     }
+    if (!open) {
+      updateResolvedPlacement();
+    }
     open = !open;
     activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
   }
 
+  function handleTriggerClick(event: MouseEvent) {
+    onTriggerClick?.(event);
+    toggleOpen();
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     if (disabled) {
       return;
@@ -102,6 +127,7 @@
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       if (!open) {
+        updateResolvedPlacement();
         open = true;
         activeValue = selectedOption?.value ?? firstEnabledOption()?.value ?? value;
       }
@@ -112,7 +138,7 @@
     if ((event.key === 'Enter' || event.key === ' ') && open) {
       event.preventDefault();
       const index = activeOptionIndex(activeValue);
-      const option = index >= 0 ? options[index] : undefined;
+      const option = index >= 0 ? resolvedOptions[index] : undefined;
       if (option) {
         selectOption(option);
       }
@@ -144,6 +170,21 @@
     return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
   }
 
+  function updateResolvedPlacement(rect = dropdownElement?.getBoundingClientRect()) {
+    if (placement !== 'auto') {
+      resolvedPlacement = placement;
+      return;
+    }
+    if (!rect || typeof window === 'undefined') {
+      resolvedPlacement = 'down';
+      return;
+    }
+
+    const availableAbove = rect.top - viewportMargin - menuGap;
+    const availableBelow = window.innerHeight - rect.bottom - viewportMargin - menuGap;
+    resolvedPlacement = availableBelow >= availableAbove ? 'down' : 'up';
+  }
+
   async function updateViewportPanelMaxHeight() {
     await tick();
 
@@ -156,17 +197,18 @@
       return;
     }
 
-    if (!fitViewport) {
+    const rect = dropdownElement?.getBoundingClientRect();
+    if (!rect) {
       return;
     }
 
-    const rect = dropdownElement?.getBoundingClientRect();
-    if (!rect) {
+    updateResolvedPlacement(rect);
+    if (!fitViewport) {
       return;
     }
 
     const available =
-      placement === 'up'
+      resolvedPlacement === 'up'
         ? rect.top - viewportMargin - menuGap
         : window.innerHeight - rect.bottom - viewportMargin - menuGap;
     viewportPanelMaxHeight = `${Math.max(0, Math.floor(available))}px`;
@@ -199,8 +241,17 @@
 
 <span
   bind:this={dropdownElement}
-  class="suu-dropdown"
+  class={[
+    'suu-dropdown',
+    width !== undefined || minWidth !== undefined || maxWidth !== undefined
+      ? 'suu-dropdown--sized'
+      : '',
+    className ?? ''
+  ].filter(Boolean).join(' ')}
   style:--suu-dropdown-panel-max-height={viewportPanelMaxHeight}
+  style:width
+  style:min-width={minWidth}
+  style:max-width={maxWidth}
   on:focusout={handleFocusout}
 >
   <button
@@ -213,7 +264,7 @@
     aria-haspopup="listbox"
     aria-expanded={open}
     data-value={String(value)}
-    on:click={toggleOpen}
+    on:click={handleTriggerClick}
     on:keydown={handleKeydown}
   >
     <span>{selectedText}</span>
@@ -223,35 +274,67 @@
   {#if open}
     <div
       class="suu-dropdown__menu"
-      class:suu-dropdown__menu--up={placement === 'up'}
-      class:suu-dropdown__menu--down={placement === 'down'}
+      class:suu-dropdown__menu--up={resolvedPlacement === 'up'}
+      class:suu-dropdown__menu--down={resolvedPlacement === 'down'}
       class:suu-dropdown__menu--left={menuAlign === 'left'}
       class:suu-dropdown__menu--right={menuAlign === 'right'}
       class:suu-dropdown__menu--fit-content={fitContent}
     >
       <div class="suu-dropdown__panel" role="listbox" aria-label={ariaLabel}>
-        {#each options as option}
-          <button
-            type="button"
-            class="suu-dropdown__option"
-            class:suu-dropdown__option--active={option.value === activeValue}
-            class:suu-dropdown__option--disabled={option.disabled}
-            role="option"
-            aria-selected={option.value === value}
-            aria-disabled={option.disabled}
-            disabled={option.disabled}
-            data-value={String(option.value)}
-            on:mousedown|preventDefault={() => undefined}
-            on:mouseenter={() => {
-              if (!option.disabled) {
-                activeValue = option.value;
-              }
-            }}
-            on:click={() => selectOption(option)}
-          >
-            {option.label}
-          </button>
-        {/each}
+        {#if optionGroups === undefined}
+          {#each options as option}
+            <button
+              type="button"
+              class="suu-dropdown__option"
+              class:suu-dropdown__option--active={option.value === activeValue}
+              class:suu-dropdown__option--disabled={option.disabled}
+              role="option"
+              aria-selected={option.value === value}
+              aria-disabled={option.disabled}
+              disabled={option.disabled}
+              data-value={String(option.value)}
+              on:mousedown|preventDefault={() => undefined}
+              on:mouseenter={() => {
+                if (!option.disabled) {
+                  activeValue = option.value;
+                }
+              }}
+              on:click={() => selectOption(option)}
+            >
+              {option.label}
+            </button>
+          {/each}
+        {:else}
+          {#each optionGroups as group}
+            <div class="suu-dropdown__group" role="group" aria-label={group.label}>
+              {#if group.label}
+                <div class="suu-dropdown__group-label">{group.label}</div>
+              {/if}
+              {#each group.options as option}
+                <button
+                  type="button"
+                  class="suu-dropdown__option"
+                  class:suu-dropdown__option--active={option.value === activeValue}
+                  class:suu-dropdown__option--disabled={option.disabled}
+                  role="option"
+                  aria-selected={option.value === value}
+                  aria-disabled={option.disabled}
+                  disabled={option.disabled}
+                  data-value={String(option.value)}
+                  on:mousedown|preventDefault={() => undefined}
+                  on:mouseenter={() => {
+                    if (!option.disabled) {
+                      activeValue = option.value;
+                    }
+                  }}
+                  on:click={() => selectOption(option)}
+                >
+                  {option.label}
+                </button>
+              {/each}
+            </div>
+          {/each}
+        {/if}
       </div>
     </div>
   {/if}