optikos 0.0.0-stage → 0.1.0

package/dist/components/suggestfield.js.map

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

package/dist/components/table.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-JZNEB7A7.js";import"../chunk-NDBFYIL6.js";import"../chunk-JTYWZMSZ.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Table};
+//# sourceMappingURL=table.js.map

package/dist/components/table.js.map

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

package/dist/components/tabs.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-HFFK6K4K.js";import"../chunk-UPOBGNJ5.js";import"../chunk-VV7CFMPZ.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as Tabs};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

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

package/dist/components/textarea.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-ZHVSHDLH.js";import"../chunk-SNTHW4K2.js";import"../chunk-OWEQT2HN.js";import"../chunk-K2DGY6MP.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as TextArea};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

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

package/dist/components/textfield.js

@@ -0,0 +1,2 @@
+import{a}from"../chunk-SNTHW4K2.js";import"../chunk-K2DGY6MP.js";import"../chunk-IHAYOSBR.js";import"../chunk-IYPKPLCU.js";import"../chunk-PZSHOSOS.js";import"../chunk-MA5BJL3S.js";import"../chunk-4C666HHU.js";export{a as TextField};
+//# sourceMappingURL=textfield.js.map

package/dist/components/textfield.js.map

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

package/dist/components/toast.js

@@ -0,0 +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};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast.js.map

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

package/dist/components/toolbar.js

@@ -0,0 +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};
+//# sourceMappingURL=toolbar.js.map

package/dist/components/toolbar.js.map

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

package/dist/components/tooltip.js

@@ -0,0 +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};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

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

package/dist/components/viewmanager.js

@@ -0,0 +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};
+//# sourceMappingURL=viewmanager.js.map

package/dist/components/viewmanager.js.map

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

package/dist/components/viewport.js

@@ -0,0 +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};
+//# sourceMappingURL=viewport.js.map

package/dist/components/viewport.js.map

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

package/dist/components/widget.js

@@ -0,0 +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};
+//# 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-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};
+//# 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 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};
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

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

package/dist/css/base.css

@@ -0,0 +1,160 @@
+/*
+ * 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 */
+    --op-color-bg: var(--op-gray-50);
+    --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-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-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);
+
+    /* typography */
+    --op-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 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-weight: 400;
+    --op-font-weight-medium: 500;
+    --op-font-weight-bold: 600;
+
+    /* spacing, density, shape */
+    --op-space-1: 0.25rem;
+    --op-space-2: 0.5rem;
+    --op-space-3: 0.75rem;
+    --op-space-4: 1rem;
+    --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-border-width: 1px;
+    --op-radius-sm: 0.25rem;
+    --op-radius: 0.375rem;
+    --op-radius-lg: 0.75rem;
+    --op-radius-pill: 62.5rem;
+    --op-focus-width: 2px;
+    --op-focus-offset: 2px;
+    --op-icon-size: 1.25em;
+    --op-icon-stroke: 2;
+
+    /* 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;
+
+    /* 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;
+  }
+
+  @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,101 @@
+@layer optikos {
+  :root {
+    --op-button-spinner-size: 1em;
+  }
+
+  .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));
+  }
+  .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;
+  }
+}