@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/server/components/dropdown-item/index.js

@@ -62,40 +62,90 @@ function Dropdown_item($$renderer, $$props) {
       closeOnSelect = true,
       class: customClassName,
       onclick,
+      onkeydown,
+      href,
       children,
       $$slots,
       $$events,
       ...rest
     } = $$props;
     const context = getDropdownContext();
+    const isLink = $.derived(() => href !== undefined);
+    const sharedClass = $.derived(() => classNames("cinder-_option-row", "cinder-dropdown-item", inset && "cinder-dropdown-item--inset", customClassName));
     function handleClick(event) {
-      if (disabled)
+      if (disabled) {
+        event.preventDefault();
         return;
+      }
       if (typeof onclick === "function") {
-        onclick(event);
+        if (isLink()) {
+          onclick(event);
+        } else {
+          onclick(event);
+        }
       }
       if (closeOnSelect) {
         context.close();
       }
     }
-    $$renderer2.push(`<button${$.attributes({
-      ...rest,
-      type: "button",
-      role: "menuitem",
-      class: $.clsx(classNames("cinder-_option-row", "cinder-dropdown-item", inset && "cinder-dropdown-item--inset", customClassName)),
-      "data-cinder-variant": variant,
-      tabindex: -1,
-      "data-disabled": disabled ? "" : undefined,
-      "aria-disabled": disabled ? "true" : undefined
-    })}>`);
-    if (children) {
+    function handleAnchorKeydown(event) {
+      if (typeof onkeydown === "function") {
+        onkeydown(event);
+      }
+      if (event.defaultPrevented)
+        return;
+      if (event.key !== " " && event.key !== "Spacebar")
+        return;
+      event.preventDefault();
+      if (disabled)
+        return;
+      event.currentTarget.click();
+    }
+    const anchorAttributes = rest;
+    const buttonAttributes = rest;
+    const buttonType = $.derived(() => rest.type ?? "button");
+    if (isLink()) {
       $$renderer2.push("<!--[0-->");
-      children($$renderer2);
-      $$renderer2.push(`<!---->`);
+      $$renderer2.push(`<a${$.attributes({
+        ...anchorAttributes,
+        href,
+        role: "menuitem",
+        class: $.clsx(sharedClass()),
+        "data-cinder-variant": variant,
+        tabindex: -1,
+        "data-disabled": disabled ? "" : undefined,
+        "aria-disabled": disabled ? "true" : undefined
+      })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></a>`);
     } else {
       $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<button${$.attributes({
+        ...buttonAttributes,
+        type: buttonType(),
+        role: "menuitem",
+        class: $.clsx(sharedClass()),
+        "data-cinder-variant": variant,
+        tabindex: -1,
+        "data-disabled": disabled ? "" : undefined,
+        "aria-disabled": disabled ? "true" : undefined
+      })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></button>`);
     }
-    $$renderer2.push(`<!--]--></button>`);
+    $$renderer2.push(`<!--]-->`);
   });
 }
 
@@ -106,4 +156,4 @@ export {
   Dropdown_item as DropdownItem
 };
 
-//# debugId=0C5A1A8FB276531064756E2164756E21
+//# debugId=24235C91107A743264756E2164756E21

package/dist/server/components/floating-action-button/index.css

@@ -124,7 +124,7 @@
   }
 
   .cinder-fab[data-cinder-color="primary"]:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--cinder-accent-active);
+    background: var(--cinder-accent-active-on-fill);
   }
 
   .cinder-fab[data-cinder-color="secondary"]:active:not(:disabled):not([aria-disabled="true"]), .cinder-fab[data-cinder-color="surface"]:active:not(:disabled):not([aria-disabled="true"]) {

package/dist/server/components/json-schema-editor/index.js

@@ -7605,6 +7605,7 @@ function Badge($$renderer, $$props) {
     let {
       variant = "neutral",
       size = "md",
+      mono = false,
       class: customClassName,
       children,
       $$slots,
@@ -7615,6 +7616,7 @@ function Badge($$renderer, $$props) {
       class: $4.clsx(classNames("cinder-badge", customClassName)),
       "data-cinder-variant": variant,
       "data-cinder-size": size,
+      "data-cinder-mono": mono ? "" : undefined,
       ...rest
     })}>`);
     children?.($$renderer2);
