@onyxdesign/core 1.0.0 → 1.1.1

package/README.md

@@ -4,7 +4,7 @@
 
 **The interface, in black & white.**
 
-[Website](https://onyx-six-ashy.vercel.app/) · [Documentation](https://onyx-six-ashy.vercel.app/docs/) · [Pricing](https://onyx-six-ashy.vercel.app/#pricing)
+[Website](https://onyxdesign.vercel.app/) · [Documentation](https://onyxdesign.vercel.app/docs/) · [Pricing](https://onyxdesign.vercel.app/#pricing)
 
 Onyx is a zero-dependency UI component library for designers who believe restraint is a feature. Two colors, sharp typography, and every detail considered. One CSS file, one small script, light and dark themes built in.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onyxdesign/core",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A black & white, zero-dependency UI component library for people who care about the details.",
   "main": "src/onyx.js",
   "style": "src/onyx.css",
@@ -28,7 +28,7 @@
     "type": "git",
     "url": "git+https://github.com/codewithanshuman/Onyx.git"
   },
-  "homepage": "https://onyx-six-ashy.vercel.app/",
+  "homepage": "https://onyxdesign.vercel.app/",
   "bugs": {
     "url": "https://github.com/codewithanshuman/Onyx/issues"
   },

package/src/onyx.css

@@ -1,5 +1,5 @@
 /*!
- * Onyx v1.0.0 — a black & white component library for the web
+ * Onyx v1.1.1 — a black & white component library for the web
  * Core: MIT License. Onyx Pro components require a commercial license.
  */
 
@@ -19,9 +19,10 @@
   --ox-surface: #ffffff;
   --ox-border: #e8e8e8;
   --ox-border-strong: #d4d4d4;
+  --ox-control-border: #8f8f8f;
   --ox-fg: #0a0a0a;
-  --ox-fg-muted: #6b6b6b;
-  --ox-fg-subtle: #a3a3a3;
+  --ox-fg-muted: #5c5c5c;
+  --ox-fg-subtle: #737373;
   --ox-inverse: #ffffff;
   --ox-ring: rgba(10, 10, 10, 0.12);
   --ox-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
@@ -38,9 +39,10 @@
   --ox-surface: #0a0a0a;
   --ox-border: #222222;
   --ox-border-strong: #383838;
+  --ox-control-border: #5e5e5e;
   --ox-fg: #fafafa;
-  --ox-fg-muted: #a1a1a1;
-  --ox-fg-subtle: #6b6b6b;
+  --ox-fg-muted: #a8a8a8;
+  --ox-fg-subtle: #8a8a8a;
   --ox-inverse: #000000;
   --ox-ring: rgba(255, 255, 255, 0.18);
   --ox-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02);
@@ -61,9 +63,10 @@
     --ox-surface: #0a0a0a;
     --ox-border: #222222;
     --ox-border-strong: #383838;
+    --ox-control-border: #5e5e5e;
     --ox-fg: #fafafa;
-    --ox-fg-muted: #a1a1a1;
-    --ox-fg-subtle: #6b6b6b;
+    --ox-fg-muted: #a8a8a8;
+    --ox-fg-subtle: #8a8a8a;
     --ox-inverse: #000000;
     --ox-ring: rgba(255, 255, 255, 0.18);
     --ox-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02);
@@ -78,9 +81,10 @@
     --ox-surface: #ffffff;
     --ox-border: #e8e8e8;
     --ox-border-strong: #d4d4d4;
+    --ox-control-border: #8f8f8f;
     --ox-fg: #0a0a0a;
-    --ox-fg-muted: #6b6b6b;
-    --ox-fg-subtle: #a3a3a3;
+    --ox-fg-muted: #5c5c5c;
+    --ox-fg-subtle: #737373;
     --ox-inverse: #ffffff;
     --ox-ring: rgba(10, 10, 10, 0.12);
     --ox-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
@@ -341,7 +345,7 @@
   font-size: var(--ox-text-sm);
   color: var(--ox-fg);
   background: var(--ox-surface);
