@avento-space/ts-ui 1.2.2 → 1.2.3

package/dist/{chunk-RQZ7KDYP.js → chunk-PIXJHFME.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-2UKGVIH2.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;
   }
@@ -101,7 +101,7 @@ var UInput = class extends UElement {
     this._root.innerHTML = `<style>${inputStyles}</style><div 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,6 +430,7 @@ 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++) {
@@ -515,7 +535,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 +611,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 +626,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 +674,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 +687,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 +701,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 +736,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 +771,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 +794,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 +993,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 +1030,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 +1070,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 +1121,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");
@@ -1120,7 +1148,7 @@ var UCheckbox = class extends UElement {
     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>`;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "value"];
+    return ["checked", "disabled", "value", "class"];
   }
   get checked() {
     return this._checked;
@@ -1171,6 +1199,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 +1231,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 +1304,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 +1338,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 +1427,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 +1456,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 +1472,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 +1501,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 +1521,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;
   }
@@ -1962,7 +1996,7 @@ var UTooltipRoot = class extends UElement {
     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>`;
   }
   static get observedAttributes() {
-    return ["content", "placement", "delay", "disabled"];
+    return ["content", "placement", "delay", "disabled", "class"];
   }
   get content() {
     return this._content;
@@ -2005,6 +2039,8 @@ var UTooltipRoot = class extends UElement {
     this._sync();
   }
   _sync() {
+    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;
   }
@@ -2064,7 +2100,7 @@ var UTextarea = class extends UElement {
     this._root.innerHTML = `<style>${textareaStyles}</style><div 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 +2166,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 +2203,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 +2249,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 +2289,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 +2340,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 +2370,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 +2411,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 +2439,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 +2467,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 +2485,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 +2531,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 +2587,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 +2604,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 = "";
@@ -2625,7 +2685,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 +2703,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();
@@ -2746,7 +2812,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 +2829,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 = "";
@@ -2818,7 +2891,7 @@ var UTabs = class extends UElement {
     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;
@@ -2923,6 +2996,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 +3063,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 +3095,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 +3118,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 +3270,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 +3288,7 @@ var UPresence = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._present = this.hasAttribute("present");
     this._mounted = true;
     if (this._present) {
@@ -3220,8 +3313,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 +3606,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 +3654,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();
@@ -3693,7 +3798,7 @@ var UDrawer = class extends UElement {
 </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 +3849,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();
@@ -3879,7 +3984,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 +4014,7 @@ var UPopover = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
@@ -3929,8 +4035,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 +4155,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 +4192,7 @@ var UDropdown = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._renderItems();
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -4095,8 +4209,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 = [];
@@ -4253,7 +4374,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 +4397,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 +4483,7 @@ var UAccordionItem = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["value", "open"];
+    return ["value", "open", "class"];
   }
   get value() {
     return this._value;
@@ -4374,12 +4501,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 +4547,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 +4583,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;
@@ -4645,7 +4783,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 +4793,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,8 +4809,16 @@ 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("");
@@ -4783,7 +4930,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 +4954,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) {
@@ -5032,7 +5185,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 +5225,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"]');
@@ -5281,7 +5438,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 +5459,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}`;
@@ -5403,6 +5560,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 +5574,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");
@@ -5455,6 +5620,10 @@ var UContextMenu = class extends UElement {
       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"]');
@@ -5653,7 +5822,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 +5862,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 +5885,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 +5940,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 +5992,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 +6044,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 +6081,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 +6123,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 +6143,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-PIXJHFME.js.map
+//# sourceMappingURL=chunk-PIXJHFME.js.map