optikos 0.1.0 → 0.3.0

package/dist/css/panel.css

@@ -19,7 +19,7 @@
     padding: var(--op-panel-header-padding, var(--op-space-2) var(--op-space-3));
     background: var(--op-panel-header-bg, var(--op-color-surface-2));
     color: var(--op-panel-header-fg, var(--op-color-fg));
-    border-block-end: var(--op-border-width) solid var(--op-panel-border, var(--op-color-border));
+    border-block-end: var(--op-border-width) solid var(--op-panel-header-border, var(--op-panel-border, var(--op-color-border-strong)));
     font-weight: var(--op-font-weight-bold);
   }
   .op-panel__title {
@@ -74,4 +74,11 @@
     border-block-end: 0;
     border-block-start: var(--op-border-width) solid var(--op-color-border);
   }
+  /* the ↻ tool turns while the panel reloads */
+  .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: none;
+  }
 }

package/dist/css/stepform.css

@@ -43,4 +43,13 @@
     margin: 0;
     overflow-wrap: anywhere;
   }
+  /* a step's general message (its validate returned a string) */
+  .op-stepform__note {
+    margin-block-end: var(--op-space-3);
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-danger);
+    background: var(--op-color-danger-soft);
+    border-radius: var(--op-radius);
+    font-size: var(--op-font-size-sm);
+  }
 }

package/dist/css/stepper.css

@@ -102,10 +102,15 @@
   .op-stepper__step.is-error .op-stepper__btn {
     color: var(--op-color-danger);
   }
-  /* phones: only the current step keeps its words */
+  /* phones: only the current step shows its words; the others keep them for screen readers (the button's name) */
   @media (max-width: 40rem) {
     .op-stepper__step:not(.is-current) .op-stepper__text {
-      display: none;
+      position: absolute;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
     }
     .op-stepper__step:not(.is-current) {
       flex: none;

package/dist/css/tabs.css

@@ -16,7 +16,7 @@
     display: flex;
     flex: none;
     gap: var(--op-tabs-gap, var(--op-space-1));
-    background: var(--op-tabs-bar-bg, var(--op-color-surface));
+    background: var(--op-tabs-bar-bg, var(--op-color-surface-2));
     border-block-end: var(--op-border-width) solid var(--op-color-border);
     overflow-x: auto;
     overflow-y: hidden;
@@ -57,13 +57,22 @@
     color: var(--op-color-disabled-fg);
     cursor: not-allowed;
   }
-  .op-tabs__close {
+  .op-tabs__close,
+  .op-tabs__reload {
     display: inline-flex;
     border-radius: var(--op-radius-sm);
   }
-  .op-tabs__close:hover {
+  .op-tabs__close:hover,
+  .op-tabs__reload:hover {
     background: var(--op-color-hover);
   }
+  /* the ↻ turns while the tab reloads */
+  .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: none;
+  }
   .op-tabs__panels {
     flex: 1;
     min-width: 0;

package/dist/css/toggle.css

@@ -0,0 +1,39 @@
+@layer optikos {
+  :root {
+    --op-toggle-width: 2.25rem;
+    --op-toggle-height: 1.25rem;
+    --op-toggle-knob-inset: 0.1875rem;
+  }
+  /* the checkbox box becomes a track; its knob is a pseudo-element that slides */
+  .op-toggle .op-checkbox__box {
+    inline-size: var(--op-toggle-width);
+    block-size: var(--op-toggle-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-toggle-track-bg, var(--op-color-border-strong));
+    border-color: transparent;
+    transition: background var(--op-duration) var(--op-easing);
+  }
+  .op-toggle .op-checkbox__box > * {
+    display: none;
+  }
+  .op-toggle .op-checkbox__box::after {
+    content: '';
+    position: absolute;
+    inset-block: var(--op-toggle-knob-inset);
+    inset-inline-start: var(--op-toggle-knob-inset);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--op-toggle-knob-bg, var(--op-color-surface));
+    box-shadow: var(--op-shadow-sm);
+    transition: translate var(--op-duration) var(--op-easing);
+  }
+  .op-toggle.is-checked .op-checkbox__box {
+    background: var(--op-toggle-on-bg, var(--op-color-primary));
+  }
+  .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc(var(--op-toggle-width) - var(--op-toggle-height)) 0;
+  }
+  [dir='rtl'] .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc((var(--op-toggle-width) - var(--op-toggle-height)) * -1) 0;
+  }
+}

package/dist/css/tree.css