-  border: 1px solid var(--ox-border);
+  border: 1px solid var(--ox-control-border);
   border-radius: var(--ox-radius);
   transition: border-color var(--ox-duration) var(--ox-ease), box-shadow var(--ox-duration) var(--ox-ease);
 }
@@ -349,7 +353,7 @@
 .ox-textarea::placeholder { color: var(--ox-fg-subtle); }
 .ox-input:hover,
 .ox-select:hover,
-.ox-textarea:hover { border-color: var(--ox-border-strong); }
+.ox-textarea:hover { border-color: var(--ox-fg-muted); }
 .ox-input:focus,
 .ox-select:focus,
 .ox-textarea:focus {
@@ -403,7 +407,7 @@
   height: 1rem;
   margin: 0;
   background: var(--ox-surface);
-  border: 1px solid var(--ox-border-strong);
+  border: 1px solid var(--ox-control-border);
   cursor: pointer;
   transition: background var(--ox-duration) var(--ox-ease), border-color var(--ox-duration) var(--ox-ease);
 }
@@ -441,7 +445,7 @@
   width: 2.25rem;
   height: 1.25rem;
   flex-shrink: 0;
-  background: var(--ox-border-strong);
+  background: var(--ox-control-border);
   border-radius: var(--ox-radius-full);
   transition: background var(--ox-duration) var(--ox-ease);
 }
@@ -818,7 +822,7 @@
   overflow-x: auto;
   tab-size: 2;
 }
