@db-ux/wc-core-components 4.11.1 → 4.12.1

package/dist/collection/index.js

@@ -1,97 +1,97 @@
-export * from './components/accordion';
-export * from './components/accordion-item';
-export * from './components/accordion-item/model';
-export * from './components/accordion/model';
-export * from './components/badge';
-export * from './components/badge/model';
-export * from './components/brand';
-export * from './components/brand/model';
-export * from './components/button';
-export * from './components/button/model';
-export * from './components/card';
-export * from './components/card/model';
-export * from './components/checkbox';
-export * from './components/checkbox/model';
-export * from './components/custom-button';
-export * from './components/custom-button/model';
-export * from './components/custom-select';
-export * from './components/custom-select-dropdown';
-export * from './components/custom-select-dropdown/model';
-export * from './components/custom-select-form-field';
-export * from './components/custom-select-form-field/model';
-export * from './components/custom-select-list';
-export * from './components/custom-select-list-item';
-export * from './components/custom-select-list-item/model';
-export * from './components/custom-select-list/model';
-export * from './components/custom-select/model';
-export * from './components/divider';
-export * from './components/divider/model';
-export * from './components/drawer';
-export * from './components/drawer/model';
-export * from './components/header';
-export * from './components/header/model';
-export * from './components/icon';
-export * from './components/icon/model';
-export * from './components/infotext';
-export * from './components/infotext/model';
-export * from './components/input';
-export * from './components/input/model';
-export * from './components/link';
-export * from './components/link/model';
-export * from './components/navigation';
-export * from './components/navigation-item';
-export * from './components/navigation-item/model';
-export * from './components/navigation/model';
-export * from './components/notification';
-export * from './components/notification/model';
-export * from './components/page';
-export * from './components/page/model';
-export * from './components/popover';
-export * from './components/popover/model';
-export * from './components/radio';
-export * from './components/radio/model';
-export * from './components/section';
-export * from './components/section/model';
-export * from './components/select';
-export * from './components/select/model';
-export * from './components/stack';
-export * from './components/stack/model';
-export * from './components/switch';
-export * from './components/switch/model';
-export * from './components/tab-item';
-export * from './components/tab-item/model';
-export * from './components/tab-list';
-export * from './components/tab-list/model';
-export * from './components/tab-panel';
-export * from './components/tab-panel/model';
-export * from './components/table';
-export * from './components/table-body';
-export * from './components/table-body/model';
-export * from './components/table-caption';
-export * from './components/table-caption/model';
-export * from './components/table-data-cell';
-export * from './components/table-data-cell/model';
-export * from './components/table-footer';
-export * from './components/table-footer/model';
-export * from './components/table-head';
-export * from './components/table-head/model';
-export * from './components/table-header-cell';
-export * from './components/table-header-cell/model';
-export * from './components/table-row';
-export * from './components/table-row/model';
-export * from './components/table/model';
-export * from './components/tabs';
-export * from './components/tabs/model';
-export * from './components/tag';
-export * from './components/tag/model';
-export * from './components/textarea';
-export * from './components/textarea/model';
-export * from './components/tooltip';
-export * from './components/tooltip/model';
-export * from './shared/constants';
-export * from './shared/model';
-export * from './utils/document-click-listener';
-export * from './utils/document-scroll-listener';
-export * from './utils/floating-components';
-export * from './utils/index';
-export * from './utils/navigation';
+export * from './components/accordion/index.js';
+export * from './components/accordion-item/index.js';
+export * from './components/accordion-item/model.js';
+export * from './components/accordion/model.js';
+export * from './components/badge/index.js';
+export * from './components/badge/model.js';
+export * from './components/brand/index.js';
+export * from './components/brand/model.js';
+export * from './components/button/index.js';
+export * from './components/button/model.js';
+export * from './components/card/index.js';
+export * from './components/card/model.js';
+export * from './components/checkbox/index.js';
+export * from './components/checkbox/model.js';
+export * from './components/custom-button/index.js';
+export * from './components/custom-button/model.js';
+export * from './components/custom-select/index.js';
+export * from './components/custom-select-dropdown/index.js';
+export * from './components/custom-select-dropdown/model.js';
+export * from './components/custom-select-form-field/index.js';
+export * from './components/custom-select-form-field/model.js';
+export * from './components/custom-select-list/index.js';
+export * from './components/custom-select-list-item/index.js';
+export * from './components/custom-select-list-item/model.js';
+export * from './components/custom-select-list/model.js';
+export * from './components/custom-select/model.js';
+export * from './components/divider/index.js';
+export * from './components/divider/model.js';
+export * from './components/drawer/index.js';
+export * from './components/drawer/model.js';
+export * from './components/header/index.js';
+export * from './components/header/model.js';
+export * from './components/icon/index.js';
+export * from './components/icon/model.js';
+export * from './components/infotext/index.js';
+export * from './components/infotext/model.js';
+export * from './components/input/index.js';
+export * from './components/input/model.js';
+export * from './components/link/index.js';
+export * from './components/link/model.js';
+export * from './components/navigation/index.js';
+export * from './components/navigation-item/index.js';
+export * from './components/navigation-item/model.js';
+export * from './components/navigation/model.js';
+export * from './components/notification/index.js';
+export * from './components/notification/model.js';
+export * from './components/page/index.js';
+export * from './components/page/model.js';
+export * from './components/popover/index.js';
+export * from './components/popover/model.js';
+export * from './components/radio/index.js';
+export * from './components/radio/model.js';
+export * from './components/section/index.js';
+export * from './components/section/model.js';
+export * from './components/select/index.js';
+export * from './components/select/model.js';
+export * from './components/stack/index.js';
+export * from './components/stack/model.js';
+export * from './components/switch/index.js';
+export * from './components/switch/model.js';
+export * from './components/tab-item/index.js';
+export * from './components/tab-item/model.js';
+export * from './components/tab-list/index.js';
+export * from './components/tab-list/model.js';
+export * from './components/tab-panel/index.js';
+export * from './components/tab-panel/model.js';
+export * from './components/table/index.js';
+export * from './components/table-body/index.js';
+export * from './components/table-body/model.js';
+export * from './components/table-caption/index.js';
+export * from './components/table-caption/model.js';
+export * from './components/table-data-cell/index.js';
+export * from './components/table-data-cell/model.js';
+export * from './components/table-footer/index.js';
+export * from './components/table-footer/model.js';
+export * from './components/table-head/index.js';
+export * from './components/table-head/model.js';
+export * from './components/table-header-cell/index.js';
+export * from './components/table-header-cell/model.js';
+export * from './components/table-row/index.js';
+export * from './components/table-row/model.js';
+export * from './components/table/model.js';
+export * from './components/tabs/index.js';
+export * from './components/tabs/model.js';
+export * from './components/tag/index.js';
+export * from './components/tag/model.js';
+export * from './components/textarea/index.js';
+export * from './components/textarea/model.js';
+export * from './components/tooltip/index.js';
+export * from './components/tooltip/model.js';
+export * from './shared/constants.js';
+export * from './shared/model.js';
+export * from './utils/document-click-listener.js';
+export * from './utils/document-scroll-listener.js';
+export * from './utils/floating-components.js';
+export * from './utils/index.js';
+export * from './utils/navigation.js';

