@lostgradient/cinder 0.8.0 → 0.11.0

package/dist/components/code-block/code-block.schema.js

@@ -72,6 +72,10 @@ var schema = {
       type: "boolean",
       description: "When true, render a copy button in the header."
     },
+    showLanguageLabel: {
+      type: "boolean",
+      description: "Whether to render the language label in the header. Default `true`.\nPass `false` to keep `language`-driven highlighting without the visible\nheader chip; with `copyable` also unset, no header renders at all."
+    },
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-code-block`."
@@ -94,4 +98,4 @@ export {
   code_block_schema_default as default
 };
 
-//# debugId=99D7DA0AA5EB435F64756E2164756E21
+//# debugId=40E5318FEC4A70D364756E2164756E21

package/dist/components/code-block/code-block.types.d.ts

@@ -48,6 +48,12 @@ export type CodeBlockProps = {
     highlighter?: Highlighter;
     /** When true, render a copy button in the header. */
     copyable?: boolean;
+    /**
+     * Whether to render the language label in the header. Default `true`.
+     * Pass `false` to keep `language`-driven highlighting without the visible
+     * header chip; with `copyable` also unset, no header renders at all.
+     */
+    showLanguageLabel?: boolean;
     /** Additional class names merged with `.cinder-code-block`. */
     class?: string;
 };

package/dist/components/code-block/index.js

@@ -516,7 +516,7 @@ var root_3 = $6.from_html(`<div class="cinder-code-block__highlighted"></div>`);
 var root_4 = $6.from_html(`<div><!> <div class="cinder-code-block__viewport" tabindex="0"><!></div></div>`);
 function Code_block($$anchor, $$props) {
   $6.push($$props, true);
-  let copyable = $6.prop($$props, "copyable", 3, false);
+  let copyable = $6.prop($$props, "copyable", 3, false), showLanguageLabel = $6.prop($$props, "showLanguageLabel", 3, true);
   let highlighted = $6.state(null);
   $6.user_effect(() => {
     if ($$props.highlight === false || !$$props.language) {
@@ -562,7 +562,7 @@ function Code_block($$anchor, $$props) {
           $6.append($$anchor3, span);
         };
         $6.if(node_1, ($$render) => {
-          if ($$props.language)
+          if ($$props.language && showLanguageLabel())
             $$render(consequent);
         });
       }
@@ -588,7 +588,7 @@ function Code_block($$anchor, $$props) {
       $6.append($$anchor2, header);
     };
     $6.if(node, ($$render) => {
-      if ($$props.language || copyable())
+      if ($$props.language && showLanguageLabel() || copyable())
         $$render(consequent_2);
     });
   }
@@ -647,4 +647,4 @@ export {
   Code_block as CodeBlock
 };
 
-//# debugId=19A9E27608520E6264756E2164756E21
+//# debugId=DFB6B54AA309E18164756E2164756E21

package/dist/components/command-item/index.js

@@ -95,18 +95,19 @@ function Command_item($$anchor, $$props) {
   let onselect = $.prop($$props, "onselect", 3, () => {}), selectionMode = $.prop($$props, "selectionMode", 3, "item"), disabled = $.prop($$props, "disabled", 3, false);
   const commandList = getCommandListContext();
   untrack(() => selectionMode());
-  let itemId = $.state(null);
+  let registrationHandle = $.state(null);
+  const itemId = $.derived(() => $.get(registrationHandle)?.id ?? null);
   const registerWithPalette = (node) => {
     return untrack(() => {
-      const { id, unregister } = commandList.register({
+      const registeredItem = commandList.register({
         getValue: () => $$props.value,
         getOnselect: () => onselect(),
         getDisabled: () => disabled()
       }, node);
-      $.set(itemId, id, true);
+      $.set(registrationHandle, registeredItem, true);
       return () => {
-        unregister();
-        $.set(itemId, null);
+        registeredItem.unregister();
+        $.set(registrationHandle, null);
       };
     });
   };
@@ -208,4 +209,4 @@ export {
   Command_item as CommandItem
 };
 
-//# debugId=CCF7E53F1B398B3764756E2164756E21
+//# debugId=FEE2EDDE39E8401564756E2164756E21

package/dist/components/command-menu/command-menu.schema.js

@@ -56,6 +56,10 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    listboxId: {
+      type: "string",
+      description: "Stable listbox id. Defaults to a generated component id."
+    },
     open: {
       type: "boolean",
       description: "Open state. Bindable. Default `false`."
@@ -138,4 +142,4 @@ export {
   command_menu_schema_default as default
 };
 
-//# debugId=03C609F12C9C699564756E2164756E21
+//# debugId=C36E080217C53B5964756E2164756E21

package/dist/components/command-menu/command-menu.types.d.ts

@@ -15,6 +15,8 @@ export type CommandMenuState = {
     activeItemId: string | null;
 };
 export type CommandMenuProps = {
+    /** Stable listbox id. Defaults to a generated component id. */
+    listboxId?: string;
     /** Open state. Bindable. Default `false`. */
     open?: boolean;
     /** Text field used as the caret-position anchor. */

package/dist/components/command-menu/index.js

@@ -2420,7 +2420,8 @@ function inDocumentOrder(items) {
 
 // src/components/_internal/create-command-list-state.svelte.ts
 class CommandListState {
-  listboxId;
+  #getListboxId;
+  #registeredListboxId = $5.state("");
   #registrations = $5.state($5.proxy([]));
   get registrations() {
     return $5.get(this.#registrations);
@@ -2455,7 +2456,24 @@ class CommandListState {
     $5.set(this.#activeItemId, value);
   }
   constructor(listboxId) {
-    this.listboxId = listboxId;
+    this.#getListboxId = typeof listboxId === "function" ? listboxId : () => listboxId;
+    $5.set(this.#registeredListboxId, this.#getListboxId(), true);
+  }
+  get listboxId() {
+    return $5.get(this.#registeredListboxId);
+  }
+  syncListboxId(nextListboxId = this.#getListboxId()) {
+    const listboxId = nextListboxId;
+    if ($5.get(this.#registeredListboxId) === listboxId)
+      return;
+    $5.set(this.#registeredListboxId, listboxId, true);
+    $5.set(this.#intendedActiveId, null);
+    this.registrations = this.registrations.map((registration, index) => ({
+      ...registration,
+      id: updateRegistrationHandleId(registration, `${listboxId}-item-${index + 1}`)
+    }));
+    this.#itemCounter = this.registrations.length;
+    this.refreshRegistrationsReady();
   }
   resetActiveItem() {
     $5.set(this.#intendedActiveId, null);
@@ -2478,22 +2496,26 @@ class CommandListState {
     $5.set(this.#intendedActiveId, id, true);
   }
   register(input, node) {
+    this.syncListboxId();
     const id = `${this.listboxId}-item-${++this.#itemCounter}`;
-    this.registrations.push({
-      id,
-      node,
-      getValue: input.getValue,
-      getOnselect: input.getOnselect,
-      getDisabled: input.getDisabled
-    });
-    return {
+    const handle = $5.proxy({
       id,
       unregister: () => {
-        const index = this.registrations.findIndex((registration) => registration.id === id);
+        const index = this.registrations.findIndex((registeredItem) => registeredItem.node === node);
         if (index !== -1)
           this.registrations.splice(index, 1);
       }
+    });
+    const registration = {
+      id,
+      node,
+      handle,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled
     };
+    this.registrations.push(registration);
+    return handle;
   }
   activateItemById(id) {
     const record = this.registrations.find((registration) => registration.id === id);
@@ -2568,13 +2590,13 @@ class CommandListState {
     return false;
   }
   createContext(activateItemById = (id) => void this.activateItemById(id)) {
-    const listboxId = this.listboxId;
+    const getListboxId = () => this.listboxId;
     const getActiveItemId = () => this.activeItemId;
     const register = (input, node) => this.register(input, node);
     const setActiveById = (id) => this.setActiveById(id);
     return {
       get listboxId() {
-        return listboxId;
+        return getListboxId();
       },
       get activeItemId() {
         return getActiveItemId();
@@ -2588,6 +2610,10 @@ class CommandListState {
 function createCommandListState(listboxId) {
   return new CommandListState(listboxId);
 }
+function updateRegistrationHandleId(registration, id) {
+  registration.handle.id = id;
+  return id;
+}
 
 // src/components/command-menu/command-menu-trigger.ts
 function isSingleNonWhitespaceCodePoint(value) {
@@ -2627,9 +2653,9 @@ function detectTrigger({
 var root2 = $6.from_html(`<div class="cinder-command-menu__empty" role="status"><!></div>`);
 var root_1 = $6.from_html(`<div><ul role="listbox" class="cinder-command-menu__listbox"><!></ul> <!></div>`);
 function Command_menu($$anchor, $$props) {
-  const listboxId = $6.props_id();
+  const fallbackListboxId = $6.props_id();
   $6.push($$props, true);
-  let open = $6.prop($$props, "open", 15, false), query = $6.prop($$props, "query", 11, ""), placement = $6.prop($$props, "placement", 3, "bottom-start"), offset3 = $6.prop($$props, "offset", 3, 6), label = $6.prop($$props, "label", 3, "Commands");
+  let listboxId = $6.prop($$props, "listboxId", 3, fallbackListboxId), open = $6.prop($$props, "open", 15, false), query = $6.prop($$props, "query", 11, ""), placement = $6.prop($$props, "placement", 3, "bottom-start"), offset3 = $6.prop($$props, "offset", 3, 6), label = $6.prop($$props, "label", 3, "Commands");
   const portalAttachment = createPortalAttachment({
     target: () => document.body,
     inheritAttributes: true,
@@ -2637,7 +2663,7 @@ function Command_menu($$anchor, $$props) {
   });
   let mounted = $6.state(false);
   let listElement = $6.state(undefined);
-  const commandList = createCommandListState(listboxId);
+  const commandList = createCommandListState(() => listboxId());
   const showEmpty = $6.derived(() => $6.get(mounted) && open() && commandList.registrationsReady && commandList.registrations.length === 0);
   const caretAnchor = $6.derived(() => {
     const anchorElement = $$props.anchor;
@@ -2661,6 +2687,9 @@ function Command_menu($$anchor, $$props) {
   $6.user_effect(() => {
     $6.set(mounted, true);
   });
+  $6.user_effect(() => {
+    commandList.syncListboxId(listboxId());
+  });
   $6.user_effect(() => {
     if (!open()) {
       commandList.resetActiveItem();
@@ -2673,7 +2702,7 @@ function Command_menu($$anchor, $$props) {
   });
   $6.user_effect(() => {
     $$props.onstatechange?.({
-      listboxId,
+      listboxId: commandList.listboxId,
       activeItemId: open() ? commandList.activeItemId : null
     });
   });
@@ -2754,7 +2783,7 @@ function Command_menu($$anchor, $$props) {
         $6.set_class(div, 1, $0);
         $6.set_attribute(div, "data-cinder-position-ready", anchoredOverlay.positionReady);
         $6.set_style(div, anchoredOverlay.positionStyle);
-        $6.set_attribute(ul, "id", listboxId);
+        $6.set_attribute(ul, "id", commandList.listboxId);
         $6.set_attribute(ul, "aria-label", label());
       }, [
         () => $6.clsx(classNames("cinder-_floating-surface", "cinder-command-menu", $$props.class))
@@ -2778,4 +2807,4 @@ export {
   Command_menu as CommandMenu
 };
 
-//# debugId=24A463365305974A64756E2164756E21
+//# debugId=B1D4E7A8E577F02F64756E2164756E21

package/dist/components/command-palette/index.js

@@ -183,7 +183,8 @@ function inDocumentOrder(items) {
 
 // src/components/_internal/create-command-list-state.svelte.ts
 class CommandListState {
-  listboxId;
+  #getListboxId;
+  #registeredListboxId = $.state("");
   #registrations = $.state($.proxy([]));
   get registrations() {
     return $.get(this.#registrations);
@@ -218,7 +219,24 @@ class CommandListState {
     $.set(this.#activeItemId, value);
   }
   constructor(listboxId) {
-    this.listboxId = listboxId;
+    this.#getListboxId = typeof listboxId === "function" ? listboxId : () => listboxId;
+    $.set(this.#registeredListboxId, this.#getListboxId(), true);
+  }
+  get listboxId() {
+    return $.get(this.#registeredListboxId);
+  }
+  syncListboxId(nextListboxId = this.#getListboxId()) {
+    const listboxId = nextListboxId;
+    if ($.get(this.#registeredListboxId) === listboxId)
+      return;
+    $.set(this.#registeredListboxId, listboxId, true);
+    $.set(this.#intendedActiveId, null);
+    this.registrations = this.registrations.map((registration, index) => ({
+      ...registration,
+      id: updateRegistrationHandleId(registration, `${listboxId}-item-${index + 1}`)
+    }));
+    this.#itemCounter = this.registrations.length;
+    this.refreshRegistrationsReady();
   }
   resetActiveItem() {
     $.set(this.#intendedActiveId, null);
@@ -241,22 +259,26 @@ class CommandListState {
     $.set(this.#intendedActiveId, id, true);
   }
   register(input, node) {
+    this.syncListboxId();
     const id = `${this.listboxId}-item-${++this.#itemCounter}`;
-    this.registrations.push({
-      id,
-      node,
-      getValue: input.getValue,
-      getOnselect: input.getOnselect,
-      getDisabled: input.getDisabled
-    });
-    return {
+    const handle = $.proxy({
       id,
       unregister: () => {
-        const index = this.registrations.findIndex((registration) => registration.id === id);
+        const index = this.registrations.findIndex((registeredItem) => registeredItem.node === node);
         if (index !== -1)
           this.registrations.splice(index, 1);
       }
+    });
+    const registration = {
+      id,
+      node,
+      handle,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled
     };
+    this.registrations.push(registration);
+    return handle;
   }
   activateItemById(id) {
     const record = this.registrations.find((registration) => registration.id === id);
@@ -331,13 +353,13 @@ class CommandListState {
     return false;
   }
   createContext(activateItemById = (id) => void this.activateItemById(id)) {
-    const listboxId = this.listboxId;
+    const getListboxId = () => this.listboxId;
     const getActiveItemId = () => this.activeItemId;
     const register = (input, node) => this.register(input, node);
     const setActiveById = (id) => this.setActiveById(id);
     return {
       get listboxId() {
-        return listboxId;
+        return getListboxId();
       },
       get activeItemId() {
         return getActiveItemId();
@@ -351,6 +373,10 @@ class CommandListState {
 function createCommandListState(listboxId) {
   return new CommandListState(listboxId);
 }
+function updateRegistrationHandleId(registration, id) {
+  registration.handle.id = id;
+  return id;
+}
 
 // src/components/command-palette/command-palette.svelte
 var root = $2.from_html(`<div class="cinder-command-palette__empty" role="status"><!></div>`);
@@ -542,4 +568,4 @@ export {
   Command_palette as CommandPalette
 };
 
-//# debugId=4904936021E903D864756E2164756E21
+//# debugId=132CB9AD97181AEA64756E2164756E21

package/dist/components/connection-indicator/connection-indicator.css

@@ -0,0 +1,136 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  /* ========================================
+ * CONNECTION INDICATOR
+ *
+ * Small standalone status pill for a live connection. Color is driven
+ * exclusively from the `data-cinder-status` attribute via the existing
+ * semantic status tokens (`--cinder-success`, `--cinder-warning`,
+ * `--cinder-text-muted`) — never hard-code hex values when consuming this
+ * component. `polling` is deliberately quieter than `live`: it carries no
+ * motion and a lighter font-weight so it can never be mistaken for push,
+ * even under grayscale or forced-colors rendering where the color
+ * difference disappears.
+ * ======================================== */
+
+  .cinder-connection-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1-5);
+    padding: var(--cinder-space-0-5) var(--cinder-space-2-5);
+    border-radius: var(--cinder-radius-full);
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    line-height: 1.25;
+    vertical-align: middle;
+  }
+
+  .cinder-connection-indicator__dot {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-radius: var(--cinder-radius-full);
+    background: currentColor;
+  }
+
+  .cinder-connection-indicator[data-cinder-status='live'] .cinder-connection-indicator__dot {
+    animation: cinder-connection-indicator-pulse 1.4s ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-connection-indicator[data-cinder-status='live'] .cinder-connection-indicator__dot {
+      animation: none;
+    }
+  }
+
+  @keyframes cinder-connection-indicator-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  .cinder-connection-indicator__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    inline-size: 0.8125rem;
+    block-size: 0.8125rem;
+    color: currentColor;
+  }
+
+  /* connecting and reconnecting both spin the icon wrapper to signal in-progress work. This
+ * targets the wrapper span (not the inner svg with a :global() selector) because this file is
+ * a plain CSS asset imported from index.ts — the Svelte compiler never processes it, so
+ * :global() has no effect here and browsers drop the whole rule as an unknown pseudo-class.
+ * Rotating the wrapper rotates its svg child identically. */
+  .cinder-connection-indicator[data-cinder-status='connecting'] .cinder-connection-indicator__icon,
+  .cinder-connection-indicator[data-cinder-status='reconnecting']
+    .cinder-connection-indicator__icon {
+    animation: cinder-connection-indicator-spin var(--cinder-duration-spin) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-connection-indicator[data-cinder-status='connecting']
+      .cinder-connection-indicator__icon,
+    .cinder-connection-indicator[data-cinder-status='reconnecting']
+      .cinder-connection-indicator__icon {
+      animation: none;
+    }
+  }
+
+  @keyframes cinder-connection-indicator-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .cinder-connection-indicator__label {
+    color: inherit;
+  }
+
+  .cinder-connection-indicator__attempt {
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-normal);
+  }
+
+  /* ----------------------------------------
+ * Status → semantic token mapping
+ *
+ * `polling` reuses the same muted tone as `closed` but is disambiguated by
+ * its icon, its lack of motion (see above), and its label text — color is
+ * never the sole signal (WCAG 1.4.1).
+ * ---------------------------------------- */
+
+  .cinder-connection-indicator[data-cinder-status='connecting'] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='live'] {
+    color: var(--cinder-success);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='reconnecting'] {
+    color: var(--cinder-warning);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='polling'] {
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-normal);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='stale'] {
+    color: var(--cinder-info);
+  }
+
+  .cinder-connection-indicator[data-cinder-status='closed'] {
+    color: var(--cinder-text-muted);
+  }
+}

package/dist/components/connection-indicator/connection-indicator.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/connection-indicator/connection-indicator.schema.d.ts

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

package/dist/components/connection-indicator/connection-indicator.schema.js

@@ -0,0 +1,89 @@
+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);
+}
+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/connection-indicator/connection-indicator.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    status: {
+      enum: ["connecting", "live", "reconnecting", "polling", "stale", "closed"],
+      description: "Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`."
+    },
+    label: {
+      type: "string",
+      description: 'Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name).'
+    },
+    class: {
+      type: "string",
+      description: "Extra classes appended to the root element."
+    }
+  },
+  additionalProperties: false,
+  required: ["status"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "attempt",
+        reason: "function-or-snippet",
+        description: "Attempt-count content rendered next to the label when `status` is `'reconnecting'`, e.g. \"attempt 3 of 5\". Ignored for other states."
+      }
+    ]
+  }
+};
+var connection_indicator_schema_default = schema;
+export {
+  connection_indicator_schema_default as default
+};
+
+//# debugId=37FEFFB18DEB9C6764756E2164756E21

package/dist/components/connection-indicator/connection-indicator.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @cinder
+ * @category feedback
+ * @status beta
+ * @purpose Small standalone status pill for a live connection, distinguishing connecting, live, reconnecting, polling, stale, and closed states through icon and text rather than color alone.
+ * @tag connection
+ * @tag status
+ * @tag realtime
+ * @useWhen Surfacing the transport-level health of a websocket, SSE stream, or polling loop as a compact, self-contained pill.
+ * @useWhen Distinguishing push (`live`) from interval polling (`polling`) so operators don't mistake one for the other.
+ * @avoidWhen Annotating a static entity's state (a row, a user, a deployment) rather than a live transport — use status-dot instead. | status-dot
+ * @avoidWhen Rendering a full event log with per-event connection transitions — use event-stream-viewer instead. | event-stream-viewer
+ * @a11yPattern role="status" live region
+ * @a11yNote Status is conveyed by icon and text together, never color alone (WCAG 1.4.1); the live pulsing dot collapses to a static dot under prefers-reduced-motion.
+ * @related status-dot, event-stream-viewer, badge
+ */
+export type { ConnectionIndicatorProps, ConnectionIndicatorSchemaProps, ConnectionIndicatorStatus, } from './connection-indicator.types.ts';
+import type { ConnectionIndicatorProps } from './connection-indicator.types.ts';
+declare const ConnectionIndicator: import("svelte").Component<ConnectionIndicatorProps, {}, "">;
+type ConnectionIndicator = ReturnType<typeof ConnectionIndicator>;
+export default ConnectionIndicator;