@deepfuture/dui-cdn 0.0.20 → 0.0.21

package/dui.js

@@ -658,6 +658,8 @@ var themedBase = i`
     font-size: inherit;
     letter-spacing: inherit;
     font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 `;
 
@@ -1158,19 +1160,6 @@ var badgeStyles = i`
 
 // packages/theme-default/src/components/scroll-area.ts
 var scrollAreaStyles = i`
-  .ScrollFade {
-    box-shadow: var(--scroll-fade-offset-x, 0) var(--scroll-fade-offset-y, 0)
-      var(--scroll-fade-blur-radius, var(--space-3))
-      var(--scroll-fade-spread-radius, var(--space-2))
-      var(--scroll-fade-color, var(--background));
-    opacity: 0;
-    transition: opacity var(--duration-fast) ease;
-
-    &[data-scrolled] {
-      opacity: 1;
-    }
-  }
-
   .Scrollbar {
     border-radius: var(--radius-sm);
     transition: opacity var(--duration-fast);
@@ -1433,15 +1422,16 @@ var popoverStyles = i``;
 // packages/theme-default/src/components/popover-popup.ts
 var popoverPopupStyles = i`
   .Popup {
-    padding: var(--space-1);
+    padding: var(--popover-popup-padding, var(--space-4));
     border-radius: var(--radius-md);
     background: var(--surface-3);
     color: var(--text-1);
     font-family: var(--font-sans);
-    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
     box-shadow: var(--shadow-md);
     border: var(--border-width-thin) solid var(--border);
-    transition-duration: var(--duration-fast);
+    transition-duration: var(--duration-faster);
     transition-timing-function: var(--ease-out-3);
   }
 
@@ -1462,7 +1452,7 @@ var tooltipStyles = i``;
 // packages/theme-default/src/components/tooltip-popup.ts
 var tooltipPopupStyles = i`
   .Popup {
-    padding: var(--space-0_5) var(--space-1_5);
+    padding: var(--space-2) var(--space-2);
     border-radius: var(--radius-sm);
     background: color-mix(
       in oklch,
@@ -1862,36 +1852,18 @@ var toolbarStyles = i`
   }
 
   :host([inset]) [part="root"] {
-    padding-top: var(--space-2);
-    padding-bottom: var(--space-2);
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
+    padding-top: var(--toolbar-padding-y, var(--space-2));
+    padding-bottom: var(--toolbar-padding-y, var(--space-2));
+    padding-left: var(--toolbar-padding-x, var(--space-4));
+    padding-right: var(--toolbar-padding-x, var(--space-4));
   }
 
   :host([inset][has-button-left]) [part="root"] {
-    padding-left: var(--space-2);
+    padding-left: var(--toolbar-padding-x-button, var(--space-2));
   }
 
   :host([inset][has-button-right]) [part="root"] {
-    padding-right: var(--space-2);
-  }
-
-  /* ── Size variants ── */
-
-  :host([size="sm"]) [part="root"] {
-    height: var(--component-height-sm);
-  }
-
-  :host([size="md"]) [part="root"] {
-    height: var(--component-height-md);
-  }
-
-  :host([size="lg"]) [part="root"] {
-    height: var(--component-height-lg);
-  }
-
-  :host([size="xl"]) [part="root"] {
-    height: var(--component-height-xl);
+    padding-right: var(--toolbar-padding-x-button, var(--space-2));
   }
 
   /* ── Slot containers ── */
@@ -2405,13 +2377,14 @@ var dropzoneStyles = i`
     border-radius: var(--radius-md);
     background: var(--background);
     color: var(--text-1);
+    font-size: var(--text-sm);
     padding: var(--space-4);
     transition-property: border-color, background, color, box-shadow, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="root"]:hover {
-    border-color: var(--accent);
+    border-color: var(--border-strong);
     background: var(--surface-1);
   }
 
@@ -2440,7 +2413,7 @@ var fieldStyles = i`
 
   [part="label"] {
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
+    font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
     color: var(--text-1);
@@ -2452,7 +2425,7 @@ var fieldStyles = i`
 
   [part="description"] {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
+    font-size: var(--text-xs);
     line-height: var(--line-height-normal);
     color: var(--text-3);
     margin: 0;
@@ -2460,7 +2433,7 @@ var fieldStyles = i`
 
   [part="error"][data-invalid] {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
+    font-size: var(--text-xs);
     line-height: var(--line-height-normal);
     color: var(--destructive);
     margin: 0;
@@ -2481,7 +2454,7 @@ var fieldsetStyles = i`
 
   [part="legend"] {
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
+    font-size: var(--text-sm);
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-normal);
     color: var(--text-1);
@@ -2502,7 +2475,7 @@ var selectStyles = i`
     font-family: var(--font-sans);
     font-size: var(--text-sm); line-height: var(--text-sm--line-height);
     transition-property: border-color, box-shadow, background, filter, transform;
-    transition-duration: var(--duration-fast);
+    transition-duration: var(--duration-fastest);
   }
 
   .Trigger:focus {
@@ -2567,6 +2540,19 @@ var selectStyles = i`
     transform: translateY(calc(var(--space-1) * -1));
   }
 
+  /* When inner-aligned (macOS-style), appear/disappear instantly.
+     transition: none  — prevents the 200ms onTransitionEnd fallback delay.
+     transform: none   — prevents translateY flash and getBoundingClientRect distortion.
+     Structural opacity:0 on starting/ending-style hides the popup immediately on close. */
+  .Popup[data-align-inner] {
+    transition: none;
+  }
+
+  .Popup[data-align-inner][data-starting-style],
+  .Popup[data-align-inner][data-ending-style] {
+    transform: none;
+  }
+
   .Listbox {
     padding: var(--space-1);
   }
@@ -2609,16 +2595,17 @@ var previewCardStyles = i``;
 // packages/theme-default/src/components/preview-card-popup.ts
 var previewCardPopupStyles = i`
   .Popup {
-    padding: var(--space-4);
+    padding: var(--preview-card-popup-padding, var(--space-4));
     border-radius: var(--radius-md);
     background: var(--surface-3);
     color: var(--text-1);
     font-family: var(--font-sans);
-    font-size: var(--text-sm); line-height: var(--text-sm--line-height);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
     box-shadow: var(--shadow-lg);
     border: var(--border-width-thin) solid var(--border);
     max-width: var(--max-width, var(--space-80));
-    transition-duration: var(--duration-fast);
+    transition-duration: var(--duration-faster);
     transition-timing-function: var(--ease-out-3);
   }
 
@@ -3123,6 +3110,10 @@ var sidebarInsetStyles = i``;
 
 // packages/theme-default/src/components/separator.ts
 var separatorStyles = i`
+  :host {
+    --separator-margin: 0;
+  }
+
   [part="root"] {
     border: none;
   }
@@ -3130,12 +3121,16 @@ var separatorStyles = i`
   :host([orientation="horizontal"]) [part="root"] {
     height: 0;
     border-top: var(--border-width-thin) solid var(--border);
+    margin-top: var(--separator-margin);
+    margin-bottom: var(--separator-margin);
   }
 
   :host([orientation="vertical"]) [part="root"] {
     width: 0;
     height: 100%;
     border-left: var(--border-width-thin) solid var(--border);
+    margin-left: var(--separator-margin);
+    margin-right: var(--separator-margin);
   }
 `;
 
@@ -3159,19 +3154,25 @@ var splitButtonStyles = i`
   :host([variant="neutral"]) {
     --_intent-base: var(--foreground);
     --_intent-base-fg: var(--background);
+    --_intent-subtle: oklch(from var(--foreground) l c h / 0.08);
     --_intent-subtle-fg: var(--text-1);
+    --_intent-border: var(--border);
   }
 
   :host([variant="primary"]) {
     --_intent-base: var(--accent);
     --_intent-base-fg: oklch(from var(--accent) 0.98 0.01 h);
+    --_intent-subtle: var(--accent-subtle);
     --_intent-subtle-fg: var(--accent-text);
+    --_intent-border: oklch(from var(--accent) l c h / 0.5);
   }
 
   :host([variant="danger"]) {
     --_intent-base: var(--destructive);
     --_intent-base-fg: oklch(from var(--destructive) 0.98 0.01 h);
+    --_intent-subtle: var(--destructive-subtle);
     --_intent-subtle-fg: var(--destructive-text);
+    --_intent-border: oklch(from var(--destructive) l c h / 0.5);
   }
 
   /* ---------------------------------------------------------------
@@ -3201,6 +3202,13 @@ var splitButtonStyles = i`
     --sb-divider: var(--border);
   }
 
+  :host([appearance="soft"]) {
+    --sb-bg: var(--_intent-subtle);
+    --sb-fg: var(--_intent-subtle-fg);
+    --sb-border: transparent;
+    --sb-divider: oklch(from var(--_intent-base) l c h / 0.15);
+  }
+
   /* ---------------------------------------------------------------
    * Sizes
    * --------------------------------------------------------------- */
@@ -3214,6 +3222,7 @@ var splitButtonStyles = i`
     --sb-radius: var(--radius-md);
     --sb-font-size: var(--text-sm);
     --sb-icon-size: var(--space-4_5);
+    --sb-trigger-icon-size: var(--space-4);
   }
 
   :host([size="xs"]) {
@@ -3224,6 +3233,7 @@ var splitButtonStyles = i`
     --sb-gap: var(--space-1);
     --sb-font-size: var(--text-xs);
     --sb-icon-size: var(--space-3_5);
+    --sb-trigger-icon-size: var(--space-3);
   }
 
   :host([size="sm"]) {
@@ -3234,6 +3244,7 @@ var splitButtonStyles = i`
     --sb-gap: var(--space-1);
     --sb-font-size: var(--text-xs);
     --sb-icon-size: var(--space-4);
+    --sb-trigger-icon-size: var(--space-3_5);
   }
 
   :host([size="lg"]) {
@@ -3244,6 +3255,7 @@ var splitButtonStyles = i`
     --sb-gap: var(--space-1_5);
     --sb-font-size: var(--text-sm);
     --sb-icon-size: var(--space-4_5);
+    --sb-trigger-icon-size: var(--space-4);
   }
 
   /* ---------------------------------------------------------------
@@ -3298,10 +3310,11 @@ var splitButtonStyles = i`
    * --------------------------------------------------------------- */
 
   [part="trigger"] {
-    --icon-size: var(--sb-icon-size);
+    --icon-size: var(--sb-trigger-icon-size);
     --icon-color: var(--sb-fg);
     padding: 0 var(--sb-trigger-padding-x);
     height: 100%;
+    background: var(--sb-trigger-bg, var(--sb-bg));
     color: inherit;
     transition-property: background, filter;
     transition-duration: var(--duration-faster);
@@ -3313,29 +3326,29 @@ var splitButtonStyles = i`
    * --------------------------------------------------------------- */
 
   /* Filled hover */
-  :host(:not([appearance="outline"]):not([appearance="ghost"]))
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]))
     [part="action"]:hover:not(:disabled) {
     filter: brightness(0.88);
   }
 
-  :host(:not([appearance="outline"]):not([appearance="ghost"]))
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]))
     [part="trigger"]:hover:not(:disabled) {
     filter: brightness(0.88);
   }
 
   /* Filled active */
-  :host(:not([appearance="outline"]):not([appearance="ghost"]))
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]))
     [part="action"]:active:not(:disabled) {
     filter: brightness(0.80);
   }
 
-  :host(:not([appearance="outline"]):not([appearance="ghost"]))
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]))
     [part="trigger"]:active:not(:disabled) {
     filter: brightness(0.80);
   }
 
   /* Filled trigger open state */
-  :host(:not([appearance="outline"]):not([appearance="ghost"]))
+  :host(:not([appearance="outline"]):not([appearance="ghost"]):not([appearance="soft"]))
     [part="trigger"][data-open]:not(:disabled) {
     filter: brightness(0.80);
   }
@@ -3343,29 +3356,52 @@ var splitButtonStyles = i`
   /* Ghost / outline hover */
   :host([appearance="ghost"]) [part="action"]:hover:not(:disabled),
   :host([appearance="outline"]) [part="action"]:hover:not(:disabled) {
-    background: oklch(from var(--foreground) l c h / 0.05);
+    background: oklch(from var(--_intent-base) l c h / 0.05);
   }
 
   :host([appearance="ghost"]) [part="trigger"]:hover:not(:disabled),
   :host([appearance="outline"]) [part="trigger"]:hover:not(:disabled) {
-    background: oklch(from var(--foreground) l c h / 0.05);
+    background: oklch(from var(--_intent-base) l c h / 0.05);
   }
 
   /* Ghost / outline active */
   :host([appearance="ghost"]) [part="action"]:active:not(:disabled),
   :host([appearance="outline"]) [part="action"]:active:not(:disabled) {
-    background: oklch(from var(--foreground) l c h / 0.10);
+    background: oklch(from var(--_intent-base) l c h / 0.10);
   }
 
   :host([appearance="ghost"]) [part="trigger"]:active:not(:disabled),
   :host([appearance="outline"]) [part="trigger"]:active:not(:disabled) {
-    background: oklch(from var(--foreground) l c h / 0.10);
+    background: oklch(from var(--_intent-base) l c h / 0.10);
   }
 
   /* Ghost / outline trigger open state */
   :host([appearance="ghost"]) [part="trigger"][data-open]:not(:disabled),
   :host([appearance="outline"]) [part="trigger"][data-open]:not(:disabled) {
-    background: oklch(from var(--foreground) l c h / 0.10);
+    background: oklch(from var(--_intent-base) l c h / 0.10);
+  }
+
+  /* Soft hover */
+  :host([appearance="soft"]) [part="action"]:hover:not(:disabled) {
+    background: oklch(from var(--_intent-base) l c h / 0.12);
+  }
+
+  :host([appearance="soft"]) [part="trigger"]:hover:not(:disabled) {
+    background: oklch(from var(--_intent-base) l c h / 0.12);
+  }
+
+  /* Soft active */
+  :host([appearance="soft"]) [part="action"]:active:not(:disabled) {
+    background: oklch(from var(--_intent-base) l c h / 0.18);
+  }
+
+  :host([appearance="soft"]) [part="trigger"]:active:not(:disabled) {
+    background: oklch(from var(--_intent-base) l c h / 0.18);
+  }
+
+  /* Soft trigger open state */
+  :host([appearance="soft"]) [part="trigger"][data-open]:not(:disabled) {
+    background: oklch(from var(--_intent-base) l c h / 0.18);
   }
 
   /* Focus visible */
@@ -3776,6 +3812,7 @@ var numberFieldStyles = i`
   [part="input"] {
     text-align: var(--number-field-value-align);
     padding: 0 var(--space-2);
+    font-weight: var(--font-weight-medium);
   }
 
   :host([disabled]) {
@@ -3812,6 +3849,7 @@ var stepperStyles = i`
     width: var(--space-16);
     font-family: var(--font-sans);
     font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
     color: var(--text-1);
   }
 
