@editora/ui-core 0.1.9 → 0.1.10

package/dist/table.cjs.js

@@ -0,0 +1,212 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-1b301e7f.js"),y=`
+  :host {
+    display: block;
+    color-scheme: light dark;
+    --ui-table-radius: 14px;
+    --ui-table-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-table-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-table-text: var(--ui-color-text, #0f172a);
+    --ui-table-muted: var(--ui-color-muted, #64748b);
+    --ui-table-accent: var(--ui-color-primary, #2563eb);
+    --ui-table-shadow: none;
+    --ui-table-empty-color: var(--ui-table-muted);
+  }
+
+  .frame {
+    position: relative;
+    overflow: auto;
+    border: var(--ui-table-border);
+    border-radius: var(--ui-table-radius);
+    background: var(--ui-table-bg);
+    box-shadow: var(--ui-table-shadow);
+    backdrop-filter: saturate(1.1) blur(8px);
+  }
+
+  :host([headless]) .frame {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  .empty {
+    padding: 24px 16px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--ui-table-empty-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      border-width: 2px;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-table-border: 1px solid CanvasText;
+      --ui-table-bg: Canvas;
+      --ui-table-text: CanvasText;
+      --ui-table-muted: CanvasText;
+      --ui-table-accent: Highlight;
+      --ui-table-shadow: none;
+    }
+
+    .frame {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+  }
+`,h=`
+  ui-table:not([headless]) > table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 13px;
+    color: var(--ui-table-text, var(--ui-color-text, #0f172a));
+    min-width: 560px;
+  }
+
+  ui-table:not([headless]) > table thead th {
+    text-align: left;
+    padding: 12px 14px;
+    color: var(--ui-table-muted, var(--ui-color-muted, #64748b));
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 92%, transparent),
+      color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, transparent)
+    );
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    white-space: nowrap;
+  }
+
+  ui-table:not([headless]) > table tbody td {
+    padding: 11px 14px;
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+    vertical-align: middle;
+    color: var(--ui-table-text, var(--ui-color-text, #0f172a));
+  }
+
+  ui-table:not([headless]) > table tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  ui-table[compact]:not([headless]) > table thead th,
+  ui-table[compact]:not([headless]) > table tbody td {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  ui-table[striped]:not([headless]) > table tbody tr:nth-child(even) td {
+    background: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 24%, transparent);
+  }
+
+  ui-table[hover]:not([headless]) > table tbody tr:hover td {
+    background: color-mix(in srgb, var(--ui-table-accent, var(--ui-color-primary, #2563eb)) 12%, transparent);
+  }
+
+  ui-table[bordered]:not([headless]) > table thead th,
+  ui-table[bordered]:not([headless]) > table tbody td {
+    border-right: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+  }
+
+  ui-table[bordered]:not([headless]) > table thead th:last-child,
+  ui-table[bordered]:not([headless]) > table tbody td:last-child {
+    border-right: none;
+  }
+
+  ui-table[sticky-header]:not([headless]) > table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[data-sortable="true"] {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    padding-right: 24px;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[data-sortable="true"]::after {
+    content: "⇅";
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -7px;
+    font-size: 12px;
+    line-height: 1;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #64748b)) 76%, transparent);
+    letter-spacing: 0;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[aria-sort="ascending"]::after {
+    content: "↑";
+    letter-spacing: 0;
+    color: var(--ui-table-accent, var(--ui-color-primary, #2563eb));
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[aria-sort="descending"]::after {
+    content: "↓";
+    letter-spacing: 0;
+    color: var(--ui-table-accent, var(--ui-color-primary, #2563eb));
+  }
+
+  ui-table[selectable]:not([headless]) > table tbody tr {
+    cursor: pointer;
+  }
+
+  ui-table[selectable]:not([headless]) > table tbody tr[data-selected="true"] td {
+    background: color-mix(in srgb, var(--ui-table-accent, var(--ui-color-primary, #2563eb)) 16%, transparent);
+  }
+
+  ui-table[loading]:not([headless]) > table tbody {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  @media (prefers-contrast: more) {
+    ui-table:not([headless]) > table thead th,
+    ui-table:not([headless]) > table tbody td {
+      border-bottom-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    ui-table:not([headless]) > table,
+    ui-table:not([headless]) > table thead th,
+    ui-table:not([headless]) > table tbody td {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    ui-table[hover]:not([headless]) > table tbody tr:hover td,
+    ui-table[selectable]:not([headless]) > table tbody tr[data-selected="true"] td {
+      border-color: Highlight;
+    }
+  }
+`;function f(){if(typeof document>"u")return;const i="ui-table-light-dom-style",t=document.getElementById(i);if(t){t.textContent!==h&&(t.textContent=h);return}const s=document.createElement("style");s.id=i,s.textContent=h,document.head.appendChild(s)}typeof document<"u"&&f();function d(i){return i?(i.textContent||"").replace(/\s+/g," ").trim():""}function _(i){const t=i.replace(/,/g,"");if(/^-?\d+(\.\d+)?$/.test(t))return Number(t);const s=Date.parse(i);return!Number.isNaN(s)&&/[-/]/.test(i)?s:i.toLowerCase()}class m extends p.ElementBase{constructor(){super(),this._table=null,this._observer=null,this._sortColumnIndex=-1,this._sortDirection="asc",this._selectedRows=new Set,this._isSyncing=!1,this._syncRaf=0,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["headless","empty-text","sortable","selectable","multi-select"]}connectedCallback(){super.connectedCallback(),f(),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(()=>{this._isSyncing||this._queueSyncStructure()}),this._observer.observe(this,{childList:!0,subtree:!0,characterData:!0})}disconnectedCallback(){this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._syncRaf&&(cancelAnimationFrame(this._syncRaf),this._syncRaf=0),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}attributeChangedCallback(t,s,e){if(s!==e){if(t==="headless"){this.requestRender();return}if(t==="empty-text"){this._syncEmptyText();return}this.isConnected&&this._queueSyncStructure()}}render(){if(this.hasAttribute("headless")){this.setContent("<slot></slot>"),this._syncStructure();return}const t=this.getAttribute("empty-text")||"No table data available.";this.setContent(`
+      <style>${y}</style>
+      <div class="frame" part="frame">
+        <slot></slot>
+        <div class="empty" part="empty" hidden>${t}</div>
+      </div>
+    `),this._syncStructure()}_findTable(){return this.querySelector("table")}_queueSyncStructure(){this.isConnected&&(this._syncRaf||(this._syncRaf=requestAnimationFrame(()=>{this._syncRaf=0,this._syncStructure()})))}_syncStructure(){if(!this._isSyncing){this._isSyncing=!0;try{this._table=this._findTable();const t=this.root.querySelector(".empty");if(this._syncEmptyText(),!this._table){t&&t.removeAttribute("hidden"),this._selectedRows.clear();return}t&&t.setAttribute("hidden",""),this._table.hasAttribute("data-ui-table")||this._table.setAttribute("data-ui-table","true"),this._table.hasAttribute("role")||this._table.setAttribute("role","table"),this._syncHeaderState(),this._syncRowSelectionState()}finally{this._isSyncing=!1}}}_syncEmptyText(){const t=this.root.querySelector(".empty");t&&(t.textContent=this.getAttribute("empty-text")||"No table data available.")}_headerCells(){var e;if(!this._table)return[];const t=(e=this._table.tHead)==null?void 0:e.rows[0];if(t)return Array.from(t.cells).filter(r=>r.tagName.toLowerCase()==="th");const s=this._table.querySelectorAll("th");return Array.from(s)}_syncHeaderState(){const t=this.hasAttribute("sortable");this._headerCells().forEach((e,r)=>{t?(e.setAttribute("data-sortable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0")):(e.removeAttribute("data-sortable"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex")),r===this._sortColumnIndex&&t?e.setAttribute("aria-sort",this._sortDirection==="asc"?"ascending":"descending"):t?e.setAttribute("aria-sort","none"):e.removeAttribute("aria-sort")})}_syncRowSelectionState(){const t=this.hasAttribute("selectable"),s=this._bodyRows();for(const e of Array.from(this._selectedRows))s.includes(e)||this._selectedRows.delete(e);s.forEach(e=>{t?(e.setAttribute("aria-selected",this._selectedRows.has(e)?"true":"false"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),this._selectedRows.has(e)?e.setAttribute("data-selected","true"):e.removeAttribute("data-selected")):(e.removeAttribute("aria-selected"),e.removeAttribute("data-selected"),e.getAttribute("tabindex")==="0"&&e.removeAttribute("tabindex"))})}_bodyRows(){if(!this._table)return[];const t=this._table.tBodies[0];return t?Array.from(t.rows):[]}_sortByColumn(t,s){if(!this._table)return;const e=this._table.tBodies[0];if(!e)return;this._sortColumnIndex===t?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortColumnIndex=t,this._sortDirection="asc"),Array.from(e.rows).map((a,l)=>({row:a,rowIndex:l,value:_(d(a.cells[t]))})).sort((a,l)=>{const b=a.value,u=l.value;let c=0;return typeof b=="number"&&typeof u=="number"?c=b-u:c=String(b).localeCompare(String(u),void 0,{numeric:!0,sensitivity:"base"}),c===0&&(c=a.rowIndex-l.rowIndex),this._sortDirection==="asc"?c:-c}).map(a=>a.row).forEach(a=>e.appendChild(a)),this._syncHeaderState(),this._syncRowSelectionState();const o=s.getAttribute("data-key")||d(s)||`column-${t+1}`;this.dispatchEvent(new CustomEvent("sort-change",{detail:{columnIndex:t,key:o,direction:this._sortDirection},bubbles:!0}))}_rowValues(t){const s=this._headerCells(),e=Array.from(t.cells),r={};return e.forEach((n,o)=>{const a=s[o],l=((a==null?void 0:a.getAttribute("data-key"))||d(a||void 0)||`col_${o+1}`).toLowerCase().replace(/[^a-z0-9_]+/g,"_").replace(/^_+|_+$/g,"");r[l||`col_${o+1}`]=d(n)}),r}_toggleRowSelection(t){const s=this.hasAttribute("multi-select"),e=this._selectedRows.has(t);s||this._selectedRows.clear(),e&&s?this._selectedRows.delete(t):this._selectedRows.add(t),this._syncRowSelectionState();const r=this._bodyRows(),n=r.flatMap((a,l)=>this._selectedRows.has(a)?[l]:[]),o=r.filter(a=>this._selectedRows.has(a)).map(a=>this._rowValues(a));this.dispatchEvent(new CustomEvent("row-select",{detail:{index:r.indexOf(t),selected:this._selectedRows.has(t),indices:n,rows:o},bubbles:!0}))}_onClick(t){if(!this._table)return;const s=t.target;if(this.hasAttribute("sortable")){const e=s.closest("th");if(e&&this._table.contains(e)){const n=this._headerCells().indexOf(e);if(n>=0){this._sortByColumn(n,e);return}}}if(this.hasAttribute("selectable")){const e=s.closest("tbody tr");e&&this._table.contains(e)&&this._toggleRowSelection(e)}}_onKeyDown(t){if(!this._table)return;const s=t.key;if(s!=="Enter"&&s!==" ")return;const e=t.target;if(this.hasAttribute("sortable")){const r=e.closest("th");if(r&&this._table.contains(r)){const o=this._headerCells().indexOf(r);if(o>=0){t.preventDefault(),this._sortByColumn(o,r);return}}}if(this.hasAttribute("selectable")){const r=e.closest("tbody tr");r&&this._table.contains(r)&&(t.preventDefault(),this._toggleRowSelection(r))}}shouldRenderOnAttributeChange(t,s,e){return!1}}typeof customElements<"u"&&!customElements.get("ui-table")&&customElements.define("ui-table",m);exports.UITable=m;

package/dist/table.esm.js

@@ -0,0 +1,432 @@
+import { E as m } from "./ElementBase-909688f3.mjs";
+const p = `
+  :host {
+    display: block;
+    color-scheme: light dark;
+    --ui-table-radius: 14px;
+    --ui-table-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-table-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-table-text: var(--ui-color-text, #0f172a);
+    --ui-table-muted: var(--ui-color-muted, #64748b);
+    --ui-table-accent: var(--ui-color-primary, #2563eb);
+    --ui-table-shadow: none;
+    --ui-table-empty-color: var(--ui-table-muted);
+  }
+
+  .frame {
+    position: relative;
+    overflow: auto;
+    border: var(--ui-table-border);
+    border-radius: var(--ui-table-radius);
+    background: var(--ui-table-bg);
+    box-shadow: var(--ui-table-shadow);
+    backdrop-filter: saturate(1.1) blur(8px);
+  }
+
+  :host([headless]) .frame {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  .empty {
+    padding: 24px 16px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--ui-table-empty-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      border-width: 2px;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-table-border: 1px solid CanvasText;
+      --ui-table-bg: Canvas;
+      --ui-table-text: CanvasText;
+      --ui-table-muted: CanvasText;
+      --ui-table-accent: Highlight;
+      --ui-table-shadow: none;
+    }
+
+    .frame {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+  }
+`, h = `
+  ui-table:not([headless]) > table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 13px;
+    color: var(--ui-table-text, var(--ui-color-text, #0f172a));
+    min-width: 560px;
+  }
+
+  ui-table:not([headless]) > table thead th {
+    text-align: left;
+    padding: 12px 14px;
+    color: var(--ui-table-muted, var(--ui-color-muted, #64748b));
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 92%, transparent),
+      color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, transparent)
+    );
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    white-space: nowrap;
+  }
+
+  ui-table:not([headless]) > table tbody td {
+    padding: 11px 14px;
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+    vertical-align: middle;
+    color: var(--ui-table-text, var(--ui-color-text, #0f172a));
+  }
+
+  ui-table:not([headless]) > table tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  ui-table[compact]:not([headless]) > table thead th,
+  ui-table[compact]:not([headless]) > table tbody td {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  ui-table[striped]:not([headless]) > table tbody tr:nth-child(even) td {
+    background: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 24%, transparent);
+  }
+
+  ui-table[hover]:not([headless]) > table tbody tr:hover td {
+    background: color-mix(in srgb, var(--ui-table-accent, var(--ui-color-primary, #2563eb)) 12%, transparent);
+  }
+
+  ui-table[bordered]:not([headless]) > table thead th,
+  ui-table[bordered]:not([headless]) > table tbody td {
+    border-right: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+  }
+
+  ui-table[bordered]:not([headless]) > table thead th:last-child,
+  ui-table[bordered]:not([headless]) > table tbody td:last-child {
+    border-right: none;
+  }
+
+  ui-table[sticky-header]:not([headless]) > table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[data-sortable="true"] {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    padding-right: 24px;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[data-sortable="true"]::after {
+    content: "⇅";
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -7px;
+    font-size: 12px;
+    line-height: 1;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--ui-table-muted, var(--ui-color-muted, #64748b)) 76%, transparent);
+    letter-spacing: 0;
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[aria-sort="ascending"]::after {
+    content: "↑";
+    letter-spacing: 0;
+    color: var(--ui-table-accent, var(--ui-color-primary, #2563eb));
+  }
+
+  ui-table[sortable]:not([headless]) > table thead th[aria-sort="descending"]::after {
+    content: "↓";
+    letter-spacing: 0;
+    color: var(--ui-table-accent, var(--ui-color-primary, #2563eb));
+  }
+
+  ui-table[selectable]:not([headless]) > table tbody tr {
+    cursor: pointer;
+  }
+
+  ui-table[selectable]:not([headless]) > table tbody tr[data-selected="true"] td {
+    background: color-mix(in srgb, var(--ui-table-accent, var(--ui-color-primary, #2563eb)) 16%, transparent);
+  }
+
+  ui-table[loading]:not([headless]) > table tbody {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  @media (prefers-contrast: more) {
+    ui-table:not([headless]) > table thead th,
+    ui-table:not([headless]) > table tbody td {
+      border-bottom-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    ui-table:not([headless]) > table,
+    ui-table:not([headless]) > table thead th,
+    ui-table:not([headless]) > table tbody td {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    ui-table[hover]:not([headless]) > table tbody tr:hover td,
+    ui-table[selectable]:not([headless]) > table tbody tr[data-selected="true"] td {
+      border-color: Highlight;
+    }
+  }
+`;
+function f() {
+  if (typeof document > "u")
+    return;
+  const i = "ui-table-light-dom-style", t = document.getElementById(i);
+  if (t) {
+    t.textContent !== h && (t.textContent = h);
+    return;
+  }
+  const s = document.createElement("style");
+  s.id = i, s.textContent = h, document.head.appendChild(s);
+}
+typeof document < "u" && f();
+function d(i) {
+  return i ? (i.textContent || "").replace(/\s+/g, " ").trim() : "";
+}
+function y(i) {
+  const t = i.replace(/,/g, "");
+  if (/^-?\d+(\.\d+)?$/.test(t))
+    return Number(t);
+  const s = Date.parse(i);
+  return !Number.isNaN(s) && /[-/]/.test(i) ? s : i.toLowerCase();
+}
+class _ extends m {
+  constructor() {
+    super(), this._table = null, this._observer = null, this._sortColumnIndex = -1, this._sortDirection = "asc", this._selectedRows = /* @__PURE__ */ new Set(), this._isSyncing = !1, this._syncRaf = 0, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return ["headless", "empty-text", "sortable", "selectable", "multi-select"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), f(), this.addEventListener("click", this._onClick), this.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(() => {
+      this._isSyncing || this._queueSyncStructure();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this._syncRaf && (cancelAnimationFrame(this._syncRaf), this._syncRaf = 0), this._observer && (this._observer.disconnect(), this._observer = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, s, e) {
+    if (s !== e) {
+      if (t === "headless") {
+        this.requestRender();
+        return;
+      }
+      if (t === "empty-text") {
+        this._syncEmptyText();
+        return;
+      }
+      this.isConnected && this._queueSyncStructure();
+    }
+  }
+  render() {
+    if (this.hasAttribute("headless")) {
+      this.setContent("<slot></slot>"), this._syncStructure();
+      return;
+    }
+    const t = this.getAttribute("empty-text") || "No table data available.";
+    this.setContent(`
+      <style>${p}</style>
+      <div class="frame" part="frame">
+        <slot></slot>
+        <div class="empty" part="empty" hidden>${t}</div>
+      </div>
+    `), this._syncStructure();
+  }
+  _findTable() {
+    return this.querySelector("table");
+  }
+  _queueSyncStructure() {
+    this.isConnected && (this._syncRaf || (this._syncRaf = requestAnimationFrame(() => {
+      this._syncRaf = 0, this._syncStructure();
+    })));
+  }
+  _syncStructure() {
+    if (!this._isSyncing) {
+      this._isSyncing = !0;
+      try {
+        this._table = this._findTable();
+        const t = this.root.querySelector(".empty");
+        if (this._syncEmptyText(), !this._table) {
+          t && t.removeAttribute("hidden"), this._selectedRows.clear();
+          return;
+        }
+        t && t.setAttribute("hidden", ""), this._table.hasAttribute("data-ui-table") || this._table.setAttribute("data-ui-table", "true"), this._table.hasAttribute("role") || this._table.setAttribute("role", "table"), this._syncHeaderState(), this._syncRowSelectionState();
+      } finally {
+        this._isSyncing = !1;
+      }
+    }
+  }
+  _syncEmptyText() {
+    const t = this.root.querySelector(".empty");
+    t && (t.textContent = this.getAttribute("empty-text") || "No table data available.");
+  }
+  _headerCells() {
+    var e;
+    if (!this._table)
+      return [];
+    const t = (e = this._table.tHead) == null ? void 0 : e.rows[0];
+    if (t)
+      return Array.from(t.cells).filter((r) => r.tagName.toLowerCase() === "th");
+    const s = this._table.querySelectorAll("th");
+    return Array.from(s);
+  }
+  _syncHeaderState() {
+    const t = this.hasAttribute("sortable");
+    this._headerCells().forEach((e, r) => {
+      t ? (e.setAttribute("data-sortable", "true"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0")) : (e.removeAttribute("data-sortable"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex")), r === this._sortColumnIndex && t ? e.setAttribute("aria-sort", this._sortDirection === "asc" ? "ascending" : "descending") : t ? e.setAttribute("aria-sort", "none") : e.removeAttribute("aria-sort");
+    });
+  }
+  _syncRowSelectionState() {
+    const t = this.hasAttribute("selectable"), s = this._bodyRows();
+    for (const e of Array.from(this._selectedRows))
+      s.includes(e) || this._selectedRows.delete(e);
+    s.forEach((e) => {
+      t ? (e.setAttribute("aria-selected", this._selectedRows.has(e) ? "true" : "false"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), this._selectedRows.has(e) ? e.setAttribute("data-selected", "true") : e.removeAttribute("data-selected")) : (e.removeAttribute("aria-selected"), e.removeAttribute("data-selected"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex"));
+    });
+  }
+  _bodyRows() {
+    if (!this._table)
+      return [];
+    const t = this._table.tBodies[0];
+    return t ? Array.from(t.rows) : [];
+  }
+  _sortByColumn(t, s) {
+    if (!this._table)
+      return;
+    const e = this._table.tBodies[0];
+    if (!e)
+      return;
+    this._sortColumnIndex === t ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortColumnIndex = t, this._sortDirection = "asc"), Array.from(e.rows).map((a, l) => ({
+      row: a,
+      rowIndex: l,
+      value: y(d(a.cells[t]))
+    })).sort((a, l) => {
+      const b = a.value, u = l.value;
+      let c = 0;
+      return typeof b == "number" && typeof u == "number" ? c = b - u : c = String(b).localeCompare(String(u), void 0, { numeric: !0, sensitivity: "base" }), c === 0 && (c = a.rowIndex - l.rowIndex), this._sortDirection === "asc" ? c : -c;
+    }).map((a) => a.row).forEach((a) => e.appendChild(a)), this._syncHeaderState(), this._syncRowSelectionState();
+    const o = s.getAttribute("data-key") || d(s) || `column-${t + 1}`;
+    this.dispatchEvent(
+      new CustomEvent("sort-change", {
+        detail: {
+          columnIndex: t,
+          key: o,
+          direction: this._sortDirection
+        },
+        bubbles: !0
+      })
+    );
+  }
+  _rowValues(t) {
+    const s = this._headerCells(), e = Array.from(t.cells), r = {};
+    return e.forEach((n, o) => {
+      const a = s[o], l = ((a == null ? void 0 : a.getAttribute("data-key")) || d(a || void 0) || `col_${o + 1}`).toLowerCase().replace(/[^a-z0-9_]+/g, "_").replace(/^_+|_+$/g, "");
+      r[l || `col_${o + 1}`] = d(n);
+    }), r;
+  }
+  _toggleRowSelection(t) {
+    const s = this.hasAttribute("multi-select"), e = this._selectedRows.has(t);
+    s || this._selectedRows.clear(), e && s ? this._selectedRows.delete(t) : this._selectedRows.add(t), this._syncRowSelectionState();
+    const r = this._bodyRows(), n = r.flatMap((a, l) => this._selectedRows.has(a) ? [l] : []), o = r.filter((a) => this._selectedRows.has(a)).map((a) => this._rowValues(a));
+    this.dispatchEvent(
+      new CustomEvent("row-select", {
+        detail: {
+          index: r.indexOf(t),
+          selected: this._selectedRows.has(t),
+          indices: n,
+          rows: o
+        },
+        bubbles: !0
+      })
+    );
+  }
+  _onClick(t) {
+    if (!this._table)
+      return;
+    const s = t.target;
+    if (this.hasAttribute("sortable")) {
+      const e = s.closest("th");
+      if (e && this._table.contains(e)) {
+        const n = this._headerCells().indexOf(e);
+        if (n >= 0) {
+          this._sortByColumn(n, e);
+          return;
+        }
+      }
+    }
+    if (this.hasAttribute("selectable")) {
+      const e = s.closest("tbody tr");
+      e && this._table.contains(e) && this._toggleRowSelection(e);
+    }
+  }
+  _onKeyDown(t) {
+    if (!this._table)
+      return;
+    const s = t.key;
+    if (s !== "Enter" && s !== " ")
+      return;
+    const e = t.target;
+    if (this.hasAttribute("sortable")) {
+      const r = e.closest("th");
+      if (r && this._table.contains(r)) {
+        const o = this._headerCells().indexOf(r);
+        if (o >= 0) {
+          t.preventDefault(), this._sortByColumn(o, r);
+          return;
+        }
+      }
+    }
+    if (this.hasAttribute("selectable")) {
+      const r = e.closest("tbody tr");
+      r && this._table.contains(r) && (t.preventDefault(), this._toggleRowSelection(r));
+    }
+  }
+  shouldRenderOnAttributeChange(t, s, e) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-table") && customElements.define("ui-table", _);
+export {
+  _ as UITable
+};