@editora/ui-core 0.2.1 → 0.3.0

package/dist/label.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-DxbvhLJs.js"),u=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-CbUsP3D6.js"),u=`
   :host {
     --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #526175));

package/dist/label.esm.js

@@ -1,4 +1,4 @@
-import { E as s } from "./ElementBase-BeZT54Hj.mjs";
+import { E as s } from "./ElementBase-D5QsC5Vw.mjs";
 const n = `
   :host {
     --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));

package/dist/layout.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js"),x=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-CbUsP3D6.js"),g=`
   :host {
     --ui-layout-bg: var(--ui-color-background, #f8fafc);
     --ui-layout-surface: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
@@ -207,6 +207,146 @@
     display: none !important;
   }
 
+  /* App shell: the layout is the page frame itself. No outer box, full viewport height, panels
+     unframed so the components in them (AppHeader, Sidebar, Card) bring their own chrome instead
+     of sitting in boxes inside boxes; only the content area scrolls. */
+  :host([variant="shell"]) .layout {
+    height: var(--ui-layout-shell-height, 100dvh);
+    max-width: none;
+    padding: 0;
+    gap: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  :host([variant="shell"]) .header,
+  :host([variant="shell"]) .footer,
+  :host([variant="shell"]) .panel {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /* Components in the shell are flush with it: the shell draws one divider per edge, and the
+     AppHeader / Sidebar inside it drop their own outer border and radius (they read these
+     inherited --base-* tokens). */
+  :host([variant="shell"]) .header {
+    padding: 0;
+    border-block-end: var(--ui-layout-border);
+    --base-app-header-radius: 0;
+    --base-app-header-border: 0 solid transparent;
+  }
+
+  :host([variant="shell"]) .sidebar-panel,
+  :host([data-drawer]) .sidebar-panel {
+    --base-sidebar-radius: 0;
+    --base-sidebar-border: 0 solid transparent;
+    --base-sidebar-outline: none;
+  }
+
+  :host([variant="shell"]) .sidebar-panel {
+    border-inline-end: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"][sidebar-side="end"]) .sidebar-panel {
+    border-inline-end: 0;
+    border-inline-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .aside-panel {
+    border-inline-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .footer {
+    border-block-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .body {
+    min-height: 0;
+    gap: 0;
+  }
+
+  :host([variant="shell"]) .panel {
+    min-height: 0;
+    padding: 0;
+    overflow: auto;
+  }
+
+  :host([variant="shell"]) .content-panel {
+    padding: var(--ui-layout-content-padding);
+  }
+
+  :host([variant="shell"]) .sidebar-panel ::slotted(*),
+  :host([variant="shell"]) .aside-panel ::slotted(*) {
+    block-size: 100%;
+  }
+
+  /* Off-canvas sidebar on narrow screens (variant="shell", or mobile-sidebar="drawer"). */
+  .backdrop {
+    display: none;
+  }
+
+  :host([data-drawer]) .body {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  :host([data-drawer]) .sidebar-panel {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: var(--ui-layout-drawer-z, 1000);
+    inline-size: var(--ui-layout-drawer-width, auto);
+    max-inline-size: 86vw;
+    max-block-size: none;
+    min-height: 0;
+    padding: 0;
+    overflow: auto;
+    border: 0;
+    border-radius: 0;
+    background: var(--ui-layout-surface);
+    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.24);
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition: transform 200ms ease, visibility 0s linear 200ms;
+  }
+
+  :host([data-drawer][sidebar-side="end"]) .sidebar-panel {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+
+  :host([data-drawer][sidebar-open]) .sidebar-panel {
+    transform: none;
+    visibility: visible;
+    transition: transform 200ms ease;
+  }
+
+  :host([data-drawer][sidebar-open]) .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--ui-layout-drawer-z, 1000) - 1);
+    background: var(--ui-layout-backdrop, rgba(15, 23, 42, 0.45));
+  }
+
+  :host([data-drawer]) .sidebar-panel ::slotted(*) {
+    block-size: 100%;
+  }
+
+  :host([data-drawer]) .sidebar-panel {
+    border: 0 !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([data-drawer]) .sidebar-panel,
+    :host([data-drawer][sidebar-open]) .sidebar-panel {
+      transition: none;
+    }
+  }
+
   @media (max-width: 980px) {
     .body {
       grid-template-columns: minmax(0, 1fr) !important;
@@ -241,8 +381,8 @@
       box-shadow: none;
     }
   }
-`;function r(o){return o?o.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE?!0:t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():!1):!1}function g(o){if(o==null)return!1;const t=String(o).trim().toLowerCase();return t!=="false"&&t!=="0"}function c(o,t){const a=o?.trim();return a?/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:a:t}class p extends f.ElementBase{constructor(){super(),this._layoutNode=null,this._headerEl=null,this._bodyEl=null,this._footerEl=null,this._sidebarPanel=null,this._contentPanel=null,this._asidePanel=null,this._headerSlot=null,this._sidebarSlot=null,this._contentSlot=null,this._defaultSlot=null,this._asideSlot=null,this._footerSlot=null,this._lastLayoutSignature="",this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["mode","variant","density","max-width","sidebar-side","collapsed","headless","sidebar-width","aside-width"]}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this._syncShell({emit:!1}))}disconnectedCallback(){this._detachSlotHandlers(),super.disconnectedCallback()}collapse(){this.setAttribute("collapsed","")}expand(){this.removeAttribute("collapsed")}toggleSidebar(){this.collapsed?this.expand():this.collapse()}get collapsed(){return g(this.getAttribute("collapsed"))}set collapsed(t){t?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}attributeChangedCallback(t,a,e){if(a!==e){if(t==="variant"||t==="density"||t==="max-width"||t==="headless"){super.attributeChangedCallback(t,a,e),queueMicrotask(()=>this._syncShell({emit:!1}));return}queueMicrotask(()=>this._syncShell({emit:!0}))}}_mode(){const t=this.getAttribute("mode");return t==="split"||t==="stack"?t:"dashboard"}_sidebarSide(){return this.getAttribute("sidebar-side")==="end"?"end":"start"}_attachSlotHandlers(){this._detachSlotHandlers(),this._headerSlot=this.root.querySelector('slot[name="header"]'),this._sidebarSlot=this.root.querySelector('slot[name="sidebar"]'),this._contentSlot=this.root.querySelector('slot[name="content"]'),this._defaultSlot=this.root.querySelector("slot:not([name])"),this._asideSlot=this.root.querySelector('slot[name="aside"]'),this._footerSlot=this.root.querySelector('slot[name="footer"]'),[this._headerSlot,this._sidebarSlot,this._contentSlot,this._defaultSlot,this._asideSlot,this._footerSlot].forEach(t=>t?.addEventListener("slotchange",this._onSlotChange))}_detachSlotHandlers(){[this._headerSlot,this._sidebarSlot,this._contentSlot,this._defaultSlot,this._asideSlot,this._footerSlot].forEach(t=>t?.removeEventListener("slotchange",this._onSlotChange)),this._headerSlot=null,this._sidebarSlot=null,this._contentSlot=null,this._defaultSlot=null,this._asideSlot=null,this._footerSlot=null}_onSlotChange(){this._syncShell({emit:!0})}_emitLayoutChange(t){this.dispatchEvent(new CustomEvent("layoutchange",{detail:t,bubbles:!0,composed:!0}))}_signature(t){return JSON.stringify(t)}_computeShellState(){if(!this.isConnected||!this._layoutNode||!this._bodyEl)return null;const t=this._mode(),a=this._sidebarSide(),e=this.collapsed,y=r(this._headerSlot),b=r(this._footerSlot),u=r(this._sidebarSlot),n=r(this._asideSlot),d=r(this._contentSlot)||r(this._defaultSlot),i=u&&(!e||t==="stack")&&!(t==="split"&&n),s=n,m=d||i||s,h=t==="stack";let l="content-only";return h||(t==="split"?s&&d?l="split-with-aside":i&&d&&(l=a==="end"?"split-with-sidebar-end":"split-with-sidebar-start"):i&&s?l=a==="end"?"dashboard-end":"dashboard-start":i?l=a==="end"?"dashboard-end-no-aside":"dashboard-start-no-aside":s&&(l=a==="end"?"dashboard-end-no-sidebar":"dashboard-start-no-sidebar")),{mode:t,sidebarSide:a,collapsed:e,hasHeader:y,hasFooter:b,hasSidebarContent:u,hasAsideContent:n,hasContent:d,sidebarVisible:i,asideVisible:s,bodyVisible:m,layout:l,stack:h,sidebarTrack:i?c(this.getAttribute("sidebar-width"),"clamp(220px, 22vw, 320px)"):"0px",asideTrack:s?c(this.getAttribute("aside-width"),"clamp(240px, 26vw, 360px)"):"0px"}}_syncShell(t){const a=this._computeShellState();if(!a||!this._bodyEl)return;this._headerEl&&(this._headerEl.hidden=!a.hasHeader),this._footerEl&&(this._footerEl.hidden=!a.hasFooter),this.style.setProperty("--ui-layout-sidebar-track",a.sidebarTrack),this.style.setProperty("--ui-layout-aside-track",a.asideTrack),this._sidebarPanel&&(this._sidebarPanel.hidden=!a.sidebarVisible),this._contentPanel&&(this._contentPanel.hidden=!a.hasContent),this._asidePanel&&(this._asidePanel.hidden=!a.asideVisible),this._bodyEl.hidden=!a.bodyVisible,this._bodyEl.dataset.layout=a.layout,this._bodyEl.dataset.mode=a.mode,this._bodyEl.dataset.sidebarSide=a.sidebarSide,a.stack?this._bodyEl.classList.add("stack"):this._bodyEl.classList.remove("stack");const e=this._signature(a);t.emit&&e!==this._lastLayoutSignature&&this._emitLayoutChange(a),this._lastLayoutSignature=e}shouldRenderOnAttributeChange(t,a,e){return!1}render(){this.setContent(`
-      <style>${x}</style>
+`;function h(o){return o?o.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE?!0:t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():!1):!1}function v(o){if(o==null)return!1;const t=String(o).trim().toLowerCase();return t!=="false"&&t!=="0"}function p(o,t){const e=o?.trim();return e?/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:e:t}function x(){let o=typeof document<"u"?document.activeElement:null;for(;o?.shadowRoot?.activeElement;)o=o.shadowRoot.activeElement;return o}const m='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function w(o){const t=e=>{for(const a of Array.from(e.querySelectorAll("*"))){if(a.matches(m))return a;if(a.shadowRoot){const i=t(a.shadowRoot);if(i)return i}}return null};for(const e of o?.assignedElements({flatten:!0})||[]){if(e.matches(m))return e;const a=t(e)||(e.shadowRoot?t(e.shadowRoot):null);if(a)return a}return null}class y extends _.ElementBase{constructor(){super(),this._layoutNode=null,this._headerEl=null,this._bodyEl=null,this._footerEl=null,this._sidebarPanel=null,this._contentPanel=null,this._asidePanel=null,this._headerSlot=null,this._sidebarSlot=null,this._contentSlot=null,this._defaultSlot=null,this._asideSlot=null,this._footerSlot=null,this._lastLayoutSignature="",this._media=null,this._mediaQuery="",this._narrow=!1,this._restoreFocus=null,this._drawerWasOpen=!1,this._onSlotChange=this._onSlotChange.bind(this),this._onMediaChange=this._onMediaChange.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this),this._onMenuTrigger=this._onMenuTrigger.bind(this),this._onRootClick=this._onRootClick.bind(this),this._onSidebarActivate=this._onSidebarActivate.bind(this)}static get observedAttributes(){return["mode","variant","density","max-width","sidebar-side","collapsed","headless","sidebar-width","aside-width","sidebar-open","mobile-sidebar","drawer-breakpoint"]}connectedCallback(){super.connectedCallback(),this._watchViewport(),this.addEventListener("keydown",this._onHostKeyDown),this.addEventListener("menu-trigger",this._onMenuTrigger),this.addEventListener("select",this._onSidebarActivate),this.addEventListener("click",this._onSidebarActivate),this.root.addEventListener("click",this._onRootClick),queueMicrotask(()=>this._syncShell({emit:!1}))}disconnectedCallback(){this._detachSlotHandlers(),this._media?.removeEventListener?.("change",this._onMediaChange),this._media=null,this.removeEventListener("keydown",this._onHostKeyDown),this.removeEventListener("menu-trigger",this._onMenuTrigger),this.removeEventListener("select",this._onSidebarActivate),this.removeEventListener("click",this._onSidebarActivate),this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}get drawerActive(){return this.hasAttribute("data-drawer")}get sidebarOpen(){return this.hasAttribute("sidebar-open")}set sidebarOpen(t){this.toggleAttribute("sidebar-open",!!t)}openSidebar(){this._setSidebarOpen(!0,"api")}closeSidebar(){this._setSidebarOpen(!1,"api")}_drawerWanted(){const t=this.getAttribute("mobile-sidebar");return t==="drawer"?!0:t==="stack"?!1:this.getAttribute("variant")==="shell"}_watchViewport(){if(typeof window>"u"||typeof window.matchMedia!="function")return;const t=Number(this.getAttribute("drawer-breakpoint")),a=`(max-width: ${Number.isFinite(t)&&t>0?t:980}px)`;this._media&&this._mediaQuery===a||(this._media?.removeEventListener?.("change",this._onMediaChange),this._mediaQuery=a,this._media=window.matchMedia(a),this._media.addEventListener?.("change",this._onMediaChange),this._narrow=!!this._media.matches)}_onMediaChange(){this._narrow=!!this._media?.matches,this._syncShell({emit:!0})}_setSidebarOpen(t,e){this.sidebarOpen!==t&&(this.toggleAttribute("sidebar-open",t),this.dispatchEvent(new CustomEvent("sidebar-open-change",{detail:{open:t,source:e},bubbles:!0,composed:!0})))}_onMenuTrigger(){this.drawerActive&&this._setSidebarOpen(!this.sidebarOpen,"menu")}_onHostKeyDown(t){t.key!=="Escape"||!this.drawerActive||!this.sidebarOpen||t.defaultPrevented||(t.preventDefault(),this._setSidebarOpen(!1,"escape"))}_onRootClick(t){t.target?.classList?.contains("backdrop")&&this._setSidebarOpen(!1,"backdrop")}_onSidebarActivate(t){!this.drawerActive||!this.sidebarOpen||!t.composedPath().some(a=>a instanceof HTMLElement&&a.getAttribute("slot")==="sidebar"&&a.parentElement===this)||t.type==="click"&&!t.composedPath().find(i=>i instanceof HTMLAnchorElement&&i.hasAttribute("href"))||this._setSidebarOpen(!1,"navigate")}_syncDrawer(t){const e=this._drawerWanted()&&this._narrow&&t.hasSidebarContent;this.toggleAttribute("data-drawer",e),!e&&this.sidebarOpen&&this._setSidebarOpen(!1,"viewport");const a=e&&this.sidebarOpen,i=this._sidebarPanel;if(i&&(e?(i.hidden=!1,i.setAttribute("role","dialog"),i.setAttribute("aria-modal","true"),i.setAttribute("aria-label",this.getAttribute("sidebar-label")||"Navigation"),i.setAttribute("tabindex","-1"),a?i.removeAttribute("inert"):i.setAttribute("inert","")):(i.removeAttribute("role"),i.removeAttribute("aria-modal"),i.removeAttribute("aria-label"),i.removeAttribute("tabindex"),i.removeAttribute("inert"))),[this._headerEl,this._contentPanel,this._asidePanel,this._footerEl].forEach(r=>{r&&(a?r.setAttribute("inert",""):r.removeAttribute("inert"))}),(this._headerSlot?.assignedElements({flatten:!0})||[]).forEach(r=>{(r.matches("ui-app-header")?[r]:Array.from(r.querySelectorAll("ui-app-header"))).forEach(s=>{e?s.setAttribute("menu-expanded",a?"true":"false"):s.removeAttribute("menu-expanded")})}),a&&!this._drawerWasOpen){const r=x();this._restoreFocus=r&&r!==document.body?r:null;const u=w(this._sidebarSlot)||i;queueMicrotask(()=>u?.focus({preventScroll:!0}))}else if(!a&&this._drawerWasOpen){const r=this._restoreFocus;this._restoreFocus=null,r?.isConnected&&r.focus({preventScroll:!0})}this._drawerWasOpen=a}collapse(){this.setAttribute("collapsed","")}expand(){this.removeAttribute("collapsed")}toggleSidebar(){if(this.drawerActive){this._setSidebarOpen(!this.sidebarOpen,"api");return}this.collapsed?this.expand():this.collapse()}get collapsed(){return v(this.getAttribute("collapsed"))}set collapsed(t){t?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}attributeChangedCallback(t,e,a){if(e!==a){if(t==="drawer-breakpoint"&&this.isConnected&&this._watchViewport(),t==="variant"||t==="density"||t==="max-width"||t==="headless"){super.attributeChangedCallback(t,e,a),queueMicrotask(()=>this._syncShell({emit:!1}));return}queueMicrotask(()=>this._syncShell({emit:!0}))}}_mode(){const t=this.getAttribute("mode");return t==="split"||t==="stack"?t:"dashboard"}_sidebarSide(){return this.getAttribute("sidebar-side")==="end"?"end":"start"}_attachSlotHandlers(){this._detachSlotHandlers(),this._headerSlot=this.root.querySelector('slot[name="header"]'),this._sidebarSlot=this.root.querySelector('slot[name="sidebar"]'),this._contentSlot=this.root.querySelector('slot[name="content"]'),this._defaultSlot=this.root.querySelector("slot:not([name])"),this._asideSlot=this.root.querySelector('slot[name="aside"]'),this._footerSlot=this.root.querySelector('slot[name="footer"]'),[this._headerSlot,this._sidebarSlot,this._contentSlot,this._defaultSlot,this._asideSlot,this._footerSlot].forEach(t=>t?.addEventListener("slotchange",this._onSlotChange))}_detachSlotHandlers(){[this._headerSlot,this._sidebarSlot,this._contentSlot,this._defaultSlot,this._asideSlot,this._footerSlot].forEach(t=>t?.removeEventListener("slotchange",this._onSlotChange)),this._headerSlot=null,this._sidebarSlot=null,this._contentSlot=null,this._defaultSlot=null,this._asideSlot=null,this._footerSlot=null}_onSlotChange(){this._syncShell({emit:!0})}_emitLayoutChange(t){this.dispatchEvent(new CustomEvent("layoutchange",{detail:t,bubbles:!0,composed:!0}))}_signature(t){return JSON.stringify(t)}_computeShellState(){if(!this.isConnected||!this._layoutNode||!this._bodyEl)return null;const t=this._mode(),e=this._sidebarSide(),a=this.collapsed,i=h(this._headerSlot),r=h(this._footerSlot),u=h(this._sidebarSlot),s=h(this._asideSlot),c=h(this._contentSlot)||h(this._defaultSlot),n=u&&(!a||t==="stack")&&!(t==="split"&&s),d=s,f=c||n||d,b=t==="stack";let l="content-only";return b||(t==="split"?d&&c?l="split-with-aside":n&&c&&(l=e==="end"?"split-with-sidebar-end":"split-with-sidebar-start"):n&&d?l=e==="end"?"dashboard-end":"dashboard-start":n?l=e==="end"?"dashboard-end-no-aside":"dashboard-start-no-aside":d&&(l=e==="end"?"dashboard-end-no-sidebar":"dashboard-start-no-sidebar")),{mode:t,sidebarSide:e,collapsed:a,hasHeader:i,hasFooter:r,hasSidebarContent:u,hasAsideContent:s,hasContent:c,sidebarVisible:n,asideVisible:d,bodyVisible:f,layout:l,stack:b,sidebarTrack:n?p(this.getAttribute("sidebar-width"),this.getAttribute("variant")==="shell"?"auto":"clamp(220px, 22vw, 320px)"):"0px",asideTrack:d?p(this.getAttribute("aside-width"),"clamp(240px, 26vw, 360px)"):"0px"}}_syncShell(t){const e=this._computeShellState();if(!e||!this._bodyEl)return;this._headerEl&&(this._headerEl.hidden=!e.hasHeader),this._footerEl&&(this._footerEl.hidden=!e.hasFooter),this.style.setProperty("--ui-layout-sidebar-track",e.sidebarTrack),this.style.setProperty("--ui-layout-aside-track",e.asideTrack),this._sidebarPanel&&(this._sidebarPanel.hidden=!e.sidebarVisible),this._contentPanel&&(this._contentPanel.hidden=!e.hasContent),this._asidePanel&&(this._asidePanel.hidden=!e.asideVisible),this._bodyEl.hidden=!e.bodyVisible,this._bodyEl.dataset.layout=e.layout,this._bodyEl.dataset.mode=e.mode,this._bodyEl.dataset.sidebarSide=e.sidebarSide,e.stack?this._bodyEl.classList.add("stack"):this._bodyEl.classList.remove("stack"),this._syncDrawer(e);const a=this._signature(e);t.emit&&a!==this._lastLayoutSignature&&this._emitLayoutChange(e),this._lastLayoutSignature=a}shouldRenderOnAttributeChange(t,e,a){return!1}render(){this.setContent(`
+      <style>${g}</style>
       <div class="layout" part="layout">
         <header class="header" part="header">
           <slot name="header"></slot>
@@ -251,6 +391,7 @@
           <section class="panel sidebar-panel" part="sidebar">
             <slot name="sidebar"></slot>
           </section>
+          <div class="backdrop" part="backdrop" aria-hidden="true"></div>
           <section class="panel content-panel" part="content">
             <slot name="content"></slot>
             <slot></slot>
@@ -263,4 +404,4 @@
           <slot name="footer"></slot>
         </footer>
       </div>
-    `),this._layoutNode=this.root.querySelector(".layout"),this._headerEl=this.root.querySelector(".header"),this._bodyEl=this.root.querySelector(".body"),this._footerEl=this.root.querySelector(".footer"),this._sidebarPanel=this.root.querySelector(".sidebar-panel"),this._contentPanel=this.root.querySelector(".content-panel"),this._asidePanel=this.root.querySelector(".aside-panel"),this._attachSlotHandlers(),queueMicrotask(()=>this._syncShell({emit:!1}))}}typeof customElements<"u"&&!customElements.get("ui-layout")&&customElements.define("ui-layout",p);exports.UILayout=p;
+    `),this._layoutNode=this.root.querySelector(".layout"),this._headerEl=this.root.querySelector(".header"),this._bodyEl=this.root.querySelector(".body"),this._footerEl=this.root.querySelector(".footer"),this._sidebarPanel=this.root.querySelector(".sidebar-panel"),this._contentPanel=this.root.querySelector(".content-panel"),this._asidePanel=this.root.querySelector(".aside-panel"),this._attachSlotHandlers(),queueMicrotask(()=>this._syncShell({emit:!1}))}}typeof customElements<"u"&&!customElements.get("ui-layout")&&customElements.define("ui-layout",y);exports.UILayout=y;

