optikos 0.0.0-stage → 0.2.0

package/dist/components/widget.js

@@ -0,0 +1,2 @@
+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/widget.js.map

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

package/dist/components/window.js

@@ -0,0 +1,2 @@
+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/components/window.js.map

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

package/dist/core.js

@@ -0,0 +1,2 @@
+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/core.js.map

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

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

@@ -0,0 +1,180 @@
+/*
+ * Optikos tokens. Three layers, all custom properties:
+ *   1. primitives   --op-blue-500            (raw palette, never used by components)
+ *   2. semantic     --op-color-primary       (what themes change)
+ *   3. component    --op-button-bg           (declared by each component, falls back to a semantic token)
+ * Everything lives in @layer optikos so unlayered user CSS always wins without !important.
+ * Scope a theme with data-op-theme="dark" (several allowed: "dark compact") on any element.
+ */
+@layer optikos {
+  :root,
+  [data-op-theme~='light'] {
+    /* primitives */
+    --op-gray-0: #ffffff;
+    --op-gray-50: #f8fafc;
+    --op-gray-100: #f1f5f9;
+    --op-gray-200: #e2e8f0;
+    --op-gray-300: #cbd5e1;
+    --op-gray-400: #94a3b8;
+    --op-gray-500: #64748b;
+    --op-gray-600: #475569;
+    --op-gray-700: #334155;
+    --op-gray-800: #1e293b;
+    --op-gray-900: #0f172a;
+    --op-blue-50: #eff6ff;
+    --op-blue-100: #dbeafe;
+    --op-blue-500: #3b82f6;
+    --op-blue-600: #2563eb;
+    --op-blue-700: #1d4ed8;
+    --op-red-50: #fef2f2;
+    --op-red-500: #ef4444;
+    --op-red-600: #dc2626;
+    --op-red-700: #b91c1c;
+    --op-green-50: #f0fdf4;
+    --op-green-600: #16a34a;
+    --op-green-700: #15803d;
+    --op-amber-50: #fffbeb;
+    --op-amber-600: #d97706;
+    --op-amber-700: #b45309;
+
+    /* 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: #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: #e4edf8;
+    --op-color-danger: #b3261e;
+    --op-color-danger-hover: #8f1d17;
+    --op-color-danger-fg: var(--op-gray-0);
+    --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: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
+    --op-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --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: comfortable, small radii, hairline borders */
+    --op-space-1: 0.25rem;
+    --op-space-2: 0.5rem;
+    --op-space-3: 0.875rem;
+    --op-space-4: 1.125rem;
+    --op-space-5: 1.5rem;
+    --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.1875rem;
+    --op-radius: 0.25rem;
+    --op-radius-lg: 0.375rem;
+    --op-radius-pill: 62.5rem;
+    --op-focus-width: 2px;
+    --op-focus-offset: 1px;
+    --op-icon-size: 1.3em;
+    --op-icon-stroke: 1.75;
+
+    /* 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;
+    --op-scrollbar-size: 0.5rem;
+    --op-scrollbar-thumb: var(--op-color-border-strong);
+    --op-scrollbar-track: transparent;
+    --op-easing: ease-out;
+    --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] {
+      --op-duration: 0.01ms;
+    }
+  }
+
+  /* inherited: every scroll area below a themed element (and the global layer) picks it up */
+  :root,
+  [data-op-theme] {
+    scrollbar-width: var(--op-scrollbar-width);
+    scrollbar-color: var(--op-scrollbar-thumb) var(--op-scrollbar-track);
+  }
+  /* browsers without scrollbar-color (older Safari) */
+  @supports not (scrollbar-color: auto) {
+    :root ::-webkit-scrollbar,
+    [data-op-theme] ::-webkit-scrollbar {
+      inline-size: var(--op-scrollbar-size);
+      block-size: var(--op-scrollbar-size);
+    }
+    :root ::-webkit-scrollbar-thumb,
+    [data-op-theme] ::-webkit-scrollbar-thumb {
+      background: var(--op-scrollbar-thumb);
+      border-radius: var(--op-radius-pill);
+    }
+    :root ::-webkit-scrollbar-track,
+    [data-op-theme] ::-webkit-scrollbar-track {
+      background: var(--op-scrollbar-track);
+    }
+  }
+
+  /* Base look for any themed subtree, so a scoped theme repaints its background and text. */
+  [data-op-theme] {
+    color: var(--op-color-fg);
+    background: var(--op-color-bg);
+    font-family: var(--op-font-family);
+    font-size: var(--op-font-size);
+    line-height: var(--op-line-height);
+  }
+  :where(.op-layout, .op-component, .op-field, .op-panel, .op-container, .op-layer *) {
+    box-sizing: border-box;
+  }
+}

package/dist/css/breadcrumb.css

@@ -0,0 +1,53 @@
+@layer optikos {
+  :root {
+    --op-breadcrumb-separator: '›';
+  }
+  .op-breadcrumb {
+    color: var(--op-breadcrumb-fg, var(--op-color-fg-muted));
+  }
+  .op-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-breadcrumb-gap, var(--op-space-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-breadcrumb__list > li + li::before {
+    content: var(--op-breadcrumb-separator);
+    margin-inline-end: var(--op-breadcrumb-gap, var(--op-space-1));
+  }
+  .op-breadcrumb__item,
+  .op-breadcrumb__more,
+  .op-breadcrumb__current {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: var(--op-space-1);
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-breadcrumb__item,
+  .op-breadcrumb__more {
+    cursor: pointer;
+  }
+  .op-breadcrumb__item:hover,
+  .op-breadcrumb__more:hover {
+    color: var(--op-breadcrumb-hover-fg, var(--op-color-fg));
+    background: var(--op-color-hover);
+  }
+  .op-breadcrumb__item:focus-visible,
+  .op-breadcrumb__more:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-breadcrumb__current {
+    color: var(--op-breadcrumb-current-fg, var(--op-color-fg));
+    font-weight: var(--op-font-weight-medium);
+  }
+}

package/dist/css/button.css

@@ -0,0 +1,103 @@
+@layer optikos {
+  :root {
+    --op-button-spinner-size: 1em;
+    --op-button-primary-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
+  }
+
+  .op-button {
+    --_bg: var(--op-button-bg, var(--op-color-surface));
+    --_fg: var(--op-button-fg, var(--op-color-fg));
+    --_border: var(--op-button-border, var(--op-color-border-strong));
+    --_hover: var(--op-button-hover-bg, var(--op-color-hover));
+    --_active: var(--op-button-active-bg, var(--op-color-selected));
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--op-button-height, var(--op-control-height));
+    padding: var(--op-button-padding-y, 0) var(--op-button-padding-x, var(--op-control-padding-x));
+    font: inherit;
+    font-weight: var(--op-button-font-weight, var(--op-font-weight-medium));
+    color: var(--_fg);
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--_border);
+    border-radius: var(--op-button-radius, var(--op-radius));
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background var(--op-duration) var(--op-easing), border-color var(--op-duration) var(--op-easing), transform var(--op-motion-press-duration, 100ms) var(--op-motion-ease-out, ease-out);
+  }
+  .op-button:hover:not(:disabled) {
+    background: var(--_hover);
+  }
+  .op-button:active:not(:disabled),
+  .op-button.is-pressed {
+    background: var(--_active);
+  }
+  .op-button:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  /* normal face and loading face occupy the same grid cell */
+  .op-button__face,
+  .op-button__busy {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--op-button-gap, var(--op-space-2));
+  }
+  .op-button--icon-right .op-button__face {
+    flex-direction: row-reverse;
+  }
+  .op-button__busy {
+    visibility: hidden;
+  }
+  .op-button.is-loading .op-button__busy {
+    visibility: visible;
+  }
+  .op-button.is-loading .op-button__face {
+    visibility: hidden;
+  }
+  /* stableSize: false → only the active face takes space, the button fits its content */
+  .op-button:not(.op-stable) .op-button__busy,
+  .op-button:not(.op-stable).is-loading .op-button__face {
+    display: none;
+  }
+  .op-button:not(.op-stable).is-loading .op-button__busy {
+    display: inline-flex;
+  }
+
+  .op-button--primary {
+    --_bg: var(--op-button-primary-bg, var(--op-color-primary));
+    --_fg: var(--op-button-primary-fg, var(--op-color-primary-fg));
+    --_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));
+    --_fg: var(--op-button-danger-fg, var(--op-color-danger-fg));
+    --_border: var(--op-button-danger-bg, var(--op-color-danger));
+    --_hover: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
+    --_active: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
+  }
+  .op-button--ghost {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+
+  .op-button:disabled {
+    cursor: not-allowed;
+    color: var(--op-color-disabled-fg);
+    background: var(--op-color-disabled-bg);
+    border-color: var(--op-color-border);
+  }
+  .op-button.is-loading {
+    cursor: progress;
+  }
+  .op-button__spinner {
+    --op-spinner-size: var(--op-button-spinner-size);
+    --op-spinner-color: currentColor;
+  }
+}

