@editora/ui-core 0.1.25 → 0.2.0

package/dist/index.esm.js

@@ -2,12 +2,12 @@ import { E as F } from "./ElementBase-BeZT54Hj.mjs";
 import { UICollection as M } from "./collection.esm.js";
 import { U as R, f as B, g as O, m as G, r as V, s as z, a as N } from "./listbox-hMVOhKHC.mjs";
 import { UIRovingFocusGroup as q } from "./roving-focus-group.esm.js";
-import { U as _, f as K, a as W, b as Q, c as J, d as X } from "./tree-B_oQput6.mjs";
+import { U as _, f as K, a as W, b as Q, c as J, d as X } from "./tree-33fVNnaf.mjs";
 import { UITreeItem as Z } from "./tree-item.esm.js";
-import { U as ee } from "./ui-button-Co8Sid6t.mjs";
+import { U as ee } from "./ui-button-C3OmI7Sn.mjs";
 import { UITooltip as te } from "./tooltip.esm.js";
 import { UIDropdown as ae } from "./dropdown.esm.js";
-import { UIInput as se } from "./input.esm.js";
+import { UIInput as ne } from "./input.esm.js";
 import { UIPasswordField as fe } from "./password-field.esm.js";
 import { UIForm as ce } from "./form.esm.js";
 import { UIDescription as le } from "./description.esm.js";
@@ -15,7 +15,7 @@ import { UIFieldError as ue } from "./field-error.esm.js";
 import { UIControlGroup as Ie } from "./control-group.esm.js";
 import { UIFieldset as ge } from "./fieldset.esm.js";
 import { UIPopover as he } from "./popover.esm.js";
-import { UITabs as ve } from "./tabs.esm.js";
+import { UITabs as Te } from "./tabs.esm.js";
 import { UIMenu as Pe } from "./menu.esm.js";
 import { U as Ae, c as De, g as ke, a as we, h as Ce, r as Fe, u as Ee } from "./ui-icon-DLhB08Fo.mjs";
 import { UIToast as Le } from "./toast.esm.js";
@@ -31,7 +31,7 @@ import { UIRadio as Ze } from "./radio.esm.js";
 import { UIRadioGroup as eo } from "./radio-group.esm.js";
 import { UISwitch as to } from "./switch.esm.js";
 import { UISlider as ao } from "./slider.esm.js";
-import { UISelect as so } from "./select.esm.js";
+import { UISelect as no } from "./select.esm.js";
 import { UIToggle as fo } from "./toggle.esm.js";
 import { UIToggleGroup as co } from "./toggle-group.esm.js";
 import { UIAlertDialog as lo } from "./alert-dialog.esm.js";
@@ -39,7 +39,7 @@ import { UIAspectRatio as xo } from "./aspect-ratio.esm.js";
 import { UIAvatar as Uo } from "./avatar.esm.js";
 import { UIBadge as bo } from "./badge.esm.js";
 import { UITable as yo } from "./table.esm.js";
-import { UINavigationMenu as To } from "./navigation-menu.esm.js";
+import { UINavigationMenu as vo } from "./navigation-menu.esm.js";
 import { UIMenubar as So } from "./menubar.esm.js";
 import { UIContextMenu as Do } from "./context-menu.esm.js";
 import { UIPresence as wo } from "./presence.esm.js";
@@ -57,7 +57,7 @@ import { UIAppHeader as Yo } from "./app-header.esm.js";
 import { UIDrawer as $o } from "./drawer.esm.js";
 import { UIDialog as ot } from "./dialog.esm.js";
 import { UILayout as rt } from "./layout.esm.js";
-import { UIBlockControls as nt } from "./block-controls.esm.js";
+import { UIBlockControls as st } from "./block-controls.esm.js";
 import { UIPluginPanel as it } from "./plugin-panel.esm.js";
 import { UIFloatingToolbar as mt } from "./floating-toolbar.esm.js";
 import { UISelectionPopup as pt } from "./selection-popup.esm.js";
