monobill-mintui 0.6.612 → 0.6.613

package/dist/components/off-canvas/browser.js

@@ -0,0 +1,192 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('button', '../../button.css')
+__mintLoadStyle('spinner', '../../spinner.css')
+__mintLoadStyle('icon', '../../icon.css')
+__mintLoadStyle('text', '../../text.css')
+__mintLoadStyle('stack', '../../stack.css')
+__mintLoadStyle('off-canvas', '../../off-canvas.css')
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/text-BHkEs8U5.js";
+import "../chunks/button-B0Yt0MX1.js";
+import "../chunks/stack-DyQfjPDh.js";
+//#region src/components/off-canvas/OffCanvas.ts
+var t = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"id",
+			"heading",
+			"open",
+			"position",
+			"full-page",
+			"width",
+			"height"
+		];
+	}
+	constructor() {
+		super(), this._overlay = null, this._offCanvas = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._contentObserver = null, this._renderFrame = null, this._exitTimer = null, this._previousFocus = null, this._dialogWasOpen = !1, this._dialogKeydownHandler = null;
+	}
+	connectedCallback() {
+		this.classList.add("mint-off-canvas-host"), this.isOpen() || this.classList.add("mint-off-canvas-hidden"), this.render(), this._observeContentMutations(), this._dialogKeydownHandler = (e) => {
+			if (!this.isOpen()) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this.close();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+			if (!t) return;
+			let n = this._getDialogFocusableElements(t);
+			if (!n.length) {
+				e.preventDefault(), t.focus();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			e.shiftKey && (a === r || !t.contains(a)) ? (e.preventDefault(), i.focus()) : !e.shiftKey && (a === i || !t.contains(a)) && (e.preventDefault(), r.focus());
+		}, document.addEventListener("keydown", this._dialogKeydownHandler, !0);
+	}
+	disconnectedCallback() {
+		this._dialogKeydownHandler &&= (document.removeEventListener("keydown", this._dialogKeydownHandler, !0), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null), this._exitTimer !== null && (clearTimeout(this._exitTimer), this._exitTimer = null);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.isConnected && this.render();
+	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getHeading() {
+		return this.getAttribute("heading") || "";
+	}
+	getPosition() {
+		let e = this.getAttribute("position")?.toLowerCase();
+		return e === "top" || e === "bottom" || e === "left" || e === "right" ? e : "right";
+	}
+	isFullPage() {
+		return this.getAttribute("full-page") === "true";
+	}
+	getWidth() {
+		return this.getAttribute("width") || "320px";
+	}
+	getHeight() {
+		return this.getAttribute("height") || "";
+	}
+	_normalizeCssValue(e) {
+		return /^\d+(\.\d+)?$/.test(e.trim()) ? `${e.trim()}px` : e.trim();
+	}
+	isOpen() {
+		return this.getAttribute("open") === "true";
+	}
+	open() {
+		this.setAttribute("open", "true");
+	}
+	close() {
+		this.removeAttribute("open");
+	}
+	render() {
+		let e = this.getId(), t = this.getHeading(), n = this.isOpen(), r = this.getPosition(), i = this.isFullPage(), a = this.getHeight();
+		e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "mint-off-canvas-overlay", this._overlay.setAttribute("aria-hidden", "true"), this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._offCanvas || (this._offCanvas = document.createElement("div"), this.appendChild(this._offCanvas)), this._offCanvas.className = "mint-off-canvas-shell", this._offCanvas.dataset.position = r, this._offCanvas.dataset.fullPage = String(i);
+		let o = this._offCanvas.querySelector(".mint-off-canvas-panel");
+		o || (o = document.createElement("div"), o.className = "mint-off-canvas-panel", o.style.transform = this._getTransformValue(r, !1), this._offCanvas.appendChild(o)), o.setAttribute("role", "dialog"), o.setAttribute("aria-modal", "true"), o.hasAttribute("tabindex") || (o.tabIndex = -1), n ? this._animateEnter() : this._animateExit(), o.style.removeProperty("--off-canvas-width"), o.style.removeProperty("--off-canvas-height"), r === "top" || r === "bottom" ? a && o.style.setProperty("--off-canvas-height", this._normalizeCssValue(a)) : o.style.setProperty("--off-canvas-width", this._normalizeCssValue(this.getWidth())), this._header || (this._header = document.createElement("div"), this._header.className = "mint-off-canvas-header", o.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "mint-off-canvas-heading", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
+		let s = this._headingSlot.querySelector("mint-text");
+		if (t ? (s || (s = document.createElement("mint-text"), s.setAttribute("size", "sub-heading"), s.setAttribute("bold", "true"), this._headingSlot.appendChild(s)), s.textContent = t, s.id = `${e || "mint-off-canvas"}-heading`, o.setAttribute("aria-labelledby", s.id), o.removeAttribute("aria-label")) : s && s.remove(), !t) {
+			let e = this.getAttribute("aria-label")?.trim();
+			e ? o.setAttribute("aria-label", e) : o.hasAttribute("aria-label") || o.setAttribute("aria-label", "Dialog");
+		}
+		Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._headingSlot && e.getAttribute("slot") === "heading").forEach((e) => {
+			this._headingSlot && e.parentElement !== this._headingSlot && this._headingSlot.appendChild(e);
+		}), this._closeButton || (this._closeButton = document.createElement("mint-button"), this._closeButton.setAttribute("variant", "ghost"), this._closeButton.setAttribute("icon", "close"), this._closeButton.setAttribute("aria-label", "Close panel"), this._closeButton.addEventListener("click", () => this.close()), this._header.appendChild(this._closeButton)), this._bodySlot || (this._bodySlot = document.createElement("div"), this._bodySlot.className = "mint-off-canvas-body", this._bodySlot.setAttribute("slot", "body"), o.appendChild(this._bodySlot)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._bodySlot && e.getAttribute("slot") === "body").forEach((e) => {
+			this._bodySlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
+		}), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "mint-off-canvas-actions", this._actionsSlot.setAttribute("slot", "actions"), o.appendChild(this._actionsSlot));
+		let c = this._actionsSlot.querySelector("mint-stack");
+		c || (c = document.createElement("mint-stack"), c.setAttribute("direction", "horizontal"), c.className = "mint-off-canvas-actions-stack", this._actionsSlot.appendChild(c)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._actionsSlot && e.getAttribute("slot") === "actions").forEach((e) => {
+			Array.from(e.children).forEach((e) => {
+				e.parentElement !== c && c.appendChild(e);
+			}), e.parentElement && e.remove();
+		}), Array.from(this.children).forEach((e) => {
+			e !== this._overlay && e !== this._offCanvas && e.getAttribute("slot") !== "heading" && e.getAttribute("slot") !== "body" && e.getAttribute("slot") !== "actions" && e !== this._headingSlot && e !== this._bodySlot && e !== this._actionsSlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
+		});
+	}
+	_getTransformValue(e, t) {
+		if (t) switch (e) {
+			case "top": return "translateY(0)";
+			case "bottom": return "translateY(0)";
+			case "left": return "translateX(0)";
+			case "right": return "translateX(0)";
+			default: return "translateX(0)";
+		}
+		else switch (e) {
+			case "top": return "translateY(-100%)";
+			case "bottom": return "translateY(100%)";
+			case "left": return "translateX(-100%)";
+			case "right": return "translateX(100%)";
+			default: return "translateX(100%)";
+		}
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
+	_getDialogFocusableElements(e) {
+		return Array.from(e.querySelectorAll("button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")).filter((e) => {
+			if (e.closest("[hidden], [aria-hidden=\"true\"]")) return !1;
+			let t = window.getComputedStyle(e);
+			return t.display !== "none" && t.visibility !== "hidden";
+		});
+	}
+	_animateEnter() {
+		let e = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+		if (!e) return;
+		this._exitTimer !== null && (clearTimeout(this._exitTimer), this._exitTimer = null);
+		let t = this.getPosition(), n = !this._dialogWasOpen;
+		if (n) {
+			this._dialogWasOpen = !0;
+			let e = document.activeElement;
+			this._previousFocus = e instanceof HTMLElement && e !== document.body ? e : null;
+		}
+		e.style.transform = this._getTransformValue(t, !1), e.style.transition = "transform 300ms ease-out", this.classList.remove("mint-off-canvas-hidden"), requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				this.isOpen() && (this.classList.add("mint-off-canvas-open"), e.style.transform = this._getTransformValue(t, !0), n && (this._getDialogFocusableElements(e)[0] ?? e).focus());
+			});
+		});
+	}
+	_animateExit() {
+		this.classList.remove("mint-off-canvas-open");
+		let e = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+		if (!e) {
+			this.classList.add("mint-off-canvas-hidden"), this._dialogWasOpen = !1;
+			return;
+		}
+		let t = this.getPosition();
+		e.style.transition = "transform 300ms ease-in", e.style.transform = this._getTransformValue(t, !1), this._exitTimer !== null && clearTimeout(this._exitTimer), this._exitTimer = window.setTimeout(() => {
+			if (this._exitTimer = null, this.isOpen()) return;
+			this.classList.add("mint-off-canvas-hidden"), e.style.transform = "", e.style.transition = "";
+			let t = this._previousFocus;
+			this._previousFocus = null, t?.isConnected && t.focus();
+		}, 300);
+	}
+};
+customElements.get("mint-off-canvas") || e("mint-off-canvas", t);
+//#endregion
+export { t as default };

