@avento-space/ts-ui 1.1.1 → 1.2.2

package/dist/chunk-ICB6OBEZ.js

@@ -0,0 +1,2087 @@
+import { effect } from './chunk-Q5RCPPCF.js';
+
+// src/core/tokens.ts
+var sheet = new CSSStyleSheet();
+sheet.replaceSync(`
+:host {
+  --u-color-primary: #3b82f6;
+  --u-color-primary-hover: #2563eb;
+  --u-color-primary-text: #2563eb;
+  --u-color-danger: #ef4444;
+  --u-color-danger-hover: #dc2626;
+  --u-color-success: #16a34a;
+  --u-color-warning: #d97706;
+  --u-color-info: #0284c7;
+  --u-color-text: #111827;
+  --u-color-text-secondary: #374151;
+  --u-color-text-muted: #4b5563;
+  --u-color-text-disabled: #6b7280;
+  --u-color-border: #9ca3af;
+  --u-color-border-light: #d1d5db;
+  --u-color-border-lighter: #e5e7eb;
+  --u-color-bg: #fff;
+  --u-color-bg-muted: #f9fafb;
+  --u-color-bg-hover: #f3f4f6;
+  --u-color-bg-selected: #eff6ff;
+  --u-color-focus: #3b82f6;
+  --u-color-overlay: rgba(0,0,0,0.5);
+  --u-radius-sm: 4px;
+  --u-radius-md: 6px;
+  --u-radius-lg: 8px;
+  --u-radius-xl: 10px;
+  --u-radius-2xl: 12px;
+  --u-font-xs: 0.75rem;
+  --u-font-sm: 0.875rem;
+  --u-font-md: 1rem;
+  --u-font-lg: 1.125rem;
+  --u-shadow-sm: 0 1px 3px rgba(0,0,0,.05);
+  --u-shadow-md: 0 4px 16px rgba(0,0,0,.08);
+  --u-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
+  --u-shadow-xl: 0 20px 60px rgba(0,0,0,.15);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`);
+var globalStyles = sheet;
+
+// src/core/element.ts
+var nextId = 0;
+var UElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this._cleanups = [];
+    this._id = ++nextId;
+    this._root = this.attachShadow({ mode: "open" });
+    try {
+      this._root.adoptedStyleSheets = [globalStyles];
+    } catch {
+      const style = document.createElement("style");
+      style.textContent = ":host {}";
+      this._root.appendChild(style);
+    }
+  }
+  connectedCallback() {
+    this._mount();
+  }
+  disconnectedCallback() {
+    for (const fn of this._cleanups) {
+      try {
+        fn();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    this._cleanups = [];
+  }
+  adoptEffect(fn) {
+    const dispose = effect(fn);
+    this._cleanups.push(dispose);
+    return dispose;
+  }
+};
+
+// src/components/styles/button.ts
+var buttonStyles = `
+:host {
+  display: inline-block;
+}
+button {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: background-color .15s, opacity .15s, box-shadow .15s;
+  outline: none;
+}
+button:focus-visible {
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+button:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.btn-primary {
+  background: #3b82f6;
+  color: #fff;
+  border-color: #2563eb;
+}
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+  border-color: #9ca3af;
+}
+.btn-secondary:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+.btn-ghost {
+  background: transparent;
+  color: #374151;
+  border-color: transparent;
+}
+.btn-ghost:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+.btn-danger {
+  background: #ef4444;
+  color: #fff;
+  border-color: #ef4444;
+}
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
+.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
+.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
+.btn-link {
+  background: transparent;
+  color: #2563eb;
+  border-color: transparent;
+  padding: 0;
+  height: auto;
+  font-size: inherit;
+  font-weight: inherit;
+  text-decoration: none;
+  border-radius: 2px;
+}
+.btn-link:hover:not(:disabled) {
+  background: transparent;
+  text-decoration: underline;
+  color: #2563eb;
+}
+.btn-link:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/input.ts
+var inputStyles = `
+:host {
+  display: inline-block;
+}
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+input {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  color: #111827;
+  transition: border-color .15s;
+}
+input::placeholder { color: #4b5563; }
+input:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+}
+input:disabled {
+  background: #f9fafb;
+  color: #4b5563;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/box.ts
+var boxStyles = `
+:host {
+  display: block;
+}
+`;
+
+// src/components/styles/list.ts
+var listStyles = `
+:host {
+  display: block;
+}
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.list-empty {
+  padding: 24px;
+  text-align: center;
+  color: #4b5563;
+}
+`;
+
+// src/components/styles/icon.ts
+var iconStyles = `
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+`;
+
+// src/components/styles/text.ts
+var textStyles = `
+:host {
+  display: inline;
+}
+[part="text"] {
+  margin: 0;
+  font-family: inherit;
+  line-height: 1.5;
+}
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-md { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+.text-normal { font-weight: 400; }
+.text-medium { font-weight: 500; }
+.text-semibold { font-weight: 600; }
+.text-bold { font-weight: 700; }
+.text-default { color: inherit; }
+.text-muted { color: #4b5563; }
+.text-accent { color: #2563eb; }
+.text-danger { color: #ef4444; }
+.text-success { color: #16a34a; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+
+// src/components/styles/stack.ts
+var stackStyles = `
+:host {
+  display: flex;
+}
+[part="stack"] {
+  display: flex;
+  width: 100%;
+}
+.stack-v {
+  flex-direction: column;
+}
+.stack-h {
+  flex-direction: row;
+}
+`;
+
+// src/components/styles/grid.ts
+var gridStyles = `
+:host {
+  display: block;
+}
+[part="grid"] {
+  display: grid;
+}
+`;
+
+// src/components/styles/overlay.ts
+var overlayStyles = `
+:host {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+[part="overlay"] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.overlay-blur {
+  backdrop-filter: blur(4px);
+}
+[hidden] {
+  display: none !important;
+}
+`;
+
+// src/components/styles/field.ts
+var fieldStyles = `
+:host {
+  display: block;
+}
+[part="field"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+.field-label-required::after {
+  content: ' *';
+  color: #ef4444;
+}
+.field-content {
+  display: flex;
+  flex-direction: column;
+}
+.field-hint {
+  font-size: 0.75rem;
+  color: #4b5563;
+}
+.field-error {
+  font-size: 0.75rem;
+  color: #ef4444;
+}
+.hidden {
+  display: none;
+}
+`;
+
+// src/components/styles/checkbox.ts
+var checkboxStyles = `
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+[part="checkbox"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+:host(:focus-visible) .checkbox-indicator { outline: 2px solid #3b82f6; outline-offset: 2px; }
+input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.checkbox-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #9ca3af;
+  border-radius: 4px;
+  transition: all .15s;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.checkbox-indicator.checked {
+  background: #3b82f6;
+  border-color: #2563eb;
+  color: #fff;
+}
+.checkbox-indicator svg {
+  opacity: 0;
+  transition: opacity .15s;
+}
+.checkbox-indicator.checked svg {
+  opacity: 1;
+}
+.checkbox-label {
+  font-size: 0.875rem;
+  color: #374151;
+}
+:host([disabled]) [part="checkbox"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/select.ts
+var selectStyles = `
+:host {
+  display: inline-block;
+  position: relative;
+}
+.select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.select {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 8px 32px 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  color: #111827;
+  transition: border-color .15s;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+.select:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+}
+.select:disabled {
+  background: #f9fafb;
+  color: #4b5563;
+  cursor: not-allowed;
+}
+.select-arrow {
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  color: #4b5563;
+  display: flex;
+  align-items: center;
+}
+`;
+
+// src/components/styles/link.ts
+var linkStyles = `
+:host {
+  display: inline;
+}
+[part="link"] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  transition: color .15s;
+  text-decoration: none;
+  border-radius: 2px;
+}
+[part="link"]:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+.link-default { color: #2563eb; }
+.link-default:hover { color: #2563eb; text-decoration: underline; }
+.link-accent { color: #374151; font-weight: 500; }
+.link-accent:hover { color: #111827; text-decoration: underline; }
+.link-muted { color: #4b5563; }
+.link-muted:hover { color: #374151; text-decoration: underline; }
+.link-danger { color: #ef4444; }
+.link-danger:hover { color: #dc2626; text-decoration: underline; }
+.link-underline-always { text-decoration: underline; }
+.link-underline-none:hover { text-decoration: none; }
+.link-disabled {
+  color: #4b5563 !important;
+  cursor: not-allowed;
+  pointer-events: none;
+  text-decoration: none !important;
+}
+`;
+
+// src/components/styles/container.ts
+var containerStyles = `
+:host {
+  display: block;
+  width: 100%;
+}
+[part="container"] {
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
+`;
+
+// src/components/styles/dialog.ts
+var dialogStyles = `
+:host {
+  display: contents;
+}
+[part="dialog-root"] {
+  display: contents;
+}
+`;
+
+// src/components/styles/tooltip.ts
+var tooltipStyles = `
+:host {
+  position: relative;
+  display: inline-flex;
+}
+[part="tooltip"] {
+  position: fixed;
+  z-index: 99999;
+  background: #1f2937;
+  color: #fff;
+  font-size: 0.75rem;
+  padding: 6px 10px;
+  border-radius: 6px;
+  pointer-events: none;
+  line-height: 1.4;
+  max-width: 200px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.25);
+  animation: u-tooltip-in .12s ease;
+}
+@keyframes u-tooltip-in {
+  from { opacity: 0; transform: translateY(3px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.tooltip-arrow {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: #1f2937;
+  transform: rotate(45deg);
+}
+.arrow-top { bottom: -3px; left: calc(50% - 3px); }
+.arrow-bottom { top: -3px; left: calc(50% - 3px); }
+.arrow-left { right: -3px; top: calc(50% - 3px); }
+.arrow-right { left: -3px; top: calc(50% - 3px); }
+`;
+
+// src/components/styles/textarea.ts
+var textareaStyles = `
+:host {
+  display: inline-block;
+}
+.textarea-wrapper {
+  position: relative;
+  display: flex;
+}
+textarea {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  color: #111827;
+  transition: border-color .15s;
+  resize: vertical;
+  min-height: 60px;
+}
+textarea::placeholder { color: #4b5563; }
+textarea:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+}
+textarea:disabled {
+  background: #f9fafb;
+  color: #4b5563;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/radio.ts
+var radioStyles = `
+:host {
+  display: block;
+}
+[part="group"] {
+  display: flex;
+}
+[part="radio"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #374151;
+}
+:host(:focus-visible) .radio-circle { outline: 2px solid #3b82f6; outline-offset: 2px; }
+input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.radio-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #9ca3af;
+  border-radius: 50%;
+  transition: all .15s;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.radio-circle.checked {
+  border-color: #2563eb;
+  background: #3b82f6;
+  box-shadow: inset 0 0 0 3px #fff;
+}
+:host([disabled]) [part="radio"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/switch.ts
+var switchStyles = `
+:host {
+  display: inline-flex;
+}
+[part="switch"] {
+  display: inline-flex;
+  cursor: pointer;
+}
+:host(:focus-visible) .switch-track { outline: 2px solid #3b82f6; outline-offset: 3px; }
+input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.switch-track {
+  width: 40px;
+  height: 22px;
+  background: #9ca3af;
+  border-radius: 11px;
+  position: relative;
+  transition: background .2s;
+}
+.switch-track.checked {
+  background: #3b82f6;
+}
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform .2s;
+  box-shadow: 0 1px 2px rgba(0,0,0,.15);
+}
+.switch-track.checked .switch-thumb {
+  transform: translateX(18px);
+}
+:host([disabled]) [part="switch"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
+
+// src/components/styles/label.ts
+var labelStyles = `
+:host {
+  display: inline;
+}
+[part="label"] {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: default;
+}
+.label-required::after {
+  content: ' *';
+  color: #ef4444;
+}
+`;
+
+// src/components/styles/tree.ts
+var treeStyles = `
+:host {
+  display: block;
+}
+[part="tree"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.875rem;
+}
+.tree-node {
+  list-style: none;
+}
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.tree-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.tree-row:hover {
+  background: #f3f4f6;
+}
+.tree-toggle {
+  width: 16px;
+  flex-shrink: 0;
+  text-align: center;
+  font-size: 12px;
+  color: #4b5563;
+}
+.tree-toggle-spacer {
+  width: 16px;
+  flex-shrink: 0;
+}
+.tree-label {
+  color: #374151;
+}
+.tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+`;
+
+// src/components/styles/table.ts
+var tableStyles = `
+:host {
+  display: block;
+  overflow-x: auto;
+}
+.table-wrapper {
+  width: 100%;
+}
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.table th {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 2px solid #e5e7eb;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  background: #f9fafb;
+}
+.table th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.table th.sortable:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.table th.sortable:hover {
+  background: #f3f4f6;
+}
+.table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  color: #4b5563;
+}
+.table tr:hover td {
+  background: #f9fafb;
+}
+`;
+
+// src/components/styles/breadcrumb.ts
+var breadcrumbStyles = `
+:host {
+  display: block;
+}
+[part="breadcrumb"] {
+  font-size: 0.875rem;
+}
+[part="list"] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #4b5563;
+}
+.breadcrumb-item a {
+  color: #2563eb;
+  text-decoration: none;
+}
+.breadcrumb-item a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
+.breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+.breadcrumb-item[aria-current="page"] {
+  color: #111827;
+  font-weight: 500;
+}
+.breadcrumb-separator {
+  color: #d1d5db;
+  margin: 0 2px;
+}
+`;
+
+// src/components/styles/tabs.ts
+var tabsStyles = `
+:host {
+  display: block;
+}
+[part="tabs"] {
+  display: flex;
+  flex-direction: column;
+}
+[part="tablist"] {
+  display: flex;
+  gap: 0;
+  position: relative;
+  outline: none;
+}
+.tablist-underline {
+  border-bottom: 1px solid #d1d5db;
+}
+.tablist-underline .tab-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: #3b82f6;
+  transition: left .2s ease, width .2s ease;
+  border-radius: 1px;
+}
+.tablist-pills {
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.tablist-buttons {
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.tablist-full {
+  width: 100%;
+}
+.tablist-full .tab-trigger {
+  flex: 1;
+  text-align: center;
+}
+.tab-trigger {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 10px 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #4b5563;
+  transition: all .15s;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+  border-radius: 0;
+}
+.tab-trigger:hover:not(:disabled):not(.active) {
+  color: #374151;
+}
+.tab-trigger.active {
+  color: #2563eb;
+  font-weight: 500;
+}
+.tab-trigger:focus-visible {
+  box-shadow: inset 0 0 0 2px #3b82f6;
+}
+.tab-trigger:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+.tab-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.tab-trigger-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.tablist-pills .tab-trigger {
+  border-radius: 999px;
+  padding: 6px 14px;
+}
+.tablist-pills .tab-trigger:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+.tablist-pills .tab-trigger.active {
+  background: #eff6ff;
+  color: #2563eb;
+}
+.tablist-buttons .tab-trigger {
+  border-radius: 6px;
+  padding: 6px 14px;
+}
+.tablist-buttons .tab-trigger:hover:not(:disabled) {
+  background: #f3f4f6;
+}
+.tablist-buttons .tab-trigger.active {
+  background: #3b82f6;
+  color: #fff;
+}
+[part="tabpanels"] {
+  padding: 16px 0;
+  outline: none;
+}
+.tab-panel {
+  outline: none;
+  animation: u-tab-panel-in .15s ease;
+}
+@keyframes u-tab-panel-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+`;
+
+// src/components/styles/visually-hidden.ts
+var visuallyHiddenStyles = `
+:host {
+  display: inline;
+}
+[part="hidden"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
+
+// src/components/styles/presence.ts
+var presenceStyles = `
+[part="presence"] {
+  animation-fill-mode: both;
+}
+.presence-enter {
+  opacity: 0;
+}
+.presence-enter-active {
+  opacity: 1;
+  transition: opacity var(--duration, 200ms) ease;
+}
+.presence-leave {
+  opacity: 1;
+}
+.presence-leave-active {
+  opacity: 0;
+  transition: opacity var(--duration, 200ms) ease;
+}
+`;
+
+// src/components/styles/animate.ts
+var animateKeyframes = `
+@keyframes u-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes u-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes u-slide-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes u-slide-in-down {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes u-slide-in-left {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes u-slide-in-right {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes u-slide-out-up {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-20px); }
+}
+@keyframes u-slide-out-down {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(20px); }
+}
+@keyframes u-scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes u-scale-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+@keyframes u-bounce-in {
+  0% { opacity: 0; transform: scale(0.3); }
+  50% { transform: scale(1.05); }
+  70% { transform: scale(0.9); }
+  100% { opacity: 1; transform: scale(1); }
+}
+`;
+
+// src/components/styles/modal.ts
+var modalStyles = `
+:host {
+  display: contents;
+}
+@keyframes u-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes u-modal-scale-in {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 9998;
+  animation: u-modal-fade-in .15s ease;
+}
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+.modal-wrapper {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 85vh;
+  width: 100%;
+  animation: u-modal-scale-in .2s ease;
+}
+.modal-sm { max-width: 400px; }
+.modal-md { max-width: 500px; }
+.modal-lg { max-width: 640px; }
+.modal-xl { max-width: 800px; }
+.modal-full { max-width: calc(100vw - 32px); }
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  gap: 12px;
+}
+.modal-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: #111827;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #4b5563;
+  padding: 4px;
+  line-height: 1;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color .15s, background .15s;
+}
+.modal-close:hover { color: #374151; background: #f3f4f6; }
+.modal-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.modal-close svg {
+  width: 18px;
+  height: 18px;
+}
+.modal-content {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid #e5e7eb;
+}
+.modal-mobile.modal-wrapper {
+  max-height: calc(100vh - 32px) !important;
+  border-radius: 10px;
+}
+`;
+
+// src/components/styles/drawer.ts
+var drawerStyles = `
+:host {
+  display: contents;
+}
+.drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 9998;
+}
+.drawer {
+  position: fixed;
+  z-index: 9999;
+}
+.drawer-right { top: 0; right: 0; height: 100%; }
+.drawer-left { top: 0; left: 0; height: 100%; }
+.drawer-top { top: 0; left: 0; width: 100%; }
+.drawer-bottom { bottom: 0; left: 0; width: 100%; }
+.drawer-content {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 40px rgba(0,0,0,.1);
+}
+.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius: 12px 0 0 12px; }
+.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0 12px 12px 0; }
+.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0 12px 12px; }
+.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius: 12px 12px 0 0; }
+.drawer-open .drawer-content { transform: translate(0,0); }
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+.drawer-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #4b5563;
+  padding: 0;
+  line-height: 1;
+}
+.drawer-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.drawer-close:hover { color: #374151; }
+.drawer-body { padding: 20px; overflow-y: auto; flex: 1; color: #4b5563; font-size: 0.875rem; }
+.drawer-footer { padding: 12px 20px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; }
+`;
+
+// src/components/styles/popover.ts
+var popoverStyles = `
+:host {
+  position: relative;
+  display: inline-flex;
+}
+.popover-trigger {
+  display: inline-flex;
+}
+.popover {
+  position: fixed;
+  z-index: 99999;
+  filter: drop-shadow(0 8px 24px rgba(0,0,0,.14));
+}
+.popover-content {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  padding: 8px;
+  font-size: 0.875rem;
+  color: #374151;
+  min-width: 160px;
+  animation: u-popover-in .15s ease;
+}
+@keyframes u-popover-in {
+  from { opacity: 0; transform: scale(.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.popover-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+.arrow-top { bottom: -5px; left: calc(50% - 5px); border-top: none; border-left: none; }
+.arrow-bottom { top: -5px; left: calc(50% - 5px); border-bottom: none; border-right: none; }
+.arrow-left { right: -5px; top: calc(50% - 5px); border-bottom: none; border-left: none; }
+.arrow-right { left: -5px; top: calc(50% - 5px); border-top: none; border-right: none; }
+`;
+
+// src/components/styles/dropdown.ts
+var dropdownStyles = `
+:host {
+  position: relative;
+  display: inline-flex;
+}
+.dropdown-trigger {
+  display: inline-flex;
+}
+.dropdown-menu {
+  position: fixed;
+  z-index: 99999;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.14);
+  padding: 4px;
+  min-width: 180px;
+  outline: none;
+  animation: u-dropdown-in .12s ease;
+}
+@keyframes u-dropdown-in {
+  from { opacity: 0; transform: scale(.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.dropdown-items {
+  display: flex;
+  flex-direction: column;
+}
+.dropdown-item {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #374151;
+  text-align: left;
+  border-radius: 6px;
+  transition: background .1s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.dropdown-item:hover { background: #f3f4f6; }
+.dropdown-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.dropdown-item.selected { color: #2563eb; font-weight: 500; background: #eff6ff; }
+.dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.dropdown-item-active { background: #eff6ff; color: #2563eb; }
+.dropdown-item-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+}
+.dropdown-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.dropdown-item-text {
+  flex: 1;
+  min-width: 0;
+}
+.dropdown-item-label {
+  display: block;
+  line-height: 1.4;
+}
+.dropdown-item-desc {
+  display: block;
+  font-size: 0.75rem;
+  color: #4b5563;
+  line-height: 1.3;
+  margin-top: 1px;
+}
+.dropdown-item-shortcut {
+  font-size: 0.75rem;
+  color: #4b5563;
+  padding: 2px 6px;
+  background: #f3f4f6;
+  border-radius: 4px;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+.dropdown-group-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #4b5563;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 8px 12px 4px;
+}
+.dropdown-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
+`;
+
+// src/components/styles/accordion.ts
+var accordionStyles = `
+:host {
+  display: block;
+}
+[part="accordion"] {
+  border: 1px solid #9ca3af;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.accordion-item {
+  border-bottom: 1px solid #e5e7eb;
+}
+.accordion-item:last-child { border-bottom: none; }
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #374151;
+  transition: background .15s;
+  user-select: none;
+}
+.accordion-header:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.accordion-header:hover { background: #f9fafb; }
+.accordion-icon {
+  transition: transform .2s;
+  font-size: 12px;
+  color: #4b5563;
+}
+.accordion-item[open] .accordion-icon { transform: rotate(180deg); }
+.accordion-content {
+  overflow: hidden;
+  transition: height .25s ease;
+}
+.accordion-body {
+  padding: 0 16px 12px;
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+`;
+
+// src/components/styles/calendar.ts
+var calendarStyles = `
+:host {
+  display: inline-block;
+}
+.calendar {
+  font-size: 0.875rem;
+  width: 280px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,.08);
+  padding: 16px;
+}
+.cal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.cal-title {
+  font-weight: 600;
+  color: #111827;
+}
+.cal-nav-btn {
+  background: none;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+  transition: all .15s;
+}
+.cal-nav-btn:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.cal-nav-btn:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+.cal-day-names {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.75rem;
+  color: #4b5563;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.cal-day-name {
+  padding: 4px 0;
+}
+.cal-days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.cal-day {
+  background: none;
+  border: none;
+  border-radius: 6px;
+  width: 100%;
+  aspect-ratio: 1;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #374151;
+  transition: all .1s;
+  font-family: inherit;
+}
+.cal-day:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.cal-day:hover { background: #f3f4f6; }
+.cal-day-empty { pointer-events: none; }
+.cal-today { font-weight: 600; color: #2563eb; }
+.cal-selected { background: #3b82f6; color: #fff; font-weight: 600; }
+.cal-selected:hover { background: #2563eb; }
+.cal-disabled { opacity: 0.3; pointer-events: none; }
+`;
+
+// src/components/styles/data-table.ts
+var dataTableStyles = `
+:host {
+  display: block;
+}
+.data-table {
+  font-size: 0.875rem;
+  border: 1px solid #9ca3af;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.dt-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #9ca3af;
+  background: #f9fafb;
+}
+.dt-search-input {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 6px 12px;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  outline: none;
+  width: 200px;
+}
+.dt-search-input:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+}
+.dt-page-info { color: #4b5563; font-size: 0.8rem; }
+.dt-table-wrapper { overflow-x: auto; }
+.dt-table { width: 100%; border-collapse: collapse; }
+.dt-table th {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 2px solid #e5e7eb;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  background: #f9fafb;
+}
+.dt-table th.dt-sortable { cursor: pointer; user-select: none; }
+.dt-table th.dt-sortable:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.dt-table th.dt-sortable:hover { background: #f3f4f6; }
+.dt-table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; color: #4b5563; }
+.dt-table tr:hover td { background: #f9fafb; }
+.dt-row-selected td { background: #eff6ff; }
+.dt-col-check { width: 40px; }
+.dt-empty { text-align: center; color: #4b5563; padding: 32px; }
+.dt-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-top: 1px solid #9ca3af;
+  background: #f9fafb;
+}
+.dt-page-btn {
+  font-family: inherit;
+  font-size: 0.8rem;
+  padding: 6px 12px;
+  border: 1px solid #9ca3af;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  color: #374151;
+}
+.dt-page-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.dt-page-btn:hover { background: #f3f4f6; }
+.dt-page-numbers { display: flex; gap: 4px; }
+.dt-page-num {
+  font-family: inherit;
+  font-size: 0.8rem;
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  cursor: pointer;
+  color: #4b5563;
+}
+.dt-page-num:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.dt-page-num:hover { background: #f3f4f6; }
+.dt-page-num.active { background: #3b82f6; color: #fff; font-weight: 600; }
+`;
+
+// src/components/styles/command-palette.ts
+var commandPaletteStyles = `
+:host {
+  display: contents;
+}
+.cp-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 99999;
+}
+.cp-dialog {
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100000;
+  width: 540px;
+  max-width: calc(100vw - 32px);
+}
+.cp-dialog-inner {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.2);
+  overflow: hidden;
+}
+.cp-search-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  gap: 8px;
+}
+.cp-search-icon { font-size: 1rem; color: #4b5563; }
+.cp-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 1rem;
+  color: #111827;
+  background: none;
+}
+.cp-shortcut-hint {
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  background: #f3f4f6;
+  border-radius: 4px;
+  color: #4b5563;
+  font-family: inherit;
+}
+.cp-results {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.cp-group-label {
+  padding: 8px 12px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #4b5563;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.cp-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 6px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.cp-item:hover { background: #f3f4f6; }
+.cp-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.cp-item-active { background: #eff6ff; }
+.cp-item-label { font-size: 0.875rem; color: #111827; flex: 1; }
+.cp-item-desc { font-size: 0.75rem; color: #4b5563; flex: 1; }
+.cp-item-shortcut {
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  background: #f3f4f6;
+  border-radius: 4px;
+  color: #4b5563;
+  font-family: inherit;
+}
+.cp-empty { padding: 24px; text-align: center; color: #4b5563; font-size: 0.875rem; }
+.cp-footer {
+  display: flex;
+  gap: 16px;
+  padding: 8px 16px;
+  border-top: 1px solid #e5e7eb;
+  font-size: 0.75rem;
+  color: #4b5563;
+}
+`;
+
+// src/components/styles/combobox.ts
+var comboboxStyles = `
+:host {
+  display: inline-block;
+  position: relative;
+}
+.combobox {
+  position: relative;
+}
+.combobox-input-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  transition: border-color .15s;
+  background: #fff;
+}
+.combobox-input-wrapper:focus-within {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+}
+.combobox-input {
+  font-family: inherit;
+  font-size: 14px;
+  padding: 8px 12px;
+  border: none;
+  outline: none;
+  background: none;
+  width: 100%;
+  box-sizing: border-box;
+  color: #111827;
+}
+.combobox-toggle {
+  background: none;
+  border: none;
+  padding: 0 8px;
+  cursor: pointer;
+  color: #4b5563;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+.combobox-listbox {
+  position: fixed;
+  z-index: 99999;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 4px 20px rgba(0,0,0,.1);
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.combobox-option {
+  display: block;
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #374151;
+  text-align: left;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.combobox-option:hover { background: #f3f4f6; }
+.combobox-option.active { color: #2563eb; font-weight: 500; }
+.combobox-option:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.combobox-empty { padding: 12px; text-align: center; color: #4b5563; font-size: 0.875rem; }
+`;
+
+// src/components/styles/toast.ts
+var toastStyles = `
+:host {
+  display: block;
+  position: fixed;
+  z-index: 100000;
+  pointer-events: none;
+}
+.toast-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  pointer-events: none;
+  z-index: 100001;
+}
+.toast-top-right { top: 0; right: 0; }
+.toast-top-left { top: 0; left: 0; }
+.toast-top-center { top: 0; left: 50%; transform: translateX(-50%); }
+.toast-bottom-right { bottom: 0; right: 0; flex-direction: column-reverse; }
+.toast-bottom-left { bottom: 0; left: 0; flex-direction: column-reverse; }
+.toast-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.12);
+  font-size: 0.875rem;
+  min-width: 280px;
+  max-width: 400px;
+  animation: u-slide-in-right .2s ease;
+  background: #fff;
+  border: 1px solid #9ca3af;
+}
+.toast-exit {
+  animation: u-slide-out-right .2s ease forwards;
+}
+.toast-info { border-left: 4px solid #3b82f6; }
+.toast-success { border-left: 4px solid #16a34a; }
+.toast-warning { border-left: 4px solid #d97706; }
+.toast-error { border-left: 4px solid #ef4444; }
+.toast-body { flex: 1; }
+.toast-title { font-weight: 600; color: #111827; }
+.toast-desc { color: #4b5563; margin-top: 4px; font-size: 0.8rem; }
+.toast-action {
+  background: none;
+  border: none;
+  color: #2563eb;
+  cursor: pointer;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  padding: 0;
+  margin-top: 4px;
+}
+.toast-action:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
+.toast-action:hover { color: #2563eb; }
+.toast-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #4b5563;
+  font-size: 1.2rem;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.toast-close:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 2px; }
+.toast-close:hover { color: #374151; }
+`;
+
+// src/components/styles/context-menu.ts
+var contextMenuStyles = `
+:host {
+  position: relative;
+  display: inline-flex;
+}
+.cm-trigger {
+  display: inline;
+}
+.cm-menu {
+  position: fixed;
+  z-index: 99999;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.14);
+  padding: 4px;
+  min-width: 180px;
+  max-height: 320px;
+  overflow-y: auto;
+  animation: u-cm-in .12s ease;
+}
+@keyframes u-cm-in {
+  from { opacity: 0; transform: scale(.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.cm-items {
+  display: flex;
+  flex-direction: column;
+}
+.cm-item {
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #374151;
+  text-align: left;
+  border-radius: 6px;
+  transition: background .1s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.cm-item:hover { background: #f3f4f6; }
+.cm-item:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }
+.cm-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.cm-item-icon { width: 16px; text-align: center; font-size: 1rem; flex-shrink: 0; }
+.cm-item-label { flex: 1; }
+.cm-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
+`;
+
+// src/components/styles/sortable.ts
+var sortableStyles = `
+:host {
+  display: block;
+}
+.sortable {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sortable-dragging {
+  opacity: 0.9;
+  box-shadow: 0 8px 24px rgba(0,0,0,.15);
+  border-radius: 6px;
+  cursor: grabbing;
+}
+.sortable-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
+.sortable-placeholder {
+  border: 2px dashed #d1d5db;
+  border-radius: 6px;
+  opacity: 0.5;
+  box-sizing: border-box;
+  transition: height 0.15s ease, margin 0.15s ease;
+}
+`;
+
+// src/components/styles/form.ts
+var formStyles = `
+:host {
+  display: block;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+`;
+
+// src/components/styles/badge.ts
+var badgeStyles = `
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+[part="badge"] {
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  transition: background .15s, color .15s;
+}
+.badge-pill {
+  border-radius: 999px;
+}
+.badge-square {
+  border-radius: 4px;
+}
+.badge-sm {
+  font-size: 0.6875rem;
+  padding: 2px 6px;
+  min-height: 16px;
+  min-width: 16px;
+}
+.badge-md {
+  font-size: 0.75rem;
+  padding: 3px 8px;
+  min-height: 20px;
+  min-width: 20px;
+}
+.badge-lg {
+  font-size: 0.8125rem;
+  padding: 4px 10px;
+  min-height: 24px;
+  min-width: 24px;
+}
+.badge-default {
+  background: #f3f4f6;
+  color: #374151;
+}
+.badge-primary {
+  background: #eff6ff;
+  color: #2563eb;
+}
+.badge-success {
+  background: #dcfce7;
+  color: #15803d;
+}
+.badge-warning {
+  background: #fef3c7;
+  color: #b45309;
+}
+.badge-danger {
+  background: #fef2f2;
+  color: #dc2626;
+}
+.badge-info {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+.badge-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+  min-width: 8px;
+  min-height: 8px;
+}
+.badge-dot.badge-sm {
+  width: 6px;
+  height: 6px;
+  min-width: 6px;
+  min-height: 6px;
+}
+.badge-dot.badge-lg {
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  min-height: 10px;
+}
+`;
+
+// src/components/styles/card.ts
+var cardStyles = `
+:host {
+  display: block;
+}
+[part="card"] {
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  transition: box-shadow .2s, border-color .2s, transform .2s;
+  position: relative;
+  overflow: hidden;
+}
+.card-default {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.05);
+}
+.card-outlined {
+  background: transparent;
+  border: 1px solid #d1d5db;
+  border-radius: 12px;
+}
+.card-elevated {
+  background: #fff;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.08);
+}
+.card-hoverable:hover {
+  box-shadow: 0 8px 24px rgba(0,0,0,.12);
+  border-color: #9ca3af;
+  transform: translateY(-2px);
+}
+.card-image {
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+.card-image img,
+.card-image ::slotted(img) {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+.card-image-full {
+  border-radius: 0;
+}
+.card-image-top {
+  border-radius: 12px 12px 0 0;
+}
+.card-image-bottom {
+  border-radius: 0 0 12px 12px;
+}
+[part="header"] {
+  padding: 16px 20px 0;
+  font-weight: 600;
+  font-size: 1rem;
+  color: #111827;
+}
+[part="content"] {
+  padding: 16px 20px;
+  flex: 1;
+  min-width: 0;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+[part="footer"] {
+  padding: 0 20px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.card-padding-none [part="header"] { padding: 0; }
+.card-padding-none [part="content"] { padding: 0; }
+.card-padding-none [part="footer"] { padding: 0; }
+.card-padding-sm [part="header"] { padding: 12px 14px 0; }
+.card-padding-sm [part="content"] { padding: 12px 14px; }
+.card-padding-sm [part="footer"] { padding: 0 14px 12px; }
+.card-padding-lg [part="header"] { padding: 20px 24px 0; }
+.card-padding-lg [part="content"] { padding: 20px 24px; }
+.card-padding-lg [part="footer"] { padding: 0 24px 20px; }
+`;
+
+export { UElement, accordionStyles, animateKeyframes, badgeStyles, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, cardStyles, checkboxStyles, comboboxStyles, commandPaletteStyles, containerStyles, contextMenuStyles, dataTableStyles, dialogStyles, drawerStyles, dropdownStyles, fieldStyles, formStyles, gridStyles, iconStyles, inputStyles, labelStyles, linkStyles, listStyles, modalStyles, overlayStyles, popoverStyles, presenceStyles, radioStyles, selectStyles, sortableStyles, stackStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, toastStyles, tooltipStyles, treeStyles, visuallyHiddenStyles };
+//# sourceMappingURL=chunk-ICB6OBEZ.js.map
+//# sourceMappingURL=chunk-ICB6OBEZ.js.map