@@ -66,7 +66,7 @@ import { UICommandPalette as xt } from "./command-palette.esm.js";
 import { UITextarea as Ut } from "./textarea.esm.js";
 import { UIField as bt } from "./field.esm.js";
 import { UINumberField as yt } from "./number-field.esm.js";
-import { UITagsInput as Tt } from "./tags-input.esm.js";
+import { UITagsInput as vt } from "./tags-input.esm.js";
 import { UIOtpInput as St, UIPinInput as At } from "./pin-input.esm.js";
 import { UIFileUpload as kt } from "./file-upload.esm.js";
 import { UIDropzone as Ct } from "./dropzone.esm.js";
@@ -83,7 +83,7 @@ import { UIDismissableLayer as Zt } from "./dismissable-layer.esm.js";
 import { UIFocusScope as er } from "./focus-scope.esm.js";
 import { UIPositioner as tr } from "./positioner.esm.js";
 import { UIAnchor as ar } from "./anchor.esm.js";
-import { UIAlert as sr } from "./alert.esm.js";
+import { UIAlert as nr } from "./alert.esm.js";
 import { UIMarquee as fr } from "./marquee.esm.js";
 import { UIAnimatedText as cr } from "./animated-text.esm.js";
 import { UISpinningText as lr } from "./spinning-text.esm.js";
@@ -91,13 +91,13 @@ import { UINumberTicker as ur } from "./number-ticker.esm.js";
 import { UIAnimatedList as Ir } from "./animated-list.esm.js";
 import { UIAnimatedBeam as gr } from "./animated-beam.esm.js";
 import { UIIconCloud as hr } from "./icon-cloud.esm.js";
-import { UIDock as vr } from "./dock.esm.js";
+import { UIDock as Tr } from "./dock.esm.js";
 import { UISkeleton as Pr } from "./skeleton.esm.js";
 import { UIEmptyState as Ar } from "./empty-state.esm.js";
 import { UIDataTable as kr } from "./data-table.esm.js";
 import { UIChart as Cr } from "./chart.esm.js";
 import { UITimeline as Er } from "./timeline.esm.js";
-import { U as Lr } from "./calendar-B3PUKHQm.mjs";
+import { U as Lr } from "./calendar-DmxiZrR7.mjs";
 import { UIColorPicker as Br } from "./color-picker.esm.js";
 import { UIDatePicker as Gr } from "./date-picker.esm.js";
 import { UIDateRangePicker as zr } from "./date-range-picker.esm.js";
@@ -110,7 +110,7 @@ import { UIGantt as Zr } from "./gantt.esm.js";
 import { UIStepper as ea } from "./stepper.esm.js";
 import { UIWizard as ta } from "./wizard.esm.js";
 import { UIQuickActions as aa } from "./quick-actions.esm.js";
-import { UIRating as sa } from "./rating.esm.js";
+import { UIRating as na } from "./rating.esm.js";
 import { UIOdometer as fa } from "./odometer.esm.js";
 import { UIBox as ca } from "./box.esm.js";
 import { UIFlex as la } from "./flex.esm.js";
@@ -118,17 +118,17 @@ import { UIGrid as ua } from "./grid.esm.js";
 import { UIPlacementGrid as Ia } from "./placement-grid.esm.js";
 import { UIMasonryGrid as ga } from "./masonry-grid.esm.js";
 import { UISection as ha } from "./section.esm.js";