@@ -7627,6 +7629,19 @@ import * as $5 from "svelte/internal/server";
 import { untrack } from "svelte";
 
 // src/_internal/collection.ts
+function createSingleSelection(getValue, setValue) {
+  return {
+    get value() {
+      return getValue();
+    },
+    select(next) {
+      setValue(next);
+    },
+    isSelected(candidate) {
+      return getValue() === candidate;
+    }
+  };
+}
 function createMultiSelection(getValues, setValues) {
   return {
     get values() {
@@ -7988,6 +8003,7 @@ function Alert($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
+    const resolvedVariant = $9.derived(() => variant === "danger" ? "error" : variant);
     let visible = true;
     let rootElement = undefined;
     async function handleDismiss() {
@@ -8036,7 +8052,7 @@ function Alert($$renderer, $$props) {
       $$renderer2.push(`<div${$9.attributes({
         ...restWithoutForbidden(),
         class: $9.clsx(classNames("cinder-alert", "cinder-_status-surface", className)),
-        "data-cinder-variant": variant,
+        "data-cinder-variant": resolvedVariant(),
         role: "alert"
       })}>`);
       if (icon) {
@@ -8085,6 +8101,9 @@ function Button($$renderer, $$props) {
       "aria-busy": consumerAriaBusy,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-haspopup": ariaHaspopup,
       $$slots,
       $$events,
       ...rest
@@ -8173,7 +8192,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></a>`);
@@ -8188,7 +8210,10 @@ function Button($$renderer, $$props) {
         "aria-disabled": resolvedAriaDisabled(),
         "aria-busy": resolvedAriaBusy(),
         "aria-label": resolvedAriaLabel(),
-        "aria-labelledby": resolvedAriaLabelledBy()
+        "aria-labelledby": resolvedAriaLabelledBy(),
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        "aria-haspopup": ariaHaspopup
       })}>`);
       buttonContent($$renderer2);
       $$renderer2.push(`<!----></button>`);
@@ -12827,4 +12852,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=6342EA54D3B5A9B264756E2164756E21
+//# debugId=EA43046AB823035564756E2164756E21

package/dist/server/components/keyboard-shortcuts/index.css

@@ -0,0 +1,86 @@
+/* src/components/keyboard-shortcuts/keyboard-shortcuts.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-keyboard-shortcuts {
+    display: flex;
+    gap: var(--cinder-space-4);
+    flex-direction: column;
+  }
+
+  .cinder-keyboard-shortcuts__heading {
+    font-size: var(--cinder-text-lg);
+    color: var(--cinder-text);
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .cinder-keyboard-shortcuts__intro {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-keyboard-shortcuts__group {
+    display: flex;
+    gap: var(--cinder-space-2);
+    flex-direction: column;
+  }
+
+  .cinder-keyboard-shortcuts__group-label {
+    font-size: var(--cinder-text-xs);
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    color: var(--cinder-text-muted);
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .cinder-keyboard-shortcuts__list {
+    display: flex;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    overflow: hidden;
+    flex-direction: column;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .cinder-keyboard-shortcuts__row {
+    display: flex;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    justify-content: space-between;
+    align-items:  center;
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-keyboard-shortcuts__row + .cinder-keyboard-shortcuts__row {
+    border-top: 1px solid var(--cinder-border);
+  }
+
+  .cinder-keyboard-shortcuts__action {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    flex: 1;
+  }
+
+  .cinder-keyboard-shortcuts__keys {
+    display: flex;
+    flex-shrink: 0;
+    align-items:  center;
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__keys-visual {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-keyboard-shortcuts__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    user-select: none;
+    line-height: 1;
+  }
+}

package/dist/server/components/keyboard-shortcuts/index.js

@@ -0,0 +1,149 @@
+import { createRequire } from "node:module";
+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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.svelte
+import * as $2 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/kbd/kbd.svelte
+import * as $ from "svelte/internal/server";
+function Kbd($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: customClassName,
+      size = "md",
+      label,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<kbd${$.attributes({
+      class: $.clsx(classNames("cinder-kbd", customClassName)),
+      "data-cinder-size": size,
+      ...rest
+    })}>`);
+    if (children) {
+      $$renderer2.push("<!--[0-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`${$.escape(label)}`);
+    }
+    $$renderer2.push(`<!--]--></kbd>`);
+  });
+}
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.svelte
+function Keyboard_shortcuts($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const baseId = $2.props_id($$renderer2);
+    let {
+      groups,
+      heading,
+      children,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const groupHeadingId = (index) => `${baseId}-group-${index}`;
+    function resolveKeysLabel(keys, keysLabel) {
+      if (keysLabel)
+        return keysLabel;
+      return keys.join(" plus ");
+    }
+    $$renderer2.push(`<div${$2.attributes({
+      ...rest,
+      class: $2.clsx(classNames("cinder-keyboard-shortcuts", customClassName))
+    })}>`);
+    if (heading) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<h2 class="cinder-keyboard-shortcuts__heading">${$2.escape(heading)}</h2>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (children) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-keyboard-shortcuts__intro">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <!--[-->`);
+    const each_array = $2.ensure_array_like(groups);
+    for (let groupIndex = 0, $$length = each_array.length;groupIndex < $$length; groupIndex++) {
+      let group = each_array[groupIndex];
+      $$renderer2.push(`<section class="cinder-keyboard-shortcuts__group"${$2.attr("aria-labelledby", groupHeadingId(groupIndex))}><h3${$2.attr("id", groupHeadingId(groupIndex))} class="cinder-keyboard-shortcuts__group-label">${$2.escape(group.label)}</h3> <dl class="cinder-keyboard-shortcuts__list"><!--[-->`);
+      const each_array_1 = $2.ensure_array_like(group.shortcuts);
+      for (let shortcutIndex = 0, $$length2 = each_array_1.length;shortcutIndex < $$length2; shortcutIndex++) {
+        let shortcut = each_array_1[shortcutIndex];
+        $$renderer2.push(`<div class="cinder-keyboard-shortcuts__row"><dt class="cinder-keyboard-shortcuts__action">${$2.escape(shortcut.action)}</dt> <dd class="cinder-keyboard-shortcuts__keys"><span class="cinder-sr-only">${$2.escape(resolveKeysLabel(shortcut.keys, shortcut.keysLabel))}</span> <span aria-hidden="true" class="cinder-keyboard-shortcuts__keys-visual"><!--[-->`);
+        const each_array_2 = $2.ensure_array_like(shortcut.keys);
+        for (let index = 0, $$length3 = each_array_2.length;index < $$length3; index++) {
+          let key = each_array_2[index];
+          Kbd($$renderer2, { label: key, size: "sm" });
+          $$renderer2.push(`<!----> `);
+          if (index < shortcut.keys.length - 1) {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<span class="cinder-keyboard-shortcuts__separator">+</span>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]--></span></dd></div>`);
+      }
+      $$renderer2.push(`<!--]--></dl></section>`);
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+
+// src/components/keyboard-shortcuts/index.ts
+var keyboard_shortcuts_default = Keyboard_shortcuts;
+export {
+  keyboard_shortcuts_default as default,
+  Keyboard_shortcuts as KeyboardShortcuts
+};
+
+//# debugId=41E1EAD3B78AF42064756E2164756E21

package/dist/server/components/keyboard-shortcuts/keyboard-shortcuts.schema.js

@@ -0,0 +1,69 @@
+import { createRequire } from "node:module";
+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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    heading: {
+      type: "string",
+      description: "Optional heading for the entire shortcuts panel."
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-keyboard-shortcuts`."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "children",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "groups",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var keyboard_shortcuts_schema_default = schema;
+export {
+  keyboard_shortcuts_schema_default as default
+};
+
+//# debugId=A95F710D7A84976D64756E2164756E21

package/dist/server/components/keyboard-shortcuts/keyboard-shortcuts.variables.js

@@ -0,0 +1,43 @@
+import { createRequire } from "node:module";
+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 __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.variables.ts
+var variables = [];
+var keyboard_shortcuts_variables_default = variables;
+export {
+  keyboard_shortcuts_variables_default as default
+};
+
+//# debugId=449B6996FCEA385064756E2164756E21

package/dist/server/components/line-chart/index.css

@@ -82,10 +82,57 @@
     pointer-events: none;
   }
 
-  .cinder-line-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-line-chart__focus-ring, .cinder-line-chart__focus-ring-halo, .cinder-line-chart__focus-ring-connector, .cinder-line-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-line-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(var(--cinder-ring-width)  + var(--cinder-ring-offset)  + var(--cinder-ring-offset));
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-line-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-line-chart__focus-ring, .cinder-line-chart__focus-ring-connector, .cinder-line-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active="true"]) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-line-chart__tick-label {