package/dist/collection/utils/document-click-listener.js

@@ -1,4 +1,4 @@
-import { uuid } from "./index";
+import { uuid } from "./index.js";
 export class DocumentClickListener {
     static runCallbacks(event) {
         for (const callback of Object.values(DocumentClickListener.callbacks)) {

package/dist/collection/utils/document-scroll-listener.js

@@ -1,4 +1,4 @@
-import { uuid } from "./index";
+import { uuid } from "./index.js";
 export class DocumentScrollListener {
     static runCallbacks(event) {
         for (const callback of Object.values(DocumentScrollListener.callbacks)) {

package/dist/collection/utils/floating-components.js

@@ -62,24 +62,69 @@ export const handleDataOutside = (el) => {
 export const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
-    // We skip this if we are in mobile it's already fixed
+    const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // mobile max-inline-size guard and overflows the viewport.
+    element.style.inlineSize = '';
+    element.style.minInlineSize = '';
+    // We skip the rest if we are in mobile, it's already fixed via CSS.
     if (getComputedStyle(element).zIndex === '9999')
         return;
-    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
-    const fullWidth = element.dataset['width'] === 'full';
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
+    // For auto width the dropdown is forced to be at least as wide as the trigger,
+    // but clamped to its own max-inline-size: CSS lets a min-inline-size override
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
     if (fullWidth) {
         element.style.inlineSize = `${width}px`;
     }
-    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
         element.style.insetInlineStart = `${left}px`;
     }
-    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        element.style.insetInlineStart = `${right - childWidth}px`;
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
     }
-    if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
+    if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('top')) {
         element.style.insetBlockStart = `${top - childHeight}px`;
     }
-    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
+    else if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('bottom')) {
         element.style.insetBlockStart = `${bottom}px`;
     }
     element.style.position = 'fixed';

package/dist/collection/utils/form-components.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { delay } from "./index";
+import { delay } from "./index.js";
 const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
 export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
     var _a;

package/dist/collection/utils/navigation.js

@@ -1,4 +1,4 @@
-import { handleDataOutside } from "./floating-components";
+import { handleDataOutside } from "./floating-components.js";
 export const isEventTargetNavigationItem = (event) => {
     var _a, _b;
     const { target } = event;

package/dist/custom-elements.json

@@ -10817,11 +10817,35 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "backdropPointerDown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "observer",
               "default": "undefined"
             },
+            {
+              "kind": "method",
+              "name": "isNotModal"
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropPointerDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleClose",
@@ -26679,7 +26703,7 @@
           "name": "CustomButtonCheckbox",
           "declaration": {
             "name": "CustomButtonCheckbox",
-            "module": "src/components/custom-button/examples/checkbox.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/checkbox.example.tsx"
           }
         },
         {
@@ -26687,7 +26711,7 @@
           "name": "custom-button-checkbox",
           "declaration": {
             "name": "CustomButtonCheckbox",
-            "module": "src/components/custom-button/examples/checkbox.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/checkbox.example.tsx"
           }
         }
       ]
@@ -26754,7 +26778,7 @@
           "name": "CustomButtonDensity",
           "declaration": {
             "name": "CustomButtonDensity",
-            "module": "src/components/custom-button/examples/density.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/density.example.tsx"
           }
         },
         {
@@ -26762,7 +26786,7 @@
           "name": "custom-button-density",
           "declaration": {
             "name": "CustomButtonDensity",
-            "module": "src/components/custom-button/examples/density.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/density.example.tsx"
           }
         }
       ]
