@avento-space/ts-ui 1.2.2 → 1.2.4

package/dist/{chunk-RQZ7KDYP.js → chunk-2JEFDU25.js}

@@ -1,4 +1,4 @@
-import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-ICB6OBEZ.js';
+import { UElement, buttonStyles, inputStyles, boxStyles, listStyles, textStyles, stackStyles, gridStyles, overlayStyles, fieldStyles, checkboxStyles, selectStyles, linkStyles, containerStyles, dialogStyles, tooltipStyles, textareaStyles, radioStyles, switchStyles, labelStyles, treeStyles, tableStyles, breadcrumbStyles, tabsStyles, visuallyHiddenStyles, presenceStyles, animateKeyframes, modalStyles, drawerStyles, popoverStyles, dropdownStyles, accordionStyles, comboboxStyles, calendarStyles, dataTableStyles, commandPaletteStyles, toastStyles, contextMenuStyles, sortableStyles, formStyles, badgeStyles, cardStyles } from './chunk-AOFVLHAJ.js';
 import { signal, effect } from './chunk-Q5RCPPCF.js';
 
 // src/components/button.wc.ts
@@ -12,7 +12,7 @@ var UButton = class extends UElement {
     this._root.innerHTML = `<style>${buttonStyles}</style><button part="button"><slot></slot></button>`;
   }
   static get observedAttributes() {
-    return ["variant", "size", "disabled", "type"];
+    return ["variant", "size", "disabled", "type", "class"];
   }
   get variant() {
     return this._variant;
@@ -73,7 +73,7 @@ var UButton = class extends UElement {
   }
   _sync() {
     const btn = this._root.querySelector("button");
-    btn.className = `btn btn-${this._variant} btn-${this._size}`;
+    btn.className = `btn btn-${this._variant} btn-${this._size} ${this.className}`.trim();
     btn.disabled = this._disabled;
     btn.type = this._buttonType;
   }
@@ -98,10 +98,10 @@ var UInput = class extends UElement {
     this._readonly = false;
     this._inputType = "text";
     this._inputName = "";
-    this._root.innerHTML = `<style>${inputStyles}</style><div class="input-wrapper"><input part="input" /></div>`;
+    this._root.innerHTML = `<style>${inputStyles}</style><div part="wrapper" class="input-wrapper"><input part="input" /></div>`;
   }
   static get observedAttributes() {
-    return ["placeholder", "disabled", "readonly", "type", "name"];
+    return ["placeholder", "disabled", "readonly", "type", "name", "class"];
   }
   get value() {
     return this._root.querySelector("input")?.value ?? "";
@@ -175,6 +175,7 @@ var UInput = class extends UElement {
   _sync() {
     const input = this._root.querySelector("input");
     if (!input) return;
+    input.className = this.className;
     input.placeholder = this._placeholder;
     input.disabled = this._disabled;
     input.readOnly = this._readonly;
@@ -237,7 +238,7 @@ var UBox = class extends UElement {
     this._root.innerHTML = `<style>${boxStyles}</style><div part="box"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["as"];
+    return ["as", "class"];
   }
   get as() {
     return this._as;
@@ -268,6 +269,7 @@ var UBox = class extends UElement {
     }
     const wrapper = document.createElement(this._as);
     wrapper.setAttribute("part", "box");
+    wrapper.className = `box ${this.className}`.trim();
     const newSlot = document.createElement("slot");
     wrapper.appendChild(newSlot);
     this._root.innerHTML = `<style>${boxStyles}</style>`;
@@ -277,6 +279,8 @@ var UBox = class extends UElement {
     const inner = this._root.querySelector('[part="box"]');
     if (!inner || inner.tagName.toLowerCase() !== this._as) {
       this._rebuild();
+    } else {
+      inner.className = `box ${this.className}`.trim();
     }
   }
   _mount() {
@@ -292,6 +296,9 @@ var UList = class extends UElement {
     this._emptyText = "";
     this._root.innerHTML = `<style>${listStyles}</style><ul part="list"><slot></slot></ul>`;
   }
+  static get observedAttributes() {
+    return ["class"];
+  }
   get items() {
     return this._items;
   }
@@ -333,6 +340,18 @@ var UList = class extends UElement {
       ul.appendChild(li);
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === "class") this._sync();
+  }
+  _sync() {
+    const ul = this._root.querySelector("ul");
+    ul.className = this.className;
+  }
   _mount() {
   }
 };
@@ -351,7 +370,7 @@ var UVirtualList = class extends UElement {
 </style><div class="viewport" part="viewport"></div>`;
   }
   static get observedAttributes() {
-    return ["item-height", "container-height", "overscan"];
+    return ["item-height", "container-height", "overscan", "class"];
   }
   get items() {
     return this._items;
@@ -411,11 +430,13 @@ var UVirtualList = class extends UElement {
     const visibleCount = Math.ceil(this._containerHeight / this._itemHeight) + this._overscan * 2;
     const startIndex = Math.max(0, Math.floor(scrollTop / this._itemHeight) - this._overscan);
     const endIndex = Math.min(this._items.length, startIndex + visibleCount);
+    viewport.className = `viewport ${this.className}`.trim();
     viewport.style.height = `${totalHeight}px`;
     viewport.innerHTML = "";
     for (let i = startIndex; i < endIndex; i++) {
       const div = document.createElement("div");
       div.className = "item";
+      div.setAttribute("part", "item");
       div.style.top = `${i * this._itemHeight}px`;
       div.style.height = `${this._itemHeight}px`;
       const content = this._renderItem(this._items[i], i);
@@ -515,7 +536,7 @@ var UText = class extends UElement {
     this._root.innerHTML = `<style>${textStyles}</style><span part="text"><slot></slot></span>`;
   }
   static get observedAttributes() {
-    return ["size", "weight", "color", "as", "align", "truncate"];
+    return ["size", "weight", "color", "as", "align", "truncate", "class"];
   }
   get size() {
     return this._size;
@@ -591,7 +612,7 @@ var UText = class extends UElement {
   _sync() {
     const el = this._root.querySelector('[part="text"]');
     if (!el) return;
-    el.className = `text text-${this._size} text-${this._weight} text-${this._color} text-${this._align}`;
+    el.className = `text text-${this._size} text-${this._weight} text-${this._color} text-${this._align} ${this.className}`.trim();
     if (this._truncate) el.classList.add("text-truncate");
   }
   _mount() {
@@ -606,10 +627,11 @@ var UStack = class extends UElement {
     this._align = "stretch";
     this._justify = "start";
     this._wrap = false;
+    this._direction = "v";
     this._root.innerHTML = `<style>${stackStyles}</style><div part="stack" class="stack stack-v"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["gap", "align", "justify", "wrap"];
+    return ["gap", "align", "justify", "wrap", "class"];
   }
   get gap() {
     return this._gap;
@@ -653,6 +675,7 @@ var UStack = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="stack"]');
+    el.className = `stack stack-${this._direction} ${this.className}`.trim();
     el.style.gap = `${this._gap}px`;
     el.style.alignItems = this._align === "stretch" ? "stretch" : `flex-${this._align === "start" ? "start" : this._align === "end" ? "end" : this._align}`;
     el.style.justifyContent = this._justify === "start" ? "flex-start" : this._justify === "end" ? "flex-end" : this._justify === "between" ? "space-between" : this._justify === "around" ? "space-around" : "flex-start";
@@ -665,9 +688,7 @@ var UStack = class extends UElement {
 var UHStack = class extends UStack {
   constructor() {
     super();
-    const el = this._root.querySelector('[part="stack"]');
-    el.classList.remove("stack-v");
-    el.classList.add("stack-h");
+    this._direction = "h";
   }
 };
 
@@ -681,7 +702,7 @@ var UGrid = class extends UElement {
     this._root.innerHTML = `<style>${gridStyles}</style><div part="grid" class="grid"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["columns", "gap", "align"];
+    return ["columns", "gap", "align", "class"];
   }
   get columns() {
     return this._columns;
@@ -716,6 +737,7 @@ var UGrid = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="grid"]');
+    el.className = `grid ${this.className}`.trim();
     el.style.gridTemplateColumns = `repeat(${this._columns}, 1fr)`;
     el.style.gap = `${this._gap}px`;
     el.style.alignItems = this._align === "stretch" ? "stretch" : `flex-${this._align}`;
@@ -750,7 +772,7 @@ var UPressable = class extends UElement {
     this._root.addEventListener("keyup", (e) => this._onKeyUp(e));
   }
   static get observedAttributes() {
-    return ["disabled"];
+    return ["disabled", "class"];
   }
   get disabled() {
     return this._disabled;
@@ -773,9 +795,13 @@ var UPressable = class extends UElement {
     if (name === "disabled") {
       this._disabled = newVal !== null;
       this._sync();
+    } else if (name === "class") {
+      this._sync();
     }
   }
   _sync() {
+    const pressableEl = this._root.querySelector('[part="pressable"]');
+    pressableEl.className = `pressable ${this.className}`.trim();
     if (this._disabled) {
       this.setAttribute("aria-disabled", "true");
     } else {
@@ -968,7 +994,7 @@ var UOverlay = class extends UElement {
     this._root.innerHTML = `<style>${overlayStyles}</style><div part="overlay" class="overlay" hidden><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["visible", "opacity", "blur"];
+    return ["visible", "opacity", "blur", "class"];
   }
   get visible() {
     return this._visible;
@@ -1005,6 +1031,7 @@ var UOverlay = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="overlay"]');
+    el.className = `overlay ${this.className}`.trim();
     if (this._visible) {
       el.removeAttribute("hidden");
       el.style.opacity = String(this._opacity);
@@ -1044,7 +1071,7 @@ var UField = class extends UElement {
     this._root.innerHTML = `<style>${fieldStyles}</style><div part="field" class="field"><label part="label" class="field-label"></label><div part="content" class="field-content"><slot></slot></div><div part="hint" class="field-hint"></div><div part="error" class="field-error" role="alert"></div></div>`;
   }
   static get observedAttributes() {
-    return ["label", "error", "hint", "required"];
+    return ["label", "error", "hint", "required", "class"];
   }
   get label() {
     return this._label;
@@ -1095,6 +1122,8 @@ var UField = class extends UElement {
     this._sync();
   }
   _sync() {
+    const fieldEl = this._root.querySelector('[part="field"]');
+    fieldEl.className = `field ${this.className}`.trim();
     const labelEl = this._root.querySelector('[part="label"]');
     labelEl.textContent = this._label;
     if (this._required) labelEl.classList.add("field-label-required");
@@ -1117,10 +1146,10 @@ var UCheckbox = class extends UElement {
     this._checked = false;
     this._disabled = false;
     this._value = "";
-    this._root.innerHTML = `<style>${checkboxStyles}</style><label part="checkbox" class="checkbox"><input type="checkbox" part="input" /><span part="indicator" class="checkbox-indicator"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 6L5 8.5L9.5 3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span part="label-text" class="checkbox-label"><slot></slot></span></label>`;
+    this._root.innerHTML = `<style>${checkboxStyles}</style><label part="checkbox" class="checkbox"><input type="checkbox" part="input" /><span part="indicator" class="checkbox-indicator"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 6L5 8.5L9.5 3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><!-- @deprecated label-text \u2192 use part="label" --><span part="label-text label" class="checkbox-label"><slot></slot></span></label>`;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "value"];
+    return ["checked", "disabled", "value", "class"];
   }
   get checked() {
     return this._checked;
@@ -1171,6 +1200,8 @@ var UCheckbox = class extends UElement {
     const indicator = this._root.querySelector('[part="indicator"]');
     if (this._checked) indicator.classList.add("checked");
     else indicator.classList.remove("checked");
+    const checkbox = this._root.querySelector('[part="checkbox"]');
+    checkbox.className = `checkbox ${this.className}`.trim();
   }
   _mount() {
     const input = this._root.querySelector("input");
@@ -1201,7 +1232,7 @@ var USelect = class extends UElement {
     this._root.innerHTML = `<style>${selectStyles}</style><div part="select" class="select-wrapper"><select part="native-select" class="select"></select><span part="arrow" class="select-arrow"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M4 6L8 10L12 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></div>`;
   }
   static get observedAttributes() {
-    return ["placeholder", "disabled", "value"];
+    return ["placeholder", "disabled", "value", "class"];
   }
   get value() {
     return this._value;
@@ -1274,6 +1305,8 @@ var USelect = class extends UElement {
     const select = this._root.querySelector("select");
     select.disabled = this._disabled;
     if (this._value) select.value = this._value;
+    const selectEl = this._root.querySelector('[part="select"]');
+    selectEl.className = `select-wrapper ${this.className}`.trim();
   }
   _mount() {
     const select = this._root.querySelector("select");
@@ -1306,7 +1339,7 @@ var ULink = class extends UElement {
     this._root.innerHTML = `<style>${linkStyles}</style><a part="link" class="link"><slot></slot></a>`;
   }
   static get observedAttributes() {
-    return ["href", "target", "rel", "disabled", "variant", "underline", "external", "download"];
+    return ["href", "target", "rel", "disabled", "variant", "underline", "external", "download", "class"];
   }
   get href() {
     return this._href;
@@ -1395,7 +1428,7 @@ var ULink = class extends UElement {
     anchor.rel = this._rel || (anchor.target === "_blank" ? "noopener noreferrer" : "");
     if (this._download) anchor.setAttribute("download", this._download);
     else anchor.removeAttribute("download");
-    anchor.className = `link link-${this._variant} link-underline-${this._underline}`;
+    anchor.className = `link link-${this._variant} link-underline-${this._underline} ${this.className}`.trim();
     if (this._disabled) {
       anchor.classList.add("link-disabled");
       anchor.setAttribute("aria-disabled", "true");
@@ -1424,7 +1457,7 @@ var USpacer = class extends UElement {
     this._root.innerHTML = `<div part="spacer" style="flex:1"></div>`;
   }
   static get observedAttributes() {
-    return ["size"];
+    return ["size", "class"];
   }
   get size() {
     return this._size;
@@ -1440,11 +1473,12 @@ var USpacer = class extends UElement {
     if (oldVal === newVal) return;
     if (name === "size") {
       this._size = Number(newVal) || 0;
-      this._sync();
     }
+    this._sync();
   }
   _sync() {
     const el = this._root.querySelector('[part="spacer"]');
+    el.className = `spacer ${this.className}`.trim();
     if (this._size > 0) {
       el.style.flex = "none";
       el.style.width = `${this._size}px`;
@@ -1468,7 +1502,7 @@ var UContainer = class extends UElement {
     this._root.innerHTML = `<style>${containerStyles}</style><div part="container" class="container"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["max-width", "padding"];
+    return ["max-width", "padding", "class"];
   }
   get maxWidth() {
     return this._maxWidth;
@@ -1488,6 +1522,7 @@ var UContainer = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="container"]');
+    el.className = `container ${this.className}`.trim();
     el.style.maxWidth = this._maxWidth;
     el.style.padding = this._padding;
   }
@@ -1959,10 +1994,10 @@ var UTooltipRoot = class extends UElement {
     this._disabled = false;
     this._showTimeout = null;
     this._hideTimeout = null;
-    this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden><div part="tooltip-content" class="tooltip-content"></div><div part="arrow" class="tooltip-arrow"></div></div>`;
+    this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden><!-- @deprecated tooltip-content \u2192 use part="content" --><div part="tooltip-content content" class="tooltip-content"></div><div part="arrow" class="tooltip-arrow"></div></div>`;
   }
   static get observedAttributes() {
-    return ["content", "placement", "delay", "disabled"];
+    return ["content", "placement", "delay", "disabled", "class"];
   }
   get content() {
     return this._content;
@@ -2005,7 +2040,9 @@ var UTooltipRoot = class extends UElement {
     this._sync();
   }
   _sync() {
-    const contentEl = this._root.querySelector('[part="tooltip-content"]');
+    const triggerEl = this._root.querySelector('[part="trigger"]');
+    triggerEl.className = `tooltip-trigger ${this.className}`.trim();
+    const contentEl = this._root.querySelector('[part~="tooltip-content"]');
     contentEl.textContent = this._content;
   }
   show() {
@@ -2061,10 +2098,10 @@ var UTextarea = class extends UElement {
     this._rows = 3;
     this._maxLength = -1;
     this._name = "";
-    this._root.innerHTML = `<style>${textareaStyles}</style><div class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
+    this._root.innerHTML = `<style>${textareaStyles}</style><div part="wrapper" class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
   }
   static get observedAttributes() {
-    return ["placeholder", "disabled", "readonly", "rows", "max-length", "name"];
+    return ["placeholder", "disabled", "readonly", "rows", "max-length", "name", "class"];
   }
   get value() {
     return this._root.querySelector("textarea")?.value ?? "";
@@ -2130,6 +2167,8 @@ var UTextarea = class extends UElement {
     ta.rows = this._rows;
     if (this._maxLength > 0) ta.maxLength = this._maxLength;
     ta.name = this._name;
+    const wrapper = this._root.querySelector(".textarea-wrapper");
+    wrapper.className = `textarea-wrapper ${this.className}`.trim();
   }
   _mount() {
     const ta = this._root.querySelector("textarea");
@@ -2165,7 +2204,7 @@ var URadioGroup = class extends UElement {
     this._root.innerHTML = `<style>${radioStyles}</style><div part="group" class="radio-group" role="radiogroup"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["value", "name", "disabled", "orientation"];
+    return ["value", "name", "disabled", "orientation", "class"];
   }
   get value() {
     return this._value;
@@ -2211,6 +2250,7 @@ var URadioGroup = class extends UElement {
   }
   _sync() {
     const group = this._root.querySelector('[part="group"]');
+    group.className = `radio-group ${this.className}`.trim();
     group.style.flexDirection = this._orientation === "horizontal" ? "row" : "column";
     group.style.gap = this._orientation === "horizontal" ? "16px" : "8px";
     if (this._name) group.setAttribute("aria-labelledby", this._name);
@@ -2250,7 +2290,7 @@ var URadio = class extends UElement {
     this._root.innerHTML = `<style>${radioStyles}</style><label part="radio" class="radio"><input type="radio" part="input" /><span part="circle" class="radio-circle"></span><span part="label" class="radio-label"><slot></slot></span></label>`;
   }
   static get observedAttributes() {
-    return ["value", "disabled", "checked"];
+    return ["value", "disabled", "checked", "class"];
   }
   get value() {
     return this._value;
@@ -2301,6 +2341,8 @@ var URadio = class extends UElement {
     const circle = this._root.querySelector('[part="circle"]');
     if (this._checked) circle.classList.add("checked");
     else circle.classList.remove("checked");
+    const radio = this._root.querySelector('[part="radio"]');
+    radio.className = `radio ${this.className}`.trim();
   }
   _mount() {
     const input = this._root.querySelector("input");
@@ -2329,7 +2371,7 @@ var USwitch = class extends UElement {
     this._root.innerHTML = `<style>${switchStyles}</style><label part="switch" class="switch"><input type="checkbox" part="input" role="switch" /><span part="track" class="switch-track"><span part="thumb" class="switch-thumb"></span></span></label>`;
   }
   static get observedAttributes() {
-    return ["checked", "disabled"];
+    return ["checked", "disabled", "class"];
   }
   get checked() {
     return this._checked;
@@ -2370,6 +2412,8 @@ var USwitch = class extends UElement {
     const track = this._root.querySelector('[part="track"]');
     if (this._checked) track.classList.add("checked");
     else track.classList.remove("checked");
+    const switchEl = this._root.querySelector('[part="switch"]');
+    switchEl.className = `switch ${this.className}`.trim();
   }
   _mount() {
     const input = this._root.querySelector("input");
@@ -2396,7 +2440,7 @@ var ULabel = class extends UElement {
     this._root.innerHTML = `<style>${labelStyles}</style><label part="label" class="label"><slot></slot></label>`;
   }
   static get observedAttributes() {
-    return ["for", "required"];
+    return ["for", "required", "class"];
   }
   get htmlFor() {
     return this._for;
@@ -2424,10 +2468,9 @@ var ULabel = class extends UElement {
   }
   _sync() {
     const label = this._root.querySelector("label");
+    label.className = `label ${this._required ? "label-required" : ""} ${this.className}`.trim();
     if (this._for) label.setAttribute("for", this._for);
     else label.removeAttribute("for");
-    if (this._required) label.classList.add("label-required");
-    else label.classList.remove("label-required");
   }
   _mount() {
   }
@@ -2443,7 +2486,7 @@ var UCollection = class extends UElement {
     this._root.innerHTML = `<div part="collection" class="collection" role="listbox"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["selection"];
+    return ["selection", "class"];
   }
   get items() {
     return this._items;
@@ -2489,12 +2532,18 @@ var UCollection = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "selection") {
       this._selection = newVal ?? "none";
     }
+    this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="collection"]');
+    el.className = `collection ${this.className}`.trim();
   }
   _updateItems() {
     const slot = this._root.querySelector("slot");
@@ -2539,7 +2588,15 @@ var UTree = class extends UElement {
     this._root.addEventListener("click", (e) => this._onClick(e));
   }
   static get observedAttributes() {
-    return [];
+    return ["class"];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === "class") this._sync();
   }
   get items() {
     return this._items;
@@ -2548,6 +2605,10 @@ var UTree = class extends UElement {
     this._items = val;
     this._render();
   }
+  _sync() {
+    const el = this._root.querySelector('[part="tree"]');
+    el.className = `tree ${this.className}`.trim();
+  }
   _render() {
     const container = this._root.querySelector('[part="tree"]');
     container.innerHTML = "";
@@ -2558,33 +2619,39 @@ var UTree = class extends UElement {
   _renderNode(node, depth) {
     const li = document.createElement("li");
     li.className = "tree-node";
+    li.setAttribute("part", "node");
     li.setAttribute("role", "treeitem");
     li.setAttribute("data-id", node.id);
     li.setAttribute("aria-expanded", String(node.expanded ?? false));
     li.setAttribute("aria-level", String(depth + 1));
     const row = document.createElement("div");
     row.className = "tree-row";
+    row.setAttribute("part", "row");
     row.style.paddingLeft = `${depth * 20 + 8}px`;
     const hasChildren = node.children && node.children.length > 0;
     if (hasChildren) {
       const toggle = document.createElement("span");
       toggle.className = "tree-toggle";
+      toggle.setAttribute("part", "toggle");
       toggle.textContent = node.expanded ? "\u25BE" : "\u25B8";
       toggle.setAttribute("aria-hidden", "true");
       row.appendChild(toggle);
     } else {
       const spacer = document.createElement("span");
       spacer.className = "tree-toggle-spacer";
+      spacer.setAttribute("part", "toggle-spacer");
       row.appendChild(spacer);
     }
     const label = document.createElement("span");
     label.className = "tree-label";
+    label.setAttribute("part", "label");
     label.textContent = node.label;
     row.appendChild(label);
     li.appendChild(row);
     if (hasChildren && node.expanded) {
       const ul = document.createElement("ul");
       ul.className = "tree-children";
+      ul.setAttribute("part", "children");
       ul.setAttribute("role", "group");
       for (const child of node.children) {
         ul.appendChild(this._renderNode(child, depth + 1));
@@ -2625,7 +2692,7 @@ var UTable = class extends UElement {
     this._root.innerHTML = `<style>${tableStyles}</style><div part="table-wrapper" class="table-wrapper"><table part="table" class="table"><thead part="thead"><tr part="header-row"></tr></thead><tbody part="tbody"></tbody></table></div>`;
   }
   static get observedAttributes() {
-    return ["sortable"];
+    return ["sortable", "class"];
   }
   get columns() {
     return this._columns;
@@ -2643,10 +2710,16 @@ var UTable = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "sortable") this._sortable = newVal !== null;
+    else if (name === "class") this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="table-wrapper"]');
+    el.className = `table-wrapper ${this.className}`.trim();
   }
   _render() {
     this._renderHeader();
@@ -2657,6 +2730,7 @@ var UTable = class extends UElement {
     headerRow.innerHTML = "";
     for (const col of this._columns) {
       const th = document.createElement("th");
+      th.setAttribute("part", "header-cell");
       th.textContent = col.label;
       if (col.width) th.style.width = col.width;
       if (this._sortable && col.sortable) {
@@ -2677,8 +2751,10 @@ var UTable = class extends UElement {
     const data = this._sortKey ? this._sortedData() : this._rows;
     for (const row of data) {
       const tr = document.createElement("tr");
+      tr.setAttribute("part", "row");
       for (const col of this._columns) {
         const td = document.createElement("td");
+        td.setAttribute("part", "cell");
         td.textContent = String(row[col.key] ?? "");
         tr.appendChild(td);
       }
@@ -2746,7 +2822,7 @@ var UBreadcrumb = class extends UElement {
     this._root.innerHTML = `<style>${breadcrumbStyles}</style><nav part="breadcrumb" class="breadcrumb" aria-label="Breadcrumb"><ol part="list"></ol></nav>`;
   }
   static get observedAttributes() {
-    return ["separator"];
+    return ["separator", "class"];
   }
   get items() {
     return this._items;
@@ -2763,14 +2839,21 @@ var UBreadcrumb = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "separator") {
       this._separator = newVal ?? "/";
       this._render();
+    } else if (name === "class") {
+      this._sync();
     }
   }
+  _sync() {
+    const el = this._root.querySelector('[part="breadcrumb"]');
+    el.className = `breadcrumb ${this.className}`.trim();
+  }
   _render() {
     const list = this._root.querySelector("ol");
     list.innerHTML = "";
@@ -2778,17 +2861,20 @@ var UBreadcrumb = class extends UElement {
       const item = this._items[i];
       const li = document.createElement("li");
       li.className = "breadcrumb-item";
+      li.setAttribute("part", "item");
       if (i < this._items.length - 1) {
         if (item.href) {
           const a = document.createElement("a");
           a.href = item.href;
           a.textContent = item.label;
+          a.setAttribute("part", "link");
           li.appendChild(a);
         } else {
           li.textContent = item.label;
         }
         const sep = document.createElement("span");
         sep.className = "breadcrumb-separator";
+        sep.setAttribute("part", "separator");
         sep.setAttribute("aria-hidden", "true");
         sep.textContent = this._separator;
         li.appendChild(sep);
@@ -2812,13 +2898,13 @@ var UTabs = class extends UElement {
     this._variant = "underline";
     this._fullWidth = false;
     this._triggers = [];
-    this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist tablist-underline" role="tablist"><div class="tab-indicator"></div></div><div part="tabpanels" class="tabpanels"></div></div>`;
+    this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist tablist-underline" role="tablist"><div part="indicator" class="tab-indicator"></div></div><div part="tabpanels" class="tabpanels"></div></div>`;
     this._tablistEl = this._root.querySelector('[part="tablist"]');
     this._panelsContainer = this._root.querySelector('[part="tabpanels"]');
     this._indicatorEl = this._tablistEl.querySelector(".tab-indicator");
   }
   static get observedAttributes() {
-    return ["value", "orientation", "variant", "full-width"];
+    return ["value", "orientation", "variant", "full-width", "class"];
   }
   get value() {
     return this._value;
@@ -2882,6 +2968,7 @@ var UTabs = class extends UElement {
       const disabled = tab.hasAttribute("disabled");
       const btn = document.createElement("button");
       btn.className = "tab-trigger";
+      btn.setAttribute("part", "tab");
       btn.setAttribute("role", "tab");
       btn.setAttribute("aria-selected", String(key === this._value));
       btn.setAttribute("data-value", key);
@@ -2891,6 +2978,7 @@ var UTabs = class extends UElement {
       if (iconSlot) {
         const iconSpan = document.createElement("span");
         iconSpan.className = "tab-trigger-icon";
+        iconSpan.setAttribute("part", "tab-icon");
         iconSpan.appendChild(iconSlot.cloneNode(true));
         btn.appendChild(iconSpan);
       } else {
@@ -2898,6 +2986,7 @@ var UTabs = class extends UElement {
         if (svgs.length > 0) {
           const iconSpan = document.createElement("span");
           iconSpan.className = "tab-trigger-icon";
+          iconSpan.setAttribute("part", "tab-icon");
           iconSpan.appendChild(svgs[0].cloneNode(true));
           btn.appendChild(iconSpan);
         }
@@ -2913,6 +3002,7 @@ var UTabs = class extends UElement {
       const key = panel.getAttribute("data-value") || String(i);
       const div = document.createElement("div");
       div.className = "tab-panel";
+      div.setAttribute("part", "panel");
       div.setAttribute("role", "tabpanel");
       if (key === this._value) {
         div.removeAttribute("hidden");
@@ -2923,6 +3013,8 @@ var UTabs = class extends UElement {
       this._panelsContainer.appendChild(div);
     });
     this._updateIndicator();
+    const tabsEl = this._root.querySelector('[part="tabs"]');
+    tabsEl.className = `tabs ${this.className}`.trim();
   }
   _updateIndicator() {
     if (this._variant !== "underline" || !this._indicatorEl) return;
@@ -2988,10 +3080,25 @@ var UTabs = class extends UElement {
 
 // src/components/visually-hidden.wc.ts
 var UVisuallyHidden = class extends UElement {
+  static get observedAttributes() {
+    return ["class"];
+  }
   constructor() {
     super();
     this._root.innerHTML = `<style>${visuallyHiddenStyles}</style><span part="hidden" class="visually-hidden"><slot></slot></span>`;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === "class") this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="hidden"]');
+    el.className = `visually-hidden ${this.className}`.trim();
+  }
   _mount() {
   }
 };
@@ -3005,7 +3112,7 @@ var ULiveRegion = class extends UElement {
     this._root.innerHTML = `<div part="region" aria-live="polite" aria-atomic="false"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["politeness", "atomic"];
+    return ["politeness", "atomic", "class"];
   }
   get politeness() {
     return this._politeness;
@@ -3028,10 +3135,12 @@ var ULiveRegion = class extends UElement {
     if (oldVal === newVal) return;
     if (name === "politeness") this._politeness = newVal ?? "polite";
     else if (name === "atomic") this._atomic = newVal !== null;
+    else ;
     this._sync();
   }
   _sync() {
     const el = this._root.querySelector('[part="region"]');
+    el.className = this.className;
     el.setAttribute("aria-live", this._politeness);
     el.setAttribute("aria-atomic", String(this._atomic));
   }
@@ -3178,7 +3287,7 @@ var UPresence = class extends UElement {
     this._root.innerHTML = `<style>${presenceStyles}</style><div part="presence" class="presence"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["present", "animation", "duration"];
+    return ["present", "animation", "duration", "class"];
   }
   get present() {
     return this._present;
@@ -3196,6 +3305,7 @@ var UPresence = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._present = this.hasAttribute("present");
     this._mounted = true;
     if (this._present) {
@@ -3220,8 +3330,15 @@ var UPresence = class extends UElement {
       case "duration":
         this._duration = Number(newVal) || 200;
         break;
+      case "class":
+        this._sync();
+        break;
     }
   }
+  _sync() {
+    const presenceEl = this._root.querySelector('[part="presence"]');
+    presenceEl.className = `presence ${this.className}`.trim();
+  }
   _enter() {
     const el = this._root.querySelector('[part="presence"]');
     this.style.display = "";
@@ -3506,7 +3623,7 @@ var UModal = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["open", "size", "title", "close-on-escape", "close-on-overlay"];
+    return ["open", "size", "title", "close-on-escape", "close-on-overlay", "class"];
   }
   get open() {
     return this._open;
@@ -3554,9 +3671,14 @@ var UModal = class extends UElement {
       case "close-on-overlay":
         this._closeOnOverlay = parseBooleanAttribute(newVal, true);
         break;
+      case "class":
+        this._sync();
+        break;
     }
   }
   _sync() {
+    const modalEl = this._root.querySelector('[part="modal"]');
+    modalEl.className = `modal ${this.className}`.trim();
     this._updateOpenState();
     this._updateSize();
     this._updateTitle();
@@ -3679,21 +3801,24 @@ var UDrawer = class extends UElement {
 <div part="backdrop" class="drawer-backdrop" hidden></div>
 <div part="drawer" class="drawer drawer-right" role="dialog" aria-modal="true" hidden>
   <div part="drawer-content" class="drawer-content">
-    <div part="drawer-header" class="drawer-header">
+    <!-- @deprecated drawer-header \u2192 use part="header" -->
+    <div part="drawer-header header" class="drawer-header">
       <slot name="header"></slot>
       <button part="close-btn" class="drawer-close" aria-label="Close">&times;</button>
     </div>
-    <div part="drawer-body" class="drawer-body">
+    <!-- @deprecated drawer-body \u2192 use part="body" -->
+    <div part="drawer-body body" class="drawer-body">
       <slot></slot>
     </div>
-    <div part="drawer-footer" class="drawer-footer">
+    <!-- @deprecated drawer-footer \u2192 use part="footer" -->
+    <div part="drawer-footer footer" class="drawer-footer">
       <slot name="footer"></slot>
     </div>
   </div>
 </div>`;
   }
   static get observedAttributes() {
-    return ["open", "side", "size", "close-on-escape", "close-on-overlay"];
+    return ["open", "side", "size", "close-on-escape", "close-on-overlay", "class"];
   }
   get open() {
     return this._open;
@@ -3744,7 +3869,7 @@ var UDrawer = class extends UElement {
   }
   _sync() {
     const drawer = this._root.querySelector('[part="drawer"]');
-    drawer.className = `drawer drawer-${this._side}`;
+    drawer.className = `drawer drawer-${this._side} ${this.className}`.trim();
     const content = this._root.querySelector('[part="drawer-content"]');
     this._applyDrawerSize(content);
     this._updateOpenState();
@@ -3781,7 +3906,8 @@ var UDrawer = class extends UElement {
       drawer.removeAttribute("hidden");
       this._applyDrawerSize(content);
       this._unlockScroll = lockScroll();
-      requestAnimationFrame(() => drawer.classList.add("drawer-open"));
+      void drawer.offsetHeight;
+      drawer.classList.add("drawer-open");
       this._focusFirst();
     } else {
       drawer.classList.remove("drawer-open");
@@ -3879,7 +4005,7 @@ var UPopover = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["open", "placement", "offset", "close-on-escape", "close-on-outside-click"];
+    return ["open", "placement", "offset", "close-on-escape", "close-on-outside-click", "class"];
   }
   get open() {
     return this._open;
@@ -3909,6 +4035,7 @@ var UPopover = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
@@ -3929,8 +4056,15 @@ var UPopover = class extends UElement {
       case "close-on-outside-click":
         this._closeOnOutsideClick = newVal !== null;
         break;
+      case "class":
+        this._sync();
+        break;
     }
   }
+  _sync() {
+    const popoverEl = this._root.querySelector('[part="popover"]');
+    popoverEl.className = `popover ${this.className}`.trim();
+  }
   _updateOpenState() {
     const popover = this._root.querySelector('[part="popover"]');
     if (this._open) {
@@ -4042,7 +4176,7 @@ var UDropdown = class extends UElement {
     this._triggerEl = this._root.querySelector('[part="trigger"]');
   }
   static get observedAttributes() {
-    return ["open", "placement", "value"];
+    return ["open", "placement", "value", "class"];
   }
   get open() {
     return this._open;
@@ -4079,6 +4213,7 @@ var UDropdown = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._renderItems();
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -4095,8 +4230,15 @@ var UDropdown = class extends UElement {
         this._value = newVal ?? "";
         this._updateSelected();
         break;
+      case "class":
+        this._sync();
+        break;
     }
   }
+  _sync() {
+    const triggerEl = this._root.querySelector('[part="trigger"]');
+    triggerEl.className = `dropdown-trigger ${this.className}`.trim();
+  }
   _renderItems() {
     this._itemsContainer.innerHTML = "";
     this._itemElements = [];
@@ -4106,17 +4248,20 @@ var UDropdown = class extends UElement {
         lastGroup = item.group;
         const label = document.createElement("div");
         label.className = GROUP_HEADING_CLASS;
+        label.setAttribute("part", "group-label");
         label.textContent = item.group;
         this._itemsContainer.appendChild(label);
       }
       if (item.divider) {
         const div = document.createElement("div");
         div.className = "dropdown-divider";
+        div.setAttribute("part", "divider");
         this._itemsContainer.appendChild(div);
         continue;
       }
       const btn = document.createElement("button");
       btn.className = ITEM_CLASS;
+      btn.setAttribute("part", "item");
       btn.setAttribute("role", "option");
       btn.setAttribute("data-value", item.value);
       btn.disabled = item.disabled ?? false;
@@ -4124,18 +4269,22 @@ var UDropdown = class extends UElement {
       if (item.icon) {
         const iconSpan = document.createElement("span");
         iconSpan.className = "dropdown-item-icon";
+        iconSpan.setAttribute("part", "item-icon");
         iconSpan.innerHTML = item.icon;
         btn.appendChild(iconSpan);
       }
       const textSpan = document.createElement("span");
       textSpan.className = "dropdown-item-text";
+      textSpan.setAttribute("part", "item-text");
       const labelSpan = document.createElement("span");
       labelSpan.className = "dropdown-item-label";
+      labelSpan.setAttribute("part", "item-label");
       labelSpan.textContent = item.label;
       textSpan.appendChild(labelSpan);
       if (item.description) {
         const descSpan = document.createElement("span");
         descSpan.className = "dropdown-item-desc";
+        descSpan.setAttribute("part", "item-desc");
         descSpan.textContent = item.description;
         textSpan.appendChild(descSpan);
       }
@@ -4143,6 +4292,7 @@ var UDropdown = class extends UElement {
       if (item.shortcut) {
         const shortcutSpan = document.createElement("span");
         shortcutSpan.className = "dropdown-item-shortcut";
+        shortcutSpan.setAttribute("part", "item-shortcut");
         shortcutSpan.textContent = item.shortcut;
         btn.appendChild(shortcutSpan);
       }
@@ -4253,7 +4403,7 @@ var UAccordion = class extends UElement {
     this._root.innerHTML = `<style>${accordionStyles}</style><div part="accordion" class="accordion"><slot></slot></div>`;
   }
   static get observedAttributes() {
-    return ["collapsible", "multiple"];
+    return ["collapsible", "multiple", "class"];
   }
   get value() {
     return Array.from(this._value);
@@ -4276,12 +4426,18 @@ var UAccordion = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._initItems();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "collapsible") this._collapsible = newVal !== null;
     else if (name === "multiple") this._multiple = newVal !== null;
+    else if (name === "class") this._sync();
+  }
+  _sync() {
+    const accordionEl = this._root.querySelector('[part="accordion"]');
+    accordionEl.className = `accordion ${this.className}`.trim();
   }
   _initItems() {
     const items = this.querySelectorAll(":scope > u-accordion-item");
@@ -4356,7 +4512,7 @@ var UAccordionItem = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["value", "open"];
+    return ["value", "open", "class"];
   }
   get value() {
     return this._value;
@@ -4374,12 +4530,18 @@ var UAccordionItem = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     if (this.hasAttribute("open")) this._open = true;
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "value") this._value = newVal ?? "";
     else if (name === "open") this._open = newVal !== null;
+    else if (name === "class") this._sync();
+  }
+  _sync() {
+    const itemEl = this._root.querySelector('[part="accordion-item"]');
+    itemEl.className = `accordion-item ${this.className}`.trim();
   }
   _mount() {
   }
@@ -4414,7 +4576,7 @@ var UCombobox = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["value", "placeholder", "disabled", "filterable"];
+    return ["value", "placeholder", "disabled", "filterable", "class"];
   }
   get value() {
     return this._value;
@@ -4450,9 +4612,14 @@ var UCombobox = class extends UElement {
       case "filterable":
         this._filterable = newVal !== null;
         break;
+      case "class":
+        this._syncInput();
+        break;
     }
   }
   _syncInput() {
+    const combobox = this._root.querySelector('[part="combobox"]');
+    combobox.className = `combobox ${this.className}`.trim();
     const input = this._root.querySelector("input");
     input.placeholder = this._placeholder;
     input.disabled = this._disabled;
@@ -4481,6 +4648,7 @@ var UCombobox = class extends UElement {
     if (items.length === 0) {
       const empty = document.createElement("div");
       empty.className = "combobox-empty";
+      empty.setAttribute("part", "empty");
       empty.textContent = "No results";
       listbox.appendChild(empty);
       return;
@@ -4488,6 +4656,7 @@ var UCombobox = class extends UElement {
     for (const opt of items) {
       const btn = document.createElement("button");
       btn.className = "combobox-option";
+      btn.setAttribute("part", "option");
       btn.setAttribute("role", "option");
       btn.setAttribute("data-value", opt.value);
       btn.textContent = opt.label;
@@ -4645,7 +4814,7 @@ var UCalendar = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["value", "min", "max"];
+    return ["value", "min", "max", "class"];
   }
   get value() {
     return this._value;
@@ -4655,6 +4824,7 @@ var UCalendar = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     if (this._value) {
       const d = new Date(this._value);
       if (!isNaN(d.getTime())) {
@@ -4670,11 +4840,19 @@ var UCalendar = class extends UElement {
     if (name === "value") this._value = newVal ?? "";
     else if (name === "min") this._min = newVal ?? "";
     else if (name === "max") this._max = newVal ?? "";
+    else if (name === "class") {
+      this._sync();
+      return;
+    }
     this._render();
   }
+  _sync() {
+    const el = this._root.querySelector('[part="calendar"]');
+    el.className = `calendar ${this.className}`.trim();
+  }
   _renderDayNames() {
     const container = this._root.querySelector('[part="day-names"]');
-    container.innerHTML = DAYS.map((d) => `<span class="cal-day-name">${d}</span>`).join("");
+    container.innerHTML = DAYS.map((d) => `<span part="day-name" class="cal-day-name">${d}</span>`).join("");
   }
   _render() {
     const title = this._root.querySelector('[part="title"]');
@@ -4688,11 +4866,13 @@ var UCalendar = class extends UElement {
     for (let i = 0; i < firstDay; i++) {
       const empty = document.createElement("span");
       empty.className = "cal-day cal-day-empty";
+      empty.setAttribute("part", "day-empty");
       grid.appendChild(empty);
     }
     for (let d = 1; d <= daysInMonth; d++) {
       const dayEl = document.createElement("button");
       dayEl.className = "cal-day";
+      dayEl.setAttribute("part", "day");
       dayEl.textContent = String(d);
       const dateStr = `${this._viewYear}-${String(this._viewMonth + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
       dayEl.setAttribute("data-date", dateStr);
@@ -4783,7 +4963,7 @@ var UDataTable = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["page-size", "sortable", "selectable"];
+    return ["page-size", "sortable", "selectable", "class"];
   }
   get columns() {
     return this._columns;
@@ -4807,14 +4987,20 @@ var UDataTable = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "page-size") this._pageSize = Number(newVal) || 10;
     else if (name === "sortable") this._sortable = newVal !== null;
     else if (name === "selectable") this._selectable = newVal !== null;
+    else if (name === "class") return;
     this._render();
   }
+  _sync() {
+    const el = this._root.querySelector('[part="data-table"]');
+    el.className = `data-table ${this.className}`.trim();
+  }
   _getProcessedData() {
     let data = [...this._rows];
     if (this._filterText) {
@@ -4851,8 +5037,10 @@ var UDataTable = class extends UElement {
     if (this._selectable) {
       const th = document.createElement("th");
       th.className = "dt-col-check";
+      th.setAttribute("part", "header-checkbox");
       const cb = document.createElement("input");
       cb.type = "checkbox";
+      cb.setAttribute("part", "select-all");
       cb.addEventListener("change", () => {
         const data = this._getPageData();
         if (cb.checked)
@@ -4889,6 +5077,7 @@ var UDataTable = class extends UElement {
       const tr = document.createElement("tr");
       const td = document.createElement("td");
       td.className = "dt-empty";
+      td.setAttribute("part", "empty");
       td.colSpan = this._columns.length + (this._selectable ? 1 : 0);
       td.textContent = "No data";
       tr.appendChild(td);
@@ -4898,12 +5087,14 @@ var UDataTable = class extends UElement {
     for (let i = 0; i < data.length; i++) {
       const row = data[i];
       const tr = document.createElement("tr");
+      tr.setAttribute("part", "row");
       const rowKey = row.id ?? row._key ?? String(i);
       if (this._selected.has(rowKey)) tr.classList.add("dt-row-selected");
       if (this._selectable) {
         const td = document.createElement("td");
         const cb = document.createElement("input");
         cb.type = "checkbox";
+        cb.setAttribute("part", "select-row");
         cb.checked = this._selected.has(rowKey);
         cb.addEventListener("change", () => {
           if (cb.checked) this._selected.add(rowKey);
@@ -4916,6 +5107,7 @@ var UDataTable = class extends UElement {
       }
       for (const col of this._columns) {
         const td = document.createElement("td");
+        td.setAttribute("part", "cell");
         const val = row[col.key];
         td.innerHTML = col.render ? col.render(val, row, i) : String(val ?? "");
         tr.appendChild(td);
@@ -4934,6 +5126,7 @@ var UDataTable = class extends UElement {
     for (let i = 1; i <= totalPages; i++) {
       const btn = document.createElement("button");
       btn.className = `dt-page-num ${i === this._page ? "active" : ""}`;
+      btn.setAttribute("part", "page-num");
       btn.textContent = String(i);
       btn.addEventListener("click", () => {
         this._page = i;
@@ -5032,7 +5225,7 @@ var UCommandPalette = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["open", "placeholder", "shortcut"];
+    return ["open", "placeholder", "shortcut", "class"];
   }
   get open() {
     return this._open;
@@ -5072,9 +5265,13 @@ var UCommandPalette = class extends UElement {
     } else if (name === "shortcut") {
       this._shortcut = newVal ?? "Ctrl+K";
       this._sync();
+    } else if (name === "class") {
+      this._sync();
     }
   }
   _sync() {
+    const dialog = this._root.querySelector('[part="dialog"]');
+    dialog.className = `cp-dialog ${this.className}`.trim();
     const hint = this._root.querySelector('[part="shortcut-hint"]');
     hint.textContent = this._shortcut;
     const input = this._root.querySelector('[part="search-input"]');
@@ -5137,6 +5334,7 @@ var UCommandPalette = class extends UElement {
     if (this._filtered.length === 0) {
       const div = document.createElement("div");
       div.className = "cp-empty";
+      div.setAttribute("part", "empty");
       div.textContent = "No results found";
       container.appendChild(div);
       return;
@@ -5151,30 +5349,36 @@ var UCommandPalette = class extends UElement {
     for (const [groupName, groupItems] of groups) {
       const groupEl = document.createElement("div");
       groupEl.className = "cp-group";
+      groupEl.setAttribute("part", "group");
       const label = document.createElement("div");
       label.className = "cp-group-label";
+      label.setAttribute("part", "group-label");
       label.textContent = groupName;
       groupEl.appendChild(label);
       for (const item of groupItems) {
         const btn = document.createElement("button");
         btn.className = "cp-item";
+        btn.setAttribute("part", "item");
         btn.setAttribute("role", "option");
         btn.setAttribute("data-id", item.id);
         btn.setAttribute("data-index", String(idx));
         if (idx === this._selectedIndex) btn.classList.add("cp-item-active");
         const labelSpan = document.createElement("span");
         labelSpan.className = "cp-item-label";
+        labelSpan.setAttribute("part", "item-label");
         labelSpan.textContent = item.label;
         btn.appendChild(labelSpan);
         if (item.description) {
           const desc = document.createElement("span");
           desc.className = "cp-item-desc";
+          desc.setAttribute("part", "item-desc");
           desc.textContent = item.description;
           btn.appendChild(desc);
         }
         if (item.shortcut) {
           const kbd = document.createElement("kbd");
           kbd.className = "cp-item-shortcut";
+          kbd.setAttribute("part", "item-shortcut");
           kbd.textContent = item.shortcut;
           btn.appendChild(kbd);
         }
@@ -5281,7 +5485,7 @@ var UToast = class extends UElement {
     this._root.innerHTML = `<style>${toastStyles}</style><div part="container" class="toast-container toast-top-right"></div>`;
   }
   static get observedAttributes() {
-    return ["placement"];
+    return ["placement", "class"];
   }
   get placement() {
     return this._placement;
@@ -5302,7 +5506,7 @@ var UToast = class extends UElement {
   }
   _updatePlacement() {
     const container = this._root.querySelector('[part="container"]');
-    container.className = `toast-container toast-${this._placement}`;
+    container.className = `toast-container toast-${this._placement} ${this.className}`.trim();
   }
   show(opts) {
     const id = `toast-${++toastId}`;
@@ -5310,16 +5514,20 @@ var UToast = class extends UElement {
     const variant = opts.variant ?? "info";
     const el = document.createElement("div");
     el.className = `toast toast-${variant}`;
+    el.setAttribute("part", "toast");
     el.setAttribute("role", "alert");
     const body = document.createElement("div");
     body.className = "toast-body";
+    body.setAttribute("part", "body");
     const title = document.createElement("div");
     title.className = "toast-title";
+    title.setAttribute("part", "title");
     title.textContent = opts.title;
     body.appendChild(title);
     if (opts.description) {
       const desc = document.createElement("div");
       desc.className = "toast-desc";
+      desc.setAttribute("part", "description");
       desc.textContent = opts.description;
       body.appendChild(desc);
     }
@@ -5327,6 +5535,7 @@ var UToast = class extends UElement {
     if (opts.action) {
       const btn = document.createElement("button");
       btn.className = "toast-action";
+      btn.setAttribute("part", "action");
       btn.textContent = opts.action.label;
       btn.addEventListener("click", () => {
         opts.action.onClick();
@@ -5336,6 +5545,7 @@ var UToast = class extends UElement {
     }
     const close = document.createElement("button");
     close.className = "toast-close";
+    close.setAttribute("part", "close close-btn");
     close.innerHTML = "&times;";
     close.setAttribute("aria-label", "Dismiss");
     close.addEventListener("click", () => this.dismiss(id));
@@ -5403,6 +5613,9 @@ var UContextMenu = class extends UElement {
   <div part="items" class="cm-items"></div>
 </div>`;
   }
+  static get observedAttributes() {
+    return ["class"];
+  }
   get items() {
     return this._items;
   }
@@ -5414,6 +5627,11 @@ var UContextMenu = class extends UElement {
     super.connectedCallback();
     this._parseSlotItems();
     this._renderItems();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === "class") this._sync();
   }
   _parseSlotItems() {
     const slotItems = this.querySelectorAll("u-context-menu-item");
@@ -5433,11 +5651,13 @@ var UContextMenu = class extends UElement {
       if (item.divider) {
         const div = document.createElement("div");
         div.className = "cm-divider";
+        div.setAttribute("part", "divider");
         container.appendChild(div);
         return;
       }
       const btn = document.createElement("button");
       btn.className = "cm-item";
+      btn.setAttribute("part", "item");
       btn.setAttribute("role", "menuitem");
       btn.setAttribute("data-value", item.value);
       btn.setAttribute("data-index", String(i));
@@ -5445,22 +5665,28 @@ var UContextMenu = class extends UElement {
       if (item.icon) {
         const icon = document.createElement("span");
         icon.className = "cm-item-icon";
+        icon.setAttribute("part", "item-icon");
         icon.textContent = item.icon;
         btn.appendChild(icon);
       }
       const label = document.createElement("span");
       label.className = "cm-item-label";
+      label.setAttribute("part", "item-label");
       label.textContent = item.label;
       btn.appendChild(label);
       container.appendChild(btn);
     });
   }
+  _sync() {
+    const menu = this._root.querySelector('[part="menu"]');
+    menu.className = `cm-menu ${this.className}`.trim();
+  }
   _openMenu(x, y) {
     const menu = this._root.querySelector('[part="menu"]');
     const itemsContainer = this._root.querySelector('[part="items"]');
+    menu.style.animation = "none";
     menu.removeAttribute("hidden");
-    this._selectedIndex = -1;
-    this._open = true;
+    void menu.offsetHeight;
     const trigger = new DOMRect(x, y, 0, 0);
     const result = computePosition(
       trigger,
@@ -5471,6 +5697,11 @@ var UContextMenu = class extends UElement {
     menu.style.top = `${result.top}px`;
     menu.style.maxHeight = `${result.maxHeight ?? 320}px`;
     itemsContainer.style.maxHeight = `${(result.maxHeight ?? 320) - 16}px`;
+    void menu.offsetHeight;
+    menu.style.animation = "";
+    menu.style.transformOrigin = "top left";
+    this._selectedIndex = -1;
+    this._open = true;
     this._focusFirst();
     this.dispatchEvent(
       new CustomEvent("u-context-menu-open", {
@@ -5577,7 +5808,7 @@ var USortable = class extends UElement {
       this._placeholder.style.height = `${rect.height}px`;
       this._dragClone = item.cloneNode(true);
       this._dragClone.style.position = "fixed";
-      this._dragClone.style.zIndex = "99999";
+      this._dragClone.style.zIndex = getComputedStyle(this).getPropertyValue("--u-z-drag").trim() || "99999";
       this._dragClone.style.width = `${rect.width}px`;
       this._dragClone.style.height = `${rect.height}px`;
       this._dragClone.style.left = `${rect.left}px`;
@@ -5653,7 +5884,11 @@ var USortable = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["disabled"];
+    return ["disabled", "class"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (name === "class") this._sync();
   }
   get disabled() {
     return this._disabled;
@@ -5689,6 +5924,14 @@ var USortable = class extends UElement {
     }
     return null;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="sortable"]');
+    el.className = `sortable ${this.className}`.trim();
+  }
   _mount() {
     this.addEventListener("pointerdown", this._onPointerDown);
   }
@@ -5704,22 +5947,41 @@ var UForm = class extends UElement {
   <slot></slot>
 </form>`;
   }
+  static get observedAttributes() {
+    return ["class"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    this._sync();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
   get form() {
     return this._root.querySelector("form");
   }
+  _sync() {
+    const form = this._root.querySelector("form");
+    if (!form) return;
+    form.className = `form ${this.className}`.trim();
+  }
   validate() {
     let valid = true;
     const errors = {};
     this._fields.clear();
-    const inputs = this.querySelectorAll("input, textarea, select, u-input, u-textarea, u-select, u-checkbox, u-radio-group");
+    const inputs = this.querySelectorAll(
+      "input, textarea, select, u-input, u-textarea, u-select, u-checkbox, u-radio-group"
+    );
     inputs.forEach((el) => {
       const name = el.getAttribute("name") || "";
       if (!name) return;
       this._fields.set(name, el);
-      if ("checkValidity" in el && typeof el.checkValidity === "function") {
-        if (!el.checkValidity()) {
+      const anyEl = el;
+      if (typeof anyEl.checkValidity === "function") {
+        if (!anyEl.checkValidity()) {
           valid = false;
-          errors[name] = el.validationMessage || "Invalid";
+          errors[name] = anyEl.validationMessage || "Invalid";
           const field = el.closest("u-field");
           if (field) {
             field.setAttribute("error", errors[name]);
@@ -5740,14 +6002,20 @@ var UForm = class extends UElement {
   }
   getValues() {
     const values = {};
-    const inputs = this.querySelectorAll("input, textarea, select, u-input, u-textarea, u-select");
+    const inputs = this.querySelectorAll(
+      "input, textarea, select, u-input, u-textarea, u-select, u-checkbox, u-radio-group"
+    );
     inputs.forEach((el) => {
       const name = el.getAttribute("name") || "";
       if (!name) return;
-      if ("checked" in el && el.type === "checkbox") {
-        values[name] = String(el.checked);
-      } else if ("value" in el) {
-        values[name] = String(el.value);
+      const anyEl = el;
+      const tag = el.tagName.toLowerCase();
+      if (tag === "input" && anyEl.type === "checkbox") {
+        values[name] = String(anyEl.checked);
+      } else if (tag === "u-checkbox") {
+        values[name] = String(anyEl.checked ?? false);
+      } else if ("value" in anyEl) {
+        values[name] = String(anyEl.value ?? "");
       }
     });
     return values;
@@ -5786,7 +6054,7 @@ var UBadge = class extends UElement {
     this._root.innerHTML = `<style>${badgeStyles}</style><span part="badge" class="badge badge-default badge-md badge-pill"><slot></slot></span>`;
   }
   static get observedAttributes() {
-    return ["variant", "size", "dot", "pill"];
+    return ["variant", "size", "dot", "pill", "class"];
   }
   get variant() {
     return this._variant;
@@ -5838,7 +6106,7 @@ var UBadge = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="badge"]');
-    el.className = `badge badge-${this._variant} badge-${this._size}`;
+    el.className = `badge badge-${this._variant} badge-${this._size} ${this.className}`.trim();
     if (this._dot) {
       el.classList.add("badge-dot");
     } else if (this._pill) {
@@ -5875,7 +6143,7 @@ var UCard = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["variant", "padding", "hoverable"];
+    return ["variant", "padding", "hoverable", "class"];
   }
   get variant() {
     return this._variant;
@@ -5917,7 +6185,7 @@ var UCard = class extends UElement {
   }
   _sync() {
     const el = this._root.querySelector('[part="card"]');
-    el.className = `card card-${this._variant} card-padding-${this._padding}`;
+    el.className = `card card-${this._variant} card-padding-${this._padding} ${this.className}`.trim();
     if (this._hoverable) el.classList.add("card-hoverable");
     const imageSlot = this._root.querySelector('slot[name="image"]');
     if (imageSlot) {
@@ -5937,5 +6205,5 @@ var UCard = class extends UElement {
 };
 
 export { UAccordion, UAccordionItem, UAnimate, UBadge, UBox, UBreadcrumb, UButton, UCalendar, UCard, UCheckbox, UCollection, UCombobox, UCommandPalette, UContainer, UContextMenu, UDataTable, UDialogRoot, UDismissableLayer, UDrawer, UDropdown, UField, UFocusManager, UFocusScope, UFocusTrap, UForm, UGrid, UHStack, UHoverable, UInput, UKeyboardNavigation, ULabel, ULink, UList, ULiveRegion, UModal, UOverlay, UPopover, UPopper, UPortal, UPresence, UPressable, URadio, URadioGroup, URouterView, USelect, USlot, USortable, USpacer, UStack, USwitch, UTable, UTabs, UText, UTextarea, UToast, UTooltipRoot, UTransition, UTree, UVirtualList, UVisuallyHidden, createControlledInput, setPortalRoot };
-//# sourceMappingURL=chunk-RQZ7KDYP.js.map
-//# sourceMappingURL=chunk-RQZ7KDYP.js.map
+//# sourceMappingURL=chunk-2JEFDU25.js.map
+//# sourceMappingURL=chunk-2JEFDU25.js.map