@lostgradient/cinder 0.9.0 → 0.12.0

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;

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * The six connection lifecycle states ConnectionIndicator understands.
+ *
+ * Stamped directly onto the root as `data-cinder-status` and driving color
+ * exclusively through `connection-indicator.css` — there are no hard-coded
+ * color classes on the component. Each state also carries its own icon and
+ * text label so status is never communicated by color alone (WCAG 1.4.1).
+ *
+ * - `connecting` — initial handshake in progress, no data yet.
+ * - `live` — connected and actively receiving pushed updates.
+ * - `reconnecting` — a previously live connection dropped and is retrying.
+ * - `polling` — receiving updates via interval polling rather than push.
+ * - `stale` — connected but data has not refreshed within an expected window.
+ * - `closed` — the connection is intentionally or terminally closed.
+ */
+export type ConnectionIndicatorStatus = 'connecting' | 'live' | 'reconnecting' | 'polling' | 'stale' | 'closed';
+/**
+ * Props for ConnectionIndicator.
+ *
+ * The component always renders `role="status"` with a computed accessible
+ * name of the form "Connection: {label}" (overridable via `aria-label`), so
+ * assistive technology gets the same signal as sighted users regardless of
+ * which visual treatment (icon, motion, font-weight) carries the difference
+ * between states.
+ */
+export type ConnectionIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+    status: ConnectionIndicatorStatus;
+    /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+    label?: string;
+    /** Attempt-count content rendered next to the label when `status` is `'reconnecting'`, e.g. "attempt 3 of 5". Ignored for other states. */
+    attempt?: Snippet;
+    /** Extra classes appended to the root element. */
+    class?: string;
+};
+/** Schema-facing mirror of {@link ConnectionIndicatorProps}, omitting the non-serializable `attempt` snippet and native HTML attribute passthrough. */
+export interface ConnectionIndicatorSchemaProps {
+    /** Current connection lifecycle state. Drives icon, text, and color via `data-cinder-status`. */
+    status: ConnectionIndicatorStatus;
+    /** Optional human label override. Replaces the default text for `status` (and the "Connection: …" accessible name). */
+    label?: string;
+    /** Extra classes appended to the root element. */
+    class?: string;
+}

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

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

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

@@ -0,0 +1,61 @@
+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.variables.ts
+var variables = [];
+var connection_indicator_variables_default = variables;
+export {
+  connection_indicator_variables_default as default
+};
+
+//# debugId=87811D7E55D42C3864756E2164756E21

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

@@ -0,0 +1,5 @@
+import './connection-indicator.css';
+import ConnectionIndicator from './connection-indicator.svelte';
+export default ConnectionIndicator;
+export type { ConnectionIndicatorProps, ConnectionIndicatorSchemaProps, ConnectionIndicatorStatus, } from './connection-indicator.types.ts';
+export { ConnectionIndicator };