package/dist/components/off-canvas/index.cjs

@@ -0,0 +1 @@
+require(`../chunks/icon-dG8sLTBn.js`);const e=require(`../chunks/register-element-tCL_F1YI.js`);require(`../chunks/text-BmHZbBMo.js`),require(`../chunks/button-BlbLHMts.js`),require(`../chunks/stack-D1uh4L79.js`);var t=class extends HTMLElement{static get observedAttributes(){return[`id`,`heading`,`open`,`position`,`full-page`,`width`,`height`]}constructor(){super(),this._overlay=null,this._offCanvas=null,this._header=null,this._headingSlot=null,this._bodySlot=null,this._actionsSlot=null,this._closeButton=null,this._contentObserver=null,this._renderFrame=null,this._exitTimer=null,this._previousFocus=null,this._dialogWasOpen=!1,this._dialogKeydownHandler=null}connectedCallback(){this.classList.add(`mint-off-canvas-host`),this.isOpen()||this.classList.add(`mint-off-canvas-hidden`),this.render(),this._observeContentMutations(),this._dialogKeydownHandler=e=>{if(!this.isOpen())return;if(e.key===`Escape`){e.preventDefault(),e.stopPropagation(),this.close();return}if(e.key!==`Tab`)return;let t=this._offCanvas?.querySelector(`.mint-off-canvas-panel`);if(!t)return;let n=this._getDialogFocusableElements(t);if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||!t.contains(a))?(e.preventDefault(),i.focus()):!e.shiftKey&&(a===i||!t.contains(a))&&(e.preventDefault(),r.focus())},document.addEventListener(`keydown`,this._dialogKeydownHandler,!0)}disconnectedCallback(){this._dialogKeydownHandler&&=(document.removeEventListener(`keydown`,this._dialogKeydownHandler,!0),null),this._contentObserver&&=(this._contentObserver.disconnect(),null),this._renderFrame!==null&&(cancelAnimationFrame(this._renderFrame),this._renderFrame=null),this._exitTimer!==null&&(clearTimeout(this._exitTimer),this._exitTimer=null)}attributeChangedCallback(e,t,n){t!==n&&this.isConnected&&this.render()}_scheduleRender(){this._renderFrame===null&&(this._renderFrame=requestAnimationFrame(()=>{this._renderFrame=null,this.render()}))}getId(){return this.getAttribute(`id`)||``}getHeading(){return this.getAttribute(`heading`)||``}getPosition(){let e=this.getAttribute(`position`)?.toLowerCase();return e===`top`||e===`bottom`||e===`left`||e===`right`?e:`right`}isFullPage(){return this.getAttribute(`full-page`)===`true`}getWidth(){return this.getAttribute(`width`)||`320px`}getHeight(){return this.getAttribute(`height`)||``}_normalizeCssValue(e){return/^\d+(\.\d+)?$/.test(e.trim())?`${e.trim()}px`:e.trim()}isOpen(){return this.getAttribute(`open`)===`true`}open(){this.setAttribute(`open`,`true`)}close(){this.removeAttribute(`open`)}render(){let e=this.getId(),t=this.getHeading(),n=this.isOpen(),r=this.getPosition(),i=this.isFullPage(),a=this.getHeight();e&&(this.id=e),this._overlay||(this._overlay=document.createElement(`div`),this._overlay.className=`mint-off-canvas-overlay`,this._overlay.setAttribute(`aria-hidden`,`true`),this._overlay.addEventListener(`click`,()=>this.close()),this.appendChild(this._overlay)),this._offCanvas||(this._offCanvas=document.createElement(`div`),this.appendChild(this._offCanvas)),this._offCanvas.className=`mint-off-canvas-shell`,this._offCanvas.dataset.position=r,this._offCanvas.dataset.fullPage=String(i);let o=this._offCanvas.querySelector(`.mint-off-canvas-panel`);o||(o=document.createElement(`div`),o.className=`mint-off-canvas-panel`,o.style.transform=this._getTransformValue(r,!1),this._offCanvas.appendChild(o)),o.setAttribute(`role`,`dialog`),o.setAttribute(`aria-modal`,`true`),o.hasAttribute(`tabindex`)||(o.tabIndex=-1),n?this._animateEnter():this._animateExit(),o.style.removeProperty(`--off-canvas-width`),o.style.removeProperty(`--off-canvas-height`),r===`top`||r===`bottom`?a&&o.style.setProperty(`--off-canvas-height`,this._normalizeCssValue(a)):o.style.setProperty(`--off-canvas-width`,this._normalizeCssValue(this.getWidth())),this._header||(this._header=document.createElement(`div`),this._header.className=`mint-off-canvas-header`,o.appendChild(this._header)),this._headingSlot||(this._headingSlot=document.createElement(`div`),this._headingSlot.className=`mint-off-canvas-heading`,this._headingSlot.setAttribute(`slot`,`heading`),this._header.appendChild(this._headingSlot));let s=this._headingSlot.querySelector(`mint-text`);if(t?(s||(s=document.createElement(`mint-text`),s.setAttribute(`size`,`sub-heading`),s.setAttribute(`bold`,`true`),this._headingSlot.appendChild(s)),s.textContent=t,s.id=`${e||`mint-off-canvas`}-heading`,o.setAttribute(`aria-labelledby`,s.id),o.removeAttribute(`aria-label`)):s&&s.remove(),!t){let e=this.getAttribute(`aria-label`)?.trim();e?o.setAttribute(`aria-label`,e):o.hasAttribute(`aria-label`)||o.setAttribute(`aria-label`,`Dialog`)}Array.from(this.children).filter(e=>e!==this._overlay&&e!==this._offCanvas&&e!==this._headingSlot&&e.getAttribute(`slot`)===`heading`).forEach(e=>{this._headingSlot&&e.parentElement!==this._headingSlot&&this._headingSlot.appendChild(e)}),this._closeButton||(this._closeButton=document.createElement(`mint-button`),this._closeButton.setAttribute(`variant`,`ghost`),this._closeButton.setAttribute(`icon`,`close`),this._closeButton.setAttribute(`aria-label`,`Close panel`),this._closeButton.addEventListener(`click`,()=>this.close()),this._header.appendChild(this._closeButton)),this._bodySlot||(this._bodySlot=document.createElement(`div`),this._bodySlot.className=`mint-off-canvas-body`,this._bodySlot.setAttribute(`slot`,`body`),o.appendChild(this._bodySlot)),Array.from(this.children).filter(e=>e!==this._overlay&&e!==this._offCanvas&&e!==this._bodySlot&&e.getAttribute(`slot`)===`body`).forEach(e=>{this._bodySlot&&e.parentElement!==this._bodySlot&&this._bodySlot.appendChild(e)}),this._actionsSlot||(this._actionsSlot=document.createElement(`div`),this._actionsSlot.className=`mint-off-canvas-actions`,this._actionsSlot.setAttribute(`slot`,`actions`),o.appendChild(this._actionsSlot));let c=this._actionsSlot.querySelector(`mint-stack`);c||(c=document.createElement(`mint-stack`),c.setAttribute(`direction`,`horizontal`),c.className=`mint-off-canvas-actions-stack`,this._actionsSlot.appendChild(c)),Array.from(this.children).filter(e=>e!==this._overlay&&e!==this._offCanvas&&e!==this._actionsSlot&&e.getAttribute(`slot`)===`actions`).forEach(e=>{Array.from(e.children).forEach(e=>{e.parentElement!==c&&c.appendChild(e)}),e.parentElement&&e.remove()}),Array.from(this.children).forEach(e=>{e!==this._overlay&&e!==this._offCanvas&&e.getAttribute(`slot`)!==`heading`&&e.getAttribute(`slot`)!==`body`&&e.getAttribute(`slot`)!==`actions`&&e!==this._headingSlot&&e!==this._bodySlot&&e!==this._actionsSlot&&e.parentElement!==this._bodySlot&&this._bodySlot.appendChild(e)})}_getTransformValue(e,t){if(t)switch(e){case`top`:return`translateY(0)`;case`bottom`:return`translateY(0)`;case`left`:return`translateX(0)`;case`right`:return`translateX(0)`;default:return`translateX(0)`}else switch(e){case`top`:return`translateY(-100%)`;case`bottom`:return`translateY(100%)`;case`left`:return`translateX(-100%)`;case`right`:return`translateX(100%)`;default:return`translateX(100%)`}}_observeContentMutations(){this._contentObserver||=new MutationObserver(()=>{this._scheduleRender()}),this._contentObserver.disconnect(),this._contentObserver.observe(this,{childList:!0,attributes:!0,attributeFilter:[`slot`]})}_getDialogFocusableElements(e){return Array.from(e.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)).filter(e=>{if(e.closest(`[hidden], [aria-hidden="true"]`))return!1;let t=window.getComputedStyle(e);return t.display!==`none`&&t.visibility!==`hidden`})}_animateEnter(){let e=this._offCanvas?.querySelector(`.mint-off-canvas-panel`);if(!e)return;this._exitTimer!==null&&(clearTimeout(this._exitTimer),this._exitTimer=null);let t=this.getPosition(),n=!this._dialogWasOpen;if(n){this._dialogWasOpen=!0;let e=document.activeElement;this._previousFocus=e instanceof HTMLElement&&e!==document.body?e:null}e.style.transform=this._getTransformValue(t,!1),e.style.transition=`transform 300ms ease-out`,this.classList.remove(`mint-off-canvas-hidden`),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.isOpen()&&(this.classList.add(`mint-off-canvas-open`),e.style.transform=this._getTransformValue(t,!0),n&&(this._getDialogFocusableElements(e)[0]??e).focus())})})}_animateExit(){this.classList.remove(`mint-off-canvas-open`);let e=this._offCanvas?.querySelector(`.mint-off-canvas-panel`);if(!e){this.classList.add(`mint-off-canvas-hidden`),this._dialogWasOpen=!1;return}let t=this.getPosition();e.style.transition=`transform 300ms ease-in`,e.style.transform=this._getTransformValue(t,!1),this._exitTimer!==null&&clearTimeout(this._exitTimer),this._exitTimer=window.setTimeout(()=>{if(this._exitTimer=null,this.isOpen())return;this.classList.add(`mint-off-canvas-hidden`),e.style.transform=``,e.style.transition=``;let t=this._previousFocus;this._previousFocus=null,t?.isConnected&&t.focus()},300)}};customElements.get(`mint-off-canvas`)||e.t(`mint-off-canvas`,t),module.exports=t;

