optikos 0.1.0 → 0.2.0

package/dist/components/toast.js

@@ -1,2 +1,2 @@
-import{a,b}from"../chunk-OW2ZSMGS.js";import"../chunk-676AKAGF.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Toast,b as toast};
+import{a,b}from"../chunk-IHE2MQ3W.js";import"../chunk-676AKAGF.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Toast,b as toast};
 //# sourceMappingURL=toast.js.map

package/dist/components/toggle.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-HXDTGP2K.js";import"../chunk-I4SP6JTU.js";import"../chunk-2ZRNGG2N.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Toggle};
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/toolbar.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-LBCWEWPN.js";import"../chunk-666O2GKD.js";import"../chunk-UPOBGNJ5.js";import"../chunk-VV7CFMPZ.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Toolbar};
+import{a}from"../chunk-GNU4VOOE.js";import"../chunk-23XLG2EM.js";import"../chunk-ZWNQREWS.js";import"../chunk-VV7CFMPZ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Toolbar};
 //# sourceMappingURL=toolbar.js.map

package/dist/components/tooltip.js

@@ -1,2 +1,2 @@
-import{a,b}from"../chunk-6NJW7QFD.js";import"../chunk-CUPAPOKC.js";import"../chunk-676AKAGF.js";import"../chunk-PZSHOSOS.js";import"../chunk-4C666HHU.js";export{a as Tooltip,b as attachTooltip};
+import{a,b}from"../chunk-SA53QUBF.js";import"../chunk-E4VNLYO2.js";import"../chunk-676AKAGF.js";import"../chunk-PZSHOSOS.js";import"../chunk-4C666HHU.js";export{a as Tooltip,b as attachTooltip};
 //# sourceMappingURL=tooltip.js.map

package/dist/components/tree.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-DBMWS3O5.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Tree};
+//# sourceMappingURL=tree.js.map

package/dist/components/tree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/viewmanager.js

@@ -1,2 +1,2 @@
-import{a,b,c}from"../chunk-TK2RC3T5.js";import"../chunk-5Q6Y6CM4.js";import"../chunk-PSPQH35P.js";import"../chunk-XZ5CUZZP.js";import"../chunk-LBCWEWPN.js";import"../chunk-666O2GKD.js";import"../chunk-5GNEFX6F.js";import"../chunk-ZCAAM4NH.js";import"../chunk-ARCW54L2.js";import"../chunk-SNTHW4K2.js";import"../chunk-UPOBGNJ5.js";import"../chunk-CUPAPOKC.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-K2DGY6MP.js";import"../chunk-XZEOSW3Q.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{c as ViewManager,a as localViewStorage,b as restViewStorage};
+import{a,b,c}from"../chunk-BXYWVRKJ.js";import"../chunk-KLLAY2IM.js";import"../chunk-4LZZ244E.js";import"../chunk-LQRFNQ2N.js";import"../chunk-XYZ6VZ5T.js";import"../chunk-GNU4VOOE.js";import"../chunk-23XLG2EM.js";import"../chunk-YHEMA56R.js";import"../chunk-FHM5NUS4.js";import"../chunk-Z2JBUHKA.js";import"../chunk-W3H7GTJY.js";import"../chunk-ZWNQREWS.js";import"../chunk-E4VNLYO2.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-2ZRNGG2N.js";import"../chunk-2ZUZ5HDL.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{c as ViewManager,a as localViewStorage,b as restViewStorage};
 //# sourceMappingURL=viewmanager.js.map

package/dist/components/viewport.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-TBLICXWW.js";import"../chunk-UPOBGNJ5.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Viewport};
+import{a}from"../chunk-TOLTUOZS.js";import"../chunk-ZWNQREWS.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Viewport};
 //# sourceMappingURL=viewport.js.map

package/dist/components/widget.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-CN7USUJR.js";import"../chunk-XZ5CUZZP.js";import"../chunk-LBCWEWPN.js";import"../chunk-666O2GKD.js";import"../chunk-UPOBGNJ5.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-XZEOSW3Q.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Widget};
+import{a}from"../chunk-5BC72727.js";import"../chunk-LQRFNQ2N.js";import"../chunk-XYZ6VZ5T.js";import"../chunk-GNU4VOOE.js";import"../chunk-23XLG2EM.js";import"../chunk-ZWNQREWS.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-2ZUZ5HDL.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Widget};
 //# sourceMappingURL=widget.js.map