-import { UIContainer as va } from "./container.esm.js";
-import { A as Pa, D as Sa, a as Aa, b as Da, c as ka, d as wa, e as Ca, f as Fa, g as Ea, h as Ma, i as La, j as Ra, k as Ba, l as Oa, m as Ga, n as Va, o as za, p as Na, r as ja, q as qa, s as Ha, w as _a } from "./runtime-CFnK53iC.mjs";
-import { a as Wa, c as Qa, b as Ja, s as Xa } from "./portal-bR42gHvG.mjs";
-import { O as Za } from "./overlayManager-BJjU1VA8.mjs";
-import { a as en, g as on, r as tn } from "./scroll-lock-LfqXXqsu.mjs";
-import { c as an } from "./dismissable-layer-BmPIoK80.mjs";
-import { c as sn } from "./focus-scope-CmEsG5UZ.mjs";
-import { b as mn, d as cn, a as pn, c as ln, e as dn, f as un, g as xn, h as In, i as Un, j as gn, k as bn, o as hn, s as yn, l as vn } from "./positioner-D0VGxtYU.mjs";
-import { f as Pn, a as Sn, b as An, c as Dn, d as kn, n as wn } from "./collection-C7URGjEI.mjs";
-import { f as Fn, g as En, m as Mn, r as Ln, s as Rn } from "./roving-focus-group-Dbm1Jko_.mjs";
-import { UIOrbiter as On } from "./orbiter.esm.js";
+import { UIContainer as Ta } from "./container.esm.js";
+import { A as Pa, D as Sa, a as Aa, b as Da, c as ka, d as wa, e as Ca, f as Fa, g as Ea, h as Ma, i as La, j as Ra, k as Ba, l as Oa, m as Ga, n as Va, o as za, p as Na, q as ja, r as qa, s as Ha, t as _a, u as Ka, v as Wa, w as Qa, x as Ja } from "./runtime-CQM6wZOc.mjs";
+import { a as Ya, c as Za, b as $a, s as es } from "./portal-DeaM1tYY.mjs";
+import { O as ts } from "./overlayManager-BJjU1VA8.mjs";
+import { a as as, g as ss, r as ns } from "./scroll-lock-LfqXXqsu.mjs";
+import { c as fs } from "./dismissable-layer-BmPIoK80.mjs";
+import { c as cs } from "./focus-scope-CmEsG5UZ.mjs";
+import { b as ls, d as ds, a as us, c as xs, e as Is, f as Us, g as gs, h as bs, i as hs, j as ys, k as Ts, o as vs, s as Ps, l as Ss } from "./positioner-BE8Nbho2.mjs";
+import { f as Ds, a as ks, b as ws, c as Cs, d as Fs, n as Es } from "./collection-C7URGjEI.mjs";
+import { f as Ls, g as Rs, m as Bs, r as Os, s as Gs } from "./roving-focus-group-Dbm1Jko_.mjs";
+import { UIOrbiter as zs } from "./orbiter.esm.js";
 const m = [], l = /* @__PURE__ */ new WeakMap();
 class h {
   constructor(o) {
@@ -241,9 +241,9 @@ function D(e, o = {}) {
     }
   };
 }
