@florid-kit/components 0.10.25 → 0.10.27

package/index.js

@@ -185,6 +185,7 @@
 				<button
 					type="button"
 					aria-label=${P(i)}
+					aria-describedby=${this.getAttribute("aria-describedby")||d}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -374,7 +375,7 @@
 		.sr-only {
 			display: none;
 		}
-	`;R([a({type:String,reflect:!0})],B.prototype,"bgstyle",2);R([a({type:String,reflect:!0})],B.prototype,"size",2);R([a({type:String,reflect:!0})],B.prototype,"status",2);R([a({type:String,reflect:!0})],B.prototype,"type",2);R([a({type:String})],B.prototype,"strokewidth",2);R([a({type:String})],B.prototype,"icon",2);R([a({type:Boolean,reflect:!0})],B.prototype,"disabled",2);R([a({type:Boolean})],B.prototype,"showSrLabel",2);R([a({type:String})],B.prototype,"srLabel",2);B=R([b("o-icon-button")],B);var Ro=Object.defineProperty,Uo=Object.getOwnPropertyDescriptor,y=(o,t,e,n)=>{for(var i=n>1?void 0:n?Uo(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&&Ro(t,e,i),i};let p=class extends u{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.labelDialog="",this.addToBagProductCount="",this.closeButtonLabel="Close the modal",this.goBackButtonLabel="Go back to",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.showDetail=!1,this.isHidingDetail=!1,this.previousFocusedElement=null,this.previousFocusedSelector=null,this._onOpenDetail=async o=>{var e,n;const t=((e=o.detail)==null?void 0:e.origin)??document.activeElement;if(this._detailOriginEl=t,this._detailOriginClass=(t==null?void 0:t.className)??"",this.showDetail=!0,this.showHeaderStartIcon=!0,await this.updateComplete,this._detailOriginClass){const i=(n=this.shadowRoot)==null?void 0:n.querySelector(".detail-view");i&&i.setAttribute("fromelement",this._detailOriginClass)}await this.focusDetailReturnBtn()},this._detailOriginEl=null,this._detailOriginClass="",this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;o.preventDefault(),o.stopPropagation();const t=o.currentTarget,e=(t==null?void 0:t.getAttribute("data-role"))==="back";if(this.showDetail&&e){this.isHidingDetail=!0;const n=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(n){this.showHeaderStartIcon=!1;const r=()=>{this.showDetail=!1,this.isHidingDetail=!1,n.removeEventListener("animationend",r),i()};n.addEventListener("animationend",r)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()}}focusFirstInPanel(){var t,e,n;(n=this.getFocusableElements().map(i=>this.resolveFocusable(i)).filter(i=>!!i&&!i.hasAttribute("disabled"))[0]??((t=this.shadowRoot)==null?void 0:t.querySelector(".close-btn"))??((e=this.shadowRoot)==null?void 0:e.querySelector(".panel")))==null||n.focus({preventScroll:!0})}resolveFocusable(o){var e;const t=o.tagName.toLowerCase();return t==="o-icon-button"||t==="o-button"?((e=o.shadowRoot)==null?void 0:e.querySelector("button, .button"))??o:o}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),this.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0}),this.addEventListener("open-detail",this._onOpenDetail),this.addEventListener("focusin",o=>{o.composedPath()[0]===this&&this.focusFirstInPanel()})}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.removeEventListener("open-detail",this._onOpenDetail)}async focusDetailReturnBtn(){var i,r,s,c,h;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".detail-view .return-btn");if(!t)return;t.updateComplete&&await t.updateComplete,(c=(s=((r=t.shadowRoot)==null?void 0:r.querySelector("button"))??t)==null?void 0:s.focus)==null||c.call(s,{preventScroll:!0});const n=(h=this.shadowRoot)==null?void 0:h.querySelector('.panel[role="dialog"]');n&&n.setAttribute("aria-label",this.headerTitle)}_restoreFocusToOrigin(){var t,e;const o=this._detailOriginEl;!o||!document.contains(o)||((e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t),requestAnimationFrame(()=>{var i;o.classList.add("a--tabfocus"),(((i=o.shadowRoot)==null?void 0:i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])'))??null??o).focus({preventScroll:!0})}))}getDeepActiveElement(o=this.shadowRoot){let t=o.activeElement;for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(o){var r;if(o.key!=="Tab")return;const t=this.shadowRoot;if(!t)return;const e=this.getDeepActiveElement();if(this.showDetail){const s=t.querySelector(".detail-view .return-btn"),c=t.querySelector(".detail-view .close-btn"),h=s?this.resolveFocusable(s):null,f=c?this.resolveFocusable(c):null;if(o.shiftKey&&h&&e===h&&f){o.preventDefault(),o.stopPropagation(),f.focus({preventScroll:!0});return}if(!o.shiftKey&&f&&e===f){o.preventDefault(),o.stopPropagation(),(((r=t.querySelector(".detail-scroller"))==null?void 0:r.querySelector(p.focusablesSelector))??h??f).focus({preventScroll:!0});return}}if(document.querySelector("#refineandsortpopin")){const s=t.querySelector(".close-btn"),c=s?this.resolveFocusable(s):null,h=t.querySelector(".js-clear-refinements"),f=h?this.resolveFocusable(h):null,x=g=>{o.preventDefault(),o.stopPropagation(),g.focus({preventScroll:!0})};if(c&&f){if(!o.shiftKey&&e===f)return x(c);if(o.shiftKey&&e===c)return x(f)}}const i=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&i&&i.contains(e)){o.preventDefault();const s=this.renderRoot.querySelector(".o-whats-inside--content p");s==null||s.focus()}}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");if(!o)return[];function t(i){return!(i.disabled||i.hasAttribute("disabled")||i.hasAttribute("tabindex")&&i.getAttribute("tabindex")==="-1")}function e(i){var s;const r=[i.matches(p.focusablesSelector)?i:[]];if(!["o-icon-button","o-button"].includes(i.tagName.toLowerCase())){const c=Array.from(i instanceof HTMLSlotElement?i.assignedElements({flatten:!0}):[]).filter(t).flatMap(e),h=Array.from(((s=i.shadowRoot)==null?void 0:s.querySelectorAll("*"))||[]).filter(t).flatMap(e);r.push(...c,...h)}return r.flat()}return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e)}openPanel(){var t;this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,this.previousFocusedSelector=(t=this.previousFocusedElement)==null?void 0:t.getAttribute("paneltarget"),this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open");const o=this.renderRoot.querySelector(".panel");o&&o.setAttribute("aria-modal","true"),this.updateComplete.then(()=>{var e,n;if(this.showHeader){const i=(e=this.shadowRoot)==null?void 0:e.querySelector(".panel .close-btn"),r=this.resolveFocusable(i);(n=r==null?void 0:r.focus)==null||n.call(r,{preventScroll:!0})}else this.focusFirstInPanel()}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var e,n,i;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel");let o=this.previousFocusedElement;o!=null&&o.isConnected||(o=document.querySelector(`[paneltarget="${this.previousFocusedSelector}"]`)),(o==null?void 0:o.tagName.toLowerCase())==="o-button"?(i=(n=(e=o.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):o==null||o.focus();const t=this.renderRoot.querySelector(".panel");t&&t.removeAttribute("aria-modal"),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}`),this.open||setTimeout(()=>{this.setAttribute("hidden","hidden")},500)}render(){const o=this.showHeader?l`
+	`;R([a({type:String,reflect:!0})],B.prototype,"bgstyle",2);R([a({type:String,reflect:!0})],B.prototype,"size",2);R([a({type:String,reflect:!0})],B.prototype,"status",2);R([a({type:String,reflect:!0})],B.prototype,"type",2);R([a({type:String})],B.prototype,"strokewidth",2);R([a({type:String})],B.prototype,"icon",2);R([a({type:Boolean,reflect:!0})],B.prototype,"disabled",2);R([a({type:Boolean})],B.prototype,"showSrLabel",2);R([a({type:String})],B.prototype,"srLabel",2);B=R([b("o-icon-button")],B);var Ro=Object.defineProperty,Uo=Object.getOwnPropertyDescriptor,y=(o,t,e,n)=>{for(var i=n>1?void 0:n?Uo(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&&Ro(t,e,i),i};let p=class extends u{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.labelDialog="",this.addToBagProductCount="",this.closeButtonLabel="Close the modal",this.goBackButtonLabel="Go back to",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.showDetail=!1,this.isHidingDetail=!1,this.previousFocusedElement=null,this.previousFocusedSelector=null,this._onOpenDetail=async o=>{var e,n;const t=((e=o.detail)==null?void 0:e.origin)??document.activeElement;if(this._detailOriginEl=t,this._detailOriginClass=(t==null?void 0:t.className)??"",this.showDetail=!0,this.showHeaderStartIcon=!0,await this.updateComplete,this._detailOriginClass){const i=(n=this.shadowRoot)==null?void 0:n.querySelector(".detail-view");i&&i.setAttribute("fromelement",this._detailOriginClass)}await this.focusDetailReturnBtn()},this._detailOriginEl=null,this._detailOriginClass="",this.handleKeyDown=o=>{this.open&&(o.key==="Escape"?this.closePanel():o.key==="Tab"&&this.trapFocus(o))},this.handleClosePanel=o=>{if(o instanceof KeyboardEvent&&o.key!=="Enter"&&o.key!==" ")return;o.preventDefault(),o.stopPropagation();const t=o.currentTarget,e=(t==null?void 0:t.getAttribute("data-role"))==="back";if(this.showDetail&&e){this.isHidingDetail=!0;const n=this.renderRoot.querySelector(".content"),i=async()=>{this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1,await this.updateComplete,this._restoreFocusToOrigin()};if(n){this.showHeaderStartIcon=!1;const r=()=>{this.showDetail=!1,this.isHidingDetail=!1,n.removeEventListener("animationend",r),i()};n.addEventListener("animationend",r)}else this.showDetail=!1,this.isHidingDetail=!1,this.showHeaderStartIcon=!1;return}this.closePanel()}}focusFirstInPanel(){var t,e,n;(n=this.getFocusableElements().map(i=>this.resolveFocusable(i)).filter(i=>!!i&&!i.hasAttribute("disabled"))[0]??((t=this.shadowRoot)==null?void 0:t.querySelector(".close-btn"))??((e=this.shadowRoot)==null?void 0:e.querySelector(".panel")))==null||n.focus({preventScroll:!0})}resolveFocusable(o){var e;const t=o.tagName.toLowerCase();return t==="o-icon-button"||t==="o-button"?((e=o.shadowRoot)==null?void 0:e.querySelector("button, .button"))??o:o}connectedCallback(){super.connectedCallback(),!this.disablePortal&&this.parentElement!==document.body&&document.body.appendChild(this),this.addEventListener("keydown",this.handleKeyDown),this.updateComplete.then(()=>{this.initialized=!0}),this.addEventListener("open-detail",this._onOpenDetail),this.addEventListener("focusin",o=>{o.composedPath()[0]===this&&this.focusFirstInPanel()})}disconnectedCallback(){document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback(),this.removeEventListener("open-detail",this._onOpenDetail)}async focusDetailReturnBtn(){var i,r,s,c,h;await this.updateComplete;const o=this.getDeepActiveElement(document);if(o&&o!==document.body)try{o.blur()}catch{}await new Promise(requestAnimationFrame);const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".detail-view .return-btn");if(!t)return;t.updateComplete&&await t.updateComplete,(c=(s=((r=t.shadowRoot)==null?void 0:r.querySelector("button"))??t)==null?void 0:s.focus)==null||c.call(s,{preventScroll:!0});const n=(h=this.shadowRoot)==null?void 0:h.querySelector('.panel[role="dialog"]');n&&n.setAttribute("aria-label",this.headerTitle)}_restoreFocusToOrigin(){var t,e;const o=this._detailOriginEl;!o||!document.contains(o)||((e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t),requestAnimationFrame(()=>{var i;o.classList.add("a--tabfocus"),(((i=o.shadowRoot)==null?void 0:i.querySelector('button, .button, [tabindex]:not([tabindex="-1"])'))??null??o).focus({preventScroll:!0})}))}getDeepActiveElement(o=this.shadowRoot){let t=o.activeElement;for(;t&&t.shadowRoot&&t.shadowRoot.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(o){var r;if(o.key!=="Tab")return;const t=this.shadowRoot;if(!t)return;const e=this.getDeepActiveElement();if(this.showDetail){const s=t.querySelector(".detail-view .return-btn"),c=t.querySelector(".detail-view .close-btn"),h=s?this.resolveFocusable(s):null,f=c?this.resolveFocusable(c):null;if(o.shiftKey&&h&&e===h&&f){o.preventDefault(),o.stopPropagation(),f.focus({preventScroll:!0});return}if(!o.shiftKey&&f&&e===f){o.preventDefault(),o.stopPropagation(),(((r=t.querySelector(".detail-scroller"))==null?void 0:r.querySelector(p.focusablesSelector))??h??f).focus({preventScroll:!0});return}}if(document.querySelector("#refineandsortpopin")){const s=t.querySelector(".close-btn"),c=s?this.resolveFocusable(s):null,h=t.querySelector(".js-clear-refinements"),f=h?this.resolveFocusable(h):null,x=g=>{o.preventDefault(),o.stopPropagation(),g.focus()};if(c&&f){if(!o.shiftKey&&e===f)return x(c);if(o.shiftKey&&e===c)return x(f)}}const i=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&i&&i.contains(e)){o.preventDefault();const s=this.renderRoot.querySelector(".o-whats-inside--content p");s==null||s.focus()}}getFocusableElements(){const o=this.renderRoot.querySelector(".panel");if(!o)return[];function t(i){return!(i.disabled||i.hasAttribute("disabled")||i.hasAttribute("tabindex")&&i.getAttribute("tabindex")==="-1")}function e(i){var s;const r=[i.matches(p.focusablesSelector)?i:[]];if(!["o-icon-button","o-button"].includes(i.tagName.toLowerCase())){const c=Array.from(i instanceof HTMLSlotElement?i.assignedElements({flatten:!0}):[]).filter(t).flatMap(e),h=Array.from(((s=i.shadowRoot)==null?void 0:s.querySelectorAll("*"))||[]).filter(t).flatMap(e);r.push(...c,...h)}return r.flat()}return Array.from(o.querySelectorAll("*")).filter(t).flatMap(e)}openPanel(){var t;this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,this.previousFocusedSelector=(t=this.previousFocusedElement)==null?void 0:t.getAttribute("paneltarget"),this.open=!0,document.body.style.overflow="hidden",document.body.setAttribute("data-side-panel","open");const o=this.renderRoot.querySelector(".panel");o&&o.setAttribute("aria-modal","true"),this.updateComplete.then(()=>{var e,n;if(this.showHeader){const i=(e=this.shadowRoot)==null?void 0:e.querySelector(".panel .close-btn"),r=this.resolveFocusable(i);(n=r==null?void 0:r.focus)==null||n.call(r,{preventScroll:!0})}else this.focusFirstInPanel()}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var e,n,i;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel");let o=this.previousFocusedElement;o!=null&&o.isConnected||(o=document.querySelector(`[paneltarget="${this.previousFocusedSelector}"]`)),(o==null?void 0:o.tagName.toLowerCase())==="o-button"?(i=(n=(e=o.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):o==null||o.focus();const t=this.renderRoot.querySelector(".panel");t&&t.removeAttribute("aria-modal"),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}`),this.open||setTimeout(()=>{this.setAttribute("hidden","hidden")},500)}render(){const o=this.showHeader?l`
 			<div tabindex="-1" class="header ${this.showDetail?"detail-view-header":""}">
 			${this.showHeaderStartIcon?l`
 			<o-icon-button
@@ -396,14 +397,15 @@
 				${this.addToBagProductCount?l`<span class="a-quantity">${this.addToBagProductCount}</span>`:null}
 			</div>
 			<o-icon-button
-			icon="cross"
-			size="small"
-			class="close-btn"
-			bgstyle="background-light"
-			@click=${this.handleClosePanel}
-			@keydown=${this.handleClosePanel}
-			srlabel="${this.closeButtonLabel}"
-			?showsrlabel=${!0}
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				srlabel="${this.closeButtonLabel}"
+				?showsrlabel=${!0}
+				aria-describedby="panel-title"
 			></o-icon-button>
 			</div>
 			`:null;return l`
@@ -696,7 +698,8 @@
 			box-sizing: border-box;
 		}
 	`;p.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';p.focusablesCustomElementsSelector="o-icon-button, o-button";p.shadowRootOptions={...u.shadowRootOptions,delegatesFocus:!0};y([a({type:Boolean,reflect:!0})],p.prototype,"open",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showHeader",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showFooter",2);y([a({type:Boolean,reflect:!0})],p.prototype,"showHeaderStartIcon",2);y([a({type:String,reflect:!0})],p.prototype,"headerTitle",2);y([a({type:String,reflect:!0})],p.prototype,"headerTitleClassName",2);y([a({type:String,reflect:!0})],p.prototype,"labelDialog",2);y([a({type:String,reflect:!0})],p.prototype,"addToBagProductCount",2);y([a({type:String,reflect:!0})],p.prototype,"closeButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"goBackButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"firstButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"firstButtonVariant",2);y([a({type:Object,reflect:!0})],p.prototype,"firstButtonProps",2);y([a({type:Boolean,reflect:!0})],p.prototype,"onFirstButtonClickClose",2);y([a({type:String,reflect:!0})],p.prototype,"secondButtonLabel",2);y([a({type:String,reflect:!0})],p.prototype,"secondButtonVariant",2);y([a({type:Object,reflect:!0})],p.prototype,"secondButtonProps",2);y([a({type:Boolean,reflect:!0})],p.prototype,"onSecondButtonClickClose",2);y([a({type:Boolean,reflect:!0})],p.prototype,"disablePortal",2);y([a({type:Number,reflect:!0})],p.prototype,"zIndex",2);y([a({type:Boolean,reflect:!0})],p.prototype,"initialized",2);y([a({type:Boolean})],p.prototype,"showDetail",2);y([a({type:Boolean})],p.prototype,"isHidingDetail",2);p=y([b("o-side-panel")],p);var No=Object.defineProperty,qo=Object.getOwnPropertyDescriptor,_=(o,t,e,n)=>{for(var i=n>1?void 0:n?qo(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&&No(t,e,i),i};const Vo=Xt(u);let m=class extends Vo{constructor(){super(...arguments),this.type="submit",this.value="",this.variant="primary",this.text="",this.textsecond="",this.fullwidth=!1,this.disabled=!1,this.startIconModel="",this.endIconModel="",this.startIcon=!1,this.endIcon=!1,this.panelTarget="",this.href="",this.target="",this.underlined=!1,this.withbadge=!1}get name(){return this.getAttribute("name")??""}set name(o){this.setAttribute("name",o)}get form(){return this[Gt].form}handleClick(o){if(!(o instanceof KeyboardEvent&&!["Enter"," "].includes(o.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);t instanceof p&&(t!=null&&t.openPanel)&&typeof t.openPanel=="function"?(o.preventDefault(),t.openPanel()):console.warn(`[o-button] No side panel with id="${this.panelTarget}" found or it does not have an openPanel method.`)}}render(){return this.href?this.renderLink():this.renderButton()}renderIcon(o){const t=o==="start"?this.startIconModel:this.endIconModel;if(!t)return d;const e=Z[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${S(e)}</span>`}renderButton(){const o=this.text||this.textsecond;return l`
-      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
+      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby")||d} >
           ${this.startIcon?this.renderIcon("start"):d}
           ${o?l`
                 ${this.text?l`<span class="text">${this.text}</span>`:d}

package/index.mjs

@@ -1080,6 +1080,7 @@ let B = class extends u {
 				<button
 					type="button"
 					aria-label=${P(i)}
+					aria-describedby=${this.getAttribute("aria-describedby") || d}
 					class="icon-button ${this.size} ${this.bgstyle} ${this.status} ${t}"
 					?disabled="${this.disabled}"
 				>
@@ -1413,7 +1414,7 @@ let p = class extends u {
     }
     if (document.querySelector("#refineandsortpopin")) {
       const s = t.querySelector(".close-btn"), c = s ? this.resolveFocusable(s) : null, h = t.querySelector(".js-clear-refinements"), f = h ? this.resolveFocusable(h) : null, x = (g) => {
-        o.preventDefault(), o.stopPropagation(), g.focus({ preventScroll: !0 });
+        o.preventDefault(), o.stopPropagation(), g.focus();
       };
       if (c && f) {
         if (!o.shiftKey && e === f) return x(c);
@@ -1529,14 +1530,15 @@ let p = class extends u {
 				${this.addToBagProductCount ? l`<span class="a-quantity">${this.addToBagProductCount}</span>` : null}
 			</div>
 			<o-icon-button
-			icon="cross"
-			size="small"
-			class="close-btn"
-			bgstyle="background-light"
-			@click=${this.handleClosePanel}
-			@keydown=${this.handleClosePanel}
-			srlabel="${this.closeButtonLabel}"
-			?showsrlabel=${!0}
+				icon="cross"
+				size="small"
+				class="close-btn"
+				bgstyle="background-light"
+				@click=${this.handleClosePanel}
+				@keydown=${this.handleClosePanel}
+				srlabel="${this.closeButtonLabel}"
+				?showsrlabel=${!0}
+				aria-describedby="panel-title"
 			></o-icon-button>
 			</div>
 			` : null;
@@ -1952,7 +1954,8 @@ let m = class extends Vo {
   renderButton() {
     const o = this.text || this.textsecond;
     return l`
-      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}>
+      <button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick} @keydown=${this.handleClick}
+        aria-describedby=${this.getAttribute("aria-describedby") || d} >
           ${this.startIcon ? this.renderIcon("start") : d}
           ${o ? l`
                 ${this.text ? l`<span class="text">${this.text}</span>` : d}

package/package.json

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