package/dist/components/window.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-PSPQH35P.js";import"../chunk-XZ5CUZZP.js";import"../chunk-LBCWEWPN.js";import"../chunk-666O2GKD.js";import"../chunk-UPOBGNJ5.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-XZEOSW3Q.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Window};
+import{a}from"../chunk-4LZZ244E.js";import"../chunk-LQRFNQ2N.js";import"../chunk-XYZ6VZ5T.js";import"../chunk-GNU4VOOE.js";import"../chunk-23XLG2EM.js";import"../chunk-ZWNQREWS.js";import"../chunk-676AKAGF.js";import"../chunk-VV7CFMPZ.js";import"../chunk-2ZUZ5HDL.js";import"../chunk-4AA4FQEM.js";import"../chunk-2UPUC4RK.js";import"../chunk-4EZJ5FKJ.js";import"../chunk-A2NKDOYN.js";import"../chunk-PZSHOSOS.js";import"../chunk-TIPK3SCJ.js";import"../chunk-MW3RWBZ7.js";import"../chunk-4C666HHU.js";export{a as Window};
 //# sourceMappingURL=window.js.map

package/dist/core.js

@@ -1,2 +1,2 @@
-import{a as t}from"./chunk-IW7PK4VS.js";import{a as p,b as q,c as r}from"./chunk-UPOBGNJ5.js";import{i as E}from"./chunk-NWTTHDIM.js";import{a as C,b as D}from"./chunk-OWEQT2HN.js";import{a as x,b as y}from"./chunk-CUPAPOKC.js";import{a as u,b as v,c as w}from"./chunk-676AKAGF.js";import{a as z,b as A,c as B}from"./chunk-VV7CFMPZ.js";import{a as s}from"./chunk-K2DGY6MP.js";import{a as l,b as m,c as n,d as o}from"./chunk-IYPKPLCU.js";import{a as b,b as c,c as d,d as e,e as f,f as g}from"./chunk-PZSHOSOS.js";import{a,b as h,c as i,d as j,e as k}from"./chunk-MA5BJL3S.js";import"./chunk-4C666HHU.js";export{l as Component,r as Container,a as Emitter,s as Field,b as attr,g as clamp,o as create,q as createLayout,E as date,z as focusables,j as getLocale,n as getType,c as h,e as kebab,u as layer,h as locales,w as lockModal,D as measure,x as place,f as px,m as register,p as registerLayout,B as roving,i as setLocale,k as t,v as toLayer,y as track,A as trapFocus,d as uid,t as validators,C as virtualize};
+import{a as u}from"./chunk-GZ7X34QP.js";import{a as D,b as E}from"./chunk-OWEQT2HN.js";import{a as q,b as r,c as s}from"./chunk-ZWNQREWS.js";import{a as y,b as z}from"./chunk-E4VNLYO2.js";import{a as v,b as w,c as x}from"./chunk-676AKAGF.js";import{a as A,b as B,c as C}from"./chunk-VV7CFMPZ.js";import{a as t}from"./chunk-2ZRNGG2N.js";import{i as F}from"./chunk-5JEXM5S7.js";import{a as m}from"./chunk-A2NKDOYN.js";import{a as b,b as c,c as d,d as e,e as f,f as g}from"./chunk-PZSHOSOS.js";import{a as n,b as o,c as p}from"./chunk-TIPK3SCJ.js";import{a,b as h,c as i,d as j,e as k,f as l}from"./chunk-MW3RWBZ7.js";import"./chunk-4C666HHU.js";export{m as Component,s as Container,a as Emitter,t as Field,k as addMessages,b as attr,g as clamp,p as create,r as createLayout,F as date,A as focusables,j as getLocale,o as getType,c as h,e as kebab,v as layer,h as locales,x as lockModal,E as measure,y as place,f as px,n as register,q as registerLayout,C as roving,i as setLocale,l as t,w as toLayer,z as track,B as trapFocus,d as uid,u as validators,D as virtualize};
 //# sourceMappingURL=core.js.map