-const v = {
+const T = {
   trap(e) {
-    const o = 'a[href], area[href], input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, [tabindex]:not([tabindex="-1"])', t = v.__activeTraps ||= [], r = /* @__PURE__ */ Symbol("focus-trap"), i = document.activeElement;
+    const o = 'a[href], area[href], input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, [tabindex]:not([tabindex="-1"])', t = T.__activeTraps ||= [], r = /* @__PURE__ */ Symbol("focus-trap"), i = document.activeElement;
     function c() {
       return Array.from(e.querySelectorAll(o)).filter((a) => !a.hasAttribute("disabled") && a.getAttribute("aria-hidden") !== "true");
     }
@@ -251,20 +251,20 @@ const v = {
       return t.length > 0 && t[t.length - 1]?.id === r;
     }
     function d() {
-      const a = c(), s = a.find((f) => f.hasAttribute("autofocus")) || a[0] || e;
-      s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+      const a = c(), n = a.find((f) => f.hasAttribute("autofocus")) || a[0] || e;
+      n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1");
       try {
-        s.focus();
+        n.focus();
       } catch {
       }
     }
     function x(a) {
       if (!p()) return;
-      const n = document.activeElement;
-      if (!(!n || !e.contains(n)))
+      const s = document.activeElement;
+      if (!(!s || !e.contains(s)))
         if (a.key === "Tab") {
-          const s = c(), f = s[0], u = s[s.length - 1];
-          if (s.length === 0) {
+          const n = c(), f = n[0], u = n[n.length - 1];
+          if (n.length === 0) {
             a.preventDefault(), d();
             return;
           }
@@ -273,12 +273,12 @@ const v = {
     }
     function I(a) {
       if (!p()) return;
-      const n = a.target;
-      n && !e.contains(n) && d();
+      const s = a.target;
+      s && !e.contains(s) && d();
     }
     return t.push({ id: r }), document.addEventListener("keydown", x), document.addEventListener("focusin", I, !0), d(), {
       release() {
-        const a = t.findIndex((n) => n.id === r);
+        const a = t.findIndex((s) => s.id === r);
         a >= 0 && t.splice(a, 1), document.removeEventListener("keydown", x), document.removeEventListener("focusin", I, !0);
         try {
           i && i.focus && i.focus();
@@ -288,9 +288,9 @@ const v = {
     };
   }
 }, b = {};
-function T(e) {
+function v(e) {
   if (!e || !e.name) throw new Error("Plugin must have a name");
-  b[e.name] = e, e.install && e.install({ registerUIPlugin: T });
+  b[e.name] = e, e.install && e.install({ registerUIPlugin: v });
 }
 function k() {
   return Object.values(b);
@@ -299,10 +299,10 @@ export {
   Pa as AlertDialogManager,
   Sa as DialogManager,
   F as ElementBase,
-  v as FocusManager,
-  Za as OverlayManager,
+  T as FocusManager,
+  ts as OverlayManager,
   Qe as UIAccordion,
-  sr as UIAlert,
+  nr as UIAlert,
   lo as UIAlertDialog,
   ar as UIAnchor,
   gr as UIAnimatedBeam,
@@ -312,7 +312,7 @@ export {
   xo as UIAspectRatio,
   Uo as UIAvatar,
   bo as UIBadge,
-  nt as UIBlockControls,
+  st as UIBlockControls,
   ca as UIBox,
   Wo as UIBreadcrumb,
   ee as UIButton,
@@ -326,7 +326,7 @@ export {
   jt as UICombobox,
   dt as UICommand,
   xt as UICommandPalette,
-  va as UIContainer,
+  Ta as UIContainer,
   Do as UIContextMenu,
   Ie as UIControlGroup,
   kr as UIDataTable,
@@ -339,7 +339,7 @@ export {
   ot as UIDialog,
   Ke as UIDirectionProvider,
   Zt as UIDismissableLayer,
-  vr as UIDock,
+  Tr as UIDock,
   $o as UIDrawer,
   ae as UIDropdown,
   Ct as UIDropzone,
@@ -358,7 +358,7 @@ export {
   Ae as UIIcon,
   hr as UIIconCloud,
   zt as UIInlineEdit,
-  se as UIInput,
+  ne as UIInput,
   Be as UILabel,
   rt as UILayout,
   R as UIListbox,
@@ -368,11 +368,11 @@ export {
   So as UIMenubar,
   Mo as UIMeter,
   Et as UIMultiSelect,
-  To as UINavigationMenu,
+  vo as UINavigationMenu,
   yt as UINumberField,
   ur as UINumberTicker,
   fa as UIOdometer,
-  On as UIOrbiter,
+  zs as UIOrbiter,
   St as UIOtpInput,
   Ge as UIPagination,
   Qt as UIPanel,
@@ -389,11 +389,11 @@ export {
   aa as UIQuickActions,
   Ze as UIRadio,
   eo as UIRadioGroup,
-  sa as UIRating,
+  na as UIRating,
   q as UIRovingFocusGroup,
   Ro as UIScrollArea,
   ha as UISection,
-  so as UISelect,
+  no as UISelect,
   pt as UISelectionPopup,
   Oo as UISeparator,
   Jo as UISidebar,
@@ -407,8 +407,8 @@ export {
   ea as UIStepper,
   to as UISwitch,
   yo as UITable,
-  ve as UITabs,
-  Tt as UITagsInput,
+  Te as UITabs,
+  vt as UITagsInput,
   Ut as UITextarea,
   Kr as UITimeField,
   jr as UITimePicker,
@@ -423,83 +423,87 @@ export {
   Z as UITreeItem,
   _o as UIVisuallyHidden,
   ta as UIWizard,
-  en as acquireBodyScrollLock,
+  as as acquireBodyScrollLock,
   Aa as alert,
-  Da as applyTheme,
-  mn as arrowMiddleware,
-  cn as autoPlacementMiddleware,
-  Wa as autoUpdatePosition,
-  pn as autoUpdatePositioner,
-  ka as baselineAccentPalettes,
-  wa as baselineDarkTokens,
-  Ca as baselineLightTokens,
+  Da as applySystemTheme,
+  ka as applyTheme,
+  ls as arrowMiddleware,
+  ds as autoPlacementMiddleware,
+  Ya as autoUpdatePosition,
+  us as autoUpdatePositioner,
+  wa as baselineAccentPalettes,
+  Ca as baselineDarkTokens,
+  Fa as baselineLightTokens,
   De as clearCustomIcons,
-  Qa as computePosition,
-  ln as computePositionState,
+  Za as computePosition,
+  xs as computePositionState,
   A as computed,
-  Fa as confirm,
-  Ea as confirmDialog,
-  Ma as createAlertDialogManager,
-  La as createDialogManager,
-  an as createDismissableLayer,
-  sn as createFocusScope,
-  Ja as createPortalContainer,
-  dn as createPositioner,
+  Ea as confirm,
+  Ma as confirmDialog,
+  La as createAlertDialogManager,
+  Ra as createDialogManager,
+  fs as createDismissableLayer,
+  cs as createFocusScope,
+  $a as createPortalContainer,
+  Is as createPositioner,
   P as createSignal,
-  Ra as createThemeTokens,
-  un as createVirtualPoint,
-  xn as createVirtualRange,
-  In as createVirtualRect,
-  Ba as defaultTokens,
-  Oa as deriveForegroundOnPrimary,
-  Ga as deriveThemeSurfaces,
-  Un as detectPositionerOverflow,
-  Va as dismissAllAlertDialogs,
-  za as dismissAllDialogs,
+  Ba as createThemeTokens,
+  Us as createVirtualPoint,
+  gs as createVirtualRange,
+  bs as createVirtualRect,
+  Oa as defaultTokens,
+  Ga as deriveForegroundOnPrimary,
+  Va as deriveSemanticTokens,
+  za as deriveThemeSurfaces,
+  hs as detectPositionerOverflow,
+  Na as dismissAllAlertDialogs,
+  ja as dismissAllDialogs,
   S as effect,
-  Pn as findFirstEnabledIndex,
-  Sn as findIndexByValue,
-  An as findLastEnabledIndex,
+  Ds as findFirstEnabledIndex,
+  ks as findIndexByValue,
+  ws as findLastEnabledIndex,
   B as findListboxTypeaheadIndex,
-  Dn as findNextEnabledIndex,
+  Cs as findNextEnabledIndex,
   K as findParentTreeRecordIndex,
   W as findTreeRecordIndexById,
   Q as findTreeTypeaheadMatch,
-  kn as findTypeaheadMatch,
+  Fs as findTypeaheadMatch,
   J as flattenTree,
   X as flattenVisibleTree,
-  gn as flipMiddleware,
-  Fn as focusRovingItem,
-  on as getBodyScrollLockCount,
+  ys as flipMiddleware,
+  Ls as focusRovingItem,
+  ss as getBodyScrollLockCount,
   ke as getIcon,
   we as getIconVariant,
   O as getListboxBoundaryIndex,
   k as getRegisteredPlugins,
-  En as getRovingFocusBoundaryIndex,
+  Rs as getRovingFocusBoundaryIndex,
   Ce as hasIcon,
-  bn as hideMiddleware,
+  Ts as hideMiddleware,
   G as moveListboxActiveIndex,
-  Mn as moveRovingFocusIndex,
-  wn as normalizeCollectionText,
+  Bs as moveRovingFocusIndex,
+  Es as normalizeCollectionText,
   _t as normalizePanelLayout,
-  hn as offsetMiddleware,
-  Na as prompt,
-  ja as readableForeground,
+  vs as offsetMiddleware,
+  qa as prompt,
+  Ha as readableForeground,
   Fe as registerIcon,
-  qa as registerThemeHost,
-  T as registerUIPlugin,
-  tn as releaseBodyScrollLock,
+  _a as registerThemeHost,
+  v as registerUIPlugin,
+  ns as releaseBodyScrollLock,
   Kt as resizePanelPair,
   V as resolveListboxActiveIndex,
-  Ln as resolveRovingFocusIndex,
+  Os as resolveRovingFocusIndex,
   z as scrollListboxItemIntoView,
-  yn as shiftMiddleware,
-  Ha as showDialog,
-  Xa as showPortalFor,
+  Ps as shiftMiddleware,
+  Ka as showDialog,
+  es as showPortalFor,
   D as showToast,
-  vn as sizeMiddleware,
+  Ss as sizeMiddleware,
   N as syncActiveDescendant,
-  Rn as syncRovingTabStops,
+  Gs as syncRovingTabStops,
+  Wa as themeToCss,
+  Qa as themeToVariables,
   Ee as unregisterIcon,
-  _a as withAccentPalette
+  Ja as withAccentPalette
 };

package/dist/inline-edit.cjs.js

@@ -2,7 +2,7 @@
   :host {
     --ui-inline-edit-bg: transparent;
     --ui-inline-edit-border: 1px dashed transparent;
-    --ui-inline-edit-radius: 12px;
+    --ui-inline-edit-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-inline-edit-text: var(--ui-color-text, #0f172a);
     --ui-inline-edit-muted: var(--ui-color-muted, #526175);
     --ui-inline-edit-focus: var(--ui-color-focus-ring, #2563eb);
@@ -35,8 +35,8 @@
   }
 
   .display:hover {
-    border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
-    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+    border-color: transparent;
+    background: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
   }
 
   .value {
@@ -55,14 +55,37 @@
   .save-btn,
   .cancel-btn {
     appearance: none;
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    border: 1px solid var(--ui-color-line, #cbd5e1);
     background: var(--ui-inline-edit-surface);
     color: var(--ui-inline-edit-text);
-    border-radius: 10px;
-    min-height: 34px;
-    padding: 0 12px;
+    border-radius: var(--ui-inline-edit-radius);
+    min-height: var(--ui-control-height-1, 24px);
+    padding: 0 10px;
     cursor: pointer;
-    font: 600 12px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 500 13px/1.2 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    transition: background-color 120ms ease, border-color 120ms ease;
+  }
+
+  .edit-btn:hover:not(:disabled),
+  .cancel-btn:hover:not(:disabled) {
+    background: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
+  }
+
+  .save-btn {
+    border-color: transparent;
+    background: var(--ui-color-primary, #2563eb);
+    color: var(--ui-color-foreground-on-primary, #ffffff);
+  }
+
+  .save-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--ui-color-primary, #2563eb) 88%, #000);
+  }
+
+  .edit-btn:focus-visible,
+  .save-btn:focus-visible,
+  .cancel-btn:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline-offset: var(--ui-ring-offset, 1px);
   }
 
   .edit-btn:disabled,
@@ -81,18 +104,23 @@
     width: 100%;
     min-width: 0;
     box-sizing: border-box;
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
-    border-radius: 12px;
+    border: 1px solid var(--ui-color-line, #cbd5e1);
+    border-radius: var(--ui-inline-edit-radius);
     background: var(--ui-inline-edit-surface);
     color: var(--ui-inline-edit-text);
-    padding: 10px 12px;
-    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 6px 10px;
+    font: 400 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     outline: none;
   }
 
+  .field:hover:not(:focus-visible) {
+    border-color: var(--ui-color-line-strong, #94a3b8);
+  }
+
   .field:focus-visible {
-    border-color: color-mix(in srgb, var(--ui-inline-edit-focus) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-inline-edit-focus) 22%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-inline-edit-focus));
+    outline-offset: -1px;
   }
 
   .actions {
@@ -100,19 +128,19 @@
     gap: 8px;
     justify-content: flex-end;
   }
-`;function o(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class c extends h.ElementBase{constructor(){super(...arguments),this._draft="",this._formUnregister=null,this._lastFocusTarget=null}static get observedAttributes(){return["value","placeholder","editing","multiline","disabled","readonly","name"]}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}startEditing(){this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this._lastFocusTarget=document.activeElement||this,this._draft=this.value,this.setAttribute("editing",""),queueMicrotask(()=>{const e=this.root.querySelector(".field");e?.focus(),e?.select?.()}),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!0},bubbles:!0,composed:!0})))}cancelEditing(){this.removeAttribute("editing"),this._draft=this.value,this.dispatchEvent(new CustomEvent("cancel",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}saveEditing(){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;if(this.hasAttribute("required")&&!this._draft.trim()){this.setAttribute("invalid","");return}const e=this.value;this._draft?this.setAttribute("value",this._draft):this.removeAttribute("value"),this.removeAttribute("invalid"),this.removeAttribute("editing"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,previousValue:e,source:"save"},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("save",{detail:{value:this.value,previousValue:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}connectedCallback(){super.connectedCallback(),this._draft=this.value,this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),super.disconnectedCallback()}attributeChangedCallback(e,a,s){a!==s&&(e==="name"&&this.isConnected&&this._registerWithForm(),e==="value"&&!this.hasAttribute("editing")&&(this._draft=s||""),this.isConnected&&this.requestRender())}render(){const e=this.hasAttribute("editing")?this._draft:this.value,a=this.getAttribute("placeholder")||"Add value",s=this.hasAttribute("multiline"),r=this.hasAttribute("editing"),n=!this.value,t=this.hasAttribute("disabled")||this.hasAttribute("readonly");this.setContent(`
+`;function o(d){return d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class c extends h.ElementBase{constructor(){super(...arguments),this._draft="",this._formUnregister=null,this._lastFocusTarget=null}static get observedAttributes(){return["value","placeholder","editing","multiline","disabled","readonly","name"]}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}startEditing(){this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this._lastFocusTarget=document.activeElement||this,this._draft=this.value,this.setAttribute("editing",""),queueMicrotask(()=>{const e=this.root.querySelector(".field");e?.focus(),e?.select?.()}),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!0},bubbles:!0,composed:!0})))}cancelEditing(){this.removeAttribute("editing"),this._draft=this.value,this.dispatchEvent(new CustomEvent("cancel",{detail:{value:this.value},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}saveEditing(){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;if(this.hasAttribute("required")&&!this._draft.trim()){this.setAttribute("invalid","");return}const e=this.value;this._draft?this.setAttribute("value",this._draft):this.removeAttribute("value"),this.removeAttribute("invalid"),this.removeAttribute("editing"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,previousValue:e,source:"save"},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("save",{detail:{value:this.value,previousValue:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("editing-change",{detail:{editing:!1},bubbles:!0,composed:!0})),this._restoreFocus()}connectedCallback(){super.connectedCallback(),this._draft=this.value,this._registerWithForm()}disconnectedCallback(){this._formUnregister&&this._formUnregister(),super.disconnectedCallback()}attributeChangedCallback(e,a,r){a!==r&&(e==="name"&&this.isConnected&&this._registerWithForm(),e==="value"&&!this.hasAttribute("editing")&&(this._draft=r||""),this.isConnected&&this.requestRender())}render(){const e=this.hasAttribute("editing")?this._draft:this.value,a=this.getAttribute("placeholder")||"Add value",r=this.hasAttribute("multiline"),s=this.hasAttribute("editing"),n=!this.value,t=this.hasAttribute("disabled")||this.hasAttribute("readonly");this.setContent(`
       <style>${b}</style>
       <div class="root">
-        <div class="display"${r?" hidden":""}>
+        <div class="display"${s?" hidden":""}>
           <div class="value" data-empty="${n}">${o(n?a:this.value)}</div>
           <button class="edit-btn" type="button"${t?" disabled":""}>Edit</button>
         </div>
-        <div class="editor"${r?"":" hidden"}>
-          ${s?`<textarea class="field" rows="4"${t?" disabled":""}>${o(e)}</textarea>`:`<input class="field" type="text" value="${o(e)}"${t?" disabled":""} />`}
+        <div class="editor"${s?"":" hidden"}>
+          ${r?`<textarea class="field" rows="4"${t?" disabled":""}>${o(e)}</textarea>`:`<input class="field" type="text" value="${o(e)}"${t?" disabled":""} />`}
           <div class="actions">
             <button class="cancel-btn" type="button"${t?" disabled":""}>Cancel</button>
             <button class="save-btn" type="button"${t?" disabled":""}>Save</button>
           </div>
         </div>
       </div>
-    `);const u=this.root.querySelector(".field");u?.addEventListener("input",l=>{this._draft=l.target.value}),u?.addEventListener("keydown",l=>{const i=l;i.key==="Escape"&&(i.preventDefault(),this.cancelEditing()),!s&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing()),(i.metaKey||i.ctrlKey)&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing())}),this.root.querySelector(".edit-btn")?.addEventListener("click",()=>this.startEditing()),this.root.querySelector(".cancel-btn")?.addEventListener("click",()=>this.cancelEditing()),this.root.querySelector(".save-btn")?.addEventListener("click",()=>this.saveEditing())}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");r&&typeof r.registerField=="function"&&n&&(this._formUnregister=r.registerField(n,{name:n,getValue:()=>this.value,setValue:t=>{t==null||t===""?this.removeAttribute("value"):this.setAttribute("value",String(t))}}))}catch{}}_restoreFocus(){const e=this._lastFocusTarget&&this._lastFocusTarget.isConnected?this._lastFocusTarget:this.root.querySelector(".edit-btn");e&&(queueMicrotask(()=>{try{e.focus({preventScroll:!0})}catch{e.focus()}}),this._lastFocusTarget=null)}}typeof customElements<"u"&&!customElements.get("ui-inline-edit")&&customElements.define("ui-inline-edit",c);exports.UIInlineEdit=c;
+    `);const u=this.root.querySelector(".field");u?.addEventListener("input",l=>{this._draft=l.target.value}),u?.addEventListener("keydown",l=>{const i=l;i.key==="Escape"&&(i.preventDefault(),this.cancelEditing()),!r&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing()),(i.metaKey||i.ctrlKey)&&i.key==="Enter"&&(i.preventDefault(),this.saveEditing())}),this.root.querySelector(".edit-btn")?.addEventListener("click",()=>this.startEditing()),this.root.querySelector(".cancel-btn")?.addEventListener("click",()=>this.cancelEditing()),this.root.querySelector(".save-btn")?.addEventListener("click",()=>this.saveEditing())}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),n=this.getAttribute("name");s&&typeof s.registerField=="function"&&n&&(this._formUnregister=s.registerField(n,{name:n,getValue:()=>this.value,setValue:t=>{t==null||t===""?this.removeAttribute("value"):this.setAttribute("value",String(t))}}))}catch{}}_restoreFocus(){const e=this._lastFocusTarget&&this._lastFocusTarget.isConnected?this._lastFocusTarget:this.root.querySelector(".edit-btn");e&&(queueMicrotask(()=>{try{e.focus({preventScroll:!0})}catch{e.focus()}}),this._lastFocusTarget=null)}}typeof customElements<"u"&&!customElements.get("ui-inline-edit")&&customElements.define("ui-inline-edit",c);exports.UIInlineEdit=c;