@deepfuture/dui-components 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
   "type": "module",
   "license": "MIT",
@@ -194,7 +194,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.20",
+    "@deepfuture/dui-core": "0.0.21",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/preview-card/preview-card-popup.js

@@ -142,6 +142,7 @@ let DuiPreviewCardPopup = (() => {
             offset: 8,
             styles: portalPopupStyles,
             contentContainer: ".PreviewCardContent",
+            forwardProperties: ["--preview-card-popup-padding"],
             onPosition: ({ placement }) => {
                 const actualSide = placement.split("-")[0];
                 if (actualSide !== this.#side) {

package/scroll-area/scroll-area.d.ts

@@ -11,7 +11,7 @@ type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
  *
  * @cssprop [--scroll-area-max-height] - Max-height constraint.
  * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
- * @cssprop [--scroll-fade-color] - Fade overlay color.
+ * @cssprop [--scroll-fade-size] - Distance over which the top fade goes from transparent to opaque (default: 1.5rem).
  */
 export declare class DuiScrollArea extends LitElement {
     #private;

package/scroll-area/scroll-area.js

@@ -69,14 +69,9 @@ const styles = css `
     }
   }
 
-  .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 {
@@ -147,7 +142,7 @@ const styles = css `
  *
  * @cssprop [--scroll-area-max-height] - Max-height constraint.
  * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
- * @cssprop [--scroll-fade-color] - Fade overlay color.
+ * @cssprop [--scroll-fade-size] - Distance over which the top fade goes from transparent to opaque (default: 1.5rem).
  */
 let DuiScrollArea = (() => {
     var _a;
@@ -541,13 +536,7 @@ let DuiScrollArea = (() => {
         ?data-has-overflow-y="${this.#hasOverflowY}"
         ?data-scrolling="${this.#scrolling}"
       >
-        ${this.fade
-                ? html `<div
-              class="ScrollFade"
-              ?data-scrolled="${!this.#isAtTop}"
-            ></div>`
-                : nothing}
-        <div class="Viewport" part="viewport" @scroll="${this.#onScroll}">
+        <div class="Viewport" part="viewport" ?data-scrolled="${!this.#isAtTop}" @scroll="${this.#onScroll}">
           <slot></slot>
         </div>
         ${this.#renderVerticalScrollbar()} ${this.#renderHorizontalScrollbar()}

package/select/select.d.ts

@@ -32,6 +32,8 @@ export declare class DuiSelect extends LitElement {
     accessor placeholder: string;
     /** Whether the select is disabled. */
     accessor disabled: boolean;
+    /** Position the popup so the selected item overlays the trigger (macOS-style). */
+    accessor alignItemToTrigger: boolean;
     /** Name for form submission. */
     accessor name: string;
     willUpdate(): void;

package/select/select.js

@@ -141,6 +141,9 @@ let DuiSelect = (() => {
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
+    let _alignItemToTrigger_decorators;
+    let _alignItemToTrigger_initializers = [];
+    let _alignItemToTrigger_extraInitializers = [];
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
@@ -155,12 +158,14 @@ let DuiSelect = (() => {
             _value_decorators = [property({ type: String })];
             _placeholder_decorators = [property({ type: String })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _alignItemToTrigger_decorators = [property({ type: Boolean, attribute: "align-item-to-trigger", reflect: true })];
             _name_decorators = [property({ type: String })];
             _private_highlightedIndex_decorators = [state()];
             __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _alignItemToTrigger_decorators, { kind: "accessor", name: "alignItemToTrigger", static: false, private: false, access: { has: obj => "alignItemToTrigger" in obj, get: obj => obj.alignItemToTrigger, set: (obj, value) => { obj.alignItemToTrigger = value; } }, metadata: _metadata }, _alignItemToTrigger_initializers, _alignItemToTrigger_extraInitializers);
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
             __esDecorate(this, _private_highlightedIndex_descriptor = { get: __setFunctionName(function () { return this.#highlightedIndex_accessor_storage; }, "#highlightedIndex", "get"), set: __setFunctionName(function (value) { this.#highlightedIndex_accessor_storage = value; }, "#highlightedIndex", "set") }, _private_highlightedIndex_decorators, { kind: "accessor", name: "#highlightedIndex", static: false, private: true, access: { has: obj => #highlightedIndex in obj, get: obj => obj.#highlightedIndex, set: (obj, value) => { obj.#highlightedIndex = value; } }, metadata: _metadata }, _private_highlightedIndex_initializers, _private_highlightedIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -189,7 +194,11 @@ let DuiSelect = (() => {
         /** Whether the select is disabled. */
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
-        #name_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _name_initializers, ""));
+        #alignItemToTrigger_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _alignItemToTrigger_initializers, true));
+        /** Position the popup so the selected item overlays the trigger (macOS-style). */
+        get alignItemToTrigger() { return this.#alignItemToTrigger_accessor_storage; }
+        set alignItemToTrigger(value) { this.#alignItemToTrigger_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _alignItemToTrigger_extraInitializers), __runInitializers(this, _name_initializers, ""));
         /** Name for form submission. */
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
@@ -203,6 +212,18 @@ let DuiSelect = (() => {
             matchWidth: false,
             minMatchWidth: true,
             styles: portalPopupStyles,
+            alignToInner: () => {
+                if (!this.alignItemToTrigger)
+                    return null;
+                const root = this.#popup.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: () => {
                 this.#highlightedIndex = this.#selectedIndex;
             },
@@ -213,6 +234,7 @@ let DuiSelect = (() => {
                 return html `
         <div
           class="Popup"
+          ?data-align-inner="${this.alignItemToTrigger && this.value !== ""}"
           ?data-starting-style="${portal.isStarting}"
           ?data-ending-style="${portal.isEnding}"
         >

package/separator/separator.js

@@ -44,6 +44,7 @@ const styles = css `
   :host([orientation="vertical"]) {
     display: inline-block;
     align-self: stretch;
+    height: 100%;
   }
 
   [part="root"] {

package/split-button/split-button.d.ts

@@ -26,6 +26,8 @@ export declare class DuiSplitButton extends LitElement {
     accessor appearance: string;
     /** Size — mapped to theme styles (e.g. xs, sm, md, lg). */
     accessor size: string;
+    /** Sets `min-width` on the popup panel (e.g. `"200px"`). Defaults to `"var(--space-28)"`. */
+    accessor popupMinWidth: string;
     /** Whether the entire split button is disabled. */
     accessor disabled: boolean;
     protected updated(): void;

package/split-button/split-button.js

@@ -136,6 +136,9 @@ let DuiSplitButton = (() => {
     let _size_decorators;
     let _size_initializers = [];
     let _size_extraInitializers = [];
+    let _popupMinWidth_decorators;
+    let _popupMinWidth_initializers = [];
+    let _popupMinWidth_extraInitializers = [];
     let _disabled_decorators;
     let _disabled_initializers = [];
     let _disabled_extraInitializers = [];
@@ -149,11 +152,13 @@ let DuiSplitButton = (() => {
             _variant_decorators = [property({ reflect: true })];
             _appearance_decorators = [property({ reflect: true })];
             _size_decorators = [property({ reflect: true })];
+            _popupMinWidth_decorators = [property({ attribute: "popup-min-width" })];
             _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _private_highlightedIndex_decorators = [state()];
             __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
             __esDecorate(this, null, _appearance_decorators, { kind: "accessor", name: "appearance", static: false, private: false, access: { has: obj => "appearance" in obj, get: obj => obj.appearance, set: (obj, value) => { obj.appearance = value; } }, metadata: _metadata }, _appearance_initializers, _appearance_extraInitializers);
             __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _popupMinWidth_decorators, { kind: "accessor", name: "popupMinWidth", static: false, private: false, access: { has: obj => "popupMinWidth" in obj, get: obj => obj.popupMinWidth, set: (obj, value) => { obj.popupMinWidth = value; } }, metadata: _metadata }, _popupMinWidth_initializers, _popupMinWidth_extraInitializers);
             __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, _private_highlightedIndex_descriptor = { get: __setFunctionName(function () { return this.#highlightedIndex_accessor_storage; }, "#highlightedIndex", "get"), set: __setFunctionName(function (value) { this.#highlightedIndex_accessor_storage = value; }, "#highlightedIndex", "set") }, _private_highlightedIndex_decorators, { kind: "accessor", name: "#highlightedIndex", static: false, private: true, access: { has: obj => #highlightedIndex in obj, get: obj => obj.#highlightedIndex, set: (obj, value) => { obj.#highlightedIndex = value; } }, metadata: _metadata }, _private_highlightedIndex_initializers, _private_highlightedIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -172,7 +177,11 @@ let DuiSplitButton = (() => {
         /** Size — mapped to theme styles (e.g. xs, sm, md, lg). */
         get size() { return this.#size_accessor_storage; }
         set size(value) { this.#size_accessor_storage = value; }
-        #disabled_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        #popupMinWidth_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _popupMinWidth_initializers, "var(--space-28)"));
+        /** Sets `min-width` on the popup panel (e.g. `"200px"`). Defaults to `"var(--space-28)"`. */
+        get popupMinWidth() { return this.#popupMinWidth_accessor_storage; }
+        set popupMinWidth(value) { this.#popupMinWidth_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _popupMinWidth_extraInitializers), __runInitializers(this, _disabled_initializers, false));
         /** Whether the entire split button is disabled. */
         get disabled() { return this.#disabled_accessor_storage; }
         set disabled(value) { this.#disabled_accessor_storage = value; }
@@ -195,6 +204,7 @@ let DuiSplitButton = (() => {
             renderPopup: (portal) => html `
       <div
         class="Popup"
+        style="${this.popupMinWidth ? `min-width:${this.popupMinWidth}` : ""}"
         ?data-starting-style="${portal.isStarting}"
         ?data-ending-style="${portal.isEnding}"
       >