package/dist/css/badge.css

@@ -0,0 +1,39 @@
+@layer optikos {
+  :root {
+    --op-badge-dot-size: 0.5rem;
+    --op-badge-height: 1.5em;
+    --op-badge-icon-size: 1em;
+  }
+  .op-badge {
+    --_fg: var(--op-color-fg);
+    --_bg: var(--op-color-surface-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-badge-padding-x, var(--op-space-2));
+    min-block-size: var(--op-badge-height);
+    box-sizing: border-box;
+    color: var(--op-badge-fg, var(--_fg));
+    background: var(--op-badge-bg, var(--_bg));
+    border-radius: var(--op-badge-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-badge-font-weight, var(--op-font-weight-bold));
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .op-badge--primary { --_fg: var(--op-color-primary-text, var(--op-color-primary)); --_bg: var(--op-color-primary-soft); }
+  .op-badge--success { --_fg: var(--op-color-success); --_bg: var(--op-color-success-soft); }
+  .op-badge--warning { --_fg: var(--op-color-warning); --_bg: var(--op-color-warning-soft); }
+  .op-badge--danger { --_fg: var(--op-color-danger); --_bg: var(--op-color-danger-soft); }
+  .op-badge--info { --_fg: var(--op-color-info); --_bg: var(--op-color-info-soft); }
+  .op-badge__dot {
+    inline-size: var(--op-badge-dot-size);
+    block-size: var(--op-badge-dot-size);
+    border-radius: 50%;
+    background: currentColor;
+  }
+  .op-badge .op-icon {
+    --op-icon-size: var(--op-badge-icon-size);
+  }
+}

package/dist/css/base.css

@@ -37,74 +37,74 @@
     --op-amber-600: #d97706;
     --op-amber-700: #b45309;
 
-    /* semantic colors */
-    --op-color-bg: var(--op-gray-50);
+    /* semantic colors: steel blue on cool grey, made for long sessions in grids and forms */
+    --op-color-bg: #edf0f4;
     --op-color-surface: var(--op-gray-0);
-    --op-color-surface-2: var(--op-gray-100);
-    --op-color-fg: var(--op-gray-900);
-    --op-color-fg-muted: var(--op-gray-500);
-    --op-color-border: var(--op-gray-200);
-    --op-color-border-strong: var(--op-gray-300);
-    --op-color-hover: var(--op-gray-100);
-    --op-color-selected: var(--op-blue-100);
-    --op-color-primary: var(--op-blue-600);
-    --op-color-primary-hover: var(--op-blue-700);
+    --op-color-surface-2: #f3f5f8;
+    --op-color-fg: #1b2430;
+    --op-color-fg-muted: #5b6676; /* keeps 4.5:1 on surface-2 */
+    --op-color-border: #d8dee6;
+    --op-color-border-strong: #a9b3c1;
+    --op-color-hover: #eaeff6;
+    --op-color-selected: #d9e6f7;
+    --op-color-primary: #1f4e8c;
+    --op-color-primary-hover: #173d6f;
     --op-color-primary-fg: var(--op-gray-0);
-    --op-color-primary-soft: var(--op-blue-50);
-    --op-color-danger: var(--op-red-600);
-    --op-color-danger-hover: var(--op-red-700);
+    --op-color-primary-soft: #e4edf8;
+    --op-color-danger: #b3261e;
+    --op-color-danger-hover: #8f1d17;
     --op-color-danger-fg: var(--op-gray-0);
-    --op-color-danger-soft: var(--op-red-50);
-    --op-color-success: var(--op-green-600);
-    --op-color-success-soft: var(--op-green-50);
-    --op-color-warning: var(--op-amber-600);
-    --op-color-warning-soft: var(--op-amber-50);
-    --op-color-info: var(--op-blue-600);
-    --op-color-info-soft: var(--op-blue-50);
-    --op-color-focus: var(--op-blue-500);
-    --op-color-disabled-fg: var(--op-gray-400);
-    --op-color-disabled-bg: var(--op-gray-100);
-    --op-color-overlay: rgb(15 23 42 / 0.5);
-    --op-color-inverse-bg: var(--op-gray-800);
-    --op-color-inverse-fg: var(--op-gray-50);
+    --op-color-danger-soft: #fbe4e2;
+    --op-color-success: #1e7a4d;
+    --op-color-success-soft: #dff2e8;
+    --op-color-warning: #9a5b00;
+    --op-color-warning-soft: #fcecc9;
+    --op-color-info: #1f5fa8;
+    --op-color-info-soft: #dfeaf8;
+    --op-color-focus: #2f7bd6;
+    --op-color-disabled-fg: #9aa4b2;
+    --op-color-disabled-bg: #eef1f5;
+    --op-color-overlay: rgb(16 24 38 / 0.5);
+    --op-color-inverse-bg: #14213a;
+    --op-color-inverse-fg: #eaf0fa;
 
     /* typography */
-    --op-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --op-font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
     --op-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-    --op-font-size: 0.875rem;
-    --op-font-size-sm: 0.75rem;
-    --op-font-size-lg: 1rem;
-    --op-font-size-xl: 1.25rem;
-    --op-line-height: 1.4;
+    --op-font-size: 0.9375rem;
+    --op-font-size-sm: 0.8125rem;
+    --op-font-size-lg: 1.0625rem;
+    --op-font-size-xl: 1.3125rem;
+    --op-line-height: 1.45;
     --op-font-weight: 400;
     --op-font-weight-medium: 500;
     --op-font-weight-bold: 600;
 
-    /* spacing, density, shape */
+    /* spacing, density, shape: comfortable, small radii, hairline borders */
     --op-space-1: 0.25rem;
     --op-space-2: 0.5rem;
-    --op-space-3: 0.75rem;
-    --op-space-4: 1rem;
+    --op-space-3: 0.875rem;
+    --op-space-4: 1.125rem;
     --op-space-5: 1.5rem;
-    --op-space-6: 2rem;
-    --op-control-height: 2.25rem;
-    --op-control-padding-x: 0.75rem;
-    --op-row-height: 2.25rem;
+    --op-space-6: 2.25rem;
+    --op-control-height: 2.375rem;
+    --op-control-padding-x: 0.875rem;
+    --op-row-height: 2.75rem;
     --op-border-width: 1px;
-    --op-radius-sm: 0.25rem;
-    --op-radius: 0.375rem;
-    --op-radius-lg: 0.75rem;
+    --op-radius-sm: 0.1875rem;
+    --op-radius: 0.25rem;
+    --op-radius-lg: 0.375rem;
     --op-radius-pill: 62.5rem;
     --op-focus-width: 2px;
-    --op-focus-offset: 2px;
-    --op-icon-size: 1.25em;
-    --op-icon-stroke: 2;
+    --op-focus-offset: 1px;
+    --op-icon-size: 1.3em;
+    --op-icon-stroke: 1.75;
 
-    /* elevation and motion */
-    --op-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
-    --op-shadow: 0 4px 12px rgb(15 23 42 / 0.12);
-    --op-shadow-lg: 0 12px 32px rgb(15 23 42 / 0.2);
-    --op-duration: 120ms;
+    /* elevation and motion: flat at rest, shadows only on what floats */
+    --op-shadow-sm: none;
+    --op-shadow: 0 2px 6px rgb(16 24 38 / 0.14);
+    --op-shadow-lg: 0 10px 28px rgb(16 24 38 / 0.28);
+    --op-duration: 90ms;
 
     /* scrollbars follow the theme: thin, thumb from the strong border, track transparent */
     --op-scrollbar-width: thin;
@@ -115,6 +115,26 @@
     --op-z-layer: 1000;
   }
 