package/dist/css/calendar.css

@@ -0,0 +1,108 @@
+@layer optikos {
+  :root {
+    --op-calendar-day-size: 2.25rem;
+  }
+  .op-calendar {
+    box-sizing: border-box;
+    padding: var(--op-calendar-padding, var(--op-space-2));
+    color: var(--op-color-fg);
+    background: var(--op-calendar-bg, var(--op-color-surface));
+  }
+  .op-calendar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-1);
+    margin-block-end: var(--op-space-2);
+  }
+  .op-calendar__nav,
+  .op-calendar__title,
+  .op-calendar__month {
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-calendar__nav {
+    display: inline-flex;
+    padding: var(--op-space-2);
+  }
+  .op-calendar__title {
+    flex: 1;
+    padding: var(--op-space-2);
+    font-weight: var(--op-font-weight-bold);
+    text-transform: capitalize;
+  }
+  .op-calendar__nav:hover,
+  .op-calendar__title:hover,
+  .op-calendar__month:hover {
+    background: var(--op-color-hover);
+  }
+  .op-calendar__grid {
+    border-collapse: collapse;
+  }
+  .op-calendar__dow {
+    padding-block-end: var(--op-space-1);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-medium);
+    color: var(--op-color-fg-muted);
+    text-transform: capitalize;
+  }
+  .op-calendar__day {
+    box-sizing: border-box;
+    inline-size: var(--op-calendar-day-size);
+    block-size: var(--op-calendar-day-size);
+    padding: 0;
+    text-align: center;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-calendar__day:hover {
+    background: var(--op-calendar-day-hover-bg, var(--op-color-hover));
+  }
+  .op-calendar__day.is-outside {
+    color: var(--op-calendar-outside-fg, var(--op-color-fg-muted));
+  }
+  .op-calendar__day.is-today {
+    box-shadow: inset 0 0 0 var(--op-border-width) var(--op-calendar-today-border, var(--op-color-primary));
+  }
+  .op-calendar__day.is-selected,
+  .op-calendar__month.is-selected {
+    color: var(--op-calendar-day-selected-fg, var(--op-color-primary-fg));
+    background: var(--op-calendar-day-selected-bg, var(--op-color-primary));
+  }
+  .op-calendar__day.is-in-range {
+    color: var(--op-calendar-range-fg, var(--op-color-fg));
+    background: var(--op-calendar-range-bg, var(--op-color-selected));
+    border-radius: 0;
+  }
+  .op-calendar__day.is-range-start {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .op-calendar__day.is-range-end {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .op-calendar__day.is-disabled {
+    color: var(--op-color-disabled-fg);
+    background: transparent;
+    cursor: not-allowed;
+    text-decoration: line-through;
+  }
+  .op-calendar__day:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-calendar__months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--op-space-1);
+  }
+  .op-calendar__month {
+    padding: var(--op-space-3) var(--op-space-2);
+    text-transform: capitalize;
+  }
+}

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;
+  }
+}