@florid-kit/components 0.8.37 → 0.8.38

package/index.js

@@ -639,6 +639,10 @@
 			}
 		}
 
+		.icon-button:focus-visible {
+			outline: none;
+		}
+
 		.sr-only {
 			display: none;
 		}
@@ -803,7 +807,7 @@
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const ot=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),ot(i,t);return!0},bt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},ne=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),uo(t)}};function ho(o){this._$AN!==void 0?(bt(this),this._$AM=o,ne(this)):this._$AM=o}function po(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)ot(n[r],!1),bt(n[r]);else n!=null&&(ot(n,!1),bt(n));else ot(this,o)}const uo=o=>{o.type==zt.CHILD&&(o._$AP??(o._$AP=po),o._$AQ??(o._$AQ=ho))};class vo extends Ht{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),ne(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(ot(this,t),bt(this))}setValue(t){if(co(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class bo extends vo{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class fo extends bo{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class go extends fo{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const Jt=Dt(go);var yo=Object.defineProperty,mo=Object.getOwnPropertyDescriptor,f=(o,t,e,n)=>{for(var i=n>1?void 0:n?mo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&yo(t,e,i),i};let u=class extends v{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.closeButtonLabel="Close the modal",this.firstButtonLabel="Close",this.firstButtonVariant="primary",this.firstButtonProps={},this.onFirstButtonClickClose=!1,this.secondButtonLabel="",this.secondButtonVariant="secondary",this.secondButtonProps={},this.onSecondButtonClickClose=!1,this.disablePortal=!1,this.zIndex=99,this.initialized=!1,this.previousFocusedElement=null,this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.closePanel())}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),window.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0})}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}trapFocus(o){const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],n=t[t.length-1];o.shiftKey&&document.activeElement===e?(o.preventDefault(),n.focus()):!o.shiftKey&&document.activeElement===n&&(o.preventDefault(),e.focus())}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");return o?Array.from(o.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(t=>!t.hasAttribute("disabled")):[]}openPanel(){this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open"),this.updateComplete.then(()=>{var o,t;if(this.showHeader)(t=(o=this.shadowRoot)==null?void 0:o.querySelector(".panel"))==null||t.focus();else{const e=this.getFocusableElements()[0];e==null||e.focus()}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var o;this.open=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),(o=this.previousFocusedElement)==null||o.focus(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onFirstButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"first",target:o.target}})))}handleSecondClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onSecondButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"second",target:o.target}})))}updated(){this.style.setProperty("--z-overlay",`${this.zIndex||99}`),this.style.setProperty("--z-panel",`${this.zIndex?this.zIndex+1:99}`)}render(){return l`
+ */const ot=(o,t)=>{var n;const e=o._$AN;if(e===void 0)return!1;for(const i of e)(n=i._$AO)==null||n.call(i,t,!1),ot(i,t);return!0},bt=o=>{let t,e;do{if((t=o._$AM)===void 0)break;e=t._$AN,e.delete(o),o=t}while((e==null?void 0:e.size)===0)},ne=o=>{for(let t;t=o._$AM;o=t){let e=t._$AN;if(e===void 0)t._$AN=e=new Set;else if(e.has(o))break;e.add(o),uo(t)}};function ho(o){this._$AN!==void 0?(bt(this),this._$AM=o,ne(this)):this._$AM=o}function po(o,t=!1,e=0){const n=this._$AH,i=this._$AN;if(i!==void 0&&i.size!==0)if(t)if(Array.isArray(n))for(let r=e;r<n.length;r++)ot(n[r],!1),bt(n[r]);else n!=null&&(ot(n,!1),bt(n));else ot(this,o)}const uo=o=>{o.type==zt.CHILD&&(o._$AP??(o._$AP=po),o._$AQ??(o._$AQ=ho))};class vo extends Ht{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,n){super._$AT(t,e,n),ne(this),this.isConnected=t._$AU}_$AO(t,e=!0){var n,i;t!==this.isConnected&&(this.isConnected=t,t?(n=this.reconnected)==null||n.call(this):(i=this.disconnected)==null||i.call(this)),e&&(ot(this,t),bt(this))}setValue(t){if(co(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class bo extends vo{constructor(){super(...arguments),this.prevData={}}render(t){return d}update(t,[e]){var n;this.element!==t.element&&(this.element=t.element),this.host=((n=t.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(e),this.groom(e),this.prevData={...e}}apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];r!==e[i]&&(n[i]=r)}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&(n[i]=void 0)}}class fo extends bo{constructor(){super(...arguments),this.eventData={}}apply(t){if(t)for(const e in t){const n=t[e];n!==this.eventData[e]&&this.applyEvent(e,n)}}applyEvent(t,e){const{prevData:n,element:i}=this;this.eventData[t]=e,n[t]&&i.removeEventListener(t,this,e),i.addEventListener(t,this,e)}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e)(!t||!(i in t)&&n[i]===e[i])&&this.groomEvent(i,e[i])}groomEvent(t,e){const{element:n}=this;delete this.eventData[t],n.removeEventListener(t,this,e)}handleEvent(t){const e=this.eventData[t.type];typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}disconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.removeEventListener(i,this,r)}}reconnected(){const{eventData:t,element:e}=this;for(const n in t){const i=n.slice(1),r=t[n];e.addEventListener(i,this,r)}}}class go extends fo{apply(t){if(!t)return;const{prevData:e,element:n}=this;for(const i in t){const r=t[i];if(r===e[i])continue;const s=i.slice(1);switch(i[0]){case"@":this.eventData[s]=r,this.applyEvent(s,r);break;case".":n[s]=r;break;case"?":r?n.setAttribute(s,""):n.removeAttribute(s);break;default:r!=null?n.setAttribute(i,String(r)):n.removeAttribute(i);break}}}groom(t){const{prevData:e,element:n}=this;if(e)for(const i in e){const r=i.slice(1);if(!t||!(i in t)&&n[r]===e[i])switch(i[0]){case"@":this.groomEvent(r,e[i]);break;case".":n[r]=void 0;break;case"?":n.removeAttribute(r);break;default:n.removeAttribute(i);break}}}}const Jt=Dt(go);var yo=Object.defineProperty,mo=Object.getOwnPropertyDescriptor,f=(o,t,e,n)=>{for(var i=n>1?void 0:n?mo(t,e):t,r=o.length-1,s;r>=0;r--)(s=o[r])&&(i=(n?s(t,e,i):s(i))||i);return n&&i&&yo(t,e,i),i};let u=class extends v{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.closeButtonLabel="Close the modal",this.firstButtonLabel="Close",this.firstButtonVariant="primary",this.firstButtonProps={},this.onFirstButtonClickClose=!1,this.secondButtonLabel="",this.secondButtonVariant="secondary",this.secondButtonProps={},this.onSecondButtonClickClose=!1,this.disablePortal=!1,this.zIndex=99,this.initialized=!1,this.previousFocusedElement=null,this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.closePanel())}}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),window.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0})}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}trapFocus(o){const t=this.getFocusableElements();if(t.length===0)return;const e=t[0],n=t[t.length-1];o.shiftKey&&document.activeElement===e?(o.preventDefault(),n.focus()):!o.shiftKey&&document.activeElement===n&&(o.preventDefault(),e.focus())}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");return o?Array.from(o.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(t=>!t.hasAttribute("disabled")):[]}openPanel(){this.previousFocusedElement=document.activeElement,this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open"),this.updateComplete.then(()=>{var o,t,e;if(this.showHeader){const n=((o=this.shadowRoot)==null?void 0:o.querySelector(".panel .close-btn"))||null,i=((t=n==null?void 0:n.shadowRoot)==null?void 0:t.querySelector("button"))||null;i&&((e=i.focus)==null||e.call(i))}else{const n=this.getFocusableElements()[0];n==null||n.focus()}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var o;this.open=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),(o=this.previousFocusedElement)==null||o.focus(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}handleFirstClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onFirstButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("firstbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"first",target:o.target}})))}handleSecondClick(o){o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),o.stopPropagation(),this.onSecondButtonClickClose&&this.closePanel(),this.dispatchEvent(new CustomEvent("secondbuttonclick",{bubbles:!0,composed:!0,cancelable:!0,detail:{button:"second",target:o.target}})))}updated(){this.style.setProperty("--z-overlay",`${this.zIndex||99}`),this.style.setProperty("--z-panel",`${this.zIndex?this.zIndex+1:99}`)}render(){return l`
 			<div class="overlay" style="z-index: ${this.zIndex}" @click=${this.handleClosePanel}></div>
 			<div
 				class="panel"

package/index.mjs

@@ -1489,6 +1489,10 @@ _.styles = y`
 			}
 		}
 
+		.icon-button:focus-visible {
+			outline: none;
+		}
+
 		.sr-only {
 			display: none;
 		}
@@ -1977,12 +1981,13 @@ let u = class extends v {
   }
   openPanel() {
     this.previousFocusedElement = document.activeElement, this.open = !0, document.body.style.overflow = "hidden", document.body.setAttribute("data-side-panel", "open"), this.updateComplete.then(() => {
-      var o, t;
-      if (this.showHeader)
-        (t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel")) == null || t.focus();
-      else {
-        const e = this.getFocusableElements()[0];
-        e == null || e.focus();
+      var o, t, e;
+      if (this.showHeader) {
+        const n = ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".panel .close-btn")) || null, i = ((t = n == null ? void 0 : n.shadowRoot) == null ? void 0 : t.querySelector("button")) || null;
+        i && ((e = i.focus) == null || e.call(i));
+      } else {
+        const n = this.getFocusableElements()[0];
+        n == null || n.focus();
       }
     }), this.dispatchEvent(
       new CustomEvent("open", { bubbles: !0, composed: !0 })
@@ -1996,7 +2001,7 @@ let u = class extends v {
   }
   handleFirstClick(o) {
     o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onFirstButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("click", {
+      new CustomEvent("firstbuttonclick", {
         bubbles: !0,
         composed: !0,
         cancelable: !0,
@@ -2009,7 +2014,7 @@ let u = class extends v {
   }
   handleSecondClick(o) {
     o instanceof KeyboardEvent && o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), this.onSecondButtonClickClose && this.closePanel(), this.dispatchEvent(
-      new CustomEvent("click", {
+      new CustomEvent("secondbuttonclick", {
         bubbles: !0,
         composed: !0,
         cancelable: !0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@florid-kit/components",
-  "version": "0.8.37",
+  "version": "0.8.38",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",