@avento-space/ts-ui 1.2.1 → 1.2.2

package/dist/{chunk-PRZASPFU.js → chunk-ICB6OBEZ.js}

@@ -1,5 +1,55 @@
 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 {
@@ -8,6 +58,13 @@ var UElement = class extends HTMLElement {
     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();
@@ -45,11 +102,11 @@ button {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  transition: background-color .15s, opacity .15s;
+  transition: background-color .15s, opacity .15s, box-shadow .15s;
   outline: none;
 }
 button:focus-visible {
-  box-shadow: 0 0 0 2px rgba(59,130,246,.5);
+  box-shadow: 0 0 0 2px #3b82f6;
 }
 button:disabled {
   opacity: .5;
@@ -58,7 +115,7 @@ button:disabled {
 .btn-primary {
   background: #3b82f6;
   color: #fff;
-  border-color: #3b82f6;
+  border-color: #2563eb;
 }
 .btn-primary:hover:not(:disabled) {
   background: #2563eb;
@@ -66,7 +123,7 @@ button:disabled {
 .btn-secondary {
   background: #f3f4f6;
   color: #374151;
-  border-color: #d1d5db;
+  border-color: #9ca3af;
 }
 .btn-secondary:hover:not(:disabled) {
   background: #e5e7eb;
@@ -92,7 +149,7 @@ button:disabled {
 .btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
 .btn-link {
   background: transparent;
-  color: #3b82f6;
+  color: #2563eb;
   border-color: transparent;
   padding: 0;
   height: auto;
@@ -136,14 +193,14 @@ input {
   color: #111827;
   transition: border-color .15s;
 }
-input::placeholder { color: #9ca3af; }
+input::placeholder { color: #4b5563; }
 input:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 input:disabled {
   background: #f9fafb;
-  color: #9ca3af;
+  color: #4b5563;
   cursor: not-allowed;
 }
 `;
@@ -168,7 +225,7 @@ ul, ol {
 .list-empty {
   padding: 24px;
   text-align: center;
-  color: #6b7280;
+  color: #4b5563;
 }
 `;
 
@@ -209,10 +266,10 @@ var textStyles = `
 .text-semibold { font-weight: 600; }
 .text-bold { font-weight: 700; }
 .text-default { color: inherit; }
-.text-muted { color: #6b7280; }
-.text-accent { color: #3b82f6; }
+.text-muted { color: #4b5563; }
+.text-accent { color: #2563eb; }
 .text-danger { color: #ef4444; }
-.text-success { color: #22c55e; }
+.text-success { color: #16a34a; }
 .text-left { text-align: left; }
 .text-center { text-align: center; }
 .text-right { text-align: right; }
@@ -298,7 +355,7 @@ var fieldStyles = `
 }
 .field-hint {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: #4b5563;
 }
 .field-error {
   font-size: 0.75rem;
@@ -321,6 +378,7 @@ var checkboxStyles = `
   gap: 8px;
   cursor: pointer;
 }
+:host(:focus-visible) .checkbox-indicator { outline: 2px solid #3b82f6; outline-offset: 2px; }
 input {
   position: absolute;
   opacity: 0;
@@ -334,7 +392,7 @@ input {
   justify-content: center;
   width: 18px;
   height: 18px;
-  border: 2px solid #d1d5db;
+  border: 2px solid #9ca3af;
   border-radius: 4px;
   transition: all .15s;
   flex-shrink: 0;
@@ -342,7 +400,7 @@ input {
 }
 .checkbox-indicator.checked {
   background: #3b82f6;
-  border-color: #3b82f6;
+  border-color: #2563eb;
   color: #fff;
 }
 .checkbox-indicator svg {
@@ -391,19 +449,19 @@ var selectStyles = `
   cursor: pointer;
 }
 .select:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 .select:disabled {
   background: #f9fafb;
-  color: #9ca3af;
+  color: #4b5563;
   cursor: not-allowed;
 }
 .select-arrow {
   position: absolute;
   right: 8px;
   pointer-events: none;
-  color: #6b7280;
+  color: #4b5563;
   display: flex;
   align-items: center;
 }
@@ -427,18 +485,18 @@ var linkStyles = `
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
-.link-default { color: #3b82f6; }
+.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: #6b7280; }
+.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: #9ca3af !important;
+  color: #4b5563 !important;
   cursor: not-allowed;
   pointer-events: none;
   text-decoration: none !important;
@@ -530,14 +588,14 @@ textarea {
   resize: vertical;
   min-height: 60px;
 }
-textarea::placeholder { color: #9ca3af; }
+textarea::placeholder { color: #4b5563; }
 textarea:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 textarea:disabled {
   background: #f9fafb;
-  color: #9ca3af;
+  color: #4b5563;
   cursor: not-allowed;
 }
 `;
@@ -558,6 +616,7 @@ var radioStyles = `
   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;
@@ -571,14 +630,14 @@ input[type="radio"] {
   justify-content: center;
   width: 18px;
   height: 18px;
-  border: 2px solid #d1d5db;
+  border: 2px solid #9ca3af;
   border-radius: 50%;
   transition: all .15s;
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .radio-circle.checked {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   background: #3b82f6;
   box-shadow: inset 0 0 0 3px #fff;
 }
@@ -597,6 +656,7 @@ var switchStyles = `
   display: inline-flex;
   cursor: pointer;
 }
+:host(:focus-visible) .switch-track { outline: 2px solid #3b82f6; outline-offset: 3px; }
 input {
   position: absolute;
   opacity: 0;
@@ -607,7 +667,7 @@ input {
 .switch-track {
   width: 40px;
   height: 22px;
-  background: #d1d5db;
+  background: #9ca3af;
   border-radius: 11px;
   position: relative;
   transition: background .2s;
@@ -674,6 +734,7 @@ var treeStyles = `
   cursor: pointer;
   border-radius: 4px;
 }
+.tree-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
 .tree-row:hover {
   background: #f3f4f6;
 }
@@ -681,8 +742,8 @@ var treeStyles = `
   width: 16px;
   flex-shrink: 0;
   text-align: center;
-  font-size: 10px;
-  color: #6b7280;
+  font-size: 12px;
+  color: #4b5563;
 }
 .tree-toggle-spacer {
   width: 16px;
@@ -725,13 +786,14 @@ var tableStyles = `
   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 #f3f4f6;
-  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+  color: #4b5563;
 }
 .table tr:hover td {
   background: #f9fafb;
@@ -758,12 +820,13 @@ var breadcrumbStyles = `
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #6b7280;
+  color: #4b5563;
 }
 .breadcrumb-item a {
-  color: #3b82f6;
+  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;
 }
@@ -789,37 +852,113 @@ var tabsStyles = `
 [part="tablist"] {
   display: flex;
   gap: 0;
-  border-bottom: 1px solid #e5e7eb;
+  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;
-  border-bottom: 2px solid transparent;
   background: none;
   cursor: pointer;
-  color: #6b7280;
+  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 {
+.tab-trigger:hover:not(:disabled):not(.active) {
   color: #374151;
 }
 .tab-trigger.active {
-  color: #3b82f6;
-  border-bottom-color: #3b82f6;
+  color: #2563eb;
   font-weight: 500;
 }
 .tab-trigger:focus-visible {
-  outline: 2px solid #3b82f6;
-  outline-offset: -2px;
+  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; }
 }
 `;
 
@@ -917,11 +1056,20 @@ 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;
@@ -940,7 +1088,7 @@ var modalStyles = `
   flex-direction: column;
   max-height: 85vh;
   width: 100%;
-  animation: u-scale-in .2s ease;
+  animation: u-modal-scale-in .2s ease;
 }
 .modal-sm { max-width: 400px; }
 .modal-md { max-width: 500px; }
@@ -952,26 +1100,46 @@ var modalStyles = `
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #f3f4f6;
+  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;
-  font-size: 1.5rem;
   cursor: pointer;
-  color: #9ca3af;
-  padding: 0;
+  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-close:hover { color: #374151; }
 .modal-content {
   padding: 20px;
   overflow-y: auto;
   flex: 1;
-  color: #6b7280;
+  color: #374151;
   font-size: 0.875rem;
+  line-height: 1.6;
 }
 .modal-footer {
   display: flex;
@@ -979,7 +1147,11 @@ var modalStyles = `
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 20px;
-  border-top: 1px solid #f3f4f6;
+  border-top: 1px solid #e5e7eb;
+}
+.modal-mobile.modal-wrapper {
+  max-height: calc(100vh - 32px) !important;
+  border-radius: 10px;
 }
 `;
 
@@ -1018,7 +1190,7 @@ var drawerStyles = `
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
   font-weight: 600;
   font-size: 1.125rem;
 }
@@ -1027,13 +1199,14 @@ var drawerStyles = `
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
-  color: #9ca3af;
+  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: #6b7280; font-size: 0.875rem; }
-.drawer-footer { padding: 12px 20px; border-top: 1px solid #f3f4f6; display: flex; gap: 8px; justify-content: flex-end; }
+.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
@@ -1052,7 +1225,7 @@ var popoverStyles = `
 }
 .popover-content {
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   border-radius: 10px;
   padding: 8px;
   font-size: 0.875rem;
@@ -1069,7 +1242,7 @@ var popoverStyles = `
   width: 10px;
   height: 10px;
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   transform: rotate(45deg);
   z-index: -1;
 }
@@ -1092,7 +1265,7 @@ var dropdownStyles = `
   position: fixed;
   z-index: 99999;
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0,0,0,.14);
   padding: 4px;
@@ -1126,10 +1299,10 @@ var dropdownStyles = `
   box-sizing: border-box;
 }
 .dropdown-item:hover { background: #f3f4f6; }
-.dropdown-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
-.dropdown-item.selected { color: #3b82f6; font-weight: 500; background: #eff6ff; }
+.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: #3b82f6; }
+.dropdown-item-active { background: #eff6ff; color: #2563eb; }
 .dropdown-item-icon {
   width: 16px;
   height: 16px;
@@ -1137,7 +1310,7 @@ var dropdownStyles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #9ca3af;
+  color: #4b5563;
 }
 .dropdown-item-icon svg {
   width: 16px;
@@ -1154,13 +1327,13 @@ var dropdownStyles = `
 .dropdown-item-desc {
   display: block;
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: #4b5563;
   line-height: 1.3;
   margin-top: 1px;
 }
 .dropdown-item-shortcut {
-  font-size: 0.7rem;
-  color: #9ca3af;
+  font-size: 0.75rem;
+  color: #4b5563;
   padding: 2px 6px;
   background: #f3f4f6;
   border-radius: 4px;
@@ -1168,9 +1341,9 @@ var dropdownStyles = `
   flex-shrink: 0;
 }
 .dropdown-group-label {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: #9ca3af;
+  color: #4b5563;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 8px 12px 4px;
@@ -1184,12 +1357,12 @@ var accordionStyles = `
   display: block;
 }
 [part="accordion"] {
-  border: 1px solid #e5e7eb;
+  border: 1px solid #9ca3af;
   border-radius: 8px;
   overflow: hidden;
 }
 .accordion-item {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
 }
 .accordion-item:last-child { border-bottom: none; }
 .accordion-header {
@@ -1204,11 +1377,12 @@ var accordionStyles = `
   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: #9ca3af;
+  color: #4b5563;
 }
 .accordion-item[open] .accordion-icon { transform: rotate(180deg); }
 .accordion-content {
@@ -1218,7 +1392,7 @@ var accordionStyles = `
 .accordion-body {
   padding: 0 16px 12px;
   font-size: 0.875rem;
-  color: #6b7280;
+  color: #4b5563;
 }
 `;
 
@@ -1247,7 +1421,7 @@ var calendarStyles = `
 }
 .cal-nav-btn {
   background: none;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #9ca3af;
   border-radius: 6px;
   width: 32px;
   height: 32px;
@@ -1256,9 +1430,10 @@ var calendarStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #6b7280;
+  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;
@@ -1268,7 +1443,7 @@ var calendarStyles = `
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: #4b5563;
   font-weight: 500;
   margin-bottom: 8px;
 }
@@ -1292,9 +1467,10 @@ var calendarStyles = `
   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: #3b82f6; }
+.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; }
@@ -1307,7 +1483,7 @@ var dataTableStyles = `
 }
 .data-table {
   font-size: 0.875rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #9ca3af;
   border-radius: 8px;
   overflow: hidden;
 }
@@ -1316,23 +1492,23 @@ var dataTableStyles = `
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid #9ca3af;
   background: #f9fafb;
 }
 .dt-search-input {
   font-family: inherit;
   font-size: 0.875rem;
   padding: 6px 12px;
-  border: 1px solid #d1d5db;
+  border: 1px solid #9ca3af;
   border-radius: 6px;
   outline: none;
   width: 200px;
 }
 .dt-search-input:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
-.dt-page-info { color: #6b7280; font-size: 0.8rem; }
+.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 {
@@ -1345,30 +1521,32 @@ var dataTableStyles = `
   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 #f3f4f6; color: #6b7280; }
+.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: #9ca3af; padding: 32px; }
+.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 #e5e7eb;
+  border-top: 1px solid #9ca3af;
   background: #f9fafb;
 }
 .dt-page-btn {
   font-family: inherit;
   font-size: 0.8rem;
   padding: 6px 12px;
-  border: 1px solid #d1d5db;
+  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 {
@@ -1380,8 +1558,9 @@ var dataTableStyles = `
   border-radius: 6px;
   background: none;
   cursor: pointer;
-  color: #6b7280;
+  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; }
 `;
@@ -1416,10 +1595,10 @@ var commandPaletteStyles = `
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
   gap: 8px;
 }
-.cp-search-icon { font-size: 1rem; color: #9ca3af; }
+.cp-search-icon { font-size: 1rem; color: #4b5563; }
 .cp-search-input {
   flex: 1;
   border: none;
@@ -1430,11 +1609,11 @@ var commandPaletteStyles = `
   background: none;
 }
 .cp-shortcut-hint {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   padding: 2px 6px;
   background: #f3f4f6;
   border-radius: 4px;
-  color: #9ca3af;
+  color: #4b5563;
   font-family: inherit;
 }
 .cp-results {
@@ -1444,9 +1623,9 @@ var commandPaletteStyles = `
 }
 .cp-group-label {
   padding: 8px 12px 4px;
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: #9ca3af;
+  color: #4b5563;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -1465,25 +1644,26 @@ var commandPaletteStyles = `
   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: #9ca3af; flex: 1; }
+.cp-item-desc { font-size: 0.75rem; color: #4b5563; flex: 1; }
 .cp-item-shortcut {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   padding: 2px 6px;
   background: #f3f4f6;
   border-radius: 4px;
-  color: #9ca3af;
+  color: #4b5563;
   font-family: inherit;
 }
-.cp-empty { padding: 24px; text-align: center; color: #9ca3af; font-size: 0.875rem; }
+.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 #f3f4f6;
-  font-size: 0.7rem;
-  color: #9ca3af;
+  border-top: 1px solid #e5e7eb;
+  font-size: 0.75rem;
+  color: #4b5563;
 }
 `;
 
@@ -1505,7 +1685,7 @@ var comboboxStyles = `
   background: #fff;
 }
 .combobox-input-wrapper:focus-within {
-  border-color: #3b82f6;
+  border-color: #2563eb;
   box-shadow: 0 0 0 2px rgba(59,130,246,.25);
 }
 .combobox-input {
@@ -1524,7 +1704,7 @@ var comboboxStyles = `
   border: none;
   padding: 0 8px;
   cursor: pointer;
-  color: #6b7280;
+  color: #4b5563;
   font-size: 12px;
   display: flex;
   align-items: center;
@@ -1554,9 +1734,9 @@ var comboboxStyles = `
   box-sizing: border-box;
 }
 .combobox-option:hover { background: #f3f4f6; }
-.combobox-option.active { color: #3b82f6; font-weight: 500; }
-.combobox-option:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
-.combobox-empty { padding: 12px; text-align: center; color: #9ca3af; font-size: 0.875rem; }
+.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
@@ -1595,22 +1775,22 @@ var toastStyles = `
   max-width: 400px;
   animation: u-slide-in-right .2s ease;
   background: #fff;
-  border: 1px solid #e5e7eb;
+  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 #22c55e; }
-.toast-warning { border-left: 4px solid #f59e0b; }
+.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: #6b7280; margin-top: 4px; font-size: 0.8rem; }
+.toast-desc { color: #4b5563; margin-top: 4px; font-size: 0.8rem; }
 .toast-action {
   background: none;
   border: none;
-  color: #3b82f6;
+  color: #2563eb;
   cursor: pointer;
   font-weight: 500;
   font-family: inherit;
@@ -1619,17 +1799,19 @@ var toastStyles = `
   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: #9ca3af;
+  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; }
 `;
 
@@ -1646,7 +1828,7 @@ var contextMenuStyles = `
   position: fixed;
   z-index: 99999;
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #d1d5db;
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0,0,0,.14);
   padding: 4px;
@@ -1681,7 +1863,7 @@ var contextMenuStyles = `
   box-sizing: border-box;
 }
 .cm-item:hover { background: #f3f4f6; }
-.cm-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
+.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; }
@@ -1704,6 +1886,7 @@ var sortableStyles = `
   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;
@@ -1725,6 +1908,180 @@ var formStyles = `
 }
 `;
 
-export { UElement, accordionStyles, animateKeyframes, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, 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-PRZASPFU.js.map
-//# sourceMappingURL=chunk-PRZASPFU.js.map
+// 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