-.ox-code .c { color: #5f5f5f; }
+.ox-code .c { color: #8a8a8a; } /* 5.6:1 on the code background */
 .ox-code .t { color: #ffffff; }
 .ox-code .a { color: #9a9a9a; }
 .ox-code .s { color: #e5e5e5; font-style: italic; }
@@ -847,8 +851,84 @@
   transition: color var(--ox-duration) var(--ox-ease), background var(--ox-duration) var(--ox-ease);
 }
 .ox-navbar-links a:hover { color: var(--ox-fg); background: var(--ox-bg-muted); }
+
+/* Mobile menu: links collapse behind a toggle below 760px
+   (or below 1024px with data-collapse="lg" on .ox-navbar) */
+.ox-navbar-toggle { display: none; }
+.ox-navbar-menu { display: none; }
+.ox-navbar-toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  color: var(--ox-fg);
+  background: transparent;
+  border: 1px solid var(--ox-border);
+  border-radius: var(--ox-radius-full);
+  cursor: pointer;
+}
+.ox-navbar-toggle span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 1rem;
+  height: 1.5px;
+  margin: -0.75px 0 0 -0.5rem;
+  background: currentColor;
+  border-radius: 2px;
+  transition: transform 260ms var(--ox-ease);
+}
+.ox-navbar-toggle span:first-child { transform: translateY(-3.5px); }
+.ox-navbar-toggle span:last-child { transform: translateY(3.5px); }
+.ox-navbar[data-open="true"] .ox-navbar-toggle span:first-child { transform: rotate(45deg); }
+.ox-navbar[data-open="true"] .ox-navbar-toggle span:last-child { transform: rotate(-45deg); }
+/* Absolute, not fixed: the navbar's backdrop-filter makes it the containing block
+   for fixed children, so the menu is sized from the navbar's bottom edge instead */
+.ox-navbar-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: calc(100vh - 3.75rem);
+  height: calc(100dvh - 3.75rem);
+  z-index: 99;
+  flex-direction: column;
+  gap: var(--ox-space-1);
+  padding: var(--ox-space-4) var(--ox-space-4) var(--ox-space-8);
+  overflow-y: auto;
+  background: var(--ox-bg);
+  border-top: 1px solid var(--ox-border);
+  opacity: 0;
+  transform: translateY(-8px);
+  visibility: hidden;
+  transition: opacity 220ms var(--ox-ease), transform 260ms var(--ox-ease), visibility 260ms;
+}
+.ox-navbar[data-open="true"] .ox-navbar-menu { opacity: 1; transform: none; visibility: visible; }
+.ox-navbar-menu > a:not(.ox-btn) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 3.25rem;
+  padding: 0 var(--ox-space-2);
+  font-size: var(--ox-text-lg);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--ox-fg);
+  text-decoration: none;
+  border-bottom: 1px solid var(--ox-border);
+}
+.ox-navbar-menu > a:not(.ox-btn)::after { content: "→"; color: var(--ox-fg-subtle); }
+.ox-navbar-menu .ox-btn { margin-top: var(--ox-space-4); }
+body.ox-nav-locked { overflow: hidden; }
 @media (max-width: 760px) {
   .ox-navbar-links { display: none; }
+  .ox-navbar-toggle { display: inline-grid; }
+  .ox-navbar-menu { display: flex; }
+}
+@media (max-width: 1023px) {
+  .ox-navbar[data-collapse="lg"] .ox-navbar-links { display: none; }
+  .ox-navbar[data-collapse="lg"] .ox-navbar-toggle { display: inline-grid; }
+  .ox-navbar[data-collapse="lg"] .ox-navbar-menu { display: flex; }
 }
 
 /* =========================================================
@@ -867,7 +947,186 @@
 }
 
 /* =========================================================
-   19. Keyframes & motion preferences
+   19. Breadcrumb & pagination
+   ========================================================= */
+.ox-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ox-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--ox-text-sm); }
+.ox-breadcrumb li { display: inline-flex; align-items: center; gap: var(--ox-space-2); color: var(--ox-fg-muted); }
+.ox-breadcrumb li + li::before { content: "/"; color: var(--ox-fg-subtle); }
+.ox-breadcrumb a { color: inherit; text-decoration: none; border-radius: var(--ox-radius-sm); transition: color var(--ox-duration); }
+.ox-breadcrumb a:hover { color: var(--ox-fg); }
+.ox-breadcrumb [aria-current="page"] { color: var(--ox-fg); font-weight: 500; }
+
+.ox-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ox-space-1); margin: 0; padding: 0; list-style: none; }
+.ox-pagination a,
+.ox-pagination span {
+  display: inline-grid;
+  place-items: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 var(--ox-space-2);
+  font-size: var(--ox-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--ox-fg-muted);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--ox-radius);
+  transition: background var(--ox-duration), color var(--ox-duration), border-color var(--ox-duration);
+}
+.ox-pagination a:hover { color: var(--ox-fg); background: var(--ox-bg-muted); }
+.ox-pagination [aria-current="page"] { color: var(--ox-inverse); background: var(--ox-fg); border-color: var(--ox-fg); }
+.ox-pagination [aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
+.ox-pagination .ox-gap { min-width: 1.5rem; }
+
+/* =========================================================
+   20. Range slider & number stepper
+   ========================================================= */
+.ox-range {
+  --_pct: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 1.5rem;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.ox-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--ox-fg) var(--_pct), var(--ox-bg-muted) var(--_pct)); }
+.ox-range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--ox-bg-muted); }
+.ox-range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--ox-fg); }
+.ox-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: calc(2px - 0.625rem); border-radius: 50%; background: var(--ox-bg); border: 2px solid var(--ox-fg); box-shadow: var(--ox-shadow-sm); transition: transform var(--ox-duration) var(--ox-ease); }
+.ox-range::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: var(--ox-bg); border: 2px solid var(--ox-fg); }
+.ox-range:active::-webkit-slider-thumb { transform: scale(1.15); }
+.ox-range:focus-visible { outline: none; }
+.ox-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ox-ring); }
+.ox-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ox-ring); }
+
+.ox-stepper { display: inline-flex; align-items: stretch; height: 2.5rem; background: var(--ox-surface); border: 1px solid var(--ox-control-border); border-radius: var(--ox-radius); overflow: hidden; }
+.ox-stepper:focus-within { border-color: var(--ox-fg); box-shadow: 0 0 0 3px var(--ox-ring); }
+.ox-stepper button { width: 2.5rem; padding: 0; font-size: var(--ox-text-lg); line-height: 1; color: var(--ox-fg); background: transparent; border: 0; cursor: pointer; transition: background var(--ox-duration); }
+.ox-stepper button:hover { background: var(--ox-bg-muted); }
+.ox-stepper button:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
+.ox-stepper input { width: 3.5rem; padding: 0; font: inherit; font-size: var(--ox-text-sm); font-variant-numeric: tabular-nums; text-align: center; color: var(--ox-fg); background: transparent; border: 0; border-inline: 1px solid var(--ox-border); outline: none; -moz-appearance: textfield; }
+.ox-stepper input::-webkit-outer-spin-button,
+.ox-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+
+/* =========================================================
+   21. Chips (toggleable filters)
+   ========================================================= */
+.ox-chips { display: flex; flex-wrap: wrap; gap: var(--ox-space-2); }
+.ox-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 var(--ox-space-3);
+  font: 500 var(--ox-text-sm) var(--ox-font-sans);
+  color: var(--ox-fg-muted);
+  background: var(--ox-surface);
+  border: 1px solid var(--ox-border);
+  border-radius: var(--ox-radius-full);
+  cursor: pointer;
+  transition: color var(--ox-duration), background var(--ox-duration), border-color var(--ox-duration), transform var(--ox-duration) var(--ox-ease);
+}
+.ox-chip:hover { color: var(--ox-fg); border-color: var(--ox-border-strong); }
+.ox-chip:active { transform: scale(0.97); }
+.ox-chip[aria-pressed="true"] { color: var(--ox-inverse); background: var(--ox-fg); border-color: var(--ox-fg); }
+.ox-chip[aria-pressed="true"]::before { content: "✓"; font-size: 0.7rem; }
+
+/* =========================================================
+   22. Table
+   ========================================================= */
+.ox-table-wrap { overflow-x: auto; border: 1px solid var(--ox-border); border-radius: var(--ox-radius-lg); background: var(--ox-surface); }
+.ox-table { width: 100%; border-collapse: collapse; font-size: var(--ox-text-sm); font-variant-numeric: tabular-nums; }
+.ox-table caption { padding: var(--ox-space-3) var(--ox-space-4); text-align: left; color: var(--ox-fg-muted); caption-side: bottom; font-size: var(--ox-text-xs); }
+.ox-table th { padding: var(--ox-space-3) var(--ox-space-4); text-align: left; font-size: var(--ox-text-xs); font-weight: 500; color: var(--ox-fg-muted); background: var(--ox-bg-subtle); border-bottom: 1px solid var(--ox-border); white-space: nowrap; }
+.ox-table td { padding: var(--ox-space-3) var(--ox-space-4); border-bottom: 1px solid var(--ox-border); }
+.ox-table tbody tr:last-child td { border-bottom: 0; }
+.ox-table tbody tr { transition: background var(--ox-duration); }
+.ox-table tbody tr:hover { background: var(--ox-bg-subtle); }
+.ox-table .num { text-align: right; }
+.ox-table-striped tbody tr:nth-child(even) { background: var(--ox-bg-subtle); }
+
+/* =========================================================
+   23. Empty state & timeline
+   ========================================================= */
+.ox-empty { display: grid; justify-items: center; gap: var(--ox-space-2); padding: var(--ox-space-12) var(--ox-space-6); text-align: center; border: 1.5px dashed var(--ox-border-strong); border-radius: var(--ox-radius-lg); }
+.ox-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--ox-space-2); font-size: var(--ox-text-xl); color: var(--ox-fg); background: var(--ox-bg-muted); border-radius: 50%; }
+.ox-empty-title { margin: 0; font-size: var(--ox-text-base); font-weight: 600; }
+.ox-empty-text { max-width: 36ch; margin: 0 0 var(--ox-space-3); font-size: var(--ox-text-sm); color: var(--ox-fg-muted); }
+
+.ox-timeline { margin: 0; padding: 0; list-style: none; }
+.ox-timeline li { position: relative; padding: 0 0 var(--ox-space-6) var(--ox-space-8); }
+.ox-timeline li::before { content: ""; position: absolute; left: 0.3rem; top: 0.45rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ox-bg); border: 2px solid var(--ox-fg); }
+.ox-timeline li::after { content: ""; position: absolute; left: calc(0.3rem + 0.325rem - 0.5px); top: 1.4rem; bottom: 0.2rem; width: 1px; background: var(--ox-border-strong); }
+.ox-timeline li:last-child { padding-bottom: 0; }
+.ox-timeline li:last-child::after { display: none; }
+.ox-timeline li[data-state="done"]::before { background: var(--ox-fg); }
+.ox-timeline li[data-state="upcoming"]::before { border-color: var(--ox-border-strong); border-style: dashed; }
+.ox-timeline time { display: block; margin-bottom: 2px; font: 400 var(--ox-text-xs) var(--ox-font-mono); color: var(--ox-fg-subtle); }
+.ox-timeline b { display: block; font-size: var(--ox-text-sm); font-weight: 500; }
+.ox-timeline p { margin: 2px 0 0; font-size: var(--ox-text-sm); color: var(--ox-fg-muted); }
+
+/* =========================================================
+   24. Banner (dismissible announcement)
+   ========================================================= */
+.ox-banner {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ox-space-2) var(--ox-space-4);
+  padding: var(--ox-space-2) 3rem;
+  font-size: var(--ox-text-sm);
+  text-align: center;
+  color: var(--ox-inverse);
+  background: var(--ox-fg);
+}
+.ox-banner a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
+.ox-banner-close { position: absolute; right: var(--ox-space-2); top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -1rem; padding: 0; color: inherit; background: transparent; border: 0; border-radius: var(--ox-radius-sm); opacity: 0.7; cursor: pointer; }
+.ox-banner-close:hover { opacity: 1; background: color-mix(in srgb, var(--ox-inverse) 15%, transparent); }
+.ox-banner[hidden] { display: none; }
+
+/* =========================================================
+   25. Avatar status
+   ========================================================= */
+.ox-avatar[data-status] { position: relative; overflow: visible; }
+.ox-avatar[data-status]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; border: 2px solid var(--ox-surface); }
+.ox-avatar[data-status="online"]::after { background: var(--ox-fg); }
+.ox-avatar[data-status="away"]::after { background: var(--ox-bg); box-shadow: inset 0 0 0 2px var(--ox-fg); }
+.ox-avatar[data-status="offline"]::after { background: var(--ox-border-strong); }
+
+/* Skip link: hidden until a keyboard user tabs to it, then jumps past the navigation */
+.ox-skip {
+  position: fixed;
+  left: var(--ox-space-4);
+  top: var(--ox-space-3);
+  z-index: 1200;
+  padding: var(--ox-space-2) var(--ox-space-4);
+  font: 500 var(--ox-text-sm) var(--ox-font-sans);
+  color: var(--ox-inverse);
+  background: var(--ox-fg);
+  border-radius: var(--ox-radius-full);
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform var(--ox-duration) var(--ox-ease);
+}
+.ox-skip:focus { transform: none; }
+
+/* =========================================================
+   26. Touch screens: comfortable tap targets
+   ========================================================= */
+@media (pointer: coarse) {
+  .ox-btn-sm, .ox-chip, .ox-pagination a, .ox-pagination span { min-height: 2.5rem; }
+  .ox-btn-sm.ox-btn-icon { width: 2.5rem; }
+  .ox-segmented button { height: 2.25rem; }
+  .ox-tab { padding-block: var(--ox-space-3); }
+  .ox-dropdown-item { min-height: 2.75rem; }
+  .ox-checkbox, .ox-radio, .ox-switch { min-height: 2.25rem; }
+}
+
+/* =========================================================
+   27. Keyframes & motion preferences
    ========================================================= */
 @keyframes ox-spin { to { transform: rotate(360deg); } }
 @keyframes ox-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@@ -884,3 +1143,7 @@
     transition-duration: 1ms !important;
   }
 }