package/dist/layout.esm.js

@@ -1,5 +1,5 @@
-import { E as m } from "./ElementBase-BeZT54Hj.mjs";
-const f = `
+import { E as f } from "./ElementBase-D5QsC5Vw.mjs";
+const _ = `
   :host {
     --ui-layout-bg: var(--ui-color-background, #f8fafc);
     --ui-layout-surface: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
@@ -208,6 +208,146 @@ const f = `
     display: none !important;
   }
 
+  /* App shell: the layout is the page frame itself. No outer box, full viewport height, panels
+     unframed so the components in them (AppHeader, Sidebar, Card) bring their own chrome instead
+     of sitting in boxes inside boxes; only the content area scrolls. */
+  :host([variant="shell"]) .layout {
+    height: var(--ui-layout-shell-height, 100dvh);
+    max-width: none;
+    padding: 0;
+    gap: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  :host([variant="shell"]) .header,
+  :host([variant="shell"]) .footer,
+  :host([variant="shell"]) .panel {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /* Components in the shell are flush with it: the shell draws one divider per edge, and the
+     AppHeader / Sidebar inside it drop their own outer border and radius (they read these
+     inherited --base-* tokens). */
+  :host([variant="shell"]) .header {
+    padding: 0;
+    border-block-end: var(--ui-layout-border);
+    --base-app-header-radius: 0;
+    --base-app-header-border: 0 solid transparent;
+  }
+
+  :host([variant="shell"]) .sidebar-panel,
+  :host([data-drawer]) .sidebar-panel {
+    --base-sidebar-radius: 0;
+    --base-sidebar-border: 0 solid transparent;
+    --base-sidebar-outline: none;
+  }
+
+  :host([variant="shell"]) .sidebar-panel {
+    border-inline-end: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"][sidebar-side="end"]) .sidebar-panel {
+    border-inline-end: 0;
+    border-inline-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .aside-panel {
+    border-inline-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .footer {
+    border-block-start: var(--ui-layout-border);
+  }
+
+  :host([variant="shell"]) .body {
+    min-height: 0;
+    gap: 0;
+  }
+
+  :host([variant="shell"]) .panel {
+    min-height: 0;
+    padding: 0;
+    overflow: auto;
+  }
+
+  :host([variant="shell"]) .content-panel {
+    padding: var(--ui-layout-content-padding);
+  }
+
+  :host([variant="shell"]) .sidebar-panel ::slotted(*),
+  :host([variant="shell"]) .aside-panel ::slotted(*) {
+    block-size: 100%;
+  }
+
+  /* Off-canvas sidebar on narrow screens (variant="shell", or mobile-sidebar="drawer"). */
+  .backdrop {
+    display: none;
+  }
+
+  :host([data-drawer]) .body {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  :host([data-drawer]) .sidebar-panel {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: var(--ui-layout-drawer-z, 1000);
+    inline-size: var(--ui-layout-drawer-width, auto);
+    max-inline-size: 86vw;
+    max-block-size: none;
+    min-height: 0;
+    padding: 0;
+    overflow: auto;
+    border: 0;
+    border-radius: 0;
+    background: var(--ui-layout-surface);
+    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.24);
+    transform: translateX(-100%);
+    visibility: hidden;
+    transition: transform 200ms ease, visibility 0s linear 200ms;
+  }
+
+  :host([data-drawer][sidebar-side="end"]) .sidebar-panel {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+
+  :host([data-drawer][sidebar-open]) .sidebar-panel {
+    transform: none;
+    visibility: visible;
+    transition: transform 200ms ease;
+  }
+
+  :host([data-drawer][sidebar-open]) .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--ui-layout-drawer-z, 1000) - 1);
+    background: var(--ui-layout-backdrop, rgba(15, 23, 42, 0.45));
+  }
+
+  :host([data-drawer]) .sidebar-panel ::slotted(*) {
+    block-size: 100%;
+  }
+
+  :host([data-drawer]) .sidebar-panel {
+    border: 0 !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([data-drawer]) .sidebar-panel,
+    :host([data-drawer][sidebar-open]) .sidebar-panel {
+      transition: none;
+    }
+  }
+
   @media (max-width: 980px) {
     .body {
       grid-template-columns: minmax(0, 1fr) !important;
@@ -243,21 +383,45 @@ const f = `
     }
   }
 `;
-function r(o) {
+function h(o) {
   return o ? o.assignedNodes({ flatten: !0 }).some((t) => t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? !!t.textContent?.trim() : !1) : !1;
 }
-function x(o) {
+function g(o) {
   if (o == null) return !1;
   const t = String(o).trim().toLowerCase();
   return t !== "false" && t !== "0";
 }
-function c(o, t) {
-  const a = o?.trim();
-  return a ? /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : a : t;
+function p(o, t) {
+  const e = o?.trim();
+  return e ? /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : e : t;
 }
-class g extends m {
+function v() {
+  let o = typeof document < "u" ? document.activeElement : null;
+  for (; o?.shadowRoot?.activeElement; ) o = o.shadowRoot.activeElement;
+  return o;
+}
+const m = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function x(o) {
+  const t = (e) => {
+    for (const a of Array.from(e.querySelectorAll("*"))) {
+      if (a.matches(m)) return a;
+      if (a.shadowRoot) {
+        const i = t(a.shadowRoot);
+        if (i) return i;
+      }
+    }
+    return null;
+  };
+  for (const e of o?.assignedElements({ flatten: !0 }) || []) {
+    if (e.matches(m)) return e;
+    const a = t(e) || (e.shadowRoot ? t(e.shadowRoot) : null);
+    if (a) return a;
+  }
+  return null;
+}
+class w extends f {
   constructor() {
-    super(), this._layoutNode = null, this._headerEl = null, this._bodyEl = null, this._footerEl = null, this._sidebarPanel = null, this._contentPanel = null, this._asidePanel = null, this._headerSlot = null, this._sidebarSlot = null, this._contentSlot = null, this._defaultSlot = null, this._asideSlot = null, this._footerSlot = null, this._lastLayoutSignature = "", this._onSlotChange = this._onSlotChange.bind(this);
+    super(), this._layoutNode = null, this._headerEl = null, this._bodyEl = null, this._footerEl = null, this._sidebarPanel = null, this._contentPanel = null, this._asidePanel = null, this._headerSlot = null, this._sidebarSlot = null, this._contentSlot = null, this._defaultSlot = null, this._asideSlot = null, this._footerSlot = null, this._lastLayoutSignature = "", this._media = null, this._mediaQuery = "", this._narrow = !1, this._restoreFocus = null, this._drawerWasOpen = !1, this._onSlotChange = this._onSlotChange.bind(this), this._onMediaChange = this._onMediaChange.bind(this), this._onHostKeyDown = this._onHostKeyDown.bind(this), this._onMenuTrigger = this._onMenuTrigger.bind(this), this._onRootClick = this._onRootClick.bind(this), this._onSidebarActivate = this._onSidebarActivate.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -269,14 +433,82 @@ class g extends m {
       "collapsed",
       "headless",
       "sidebar-width",
-      "aside-width"
+      "aside-width",
+      "sidebar-open",
+      "mobile-sidebar",
+      "drawer-breakpoint"
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), queueMicrotask(() => this._syncShell({ emit: !1 }));
+    super.connectedCallback(), this._watchViewport(), this.addEventListener("keydown", this._onHostKeyDown), this.addEventListener("menu-trigger", this._onMenuTrigger), this.addEventListener("select", this._onSidebarActivate), this.addEventListener("click", this._onSidebarActivate), this.root.addEventListener("click", this._onRootClick), queueMicrotask(() => this._syncShell({ emit: !1 }));
   }
   disconnectedCallback() {
-    this._detachSlotHandlers(), super.disconnectedCallback();
+    this._detachSlotHandlers(), this._media?.removeEventListener?.("change", this._onMediaChange), this._media = null, this.removeEventListener("keydown", this._onHostKeyDown), this.removeEventListener("menu-trigger", this._onMenuTrigger), this.removeEventListener("select", this._onSidebarActivate), this.removeEventListener("click", this._onSidebarActivate), this.root.removeEventListener("click", this._onRootClick), super.disconnectedCallback();
+  }
+  /** True while the sidebar is an off-canvas drawer (narrow viewport and drawer behaviour on). */
+  get drawerActive() {
+    return this.hasAttribute("data-drawer");
+  }
+  get sidebarOpen() {
+    return this.hasAttribute("sidebar-open");
+  }
+  set sidebarOpen(t) {
+    this.toggleAttribute("sidebar-open", !!t);
+  }
+  openSidebar() {
+    this._setSidebarOpen(!0, "api");
+  }
+  closeSidebar() {
+    this._setSidebarOpen(!1, "api");
+  }
+  _drawerWanted() {
+    const t = this.getAttribute("mobile-sidebar");
+    return t === "drawer" ? !0 : t === "stack" ? !1 : this.getAttribute("variant") === "shell";
+  }
+  _watchViewport() {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    const t = Number(this.getAttribute("drawer-breakpoint")), a = `(max-width: ${Number.isFinite(t) && t > 0 ? t : 980}px)`;
+    this._media && this._mediaQuery === a || (this._media?.removeEventListener?.("change", this._onMediaChange), this._mediaQuery = a, this._media = window.matchMedia(a), this._media.addEventListener?.("change", this._onMediaChange), this._narrow = !!this._media.matches);
+  }
+  _onMediaChange() {
+    this._narrow = !!this._media?.matches, this._syncShell({ emit: !0 });
+  }
+  _setSidebarOpen(t, e) {
+    this.sidebarOpen !== t && (this.toggleAttribute("sidebar-open", t), this.dispatchEvent(new CustomEvent("sidebar-open-change", { detail: { open: t, source: e }, bubbles: !0, composed: !0 })));
+  }
+  _onMenuTrigger() {
+    this.drawerActive && this._setSidebarOpen(!this.sidebarOpen, "menu");
+  }
+  _onHostKeyDown(t) {
+    t.key !== "Escape" || !this.drawerActive || !this.sidebarOpen || t.defaultPrevented || (t.preventDefault(), this._setSidebarOpen(!1, "escape"));
+  }
+  _onRootClick(t) {
+    t.target?.classList?.contains("backdrop") && this._setSidebarOpen(!1, "backdrop");
+  }
+  // Picking a link or item in the drawer closes it, as navigation drawers do.
+  _onSidebarActivate(t) {
+    !this.drawerActive || !this.sidebarOpen || !t.composedPath().some((a) => a instanceof HTMLElement && a.getAttribute("slot") === "sidebar" && a.parentElement === this) || t.type === "click" && !t.composedPath().find((i) => i instanceof HTMLAnchorElement && i.hasAttribute("href")) || this._setSidebarOpen(!1, "navigate");
+  }
+  _syncDrawer(t) {
+    const e = this._drawerWanted() && this._narrow && t.hasSidebarContent;
+    this.toggleAttribute("data-drawer", e), !e && this.sidebarOpen && this._setSidebarOpen(!1, "viewport");
+    const a = e && this.sidebarOpen, i = this._sidebarPanel;
+    if (i && (e ? (i.hidden = !1, i.setAttribute("role", "dialog"), i.setAttribute("aria-modal", "true"), i.setAttribute("aria-label", this.getAttribute("sidebar-label") || "Navigation"), i.setAttribute("tabindex", "-1"), a ? i.removeAttribute("inert") : i.setAttribute("inert", "")) : (i.removeAttribute("role"), i.removeAttribute("aria-modal"), i.removeAttribute("aria-label"), i.removeAttribute("tabindex"), i.removeAttribute("inert"))), [this._headerEl, this._contentPanel, this._asidePanel, this._footerEl].forEach((r) => {
+      r && (a ? r.setAttribute("inert", "") : r.removeAttribute("inert"));
+    }), (this._headerSlot?.assignedElements({ flatten: !0 }) || []).forEach((r) => {
+      (r.matches("ui-app-header") ? [r] : Array.from(r.querySelectorAll("ui-app-header"))).forEach((s) => {
+        e ? s.setAttribute("menu-expanded", a ? "true" : "false") : s.removeAttribute("menu-expanded");
+      });
+    }), a && !this._drawerWasOpen) {
+      const r = v();
+      this._restoreFocus = r && r !== document.body ? r : null;
+      const u = x(this._sidebarSlot) || i;
+      queueMicrotask(() => u?.focus({ preventScroll: !0 }));
+    } else if (!a && this._drawerWasOpen) {
+      const r = this._restoreFocus;
+      this._restoreFocus = null, r?.isConnected && r.focus({ preventScroll: !0 });
+    }
+    this._drawerWasOpen = a;
   }
   collapse() {
     this.setAttribute("collapsed", "");
@@ -285,18 +517,22 @@ class g extends m {
     this.removeAttribute("collapsed");
   }
   toggleSidebar() {
+    if (this.drawerActive) {
+      this._setSidebarOpen(!this.sidebarOpen, "api");
+      return;
+    }
     this.collapsed ? this.expand() : this.collapse();
   }
   get collapsed() {
-    return x(this.getAttribute("collapsed"));
+    return g(this.getAttribute("collapsed"));
   }
   set collapsed(t) {
     t ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed");
   }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e) {
-      if (t === "variant" || t === "density" || t === "max-width" || t === "headless") {
-        super.attributeChangedCallback(t, a, e), queueMicrotask(() => this._syncShell({ emit: !1 }));
+  attributeChangedCallback(t, e, a) {
+    if (e !== a) {
+      if (t === "drawer-breakpoint" && this.isConnected && this._watchViewport(), t === "variant" || t === "density" || t === "max-width" || t === "headless") {
+        super.attributeChangedCallback(t, e, a), queueMicrotask(() => this._syncShell({ emit: !1 }));
         return;
       }
       queueMicrotask(() => this._syncShell({ emit: !0 }));
@@ -340,39 +576,40 @@ class g extends m {
   }
   _computeShellState() {
     if (!this.isConnected || !this._layoutNode || !this._bodyEl) return null;
-    const t = this._mode(), a = this._sidebarSide(), e = this.collapsed, p = r(this._headerSlot), y = r(this._footerSlot), u = r(this._sidebarSlot), n = r(this._asideSlot), d = r(this._contentSlot) || r(this._defaultSlot), i = u && (!e || t === "stack") && !(t === "split" && n), s = n, b = d || i || s, h = t === "stack";
+    const t = this._mode(), e = this._sidebarSide(), a = this.collapsed, i = h(this._headerSlot), r = h(this._footerSlot), u = h(this._sidebarSlot), s = h(this._asideSlot), c = h(this._contentSlot) || h(this._defaultSlot), n = u && (!a || t === "stack") && !(t === "split" && s), d = s, y = c || n || d, b = t === "stack";
     let l = "content-only";
-    return h || (t === "split" ? s && d ? l = "split-with-aside" : i && d && (l = a === "end" ? "split-with-sidebar-end" : "split-with-sidebar-start") : i && s ? l = a === "end" ? "dashboard-end" : "dashboard-start" : i ? l = a === "end" ? "dashboard-end-no-aside" : "dashboard-start-no-aside" : s && (l = a === "end" ? "dashboard-end-no-sidebar" : "dashboard-start-no-sidebar")), {
+    return b || (t === "split" ? d && c ? l = "split-with-aside" : n && c && (l = e === "end" ? "split-with-sidebar-end" : "split-with-sidebar-start") : n && d ? l = e === "end" ? "dashboard-end" : "dashboard-start" : n ? l = e === "end" ? "dashboard-end-no-aside" : "dashboard-start-no-aside" : d && (l = e === "end" ? "dashboard-end-no-sidebar" : "dashboard-start-no-sidebar")), {
       mode: t,
-      sidebarSide: a,
-      collapsed: e,
-      hasHeader: p,
-      hasFooter: y,
+      sidebarSide: e,
+      collapsed: a,
+      hasHeader: i,
+      hasFooter: r,
       hasSidebarContent: u,
-      hasAsideContent: n,
-      hasContent: d,
-      sidebarVisible: i,
-      asideVisible: s,
-      bodyVisible: b,
+      hasAsideContent: s,
+      hasContent: c,
+      sidebarVisible: n,
+      asideVisible: d,
+      bodyVisible: y,
       layout: l,
-      stack: h,
-      sidebarTrack: i ? c(this.getAttribute("sidebar-width"), "clamp(220px, 22vw, 320px)") : "0px",
-      asideTrack: s ? c(this.getAttribute("aside-width"), "clamp(240px, 26vw, 360px)") : "0px"
+      stack: b,
+      // In the shell the column follows the sidebar's own width (no gap before the divider).
+      sidebarTrack: n ? p(this.getAttribute("sidebar-width"), this.getAttribute("variant") === "shell" ? "auto" : "clamp(220px, 22vw, 320px)") : "0px",
+      asideTrack: d ? p(this.getAttribute("aside-width"), "clamp(240px, 26vw, 360px)") : "0px"
     };
   }
   _syncShell(t) {
-    const a = this._computeShellState();
-    if (!a || !this._bodyEl) return;
-    this._headerEl && (this._headerEl.hidden = !a.hasHeader), this._footerEl && (this._footerEl.hidden = !a.hasFooter), this.style.setProperty("--ui-layout-sidebar-track", a.sidebarTrack), this.style.setProperty("--ui-layout-aside-track", a.asideTrack), this._sidebarPanel && (this._sidebarPanel.hidden = !a.sidebarVisible), this._contentPanel && (this._contentPanel.hidden = !a.hasContent), this._asidePanel && (this._asidePanel.hidden = !a.asideVisible), this._bodyEl.hidden = !a.bodyVisible, this._bodyEl.dataset.layout = a.layout, this._bodyEl.dataset.mode = a.mode, this._bodyEl.dataset.sidebarSide = a.sidebarSide, a.stack ? this._bodyEl.classList.add("stack") : this._bodyEl.classList.remove("stack");
-    const e = this._signature(a);
-    t.emit && e !== this._lastLayoutSignature && this._emitLayoutChange(a), this._lastLayoutSignature = e;
+    const e = this._computeShellState();
+    if (!e || !this._bodyEl) return;
+    this._headerEl && (this._headerEl.hidden = !e.hasHeader), this._footerEl && (this._footerEl.hidden = !e.hasFooter), this.style.setProperty("--ui-layout-sidebar-track", e.sidebarTrack), this.style.setProperty("--ui-layout-aside-track", e.asideTrack), this._sidebarPanel && (this._sidebarPanel.hidden = !e.sidebarVisible), this._contentPanel && (this._contentPanel.hidden = !e.hasContent), this._asidePanel && (this._asidePanel.hidden = !e.asideVisible), this._bodyEl.hidden = !e.bodyVisible, this._bodyEl.dataset.layout = e.layout, this._bodyEl.dataset.mode = e.mode, this._bodyEl.dataset.sidebarSide = e.sidebarSide, e.stack ? this._bodyEl.classList.add("stack") : this._bodyEl.classList.remove("stack"), this._syncDrawer(e);
+    const a = this._signature(e);
+    t.emit && a !== this._lastLayoutSignature && this._emitLayoutChange(e), this._lastLayoutSignature = a;
   }
-  shouldRenderOnAttributeChange(t, a, e) {
+  shouldRenderOnAttributeChange(t, e, a) {
     return !1;
   }
   render() {
     this.setContent(`
