@haiilo/catalyst 10.31.0 → 10.32.0

package/dist/esm/cat-alert_30.entry.js

@@ -1305,7 +1305,7 @@ const CatButtonGroup = class {
 };
 CatButtonGroup.style = CatButtonGroupStyle0;
 
-const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem;box-shadow:0 0 0 1px rgb(var(--cat-border-color-card, 140, 140, 140, 0.12))}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
 const CatCardStyle0 = catCardCss;
 
 const CatCard = class {
@@ -8667,6 +8667,12 @@ const CatDropdown = class {
         this.catClose = createEvent(this, "catClose", 7);
         this.id = nextUniqueId$8++;
         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;
         this.placement = 'bottom-start';
         this.noAutoClose = false;
         this.arrowNavigation = 'vertical';
@@ -8680,6 +8686,7 @@ const CatDropdown = class {
         // interaction because the element might still be hidden (and thus not
         // tabbable) if contained in another Stencil web component
         if (!this.trigger) {
+            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
             this.initTrigger();
             this.toggle();
         }
@@ -8703,8 +8710,9 @@ const CatDropdown = class {
     }
     /**
      * Opens the dropdown.
+     * @param isFocusVisible is dropdown should receive visible focus when it's opened.
      */
-    async open() {
+    async open(isFocusVisible) {
         // we need to delay the initialization of the trigger until first
         // interaction because the element might still be hidden (and thus not
         // tabbable) if contained in another Stencil web component
@@ -8716,6 +8724,7 @@ const CatDropdown = class {
         }
         this.isOpen = null;
         this.content.style.display = 'block';
+        this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
         // give CSS transition time to apply
         setTimeout(() => {
             this.isOpen = true;
@@ -8752,7 +8761,9 @@ const CatDropdown = class {
                         }
                         return event.key === 'Tab' && event.shiftKey;
                     },
-                    initialFocus: () => (this.noInitialFocus ? false : undefined)
+                    initialFocus: () => {
+                        return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;
+                    }
                 });
             this.trap.activate();
         });
@@ -8777,7 +8788,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: '3ead90dae1ac492a0cb592d7cf7a50fd42f26ca7' }, h("slot", { key: 'b91bba7772b2a90850be2ac85b82ec7691ae031d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'f7e07ffed988133cbccafb8f8c73fdb52757d9fb', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '868a0578cd30cac249959e0961b0425e56048af9', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '19fb6b5b92599ed1ae21aac591271957a6e7b060', name: "content" }))));
+        return (h(Host, { key: '1a87f171daed4f9eccc40a303f3aba45f3501128' }, h("slot", { key: 'f74085056470832d32434ebcacdb6d9532177e86', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'fdf8879c10e6ad7179487480d2ff0f890bf5f8da', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '1c6b50433220e084ea096c38e14c17625c52e5e5', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '9c8de61eb11c1bb0771b8f0b6a9d7f7f574c928e', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();
@@ -8791,11 +8802,17 @@ const CatDropdown = class {
         this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');
         this.trigger.setAttribute('aria-expanded', 'false');
         this.trigger.setAttribute('aria-controls', this.contentId);
-        this.trigger.addEventListener('click', () => this.toggle());
+        this.trigger.addEventListener('click', (event) => {
+            this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
+            this.toggle();
+        });
         if (!this.anchor) {
             autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
         }
     }
+    isEventOriginFromKeyboard(event) {
+        return event.detail === 0;
+    }
     initAnchor() {
         this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
         if (this.anchor) {