+  /* The light look's component colors (a navy sidebar, a tinted grid header). Literal values, and not on :root under
+     another theme, so a theme that does not set them keeps the component defaults. dark.css sets its own. */
+  :root:not([data-op-theme]),
+  [data-op-theme~='light'],
+  [data-op-theme='compact'] {
+    --op-navmenu-item-height: 2.5rem;
+    --op-navmenu-bg: #14213a;
+    --op-navmenu-fg: #d5ddeb;
+    --op-navmenu-group-fg: #8195b4;
+    --op-navmenu-item-hover-bg: #1d2f52;
+    --op-navmenu-active-bg: #203c6a;
+    --op-navmenu-active-fg: #ffffff;
+    --op-navmenu-active-bar: #5ea6f5;
+    --op-navmenu-badge-bg: #5ea6f5;
+    --op-navmenu-badge-fg: #0a1730;
+    --op-grid-header-bg: #e6ebf1;
+    --op-grid-header-fg: #2a3547;
+    --op-field-label-weight: 600;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :root,
     [data-op-theme] {

package/dist/css/button.css

@@ -1,6 +1,7 @@
 @layer optikos {
   :root {
     --op-button-spinner-size: 1em;
+    --op-button-primary-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
   }
 
   .op-button {
@@ -72,6 +73,7 @@
     --_border: var(--op-button-primary-bg, var(--op-color-primary));
     --_hover: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
     --_active: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
+    box-shadow: var(--op-button-primary-shadow);
   }
   .op-button--danger {
     --_bg: var(--op-button-danger-bg, var(--op-color-danger));

package/dist/css/cellediting.css

@@ -0,0 +1,33 @@
+@layer optikos {
+  /* the editor fills the cell: no label, no error line, the row height */
+  .op-grid__cell.is-editing {
+    position: relative;
+    padding-block: 0;
+    padding-inline: var(--op-grid-editor-inset, var(--op-space-1));
+    overflow: visible;
+  }
+  .op-grid__editor {
+    inline-size: 100%;
+  }
+  .op-grid__editor .op-textfield__input {
+    min-block-size: 0;
+    block-size: calc(var(--op-grid-row-height, var(--op-row-height)) - 2 * var(--op-space-1));
+  }
+  .op-grid__editor.is-invalid .op-textfield__input {
+    border-color: var(--op-color-danger);
+  }
+  .op-grid__editor .op-field__error {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 100%;
+    padding: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-danger-fg);
+    background: var(--op-color-danger);
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+  }
+  .op-grid__editor .op-field__error:empty {
+    display: none;
+  }
+}

package/dist/css/chat.css

@@ -115,7 +115,6 @@
     margin-inline-start: var(--op-space-3);
     margin-block-start: var(--op-space-2);
     font-size: var(--op-font-size-sm);
-    opacity: 0.7;
   }
   .op-chat__status {
     display: inline-flex;

package/dist/css/checkboxgroup.css

@@ -0,0 +1,12 @@
+@layer optikos {
+  .op-checkboxgroup__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-1));
+  }
+  .op-checkboxgroup__options--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-4));
+  }
+}