-      <style>${f}</style>
+      <style>${_}</style>
       <div class="layout" part="layout">
         <header class="header" part="header">
           <slot name="header"></slot>
@@ -381,6 +618,7 @@ class g extends m {
           <section class="panel sidebar-panel" part="sidebar">
             <slot name="sidebar"></slot>
           </section>
+          <div class="backdrop" part="backdrop" aria-hidden="true"></div>
           <section class="panel content-panel" part="content">
             <slot name="content"></slot>
             <slot></slot>
@@ -396,7 +634,7 @@ class g extends m {
     `), this._layoutNode = this.root.querySelector(".layout"), this._headerEl = this.root.querySelector(".header"), this._bodyEl = this.root.querySelector(".body"), this._footerEl = this.root.querySelector(".footer"), this._sidebarPanel = this.root.querySelector(".sidebar-panel"), this._contentPanel = this.root.querySelector(".content-panel"), this._asidePanel = this.root.querySelector(".aside-panel"), this._attachSlotHandlers(), queueMicrotask(() => this._syncShell({ emit: !1 }));
   }
 }
-typeof customElements < "u" && !customElements.get("ui-layout") && customElements.define("ui-layout", g);
+typeof customElements < "u" && !customElements.get("ui-layout") && customElements.define("ui-layout", w);
 export {
-  g as UILayout
+  w as UILayout
 };

package/dist/marquee.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-DxbvhLJs.js"),l="24px",f="48px",b=60,g=new Set(["none","sm","md","lg","full"]),v=new Set(["direction","speed","gap","size","padding"]),q=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-CbUsP3D6.js"),l="24px",f="48px",b=60,g=new Set(["none","sm","md","lg","full"]),v=new Set(["direction","speed","gap","size","padding"]),q=`
   :host {
     --ui-marquee-gap: ${l};
     --ui-marquee-fade-size: ${f};

package/dist/marquee.esm.js

@@ -1,4 +1,4 @@
-import { E as h } from "./ElementBase-BeZT54Hj.mjs";
+import { E as h } from "./ElementBase-D5QsC5Vw.mjs";
 const l = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), g = /* @__PURE__ */ new Set(["direction", "speed", "gap", "size", "padding"]), v = `
   :host {
     --ui-marquee-gap: ${l};

package/dist/masonry-grid.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js"),b={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","columnwidth","gap","columngap","itemgap","fill"],v={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},x=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-CbUsP3D6.js"),b={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},p=["display","columns","columnwidth","gap","columngap","itemgap","fill"],v={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},x=`
   :host {
     --ui-masonry-display: block;
     --ui-masonry-columns: auto;