@florid-kit/components 0.9.31 → 0.9.32

package/components/side-panel.d.ts

@@ -38,7 +38,6 @@ export declare class OccitaneSidePanel extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private focusDetailReturnBtn;
-    private _setPriceTabindex;
     private _onOpenDetail;
     private _detailOriginEl;
     private _detailOriginClass;

package/index.js

@@ -397,7 +397,7 @@
 		.sr-only {
 			display: none;
 		}
-	`;T([a({type:String,reflect:!0})],B.prototype,"bgstyle",2);T([a({type:String,reflect:!0})],B.prototype,"size",2);T([a({type:String,reflect:!0})],B.prototype,"status",2);T([a({type:String,reflect:!0})],B.prototype,"type",2);T([a({type:String})],B.prototype,"strokewidth",2);T([a({type:String})],B.prototype,"icon",2);T([a({type:Boolean,reflect:!0})],B.prototype,"disabled",2);T([a({type:Boolean})],B.prototype,"showSrLabel",2);T([a({type:String})],B.prototype,"srLabel",2);B=T([g("o-icon-button")],B);var Mo=Object.defineProperty,To=Object.getOwnPropertyDescriptor,b=(o,t,e,n)=>{for(var i=n>1?void 0:n?To(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&&Mo(t,e,i),i};let u=class extends p{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.labelDialog="",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._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)}this._setPriceTabindex(),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()},this._onDetailSlotChange=o=>{const n=o.target.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll("img")))[0];n&&(n.setAttribute("role","img"),n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1"))}}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)}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)}_setPriceTabindex(){var n;const o=(n=this.shadowRoot)==null?void 0:n.querySelector('slot[name="detail"]');if(!o)return;const e=o.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll(".m-product-price-standard")));for(const i of e)i.hasAttribute("tabindex")||i.setAttribute("tabindex","0")}_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){if(o.key!=="Tab")return;const t=this.getDeepActiveElement(),e=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&e&&e.contains(t)){o.preventDefault();const n=this.renderRoot.querySelector(".o-whats-inside--content p");n==null||n.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(u.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(){this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,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 t,e,n,i;if(this.showHeader){const r=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=r==null?void 0:r.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((n=s.focus)==null||n.call(s))}else{const r=this.getFocusableElements()[0];(i=r==null?void 0:r.focus)==null||i.call(r)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,n,i,r;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),((t=this.previousFocusedElement)==null?void 0:t.tagName.toLowerCase())==="o-button"?(i=(n=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):(r=this.previousFocusedElement)==null||r.focus();const o=this.renderRoot.querySelector(".panel");o&&o.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`
+	`;T([a({type:String,reflect:!0})],B.prototype,"bgstyle",2);T([a({type:String,reflect:!0})],B.prototype,"size",2);T([a({type:String,reflect:!0})],B.prototype,"status",2);T([a({type:String,reflect:!0})],B.prototype,"type",2);T([a({type:String})],B.prototype,"strokewidth",2);T([a({type:String})],B.prototype,"icon",2);T([a({type:Boolean,reflect:!0})],B.prototype,"disabled",2);T([a({type:Boolean})],B.prototype,"showSrLabel",2);T([a({type:String})],B.prototype,"srLabel",2);B=T([g("o-icon-button")],B);var Mo=Object.defineProperty,To=Object.getOwnPropertyDescriptor,b=(o,t,e,n)=>{for(var i=n>1?void 0:n?To(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&&Mo(t,e,i),i};let u=class extends p{constructor(){super(...arguments),this.open=!1,this.showHeader=!0,this.showFooter=!1,this.showHeaderStartIcon=!1,this.headerTitle="",this.headerTitleClassName="panel-title",this.labelDialog="",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._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()},this._onDetailSlotChange=o=>{const n=o.target.assignedElements({flatten:!0}).flatMap(i=>Array.from(i.querySelectorAll("img")))[0];n&&(n.setAttribute("role","img"),n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1"))}}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)}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){if(o.key!=="Tab")return;const t=this.getDeepActiveElement(),e=this.renderRoot.querySelector(".close-btn");if(!o.shiftKey&&e&&e.contains(t)){o.preventDefault();const n=this.renderRoot.querySelector(".o-whats-inside--content p");n==null||n.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(u.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(){this.removeAttribute("hidden"),this.getBoundingClientRect(),this.previousFocusedElement=document.activeElement,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 t,e,n,i;if(this.showHeader){const r=((t=this.shadowRoot)==null?void 0:t.querySelector(".panel .close-btn"))||null,s=((e=r==null?void 0:r.shadowRoot)==null?void 0:e.querySelector("button"))||null;s&&((n=s.focus)==null||n.call(s))}else{const r=this.getFocusableElements()[0];(i=r==null?void 0:r.focus)==null||i.call(r)}}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0}))}closePanel(){var t,e,n,i,r;this.open=!1,this.showDetail=!1,document.body.style.overflow="",document.body.removeAttribute("data-side-panel"),((t=this.previousFocusedElement)==null?void 0:t.tagName.toLowerCase())==="o-button"?(i=(n=(e=this.previousFocusedElement.shadowRoot)==null?void 0:e.querySelector(".button"))==null?void 0:n.focus)==null||i.call(n):(r=this.previousFocusedElement)==null||r.focus();const o=this.renderRoot.querySelector(".panel");o&&o.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
@@ -446,7 +446,9 @@
 							<div class="detail-view">
 								${o}
 								<div class="detail-content">
-									<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
+									<div class="detail-scroller">
+										<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
+									</div>
 								</div>
 							</div>
 						`:l`<slot></slot>`}