package/dist/css/chip.css

@@ -0,0 +1,64 @@
+@layer optikos {
+  .op-chip {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--op-chip-height, calc(var(--op-control-height) * 0.8));
+    color: var(--op-chip-fg, var(--op-color-fg));
+    background: var(--op-chip-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-chip-border, var(--op-color-border-strong));
+    border-radius: var(--op-chip-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    vertical-align: middle;
+  }
+  .op-chip__main,
+  .op-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-space-3);
+    min-block-size: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-chip__main {
+    min-inline-size: 0;
+  }
+  .op-chip__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-chip__remove {
+    padding-inline: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-fg-muted);
+  }
+  .op-chip__remove:hover:not(:disabled) {
+    color: var(--op-color-danger);
+  }
+  .op-chip__main:focus-visible,
+  .op-chip__remove:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-chip:hover:not(.is-disabled) {
+    border-color: var(--op-chip-hover-border, var(--op-color-primary));
+  }
+  .op-chip.is-selected {
+    color: var(--op-chip-selected-fg, var(--op-color-primary-text, var(--op-color-primary)));
+    background: var(--op-chip-selected-bg, var(--op-color-primary-soft));
+    border-color: var(--op-chip-selected-border, var(--op-color-primary));
+  }
+  .op-chip.is-disabled {
+    color: var(--op-color-disabled-fg);
+    border-color: var(--op-color-border);
+  }
+  .op-chip.is-disabled button {
+    cursor: default;
+  }
+}

