@avento-space/ts-ui 1.2.3 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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-6Y6GA2QS.js';
2
2
  import { signal, effect } from './chunk-Q5RCPPCF.js';
3
3
 
4
4
  // src/components/button.wc.ts
@@ -98,7 +98,7 @@ var UInput = class extends UElement {
98
98
  this._readonly = false;
99
99
  this._inputType = "text";
100
100
  this._inputName = "";
101
- this._root.innerHTML = `<style>${inputStyles}</style><div class="input-wrapper"><input part="input" /></div>`;
101
+ this._root.innerHTML = `<style>${inputStyles}</style><div part="wrapper" class="input-wrapper"><input part="input" /></div>`;
102
102
  }
103
103
  static get observedAttributes() {
104
104
  return ["placeholder", "disabled", "readonly", "type", "name", "class"];
@@ -436,6 +436,7 @@ var UVirtualList = class extends UElement {
436
436
  for (let i = startIndex; i < endIndex; i++) {
437
437
  const div = document.createElement("div");
438
438
  div.className = "item";
439
+ div.setAttribute("part", "item");
439
440
  div.style.top = `${i * this._itemHeight}px`;
440
441
  div.style.height = `${this._itemHeight}px`;
441
442
  const content = this._renderItem(this._items[i], i);
@@ -1145,7 +1146,7 @@ var UCheckbox = class extends UElement {
1145
1146
  this._checked = false;
1146
1147
  this._disabled = false;
1147
1148
  this._value = "";
1148
- 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>`;
1149
+ this._root.innerHTML = `<style>${checkboxStyles}</style><label part="checkbox" class="checkbox"><input type="checkbox" part="input" /><span part="indicator" class="checkbox-indicator"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2.5 6L5 8.5L9.5 3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><!-- @deprecated label-text \u2192 use part="label" --><span part="label-text label" class="checkbox-label"><slot></slot></span></label>`;
1149
1150
  }
1150
1151
  static get observedAttributes() {
1151
1152
  return ["checked", "disabled", "value", "class"];
@@ -1993,7 +1994,7 @@ var UTooltipRoot = class extends UElement {
1993
1994
  this._disabled = false;
1994
1995
  this._showTimeout = null;
1995
1996
  this._hideTimeout = null;
1996
- 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>`;
1997
+ this._root.innerHTML = `<style>${tooltipStyles}</style><div part="trigger" class="tooltip-trigger" style="display:inline-flex"><slot></slot></div><div part="tooltip" class="tooltip" role="tooltip" hidden><!-- @deprecated tooltip-content \u2192 use part="content" --><div part="tooltip-content content" class="tooltip-content"></div><div part="arrow" class="tooltip-arrow"></div></div>`;
1997
1998
  }
1998
1999
  static get observedAttributes() {
1999
2000
  return ["content", "placement", "delay", "disabled", "class"];
@@ -2041,7 +2042,7 @@ var UTooltipRoot = class extends UElement {
2041
2042
  _sync() {
2042
2043
  const triggerEl = this._root.querySelector('[part="trigger"]');
2043
2044
  triggerEl.className = `tooltip-trigger ${this.className}`.trim();
2044
- const contentEl = this._root.querySelector('[part="tooltip-content"]');
2045
+ const contentEl = this._root.querySelector('[part~="tooltip-content"]');
2045
2046
  contentEl.textContent = this._content;
2046
2047
  }
2047
2048
  show() {
@@ -2097,7 +2098,7 @@ var UTextarea = class extends UElement {
2097
2098
  this._rows = 3;
2098
2099
  this._maxLength = -1;
2099
2100
  this._name = "";
2100
- this._root.innerHTML = `<style>${textareaStyles}</style><div class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
2101
+ this._root.innerHTML = `<style>${textareaStyles}</style><div part="wrapper" class="textarea-wrapper"><textarea part="textarea"></textarea></div>`;
2101
2102
  }
2102
2103
  static get observedAttributes() {
2103
2104
  return ["placeholder", "disabled", "readonly", "rows", "max-length", "name", "class"];
@@ -2618,33 +2619,39 @@ var UTree = class extends UElement {
2618
2619
  _renderNode(node, depth) {
2619
2620
  const li = document.createElement("li");
2620
2621
  li.className = "tree-node";
2622
+ li.setAttribute("part", "node");
2621
2623
  li.setAttribute("role", "treeitem");
2622
2624
  li.setAttribute("data-id", node.id);
2623
2625
  li.setAttribute("aria-expanded", String(node.expanded ?? false));
2624
2626
  li.setAttribute("aria-level", String(depth + 1));
2625
2627
  const row = document.createElement("div");
2626
2628
  row.className = "tree-row";
2629
+ row.setAttribute("part", "row");
2627
2630
  row.style.paddingLeft = `${depth * 20 + 8}px`;
2628
2631
  const hasChildren = node.children && node.children.length > 0;
2629
2632
  if (hasChildren) {
2630
2633
  const toggle = document.createElement("span");
2631
2634
  toggle.className = "tree-toggle";
2635
+ toggle.setAttribute("part", "toggle");
2632
2636
  toggle.textContent = node.expanded ? "\u25BE" : "\u25B8";
2633
2637
  toggle.setAttribute("aria-hidden", "true");
2634
2638
  row.appendChild(toggle);
2635
2639
  } else {
2636
2640
  const spacer = document.createElement("span");
2637
2641
  spacer.className = "tree-toggle-spacer";
2642
+ spacer.setAttribute("part", "toggle-spacer");
2638
2643
  row.appendChild(spacer);
2639
2644
  }
2640
2645
  const label = document.createElement("span");
2641
2646
  label.className = "tree-label";
2647
+ label.setAttribute("part", "label");
2642
2648
  label.textContent = node.label;
2643
2649
  row.appendChild(label);
2644
2650
  li.appendChild(row);
2645
2651
  if (hasChildren && node.expanded) {
2646
2652
  const ul = document.createElement("ul");
2647
2653
  ul.className = "tree-children";
2654
+ ul.setAttribute("part", "children");
2648
2655
  ul.setAttribute("role", "group");
2649
2656
  for (const child of node.children) {
2650
2657
  ul.appendChild(this._renderNode(child, depth + 1));
@@ -2723,6 +2730,7 @@ var UTable = class extends UElement {
2723
2730
  headerRow.innerHTML = "";
2724
2731
  for (const col of this._columns) {
2725
2732
  const th = document.createElement("th");
2733
+ th.setAttribute("part", "header-cell");
2726
2734
  th.textContent = col.label;
2727
2735
  if (col.width) th.style.width = col.width;
2728
2736
  if (this._sortable && col.sortable) {
@@ -2743,8 +2751,10 @@ var UTable = class extends UElement {
2743
2751
  const data = this._sortKey ? this._sortedData() : this._rows;
2744
2752
  for (const row of data) {
2745
2753
  const tr = document.createElement("tr");
2754
+ tr.setAttribute("part", "row");
2746
2755
  for (const col of this._columns) {
2747
2756
  const td = document.createElement("td");
2757
+ td.setAttribute("part", "cell");
2748
2758
  td.textContent = String(row[col.key] ?? "");
2749
2759
  tr.appendChild(td);
2750
2760
  }
@@ -2851,17 +2861,20 @@ var UBreadcrumb = class extends UElement {
2851
2861
  const item = this._items[i];
2852
2862
  const li = document.createElement("li");
2853
2863
  li.className = "breadcrumb-item";
2864
+ li.setAttribute("part", "item");
2854
2865
  if (i < this._items.length - 1) {
2855
2866
  if (item.href) {
2856
2867
  const a = document.createElement("a");
2857
2868
  a.href = item.href;
2858
2869
  a.textContent = item.label;
2870
+ a.setAttribute("part", "link");
2859
2871
  li.appendChild(a);
2860
2872
  } else {
2861
2873
  li.textContent = item.label;
2862
2874
  }
2863
2875
  const sep = document.createElement("span");
2864
2876
  sep.className = "breadcrumb-separator";
2877
+ sep.setAttribute("part", "separator");
2865
2878
  sep.setAttribute("aria-hidden", "true");
2866
2879
  sep.textContent = this._separator;
2867
2880
  li.appendChild(sep);
@@ -2885,7 +2898,7 @@ var UTabs = class extends UElement {
2885
2898
  this._variant = "underline";
2886
2899
  this._fullWidth = false;
2887
2900
  this._triggers = [];
2888
- 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>`;
2901
+ this._root.innerHTML = `<style>${tabsStyles}</style><div part="tabs" class="tabs"><div part="tablist" class="tablist tablist-underline" role="tablist"><div part="indicator" class="tab-indicator"></div></div><div part="tabpanels" class="tabpanels"></div></div>`;
2889
2902
  this._tablistEl = this._root.querySelector('[part="tablist"]');
2890
2903
  this._panelsContainer = this._root.querySelector('[part="tabpanels"]');
2891
2904
  this._indicatorEl = this._tablistEl.querySelector(".tab-indicator");
@@ -2955,6 +2968,7 @@ var UTabs = class extends UElement {
2955
2968
  const disabled = tab.hasAttribute("disabled");
2956
2969
  const btn = document.createElement("button");
2957
2970
  btn.className = "tab-trigger";
2971
+ btn.setAttribute("part", "tab");
2958
2972
  btn.setAttribute("role", "tab");
2959
2973
  btn.setAttribute("aria-selected", String(key === this._value));
2960
2974
  btn.setAttribute("data-value", key);
@@ -2964,6 +2978,7 @@ var UTabs = class extends UElement {
2964
2978
  if (iconSlot) {
2965
2979
  const iconSpan = document.createElement("span");
2966
2980
  iconSpan.className = "tab-trigger-icon";
2981
+ iconSpan.setAttribute("part", "tab-icon");
2967
2982
  iconSpan.appendChild(iconSlot.cloneNode(true));
2968
2983
  btn.appendChild(iconSpan);
2969
2984
  } else {
@@ -2971,6 +2986,7 @@ var UTabs = class extends UElement {
2971
2986
  if (svgs.length > 0) {
2972
2987
  const iconSpan = document.createElement("span");
2973
2988
  iconSpan.className = "tab-trigger-icon";
2989
+ iconSpan.setAttribute("part", "tab-icon");
2974
2990
  iconSpan.appendChild(svgs[0].cloneNode(true));
2975
2991
  btn.appendChild(iconSpan);
2976
2992
  }
@@ -2986,6 +3002,7 @@ var UTabs = class extends UElement {
2986
3002
  const key = panel.getAttribute("data-value") || String(i);
2987
3003
  const div = document.createElement("div");
2988
3004
  div.className = "tab-panel";
3005
+ div.setAttribute("part", "panel");
2989
3006
  div.setAttribute("role", "tabpanel");
2990
3007
  if (key === this._value) {
2991
3008
  div.removeAttribute("hidden");
@@ -3784,14 +3801,17 @@ var UDrawer = class extends UElement {
3784
3801
  <div part="backdrop" class="drawer-backdrop" hidden></div>
3785
3802
  <div part="drawer" class="drawer drawer-right" role="dialog" aria-modal="true" hidden>
3786
3803
  <div part="drawer-content" class="drawer-content">
3787
- <div part="drawer-header" class="drawer-header">
3804
+ <!-- @deprecated drawer-header \u2192 use part="header" -->
3805
+ <div part="drawer-header header" class="drawer-header">
3788
3806
  <slot name="header"></slot>
3789
3807
  <button part="close-btn" class="drawer-close" aria-label="Close">&times;</button>
3790
3808
  </div>
3791
- <div part="drawer-body" class="drawer-body">
3809
+ <!-- @deprecated drawer-body \u2192 use part="body" -->
3810
+ <div part="drawer-body body" class="drawer-body">
3792
3811
  <slot></slot>
3793
3812
  </div>
3794
- <div part="drawer-footer" class="drawer-footer">
3813
+ <!-- @deprecated drawer-footer \u2192 use part="footer" -->
3814
+ <div part="drawer-footer footer" class="drawer-footer">
3795
3815
  <slot name="footer"></slot>
3796
3816
  </div>
3797
3817
  </div>
@@ -3886,7 +3906,8 @@ var UDrawer = class extends UElement {
3886
3906
  drawer.removeAttribute("hidden");
3887
3907
  this._applyDrawerSize(content);
3888
3908
  this._unlockScroll = lockScroll();
3889
- requestAnimationFrame(() => drawer.classList.add("drawer-open"));
3909
+ void drawer.offsetHeight;
3910
+ drawer.classList.add("drawer-open");
3890
3911
  this._focusFirst();
3891
3912
  } else {
3892
3913
  drawer.classList.remove("drawer-open");
@@ -4227,17 +4248,20 @@ var UDropdown = class extends UElement {
4227
4248
  lastGroup = item.group;
4228
4249
  const label = document.createElement("div");
4229
4250
  label.className = GROUP_HEADING_CLASS;
4251
+ label.setAttribute("part", "group-label");
4230
4252
  label.textContent = item.group;
4231
4253
  this._itemsContainer.appendChild(label);
4232
4254
  }
4233
4255
  if (item.divider) {
4234
4256
  const div = document.createElement("div");
4235
4257
  div.className = "dropdown-divider";
4258
+ div.setAttribute("part", "divider");
4236
4259
  this._itemsContainer.appendChild(div);
4237
4260
  continue;
4238
4261
  }
4239
4262
  const btn = document.createElement("button");
4240
4263
  btn.className = ITEM_CLASS;
4264
+ btn.setAttribute("part", "item");
4241
4265
  btn.setAttribute("role", "option");
4242
4266
  btn.setAttribute("data-value", item.value);
4243
4267
  btn.disabled = item.disabled ?? false;
@@ -4245,18 +4269,22 @@ var UDropdown = class extends UElement {
4245
4269
  if (item.icon) {
4246
4270
  const iconSpan = document.createElement("span");
4247
4271
  iconSpan.className = "dropdown-item-icon";
4272
+ iconSpan.setAttribute("part", "item-icon");
4248
4273
  iconSpan.innerHTML = item.icon;
4249
4274
  btn.appendChild(iconSpan);
4250
4275
  }
4251
4276
  const textSpan = document.createElement("span");
4252
4277
  textSpan.className = "dropdown-item-text";
4278
+ textSpan.setAttribute("part", "item-text");
4253
4279
  const labelSpan = document.createElement("span");
4254
4280
  labelSpan.className = "dropdown-item-label";
4281
+ labelSpan.setAttribute("part", "item-label");
4255
4282
  labelSpan.textContent = item.label;
4256
4283
  textSpan.appendChild(labelSpan);
4257
4284
  if (item.description) {
4258
4285
  const descSpan = document.createElement("span");
4259
4286
  descSpan.className = "dropdown-item-desc";
4287
+ descSpan.setAttribute("part", "item-desc");
4260
4288
  descSpan.textContent = item.description;
4261
4289
  textSpan.appendChild(descSpan);
4262
4290
  }
@@ -4264,6 +4292,7 @@ var UDropdown = class extends UElement {
4264
4292
  if (item.shortcut) {
4265
4293
  const shortcutSpan = document.createElement("span");
4266
4294
  shortcutSpan.className = "dropdown-item-shortcut";
4295
+ shortcutSpan.setAttribute("part", "item-shortcut");
4267
4296
  shortcutSpan.textContent = item.shortcut;
4268
4297
  btn.appendChild(shortcutSpan);
4269
4298
  }
@@ -4619,6 +4648,7 @@ var UCombobox = class extends UElement {
4619
4648
  if (items.length === 0) {
4620
4649
  const empty = document.createElement("div");
4621
4650
  empty.className = "combobox-empty";
4651
+ empty.setAttribute("part", "empty");
4622
4652
  empty.textContent = "No results";
4623
4653
  listbox.appendChild(empty);
4624
4654
  return;
@@ -4626,6 +4656,7 @@ var UCombobox = class extends UElement {
4626
4656
  for (const opt of items) {
4627
4657
  const btn = document.createElement("button");
4628
4658
  btn.className = "combobox-option";
4659
+ btn.setAttribute("part", "option");
4629
4660
  btn.setAttribute("role", "option");
4630
4661
  btn.setAttribute("data-value", opt.value);
4631
4662
  btn.textContent = opt.label;
@@ -4821,7 +4852,7 @@ var UCalendar = class extends UElement {
4821
4852
  }
4822
4853
  _renderDayNames() {
4823
4854
  const container = this._root.querySelector('[part="day-names"]');
4824
- container.innerHTML = DAYS.map((d) => `<span class="cal-day-name">${d}</span>`).join("");
4855
+ container.innerHTML = DAYS.map((d) => `<span part="day-name" class="cal-day-name">${d}</span>`).join("");
4825
4856
  }
4826
4857
  _render() {
4827
4858
  const title = this._root.querySelector('[part="title"]');
@@ -4835,11 +4866,13 @@ var UCalendar = class extends UElement {
4835
4866
  for (let i = 0; i < firstDay; i++) {
4836
4867
  const empty = document.createElement("span");
4837
4868
  empty.className = "cal-day cal-day-empty";
4869
+ empty.setAttribute("part", "day-empty");
4838
4870
  grid.appendChild(empty);
4839
4871
  }
4840
4872
  for (let d = 1; d <= daysInMonth; d++) {
4841
4873
  const dayEl = document.createElement("button");
4842
4874
  dayEl.className = "cal-day";
4875
+ dayEl.setAttribute("part", "day");
4843
4876
  dayEl.textContent = String(d);
4844
4877
  const dateStr = `${this._viewYear}-${String(this._viewMonth + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
4845
4878
  dayEl.setAttribute("data-date", dateStr);
@@ -5004,8 +5037,10 @@ var UDataTable = class extends UElement {
5004
5037
  if (this._selectable) {
5005
5038
  const th = document.createElement("th");
5006
5039
  th.className = "dt-col-check";
5040
+ th.setAttribute("part", "header-checkbox");
5007
5041
  const cb = document.createElement("input");
5008
5042
  cb.type = "checkbox";
5043
+ cb.setAttribute("part", "select-all");
5009
5044
  cb.addEventListener("change", () => {
5010
5045
  const data = this._getPageData();
5011
5046
  if (cb.checked)
@@ -5042,6 +5077,7 @@ var UDataTable = class extends UElement {
5042
5077
  const tr = document.createElement("tr");
5043
5078
  const td = document.createElement("td");
5044
5079
  td.className = "dt-empty";
5080
+ td.setAttribute("part", "empty");
5045
5081
  td.colSpan = this._columns.length + (this._selectable ? 1 : 0);
5046
5082
  td.textContent = "No data";
5047
5083
  tr.appendChild(td);
@@ -5051,12 +5087,14 @@ var UDataTable = class extends UElement {
5051
5087
  for (let i = 0; i < data.length; i++) {
5052
5088
  const row = data[i];
5053
5089
  const tr = document.createElement("tr");
5090
+ tr.setAttribute("part", "row");
5054
5091
  const rowKey = row.id ?? row._key ?? String(i);
5055
5092
  if (this._selected.has(rowKey)) tr.classList.add("dt-row-selected");
5056
5093
  if (this._selectable) {
5057
5094
  const td = document.createElement("td");
5058
5095
  const cb = document.createElement("input");
5059
5096
  cb.type = "checkbox";
5097
+ cb.setAttribute("part", "select-row");
5060
5098
  cb.checked = this._selected.has(rowKey);
5061
5099
  cb.addEventListener("change", () => {
5062
5100
  if (cb.checked) this._selected.add(rowKey);
@@ -5069,6 +5107,7 @@ var UDataTable = class extends UElement {
5069
5107
  }
5070
5108
  for (const col of this._columns) {
5071
5109
  const td = document.createElement("td");
5110
+ td.setAttribute("part", "cell");
5072
5111
  const val = row[col.key];
5073
5112
  td.innerHTML = col.render ? col.render(val, row, i) : String(val ?? "");
5074
5113
  tr.appendChild(td);
@@ -5087,6 +5126,7 @@ var UDataTable = class extends UElement {
5087
5126
  for (let i = 1; i <= totalPages; i++) {
5088
5127
  const btn = document.createElement("button");
5089
5128
  btn.className = `dt-page-num ${i === this._page ? "active" : ""}`;
5129
+ btn.setAttribute("part", "page-num");
5090
5130
  btn.textContent = String(i);
5091
5131
  btn.addEventListener("click", () => {
5092
5132
  this._page = i;
@@ -5294,6 +5334,7 @@ var UCommandPalette = class extends UElement {
5294
5334
  if (this._filtered.length === 0) {
5295
5335
  const div = document.createElement("div");
5296
5336
  div.className = "cp-empty";
5337
+ div.setAttribute("part", "empty");
5297
5338
  div.textContent = "No results found";
5298
5339
  container.appendChild(div);
5299
5340
  return;
@@ -5308,30 +5349,36 @@ var UCommandPalette = class extends UElement {
5308
5349
  for (const [groupName, groupItems] of groups) {
5309
5350
  const groupEl = document.createElement("div");
5310
5351
  groupEl.className = "cp-group";
5352
+ groupEl.setAttribute("part", "group");
5311
5353
  const label = document.createElement("div");
5312
5354
  label.className = "cp-group-label";
5355
+ label.setAttribute("part", "group-label");
5313
5356
  label.textContent = groupName;
5314
5357
  groupEl.appendChild(label);
5315
5358
  for (const item of groupItems) {
5316
5359
  const btn = document.createElement("button");
5317
5360
  btn.className = "cp-item";
5361
+ btn.setAttribute("part", "item");
5318
5362
  btn.setAttribute("role", "option");
5319
5363
  btn.setAttribute("data-id", item.id);
5320
5364
  btn.setAttribute("data-index", String(idx));
5321
5365
  if (idx === this._selectedIndex) btn.classList.add("cp-item-active");
5322
5366
  const labelSpan = document.createElement("span");
5323
5367
  labelSpan.className = "cp-item-label";
5368
+ labelSpan.setAttribute("part", "item-label");
5324
5369
  labelSpan.textContent = item.label;
5325
5370
  btn.appendChild(labelSpan);
5326
5371
  if (item.description) {
5327
5372
  const desc = document.createElement("span");
5328
5373
  desc.className = "cp-item-desc";
5374
+ desc.setAttribute("part", "item-desc");
5329
5375
  desc.textContent = item.description;
5330
5376
  btn.appendChild(desc);
5331
5377
  }
5332
5378
  if (item.shortcut) {
5333
5379
  const kbd = document.createElement("kbd");
5334
5380
  kbd.className = "cp-item-shortcut";
5381
+ kbd.setAttribute("part", "item-shortcut");
5335
5382
  kbd.textContent = item.shortcut;
5336
5383
  btn.appendChild(kbd);
5337
5384
  }
@@ -5467,16 +5514,20 @@ var UToast = class extends UElement {
5467
5514
  const variant = opts.variant ?? "info";
5468
5515
  const el = document.createElement("div");
5469
5516
  el.className = `toast toast-${variant}`;
5517
+ el.setAttribute("part", "toast");
5470
5518
  el.setAttribute("role", "alert");
5471
5519
  const body = document.createElement("div");
5472
5520
  body.className = "toast-body";
5521
+ body.setAttribute("part", "body");
5473
5522
  const title = document.createElement("div");
5474
5523
  title.className = "toast-title";
5524
+ title.setAttribute("part", "title");
5475
5525
  title.textContent = opts.title;
5476
5526
  body.appendChild(title);
5477
5527
  if (opts.description) {
5478
5528
  const desc = document.createElement("div");
5479
5529
  desc.className = "toast-desc";
5530
+ desc.setAttribute("part", "description");
5480
5531
  desc.textContent = opts.description;
5481
5532
  body.appendChild(desc);
5482
5533
  }
@@ -5484,6 +5535,7 @@ var UToast = class extends UElement {
5484
5535
  if (opts.action) {
5485
5536
  const btn = document.createElement("button");
5486
5537
  btn.className = "toast-action";
5538
+ btn.setAttribute("part", "action");
5487
5539
  btn.textContent = opts.action.label;
5488
5540
  btn.addEventListener("click", () => {
5489
5541
  opts.action.onClick();
@@ -5493,6 +5545,7 @@ var UToast = class extends UElement {
5493
5545
  }
5494
5546
  const close = document.createElement("button");
5495
5547
  close.className = "toast-close";
5548
+ close.setAttribute("part", "close close-btn");
5496
5549
  close.innerHTML = "&times;";
5497
5550
  close.setAttribute("aria-label", "Dismiss");
5498
5551
  close.addEventListener("click", () => this.dismiss(id));
@@ -5598,11 +5651,13 @@ var UContextMenu = class extends UElement {
5598
5651
  if (item.divider) {
5599
5652
  const div = document.createElement("div");
5600
5653
  div.className = "cm-divider";
5654
+ div.setAttribute("part", "divider");
5601
5655
  container.appendChild(div);
5602
5656
  return;
5603
5657
  }
5604
5658
  const btn = document.createElement("button");
5605
5659
  btn.className = "cm-item";
5660
+ btn.setAttribute("part", "item");
5606
5661
  btn.setAttribute("role", "menuitem");
5607
5662
  btn.setAttribute("data-value", item.value);
5608
5663
  btn.setAttribute("data-index", String(i));
@@ -5610,11 +5665,13 @@ var UContextMenu = class extends UElement {
5610
5665
  if (item.icon) {
5611
5666
  const icon = document.createElement("span");
5612
5667
  icon.className = "cm-item-icon";
5668
+ icon.setAttribute("part", "item-icon");
5613
5669
  icon.textContent = item.icon;
5614
5670
  btn.appendChild(icon);
5615
5671
  }
5616
5672
  const label = document.createElement("span");
5617
5673
  label.className = "cm-item-label";
5674
+ label.setAttribute("part", "item-label");
5618
5675
  label.textContent = item.label;
5619
5676
  btn.appendChild(label);
5620
5677
  container.appendChild(btn);
@@ -5627,9 +5684,9 @@ var UContextMenu = class extends UElement {
5627
5684
  _openMenu(x, y) {
5628
5685
  const menu = this._root.querySelector('[part="menu"]');
5629
5686
  const itemsContainer = this._root.querySelector('[part="items"]');
5687
+ menu.style.animation = "none";
5630
5688
  menu.removeAttribute("hidden");
5631
- this._selectedIndex = -1;
5632
- this._open = true;
5689
+ void menu.offsetHeight;
5633
5690
  const trigger = new DOMRect(x, y, 0, 0);
5634
5691
  const result = computePosition(
5635
5692
  trigger,
@@ -5640,6 +5697,11 @@ var UContextMenu = class extends UElement {
5640
5697
  menu.style.top = `${result.top}px`;
5641
5698
  menu.style.maxHeight = `${result.maxHeight ?? 320}px`;
5642
5699
  itemsContainer.style.maxHeight = `${(result.maxHeight ?? 320) - 16}px`;
5700
+ void menu.offsetHeight;
5701
+ menu.style.animation = "";
5702
+ menu.style.transformOrigin = "top left";
5703
+ this._selectedIndex = -1;
5704
+ this._open = true;
5643
5705
  this._focusFirst();
5644
5706
  this.dispatchEvent(
5645
5707
  new CustomEvent("u-context-menu-open", {
@@ -5746,7 +5808,7 @@ var USortable = class extends UElement {
5746
5808
  this._placeholder.style.height = `${rect.height}px`;
5747
5809
  this._dragClone = item.cloneNode(true);
5748
5810
  this._dragClone.style.position = "fixed";
5749
- this._dragClone.style.zIndex = "99999";
5811
+ this._dragClone.style.zIndex = getComputedStyle(this).getPropertyValue("--u-z-drag").trim() || "99999";
5750
5812
  this._dragClone.style.width = `${rect.width}px`;
5751
5813
  this._dragClone.style.height = `${rect.height}px`;
5752
5814
  this._dragClone.style.left = `${rect.left}px`;
@@ -6143,5 +6205,5 @@ var UCard = class extends UElement {
6143
6205
  };
6144
6206
 
6145
6207
  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 };
6146
- //# sourceMappingURL=chunk-PIXJHFME.js.map
6147
- //# sourceMappingURL=chunk-PIXJHFME.js.map
6208
+ //# sourceMappingURL=chunk-47AXL5HN.js.map
6209
+ //# sourceMappingURL=chunk-47AXL5HN.js.map