@@ -680,6 +682,12 @@
 		.detail-content {
 			padding: var(--spacing-xl);
 		}
+
+		.detail-scroller {
+			height: calc(100vh - 91px);
+			overflow: auto;
+			box-sizing: border-box;
+		}
 	`;u.focusablesSelector='button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';u.focusablesCustomElementsSelector="o-icon-button, o-button";b([a({type:Boolean,reflect:!0})],u.prototype,"open",2);b([a({type:Boolean,reflect:!0})],u.prototype,"showHeader",2);b([a({type:Boolean,reflect:!0})],u.prototype,"showFooter",2);b([a({type:Boolean,reflect:!0})],u.prototype,"showHeaderStartIcon",2);b([a({type:String,reflect:!0})],u.prototype,"headerTitle",2);b([a({type:String,reflect:!0})],u.prototype,"headerTitleClassName",2);b([a({type:String,reflect:!0})],u.prototype,"labelDialog",2);b([a({type:String,reflect:!0})],u.prototype,"closeButtonLabel",2);b([a({type:String,reflect:!0})],u.prototype,"goBackButtonLabel",2);b([a({type:String,reflect:!0})],u.prototype,"firstButtonLabel",2);b([a({type:String,reflect:!0})],u.prototype,"firstButtonVariant",2);b([a({type:Object,reflect:!0})],u.prototype,"firstButtonProps",2);b([a({type:Boolean,reflect:!0})],u.prototype,"onFirstButtonClickClose",2);b([a({type:String,reflect:!0})],u.prototype,"secondButtonLabel",2);b([a({type:String,reflect:!0})],u.prototype,"secondButtonVariant",2);b([a({type:Object,reflect:!0})],u.prototype,"secondButtonProps",2);b([a({type:Boolean,reflect:!0})],u.prototype,"onSecondButtonClickClose",2);b([a({type:Boolean,reflect:!0})],u.prototype,"disablePortal",2);b([a({type:Number,reflect:!0})],u.prototype,"zIndex",2);b([a({type:Boolean,reflect:!0})],u.prototype,"initialized",2);b([a({type:Boolean})],u.prototype,"showDetail",2);b([a({type:Boolean})],u.prototype,"isHidingDetail",2);u=b([g("o-side-panel")],u);var jo=Object.defineProperty,Fo=Object.getOwnPropertyDescriptor,x=(o,t,e,n)=>{for(var i=n>1?void 0:n?Fo(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&&jo(t,e,i),i};const Ro=Wt(p);let y=class extends Ro{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[Kt].form}handleClick(o){if(!(o instanceof KeyboardEvent&&!["Enter"," "].includes(o.key))&&this.panelTarget){const t=document.getElementById(this.panelTarget);t instanceof u&&(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=V[t].replace("<svg",'<svg aria-hidden="true" focusable="false" part="svg"');return l`<span class="${o==="start"?"icon-start":"icon-end"}">${k(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}>
           ${this.startIcon?this.renderIcon("start"):d}

package/index.mjs

@@ -1338,7 +1338,7 @@ let u = class extends p {
         const i = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".detail-view");
         i && i.setAttribute("fromelement", this._detailOriginClass);
       }
-      this._setPriceTabindex(), await this.focusDetailReturnBtn();
+      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) => {
@@ -1391,16 +1391,6 @@ let u = class extends p {
     const n = (h = this.shadowRoot) == null ? void 0 : h.querySelector('.panel[role="dialog"]');
     n && n.setAttribute("aria-label", this.headerTitle);
   }
-  _setPriceTabindex() {
-    var n;
-    const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="detail"]');
-    if (!o) return;
-    const e = o.assignedElements({ flatten: !0 }).flatMap(
-      (i) => Array.from(i.querySelectorAll(".m-product-price-standard"))
-    );
-    for (const i of e)
-      i.hasAttribute("tabindex") || i.setAttribute("tabindex", "0");
-  }
   _restoreFocusToOrigin() {
     var t, e;
     const o = this._detailOriginEl;
@@ -1553,7 +1543,9 @@ let u = class extends p {
 							<div class="detail-view">
 								${o}
 								<div class="detail-content">
-									<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
+									<div class="detail-scroller">
+										<slot name="detail" @slotchange=${this._onDetailSlotChange}></slot>
+									</div>
 								</div>
 							</div>
 						` : l`<slot></slot>`}
@@ -1790,6 +1782,12 @@ u.styles = v`
 		.detail-content {
 			padding: var(--spacing-xl);
 		}
+
+		.detail-scroller {
+			height: calc(100vh - 91px);
+			overflow: auto;
+			box-sizing: border-box;
+		}
 	`;
 u.focusablesSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), o-icon-button, o-button';
 u.focusablesCustomElementsSelector = "o-icon-button, o-button";

package/package.json

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