package/dist/components/off-canvas/index.d.ts

@@ -1,3 +1 @@
-import './OffCanvas';
-export { default } from './OffCanvas';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintOffCanvas } from './OffCanvas'

package/dist/components/off-canvas/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/off-canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}

package/dist/components/off-canvas/index.js

@@ -0,0 +1,180 @@
+import '../../theme.css'
+import '../../button.css'
+import '../../spinner.css'
+import '../../icon.css'
+import '../../text.css'
+import '../../stack.css'
+import '../../off-canvas.css'
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/text-BHkEs8U5.js";
+import "../chunks/button-B0Yt0MX1.js";
+import "../chunks/stack-DyQfjPDh.js";
+//#region src/components/off-canvas/OffCanvas.ts
+var t = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"id",
+			"heading",
+			"open",
+			"position",
+			"full-page",
+			"width",
+			"height"
+		];
+	}
+	constructor() {
+		super(), this._overlay = null, this._offCanvas = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._contentObserver = null, this._renderFrame = null, this._exitTimer = null, this._previousFocus = null, this._dialogWasOpen = !1, this._dialogKeydownHandler = null;
+	}
+	connectedCallback() {
+		this.classList.add("mint-off-canvas-host"), this.isOpen() || this.classList.add("mint-off-canvas-hidden"), this.render(), this._observeContentMutations(), this._dialogKeydownHandler = (e) => {
+			if (!this.isOpen()) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this.close();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+			if (!t) return;
+			let n = this._getDialogFocusableElements(t);
+			if (!n.length) {
+				e.preventDefault(), t.focus();
+				return;
+			}
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			e.shiftKey && (a === r || !t.contains(a)) ? (e.preventDefault(), i.focus()) : !e.shiftKey && (a === i || !t.contains(a)) && (e.preventDefault(), r.focus());
+		}, document.addEventListener("keydown", this._dialogKeydownHandler, !0);
+	}
+	disconnectedCallback() {
+		this._dialogKeydownHandler &&= (document.removeEventListener("keydown", this._dialogKeydownHandler, !0), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null), this._exitTimer !== null && (clearTimeout(this._exitTimer), this._exitTimer = null);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.isConnected && this.render();
+	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	getHeading() {
+		return this.getAttribute("heading") || "";
+	}
+	getPosition() {
+		let e = this.getAttribute("position")?.toLowerCase();
+		return e === "top" || e === "bottom" || e === "left" || e === "right" ? e : "right";
+	}
+	isFullPage() {
+		return this.getAttribute("full-page") === "true";
+	}
+	getWidth() {
+		return this.getAttribute("width") || "320px";
+	}
+	getHeight() {
+		return this.getAttribute("height") || "";
+	}
+	_normalizeCssValue(e) {
+		return /^\d+(\.\d+)?$/.test(e.trim()) ? `${e.trim()}px` : e.trim();
+	}
+	isOpen() {
+		return this.getAttribute("open") === "true";
+	}
+	open() {
+		this.setAttribute("open", "true");
+	}
+	close() {
+		this.removeAttribute("open");
+	}
+	render() {
+		let e = this.getId(), t = this.getHeading(), n = this.isOpen(), r = this.getPosition(), i = this.isFullPage(), a = this.getHeight();
+		e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "mint-off-canvas-overlay", this._overlay.setAttribute("aria-hidden", "true"), this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._offCanvas || (this._offCanvas = document.createElement("div"), this.appendChild(this._offCanvas)), this._offCanvas.className = "mint-off-canvas-shell", this._offCanvas.dataset.position = r, this._offCanvas.dataset.fullPage = String(i);
+		let o = this._offCanvas.querySelector(".mint-off-canvas-panel");
+		o || (o = document.createElement("div"), o.className = "mint-off-canvas-panel", o.style.transform = this._getTransformValue(r, !1), this._offCanvas.appendChild(o)), o.setAttribute("role", "dialog"), o.setAttribute("aria-modal", "true"), o.hasAttribute("tabindex") || (o.tabIndex = -1), n ? this._animateEnter() : this._animateExit(), o.style.removeProperty("--off-canvas-width"), o.style.removeProperty("--off-canvas-height"), r === "top" || r === "bottom" ? a && o.style.setProperty("--off-canvas-height", this._normalizeCssValue(a)) : o.style.setProperty("--off-canvas-width", this._normalizeCssValue(this.getWidth())), this._header || (this._header = document.createElement("div"), this._header.className = "mint-off-canvas-header", o.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "mint-off-canvas-heading", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
+		let s = this._headingSlot.querySelector("mint-text");
+		if (t ? (s || (s = document.createElement("mint-text"), s.setAttribute("size", "sub-heading"), s.setAttribute("bold", "true"), this._headingSlot.appendChild(s)), s.textContent = t, s.id = `${e || "mint-off-canvas"}-heading`, o.setAttribute("aria-labelledby", s.id), o.removeAttribute("aria-label")) : s && s.remove(), !t) {
+			let e = this.getAttribute("aria-label")?.trim();
+			e ? o.setAttribute("aria-label", e) : o.hasAttribute("aria-label") || o.setAttribute("aria-label", "Dialog");
+		}
+		Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._headingSlot && e.getAttribute("slot") === "heading").forEach((e) => {
+			this._headingSlot && e.parentElement !== this._headingSlot && this._headingSlot.appendChild(e);
+		}), this._closeButton || (this._closeButton = document.createElement("mint-button"), this._closeButton.setAttribute("variant", "ghost"), this._closeButton.setAttribute("icon", "close"), this._closeButton.setAttribute("aria-label", "Close panel"), this._closeButton.addEventListener("click", () => this.close()), this._header.appendChild(this._closeButton)), this._bodySlot || (this._bodySlot = document.createElement("div"), this._bodySlot.className = "mint-off-canvas-body", this._bodySlot.setAttribute("slot", "body"), o.appendChild(this._bodySlot)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._bodySlot && e.getAttribute("slot") === "body").forEach((e) => {
+			this._bodySlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
+		}), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "mint-off-canvas-actions", this._actionsSlot.setAttribute("slot", "actions"), o.appendChild(this._actionsSlot));
+		let c = this._actionsSlot.querySelector("mint-stack");
+		c || (c = document.createElement("mint-stack"), c.setAttribute("direction", "horizontal"), c.className = "mint-off-canvas-actions-stack", this._actionsSlot.appendChild(c)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._actionsSlot && e.getAttribute("slot") === "actions").forEach((e) => {
+			Array.from(e.children).forEach((e) => {
+				e.parentElement !== c && c.appendChild(e);
+			}), e.parentElement && e.remove();
+		}), Array.from(this.children).forEach((e) => {
+			e !== this._overlay && e !== this._offCanvas && e.getAttribute("slot") !== "heading" && e.getAttribute("slot") !== "body" && e.getAttribute("slot") !== "actions" && e !== this._headingSlot && e !== this._bodySlot && e !== this._actionsSlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
+		});
+	}
+	_getTransformValue(e, t) {
+		if (t) switch (e) {
+			case "top": return "translateY(0)";
+			case "bottom": return "translateY(0)";
+			case "left": return "translateX(0)";
+			case "right": return "translateX(0)";
+			default: return "translateX(0)";
+		}
+		else switch (e) {
+			case "top": return "translateY(-100%)";
+			case "bottom": return "translateY(100%)";
+			case "left": return "translateX(-100%)";
+			case "right": return "translateX(100%)";
+			default: return "translateX(100%)";
+		}
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
+	_getDialogFocusableElements(e) {
+		return Array.from(e.querySelectorAll("button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")).filter((e) => {
+			if (e.closest("[hidden], [aria-hidden=\"true\"]")) return !1;
+			let t = window.getComputedStyle(e);
+			return t.display !== "none" && t.visibility !== "hidden";
+		});
+	}
+	_animateEnter() {
+		let e = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+		if (!e) return;
+		this._exitTimer !== null && (clearTimeout(this._exitTimer), this._exitTimer = null);
+		let t = this.getPosition(), n = !this._dialogWasOpen;
+		if (n) {
+			this._dialogWasOpen = !0;
+			let e = document.activeElement;
+			this._previousFocus = e instanceof HTMLElement && e !== document.body ? e : null;
+		}
+		e.style.transform = this._getTransformValue(t, !1), e.style.transition = "transform 300ms ease-out", this.classList.remove("mint-off-canvas-hidden"), requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				this.isOpen() && (this.classList.add("mint-off-canvas-open"), e.style.transform = this._getTransformValue(t, !0), n && (this._getDialogFocusableElements(e)[0] ?? e).focus());
+			});
+		});
+	}
+	_animateExit() {
+		this.classList.remove("mint-off-canvas-open");
+		let e = this._offCanvas?.querySelector(".mint-off-canvas-panel");
+		if (!e) {
+			this.classList.add("mint-off-canvas-hidden"), this._dialogWasOpen = !1;
+			return;
+		}
+		let t = this.getPosition();
+		e.style.transition = "transform 300ms ease-in", e.style.transform = this._getTransformValue(t, !1), this._exitTimer !== null && clearTimeout(this._exitTimer), this._exitTimer = window.setTimeout(() => {
+			if (this._exitTimer = null, this.isOpen()) return;
+			this.classList.add("mint-off-canvas-hidden"), e.style.transform = "", e.style.transition = "";
+			let t = this._previousFocus;
+			this._previousFocus = null, t?.isConnected && t.focus();
+		}, 300);
+	}
+};
+customElements.get("mint-off-canvas") || e("mint-off-canvas", t);
+//#endregion
+export { t as default };

