@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/components/search-field/search-field.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 {
   search_field_variables_default as default
 };
 
-//# debugId=FD759BD5C349123564756E2164756E21
+//# debugId=035A758C80F7D94064756E2164756E21

package/dist/components/secret-value-field/index.d.ts

@@ -0,0 +1,5 @@
+import './secret-value-field.css';
+import SecretValueField from './secret-value-field.svelte';
+export default SecretValueField;
+export type { SecretValueFieldProps } from './secret-value-field.types.ts';
+export { SecretValueField };

package/dist/components/secret-value-field/index.js

@@ -0,0 +1,316 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/secret-value-field/index.ts
+import"@lostgradient/cinder/secret-value-field/styles";
+
+// src/components/secret-value-field/secret-value-field.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+import { onDestroy } from "svelte";
+
+// src/utilities/clipboard.ts
+async function copyToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  return legacyCopy(text);
+}
+function legacyCopy(text) {
+  if (typeof document === "undefined")
+    return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.setAttribute("tabindex", "-1");
+  textarea.style.position = "absolute";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let succeeded = false;
+  try {
+    succeeded = document.execCommand("copy");
+  } catch {
+    succeeded = false;
+  }
+  textarea.remove();
+  return succeeded;
+}
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+var root = $.from_html(`<div aria-atomic="true"> </div>`);
+function _visually_hidden_live_region($$anchor, $$props) {
+  $.push($$props, true);
+  let message = $.prop($$props, "message", 3, ""), announcementSequence = $.prop($$props, "announcementSequence", 3, 0), priority = $.prop($$props, "priority", 3, "polite");
+  let rendered = $.state("");
+  let setTimeoutId = null;
+  let version = 0;
+  let isDestroyed = false;
+  $.user_effect(() => {
+    return () => {
+      isDestroyed = true;
+      if (setTimeoutId) {
+        clearTimeout(setTimeoutId);
+        setTimeoutId = null;
+      }
+    };
+  });
+  $.user_effect(() => {
+    const next = message();
+    announcementSequence();
+    const current = ++version;
+    if (setTimeoutId) {
+      clearTimeout(setTimeoutId);
+      setTimeoutId = null;
+    }
+    $.set(rendered, "");
+    if (next === "")
+      return;
+    setTimeoutId = setTimeout(() => {
+      if (isDestroyed || version !== current)
+        return;
+      $.set(rendered, next, true);
+      setTimeoutId = null;
+    }, 0);
+  });
+  var div = root();
+  var text = $.child(div, true);
+  $.reset(div);
+  $.template_effect(($0) => {
+    $.set_attribute(div, "role", priority() === "assertive" ? "alert" : "status");
+    $.set_attribute(div, "aria-live", priority() === "assertive" ? "assertive" : "polite");
+    $.set_class(div, 1, $0);
+    $.set_text(text, $.get(rendered));
+  }, [() => $.clsx(classNames("cinder-sr-only", $$props.class))]);
+  $.append($$anchor, div);
+  $.pop();
+}
+
+// src/components/secret-value-field/secret-value-field.svelte
+var root_1 = $2.from_html(`<span class="cinder-secret-value-field__prefix" aria-hidden="true"> </span>`);
+var root_2 = $2.from_html(`<span class="cinder-secret-value-field__suffix" aria-hidden="true"> </span>`);
+var root_4 = $2.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="cinder-secret-value-field__icon" aria-hidden="true"><path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 00-1.06 1.06l14.5 14.5a.75.75 0 101.06-1.06l-1.745-1.745a10.029 10.029 0 003.3-4.38 1.651 1.651 0 000-1.185A10.004 10.004 0 009.999 3a9.956 9.956 0 00-4.744 1.194L3.28 2.22zM7.752 6.69l1.092 1.092a2.5 2.5 0 013.374 3.373l1.091 1.092a4 4 0 00-5.557-5.557z" clip-rule="evenodd"></path><path d="M10.748 13.93l2.523 2.524a9.987 9.987 0 01-3.27.547c-4.258 0-7.894-2.66-9.337-6.41a1.651 1.651 0 010-1.186A10.007 10.007 0 012.839 6.02L6.07 9.252a4 4 0 004.678 4.678z"></path></svg>`);
+var root_5 = $2.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="cinder-secret-value-field__icon" aria-hidden="true"><path d="M10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path><path fill-rule="evenodd" d="M.664 10.59a1.651 1.651 0 010-1.186A10.004 10.004 0 0110 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0110 17c-4.257 0-7.893-2.66-9.336-6.41zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>`);
+var root_3 = $2.from_html(`<button type="button" class="cinder-secret-value-field__toggle"><!></button>`);
+var root_6 = $2.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="cinder-secret-value-field__icon" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>`);
+var root_7 = $2.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="cinder-secret-value-field__icon" aria-hidden="true"><path d="M7 3.5A1.5 1.5 0 018.5 2h3.879a1.5 1.5 0 011.06.44l3.122 3.12A1.5 1.5 0 0117 6.622V12.5a1.5 1.5 0 01-1.5 1.5h-1v-3.379a3 3 0 00-.879-2.121L10.5 5.379A3 3 0 008.379 4.5H7v-1z"></path><path d="M4.5 6A1.5 1.5 0 003 7.5v9A1.5 1.5 0 004.5 18h7a1.5 1.5 0 001.5-1.5v-5.879a1.5 1.5 0 00-.44-1.06L9.44 6.439A1.5 1.5 0 008.378 6H4.5z"></path></svg>`);
+var root_8 = $2.from_html(`<div class="cinder-secret-value-field__warning"><!></div>`);
+var root2 = $2.from_html(`<div><span class="cinder-secret-value-field__label"> </span> <div class="cinder-secret-value-field__row" role="group"><!> <span class="cinder-secret-value-field__value"> </span> <!> <div class="cinder-secret-value-field__actions"><!> <button type="button" class="cinder-secret-value-field__copy"><!></button></div></div> <!> <!></div>`);
+function Secret_value_field($$anchor, $$props) {
+  const fieldId = $2.props_id();
+  $2.push($$props, true);
+  let label = $2.prop($$props, "label", 3, "Secret value"), allowReveal = $2.prop($$props, "allowReveal", 3, false), initiallyRevealed = $2.prop($$props, "initiallyRevealed", 3, false), confirmDuration = $2.prop($$props, "confirmDuration", 3, 1500), copiedLabel = $2.prop($$props, "copiedLabel", 3, "Copied"), rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "value",
+    "prefix",
+    "suffix",
+    "label",
+    "allowReveal",
+    "initiallyRevealed",
+    "confirmDuration",
+    "copiedLabel",
+    "warning",
+    "class"
+  ]);
+  const initiallyRevealedSeed = initiallyRevealed();
+  let revealed = $2.state($2.proxy(initiallyRevealedSeed));
+  let copied = $2.state(false);
+  let resetTimer;
+  const copiedAnnouncement = $2.derived(() => $2.get(copied) ? copiedLabel() : "");
+  const MASK = "••••••••••••••••";
+  async function handleCopy() {
+    const ok = await copyToClipboard($$props.value);
+    if (!ok)
+      return;
+    $2.set(copied, true);
+    if (resetTimer)
+      clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      $2.set(copied, false);
+    }, confirmDuration());
+  }
+  function handleRevealToggle() {
+    if (!allowReveal())
+      return;
+    $2.set(revealed, !$2.get(revealed));
+  }
+  onDestroy(() => {
+    if (resetTimer)
+      clearTimeout(resetTimer);
+  });
+  var div = root2();
+  $2.attribute_effect(div, ($0) => ({
+    ...rest,
+    class: $0,
+    "data-cinder-copied": $2.get(copied) || undefined,
+    "data-cinder-revealed": $2.get(revealed) || undefined
+  }), [() => classNames("cinder-secret-value-field", $$props.class)]);
+  var span = $2.child(div);
+  var text = $2.child(span, true);
+  $2.reset(span);
+  var div_1 = $2.sibling(span, 2);
+  var node = $2.child(div_1);
+  {
+    var consequent = ($$anchor2) => {
+      var span_1 = root_1();
+      var text_1 = $2.child(span_1, true);
+      $2.reset(span_1);
+      $2.template_effect(() => $2.set_text(text_1, $$props.prefix));
+      $2.append($$anchor2, span_1);
+    };
+    $2.if(node, ($$render) => {
+      if ($$props.prefix)
+        $$render(consequent);
+    });
+  }
+  var span_2 = $2.sibling(node, 2);
+  var text_2 = $2.child(span_2, true);
+  $2.reset(span_2);
+  var node_1 = $2.sibling(span_2, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_3 = root_2();
+      var text_3 = $2.child(span_3, true);
+      $2.reset(span_3);
+      $2.template_effect(() => $2.set_text(text_3, $$props.suffix));
+      $2.append($$anchor2, span_3);
+    };
+    $2.if(node_1, ($$render) => {
+      if ($$props.suffix)
+        $$render(consequent_1);
+    });
+  }
+  var div_2 = $2.sibling(node_1, 2);
+  var node_2 = $2.child(div_2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var button = root_3();
+      var node_3 = $2.child(button);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var svg = root_4();
+          $2.append($$anchor3, svg);
+        };
+        var alternate = ($$anchor3) => {
+          var svg_1 = root_5();
+          $2.append($$anchor3, svg_1);
+        };
+        $2.if(node_3, ($$render) => {
+          if ($2.get(revealed))
+            $$render(consequent_2);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $2.reset(button);
+      $2.template_effect(() => {
+        $2.set_attribute(button, "aria-pressed", $2.get(revealed));
+        $2.set_attribute(button, "aria-label", $2.get(revealed) ? `Hide ${label()}` : `Reveal ${label()}`);
+      });
+      $2.delegated("click", button, handleRevealToggle);
+      $2.append($$anchor2, button);
+    };
+    $2.if(node_2, ($$render) => {
+      if (allowReveal())
+        $$render(consequent_3);
+    });
+  }
+  var button_1 = $2.sibling(node_2, 2);
+  var node_4 = $2.child(button_1);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var svg_2 = root_6();
+      $2.append($$anchor2, svg_2);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var svg_3 = root_7();
+      $2.append($$anchor2, svg_3);
+    };
+    $2.if(node_4, ($$render) => {
+      if ($2.get(copied))
+        $$render(consequent_4);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
+  $2.reset(button_1);
+  $2.reset(div_2);
+  $2.reset(div_1);
+  var node_5 = $2.sibling(div_1, 2);
+  {
+    var consequent_5 = ($$anchor2) => {
+      var div_3 = root_8();
+      var node_6 = $2.child(div_3);
+      $2.snippet(node_6, () => $$props.warning);
+      $2.reset(div_3);
+      $2.append($$anchor2, div_3);
+    };
+    $2.if(node_5, ($$render) => {
+      if ($$props.warning)
+        $$render(consequent_5);
+    });
+  }
+  var node_7 = $2.sibling(node_5, 2);
+  _visually_hidden_live_region(node_7, {
+    get message() {
+      return $2.get(copiedAnnouncement);
+    }
+  });
+  $2.reset(div);
+  $2.template_effect(() => {
+    $2.set_attribute(span, "id", fieldId);
+    $2.set_text(text, label());
+    $2.set_attribute(div_1, "aria-labelledby", fieldId);
+    $2.set_attribute(span_2, "aria-label", $2.get(revealed) ? `${label()}, revealed` : `${label()}, masked`);
+    $2.set_attribute(span_2, "data-cinder-masked", !$2.get(revealed) || undefined);
+    $2.set_text(text_2, $2.get(revealed) ? $$props.value : MASK);
+    $2.set_attribute(button_1, "aria-label", `Copy ${label()}`);
+    $2.set_attribute(button_1, "data-cinder-copied", $2.get(copied) || undefined);
+  });
+  $2.delegated("click", button_1, handleCopy);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+$2.delegate(["click"]);
+
+// src/components/secret-value-field/index.ts
+var secret_value_field_default = Secret_value_field;
+export {
+  secret_value_field_default as default,
+  Secret_value_field as SecretValueField
+};
+
+//# debugId=41CF0DD27AF1914E64756E2164756E21

package/dist/components/secret-value-field/secret-value-field.css

@@ -0,0 +1,147 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  /* ========================================
+   * SECRET VALUE FIELD
+   * Masked display for API keys / tokens / secrets with copy action.
+   * ======================================== */
+
+  .cinder-secret-value-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    min-width: 0;
+  }
+
+  .cinder-secret-value-field__label {
+    display: block;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text-muted);
+    line-height: var(--cinder-leading-tight);
+  }
+
+  .cinder-secret-value-field__row {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    min-width: 0;
+    padding: var(--cinder-space-1-5) var(--cinder-space-2);
+    background: var(--cinder-surface-inset);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  /* Prefix and suffix: non-secret metadata shown alongside the masked value */
+  .cinder-secret-value-field__prefix,
+  .cinder-secret-value-field__suffix {
+    flex-shrink: 0;
+    color: var(--cinder-text-muted);
+    user-select: none;
+  }
+
+  /* The masked/revealed value region */
+  .cinder-secret-value-field__value {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* Mask state: bullet characters in muted color to signal "hidden" */
+  .cinder-secret-value-field__value[data-cinder-masked] {
+    color: var(--cinder-text-subtle);
+    letter-spacing: 0.05em;
+  }
+
+  /* Revealed state: full monospace value */
+  .cinder-secret-value-field[data-cinder-revealed] .cinder-secret-value-field__value {
+    color: var(--cinder-text);
+  }
+
+  /* Action buttons container */
+  .cinder-secret-value-field__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    flex-shrink: 0;
+    margin-inline-start: var(--cinder-space-2);
+  }
+
+  /* Shared button base: toggle + copy share most styles */
+  .cinder-secret-value-field__toggle,
+  .cinder-secret-value-field__copy {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--cinder-radius-sm);
+    color: var(--cinder-text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background var(--cinder-duration-fast) var(--cinder-ease-standard),
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .cinder-secret-value-field__toggle:hover,
+    .cinder-secret-value-field__copy:hover {
+      color: var(--cinder-text);
+      background: var(--cinder-surface-hover);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  /* Focus rings */
+  .cinder-secret-value-field__toggle:focus-visible,
+  .cinder-secret-value-field__copy:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-secret-value-field__toggle:focus-visible,
+    .cinder-secret-value-field__copy:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 2px;
+    }
+  }
+
+  /* Copy confirmed state */
+  .cinder-secret-value-field__copy[data-cinder-copied] {
+    color: var(--cinder-success);
+    border-color: var(--cinder-success);
+  }
+
+  /* Toggle pressed state (revealed) */
+  .cinder-secret-value-field__toggle[aria-pressed='true'] {
+    color: var(--cinder-text);
+    background: var(--cinder-surface-hover);
+  }
+
+  /* SVG icon sizing */
+  .cinder-secret-value-field__icon {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    flex-shrink: 0;
+  }
+
+  /* Warning/help text slot: e.g. "Copy this now; it will not be shown again." */
+  .cinder-secret-value-field__warning {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+  }
+}

package/dist/components/secret-value-field/secret-value-field.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/secret-value-field/secret-value-field.schema.js

@@ -0,0 +1,87 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/secret-value-field/secret-value-field.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    prefix: {
+      type: "string",
+      description: "Visible prefix shown before the masked region (e.g. `example_live_`). Does not contain the secret."
+    },
+    value: {
+      type: "string",
+      description: "The secret value to copy. Never rendered in attributes or visible text post-copy. Required."
+    },
+    suffix: {
+      type: "string",
+      description: 'Visible suffix shown after the masked region (e.g. last 4 chars "a3f9"). Does not contain the secret.'
+    },
+    label: {
+      type: "string",
+      description: 'Accessible label for the field and copy button region. Defaults to "Secret value".'
+    },
+    allowReveal: {
+      type: "boolean",
+      description: "When true, allows the user to reveal/hide the full secret. Opt-in; false by default for security."
+    },
+    initiallyRevealed: {
+      type: "boolean",
+      description: `Shows the full unmasked value on initial render. This is an explicit
+one-time reveal for the "secret was just created, copy it now" flow and is
+INDEPENDENT of \`allowReveal\`: it does not add a reveal/hide toggle, it just
+starts unmasked. Only set this when the surrounding UI makes the one-time
+exposure intentional (e.g. a "copy your new key" panel).`
+    },
+    confirmDuration: {
+      type: "number",
+      description: "Duration in milliseconds to show the copy confirmation state. Default 1500."
+    },
+    copiedLabel: {
+      type: "string",
+      description: 'Accessible label announced after a successful copy. Defaults to "Copied".'
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  required: ["value"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "warning",
+        reason: "function-or-snippet",
+        description: 'Optional advisory content rendered below the field (e.g. "Copy this now; it will not be shown again").'
+      }
+    ]
+  }
+};
+var secret_value_field_schema_default = schema;
+export {
+  secret_value_field_schema_default as default
+};
+
+//# debugId=F6FF58D21307B7F764756E2164756E21