@@ -0,0 +1,94 @@
+@layer optikos {
+  :root {
+    --op-tree-indent: 1.25rem;
+    --op-tree-check-size: 1rem;
+    --op-tree-check-icon-size: 0.8em;
+  }
+  .op-tree {
+    display: block;
+    min-inline-size: 0;
+    overflow: auto;
+    color: var(--op-tree-fg, var(--op-color-fg));
+    background: var(--op-tree-bg, transparent);
+  }
+  .op-tree__root,
+  .op-tree__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-tree__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    box-sizing: border-box;
+    min-block-size: var(--op-tree-item-height, var(--op-row-height));
+    padding-inline: var(--op-space-1) var(--op-space-3);
+    padding-inline-start: calc(var(--op-space-1) + var(--_level, 0) * var(--op-tree-indent));
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    user-select: none;
+  }
+  .op-tree__item:hover:not(.is-disabled) {
+    background: var(--op-tree-hover-bg, var(--op-color-hover));
+  }
+  .op-tree__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-tree__item.is-selected {
+    color: var(--op-tree-selected-fg, var(--op-color-fg));
+    background: var(--op-tree-selected-bg, var(--op-color-selected));
+  }
+  .op-tree__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: default;
+  }
+  .op-tree__toggle {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--op-tree-indent);
+    color: var(--op-color-fg-muted);
+  }
+  .op-tree__toggle .op-icon {
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-tree__item.is-expanded > .op-tree__toggle .op-icon {
+    transform: rotate(90deg);
+  }
+  .op-tree__spinner {
+    --op-spinner-size: var(--op-tree-check-size);
+  }
+  .op-tree__check {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-tree-check-size);
+    block-size: var(--op-tree-check-size);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    background: var(--op-color-surface);
+    --op-icon-size: var(--op-tree-check-icon-size);
+  }
+  .op-tree__check.is-checked,
+  .op-tree__check.is-mixed {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-tree__icon {
+    display: inline-flex;
+    color: var(--op-tree-icon-fg, var(--op-color-fg-muted));
+  }
+  .op-tree__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-tree__empty {
+    padding: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+  }
+}

package/dist/css/widget.css

@@ -4,6 +4,8 @@
     --op-widget-height: 26rem;
     --op-widget-wide: 36rem;
     --op-widget-offset: var(--op-space-4);