package/dist/components/page/Page.d.ts

@@ -1,37 +1 @@
-import '../text/index';
-import '../back-button/index';
-declare class MintPage extends HTMLElement {
-    static get observedAttributes(): string[];
-    private _pageContainer;
-    private _header;
-    private _titleElement;
-    private _headingText;
-    private _actionsSlot;
-    private _bodySlot;
-    private _darkModeObserver;
-    private _contentObserver;
-    private _backButton;
-    private _backButtonHandler;
-    private _renderFrame;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    disconnectedCallback(): void;
-    private _scheduleRender;
-    getHeading(): string;
-    getFallbackHref(): string;
-    shouldShowBackButton(): boolean;
-    render(): void;
-    private _applyContainerClasses;
-    private _updateBackgroundColor;
-    private _observeDarkMode;
-    /**
-     * Re-project dynamic children (e.g. Vue <template v-if>) when direct children change.
-     * Without this, newly mounted nodes can remain outside the internal body container.
-     */
-    private _observeContentMutations;
-    private _setupBackButtonListener;
-    private _removeBackButtonListener;
-}
-export default MintPage;
-//# sourceMappingURL=Page.d.ts.map
+export { MintPage as default, MintPage } from '../../mintui-elements'

package/dist/components/page/Page.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/page/Page.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AACtB,OAAO,sBAAsB,CAAA;AAE7B,cAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,aAAa,CAA2B;IAChD,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,kBAAkB,CAAoC;IAC9D,OAAO,CAAC,YAAY,CAAsB;;IAO1C,iBAAiB,IAAI,IAAI;IASzB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAW9F,oBAAoB,IAAI,IAAI;IAgB5B,OAAO,CAAC,eAAe;IAQvB,UAAU,IAAI,MAAM;IAIpB,eAAe,IAAI,MAAM;IAIzB,oBAAoB,IAAI,OAAO;IAK/B,MAAM,IAAI,IAAI;IAqId,OAAO,CAAC,sBAAsB;IAa9B,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,gBAAgB;IAcxB;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAehC,OAAO,CAAC,wBAAwB;IA2BhC,OAAO,CAAC,yBAAyB;CAMlC;AAOD,eAAe,QAAQ,CAAA"}
+{
+  "version": 3,
+  "file": "Page.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "Page.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}

