@haiilo/catalyst 11.0.0 → 12.0.0

package/dist/components/cat-dropdown.js

@@ -4,5 +4,6 @@ const CatDropdown = CatDropdown$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatDropdown, defineCustomElement };
+//# sourceMappingURL=cat-dropdown.js.map
 
 //# sourceMappingURL=cat-dropdown.js.map

package/dist/components/cat-dropdown2.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, s as size, c as computePosition, o as offset, f as flip, b as shift } from './floating-ui.dom.esm.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom.js';
 import { t as tabbable, a as focusable, i as isTabbable, g as getTabIndex, b as isFocusable, f as firstTabbable } from './first-tabbable.js';
 
 /**
  * Auto-generated file. Do not edit directly.
  */
+
 const timeTransitionS = 125;
 
 /*!
@@ -62,7 +63,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (undefined !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -1042,7 +1043,6 @@ function getPotentiallyTabbable(element) {
 }
 
 const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem}.aligned ::slotted(nav){min-width:8rem;max-width:16rem}.justified ::slotted(nav){width:100%}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
-const CatDropdownStyle0 = catDropdownCss;
 
 let nextUniqueId = 0;
 const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement$1 {
@@ -1053,23 +1053,72 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.catOpen = createEvent(this, "catOpen", 7);
         this.catClose = createEvent(this, "catClose", 7);
         this.id = nextUniqueId++;
-        this.isOpen = false;
+        this._isOpen = false;
         /**
          * Tracking the origin of opening the dropdown and specify if initial focus should be set.
          * Currently we set it only when the origin is keyboard.
          * We might not need to track this in future when focus-visible support is improved across browsers
          */
         this.hasInitialFocus = false;
+        /**
+         * The placement of the dropdown.
+         */
         this.placement = 'bottom-start';
+        /**
+         * Make the dropdown match the width of the reference regardless of its
+         * contents. Note that this only applies to the minimum width of the
+         * dropdown. The maximum width is still limited by the viewport.
+         */
         this.justify = false;
+        /**
+         * Do not close the dropdown on outside clicks.
+         */
         this.noAutoClose = false;
+        /**
+         * Do not navigate focus inside the dropdown via vertical arrow keys.
+         */
         this.arrowNavigation = 'vertical';
+        /**
+         * Do not change the size of the dropdown to ensure it isn’t too big to fit
+         * in the viewport (or more specifically, its clipping context).
+         */
         this.noResize = false;
+        /**
+         * Allow overflow when dropdown is open.
+         */
         this.overflow = false;
+        /**
+         * No element in dropdown will receive focus when dropdown is open.
+         * By default, the first element in tab order will receive a focus.
+         * @deprecated
+         * Using noInitialFocus property would be a bad practice from a11y perspective.
+         * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.
+         * hasInitialFocus should resolve the cause of the original problem instead.
+         */
         this.noInitialFocus = false;
+        /**
+         * Trigger element will not receive focus when dropdown is closed.
+         */
         this.noReturnFocus = false;
+        /**
+         * Whether the dropdown trigger should be initialized only before first opening.
+         * Can be useful when trigger is rendered dynamically.
+         */
+        this.delayedTriggerInit = false;
+    }
+    /**
+     * Whether the dropdown is open.
+     * @readonly
+     */
+    get isOpen() {
+        return this._isOpen ?? false;
     }
     clickHandler(event) {
+        if (!this.trigger && this.delayedTriggerInit) {
+            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
+            this.initTrigger();
+            this.toggle();
+        }
         // hide dropdown on button clicks inside the dropdown content
         const path = event.composedPath();
         if (!this.noAutoClose &&
@@ -1086,22 +1135,25 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
      * Toggles the dropdown.
      */
     async toggle() {
-        this.isOpen ? this.close() : this.open();
+        this._isOpen ? this.close() : this.open();
     }
     /**
      * Opens the dropdown.
      * @param isFocusVisible is dropdown should receive visible focus when it's opened.
      */
     async open(isFocusVisible) {
+        if (!this.trigger && this.delayedTriggerInit) {
+            this.initTrigger();
+        }
         if (this.isOpen === null || this.isOpen) {
             return; // busy or open
         }
-        this.isOpen = null;
+        this._isOpen = null;
         this.content.style.display = 'block';
         this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
         // give CSS transition time to apply
         setTimeout(() => {
-            this.isOpen = true;
+            this._isOpen = true;
             this.content.classList.add('show');
             this.trigger?.setAttribute('aria-expanded', 'true');
             this.trap = this.trap
@@ -1146,15 +1198,15 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
      * Closes the dropdown.
      */
     async close() {
-        if (!this.isOpen) {
+        if (!this._isOpen) {
             return; // busy or closed
         }
-        this.isOpen = null;
+        this._isOpen = null;
         this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
-            this.isOpen = false;
+            this._isOpen = false;
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
@@ -1163,10 +1215,12 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     }
     componentDidLoad() {
         this.initAnchor();
-        this.initTrigger();
+        if (!this.delayedTriggerInit) {
+            this.initTrigger();
+        }
     }
     render() {
-        return (h(Host, { key: '05019873f2b9ae46bfbe4c34c1c9b7349dddeb92' }, h("slot", { key: '0760052c1d65818b5a4f8c8bf8dc587da27ec5b3', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '1ab727c6bc362c9a0d233fd1c0d3db76e04b2f1c', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '02c216317f4140217578020d83fb853194993d96', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8c31f2d7b16bbdfdc528938b5dd09fa84eeb80c3', name: "content" }))));
+        return (h(Host, { key: '5206026fafea4b080f8890bd89b12885524cccd9' }, h("slot", { key: '316ef973ba544f937217de5d27af51e24a55795d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '95b9039dd8a88eb79836abe428bd97403f10d886', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'a0067efa6a259faa2c89ed092cb1f467a756e0f3', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6904a4c7e24ed5fd28a48735ec82d9cab26e71e2', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1260,7 +1314,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     hasAttribute(elem, attr) {
         return elem instanceof HTMLElement$1 && elem.hasAttribute(attr);
     }
-    static get style() { return CatDropdownStyle0; }
+    static get style() { return catDropdownCss; }
 }, [1, "cat-dropdown", {
         "placement": [1],
         "justify": [4],
@@ -1269,7 +1323,9 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "noResize": [4, "no-resize"],
         "overflow": [4],
         "noInitialFocus": [4, "no-initial-focus"],
+        "isOpen": [2052, "is-open"],
         "noReturnFocus": [4, "no-return-focus"],
+        "delayedTriggerInit": [4, "delayed-trigger-init"],
         "toggle": [64],
         "open": [64],
         "close": [64]
@@ -1290,5 +1346,6 @@ function defineCustomElement() {
 }
 
 export { CatDropdown as C, defineCustomElement as d };
+//# sourceMappingURL=cat-dropdown2.js.map
 
 //# sourceMappingURL=cat-dropdown2.js.map