@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/components/toast-region/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -89,7 +59,7 @@ function onEscapeKeydown(event) {
   const handler = escapeStack.at(-1);
   if (!handler)
     return;
-  handler();
+  handler(event);
 }
 var scrollLockCount = 0;
 var originalBodyOverflow = null;
@@ -230,11 +200,16 @@ function useReducedMotion() {
 
 // src/components/toast-region/toast-region.svelte
 var root_2 = $2.from_html(`<div class="cinder-toast__icon" aria-hidden="true"><!></div>`);
-var root_3 = $2.from_html(`<span class="cinder-toast__spinner" aria-hidden="true"></span>`);
-var root_4 = $2.from_html(`<button type="button" class="cinder-toast__action"> </button>`);
-var root_5 = $2.from_html(`<button type="button" class="cinder-toast__dismiss" aria-label="Dismiss notification"><svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
+var root_4 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path></svg>`);
+var root_5 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`);
+var root_6 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path></svg>`);
+var root_7 = $2.from_svg(`<svg viewBox="0 0 20 20" fill="currentColor" style="color: var(--_cinder-toast-accent)"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path></svg>`);
+var root_3 = $2.from_html(`<div class="cinder-toast__icon" aria-hidden="true"><!></div>`);
+var root_8 = $2.from_html(`<span class="cinder-toast__spinner" aria-hidden="true"></span>`);
+var root_9 = $2.from_html(`<button type="button" class="cinder-toast__action"> </button>`);
+var root_10 = $2.from_html(`<button type="button" class="cinder-toast__dismiss"><svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
 var root_1 = $2.from_html(`<div class="cinder-toast-shell"><div class="cinder-toast" role="group" aria-label="Notification"><!> <!> <div class="cinder-toast__message"> </div> <!> <!></div></div>`);
-var root_7 = $2.from_html(`<div role="presentation"><div role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel"></div> <div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel" data-cinder-stack="assertive"></div></div>`);
+var root_12 = $2.from_html(`<div role="presentation"><div role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel"></div> <div role="alert" aria-live="assertive" aria-atomic="true" aria-relevant="additions" class="cinder-toast-region__channel" data-cinder-stack="assertive"></div></div>`);
 var root = $2.from_html(`<!> <!>`, 1);
 function Toast_region($$anchor, $$props) {
   $2.push($$props, true);
@@ -250,29 +225,65 @@ function Toast_region($$anchor, $$props) {
         $2.reset(div_2);
         $2.append($$anchor3, div_2);
       };
+      var consequent_4 = ($$anchor3) => {
+        var div_3 = root_3();
+        var node_2 = $2.child(div_3);
+        {
+          var consequent_1 = ($$anchor4) => {
+            var svg = root_4();
+            $2.append($$anchor4, svg);
+          };
+          var consequent_2 = ($$anchor4) => {
+            var svg_1 = root_5();
+            $2.append($$anchor4, svg_1);
+          };
+          var consequent_3 = ($$anchor4) => {
+            var svg_2 = root_6();
+            $2.append($$anchor4, svg_2);
+          };
+          var alternate = ($$anchor4) => {
+            var svg_3 = root_7();
+            $2.append($$anchor4, svg_3);
+          };
+          $2.if(node_2, ($$render) => {
+            if (toast().variant === "success")
+              $$render(consequent_1);
+            else if (toast().variant === "warning")
+              $$render(consequent_2, 1);
+            else if (toast().variant === "danger")
+              $$render(consequent_3, 2);
+            else
+              $$render(alternate, -1);
+          });
+        }
+        $2.reset(div_3);
+        $2.append($$anchor3, div_3);
+      };
       $2.if(node, ($$render) => {
         if (toast().icon)
           $$render(consequent);
+        else if (toast().showIcon)
+          $$render(consequent_4, 1);
       });
     }
-    var node_2 = $2.sibling(node, 2);
+    var node_3 = $2.sibling(node, 2);
     {
-      var consequent_1 = ($$anchor3) => {
-        var span = root_3();
+      var consequent_5 = ($$anchor3) => {
+        var span = root_8();
         $2.append($$anchor3, span);
       };
-      $2.if(node_2, ($$render) => {
+      $2.if(node_3, ($$render) => {
         if (toast().pending)
-          $$render(consequent_1);
+          $$render(consequent_5);
       });
     }
-    var div_3 = $2.sibling(node_2, 2);
-    var text = $2.child(div_3, true);
-    $2.reset(div_3);
-    var node_3 = $2.sibling(div_3, 2);
+    var div_4 = $2.sibling(node_3, 2);
+    var text = $2.child(div_4, true);
+    $2.reset(div_4);
+    var node_4 = $2.sibling(div_4, 2);
     {
-      var consequent_2 = ($$anchor3) => {
-        var button = root_4();
+      var consequent_6 = ($$anchor3) => {
+        var button = root_9();
         var text_1 = $2.child(button, true);
         $2.reset(button);
         $2.template_effect(() => {
@@ -282,22 +293,25 @@ function Toast_region($$anchor, $$props) {
         $2.delegated("click", button, () => handleActionClick(toast()));
         $2.append($$anchor3, button);
       };
-      $2.if(node_3, ($$render) => {
+      $2.if(node_4, ($$render) => {
         if (toast().action)
-          $$render(consequent_2);
+          $$render(consequent_6);
       });
     }
-    var node_4 = $2.sibling(node_3, 2);
+    var node_5 = $2.sibling(node_4, 2);
     {
-      var consequent_3 = ($$anchor3) => {
-        var button_1 = root_5();
-        $2.template_effect(() => button_1.disabled = toast().leaving);
+      var consequent_7 = ($$anchor3) => {
+        var button_1 = root_10();
+        $2.template_effect(($0) => {
+          $2.set_attribute(button_1, "aria-label", $0);
+          button_1.disabled = toast().leaving;
+        }, [() => dismissLabel(toast().message)]);
         $2.delegated("click", button_1, () => beginDismiss(toast().id, "dismiss-button"));
         $2.append($$anchor3, button_1);
       };
-      $2.if(node_4, ($$render) => {
+      $2.if(node_5, ($$render) => {
         if (toast().dismissible)
-          $$render(consequent_3);
+          $$render(consequent_7);
       });
     }
     $2.reset(div_1);
@@ -397,6 +411,7 @@ function Toast_region($$anchor, $$props) {
         variant,
         duration,
         dismissible,
+        showIcon: options.showIcon ?? false,
         generation: 0,
         pending: options.pending ?? false,
         leaving: false,
@@ -414,6 +429,7 @@ function Toast_region($$anchor, $$props) {
       variant,
       duration,
       dismissible,
+      showIcon: options.showIcon ?? false,
       generation: nextGeneration(id),
       pending: options.pending ?? false,
       leaving: false,
@@ -747,6 +763,15 @@ function Toast_region($$anchor, $$props) {
     };
   }
   setToastContext({ show, dismiss, dismissAll, promise });
+  const DISMISS_LABEL_MAX = 60;
+  function dismissLabel(message) {
+    const trimmed = message.trim();
+    if (trimmed.length === 0)
+      return "Dismiss notification";
+    if (trimmed.length <= DISMISS_LABEL_MAX)
+      return `Dismiss: ${trimmed}`;
+    return `Dismiss: ${trimmed.slice(0, DISMISS_LABEL_MAX - 1).trimEnd()}…`;
+  }
   onDestroy(() => {
     destroyed = true;
     for (const id of timers.keys())
@@ -759,50 +784,50 @@ function Toast_region($$anchor, $$props) {
     releaseToastEscapeHandler();
   });
   var fragment = root();
-  var node_5 = $2.first_child(fragment);
+  var node_6 = $2.first_child(fragment);
   {
-    var consequent_4 = ($$anchor2) => {
+    var consequent_8 = ($$anchor2) => {
       var fragment_1 = $2.comment();
-      var node_6 = $2.first_child(fragment_1);
-      $2.snippet(node_6, () => $$props.children);
+      var node_7 = $2.first_child(fragment_1);
+      $2.snippet(node_7, () => $$props.children);
       $2.append($$anchor2, fragment_1);
     };
-    $2.if(node_5, ($$render) => {
+    $2.if(node_6, ($$render) => {
       if ($$props.children)
-        $$render(consequent_4);
+        $$render(consequent_8);
     });
   }
-  var node_7 = $2.sibling(node_5, 2);
+  var node_8 = $2.sibling(node_6, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var div_4 = root_7();
-      var div_5 = $2.child(div_4);
-      $2.each(div_5, 23, () => $2.get(politeStack), (toast) => `${toast.id}:${toast.generation}`, ($$anchor3, toast, index) => {
+    var consequent_9 = ($$anchor2) => {
+      var div_5 = root_12();
+      var div_6 = $2.child(div_5);
+      $2.each(div_6, 23, () => $2.get(politeStack), (toast) => `${toast.id}:${toast.generation}`, ($$anchor3, toast, index) => {
         toastItem($$anchor3, () => $2.get(toast), () => $2.get(index));
       });
-      $2.reset(div_5);
-      var div_6 = $2.sibling(div_5, 2);
-      $2.each(div_6, 23, () => $2.get(assertiveStack), (toast) => `${toast.id}:${toast.generation}`, ($$anchor3, toast, index) => {
+      $2.reset(div_6);
+      var div_7 = $2.sibling(div_6, 2);
+      $2.each(div_7, 23, () => $2.get(assertiveStack), (toast) => `${toast.id}:${toast.generation}`, ($$anchor3, toast, index) => {
         toastItem($$anchor3, () => $2.get(toast), () => $2.get(index));
       });
-      $2.reset(div_6);
-      $2.reset(div_4);
-      $2.bind_this(div_4, ($$value) => $2.set(regionElement, $$value), () => $2.get(regionElement));
+      $2.reset(div_7);
+      $2.reset(div_5);
+      $2.bind_this(div_5, ($$value) => $2.set(regionElement, $$value), () => $2.get(regionElement));
       $2.template_effect(($0) => {
-        $2.set_class(div_4, 1, $0);
-        $2.set_attribute(div_4, "data-cinder-position", position());
+        $2.set_class(div_5, 1, $0);
+        $2.set_attribute(div_5, "data-cinder-position", position());
       }, [
         () => $2.clsx(classNames("cinder-toast-region", $$props.class))
       ]);
-      $2.event("pointerenter", div_4, () => setRegionPointerInside(true));
-      $2.event("pointerleave", div_4, () => setRegionPointerInside(false));
-      $2.delegated("focusin", div_4, handleRegionFocusIn);
-      $2.delegated("focusout", div_4, handleRegionFocusOut);
-      $2.append($$anchor2, div_4);
+      $2.event("pointerenter", div_5, () => setRegionPointerInside(true));
+      $2.event("pointerleave", div_5, () => setRegionPointerInside(false));
+      $2.delegated("focusin", div_5, handleRegionFocusIn);
+      $2.delegated("focusout", div_5, handleRegionFocusOut);
+      $2.append($$anchor2, div_5);
     };
-    $2.if(node_7, ($$render) => {
+    $2.if(node_8, ($$render) => {
       if ($2.get(hydrated))
-        $$render(consequent_5);
+        $$render(consequent_9);
     });
   }
   $2.append($$anchor, fragment);
@@ -817,4 +842,4 @@ export {
   Toast_region as ToastRegion
 };
 
-//# debugId=743CD062A565D72C64756E2164756E21
+//# debugId=E27A9D75BCD0DB6264756E2164756E21

package/dist/components/toast-region/toast-region.schema.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -78,7 +48,8 @@ var schema = {
     unsupportedProps: [
       {
         name: "children",
-        reason: "function-or-snippet"
+        reason: "function-or-snippet",
+        description: "Optional children. When provided, the region wraps them so descendants\ncan call `useToast()` and read the region's context. Most apps mount\n`<ToastRegion>` as a self-closing tag at the root of their layout and\nleave this empty — but some patterns (modal-scoped regions, tests)\nbenefit from explicit child composition."
       }
     ]
   }
@@ -88,4 +59,4 @@ export {
   toast_region_schema_default as default
 };
 
-//# debugId=7D44F6304D2EAB4564756E2164756E21
+//# debugId=078A1348170A65CD64756E2164756E21

package/dist/components/toast-region/toast-region.variables.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -58,4 +28,4 @@ export {
   toast_region_variables_default as default
 };
 
-//# debugId=C42F89787C092FD364756E2164756E21
+//# debugId=9B715B0AACAD301664756E2164756E21

package/dist/components/toggle/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -58,21 +28,53 @@ import"@lostgradient/cinder/toggle/styles";
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/toggle/toggle.svelte
 var root_1 = $.from_html(`<input type="checkbox" hidden=""/>`);
 var root = $.from_html(`<span class="cinder-toggle-field"><button type="button" role="switch"><span aria-hidden="true" class="cinder-toggle__thumb"></span></button> <!> <span class="cinder-toggle-field__label" role="presentation"> </span></span>`);
 function Toggle($$anchor, $$props) {
   $.push($$props, true);
-  let checked = $.prop($$props, "checked", 15, false), disabled = $.prop($$props, "disabled", 3, false), hideLabel = $.prop($$props, "hideLabel", 3, false), value = $.prop($$props, "value", 3, "on");
+  let checked = $.prop($$props, "checked", 15, false), hideLabel = $.prop($$props, "hideLabel", 3, false), value = $.prop($$props, "value", 3, "on");
+  const context = getFormFieldContext();
+  const resolvedDisabled = $.derived(() => $$props.disabled ?? context?.disabled ?? false);
   const labelId = $.derived(() => `${$$props.id}-label`);
   function toggle() {
-    if (!disabled()) {
-      checked(!checked());
+    if (!$.get(resolvedDisabled)) {
+      commitValue(!checked(), $$props.onValueChange, (next) => {
+        checked(next);
+      });
     }
   }
   var span = root();
@@ -86,7 +88,7 @@ function Toggle($$anchor, $$props) {
       $.template_effect(() => {
         $.set_attribute(input, "name", $$props.name);
         $.set_attribute(input, "form", $$props.form);
-        input.disabled = disabled();
+        input.disabled = $.get(resolvedDisabled);
         if (input_value !== (input_value = value())) {
           input.value = (input.__value = value()) ?? "";
         }
@@ -107,12 +109,12 @@ function Toggle($$anchor, $$props) {
     $.set_attribute(button, "id", $$props.id);
     $.set_attribute(button, "aria-checked", checked());
     $.set_attribute(button, "aria-labelledby", $.get(labelId));
-    button.disabled = disabled();
+    button.disabled = $.get(resolvedDisabled);
     $.set_class(button, 1, $0);
     $.set_attribute(button, "data-cinder-checked", checked() ? "" : undefined);
     $.set_attribute(span_1, "id", $.get(labelId));
     $.set_attribute(span_1, "data-hidden", hideLabel() || undefined);
-    $.set_attribute(span_1, "data-disabled", disabled() || undefined);
+    $.set_attribute(span_1, "data-disabled", $.get(resolvedDisabled) || undefined);
     $.set_text(text, $$props.label);
   }, [() => $.clsx(classNames("cinder-toggle", $$props.class))]);
   $.delegated("click", button, toggle);
@@ -129,4 +131,4 @@ export {
   Toggle
 };
 
-//# debugId=8153DAAB9FF92C4E64756E2164756E21
+//# debugId=CE92D9537397EDB064756E2164756E21

package/dist/components/toggle/toggle.css

@@ -64,7 +64,7 @@
     vertical-align: middle;
 
     /* Track background — unset (off) state. */
-    background: var(--cinder-toggle-track-off, var(--cinder-border-muted));
+    background: var(--cinder-toggle-track-off, var(--cinder-toggle-track-off-resting));
 
     transition:
       background-color var(--cinder-duration-fast, 150ms) var(--cinder-ease-standard, ease),
@@ -107,7 +107,10 @@
 
   @media (hover: hover) {
     .cinder-toggle:hover:not(:disabled) {
-      background: var(--cinder-toggle-track-off-hover, var(--cinder-border));
+      background: var(
+        --cinder-toggle-track-off-hover,
+        var(--cinder-toggle-track-off-hover-resting)
+      );
     }
 
     .cinder-toggle[data-cinder-checked]:hover:not(:disabled) {

package/dist/components/toggle/toggle.schema.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -94,11 +64,20 @@ var schema = {
     }
   },
   additionalProperties: false,
-  required: ["id", "label"]
+  required: ["id", "label"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onValueChange",
+        reason: "function-or-snippet",
+        description: "Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it."
+      }
+    ]
+  }
 };
 var toggle_schema_default = schema;
 export {
   toggle_schema_default as default
 };
 
-//# debugId=4392BB025E53A05064756E2164756E21
+//# debugId=DE99FC2EB8725F9764756E2164756E21

package/dist/components/toggle/toggle.types.d.ts

@@ -18,6 +18,8 @@ export type ToggleProps = {
     id: string;
     /** Whether the toggle is currently checked. Bindable — defaults to false. */
     checked?: boolean;
+    /** Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it. */
+    onValueChange?: (next: boolean) => boolean | void;
     /** Visible label text. Always the accessible name, even when `hideLabel` is set. Required. */
     label: string;
     /** Prevents interaction when true. Sets `disabled` attribute. */

package/dist/components/toggle/toggle.variables.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -58,4 +28,4 @@ export {
   toggle_variables_default as default
 };
 
-//# debugId=3F14F245DC7B4E8D64756E2164756E21
+//# debugId=F97D60E79660A8F164756E2164756E21

package/dist/components/toolbar/index.js

@@ -1,34 +1,4 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -626,4 +596,4 @@ export {
   Toolbar2 as Toolbar
 };
 
-//# debugId=E21B607004909AE064756E2164756E21
+//# debugId=9A594CA4722F8CC464756E2164756E21