package/dist/components/page/browser.js

@@ -0,0 +1,74 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('page', '../../page.css')
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+//#region src/components/page/Page.js
+var t = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"heading",
+			"fallback-href",
+			"show-back-button",
+			"containered"
+		];
+	}
+	constructor() {
+		super(), this._root = this.attachShadow({ mode: "open" }), this._root.innerHTML = "\n      <div part=\"container\" class=\"mint-page-container\">\n        <header part=\"header\" class=\"mint-page-header\">\n          <div part=\"title\" class=\"mint-page-title\">\n            <button part=\"back-button\" class=\"mint-page-back\" type=\"button\" aria-label=\"Go back\" hidden>\n              <svg part=\"back-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M19 12H5m7 7-7-7 7-7\" />\n              </svg>\n            </button>\n            <h1 part=\"heading\" class=\"mint-page-heading\"></h1>\n          </div>\n          <div part=\"actions\" class=\"mint-page-actions\"><slot name=\"actions\"></slot></div>\n        </header>\n        <main part=\"body\" class=\"mint-page-body\"><slot></slot></main>\n      </div>\n    ", this._headingElement = this._root.querySelector(".mint-page-heading"), this._backButton = this._root.querySelector(".mint-page-back"), this._backButton.addEventListener("click", (e) => this._handleBack(e));
+	}
+	connectedCallback() {
+		this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.isConnected && this.render();
+	}
+	getHeading() {
+		return this.getAttribute("heading") || "";
+	}
+	getFallbackHref() {
+		return this.getAttribute("fallback-href") || "/";
+	}
+	shouldShowBackButton() {
+		return this.getAttribute("show-back-button") === "true";
+	}
+	isContainered() {
+		return this.hasAttribute("containered") && this.getAttribute("containered") !== "false";
+	}
+	render() {
+		this._headingElement.textContent = this.getHeading(), this._backButton.hidden = !this.shouldShowBackButton();
+	}
+	_handleBack(e) {
+		e.preventDefault();
+		let t = document.referrer, n = !!(t && (() => {
+			try {
+				return new URL(t).origin === window.location.origin;
+			} catch {
+				return !1;
+			}
+		})()), r = {
+			url: n ? t : this.getFallbackHref(),
+			isFromReferrer: n,
+			referrer: t || null,
+			fallbackHref: this.getFallbackHref()
+		}, i = new CustomEvent("back", {
+			detail: r,
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		});
+		this.dispatchEvent(i) && (n && window.history.length > 1 ? window.history.back() : window.location.href = this.getFallbackHref());
+	}
+};
+typeof customElements < "u" && !customElements.get("mint-page") && e("mint-page", t);
+//#endregion
+export { t as default };