+
+/* Theme switch: the new theme is revealed by a clip-path circle (see Onyx.theme.set) */
+::view-transition-old(root),
+::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

package/src/onyx.js

@@ -1,5 +1,5 @@
 /*!
- * Onyx v1.0.0 — interactive behaviors
+ * Onyx v1.1.1 — interactive behaviors
  * Zero dependencies. Works via data attributes, or the window.Onyx API.
  */
 (function (global) {
@@ -107,11 +107,25 @@
     return global.matchMedia && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   }
 
-  function setTheme(theme) {
+  function applyTheme(theme) {
     document.documentElement.setAttribute("data-theme", theme);
     try { localStorage.setItem(THEME_KEY, theme); } catch (e) { /* storage unavailable */ }
   }
 
+  // With a point ({ x, y }), the new theme spreads out from it like ink, where the browser supports it
+  function setTheme(theme, from) {
+    var reduce = global.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (!from || reduce || !document.startViewTransition) { applyTheme(theme); return; }
+    var r = Math.hypot(Math.max(from.x, innerWidth - from.x), Math.max(from.y, innerHeight - from.y));
+    var vt = document.startViewTransition(function () { applyTheme(theme); });
+    vt.ready.then(function () {
+      document.documentElement.animate(
+        { clipPath: ["circle(0px at " + from.x + "px " + from.y + "px)", "circle(" + r + "px at " + from.x + "px " + from.y + "px)"] },
+        { duration: 520, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)", pseudoElement: "::view-transition-new(root)" }
+      );
+    }).catch(function () {});
+  }
+
   function restoreTheme() {
     try {
       var saved = localStorage.getItem(THEME_KEY);
@@ -125,10 +139,101 @@
     document.querySelectorAll(".ox-navbar").forEach(function (n) { n.setAttribute("data-scrolled", scrolled); });
   }
 
+  /* ---------- Mobile navigation menu ---------- */
+  function setNav(nav, open) {
+    if (!nav) return;
+    nav.setAttribute("data-open", String(open));
+    var toggle = nav.querySelector("[data-ox-nav-toggle]");
+    if (toggle) {
+      toggle.setAttribute("aria-expanded", String(open));
+      toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+    }
+    document.body.classList.toggle("ox-nav-locked", open);
+  }
+
+  /* ---------- Range slider fill ---------- */
+  function syncRange(r) {
+    var min = +r.min || 0, max = r.max === "" ? 100 : +r.max;
+    r.style.setProperty("--_pct", ((+r.value - min) / (max - min || 1)) * 100 + "%");
+  }
+
+  /* ---------- Number stepper ---------- */
+  function step(btn) {
+    var box = btn.closest(".ox-stepper");
+    var input = box.querySelector("input");
+    var by = +btn.getAttribute("data-step") * (+input.step || 1);
+    var min = input.min === "" ? -Infinity : +input.min;
+    var max = input.max === "" ? Infinity : +input.max;
+    var next = Math.min(max, Math.max(min, (+input.value || 0) + by));
+    input.value = +next.toFixed(6);
+    syncStepper(box);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  function syncStepper(box) {
+    var input = box.querySelector("input");
+    var v = +input.value;
+    box.querySelectorAll("[data-step]").forEach(function (b) {
+      var dir = +b.getAttribute("data-step");
+      b.disabled = dir < 0 ? input.min !== "" && v <= +input.min : input.max !== "" && v >= +input.max;
+    });
+  }
+
+  /* ---------- Chips ---------- */
+  function toggleChip(chip) {
+    var group = chip.closest(".ox-chips");
+    var on = chip.getAttribute("aria-pressed") !== "true";
+    if (group && group.hasAttribute("data-single")) {
+      group.querySelectorAll(".ox-chip").forEach(function (c) { c.setAttribute("aria-pressed", "false"); });
+      on = true;
+    }
+    chip.setAttribute("aria-pressed", String(on));
+    if (group) {
+      var values = Array.prototype.filter.call(group.querySelectorAll(".ox-chip"), function (c) { return c.getAttribute("aria-pressed") === "true"; })
+        .map(function (c) { return c.value || c.textContent.trim(); });
+      group.dispatchEvent(new CustomEvent("ox:change", { bubbles: true, detail: { value: values } }));
+    }
+  }
+
+  function initWidgets(root) {
+    (root || document).querySelectorAll(".ox-range").forEach(syncRange);
+    (root || document).querySelectorAll(".ox-stepper").forEach(syncStepper);
+    // Banners dismissed before stay hidden
+    (root || document).querySelectorAll(".ox-banner[data-ox-banner]").forEach(function (b) {
+      try { if (localStorage.getItem("ox-banner-" + b.getAttribute("data-ox-banner"))) b.hidden = true; } catch (e) { /* storage unavailable */ }
+    });
+  }
+
   /* ---------- Event delegation ---------- */
+  document.addEventListener("input", function (e) {
+    if (e.target.classList && e.target.classList.contains("ox-range")) syncRange(e.target);
+    var box = e.target.closest && e.target.closest(".ox-stepper");
+    if (box) syncStepper(box);
+  });
+
   document.addEventListener("click", function (e) {
     var t = e.target;
 
+    var navToggle = t.closest("[data-ox-nav-toggle]");
+    if (navToggle) { var nav = navToggle.closest(".ox-navbar"); setNav(nav, nav.getAttribute("data-open") !== "true"); return; }
+    if (t.closest(".ox-navbar-menu a")) setNav(t.closest(".ox-navbar"), false);
+
+    var stepBtn = t.closest(".ox-stepper [data-step]");
+    if (stepBtn) { step(stepBtn); return; }
+
+    var chip = t.closest(".ox-chip");
+    if (chip) { toggleChip(chip); return; }
+
+    var dismiss = t.closest("[data-ox-dismiss]");
+    if (dismiss) {
+      var banner = dismiss.closest(".ox-banner");
+      if (banner) {
+        banner.hidden = true;
+        try { if (banner.getAttribute("data-ox-banner")) localStorage.setItem("ox-banner-" + banner.getAttribute("data-ox-banner"), "1"); } catch (err) { /* storage unavailable */ }
+      }
+      return;
+    }
+
     var opener = t.closest("[data-ox-modal-open]");
     if (opener) { openModal(opener.getAttribute("data-ox-modal-open")); return; }
 
@@ -160,7 +265,11 @@
     var toaster = t.closest("[data-ox-toast]");
     if (toaster) toast(toaster.getAttribute("data-ox-toast"));
 
-    if (t.closest("[data-ox-theme-toggle]")) setTheme(currentTheme() === "dark" ? "light" : "dark");
+    var themeBtn = t.closest("[data-ox-theme-toggle]");
+    if (themeBtn) {
+      var r = themeBtn.getBoundingClientRect();
+      setTheme(currentTheme() === "dark" ? "light" : "dark", { x: r.left + r.width / 2, y: r.top + r.height / 2 });
+    }
   });
 
   document.addEventListener("keydown", function (e) {
@@ -168,6 +277,8 @@
     if (e.key === "Escape") {
       if (openModalEl) closeModal(openModalEl);
       closeAllDropdowns();
+      var openNav = document.querySelector('.ox-navbar[data-open="true"]');
+      if (openNav) { setNav(openNav, false); var tg = openNav.querySelector("[data-ox-nav-toggle]"); if (tg) tg.focus(); }
     }
     if (e.key === "Tab" && openModalEl) trapFocus(openModalEl, e);
 
@@ -183,14 +294,24 @@
   });
 
   global.addEventListener("scroll", syncNavbars, { passive: true });
-  document.addEventListener("DOMContentLoaded", syncNavbars);
+  // Close the mobile menu if the window grows past the breakpoint while it's open
+  global.addEventListener("resize", function () {
+    document.querySelectorAll('.ox-navbar[data-open="true"]').forEach(function (n) {
+      var toggle = n.querySelector("[data-ox-nav-toggle]");
+      if (toggle && getComputedStyle(toggle).display === "none") setNav(n, false);
+    });
+  });
+  document.addEventListener("DOMContentLoaded", function () { syncNavbars(); initWidgets(); });
+  if (document.readyState !== "loading") initWidgets();
   restoreTheme();
 
   global.Onyx = {
-    version: "1.0.0",
+    version: "1.1.1",
     modal: { open: openModal, close: closeModal },
     toast: toast,
     copy: copy,
-    theme: { get: currentTheme, set: setTheme }
+    theme: { get: currentTheme, set: setTheme },
+    nav: { open: function (n) { setNav(n || document.querySelector(".ox-navbar"), true); }, close: function (n) { setNav(n || document.querySelector(".ox-navbar"), false); } },
+    init: initWidgets
   };
 })(window);