package/dist/components/secret-value-field/secret-value-field.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @cinder
+ * @category data-display
+ * @status beta
+ * @purpose Displays a masked secret (API key, token, webhook secret) with copy action and optional reveal toggle.
+ * @tag clipboard
+ * @tag security
+ * @useWhen Showing a newly-created API key or token that the user must copy before it is gone.
+ * @useWhen Displaying an existing masked key in a settings table where the full value should stay hidden.
+ * @avoidWhen The value is not sensitive and can be shown as plain text — use a code or input component.
+ * @avoidWhen You need inline editing of the secret value — use a password input instead.
+ * @related copy-button, input, badge
+ */
+export type { SecretValueFieldProps } from './secret-value-field.types.ts';
+import type { SecretValueFieldProps } from './secret-value-field.types.ts';
+declare const SecretValueField: import("svelte").Component<SecretValueFieldProps, {}, "">;
+type SecretValueField = ReturnType<typeof SecretValueField>;
+export default SecretValueField;

package/dist/components/secret-value-field/secret-value-field.types.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Props for the SecretValueField component.
+ *
+ * Displays a masked secret value (API key, token, webhook secret) with an
+ * accessible copy action. The secret is never rendered into passive attributes
+ * like `title`, `aria-label`, or `data-*`. Reveal is opt-in and off by default.
+ */
+export type SecretValueFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    /** The secret value to copy. Never rendered in attributes or visible text post-copy. Required. */
+    value: string;
+    /** Visible prefix shown before the masked region (e.g. `example_live_`). Does not contain the secret. */
+    prefix?: string;
+    /** Visible suffix shown after the masked region (e.g. last 4 chars "a3f9"). Does not contain the secret. */
+    suffix?: string;
+    /** Accessible label for the field and copy button region. Defaults to "Secret value". */
+    label?: string;
+    /** When true, allows the user to reveal/hide the full secret. Opt-in; false by default for security. */
+    allowReveal?: boolean;
+    /**
+     * Shows the full unmasked value on initial render. This is an explicit
+     * one-time reveal for the "secret was just created, copy it now" flow and is
+     * INDEPENDENT of `allowReveal`: it does not add a reveal/hide toggle, it just
+     * starts unmasked. Only set this when the surrounding UI makes the one-time
+     * exposure intentional (e.g. a "copy your new key" panel).
+     */
+    initiallyRevealed?: boolean;
+    /** Duration in milliseconds to show the copy confirmation state. Default 1500. */
+    confirmDuration?: number;
+    /** Accessible label announced after a successful copy. Defaults to "Copied". */
+    copiedLabel?: string;
+    /** Optional advisory content rendered below the field (e.g. "Copy this now; it will not be shown again"). */
+    warning?: Snippet;
+    /** Additional CSS classes applied to the root element. */
+    class?: string;
+};

package/dist/components/secret-value-field/secret-value-field.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;