+    --op-widget-grip: 0.5rem;
+    --op-widget-corner: 1rem;
   }
   .op-widget {
     min-block-size: 0;
@@ -74,4 +76,60 @@
   .op-widget.is-dragging {
     transition: none;
   }
+  /* resize: an invisible strip on the inner edge (a line shows on hover/focus); a corner grip once the widget was moved */
+  .op-widget__resize {
+    position: absolute;
+    z-index: 1;
+    touch-action: none;
+  }
+  .op-widget--right .op-widget__resize,
+  .op-widget--left .op-widget__resize {
+    inset-block: 0;
+    inline-size: var(--op-widget-grip);
+    cursor: ew-resize;
+  }
+  .op-widget--right .op-widget__resize {
+    inset-inline-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--left .op-widget__resize {
+    inset-inline-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--top .op-widget__resize,
+  .op-widget--bottom .op-widget__resize {
+    inset-inline: 0;
+    block-size: var(--op-widget-grip);
+    cursor: ns-resize;
+  }
+  .op-widget--top .op-widget__resize {
+    inset-block-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--bottom .op-widget__resize {
+    inset-block-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget__resize:hover,
+  .op-widget__resize:focus-visible,
+  .op-widget.is-resizing .op-widget__resize {
+    background: linear-gradient(var(--op-color-primary), var(--op-color-primary)) center / var(--op-focus-width) 100% no-repeat;
+    outline: none;
+  }
+  .op-widget--top .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--bottom .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--top.is-resizing .op-widget__resize,
+  .op-widget--bottom.is-resizing .op-widget__resize {
+    background-size: 100% var(--op-focus-width);
+  }
+  .op-widget.is-moved .op-widget__resize {
+    inset: auto 0 0 auto;
+    inline-size: var(--op-widget-corner);
+    block-size: var(--op-widget-corner);
+    background: linear-gradient(135deg, transparent 55%, var(--op-color-border-strong) 55% 62%, transparent 62% 75%, var(--op-color-border-strong) 75% 82%, transparent 82%);
+    cursor: nwse-resize;
+  }
+  .op-widget.is-moved .op-widget__resize:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-widget.is-resizing {
+    transition: none;
+    user-select: none;
+  }
 }

package/dist/css/window.css

@@ -7,6 +7,10 @@
     inset: 0;
     background: var(--op-backdrop-bg, var(--op-color-overlay));
   }
+  /* mask: false — still modal (the page is inert and takes no clicks), just not dimmed */
+  .op-window-backdrop.is-clear {
+    background: transparent;
+  }
   .op-window {
     position: fixed;
     inline-size: var(--op-window-width);

package/dist/data.js

@@ -1,2 +1,2 @@
-import{a as d,b as e}from"./chunk-X2ASKUFD.js";import{a as f,b as g,c as h}from"./chunk-NDBFYIL6.js";import{a,b,c}from"./chunk-JTYWZMSZ.js";import"./chunk-MA5BJL3S.js";import"./chunk-4C666HHU.js";export{d as MemoryProxy,a as Model,e as RestProxy,c as Store,h as cellContent,g as format,b as matchFilter,f as registerFormat};
+import{a as d,b as e}from"./chunk-X2ASKUFD.js";import{a as f,b as g,c as h}from"./chunk-LW2WRUVL.js";import{a,b,c}from"./chunk-OEAXCCVM.js";import"./chunk-MW3RWBZ7.js";import"./chunk-4C666HHU.js";export{d as MemoryProxy,a as Model,e as RestProxy,c as Store,h as cellContent,g as format,b as matchFilter,f as registerFormat};
 //# sourceMappingURL=data.js.map

package/dist/index.js

@@ -1,8 +1,8 @@
-import{a as $o,b as Ao}from"./chunk-OW2ZSMGS.js";import{a as wo,b as Co}from"./chunk-6NJW7QFD.js";import{a as Do}from"./chunk-CN7USUJR.js";import{a as vo}from"./chunk-TBLICXWW.js";import{a as Vo}from"./chunk-A66MDXHL.js";import{a as jo}from"./chunk-GZNQPENR.js";import{a as ko}from"./chunk-HFFK6K4K.js";import{a as Eo}from"./chunk-BIYNHKSA.js";import{a as To}from"./chunk-5AXLYDKU.js";import{a as yo}from"./chunk-IO66A6G5.js";import"./chunk-CEXY5A4T.js";import{a as bo}from"./chunk-YET5PM6F.js";import{a as uo,b as lo,c as go}from"./chunk-TK2RC3T5.js";import{a as ho}from"./chunk-ODWPBBVL.js";import{a as io}from"./chunk-LV6HXFHU.js";import{a as xo}from"./chunk-XVIC24AW.js";import{a as ao}from"./chunk-4Q67QI7J.js";import{a as co}from"./chunk-JZNEB7A7.js";import{a as w}from"./chunk-IW7PK4VS.js";import{a as J,b as K}from"./chunk-X2ASKUFD.js";import"./chunk-X6AULZI4.js";import{a as Ze,b as _e,c as eo,d as oo,e as ro,f as to,g as mo,h as fo,i as po,j as no,k as so}from"./chunk-C3N7QTQB.js";import{a as ve}from"./chunk-ZHVSHDLH.js";import{a as Ye}from"./chunk-JVEPKW5X.js";import{a as Oe}from"./chunk-LEE2FEEL.js";import{a as we}from"./chunk-NV5AIBQP.js";import{a as We}from"./chunk-T4OYVG2X.js";import{a as Be}from"./chunk-CQRHNTEX.js";import{a as Xe}from"./chunk-6O2BXCRN.js";import{a as Le}from"./chunk-DXO3UJKL.js";import{a as Ue}from"./chunk-5Q6Y6CM4.js";import{a as Se}from"./chunk-PSPQH35P.js";import{a as Pe}from"./chunk-XZ5CUZZP.js";import{a as Re}from"./chunk-LBCWEWPN.js";import{a as Me}from"./chunk-666O2GKD.js";import{a as Ae}from"./chunk-QEQIJAAB.js";import{a as He}from"./chunk-4SUKNSCY.js";import{a as De}from"./chunk-Z25NC4CS.js";import{a as $e}from"./chunk-BNPVRIFT.js";import{a as Ce}from"./chunk-O4DCHALR.js";import{a as Qe}from"./chunk-5GNEFX6F.js";import{a as Ve}from"./chunk-ZYUXCZX7.js";import{a as Ee}from"./chunk-U3X2FW6U.js";import{a as ke}from"./chunk-4COBH4QJ.js";import{a as Ge,b as Je,c as Ke,d as Ne}from"./chunk-4DHQKECB.js";import{a as Fe}from"./chunk-NHVEP72K.js";import{a as ze}from"./chunk-ZCAAM4NH.js";import{a as je}from"./chunk-ARCW54L2.js";import{a as be}from"./chunk-SNTHW4K2.js";import{a as qe}from"./chunk-LMGCV35W.js";import{a as k,b as E,c as $}from"./chunk-UPOBGNJ5.js";import{i as q}from"./chunk-NWTTHDIM.js";import{a as P,b as S}from"./chunk-OWEQT2HN.js";import{a as H,b as L}from"./chunk-CUPAPOKC.js";import{a as C,b as D,c as B}from"./chunk-676AKAGF.js";import{a as M,b as R,c as I}from"./chunk-VV7CFMPZ.js";import{a as A}from"./chunk-K2DGY6MP.js";import{a as N,b as O,c as Q}from"./chunk-NDBFYIL6.js";import{a as z,b as F,c as G}from"./chunk-JTYWZMSZ.js";import{a as pe,b as ne,c as se,d as ie,e as xe,f as ae,g as de,h as ce,i as ue,j as le}from"./chunk-6NCXO5ZP.js";import{a as Ie}from"./chunk-XZEOSW3Q.js";import{a as Y,b as Z,c as _,d as ee,e as oe,f as re,g as te,h as me,i as fe}from"./chunk-4AA4FQEM.js";import{a as U,b as W,c as X}from"./chunk-2UPUC4RK.js";import{a as ge,b as he,c as ye,d as Te}from"./chunk-IHAYOSBR.js";import{a as b,b as v,c as V,d as j}from"./chunk-IYPKPLCU.js";import{a,b as d,c,d as m,e as u,f as l}from"./chunk-PZSHOSOS.js";import{a as x,b as g,c as h,d as y,e as T}from"./chunk-MA5BJL3S.js";import"./chunk-4C666HHU.js";function s(r,t="custom"){let f=[];for(let o in r){let e=r[o];for(let n in e)f.push(`    --op-${m(o)}-${m(n)}: ${e[n]};`)}let p=`@layer optikos {
+import{a as Gr,b as Jr}from"./chunk-IHE2MQ3W.js";import{a as Kr,b as Nr}from"./chunk-SA53QUBF.js";import{a as Or}from"./chunk-5BC72727.js";import{a as Sr}from"./chunk-Q26YZYTD.js";import{a as qr}from"./chunk-GD5JGKM7.js";import{a as zr}from"./chunk-CKXS375P.js";import{a as Fr}from"./chunk-4SYIIX5A.js";import{a as Lr}from"./chunk-5QUY72FX.js";import{a as Rr}from"./chunk-WFGTQZIQ.js";import{a as Mr}from"./chunk-JOFQJGZK.js";import"./chunk-ELYARUCN.js";import{a as Ir}from"./chunk-REW4LR46.js";import{a as Pr}from"./chunk-TOLTUOZS.js";import{a as wr}from"./chunk-RNN55473.js";import{a as Cr}from"./chunk-LBJSMXLV.js";import{a as Dr}from"./chunk-3S24ZRPK.js";import{a as Br}from"./chunk-YBAYEU25.js";import{a as Hr}from"./chunk-HOF4JGMQ.js";import{a as $r}from"./chunk-JBLRAM7Z.js";import{a as jr}from"./chunk-DBMWS3O5.js";import{a as Vr,b as Er,c as kr}from"./chunk-UXXJOU5J.js";import{a as Ar}from"./chunk-5DJTP53N.js";import{a as lr}from"./chunk-ZPPELYNJ.js";import{a as gr,b as hr}from"./chunk-XX2MVWFS.js";import{a as yr}from"./chunk-FEHGU6EP.js";import{a as Tr}from"./chunk-KCEUD232.js";import{a as br}from"./chunk-M242VYZA.js";import{a as vr}from"./chunk-2YZB6XQR.js";import{a as C}from"./chunk-GZ7X34QP.js";import{a as K,b as N}from"./chunk-X2ASKUFD.js";import"./chunk-X6AULZI4.js";import{a as tr,b as mr,c as pr,d as fr,e as nr,f as xr,g as ir,h as sr,i as ar,j as cr,k as ur}from"./chunk-4EQEHJB3.js";import{a as Do}from"./chunk-HXDTGP2K.js";import{a as er}from"./chunk-VU3GIDZ3.js";import{a as Ho}from"./chunk-6VBK2I5B.js";import{a as _o}from"./chunk-NXSTUFS7.js";import{a as Ro}from"./chunk-G2KUK6AT.js";import{a as or}from"./chunk-Z2Z52GFT.js";import{a as jo}from"./chunk-XHOBNSBO.js";import{a as Co}from"./chunk-I4SP6JTU.js";import{a as Bo}from"./chunk-OGRFQTXA.js";import{a as Io}from"./chunk-JI265XFO.js";import{a as wo}from"./chunk-EDUMAMK4.js";import{a as rr}from"./chunk-JK74QK3M.js";import{a as Xo}from"./chunk-UB5RYS7T.js";import{a as Po}from"./chunk-TZOQWCVH.js";import{a as Mo}from"./chunk-EV73ADN2.js";import{a as Lo}from"./chunk-5Q76ACVI.js";import{a as Oo,b as Qo,c as Uo,d as Wo}from"./chunk-EJGWCKE4.js";import{a as No}from"./chunk-YF75HKL6.js";import{a as Zo}from"./chunk-KLLAY2IM.js";import{a as Go}from"./chunk-4LZZ244E.js";import{a as Fo}from"./chunk-LQRFNQ2N.js";import"./chunk-XYZ6VZ5T.js";import{a as qo}from"./chunk-GNU4VOOE.js";import{a as So}from"./chunk-23XLG2EM.js";import{a as Yo}from"./chunk-YHEMA56R.js";import{a as Jo}from"./chunk-ZVK4L5GK.js";import{a as Vo}from"./chunk-7KMIFXHZ.js";import{a as Ao}from"./chunk-3TAW4AKH.js";import{a as Ko}from"./chunk-W2BAFOCN.js";import{a as Eo}from"./chunk-Z2JBUHKA.js";import{a as $o}from"./chunk-W3H7GTJY.js";import{a as ko}from"./chunk-G2DAD3MQ.js";import{a as S,b as q}from"./chunk-OWEQT2HN.js";import{a as E,b as k,c as A}from"./chunk-ZWNQREWS.js";import{a as L,b as M}from"./chunk-E4VNLYO2.js";import{a as D,b as B,c as H}from"./chunk-676AKAGF.js";import{a as R,b as I,c as P}from"./chunk-VV7CFMPZ.js";import{a as w}from"./chunk-2ZRNGG2N.js";import{i as z}from"./chunk-5JEXM5S7.js";import{a as O,b as Q,c as U}from"./chunk-LW2WRUVL.js";import{a as F,b as G,c as J}from"./chunk-OEAXCCVM.js";import{a as no,b as xo,c as io,d as so,e as ao,f as co,g as uo,h as lo,i as go,j as ho}from"./chunk-6NCXO5ZP.js";import{a as dr}from"./chunk-MB3MU6HR.js";import{a as zo}from"./chunk-2ZUZ5HDL.js";import{a as Z,b as _,c as oo,d as ro,e as eo,f as to,g as mo,h as po,i as fo}from"./chunk-4AA4FQEM.js";import{a as W,b as X,c as Y}from"./chunk-2UPUC4RK.js";import{a as yo,b as To,c as bo,d as vo}from"./chunk-4EZJ5FKJ.js";import{a as v}from"./chunk-A2NKDOYN.js";import{a,b as c,c as u,d as m,e as d,f as l}from"./chunk-PZSHOSOS.js";import{a as $,b as j,c as V}from"./chunk-TIPK3SCJ.js";import{a as s,b as g,c as h,d as y,e as T,f as b}from"./chunk-MW3RWBZ7.js";import"./chunk-4C666HHU.js";function x(e,t="custom"){let p=[];for(let r in e){let o=e[r];if(o!=null)if(typeof o!="object")p.push(`    --op-${m(r)}: ${o};`);else for(let n in o)p.push(`    --op-${m(r)}-${m(n)}: ${o[n]};`)}let f=`@layer optikos {
   [data-op-theme~='${t}'] {
-${f.join(`
+${p.join(`
 `)}
   }
 }
-`;return{name:t,css:p,inject(){let o=`op-theme-${t}`,e=document.getElementById(o);e||(e=document.createElement("style"),e.id=o,document.head.appendChild(e)),e.textContent=p},apply(o=document.documentElement){this.inject();let e=new Set((o.getAttribute("data-op-theme")??"").split(/\s+/).filter(Boolean));e.add(t),o.setAttribute("data-op-theme",[...e].join(" "))}}}function i(r,t=document.documentElement){t.setAttribute("data-op-theme",Array.isArray(r)?r.join(" "):r)}export{Vo as Breadcrumb,Ie as Button,ke as Calendar,io as Chat,Ae as Checkbox,He as ComboBox,Eo as CommandPalette,b as Component,$ as Container,U as DEFAULTS,xo as DataView,Ee as DateField,$e as DateRangeField,oo as Direction,je as Dropdown,x as Emitter,A as Field,bo as FieldSet,ao as FilterBuilder,Ye as Form,Fe as Grid,Te as Icon,Qe as Label,eo as LabelPos,mo as LayoutKind,Ce as ListBox,Oe as LookupField,J as MemoryProxy,ze as Menu,Ue as MessageBox,z as Model,jo as NavMenu,Ve as NumberField,no as Op,qe as Pagination,Pe as Panel,De as PickerField,we as RadioGroup,ro as Region,K as RestProxy,Ne as SearchGrid,We as SecretField,Be as Select,fo as Selection,to as Side,Xe as Slider,Me as Spacer,ho as Spinner,To as StepForm,yo as Stepper,G as Store,Le as SuggestField,co as Table,ko as Tabs,ve as TextArea,be as TextField,so as ThemeName,$o as Toast,po as ToastType,Re as Toolbar,wo as Tooltip,_e as Variant,go as ViewManager,vo as Viewport,Do as Widget,Se as Window,pe as arcPoints,Co as attachTooltip,a as attr,Q as cellContent,l as clamp,j as create,E as createLayout,q as date,s as defineTheme,ae as dragKnob,me as enter,fe as exit,M as focusables,O as format,y as getLocale,V as getType,d as h,he as hasIcon,ye as iconEl,W as isBouncy,m as kebab,xe as knobStretch,C as layer,le as layoutId,uo as localViewStorage,g as locales,B as lockModal,Ke as lookupStore,F as matchFilter,S as measure,X as motion,ne as moveArc,Y as originFor,H as place,Z as popIn,_ as popOut,te as pulse,u as px,v as register,N as registerFormat,ge as registerIcons,k as registerLayout,Ge as registerLookup,Je as resolveLookup,lo as restViewStorage,ce as reveal,I as roving,se as rubberBand,ie as rubberScroll,h as setLocale,i as setTheme,oe as stagger,ee as staggerDelay,re as staggerDetails,de as swap,T as t,D as toLayer,Ao as toast,L as track,R as trapFocus,Ze as ui,c as uid,w as validators,P as virtualize,ue as wipeColor};
+`;return{name:t,css:f,inject(){let r=`op-theme-${t}`,o=document.getElementById(r);o||(o=document.createElement("style"),o.id=r,document.head.appendChild(o)),o.textContent=f},apply(r=document.documentElement){this.inject();let o=new Set((r.getAttribute("data-op-theme")??"").split(/\s+/).filter(Boolean));o.add(t),r.setAttribute("data-op-theme",[...o].join(" "))}}}function i(e,t=document.documentElement){t.setAttribute("data-op-theme",Array.isArray(e)?e.join(" "):e)}export{dr as Badge,Sr as Breadcrumb,zo as Button,ko as Calendar,yr as Chat,Co as Checkbox,Bo as CheckboxGroup,lr as Chip,hr as CodeViewer,Io as ComboBox,Fr as CommandPalette,v as Component,A as Container,W as DEFAULTS,br as DataView,Ao as DateField,wo as DateRangeField,rr as Dial,fr as Direction,Eo as Dropdown,s as Emitter,w as Field,wr as FieldGroup,Cr as FieldList,Ir as FieldSet,vr as FilterBuilder,er as Form,Dr as FormActions,Br as FormErrors,Hr as FormSection,No as Grid,vo as Icon,Lr as InputGroup,Yo as Label,pr as LabelPos,ir as LayoutKind,Lo as ListBox,Xo as LookupField,K as MemoryProxy,Ko as Menu,Zo as MessageBox,F as Model,qr as NavMenu,Vo as NumberField,cr as Op,Jo as Pagination,Fo as Panel,Mo as PickerField,Ho as RadioGroup,nr as Region,N as RestProxy,Wo as SearchGrid,_o as SecretField,Ro as Select,sr as Selection,xr as Side,or as Slider,So as Spacer,Ar as Spinner,Rr as StepForm,Mr as Stepper,J as Store,Po as SuggestField,$r as Table,zr as Tabs,jo as TextArea,$o as TextField,ur as ThemeName,Gr as Toast,ar as ToastType,Do as Toggle,qo as Toolbar,Kr as Tooltip,jr as Tree,mr as Variant,kr as ViewManager,Pr as Viewport,Or as Widget,Go as Window,T as addMessages,no as arcPoints,Nr as attachTooltip,a as attr,U as cellContent,Tr as cellEditing,l as clamp,V as create,k as createLayout,z as date,x as defineTheme,co as dragKnob,po as enter,fo as exit,R as focusables,Q as format,y as getLocale,j as getType,c as h,To as hasIcon,bo as iconEl,X as isBouncy,m as kebab,ao as knobStretch,D as layer,ho as layoutId,Vr as localViewStorage,g as locales,H as lockModal,Uo as lookupStore,G as matchFilter,q as measure,Y as motion,xo as moveArc,Z as originFor,L as place,_ as popIn,oo as popOut,mo as pulse,d as px,$ as register,O as registerFormat,yo as registerIcons,E as registerLayout,Oo as registerLookup,Qo as resolveLookup,Er as restViewStorage,lo as reveal,P as roving,io as rubberBand,so as rubberScroll,h as setLocale,i as setTheme,eo as stagger,ro as staggerDelay,to as staggerDetails,uo as swap,b as t,B as toLayer,Jr as toast,gr as tokenize,M as track,I as trapFocus,tr as ui,u as uid,C as validators,S as virtualize,go as wipeColor};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/themes/define.ts"],
-  "sourcesContent": ["import { kebab } from '../core/dom';\n\ntype Values = Record<string, string | number | undefined>;\ntype ColorToken = 'bg' | 'surface' | 'surface-2' | 'fg' | 'fg-muted' | 'border' | 'border-strong' | 'hover' | 'selected' | 'primary' | 'primary-hover' | 'primary-fg' | 'primary-soft' | 'danger' | 'danger-hover' | 'danger-fg' | 'danger-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'info' | 'info-soft' | 'focus' | 'overlay';\n\nexport interface ThemeDefinition {\n  /** Semantic colors: `{ primary: '#06f' }` \u2192 `--op-color-primary`. camelCase keys are kebab-cased. */\n  color?: Partial<Record<ColorToken | string, string>>;\n  font?: Values;\n  space?: Values;\n  radius?: Values;\n  shadow?: Values;\n  control?: Values;\n  /** Any other key is a component scope: `{ button: { radius: 0 } }` \u2192 `--op-button-radius`. */\n  [group: string]: Values | undefined;\n}\n\nexport interface Theme {\n  name: string;\n  /** CSS text, scoped to `[data-op-theme~=\"name\"]`, inside `@layer optikos`. */\n  css: string;\n  /** Injects the CSS once without activating it (e.g. to offer it in a theme picker). */\n  inject(): void;\n  /** Injects the CSS and activates the theme on `el` (default: `<html>`), keeping other themes (`\"dark custom\"`). */\n  apply(el?: HTMLElement): void;\n}\n\n/**\n * Typed, proprietary theme format. Produces the same custom properties a hand-written CSS theme would.\n * Numbers are emitted unitless; write units as strings (`'4px'`).\n */\nexport function defineTheme(def: ThemeDefinition, name = 'custom'): Theme {\n  const lines: string[] = [];\n  for (const group in def) {\n    const values = def[group];\n    for (const key in values) lines.push(`    --op-${kebab(group)}-${kebab(key)}: ${values[key as keyof typeof values]};`);\n  }\n  const css = `@layer optikos {\\n  [data-op-theme~='${name}'] {\\n${lines.join('\\n')}\\n  }\\n}\\n`;\n  return {\n    name,\n    css,\n    inject() {\n      const id = `op-theme-${name}`;\n      let style = document.getElementById(id);\n      if (!style) {\n        style = document.createElement('style');\n        style.id = id;\n        document.head.appendChild(style);\n      }\n      style.textContent = css;\n    },\n    apply(el = document.documentElement) {\n      this.inject();\n      const names = new Set((el.getAttribute('data-op-theme') ?? '').split(/\\s+/).filter(Boolean));\n      names.add(name);\n      el.setAttribute('data-op-theme', [...names].join(' '));\n    },\n  };\n}\n\n/** Activates themes on an element (default `<html>`): `setTheme('dark compact')` or `setTheme(['dark', 'custom'])`. */\nexport function setTheme(names: string | string[], el: HTMLElement = document.documentElement): void {\n  el.setAttribute('data-op-theme', Array.isArray(names) ? names.join(' ') : names);\n}\n"],
-  "mappings": "soGA+BO,SAASA,EAAYC,EAAsBC,EAAO,SAAiB,CACxE,IAAMC,EAAkB,CAAC,EACzB,QAAWC,KAASH,EAAK,CACvB,IAAMI,EAASJ,EAAIG,CAAK,EACxB,QAAWE,KAAOD,EAAQF,EAAM,KAAK,YAAYI,EAAMH,CAAK,CAAC,IAAIG,EAAMD,CAAG,CAAC,KAAKD,EAAOC,CAA0B,CAAC,GAAG,CACvH,CACA,IAAME,EAAM;AAAA,qBAAwCN,CAAI;AAAA,EAASC,EAAM,KAAK;AAAA,CAAI,CAAC;AAAA;AAAA;AAAA,EACjF,MAAO,CACL,KAAAD,EACA,IAAAM,EACA,QAAS,CACP,IAAMC,EAAK,YAAYP,CAAI,GACvBQ,EAAQ,SAAS,eAAeD,CAAE,EACjCC,IACHA,EAAQ,SAAS,cAAc,OAAO,EACtCA,EAAM,GAAKD,EACX,SAAS,KAAK,YAAYC,CAAK,GAEjCA,EAAM,YAAcF,CACtB,EACA,MAAMG,EAAK,SAAS,gBAAiB,CACnC,KAAK,OAAO,EACZ,IAAMC,EAAQ,IAAI,KAAKD,EAAG,aAAa,eAAe,GAAK,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC,EAC3FC,EAAM,IAAIV,CAAI,EACdS,EAAG,aAAa,gBAAiB,CAAC,GAAGC,CAAK,EAAE,KAAK,GAAG,CAAC,CACvD,CACF,CACF,CAGO,SAASC,EAASD,EAA0BD,EAAkB,SAAS,gBAAuB,CACnGA,EAAG,aAAa,gBAAiB,MAAM,QAAQC,CAAK,EAAIA,EAAM,KAAK,GAAG,EAAIA,CAAK,CACjF",
-  "names": ["defineTheme", "def", "name", "lines", "group", "values", "key", "kebab", "css", "id", "style", "el", "names", "setTheme"]
+  "sourcesContent": ["import { kebab } from '../core/dom';\n\ntype Values = Record<string, string | number | undefined>;\ntype ColorToken = 'bg' | 'surface' | 'surface-2' | 'fg' | 'fg-muted' | 'border' | 'border-strong' | 'hover' | 'selected' | 'primary' | 'primary-hover' | 'primary-fg' | 'primary-soft' | 'danger' | 'danger-hover' | 'danger-fg' | 'danger-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'info' | 'info-soft' | 'focus' | 'overlay';\n\nexport interface ThemeDefinition {\n  /** Semantic colors: `{ primary: '#06f' }` \u2192 `--op-color-primary`. camelCase keys are kebab-cased. */\n  color?: Partial<Record<ColorToken | string, string>>;\n  font?: Values;\n  space?: Values;\n  /** `radius: '0.5rem'` sets `--op-radius`; `radius: { sm, lg, pill }` sets `--op-radius-sm`... */\n  radius?: Values | string | number;\n  shadow?: Values;\n  control?: Values;\n  /** Any other key is a component scope: `{ button: { radius: 0 } }` \u2192 `--op-button-radius`. A plain value sets the group's own token (`{ radius: 0 }` \u2192 `--op-radius`). */\n  [group: string]: Values | string | number | undefined;\n}\n\nexport interface Theme {\n  name: string;\n  /** CSS text, scoped to `[data-op-theme~=\"name\"]`, inside `@layer optikos`. */\n  css: string;\n  /** Injects the CSS once without activating it (e.g. to offer it in a theme picker). */\n  inject(): void;\n  /** Injects the CSS and activates the theme on `el` (default: `<html>`), keeping other themes (`\"dark custom\"`). */\n  apply(el?: HTMLElement): void;\n}\n\n/**\n * Typed, proprietary theme format. Produces the same custom properties a hand-written CSS theme would.\n * Numbers are emitted unitless; write units as strings (`'4px'`).\n */\nexport function defineTheme(def: ThemeDefinition, name = 'custom'): Theme {\n  const lines: string[] = [];\n  for (const group in def) {\n    const values = def[group];\n    if (values == null) continue;\n    if (typeof values !== 'object') lines.push(`    --op-${kebab(group)}: ${values};`);\n    else for (const key in values) lines.push(`    --op-${kebab(group)}-${kebab(key)}: ${values[key]};`);\n  }\n  const css = `@layer optikos {\\n  [data-op-theme~='${name}'] {\\n${lines.join('\\n')}\\n  }\\n}\\n`;\n  return {\n    name,\n    css,\n    inject() {\n      const id = `op-theme-${name}`;\n      let style = document.getElementById(id);\n      if (!style) {\n        style = document.createElement('style');\n        style.id = id;\n        document.head.appendChild(style);\n      }\n      style.textContent = css;\n    },\n    apply(el = document.documentElement) {\n      this.inject();\n      const names = new Set((el.getAttribute('data-op-theme') ?? '').split(/\\s+/).filter(Boolean));\n      names.add(name);\n      el.setAttribute('data-op-theme', [...names].join(' '));\n    },\n  };\n}\n\n/** Activates themes on an element (default `<html>`): `setTheme('dark compact')` or `setTheme(['dark', 'custom'])`. */\nexport function setTheme(names: string | string[], el: HTMLElement = document.documentElement): void {\n  el.setAttribute('data-op-theme', Array.isArray(names) ? names.join(' ') : names);\n}\n"],
+  "mappings": "sxHAgCO,SAASA,EAAYC,EAAsBC,EAAO,SAAiB,CACxE,IAAMC,EAAkB,CAAC,EACzB,QAAWC,KAASH,EAAK,CACvB,IAAMI,EAASJ,EAAIG,CAAK,EACxB,GAAIC,GAAU,KACd,GAAI,OAAOA,GAAW,SAAUF,EAAM,KAAK,YAAYG,EAAMF,CAAK,CAAC,KAAKC,CAAM,GAAG,MAC5E,SAAWE,KAAOF,EAAQF,EAAM,KAAK,YAAYG,EAAMF,CAAK,CAAC,IAAIE,EAAMC,CAAG,CAAC,KAAKF,EAAOE,CAAG,CAAC,GAAG,CACrG,CACA,IAAMC,EAAM;AAAA,qBAAwCN,CAAI;AAAA,EAASC,EAAM,KAAK;AAAA,CAAI,CAAC;AAAA;AAAA;AAAA,EACjF,MAAO,CACL,KAAAD,EACA,IAAAM,EACA,QAAS,CACP,IAAMC,EAAK,YAAYP,CAAI,GACvBQ,EAAQ,SAAS,eAAeD,CAAE,EACjCC,IACHA,EAAQ,SAAS,cAAc,OAAO,EACtCA,EAAM,GAAKD,EACX,SAAS,KAAK,YAAYC,CAAK,GAEjCA,EAAM,YAAcF,CACtB,EACA,MAAMG,EAAK,SAAS,gBAAiB,CACnC,KAAK,OAAO,EACZ,IAAMC,EAAQ,IAAI,KAAKD,EAAG,aAAa,eAAe,GAAK,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC,EAC3FC,EAAM,IAAIV,CAAI,EACdS,EAAG,aAAa,gBAAiB,CAAC,GAAGC,CAAK,EAAE,KAAK,GAAG,CAAC,CACvD,CACF,CACF,CAGO,SAASC,EAASD,EAA0BD,EAAkB,SAAS,gBAAuB,CACnGA,EAAG,aAAa,gBAAiB,MAAM,QAAQC,CAAK,EAAIA,EAAM,KAAK,GAAG,EAAIA,CAAK,CACjF",
+  "names": ["defineTheme", "def", "name", "lines", "group", "values", "kebab", "key", "css", "id", "style", "el", "names", "setTheme"]
 }