@@ -4503,9 +4541,8 @@ var properties_default = `/* ===================================================
  * Button
  * ----------------------------------------------------------- */
 @property --button-bg {
-  syntax: "<color>";
+  syntax: "*";
   inherits: true;
-  initial-value: oklch(0.15 0 0);
 }
 
 @property --button-fg {
@@ -9075,6 +9112,36 @@ var fixedPlatform = {
   ...platform,
   getOffsetParent: () => window
 };
+var alignInner = (options) => ({
+  name: "alignInner",
+  fn(state4) {
+    const innerEl = options.getElement();
+    if (!innerEl) return {};
+    const padding = options.padding ?? 8;
+    const { rects } = state4;
+    const floatingEl = state4.elements.floating;
+    const floatingRect = floatingEl.getBoundingClientRect();
+    const innerRect = innerEl.getBoundingClientRect();
+    const innerOffsetY = innerRect.top - floatingRect.top + innerRect.height / 2;
+    const refInnerEl = options.getReferenceInner?.();
+    const refCenterY = refInnerEl ? refInnerEl.getBoundingClientRect().top + refInnerEl.getBoundingClientRect().height / 2 : rects.reference.y + rects.reference.height / 2;
+    let y3 = refCenterY - innerOffsetY;
+    const viewportH = globalThis.innerHeight;
+    const floatingH = floatingRect.height;
+    const minY = padding;
+    const maxY = viewportH - floatingH - padding;
+    const clampedY = Math.max(minY, Math.min(y3, maxY));
+    const scrollContainer = floatingEl.shadowRoot?.querySelector(".Popup") ?? floatingEl.querySelector(".Popup");
+    if (scrollContainer && clampedY !== y3) {
+      const scrollDelta = y3 - clampedY;
+      scrollContainer.scrollTop = Math.max(0, scrollContainer.scrollTop - scrollDelta);
+    }
+    y3 = clampedY;
+    const innerLeftOffset = innerRect.left - floatingRect.left;
+    const x2 = refInnerEl ? refInnerEl.getBoundingClientRect().left - innerLeftOffset : rects.reference.x;
+    return { x: x2, y: y3, reset: false };
+  }
+});
 var computeFixedPosition = (anchor, floating, options = {}) => {
   const {
     placement = "bottom-start",
@@ -9083,11 +9150,8 @@ var computeFixedPosition = (anchor, floating, options = {}) => {
     minMatchWidth = false,
     padding = 8
   } = options;
-  const middleware = [
-    offset2(offsetPx),
-    flip2(),
-    shift2({ padding })
-  ];
+  const useInnerAlign = options.alignToInner?.getElement() != null;
+  const middleware = useInnerAlign ? [alignInner(options.alignToInner)] : [offset2(offsetPx), flip2(), shift2({ padding })];
   if (matchWidth) {
     middleware.push(
       size2({
@@ -9144,7 +9208,10 @@ var FloatingPortalController = class {
   #renderPopup;
   #contentContainer;
   #contentSelector;
+  #forwardProperties;
   #getOverlayRoot;
+  #alignToInner;
+  #alignToInnerReference;
   #movedNodes = [];
   #positioner = null;
   #cleanupAutoUpdate = null;
@@ -9189,7 +9256,10 @@ var FloatingPortalController = class {
     this.#renderPopup = options.renderPopup;
     this.#contentContainer = options.contentContainer;
     this.#contentSelector = options.contentSelector;
+    this.#forwardProperties = options.forwardProperties ?? [];
     this.#getOverlayRoot = options.getOverlayRoot ?? (() => document.body);
+    this.#alignToInner = options.alignToInner;
+    this.#alignToInnerReference = options.alignToInnerReference;
     host.addController(this);
   }
   hostConnected() {
@@ -9268,6 +9338,7 @@ var FloatingPortalController = class {
   #createPositioner() {
     if (this.#positioner) {
       this.#positioner.style.display = "";
+      this.#applyForwardedProperties(this.#positioner);
       return;
     }
     const overlayRoot = this.#getOverlayRoot();
@@ -9289,9 +9360,21 @@ var FloatingPortalController = class {
       const shadow = positioner.attachShadow({ mode: "open" });
       S(shadow, allStyles);
     }
+    this.#applyForwardedProperties(positioner);
     overlayRoot.appendChild(positioner);
     this.#positioner = positioner;
   }
+  /** Read forwarded CSS custom properties from the host and set them on the positioner. */
+  #applyForwardedProperties(positioner) {
+    if (this.#forwardProperties.length === 0) return;
+    const computed = getComputedStyle(this.#host);
+    for (const prop of this.#forwardProperties) {
+      const value = computed.getPropertyValue(prop).trim();
+      if (value) {
+        positioner.style.setProperty(prop, value);
+      }
+    }
+  }
   #hidePositioner() {
     if (this.#positioner) {
       this.#positioner.style.display = "none";
@@ -9311,7 +9394,11 @@ var FloatingPortalController = class {
       offsetPx: this.#offset,
       matchWidth: this.#matchWidth,
       minMatchWidth: this.#minMatchWidth,
-      onPosition: this.#onPosition
+      onPosition: this.#onPosition,
+      alignToInner: this.#alignToInner ? {
+        getElement: this.#alignToInner,
+        getReferenceInner: this.#alignToInnerReference
+      } : void 0
     });
   }
   #stopAutoUpdate() {
@@ -13972,6 +14059,7 @@ var DuiPreviewCardPopup = class extends (_a35 = i4, _showArrow_dec2 = [n4({ type
       offset: 8,
       styles: portalPopupStyles4,
       contentContainer: ".PreviewCardContent",
+      forwardProperties: ["--preview-card-popup-padding"],
       onPosition: ({ placement }) => {
         const actualSide = placement.split("-")[0];
         if (actualSide !== __privateGet(this, _DuiPreviewCardPopup_instances, side_get2)) {
@@ -14407,14 +14495,9 @@ var styles37 = i`
     }
   }
 
