@editora/ui-core 0.1.8 → 0.1.10

package/dist/layout.cjs.js

@@ -0,0 +1,266 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-1b301e7f.js"),x=`
+  :host {
+    --ui-layout-bg: var(--ui-color-background, #f8fafc);
+    --ui-layout-surface: var(--ui-color-surface, #ffffff);
+    --ui-layout-color: var(--ui-color-text, #0f172a);
+    --ui-layout-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-layout-shadow: none;
+    --ui-layout-radius: 18px;
+    --ui-layout-gap: 14px;
+    --ui-layout-padding: 14px;
+    --ui-layout-header-padding: 12px 14px;
+    --ui-layout-footer-padding: 12px 14px;
+    --ui-layout-content-padding: 14px;
+    --ui-layout-max-width: none;
+    --ui-layout-sidebar-track: clamp(220px, 22vw, 320px);
+    --ui-layout-aside-track: clamp(240px, 26vw, 360px);
+    display: block;
+    color: var(--ui-layout-color);
+    color-scheme: light dark;
+    overflow-anchor: none;
+  }
+
+  .layout {
+    width: 100%;
+    max-width: var(--ui-layout-max-width);
+    margin: 0 auto;
+    display: grid;
+    gap: var(--ui-layout-gap);
+    padding: var(--ui-layout-padding);
+    box-sizing: border-box;
+    border: var(--ui-layout-border);
+    border-radius: var(--ui-layout-radius);
+    background: var(--ui-layout-bg);
+    color: var(--ui-layout-color);
+    box-shadow: var(--ui-layout-shadow);
+    position: relative;
+    isolation: isolate;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 180ms ease;
+  }
+
+  :host([variant="flat"]) .layout {
+    box-shadow: none;
+  }
+
+  :host([variant="elevated"]) .layout {
+    --ui-layout-shadow:
+      0 34px 72px rgba(2, 6, 23, 0.18),
+      0 6px 16px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([variant="glass"]) .layout {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-layout-bg, #f8fafc) 90%, #ffffff 10%),
+        color-mix(in srgb, var(--ui-layout-bg, #f8fafc) 95%, transparent)
+      ),
+      var(--ui-layout-bg);
+    backdrop-filter: blur(16px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) .layout {
+    --ui-layout-bg: #0f172a;
+    --ui-layout-surface: #111827;
+    --ui-layout-color: #e2e8f0;
+    --ui-layout-border: 1px solid #334155;
+  }
+
+  :host([density="compact"]) .layout {
+    --ui-layout-gap: 8px;
+    --ui-layout-padding: 8px;
+    --ui-layout-header-padding: 8px 10px;
+    --ui-layout-footer-padding: 8px 10px;
+    --ui-layout-content-padding: 10px;
+    --ui-layout-radius: 10px;
+  }
+
+  :host([density="comfortable"]) .layout {
+    --ui-layout-gap: 18px;
+    --ui-layout-padding: 18px;
+    --ui-layout-header-padding: 14px 18px;
+    --ui-layout-footer-padding: 14px 18px;
+    --ui-layout-content-padding: 18px;
+    --ui-layout-radius: 20px;
+  }
+
+  :host([max-width="sm"]) .layout { --ui-layout-max-width: 640px; }
+  :host([max-width="md"]) .layout { --ui-layout-max-width: 920px; }
+  :host([max-width="lg"]) .layout { --ui-layout-max-width: 1180px; }
+  :host([max-width="xl"]) .layout { --ui-layout-max-width: 1400px; }
+
+  .header,
+  .footer,
+  .panel {
+    min-width: 0;
+    border-radius: calc(var(--ui-layout-radius) - 4px);
+    border: var(--ui-layout-border);
+    background: var(--ui-layout-surface);
+    box-sizing: border-box;
+  }
+
+  .header {
+    padding: var(--ui-layout-header-padding);
+  }
+
+  .footer {
+    padding: var(--ui-layout-footer-padding);
+  }
+
+  .body {
+    min-height: var(--ui-layout-min-height, 380px);
+    display: grid;
+    gap: var(--ui-layout-gap);
+    align-items: stretch;
+  }
+
+  .body[data-layout="dashboard-start"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="dashboard-start-no-aside"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr);
+  }
+
+  .body[data-layout="dashboard-start-no-sidebar"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="dashboard-end"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px))
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="dashboard-end-no-aside"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="dashboard-end-no-sidebar"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="split-with-aside"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="split-with-sidebar-start"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr);
+  }
+
+  .body[data-layout="split-with-sidebar-end"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="content-only"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .panel {
+    min-height: 0;
+    padding: var(--ui-layout-content-padding);
+    overflow: hidden;
+  }
+
+  .content-panel {
+    min-height: 160px;
+  }
+
+  .panel[hidden],
+  .header[hidden],
+  .footer[hidden],
+  .body[hidden] {
+    display: none !important;
+  }
+
+  .stack {
+    display: grid;
+    gap: var(--ui-layout-gap);
+  }
+
+  .stack .panel {
+    min-height: 120px;
+  }
+
+  :host([headless]) .layout {
+    display: none !important;
+  }
+
+  @media (max-width: 980px) {
+    .body {
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .layout {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .layout,
+    .header,
+    .footer,
+    .panel {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .layout,
+    .header,
+    .footer,
+    .panel {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function r(e){return e?e.assignedNodes({flatten:!0}).some(t=>{var a;return t.nodeType===Node.ELEMENT_NODE?!0:t.nodeType===Node.TEXT_NODE?!!((a=t.textContent)!=null&&a.trim()):!1}):!1}function g(e){if(e==null)return!1;const t=String(e).trim().toLowerCase();return t!=="false"&&t!=="0"}function c(e,t){const a=e==null?void 0:e.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,o){if(a!==o){if(t==="variant"||t==="density"||t==="max-width"||t==="headless"){super.attributeChangedCallback(t,a,o),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==null?void 0:t.addEventListener("slotchange",this._onSlotChange))}_detachSlotHandlers(){[this._headerSlot,this._sidebarSlot,this._contentSlot,this._defaultSlot,this._asideSlot,this._footerSlot].forEach(t=>t==null?void 0: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(),o=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&&(!o||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:o,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 o=this._signature(a);t.emit&&o!==this._lastLayoutSignature&&this._emitLayoutChange(a),this._lastLayoutSignature=o}shouldRenderOnAttributeChange(t,a,o){return!1}render(){this.setContent(`
+      <style>${x}</style>
+      <div class="layout" part="layout">
+        <header class="header" part="header">
+          <slot name="header"></slot>
+        </header>
+        <div class="body" part="body" data-layout="content-only">
+          <section class="panel sidebar-panel" part="sidebar">
+            <slot name="sidebar"></slot>
+          </section>
+          <section class="panel content-panel" part="content">
+            <slot name="content"></slot>
+            <slot></slot>
+          </section>
+          <section class="panel aside-panel" part="aside">
+            <slot name="aside"></slot>
+          </section>
+        </div>
+        <footer class="footer" part="footer">
+          <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;

package/dist/layout.esm.js

@@ -0,0 +1,408 @@
+import { E as m } from "./ElementBase-909688f3.mjs";
+const f = `
+  :host {
+    --ui-layout-bg: var(--ui-color-background, #f8fafc);
+    --ui-layout-surface: var(--ui-color-surface, #ffffff);
+    --ui-layout-color: var(--ui-color-text, #0f172a);
+    --ui-layout-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-layout-shadow: none;
+    --ui-layout-radius: 18px;
+    --ui-layout-gap: 14px;
+    --ui-layout-padding: 14px;
+    --ui-layout-header-padding: 12px 14px;
+    --ui-layout-footer-padding: 12px 14px;
+    --ui-layout-content-padding: 14px;
+    --ui-layout-max-width: none;
+    --ui-layout-sidebar-track: clamp(220px, 22vw, 320px);
+    --ui-layout-aside-track: clamp(240px, 26vw, 360px);
+    display: block;
+    color: var(--ui-layout-color);
+    color-scheme: light dark;
+    overflow-anchor: none;
+  }
+
+  .layout {
+    width: 100%;
+    max-width: var(--ui-layout-max-width);
+    margin: 0 auto;
+    display: grid;
+    gap: var(--ui-layout-gap);
+    padding: var(--ui-layout-padding);
+    box-sizing: border-box;
+    border: var(--ui-layout-border);
+    border-radius: var(--ui-layout-radius);
+    background: var(--ui-layout-bg);
+    color: var(--ui-layout-color);
+    box-shadow: var(--ui-layout-shadow);
+    position: relative;
+    isolation: isolate;
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 180ms ease;
+  }
+
+  :host([variant="flat"]) .layout {
+    box-shadow: none;
+  }
+
+  :host([variant="elevated"]) .layout {
+    --ui-layout-shadow:
+      0 34px 72px rgba(2, 6, 23, 0.18),
+      0 6px 16px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([variant="glass"]) .layout {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-layout-bg, #f8fafc) 90%, #ffffff 10%),
+        color-mix(in srgb, var(--ui-layout-bg, #f8fafc) 95%, transparent)
+      ),
+      var(--ui-layout-bg);
+    backdrop-filter: blur(16px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) .layout {
+    --ui-layout-bg: #0f172a;
+    --ui-layout-surface: #111827;
+    --ui-layout-color: #e2e8f0;
+    --ui-layout-border: 1px solid #334155;
+  }
+
+  :host([density="compact"]) .layout {
+    --ui-layout-gap: 8px;
+    --ui-layout-padding: 8px;
+    --ui-layout-header-padding: 8px 10px;
+    --ui-layout-footer-padding: 8px 10px;
+    --ui-layout-content-padding: 10px;
+    --ui-layout-radius: 10px;
+  }
+
+  :host([density="comfortable"]) .layout {
+    --ui-layout-gap: 18px;
+    --ui-layout-padding: 18px;
+    --ui-layout-header-padding: 14px 18px;
+    --ui-layout-footer-padding: 14px 18px;
+    --ui-layout-content-padding: 18px;
+    --ui-layout-radius: 20px;
+  }
+
+  :host([max-width="sm"]) .layout { --ui-layout-max-width: 640px; }
+  :host([max-width="md"]) .layout { --ui-layout-max-width: 920px; }
+  :host([max-width="lg"]) .layout { --ui-layout-max-width: 1180px; }
+  :host([max-width="xl"]) .layout { --ui-layout-max-width: 1400px; }
+
+  .header,
+  .footer,
+  .panel {
+    min-width: 0;
+    border-radius: calc(var(--ui-layout-radius) - 4px);
+    border: var(--ui-layout-border);
+    background: var(--ui-layout-surface);
+    box-sizing: border-box;
+  }
+
+  .header {
+    padding: var(--ui-layout-header-padding);
+  }
+
+  .footer {
+    padding: var(--ui-layout-footer-padding);
+  }
+
+  .body {
+    min-height: var(--ui-layout-min-height, 380px);
+    display: grid;
+    gap: var(--ui-layout-gap);
+    align-items: stretch;
+  }
+
+  .body[data-layout="dashboard-start"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="dashboard-start-no-aside"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr);
+  }
+
+  .body[data-layout="dashboard-start-no-sidebar"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="dashboard-end"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px))
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="dashboard-end-no-aside"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="dashboard-end-no-sidebar"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="split-with-aside"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-aside-track, clamp(240px, 26vw, 360px));
+  }
+
+  .body[data-layout="split-with-sidebar-start"] {
+    grid-template-columns:
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px))
+      minmax(0, 1fr);
+  }
+
+  .body[data-layout="split-with-sidebar-end"] {
+    grid-template-columns:
+      minmax(0, 1fr)
+      var(--ui-layout-sidebar-track, clamp(220px, 22vw, 320px));
+  }
+
+  .body[data-layout="content-only"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .panel {
+    min-height: 0;
+    padding: var(--ui-layout-content-padding);
+    overflow: hidden;
+  }
+
+  .content-panel {
+    min-height: 160px;
+  }
+
+  .panel[hidden],
+  .header[hidden],
+  .footer[hidden],
+  .body[hidden] {
+    display: none !important;
+  }
+
+  .stack {
+    display: grid;
+    gap: var(--ui-layout-gap);
+  }
+
+  .stack .panel {
+    min-height: 120px;
+  }
+
+  :host([headless]) .layout {
+    display: none !important;
+  }
+
+  @media (max-width: 980px) {
+    .body {
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .layout {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .layout,
+    .header,
+    .footer,
+    .panel {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .layout,
+    .header,
+    .footer,
+    .panel {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function r(e) {
+  return e ? e.assignedNodes({ flatten: !0 }).some((t) => {
+    var a;
+    return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? !!((a = t.textContent) != null && a.trim()) : !1;
+  }) : !1;
+}
+function x(e) {
+  if (e == null)
+    return !1;
+  const t = String(e).trim().toLowerCase();
+  return t !== "false" && t !== "0";
+}
+function c(e, t) {
+  const a = e == null ? void 0 : e.trim();
+  return a ? /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : a : t;
+}
+class g extends m {
+  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 x(this.getAttribute("collapsed"));
+  }
+  set collapsed(t) {
+    t ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed");
+  }
+  attributeChangedCallback(t, a, o) {
+    if (a !== o) {
+      if (t === "variant" || t === "density" || t === "max-width" || t === "headless") {
+        super.attributeChangedCallback(t, a, o), 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 == null ? void 0 : t.addEventListener("slotchange", this._onSlotChange));
+  }
+  _detachSlotHandlers() {
+    [
+      this._headerSlot,
+      this._sidebarSlot,
+      this._contentSlot,
+      this._defaultSlot,
+      this._asideSlot,
+      this._footerSlot
+    ].forEach((t) => t == null ? void 0 : 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(), o = 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 && (!o || t === "stack") && !(t === "split" && n), s = n, b = 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: o,
+      hasHeader: p,
+      hasFooter: y,
+      hasSidebarContent: u,
+      hasAsideContent: n,
+      hasContent: d,
+      sidebarVisible: i,
+      asideVisible: s,
+      bodyVisible: b,
+      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 o = this._signature(a);
+    t.emit && o !== this._lastLayoutSignature && this._emitLayoutChange(a), this._lastLayoutSignature = o;
+  }
+  shouldRenderOnAttributeChange(t, a, o) {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${f}</style>
+      <div class="layout" part="layout">
+        <header class="header" part="header">
+          <slot name="header"></slot>
+        </header>
+        <div class="body" part="body" data-layout="content-only">
+          <section class="panel sidebar-panel" part="sidebar">
+            <slot name="sidebar"></slot>
+          </section>
+          <section class="panel content-panel" part="content">
+            <slot name="content"></slot>
+            <slot></slot>
+          </section>
+          <section class="panel aside-panel" part="aside">
+            <slot name="aside"></slot>
+          </section>
+        </div>
+        <footer class="footer" part="footer">
+          <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", g);
+export {
+  g as UILayout
+};