@editora/ui-core 0.1.9 → 0.1.10

package/dist/placement-grid.cjs.js

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-1b301e7f.js"),A={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","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],I={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)"},y=["data-row","data-column","data-row-span","data-column-span","data-value","data-selected","data-disabled","hidden"],x=`
+  :host {
+    --ui-placement-display: grid;
+    --ui-placement-columns: 1fr;
+    --ui-placement-rows: none;
+    --ui-placement-gap: 0px;
+    --ui-placement-row-gap: var(--ui-placement-gap);
+    --ui-placement-column-gap: var(--ui-placement-gap);
+    --ui-placement-auto-flow: row;
+    --ui-placement-auto-rows: auto;
+    --ui-placement-auto-columns: auto;
+    --ui-placement-align-items: stretch;
+    --ui-placement-justify-items: stretch;
+    --ui-placement-place-items: initial;
+    --ui-placement-align-content: normal;
+    --ui-placement-justify-content: normal;
+    --ui-placement-place-content: initial;
+    --ui-placement-color: var(--ui-color-text, inherit);
+    --ui-placement-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    color-scheme: light dark;
+    display: var(--ui-placement-display);
+    color: var(--ui-placement-color);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    grid-template-columns: var(--ui-placement-columns);
+    grid-template-rows: var(--ui-placement-rows);
+    gap: var(--ui-placement-gap);
+    row-gap: var(--ui-placement-row-gap);
+    column-gap: var(--ui-placement-column-gap);
+    grid-auto-flow: var(--ui-placement-auto-flow);
+    grid-auto-rows: var(--ui-placement-auto-rows);
+    grid-auto-columns: var(--ui-placement-auto-columns);
+    align-items: var(--ui-placement-align-items);
+    justify-items: var(--ui-placement-justify-items);
+    place-items: var(--ui-placement-place-items);
+    align-content: var(--ui-placement-align-content);
+    justify-content: var(--ui-placement-justify-content);
+    place-content: var(--ui-placement-place-content);
+  }
+
+  slot {
+    display: contents;
+  }
+
+  ::slotted([data-ui-placement-item]) {
+    box-sizing: border-box;
+    min-inline-size: 0;
+  }
+
+  ::slotted([data-ui-placement-item][data-draggable]) {
+    cursor: grab;
+  }
+
+  ::slotted([data-ui-placement-item][data-dragging]) {
+    opacity: 0.68;
+    cursor: grabbing;
+  }
+
+  ::slotted([data-ui-placement-item][data-drag-over]) {
+    outline: 2px solid var(--ui-placement-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ::slotted([data-ui-placement-item][data-selected]),
+  ::slotted([data-ui-placement-item]:focus-visible) {
+    outline: 2px solid var(--ui-placement-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ::slotted([data-ui-placement-item][data-disabled]) {
+    opacity: 0.56;
+    filter: saturate(0.8);
+  }
+
+  :host([headless]) {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-placement-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-placement-color: CanvasText;
+      --ui-placement-focus-ring: Highlight;
+    }
+  }
+`;function b(c){if(!c)return null;const t=c.trim();if(!t.startsWith("{"))return null;try{const e=JSON.parse(t);return!e||typeof e!="object"?null:e}catch{return null}}function h(c){return I[c]||c}function d(c){if(!c)return null;const t=Number.parseInt(c,10);return!Number.isFinite(t)||t<1?null:t}function _(c,t){switch(c){case"display":return{"--ui-placement-display":t};case"columns":return{"--ui-placement-columns":t};case"rows":return{"--ui-placement-rows":t};case"gap":return{"--ui-placement-gap":h(t)};case"rowgap":return{"--ui-placement-row-gap":h(t)};case"columngap":return{"--ui-placement-column-gap":h(t)};case"autoflow":return{"--ui-placement-auto-flow":t};case"autorows":return{"--ui-placement-auto-rows":t};case"autocolumns":return{"--ui-placement-auto-columns":t};case"align":return{"--ui-placement-align-items":t};case"justify":return{"--ui-placement-justify-items":t};case"place":return{"--ui-placement-place-items":t};case"aligncontent":return{"--ui-placement-align-content":t};case"justifycontent":return{"--ui-placement-justify-content":t};case"placecontent":return{"--ui-placement-place-content":t};default:return{}}}class v extends w.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set,this._mutationObserver=null,this._suppressMutations=!1,this._focusedValue=null,this._dragItem=null,this._dragOverItem=null,this._onKeyDownBound=t=>this._onKeyDown(t),this._onClickBound=t=>this._onClick(t),this._onDragStartBound=t=>this._onDragStart(t),this._onDragOverBound=t=>this._onDragOver(t),this._onDropBound=t=>this._onDrop(t),this._onDragEndBound=()=>this._clearDragState()}static get observedAttributes(){return["classname","headless","interactive","draggable","order",...p]}connectedCallback(){super.connectedCallback(),this._observeMutations(),this.addEventListener("keydown",this._onKeyDownBound),this.addEventListener("click",this._onClickBound),this.addEventListener("dragstart",this._onDragStartBound),this.addEventListener("dragover",this._onDragOverBound),this.addEventListener("drop",this._onDropBound),this.addEventListener("dragend",this._onDragEndBound)}disconnectedCallback(){var t;this.removeEventListener("keydown",this._onKeyDownBound),this.removeEventListener("click",this._onClickBound),this.removeEventListener("dragstart",this._onDragStartBound),this.removeEventListener("dragover",this._onDragOverBound),this.removeEventListener("drop",this._onDropBound),this.removeEventListener("dragend",this._onDragEndBound),(t=this._mutationObserver)==null||t.disconnect(),this._mutationObserver=null,this._clearDragState(),super.disconnectedCallback()}refresh(){this.requestRender()}focusItem(t){const e=this._resolveItem(t);e&&this._setFocusedItem(e,!0)}moveItem(t,e,s){const a=this._resolveItem(t);a&&this._moveItemTo(a,Math.max(1,e),Math.max(1,s),"api")}_observeMutations(){this._mutationObserver||(this._mutationObserver=new MutationObserver(()=>{this._suppressMutations||this.requestRender()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[...y]}))}_syncLegacyClassname(){const t=this.getAttribute("classname")||"";t!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(e=>{e&&this.classList.remove(e)}),t&&t.split(/\s+/).forEach(e=>{e&&this.classList.add(e)}),this._lastClassname=t)}_applyInlineStyles(){this._appliedInlineProps.forEach(t=>this.style.removeProperty(t)),this._appliedInlineProps.clear(),p.forEach(t=>{const e=this.getAttribute(t);if(!e||b(e))return;const s=_(t,e);Object.entries(s).forEach(([a,n])=>{this.style.setProperty(a,n),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const t={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(r=>{const l=this.getAttribute(r),i=b(l);if(!i)return;const o=(u,m)=>{Object.assign(u,_(r,m))};typeof i.initial=="string"&&o(t,i.initial),typeof i.sm=="string"&&o(e.sm,i.sm),typeof i.md=="string"&&o(e.md,i.md),typeof i.lg=="string"&&o(e.lg,i.lg),typeof i.xl=="string"&&o(e.xl,i.xl)});const s=(r,l)=>{const i=Object.entries(l);return i.length?`${r} { ${i.map(([o,u])=>`${o}: ${u};`).join(" ")} }`:""},a=[],n=s(":host",t);return n&&a.push(n),Object.keys(e).forEach(r=>{const l=s(":host",e[r]);l&&a.push(`@media (min-width: ${A[r]}) { ${l} }`)}),a.join(`
+`)}_items(){return Array.from(this.children).filter(t=>t instanceof HTMLElement&&t.hasAttribute("data-ui-placement-item"))}_resolveItem(t){const e=this._items();return typeof t=="number"?e[t]||null:e.find(s=>(s.getAttribute("data-value")||s.id||"")===t)||null}_fallbackColumnCount(){return d(this.getAttribute("columns"))||1}_computeItems(){const t=this._fallbackColumnCount();let e=0;return this._items().map((s,a)=>{let n=d(s.getAttribute("data-row")),r=d(s.getAttribute("data-column"));const l=d(s.getAttribute("data-row-span"))||1,i=d(s.getAttribute("data-column-span"))||1;if(n==null||r==null){const o=e++,u=Math.floor(o/t)+1,m=o%t+1;n==null&&(n=u),r==null&&(r=m)}return{el:s,index:a,row:n,column:r,rowSpan:l,columnSpan:i,value:s.getAttribute("data-value")||s.id||String(a),disabled:s.hasAttribute("disabled")||s.hasAttribute("data-disabled"),selected:s.hasAttribute("data-selected")}})}_order(){return this.getAttribute("order")==="row-major"?"row-major":"dom"}_isInteractive(){return this.hasAttribute("interactive")||this.hasAttribute("draggable")}_isDraggable(){return this.hasAttribute("draggable")}_sortMeta(t){return[...t].sort((e,s)=>e.row!==s.row?e.row-s.row:e.column!==s.column?e.column-s.column:e.index-s.index)}_syncHostSemantics(t){this._isInteractive()?(this.hasAttribute("role")||(this.setAttribute("role","grid"),this.setAttribute("data-ui-placement-role","")),this.setAttribute("aria-rowcount",String(t.reduce((e,s)=>Math.max(e,s.row+s.rowSpan-1),0))),this.setAttribute("aria-colcount",String(t.reduce((e,s)=>Math.max(e,s.column+s.columnSpan-1),this._fallbackColumnCount())))):this.hasAttribute("data-ui-placement-role")&&(this.removeAttribute("role"),this.removeAttribute("data-ui-placement-role"),this.removeAttribute("aria-rowcount"),this.removeAttribute("aria-colcount"))}_setFocusedItem(t,e=!1){const s=this._items(),a=t||s[0]||null;this._focusedValue=a&&(a.getAttribute("data-value")||a.id)||null,s.forEach(n=>{this._isInteractive()?n.tabIndex=n===a?0:-1:n.removeAttribute("tabindex")}),e&&a&&a.focus({preventScroll:!0})}_syncItems(){var s,a;const t=this._computeItems(),e=this._order()==="row-major"?this._sortMeta(t):t;this._suppressMutations=!0;try{this._order()==="row-major"&&e.forEach(r=>this.appendChild(r.el)),this._syncHostSemantics(e);const n=((s=e.find(r=>r.value===this._focusedValue))==null?void 0:s.el)||((a=e[0])==null?void 0:a.el)||null;e.forEach(r=>{r.el.style.gridColumn=`${r.column} / span ${r.columnSpan}`,r.el.style.gridRow=`${r.row} / span ${r.rowSpan}`,r.el.style.minInlineSize="0",r.el.style.boxSizing="border-box",this._isInteractive()?(r.el.hasAttribute("role")||r.el.setAttribute("role","gridcell"),r.el.setAttribute("aria-rowindex",String(r.row)),r.el.setAttribute("aria-colindex",String(r.column)),r.columnSpan>1?r.el.setAttribute("aria-colspan",String(r.columnSpan)):r.el.removeAttribute("aria-colspan"),r.rowSpan>1?r.el.setAttribute("aria-rowspan",String(r.rowSpan)):r.el.removeAttribute("aria-rowspan"),r.selected?r.el.setAttribute("aria-selected","true"):r.el.removeAttribute("aria-selected"),r.disabled?r.el.setAttribute("aria-disabled","true"):r.el.removeAttribute("aria-disabled")):(r.el.removeAttribute("aria-rowindex"),r.el.removeAttribute("aria-colindex"),r.el.removeAttribute("aria-rowspan"),r.el.removeAttribute("aria-colspan"),r.el.removeAttribute("aria-selected"),r.el.removeAttribute("aria-disabled")),this._isDraggable()&&!r.disabled?(r.el.setAttribute("data-draggable",""),r.el.setAttribute("draggable","true")):(r.el.removeAttribute("data-draggable"),r.el.removeAttribute("draggable"))}),this._setFocusedItem(n,!1)}finally{this._suppressMutations=!1}}_findItemFromTarget(t){if(!(t instanceof Element))return null;const e=t.closest("[data-ui-placement-item]");return e instanceof HTMLElement&&this.contains(e)?e:null}_metaForItem(t){return this._computeItems().find(e=>e.el===t)||null}_intervalsOverlap(t,e,s,a){const n=t+e-1,r=s+a-1;return t<=r&&s<=n}_findNeighbor(t,e){var r,l;const s=this._computeItems().filter(i=>!i.disabled&&i.el!==t.el);if(!s.length)return null;const a=s.filter(i=>e==="left"||e==="right"?this._intervalsOverlap(t.row,t.rowSpan,i.row,i.rowSpan)?e==="left"?i.column<t.column:i.column>t.column:!1:this._intervalsOverlap(t.column,t.columnSpan,i.column,i.columnSpan)?e==="up"?i.row<t.row:i.row>t.row:!1);if(!a.length){const i=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems(),o=i.findIndex(m=>m.el===t.el);return((r=i[o+(e==="left"||e==="up"?-1:1)])==null?void 0:r.el)||null}return((l=a.sort((i,o)=>{if(e==="left"||e==="right"){const g=Math.abs(i.column-t.column),f=Math.abs(o.column-t.column);return g!==f?g-f:Math.abs(i.row-t.row)-Math.abs(o.row-t.row)}const u=Math.abs(i.row-t.row),m=Math.abs(o.row-t.row);return u!==m?u-m:Math.abs(i.column-t.column)-Math.abs(o.column-t.column)})[0])==null?void 0:l.el)||null}_moveItemTo(t,e,s,a){const n=this._metaForItem(t);!n||n.disabled||(t.setAttribute("data-row",String(e)),t.setAttribute("data-column",String(s)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:n.value,reason:a,from:{row:n.row,column:n.column},to:{row:e,column:s}}})),this.requestRender())}_swapItems(t,e,s){const a=this._metaForItem(t),n=this._metaForItem(e);!a||!n||(t.setAttribute("data-row",String(n.row)),t.setAttribute("data-column",String(n.column)),e.setAttribute("data-row",String(a.row)),e.setAttribute("data-column",String(a.column)),this.dispatchEvent(new CustomEvent("itemmove",{bubbles:!0,composed:!0,detail:{value:a.value,targetValue:n.value,reason:s,from:{row:a.row,column:a.column},to:{row:n.row,column:n.column}}})),this.requestRender())}_onClick(t){if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);e&&this._setFocusedItem(e,!1)}_onKeyDown(t){var l,i;if(!this._isInteractive())return;const e=this._findItemFromTarget(t.target);if(!e)return;const s=this._metaForItem(e);if(!s||s.disabled)return;const a=t.key,n=a==="ArrowLeft"||a==="ArrowRight"||a==="ArrowUp"||a==="ArrowDown";if(t.altKey&&this._isDraggable()&&n){t.preventDefault();const o=a==="ArrowDown"?1:a==="ArrowUp"?-1:0,u=a==="ArrowRight"?1:a==="ArrowLeft"?-1:0;this._moveItemTo(e,Math.max(1,s.row+o),Math.max(1,s.column+u),"keyboard"),this._setFocusedItem(e,!0);return}let r=null;if(a==="ArrowLeft")r=this._findNeighbor(s,"left");else if(a==="ArrowRight")r=this._findNeighbor(s,"right");else if(a==="ArrowUp")r=this._findNeighbor(s,"up");else if(a==="ArrowDown")r=this._findNeighbor(s,"down");else if(a==="Home")r=((l=(this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems())[0])==null?void 0:l.el)||null;else if(a==="End"){const o=this._order()==="row-major"?this._sortMeta(this._computeItems()):this._computeItems();r=((i=o[o.length-1])==null?void 0:i.el)||null}r&&(t.preventDefault(),this._setFocusedItem(r,!0))}_onDragStart(t){if(!this._isDraggable())return;const e=this._findItemFromTarget(t.target);!e||e.hasAttribute("data-disabled")||(this._dragItem=e,e.setAttribute("data-dragging",""),t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",e.getAttribute("data-value")||e.id||"")))}_onDragOver(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);!e||e===this._dragItem||(t.preventDefault(),this._dragOverItem&&this._dragOverItem!==e&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragOverItem=e,e.setAttribute("data-drag-over",""))}_onDrop(t){if(!this._dragItem)return;const e=this._findItemFromTarget(t.target);t.preventDefault(),e&&e!==this._dragItem&&(this._swapItems(this._dragItem,e,"pointer"),this._setFocusedItem(this._dragItem,!1)),this._clearDragState()}_clearDragState(){this._dragItem&&this._dragItem.removeAttribute("data-dragging"),this._dragOverItem&&this._dragOverItem.removeAttribute("data-drag-over"),this._dragItem=null,this._dragOverItem=null}render(){this._syncLegacyClassname(),this._applyInlineStyles(),this._syncItems();const t=this._buildResponsiveCss();this.setContent(`<style>${x}${t?`
+${t}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(t,e,s){return!0}}typeof customElements<"u"&&!customElements.get("ui-placement-grid")&&customElements.define("ui-placement-grid",v);exports.UIPlacementGrid=v;

package/dist/placement-grid.esm.js

@@ -0,0 +1,486 @@
+import { E as v } from "./ElementBase-909688f3.mjs";
+const w = {
+  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",
+  "rows",
+  "gap",
+  "rowgap",
+  "columngap",
+  "autoflow",
+  "autorows",
+  "autocolumns",
+  "align",
+  "justify",
+  "place",
+  "aligncontent",
+  "justifycontent",
+  "placecontent"
+], A = {
+  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)"
+}, I = [
+  "data-row",
+  "data-column",
+  "data-row-span",
+  "data-column-span",
+  "data-value",
+  "data-selected",
+  "data-disabled",
+  "hidden"
+], y = `
+  :host {
+    --ui-placement-display: grid;
+    --ui-placement-columns: 1fr;
+    --ui-placement-rows: none;
+    --ui-placement-gap: 0px;
+    --ui-placement-row-gap: var(--ui-placement-gap);
+    --ui-placement-column-gap: var(--ui-placement-gap);
+    --ui-placement-auto-flow: row;
+    --ui-placement-auto-rows: auto;
+    --ui-placement-auto-columns: auto;
+    --ui-placement-align-items: stretch;
+    --ui-placement-justify-items: stretch;
+    --ui-placement-place-items: initial;
+    --ui-placement-align-content: normal;
+    --ui-placement-justify-content: normal;
+    --ui-placement-place-content: initial;
+    --ui-placement-color: var(--ui-color-text, inherit);
+    --ui-placement-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    color-scheme: light dark;
+    display: var(--ui-placement-display);
+    color: var(--ui-placement-color);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    grid-template-columns: var(--ui-placement-columns);
+    grid-template-rows: var(--ui-placement-rows);
+    gap: var(--ui-placement-gap);
+    row-gap: var(--ui-placement-row-gap);
+    column-gap: var(--ui-placement-column-gap);
+    grid-auto-flow: var(--ui-placement-auto-flow);
+    grid-auto-rows: var(--ui-placement-auto-rows);
+    grid-auto-columns: var(--ui-placement-auto-columns);
+    align-items: var(--ui-placement-align-items);
+    justify-items: var(--ui-placement-justify-items);
+    place-items: var(--ui-placement-place-items);
+    align-content: var(--ui-placement-align-content);
+    justify-content: var(--ui-placement-justify-content);
+    place-content: var(--ui-placement-place-content);
+  }
+
+  slot {
+    display: contents;
+  }
+
+  ::slotted([data-ui-placement-item]) {
+    box-sizing: border-box;
+    min-inline-size: 0;
+  }
+
+  ::slotted([data-ui-placement-item][data-draggable]) {
+    cursor: grab;
+  }
+
+  ::slotted([data-ui-placement-item][data-dragging]) {
+    opacity: 0.68;
+    cursor: grabbing;
+  }
+
+  ::slotted([data-ui-placement-item][data-drag-over]) {
+    outline: 2px solid var(--ui-placement-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ::slotted([data-ui-placement-item][data-selected]),
+  ::slotted([data-ui-placement-item]:focus-visible) {
+    outline: 2px solid var(--ui-placement-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ::slotted([data-ui-placement-item][data-disabled]) {
+    opacity: 0.56;
+    filter: saturate(0.8);
+  }
+
+  :host([headless]) {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-placement-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-placement-color: CanvasText;
+      --ui-placement-focus-ring: Highlight;
+    }
+  }
+`;
+function b(c) {
+  if (!c)
+    return null;
+  const t = c.trim();
+  if (!t.startsWith("{"))
+    return null;
+  try {
+    const e = JSON.parse(t);
+    return !e || typeof e != "object" ? null : e;
+  } catch {
+    return null;
+  }
+}
+function h(c) {
+  return A[c] || c;
+}
+function d(c) {
+  if (!c)
+    return null;
+  const t = Number.parseInt(c, 10);
+  return !Number.isFinite(t) || t < 1 ? null : t;
+}
+function _(c, t) {
+  switch (c) {
+    case "display":
+      return { "--ui-placement-display": t };
+    case "columns":
+      return { "--ui-placement-columns": t };
+    case "rows":
+      return { "--ui-placement-rows": t };
+    case "gap":
+      return { "--ui-placement-gap": h(t) };
+    case "rowgap":
+      return { "--ui-placement-row-gap": h(t) };
+    case "columngap":
+      return { "--ui-placement-column-gap": h(t) };
+    case "autoflow":
+      return { "--ui-placement-auto-flow": t };
+    case "autorows":
+      return { "--ui-placement-auto-rows": t };
+    case "autocolumns":
+      return { "--ui-placement-auto-columns": t };
+    case "align":
+      return { "--ui-placement-align-items": t };
+    case "justify":
+      return { "--ui-placement-justify-items": t };
+    case "place":
+      return { "--ui-placement-place-items": t };
+    case "aligncontent":
+      return { "--ui-placement-align-content": t };
+    case "justifycontent":
+      return { "--ui-placement-justify-content": t };
+    case "placecontent":
+      return { "--ui-placement-place-content": t };
+    default:
+      return {};
+  }
+}
+class x extends v {
+  constructor() {
+    super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set(), this._mutationObserver = null, this._suppressMutations = !1, this._focusedValue = null, this._dragItem = null, this._dragOverItem = null, this._onKeyDownBound = (t) => this._onKeyDown(t), this._onClickBound = (t) => this._onClick(t), this._onDragStartBound = (t) => this._onDragStart(t), this._onDragOverBound = (t) => this._onDragOver(t), this._onDropBound = (t) => this._onDrop(t), this._onDragEndBound = () => this._clearDragState();
+  }
+  static get observedAttributes() {
+    return ["classname", "headless", "interactive", "draggable", "order", ...p];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._observeMutations(), this.addEventListener("keydown", this._onKeyDownBound), this.addEventListener("click", this._onClickBound), this.addEventListener("dragstart", this._onDragStartBound), this.addEventListener("dragover", this._onDragOverBound), this.addEventListener("drop", this._onDropBound), this.addEventListener("dragend", this._onDragEndBound);
+  }
+  disconnectedCallback() {
+    var t;
+    this.removeEventListener("keydown", this._onKeyDownBound), this.removeEventListener("click", this._onClickBound), this.removeEventListener("dragstart", this._onDragStartBound), this.removeEventListener("dragover", this._onDragOverBound), this.removeEventListener("drop", this._onDropBound), this.removeEventListener("dragend", this._onDragEndBound), (t = this._mutationObserver) == null || t.disconnect(), this._mutationObserver = null, this._clearDragState(), super.disconnectedCallback();
+  }
+  refresh() {
+    this.requestRender();
+  }
+  focusItem(t) {
+    const e = this._resolveItem(t);
+    e && this._setFocusedItem(e, !0);
+  }
+  moveItem(t, e, s) {
+    const a = this._resolveItem(t);
+    a && this._moveItemTo(a, Math.max(1, e), Math.max(1, s), "api");
+  }
+  _observeMutations() {
+    this._mutationObserver || (this._mutationObserver = new MutationObserver(() => {
+      this._suppressMutations || this.requestRender();
+    }), this._mutationObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: [...I]
+    }));
+  }
+  _syncLegacyClassname() {
+    const t = this.getAttribute("classname") || "";
+    t !== this._lastClassname && (this._lastClassname && this._lastClassname.split(/\s+/).forEach((e) => {
+      e && this.classList.remove(e);
+    }), t && t.split(/\s+/).forEach((e) => {
+      e && this.classList.add(e);
+    }), this._lastClassname = t);
+  }
+  _applyInlineStyles() {
+    this._appliedInlineProps.forEach((t) => this.style.removeProperty(t)), this._appliedInlineProps.clear(), p.forEach((t) => {
+      const e = this.getAttribute(t);
+      if (!e || b(e))
+        return;
+      const s = _(t, e);
+      Object.entries(s).forEach(([a, n]) => {
+        this.style.setProperty(a, n), this._appliedInlineProps.add(a);
+      });
+    });
+  }
+  _buildResponsiveCss() {
+    const t = {}, e = {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    };
+    p.forEach((r) => {
+      const l = this.getAttribute(r), i = b(l);
+      if (!i)
+        return;
+      const o = (u, m) => {
+        Object.assign(u, _(r, m));
+      };
+      typeof i.initial == "string" && o(t, i.initial), typeof i.sm == "string" && o(e.sm, i.sm), typeof i.md == "string" && o(e.md, i.md), typeof i.lg == "string" && o(e.lg, i.lg), typeof i.xl == "string" && o(e.xl, i.xl);
+    });
+    const s = (r, l) => {
+      const i = Object.entries(l);
+      return i.length ? `${r} { ${i.map(([o, u]) => `${o}: ${u};`).join(" ")} }` : "";
+    }, a = [], n = s(":host", t);
+    return n && a.push(n), Object.keys(e).forEach((r) => {
+      const l = s(":host", e[r]);
+      l && a.push(`@media (min-width: ${w[r]}) { ${l} }`);
+    }), a.join(`
+`);
+  }
+  _items() {
+    return Array.from(this.children).filter(
+      (t) => t instanceof HTMLElement && t.hasAttribute("data-ui-placement-item")
+    );
+  }
+  _resolveItem(t) {
+    const e = this._items();
+    return typeof t == "number" ? e[t] || null : e.find((s) => (s.getAttribute("data-value") || s.id || "") === t) || null;
+  }
+  _fallbackColumnCount() {
+    return d(this.getAttribute("columns")) || 1;
+  }
+  _computeItems() {
+    const t = this._fallbackColumnCount();
+    let e = 0;
+    return this._items().map((s, a) => {
+      let n = d(s.getAttribute("data-row")), r = d(s.getAttribute("data-column"));
+      const l = d(s.getAttribute("data-row-span")) || 1, i = d(s.getAttribute("data-column-span")) || 1;
+      if (n == null || r == null) {
+        const o = e++, u = Math.floor(o / t) + 1, m = o % t + 1;
+        n == null && (n = u), r == null && (r = m);
+      }
+      return {
+        el: s,
+        index: a,
+        row: n,
+        column: r,
+        rowSpan: l,
+        columnSpan: i,
+        value: s.getAttribute("data-value") || s.id || String(a),
+        disabled: s.hasAttribute("disabled") || s.hasAttribute("data-disabled"),
+        selected: s.hasAttribute("data-selected")
+      };
+    });
+  }
+  _order() {
+    return this.getAttribute("order") === "row-major" ? "row-major" : "dom";
+  }
+  _isInteractive() {
+    return this.hasAttribute("interactive") || this.hasAttribute("draggable");
+  }
+  _isDraggable() {
+    return this.hasAttribute("draggable");
+  }
+  _sortMeta(t) {
+    return [...t].sort((e, s) => e.row !== s.row ? e.row - s.row : e.column !== s.column ? e.column - s.column : e.index - s.index);
+  }
+  _syncHostSemantics(t) {
+    this._isInteractive() ? (this.hasAttribute("role") || (this.setAttribute("role", "grid"), this.setAttribute("data-ui-placement-role", "")), this.setAttribute(
+      "aria-rowcount",
+      String(t.reduce((e, s) => Math.max(e, s.row + s.rowSpan - 1), 0))
+    ), this.setAttribute(
+      "aria-colcount",
+      String(t.reduce((e, s) => Math.max(e, s.column + s.columnSpan - 1), this._fallbackColumnCount()))
+    )) : this.hasAttribute("data-ui-placement-role") && (this.removeAttribute("role"), this.removeAttribute("data-ui-placement-role"), this.removeAttribute("aria-rowcount"), this.removeAttribute("aria-colcount"));
+  }
+  _setFocusedItem(t, e = !1) {
+    const s = this._items(), a = t || s[0] || null;
+    this._focusedValue = a && (a.getAttribute("data-value") || a.id) || null, s.forEach((n) => {
+      this._isInteractive() ? n.tabIndex = n === a ? 0 : -1 : n.removeAttribute("tabindex");
+    }), e && a && a.focus({ preventScroll: !0 });
+  }
+  _syncItems() {
+    var s, a;
+    const t = this._computeItems(), e = this._order() === "row-major" ? this._sortMeta(t) : t;
+    this._suppressMutations = !0;
+    try {
+      this._order() === "row-major" && e.forEach((r) => this.appendChild(r.el)), this._syncHostSemantics(e);
+      const n = ((s = e.find((r) => r.value === this._focusedValue)) == null ? void 0 : s.el) || ((a = e[0]) == null ? void 0 : a.el) || null;
+      e.forEach((r) => {
+        r.el.style.gridColumn = `${r.column} / span ${r.columnSpan}`, r.el.style.gridRow = `${r.row} / span ${r.rowSpan}`, r.el.style.minInlineSize = "0", r.el.style.boxSizing = "border-box", this._isInteractive() ? (r.el.hasAttribute("role") || r.el.setAttribute("role", "gridcell"), r.el.setAttribute("aria-rowindex", String(r.row)), r.el.setAttribute("aria-colindex", String(r.column)), r.columnSpan > 1 ? r.el.setAttribute("aria-colspan", String(r.columnSpan)) : r.el.removeAttribute("aria-colspan"), r.rowSpan > 1 ? r.el.setAttribute("aria-rowspan", String(r.rowSpan)) : r.el.removeAttribute("aria-rowspan"), r.selected ? r.el.setAttribute("aria-selected", "true") : r.el.removeAttribute("aria-selected"), r.disabled ? r.el.setAttribute("aria-disabled", "true") : r.el.removeAttribute("aria-disabled")) : (r.el.removeAttribute("aria-rowindex"), r.el.removeAttribute("aria-colindex"), r.el.removeAttribute("aria-rowspan"), r.el.removeAttribute("aria-colspan"), r.el.removeAttribute("aria-selected"), r.el.removeAttribute("aria-disabled")), this._isDraggable() && !r.disabled ? (r.el.setAttribute("data-draggable", ""), r.el.setAttribute("draggable", "true")) : (r.el.removeAttribute("data-draggable"), r.el.removeAttribute("draggable"));
+      }), this._setFocusedItem(n, !1);
+    } finally {
+      this._suppressMutations = !1;
+    }
+  }
+  _findItemFromTarget(t) {
+    if (!(t instanceof Element))
+      return null;
+    const e = t.closest("[data-ui-placement-item]");
+    return e instanceof HTMLElement && this.contains(e) ? e : null;
+  }
+  _metaForItem(t) {
+    return this._computeItems().find((e) => e.el === t) || null;
+  }
+  _intervalsOverlap(t, e, s, a) {
+    const n = t + e - 1, r = s + a - 1;
+    return t <= r && s <= n;
+  }
+  _findNeighbor(t, e) {
+    var r, l;
+    const s = this._computeItems().filter((i) => !i.disabled && i.el !== t.el);
+    if (!s.length)
+      return null;
+    const a = s.filter((i) => e === "left" || e === "right" ? this._intervalsOverlap(t.row, t.rowSpan, i.row, i.rowSpan) ? e === "left" ? i.column < t.column : i.column > t.column : !1 : this._intervalsOverlap(t.column, t.columnSpan, i.column, i.columnSpan) ? e === "up" ? i.row < t.row : i.row > t.row : !1);
+    if (!a.length) {
+      const i = this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems(), o = i.findIndex((m) => m.el === t.el);
+      return ((r = i[o + (e === "left" || e === "up" ? -1 : 1)]) == null ? void 0 : r.el) || null;
+    }
+    return ((l = a.sort((i, o) => {
+      if (e === "left" || e === "right") {
+        const f = Math.abs(i.column - t.column), g = Math.abs(o.column - t.column);
+        return f !== g ? f - g : Math.abs(i.row - t.row) - Math.abs(o.row - t.row);
+      }
+      const u = Math.abs(i.row - t.row), m = Math.abs(o.row - t.row);
+      return u !== m ? u - m : Math.abs(i.column - t.column) - Math.abs(o.column - t.column);
+    })[0]) == null ? void 0 : l.el) || null;
+  }
+  _moveItemTo(t, e, s, a) {
+    const n = this._metaForItem(t);
+    !n || n.disabled || (t.setAttribute("data-row", String(e)), t.setAttribute("data-column", String(s)), this.dispatchEvent(
+      new CustomEvent("itemmove", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: n.value,
+          reason: a,
+          from: { row: n.row, column: n.column },
+          to: { row: e, column: s }
+        }
+      })
+    ), this.requestRender());
+  }
+  _swapItems(t, e, s) {
+    const a = this._metaForItem(t), n = this._metaForItem(e);
+    !a || !n || (t.setAttribute("data-row", String(n.row)), t.setAttribute("data-column", String(n.column)), e.setAttribute("data-row", String(a.row)), e.setAttribute("data-column", String(a.column)), this.dispatchEvent(
+      new CustomEvent("itemmove", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: a.value,
+          targetValue: n.value,
+          reason: s,
+          from: { row: a.row, column: a.column },
+          to: { row: n.row, column: n.column }
+        }
+      })
+    ), this.requestRender());
+  }
+  _onClick(t) {
+    if (!this._isInteractive())
+      return;
+    const e = this._findItemFromTarget(t.target);
+    e && this._setFocusedItem(e, !1);
+  }
+  _onKeyDown(t) {
+    var l, i;
+    if (!this._isInteractive())
+      return;
+    const e = this._findItemFromTarget(t.target);
+    if (!e)
+      return;
+    const s = this._metaForItem(e);
+    if (!s || s.disabled)
+      return;
+    const a = t.key, n = a === "ArrowLeft" || a === "ArrowRight" || a === "ArrowUp" || a === "ArrowDown";
+    if (t.altKey && this._isDraggable() && n) {
+      t.preventDefault();
+      const o = a === "ArrowDown" ? 1 : a === "ArrowUp" ? -1 : 0, u = a === "ArrowRight" ? 1 : a === "ArrowLeft" ? -1 : 0;
+      this._moveItemTo(e, Math.max(1, s.row + o), Math.max(1, s.column + u), "keyboard"), this._setFocusedItem(e, !0);
+      return;
+    }
+    let r = null;
+    if (a === "ArrowLeft")
+      r = this._findNeighbor(s, "left");
+    else if (a === "ArrowRight")
+      r = this._findNeighbor(s, "right");
+    else if (a === "ArrowUp")
+      r = this._findNeighbor(s, "up");
+    else if (a === "ArrowDown")
+      r = this._findNeighbor(s, "down");
+    else if (a === "Home")
+      r = ((l = (this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems())[0]) == null ? void 0 : l.el) || null;
+    else if (a === "End") {
+      const o = this._order() === "row-major" ? this._sortMeta(this._computeItems()) : this._computeItems();
+      r = ((i = o[o.length - 1]) == null ? void 0 : i.el) || null;
+    }
+    r && (t.preventDefault(), this._setFocusedItem(r, !0));
+  }
+  _onDragStart(t) {
+    if (!this._isDraggable())
+      return;
+    const e = this._findItemFromTarget(t.target);
+    !e || e.hasAttribute("data-disabled") || (this._dragItem = e, e.setAttribute("data-dragging", ""), t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e.getAttribute("data-value") || e.id || "")));
+  }
+  _onDragOver(t) {
+    if (!this._dragItem)
+      return;
+    const e = this._findItemFromTarget(t.target);
+    !e || e === this._dragItem || (t.preventDefault(), this._dragOverItem && this._dragOverItem !== e && this._dragOverItem.removeAttribute("data-drag-over"), this._dragOverItem = e, e.setAttribute("data-drag-over", ""));
+  }
+  _onDrop(t) {
+    if (!this._dragItem)
+      return;
+    const e = this._findItemFromTarget(t.target);
+    t.preventDefault(), e && e !== this._dragItem && (this._swapItems(this._dragItem, e, "pointer"), this._setFocusedItem(this._dragItem, !1)), this._clearDragState();
+  }
+  _clearDragState() {
+    this._dragItem && this._dragItem.removeAttribute("data-dragging"), this._dragOverItem && this._dragOverItem.removeAttribute("data-drag-over"), this._dragItem = null, this._dragOverItem = null;
+  }
+  render() {
+    this._syncLegacyClassname(), this._applyInlineStyles(), this._syncItems();
+    const t = this._buildResponsiveCss();
+    this.setContent(`<style>${y}${t ? `
+${t}` : ""}</style><slot></slot>`);
+  }
+  shouldRenderOnAttributeChange(t, e, s) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-placement-grid") && customElements.define("ui-placement-grid", x);
+export {
+  x as UIPlacementGrid
+};