-  .ScrollFade {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    pointer-events: none;
-    z-index: 1;
+  :host([fade]) .Viewport[data-scrolled] {
+    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 1.5rem));
+    mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-size, 1.5rem));
   }
 
   .Scrollbar {
@@ -14695,11 +14778,7 @@ var _DuiScrollArea = class _DuiScrollArea extends (_a39 = i4, _orientation_dec4
         ?data-has-overflow-y="${__privateGet(this, _DuiScrollArea_instances, hasOverflowY_get)}"
         ?data-scrolling="${__privateGet(this, _DuiScrollArea_instances, scrolling_get)}"
       >
-        ${this.fade ? b2`<div
-              class="ScrollFade"
-              ?data-scrolled="${!__privateGet(this, _DuiScrollArea_instances, isAtTop_get)}"
-            ></div>` : A}
-        <div class="Viewport" part="viewport" @scroll="${__privateGet(this, _onScroll)}">
+        <div class="Viewport" part="viewport" ?data-scrolled="${!__privateGet(this, _DuiScrollArea_instances, isAtTop_get)}" @scroll="${__privateGet(this, _onScroll)}">
           <slot></slot>
         </div>
         ${__privateMethod(this, _DuiScrollArea_instances, renderVerticalScrollbar_fn).call(this)} ${__privateMethod(this, _DuiScrollArea_instances, renderHorizontalScrollbar_fn).call(this)}
@@ -14886,8 +14965,8 @@ var portalPopupStyles5 = [
     }
   `
 ];
-var _highlightedIndex_dec3, _name_dec7, _disabled_dec19, _placeholder_dec4, _value_dec15, _options_dec2, _a40, _internals6, _init40, _options2, _value15, _placeholder4, _disabled19, _name7, _highlightedIndex3, _b29, highlightedIndex_get3, highlightedIndex_set3, _DuiSelect_instances, _triggerId5, _listboxId, _popup3, selectedOption_get, selectedIndex_get, displayValue_get2, _onTriggerClick2, _onTriggerKeyDown, _onListMouseDown2, _onItemClick2, _onItemMouseEnter, selectOption_fn2, nextEnabledIndex_fn, focusTrigger_fn, _renderItem2;
-var DuiSelect = class extends (_a40 = i4, _options_dec2 = [n4({ attribute: false })], _value_dec15 = [n4({ type: String })], _placeholder_dec4 = [n4({ type: String })], _disabled_dec19 = [n4({ type: Boolean, reflect: true })], _name_dec7 = [n4({ type: String })], _highlightedIndex_dec3 = [r5()], _a40) {
+var _highlightedIndex_dec3, _name_dec7, _alignItemToTrigger_dec, _disabled_dec19, _placeholder_dec4, _value_dec15, _options_dec2, _a40, _internals6, _init40, _options2, _value15, _placeholder4, _disabled19, _alignItemToTrigger, _name7, _highlightedIndex3, _b29, highlightedIndex_get3, highlightedIndex_set3, _DuiSelect_instances, _triggerId5, _listboxId, _popup3, selectedOption_get, selectedIndex_get, displayValue_get2, _onTriggerClick2, _onTriggerKeyDown, _onListMouseDown2, _onItemClick2, _onItemMouseEnter, selectOption_fn2, nextEnabledIndex_fn, focusTrigger_fn, _renderItem2;
+var DuiSelect = class extends (_a40 = i4, _options_dec2 = [n4({ attribute: false })], _value_dec15 = [n4({ type: String })], _placeholder_dec4 = [n4({ type: String })], _disabled_dec19 = [n4({ type: Boolean, reflect: true })], _alignItemToTrigger_dec = [n4({ type: Boolean, attribute: "align-item-to-trigger", reflect: true })], _name_dec7 = [n4({ type: String })], _highlightedIndex_dec3 = [r5()], _a40) {
   constructor() {
     super();
     __privateAdd(this, _DuiSelect_instances);
@@ -14896,8 +14975,9 @@ var DuiSelect = class extends (_a40 = i4, _options_dec2 = [n4({ attribute: false
     __privateAdd(this, _value15, __runInitializers(_init40, 12, this, "")), __runInitializers(_init40, 15, this);
     __privateAdd(this, _placeholder4, __runInitializers(_init40, 16, this, "Select...")), __runInitializers(_init40, 19, this);
     __privateAdd(this, _disabled19, __runInitializers(_init40, 20, this, false)), __runInitializers(_init40, 23, this);
-    __privateAdd(this, _name7, __runInitializers(_init40, 24, this, "")), __runInitializers(_init40, 27, this);
-    __privateAdd(this, _highlightedIndex3, __runInitializers(_init40, 28, this, -1)), __runInitializers(_init40, 31, this);
+    __privateAdd(this, _alignItemToTrigger, __runInitializers(_init40, 24, this, true)), __runInitializers(_init40, 27, this);
+    __privateAdd(this, _name7, __runInitializers(_init40, 28, this, "")), __runInitializers(_init40, 31, this);
+    __privateAdd(this, _highlightedIndex3, __runInitializers(_init40, 32, this, -1)), __runInitializers(_init40, 35, this);
     __privateAdd(this, _triggerId5, `select-trigger-${crypto.randomUUID().slice(0, 8)}`);
     __privateAdd(this, _listboxId, `select-listbox-${crypto.randomUUID().slice(0, 8)}`);
     __privateAdd(this, _popup3, new FloatingPortalController(this, {
@@ -14905,6 +14985,16 @@ var DuiSelect = class extends (_a40 = i4, _options_dec2 = [n4({ attribute: false
       matchWidth: false,
       minMatchWidth: true,
       styles: portalPopupStyles5,
+      alignToInner: () => {
+        if (!this.alignItemToTrigger) return null;
+        const root = __privateGet(this, _popup3).renderRoot;
+        const selectedItem = root?.querySelector("[data-selected]");
+        return selectedItem?.querySelector(".ItemText") ?? selectedItem ?? null;
+      },
+      alignToInnerReference: () => {
+        if (!this.alignItemToTrigger) return null;
+        return this.shadowRoot?.querySelector(".Value") ?? null;
+      },
       onOpen: () => {
         __privateSet(this, _DuiSelect_instances, __privateGet(this, _DuiSelect_instances, selectedIndex_get), highlightedIndex_set3);
       },
@@ -14915,6 +15005,7 @@ var DuiSelect = class extends (_a40 = i4, _options_dec2 = [n4({ attribute: false
         return b2`
         <div
           class="Popup"
+          ?data-align-inner="${this.alignItemToTrigger && this.value !== ""}"
           ?data-starting-style="${portal.isStarting}"
           ?data-ending-style="${portal.isEnding}"
         >
@@ -15088,6 +15179,7 @@ _options2 = new WeakMap();
 _value15 = new WeakMap();
 _placeholder4 = new WeakMap();
 _disabled19 = new WeakMap();
+_alignItemToTrigger = new WeakMap();
 _name7 = new WeakMap();
 _highlightedIndex3 = new WeakMap();
 _DuiSelect_instances = new WeakSet();
@@ -15133,6 +15225,7 @@ __decorateElement(_init40, 4, "options", _options_dec2, DuiSelect, _options2);
 __decorateElement(_init40, 4, "value", _value_dec15, DuiSelect, _value15);
 __decorateElement(_init40, 4, "placeholder", _placeholder_dec4, DuiSelect, _placeholder4);
 __decorateElement(_init40, 4, "disabled", _disabled_dec19, DuiSelect, _disabled19);
+__decorateElement(_init40, 4, "alignItemToTrigger", _alignItemToTrigger_dec, DuiSelect, _alignItemToTrigger);
 __decorateElement(_init40, 4, "name", _name_dec7, DuiSelect, _name7);
 _b29 = __decorateElement(_init40, 20, "#highlightedIndex", _highlightedIndex_dec3, _DuiSelect_instances, _highlightedIndex3), highlightedIndex_get3 = _b29.get, highlightedIndex_set3 = _b29.set;
 __decoratorMetadata(_init40, DuiSelect);
@@ -15149,6 +15242,7 @@ var styles38 = i`
   :host([orientation="vertical"]) {
     display: inline-block;
     align-self: stretch;
+    height: 100%;
   }
 
   [part="root"] {
@@ -15249,16 +15343,17 @@ var portalPopupStyles6 = [
     }
   `
 ];
-var _highlightedIndex_dec4, _disabled_dec20, _size_dec3, _appearance_dec, _variant_dec, _a42, _init42, _variant, _appearance, _size3, _disabled20, _highlightedIndex4, _b30, highlightedIndex_get4, highlightedIndex_set4, _DuiSplitButton_instances, _menuId2, _popup4, items_get2, _onActionClick, _onActionKeyDown, _onTriggerClick3, _onTriggerKeyDown2, _onItemSlotClick2, _onMenuMouseMove2, focusTrigger_fn2;
-var DuiSplitButton = class extends (_a42 = i4, _variant_dec = [n4({ reflect: true })], _appearance_dec = [n4({ reflect: true })], _size_dec3 = [n4({ reflect: true })], _disabled_dec20 = [n4({ type: Boolean, reflect: true })], _highlightedIndex_dec4 = [r5()], _a42) {
+var _highlightedIndex_dec4, _disabled_dec20, _popupMinWidth_dec2, _size_dec3, _appearance_dec, _variant_dec, _a42, _init42, _variant, _appearance, _size3, _popupMinWidth2, _disabled20, _highlightedIndex4, _b30, highlightedIndex_get4, highlightedIndex_set4, _DuiSplitButton_instances, _menuId2, _popup4, items_get2, _onActionClick, _onActionKeyDown, _onTriggerClick3, _onTriggerKeyDown2, _onItemSlotClick2, _onMenuMouseMove2, focusTrigger_fn2;
+var DuiSplitButton = class extends (_a42 = i4, _variant_dec = [n4({ reflect: true })], _appearance_dec = [n4({ reflect: true })], _size_dec3 = [n4({ reflect: true })], _popupMinWidth_dec2 = [n4({ attribute: "popup-min-width" })], _disabled_dec20 = [n4({ type: Boolean, reflect: true })], _highlightedIndex_dec4 = [r5()], _a42) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _DuiSplitButton_instances);
     __privateAdd(this, _variant, __runInitializers(_init42, 8, this, "")), __runInitializers(_init42, 11, this);
     __privateAdd(this, _appearance, __runInitializers(_init42, 12, this, "")), __runInitializers(_init42, 15, this);
     __privateAdd(this, _size3, __runInitializers(_init42, 16, this, "")), __runInitializers(_init42, 19, this);
-    __privateAdd(this, _disabled20, __runInitializers(_init42, 20, this, false)), __runInitializers(_init42, 23, this);
-    __privateAdd(this, _highlightedIndex4, __runInitializers(_init42, 24, this, -1)), __runInitializers(_init42, 27, this);
+    __privateAdd(this, _popupMinWidth2, __runInitializers(_init42, 20, this, "var(--space-28)")), __runInitializers(_init42, 23, this);
+    __privateAdd(this, _disabled20, __runInitializers(_init42, 24, this, false)), __runInitializers(_init42, 27, this);
+    __privateAdd(this, _highlightedIndex4, __runInitializers(_init42, 28, this, -1)), __runInitializers(_init42, 31, this);
     __privateAdd(this, _menuId2, `split-menu-${crypto.randomUUID().slice(0, 8)}`);
     __privateAdd(this, _popup4, new FloatingPortalController(this, {
       getAnchor: () => this.shadowRoot?.querySelector(".Root"),
@@ -15275,6 +15370,7 @@ var DuiSplitButton = class extends (_a42 = i4, _variant_dec = [n4({ reflect: tru
       renderPopup: (portal) => b2`
       <div
         class="Popup"
+        style="${this.popupMinWidth ? `min-width:${this.popupMinWidth}` : ""}"
         ?data-starting-style="${portal.isStarting}"
         ?data-ending-style="${portal.isEnding}"
       >
@@ -15457,6 +15553,7 @@ _init42 = __decoratorStart(_a42);
 _variant = new WeakMap();
 _appearance = new WeakMap();
 _size3 = new WeakMap();
+_popupMinWidth2 = new WeakMap();
 _disabled20 = new WeakMap();
 _highlightedIndex4 = new WeakMap();
 _DuiSplitButton_instances = new WeakSet();
@@ -15478,6 +15575,7 @@ focusTrigger_fn2 = function() {
 __decorateElement(_init42, 4, "variant", _variant_dec, DuiSplitButton, _variant);
 __decorateElement(_init42, 4, "appearance", _appearance_dec, DuiSplitButton, _appearance);
 __decorateElement(_init42, 4, "size", _size_dec3, DuiSplitButton, _size3);
+__decorateElement(_init42, 4, "popupMinWidth", _popupMinWidth_dec2, DuiSplitButton, _popupMinWidth2);
 __decorateElement(_init42, 4, "disabled", _disabled_dec20, DuiSplitButton, _disabled20);
 _b30 = __decorateElement(_init42, 20, "#highlightedIndex", _highlightedIndex_dec4, _DuiSplitButton_instances, _highlightedIndex4), highlightedIndex_get4 = _b30.get, highlightedIndex_set4 = _b30.set;
 __decoratorMetadata(_init42, DuiSplitButton);