@@ -26829,7 +26853,7 @@
           "name": "CustomButtonDisabled",
           "declaration": {
             "name": "CustomButtonDisabled",
-            "module": "src/components/custom-button/examples/disabled.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/disabled.example.tsx"
           }
         },
         {
@@ -26837,7 +26861,7 @@
           "name": "custom-button-disabled",
           "declaration": {
             "name": "CustomButtonDisabled",
-            "module": "src/components/custom-button/examples/disabled.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/disabled.example.tsx"
           }
         }
       ]
@@ -26904,7 +26928,7 @@
           "name": "CustomButtonMultiLineText",
           "declaration": {
             "name": "CustomButtonMultiLineText",
-            "module": "src/components/custom-button/examples/multi-line-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/multi-line-text.example.tsx"
           }
         },
         {
@@ -26912,7 +26936,7 @@
           "name": "custom-button-multi-line-text",
           "declaration": {
             "name": "CustomButtonMultiLineText",
-            "module": "src/components/custom-button/examples/multi-line-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/multi-line-text.example.tsx"
           }
         }
       ]
@@ -26979,7 +27003,7 @@
           "name": "CustomButtonNoText",
           "declaration": {
             "name": "CustomButtonNoText",
-            "module": "src/components/custom-button/examples/no-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/no-text.example.tsx"
           }
         },
         {
@@ -26987,7 +27011,7 @@
           "name": "custom-button-no-text",
           "declaration": {
             "name": "CustomButtonNoText",
-            "module": "src/components/custom-button/examples/no-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/no-text.example.tsx"
           }
         }
       ]
