@avento-space/ts-ui 1.2.1 → 1.2.3

package/dist/{chunk-NJAZMTMT.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 } from './chunk-PRZASPFU.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;
   }
@@ -1811,6 +1845,13 @@ var UPopper = class extends UElement {
   }
 };
 
+// src/core/utils.ts
+function parseBooleanAttribute(value, fallback = false) {
+  if (value == null) return fallback;
+  const normalized = value.trim().toLowerCase();
+  return normalized === "" || normalized === "true" || normalized === "1" || normalized === "yes" || normalized === "on";
+}
+
 // src/components/dialog-root.wc.ts
 var UDialogRoot = class extends UElement {
   constructor() {
@@ -1820,6 +1861,7 @@ var UDialogRoot = class extends UElement {
     this._overlay = null;
     this._dismissable = null;
     this._focusTrap = null;
+    this._synced = false;
     this._root.innerHTML = `<style>${dialogStyles}</style><div part="dialog-root"><slot></slot></div>`;
   }
   static get observedAttributes() {
@@ -1857,15 +1899,18 @@ var UDialogRoot = class extends UElement {
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
     if (name === "open") {
-      this._open = newVal !== null;
+      this._open = parseBooleanAttribute(newVal, false);
       this._updateOpenState();
     }
-    if (name === "modal") this._modal = newVal !== null;
+    if (name === "modal") this._modal = parseBooleanAttribute(newVal, true);
   }
   _sync() {
     this.setAttribute("role", "dialog");
     this.setAttribute("aria-modal", String(this._modal));
-    this._updateOpenState();
+    if (!this._synced) {
+      this._synced = true;
+      this._updateOpenState();
+    }
   }
   _updateOpenState() {
     if (this._open) {
@@ -1894,6 +1939,8 @@ var UDialogRoot = class extends UElement {
   _removeOverlay() {
     if (this._overlay) {
       this._overlay.hide();
+      this._overlay.remove();
+      this._overlay = null;
     }
   }
   _injectDismissable() {
@@ -1901,8 +1948,10 @@ var UDialogRoot = class extends UElement {
       this._dismissable = new UDismissableLayer();
       this._dismissable.style.display = "contents";
       this._root.appendChild(this._dismissable);
-      this._dismissable.addEventListener("u-dismiss", () => {
-        if (this._modal) return;
+      this._dismissable.addEventListener("u-dismiss", (e) => {
+        const reason = e.detail?.reason;
+        const isOutsideClick = reason === "pointer-down-outside" || reason === "outside-click";
+        if (this._modal && isOutsideClick) return;
         this.closeDialog();
       });
     }
@@ -1947,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;
@@ -1990,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;
   }
@@ -2049,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 ?? "";
@@ -2115,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");
@@ -2150,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;
@@ -2196,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);
@@ -2235,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;
@@ -2286,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");
@@ -2314,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;
@@ -2355,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");
@@ -2381,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;
@@ -2409,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() {
   }
@@ -2428,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;
@@ -2474,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");
@@ -2524,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;
@@ -2533,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 = "";
@@ -2610,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;
@@ -2628,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();
@@ -2731,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;
@@ -2748,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 = "";
@@ -2794,10 +2882,16 @@ var UTabs = class extends UElement {
     super();
     this._value = "";
     this._orientation = "horizontal";
-    this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist" role="tablist"></div><div part="tabpanels" class="tabpanels"></div></div>`;
+    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._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"];
+    return ["value", "orientation", "variant", "full-width", "class"];
   }
   get value() {
     return this._value;
@@ -2805,35 +2899,89 @@ var UTabs = class extends UElement {
   set value(val) {
     this.setAttribute("value", val);
   }
+  get variant() {
+    return this._variant;
+  }
+  set variant(val) {
+    this.setAttribute("variant", val);
+  }
+  get fullWidth() {
+    return this._fullWidth;
+  }
+  set fullWidth(val) {
+    if (val) this.setAttribute("full-width", "");
+    else this.removeAttribute("full-width");
+  }
   connectedCallback() {
     super.connectedCallback();
     this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
-    if (name === "value") this._value = newVal ?? "";
-    else if (name === "orientation") this._orientation = newVal ?? "horizontal";
+    switch (name) {
+      case "value":
+        this._value = newVal ?? "";
+        break;
+      case "orientation":
+        this._orientation = newVal ?? "horizontal";
+        break;
+      case "variant":
+        this._variant = newVal ?? "underline";
+        break;
+      case "full-width":
+        this._fullWidth = newVal !== null;
+        break;
+    }
     this._sync();
   }
   _sync() {
-    const tablist = this._root.querySelector('[part="tablist"]');
-    tablist.setAttribute("aria-orientation", this._orientation);
+    this._tablistEl.setAttribute("aria-orientation", this._orientation);
+    this._tablistEl.className = `tablist tablist-${this._variant}`;
+    if (this._fullWidth) this._tablistEl.classList.add("tablist-full");
     const tabs = this.querySelectorAll('[slot="tab"]');
     const panels = this.querySelectorAll('[slot="panel"]');
-    tablist.innerHTML = "";
+    if (!this._value && tabs.length > 0) {
+      this._value = tabs[0].getAttribute("data-value") || "0";
+    }
+    this._triggers = [];
+    let triggerHtml = "";
+    if (this._indicatorEl) {
+      triggerHtml = '<div class="tab-indicator"></div>';
+    }
+    this._tablistEl.innerHTML = triggerHtml;
+    this._indicatorEl = this._tablistEl.querySelector(".tab-indicator");
     tabs.forEach((tab, i) => {
       const key = tab.getAttribute("data-value") || String(i);
+      const disabled = tab.hasAttribute("disabled");
       const btn = document.createElement("button");
       btn.className = "tab-trigger";
       btn.setAttribute("role", "tab");
       btn.setAttribute("aria-selected", String(key === this._value));
       btn.setAttribute("data-value", key);
-      btn.textContent = tab.textContent;
+      btn.disabled = disabled;
       if (key === this._value) btn.classList.add("active");
-      tablist.appendChild(btn);
+      const iconSlot = tab.querySelector('[slot="icon"]');
+      if (iconSlot) {
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "tab-trigger-icon";
+        iconSpan.appendChild(iconSlot.cloneNode(true));
+        btn.appendChild(iconSpan);
+      } else {
+        const svgs = tab.querySelectorAll("svg");
+        if (svgs.length > 0) {
+          const iconSpan = document.createElement("span");
+          iconSpan.className = "tab-trigger-icon";
+          iconSpan.appendChild(svgs[0].cloneNode(true));
+          btn.appendChild(iconSpan);
+        }
+      }
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = tab.textContent;
+      btn.appendChild(labelSpan);
+      this._tablistEl.appendChild(btn);
+      this._triggers.push(btn);
     });
-    const panelsContainer = this._root.querySelector('[part="tabpanels"]');
-    panelsContainer.innerHTML = "";
+    this._panelsContainer.innerHTML = "";
     panels.forEach((panel, i) => {
       const key = panel.getAttribute("data-value") || String(i);
       const div = document.createElement("div");
@@ -2845,14 +2993,27 @@ var UTabs = class extends UElement {
         div.setAttribute("hidden", "");
       }
       div.appendChild(panel.cloneNode(true));
-      panelsContainer.appendChild(div);
+      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;
+    const active = this._tablistEl.querySelector(".tab-trigger.active");
+    if (active) {
+      this._indicatorEl.style.left = `${active.offsetLeft}px`;
+      this._indicatorEl.style.width = `${active.offsetWidth}px`;
+    } else {
+      this._indicatorEl.style.left = "0";
+      this._indicatorEl.style.width = "0";
+    }
   }
   _mount() {
-    const tablist = this._root.querySelector('[part="tablist"]');
-    tablist.addEventListener("click", (e) => {
+    this._tablistEl.addEventListener("click", (e) => {
       const btn = e.target.closest(".tab-trigger");
-      if (!btn) return;
+      if (!btn || btn.disabled) return;
       const val = btn.getAttribute("data-value") || "";
       this._value = val;
       this.setAttribute("value", val);
@@ -2865,21 +3026,36 @@ var UTabs = class extends UElement {
         })
       );
     });
-    tablist.addEventListener("keydown", (e) => {
+    this._tablistEl.addEventListener("keydown", (e) => {
       const ke = e;
-      const triggers = Array.from(tablist.querySelectorAll(".tab-trigger"));
-      const current = tablist.querySelector(".tab-trigger.active");
-      const idx = triggers.indexOf(current);
+      const enabled = this._triggers.filter((t) => !t.disabled);
+      if (enabled.length === 0) return;
+      const current = this._tablistEl.querySelector(".tab-trigger.active");
+      const idx = enabled.indexOf(current);
       let nextIdx = -1;
-      if (ke.key === "ArrowRight" || ke.key === "ArrowDown") {
-        nextIdx = (idx + 1) % triggers.length;
-      } else if (ke.key === "ArrowLeft" || ke.key === "ArrowUp") {
-        nextIdx = (idx - 1 + triggers.length) % triggers.length;
+      switch (ke.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          ke.preventDefault();
+          nextIdx = (idx + 1) % enabled.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          ke.preventDefault();
+          nextIdx = (idx - 1 + enabled.length) % enabled.length;
+          break;
+        case "Home":
+          ke.preventDefault();
+          nextIdx = 0;
+          break;
+        case "End":
+          ke.preventDefault();
+          nextIdx = enabled.length - 1;
+          break;
       }
       if (nextIdx >= 0) {
-        e.preventDefault();
-        triggers[nextIdx].click();
-        triggers[nextIdx].focus();
+        enabled[nextIdx].click();
+        enabled[nextIdx].focus();
       }
     });
   }
@@ -2887,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() {
   }
 };
@@ -2904,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;
@@ -2927,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));
   }
@@ -3077,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;
@@ -3095,6 +3288,7 @@ var UPresence = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._present = this.hasAttribute("present");
     this._mounted = true;
     if (this._present) {
@@ -3119,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 = "";
@@ -3376,10 +3577,12 @@ function unlockScroll() {
 }
 
 // src/components/modal.wc.ts
+var CLOSE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
 var UModal = class extends UElement {
   constructor() {
     super();
     this._open = false;
+    this._title = "";
     this._size = "md";
     this._closeOnEscape = true;
     this._closeOnOverlay = true;
@@ -3390,8 +3593,8 @@ var UModal = class extends UElement {
 <div part="modal" class="modal" role="dialog" aria-modal="true" hidden>
   <div part="modal-wrapper" class="modal-wrapper modal-md">
     <div part="header" class="modal-header">
-      <slot name="header"><span class="modal-title-default"></span></slot>
-      <button part="close-btn" class="modal-close" aria-label="Close">&times;</button>
+      <div part="title" class="modal-title"><slot name="header">${this._title}</slot></div>
+      <button part="close-btn" class="modal-close" aria-label="Close">${CLOSE_SVG}</button>
     </div>
     <div part="content" class="modal-content">
       <slot></slot>
@@ -3403,7 +3606,7 @@ var UModal = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["open", "size", "close-on-escape", "close-on-overlay"];
+    return ["open", "size", "title", "close-on-escape", "close-on-overlay", "class"];
   }
   get open() {
     return this._open;
@@ -3413,6 +3616,12 @@ var UModal = class extends UElement {
     if (val) this.setAttribute("open", "");
     else this.removeAttribute("open");
   }
+  get title() {
+    return this._title;
+  }
+  set title(val) {
+    this.setAttribute("title", val);
+  }
   openModal() {
     this.open = true;
   }
@@ -3428,42 +3637,65 @@ var UModal = class extends UElement {
     if (oldVal === newVal) return;
     switch (name) {
       case "open":
-        this._open = newVal !== null;
+        this._open = parseBooleanAttribute(newVal, false);
         this._updateOpenState();
         break;
       case "size":
         this._size = newVal ?? "md";
+        this._updateSize();
+        break;
+      case "title":
+        this._title = newVal ?? "";
+        this._updateTitle();
         break;
       case "close-on-escape":
-        this._closeOnEscape = newVal !== null;
+        this._closeOnEscape = parseBooleanAttribute(newVal, true);
         break;
       case "close-on-overlay":
-        this._closeOnOverlay = newVal !== null;
+        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();
+  }
+  _updateTitle() {
+    const headerSlot = this._root.querySelector('slot[name="header"]');
+    if (!headerSlot) return;
+    const assigned = headerSlot.assignedNodes({ flatten: true });
+    if (assigned.length === 0 && this._title) {
+      headerSlot.textContent = this._title;
+    } else {
+      headerSlot.textContent = "";
+    }
+  }
+  _updateSize() {
+    const wrapper = this._root.querySelector('[part="modal-wrapper"]');
+    const isMobile = window.innerWidth < 640;
+    if (isMobile) {
+      wrapper.className = "modal-wrapper modal-mobile";
+      wrapper.style.maxWidth = `${Math.min(window.innerWidth - 32, 800)}px`;
+    } else {
+      wrapper.className = `modal-wrapper modal-${this._size}`;
+      wrapper.style.maxWidth = "";
+    }
   }
   _updateOpenState() {
     const backdrop = this._root.querySelector('[part="backdrop"]');
     const modal = this._root.querySelector('[part="modal"]');
-    const wrapper = this._root.querySelector('[part="modal-wrapper"]');
     if (this._open) {
       this._previousActive = document.activeElement;
       backdrop.removeAttribute("hidden");
       modal.removeAttribute("hidden");
       this._unlockScroll = lockScroll();
-      const isMobile = window.innerWidth < 640;
-      if (isMobile) {
-        wrapper.className = "modal-wrapper modal-mobile";
-        wrapper.style.maxWidth = `${window.innerWidth - 32}px`;
-        wrapper.style.maxHeight = `${window.innerHeight - 32}px`;
-      } else {
-        wrapper.className = `modal-wrapper modal-${this._size}`;
-        wrapper.style.maxWidth = "";
-        wrapper.style.maxHeight = "";
-      }
+      this._updateSize();
       this._focusFirst();
     } else {
       backdrop.setAttribute("hidden", "");
@@ -3482,6 +3714,12 @@ var UModal = class extends UElement {
     const focusable = this._root.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
+    for (const el of focusable) {
+      if (el.offsetParent !== null) {
+        el.focus();
+        return;
+      }
+    }
     if (focusable.length > 0) {
       focusable[0].focus();
     }
@@ -3504,7 +3742,7 @@ var UModal = class extends UElement {
       if (this._closeOnOverlay) this.closeModal();
     });
     window.addEventListener("resize", () => {
-      if (this._open) this._updateOpenState();
+      if (this._open) this._updateSize();
     });
   }
   _trapTab(e) {
@@ -3517,8 +3755,10 @@ var UModal = class extends UElement {
       e.preventDefault();
       return;
     }
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
+    const visible = focusable.filter((el) => el.offsetParent !== null);
+    const list = visible.length > 0 ? visible : focusable;
+    const first = list[0];
+    const last = list[list.length - 1];
     if (e.shiftKey && document.activeElement === first) {
       e.preventDefault();
       last.focus();
@@ -3558,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;
@@ -3589,7 +3829,7 @@ var UDrawer = class extends UElement {
     if (oldVal === newVal) return;
     switch (name) {
       case "open":
-        this._open = newVal !== null;
+        this._open = parseBooleanAttribute(newVal, false);
         this._updateOpenState();
         break;
       case "side":
@@ -3600,16 +3840,16 @@ var UDrawer = class extends UElement {
         this._size = newVal ?? "300px";
         break;
       case "close-on-escape":
-        this._closeOnEscape = newVal !== null;
+        this._closeOnEscape = parseBooleanAttribute(newVal, true);
         break;
       case "close-on-overlay":
-        this._closeOnOverlay = newVal !== null;
+        this._closeOnOverlay = parseBooleanAttribute(newVal, true);
         break;
     }
   }
   _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();
@@ -3744,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;
@@ -3774,6 +4014,7 @@ var UPopover = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
@@ -3794,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) {
@@ -3907,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;
@@ -3944,6 +4192,7 @@ var UDropdown = class extends UElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._sync();
     this._renderItems();
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -3960,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 = [];
@@ -4118,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);
@@ -4141,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");
@@ -4221,7 +4483,7 @@ var UAccordionItem = class extends UElement {
 </div>`;
   }
   static get observedAttributes() {
-    return ["value", "open"];
+    return ["value", "open", "class"];
   }
   get value() {
     return this._value;
@@ -4239,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() {
   }
@@ -4279,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;
@@ -4315,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;
@@ -4510,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;
@@ -4520,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())) {
@@ -4535,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("");
@@ -4648,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;
@@ -4672,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) {
@@ -4897,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;
@@ -4937,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"]');
@@ -5146,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;
@@ -5167,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}`;
@@ -5268,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;
   }
@@ -5279,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");
@@ -5320,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"]');
@@ -5518,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;
@@ -5554,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);
   }
@@ -5569,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]);
@@ -5605,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;
@@ -5640,6 +5981,167 @@ var UForm = class extends UElement {
   }
 };
 
-export { UAccordion, UAccordionItem, UAnimate, UBox, UBreadcrumb, UButton, UCalendar, 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-NJAZMTMT.js.map
-//# sourceMappingURL=chunk-NJAZMTMT.js.map
+// src/components/badge.wc.ts
+var UBadge = class extends UElement {
+  constructor() {
+    super();
+    this._variant = "default";
+    this._size = "md";
+    this._dot = false;
+    this._pill = true;
+    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", "class"];
+  }
+  get variant() {
+    return this._variant;
+  }
+  set variant(val) {
+    this.setAttribute("variant", val);
+  }
+  get size() {
+    return this._size;
+  }
+  set size(val) {
+    this.setAttribute("size", val);
+  }
+  get dot() {
+    return this._dot;
+  }
+  set dot(val) {
+    if (val) this.setAttribute("dot", "");
+    else this.removeAttribute("dot");
+  }
+  get pill() {
+    return this._pill;
+  }
+  set pill(val) {
+    if (!val) this.removeAttribute("pill");
+    else this.setAttribute("pill", "");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    switch (name) {
+      case "variant":
+        this._variant = newVal ?? "default";
+        break;
+      case "size":
+        this._size = newVal ?? "md";
+        break;
+      case "dot":
+        this._dot = newVal !== null;
+        break;
+      case "pill":
+        this._pill = newVal !== null;
+        break;
+    }
+    this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="badge"]');
+    el.className = `badge badge-${this._variant} badge-${this._size} ${this.className}`.trim();
+    if (this._dot) {
+      el.classList.add("badge-dot");
+    } else if (this._pill) {
+      el.classList.add("badge-pill");
+    } else {
+      el.classList.add("badge-square");
+    }
+  }
+  _mount() {
+  }
+};
+
+// src/components/card.wc.ts
+var UCard = class extends UElement {
+  constructor() {
+    super();
+    this._variant = "default";
+    this._padding = "md";
+    this._hoverable = false;
+    this._root.innerHTML = `<style>${cardStyles}</style>
+<div part="card" class="card card-default card-padding-md">
+  <div part="image" class="card-image card-image-top">
+    <slot name="image"></slot>
+  </div>
+  <div part="header">
+    <slot name="header"></slot>
+  </div>
+  <div part="content">
+    <slot></slot>
+  </div>
+  <div part="footer">
+    <slot name="footer"></slot>
+  </div>
+</div>`;
+  }
+  static get observedAttributes() {
+    return ["variant", "padding", "hoverable", "class"];
+  }
+  get variant() {
+    return this._variant;
+  }
+  set variant(val) {
+    this.setAttribute("variant", val);
+  }
+  get padding() {
+    return this._padding;
+  }
+  set padding(val) {
+    this.setAttribute("padding", val);
+  }
+  get hoverable() {
+    return this._hoverable;
+  }
+  set hoverable(val) {
+    if (val) this.setAttribute("hoverable", "");
+    else this.removeAttribute("hoverable");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._sync();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    switch (name) {
+      case "variant":
+        this._variant = newVal ?? "default";
+        break;
+      case "padding":
+        this._padding = newVal ?? "md";
+        break;
+      case "hoverable":
+        this._hoverable = newVal !== null;
+        break;
+    }
+    this._sync();
+  }
+  _sync() {
+    const el = this._root.querySelector('[part="card"]');
+    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) {
+      const assigned = imageSlot.assignedNodes({ flatten: true });
+      const imageEl = assigned.length > 0 ? imageSlot.parentElement : null;
+      if (imageEl) {
+        imageEl.classList.toggle("card-image-top", assigned.length > 0);
+      }
+    }
+  }
+  _mount() {
+    const imageSlot = this._root.querySelector('slot[name="image"]');
+    if (imageSlot) {
+      imageSlot.addEventListener("slotchange", () => this._sync());
+    }
+  }
+};
+
+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-PIXJHFME.js.map
+//# sourceMappingURL=chunk-PIXJHFME.js.map