package/dist/components/page/index.cjs

@@ -0,0 +1,16 @@
+const e=require(`../chunks/register-element-tCL_F1YI.js`);var t=class extends HTMLElement{static get observedAttributes(){return[`heading`,`fallback-href`,`show-back-button`,`containered`]}constructor(){super(),this._root=this.attachShadow({mode:`open`}),this._root.innerHTML=`
+      <div part="container" class="mint-page-container">
+        <header part="header" class="mint-page-header">
+          <div part="title" class="mint-page-title">
+            <button part="back-button" class="mint-page-back" type="button" aria-label="Go back" hidden>
+              <svg part="back-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M19 12H5m7 7-7-7 7-7" />
+              </svg>
+            </button>
+            <h1 part="heading" class="mint-page-heading"></h1>
+          </div>
+          <div part="actions" class="mint-page-actions"><slot name="actions"></slot></div>
+        </header>
+        <main part="body" class="mint-page-body"><slot></slot></main>
+      </div>
+    `,this._headingElement=this._root.querySelector(`.mint-page-heading`),this._backButton=this._root.querySelector(`.mint-page-back`),this._backButton.addEventListener(`click`,e=>this._handleBack(e))}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&this.isConnected&&this.render()}getHeading(){return this.getAttribute(`heading`)||``}getFallbackHref(){return this.getAttribute(`fallback-href`)||`/`}shouldShowBackButton(){return this.getAttribute(`show-back-button`)===`true`}isContainered(){return this.hasAttribute(`containered`)&&this.getAttribute(`containered`)!==`false`}render(){this._headingElement.textContent=this.getHeading(),this._backButton.hidden=!this.shouldShowBackButton()}_handleBack(e){e.preventDefault();let t=document.referrer,n=!!(t&&(()=>{try{return new URL(t).origin===window.location.origin}catch{return!1}})()),r={url:n?t:this.getFallbackHref(),isFromReferrer:n,referrer:t||null,fallbackHref:this.getFallbackHref()},i=new CustomEvent(`back`,{detail:r,bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(i)&&(n&&window.history.length>1?window.history.back():window.location.href=this.getFallbackHref())}};typeof customElements<`u`&&!customElements.get(`mint-page`)&&e.t(`mint-page`,t),module.exports=t;

package/dist/components/page/index.d.ts

@@ -1,3 +1 @@
-import './Page';
-export { default } from './Page';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintPage } from './Page'

package/dist/components/page/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page/index.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,CAAA;AAGf,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}