@@ -27054,7 +27078,7 @@
           "name": "CustomButtonShowIconLeading",
           "declaration": {
             "name": "CustomButtonShowIconLeading",
-            "module": "src/components/custom-button/examples/show-icon-leading.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-leading.example.tsx"
           }
         },
         {
@@ -27062,7 +27086,7 @@
           "name": "custom-button-show-icon-leading",
           "declaration": {
             "name": "CustomButtonShowIconLeading",
-            "module": "src/components/custom-button/examples/show-icon-leading.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-leading.example.tsx"
           }
         }
       ]
@@ -27129,7 +27153,7 @@
           "name": "CustomButtonShowIconTrailing",
           "declaration": {
             "name": "CustomButtonShowIconTrailing",
-            "module": "src/components/custom-button/examples/show-icon-trailing.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-trailing.example.tsx"
           }
         },
         {
@@ -27137,7 +27161,7 @@
           "name": "custom-button-show-icon-trailing",
           "declaration": {
             "name": "CustomButtonShowIconTrailing",
-            "module": "src/components/custom-button/examples/show-icon-trailing.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-trailing.example.tsx"
           }
         }
       ]
@@ -27204,7 +27228,7 @@
           "name": "CustomButtonSize",
           "declaration": {
             "name": "CustomButtonSize",
-            "module": "src/components/custom-button/examples/size.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/size.example.tsx"
           }
         },
         {
@@ -27212,7 +27236,7 @@
           "name": "custom-button-size",
           "declaration": {
             "name": "CustomButtonSize",
-            "module": "src/components/custom-button/examples/size.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/size.example.tsx"
           }
         }
       ]
@@ -27279,7 +27303,7 @@
           "name": "CustomButtonVariant",
           "declaration": {
             "name": "CustomButtonVariant",
-            "module": "src/components/custom-button/examples/variant.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/variant.example.tsx"
           }
         },
         {
@@ -27287,7 +27311,7 @@
           "name": "custom-button-variant",
           "declaration": {
             "name": "CustomButtonVariant",
-            "module": "src/components/custom-button/examples/variant.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/variant.example.tsx"
           }
         }
       ]
@@ -27354,7 +27378,7 @@
           "name": "CustomButtonWidth",
           "declaration": {
             "name": "CustomButtonWidth",
-            "module": "src/components/custom-button/examples/width.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/width.example.tsx"
           }
         },
         {
@@ -27362,7 +27386,7 @@
           "name": "custom-button-width",
           "declaration": {
             "name": "CustomButtonWidth",
-            "module": "src/components/custom-button/examples/width.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/width.example.tsx"
           }
         }
       ]
@@ -27608,6 +27632,81 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dropdown-width-auto.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CustomSelectDropdownWidthAuto",
+          "members": [
+            {
+              "kind": "field",
+              "name": "rootElement",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "custom-select-dropdown-width-auto",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CustomSelectDropdownWidthAuto",
+          "declaration": {
+            "name": "CustomSelectDropdownWidthAuto",
+            "module": "src/components/custom-select/examples/dropdown-width-auto.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "custom-select-dropdown-width-auto",
+          "declaration": {
+            "name": "CustomSelectDropdownWidthAuto",
+            "module": "src/components/custom-select/examples/dropdown-width-auto.example.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dropdown-width.example.tsx",