package/dist/css/codeviewer.css

@@ -0,0 +1,109 @@
+@layer optikos {
+  :root {
+    --op-codeviewer-font-size: 0.8125rem;
+    --op-codeviewer-line-height: 1.6;
+    --op-codeviewer-tab-size: 2;
+    --op-codeviewer-gutter-gap: 1.25rem;
+    --op-codeviewer-max-height: 32rem;
+  }
+  .op-codeviewer {
+    overflow: hidden;
+    color: var(--op-codeviewer-fg, var(--op-color-fg));
+    background: var(--op-codeviewer-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-lg);
+  }
+  .op-codeviewer__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    padding-inline: var(--op-space-3) var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-codeviewer__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-codeviewer__pre {
+    margin: 0;
+    padding: var(--op-space-3) var(--op-space-4);
+    max-block-size: var(--op-codeviewer-max-height);
+    overflow: auto;
+    font-family: var(--op-font-mono);
+    font-size: var(--op-codeviewer-font-size);
+    line-height: var(--op-codeviewer-line-height);
+    tab-size: var(--op-codeviewer-tab-size);
+  }
+  .op-codeviewer__pre:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  /* the global op-* rule would give lines and tokens the base font: everything inside the code keeps the mono one */
+  .op-codeviewer__pre * {
+    font-family: inherit;
+    font-size: inherit;
+  }
+  /* lines stretch to the widest one, so a marked line is marked across the whole scroll width */
+  .op-codeviewer__code {
+    display: block;
+    min-inline-size: 100%;
+    inline-size: max-content;
+    font: inherit;
+  }
+  .op-codeviewer.is-wrapped .op-codeviewer__code {
+    inline-size: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .op-codeviewer__line {
+    position: relative;
+    display: block;
+    margin-inline: calc(var(--op-space-4) * -1);
+    padding-inline: var(--op-space-4);
+  }
+  .op-codeviewer__line.is-marked {
+    background: var(--op-codeviewer-mark-bg, var(--op-color-selected));
+    box-shadow: inset calc(var(--op-border-width) * 3) 0 0 var(--op-color-primary);
+  }
+  /* line numbers: a CSS counter in the gutter, never part of the text (selection and screen readers skip it) */
+  .op-codeviewer.has-numbers .op-codeviewer__line {
+    padding-inline-start: calc(var(--op-space-4) + var(--op-codeviewer-gutter, 2ch) + var(--op-codeviewer-gutter-gap));
+  }
+  .op-codeviewer.has-numbers .op-codeviewer__line::before {
+    counter-increment: op-codeline;
+    content: counter(op-codeline);
+    position: absolute;
+    inset-inline-start: var(--op-space-4);
+    inline-size: var(--op-codeviewer-gutter, 2ch);
+    color: var(--op-codeviewer-gutter-fg, var(--op-color-fg-muted));
+    text-align: end;
+    user-select: none;
+  }
+  /* syntax colors are pulled towards the text color, so they keep their contrast in every theme */
+  .op-codeviewer__tok--keyword {
+    color: var(--op-codeviewer-keyword, color-mix(in srgb, var(--op-color-primary) 80%, var(--op-color-fg)));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-codeviewer__tok--string {
+    color: var(--op-codeviewer-string, color-mix(in srgb, var(--op-color-success) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--comment {
+    color: var(--op-codeviewer-comment, var(--op-color-fg-muted));
+    font-style: italic;
+  }
+  .op-codeviewer__tok--number {
+    color: var(--op-codeviewer-number, color-mix(in srgb, var(--op-color-warning) 65%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--property,
+  .op-codeviewer__tok--attr {
+    color: var(--op-codeviewer-property, color-mix(in srgb, var(--op-color-info) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--tag {
+    color: var(--op-codeviewer-tag, color-mix(in srgb, var(--op-color-danger) 70%, var(--op-color-fg)));
+  }
+}