@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/media-controls/media-controls.css

@@ -0,0 +1,112 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-media-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-media-controls__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    transition:
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+    min-width: 2rem;
+    min-height: 2rem;
+  }
+
+  @media (hover: hover) {
+    .cinder-media-controls__button:hover:not(:disabled) {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-media-controls__button:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow:
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-media-controls__button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .cinder-media-controls__button[data-cinder-state='playing'] {
+    background-color: var(--cinder-surface-raised);
+  }
+
+  .cinder-media-controls__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .cinder-media-controls__svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .cinder-media-controls__svg--loading {
+    animation: cinder-media-controls-spin 1s linear infinite;
+  }
+
+  @keyframes cinder-media-controls-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-media-controls__svg--loading {
+      animation: none;
+    }
+  }
+
+  .cinder-media-controls__label {
+    white-space: nowrap;
+  }
+
+  /* Compact (icon-only) layout */
+  .cinder-media-controls[data-cinder-layout='compact'] .cinder-media-controls__button {
+    padding: var(--cinder-space-1);
+  }
+
+  /* Progress bar */
+  .cinder-media-controls__progress {
+    flex: 1;
+    min-width: 4rem;
+  }
+
+  .cinder-media-controls__progress-track {
+    height: 0.25rem;
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-border);
+    overflow: hidden;
+  }
+
+  .cinder-media-controls__progress-fill {
+    height: 100%;
+    border-radius: var(--cinder-radius-full, 9999px);
+    background-color: var(--cinder-accent);
+    transition: width 0.1s ease;
+  }
+}

package/dist/components/media-controls/media-controls.schema.d.ts

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

package/dist/components/media-controls/media-controls.schema.js

@@ -0,0 +1,125 @@
+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/media-controls/media-controls.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    playing: {
+      type: "boolean",
+      description: "Whether playback is active.",
+      default: false
+    },
+    replay: {
+      type: "boolean",
+      description: "Show a replay action when the track has ended.",
+      default: false
+    },
+    disabled: {
+      type: "boolean",
+      description: "Disable all controls.",
+      default: false
+    },
+    loading: {
+      type: "boolean",
+      description: "Show loading state while media is buffering.",
+      default: false
+    },
+    unavailable: {
+      type: "boolean",
+      description: "Controls are unavailable.",
+      default: false
+    },
+    progress: {
+      type: "number",
+      description: "Progress value between 0 and 1. Omit to hide the progress bar."
+    },
+    progressLabel: {
+      type: "string",
+      description: "Accessible label for the progress bar."
+    },
+    layout: {
+      enum: ["compact", "expanded"],
+      description: "Layout mode.",
+      default: "compact"
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-media-controls`."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onPause",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "onPlay",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "onReplay",
+        reason: "function-or-snippet"
+      }
+    ]
+  }
+};
+var media_controls_schema_default = schema;
+export {
+  media_controls_schema_default as default
+};
+
+//# debugId=C8B8A77D0243A85564756E2164756E21

package/dist/components/media-controls/media-controls.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @cinder
+ * @category action
+ * @status alpha
+ * @purpose Accessible playback controls for play, pause, and replay actions with optional progress display.
+ * @tag action
+ * @tag media
+ * @useWhen Embedding play/pause/replay controls for audio or video content.
+ * @useWhen Rendering media controls inside a toolbar or standalone on a card.
+ * @avoidWhen You need waveform visualization or Web Audio integration — wire that separately.
+ * @avoidWhen You need a full media player UI with seek scrubbing — use a dedicated player component.
+ * @related button, toolbar, progress, tooltip
+ */
+export type { MediaControlsLayout, MediaControlsProps } from './media-controls.types.ts';
+import type { MediaControlsProps } from './media-controls.types.ts';
+declare const MediaControls: import("svelte").Component<MediaControlsProps, {}, "">;
+type MediaControls = ReturnType<typeof MediaControls>;
+export default MediaControls;

package/dist/components/media-controls/media-controls.types.d.ts

@@ -0,0 +1,77 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/** Layout mode: compact icon-only or expanded icon+label. */
+export type MediaControlsLayout = 'compact' | 'expanded';
+/** Props for the MediaControls component. */
+export type MediaControlsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    /** Current playback state. @default "paused" */
+    playing?: boolean;
+    /** Show a replay action instead of play/pause when the track has ended. @default false */
+    replay?: boolean;
+    /** Disable all controls. @default false */
+    disabled?: boolean;
+    /** Show a loading spinner and prevent interaction while media is buffering. @default false */
+    loading?: boolean;
+    /** Controls are unavailable (e.g. media source missing). @default false */
+    unavailable?: boolean;
+    /** Progress value between 0 and 1. Omit to hide the progress bar. */
+    progress?: number;
+    /** Human-readable accessible label for the progress bar. @default "Playback progress" */
+    progressLabel?: string;
+    /** Layout mode: `compact` renders icon-only, `expanded` renders icon+label. @default "compact" */
+    layout?: MediaControlsLayout;
+    /** Called when the user triggers playback. */
+    onPlay?: () => void;
+    /** Called when the user pauses playback. */
+    onPause?: () => void;
+    /** Called when the user triggers replay. */
+    onReplay?: () => void;
+    /** Additional class names merged with `.cinder-media-controls`. */
+    class?: string;
+};
+/**
+ * Cinder-specific props for MediaControls, used by the schema generator.
+ */
+export interface MediaControlsSchemaProps {
+    /**
+     * Whether playback is active.
+     * @default false
+     */
+    playing?: boolean;
+    /**
+     * Show a replay action when the track has ended.
+     * @default false
+     */
+    replay?: boolean;
+    /**
+     * Disable all controls.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show loading state while media is buffering.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Controls are unavailable.
+     * @default false
+     */
+    unavailable?: boolean;
+    /** Progress value between 0 and 1. Omit to hide the progress bar. */
+    progress?: number;
+    /** Accessible label for the progress bar. */
+    progressLabel?: string;
+    /**
+     * Layout mode.
+     * @default "compact"
+     */
+    layout?: MediaControlsLayout;
+    /** Additional class names merged with `.cinder-media-controls`. */
+    class?: string;
+    /** Called when the play action is triggered. */
+    onPlay?: () => void;
+    /** Called when the pause action is triggered. */
+    onPause?: () => void;
+    /** Called when the replay action is triggered. */
+    onReplay?: () => void;
+}

package/dist/components/media-controls/media-controls.variables.d.ts

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

package/dist/components/media-controls/media-controls.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/media-controls/media-controls.variables.ts
+var variables = [];
+var media_controls_variables_default = variables;
+export {
+  media_controls_variables_default as default
+};
+
+//# debugId=48ABE57700172C9864756E2164756E21

package/dist/components/navigation-bar/navigation-bar.schema.js

@@ -56,6 +56,10 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    class: {
+      type: "string",
+      description: "Custom class merged onto the root `<nav>` element."
+    },
     mobileMenuOpen: {
       type: "boolean",
       description: "Two-way bindable open state of the mobile menu."
@@ -76,10 +80,6 @@ var schema = {
         name: "brand",
         reason: "function-or-snippet"
       },
-      {
-        name: "class",
-        reason: "unknown-shape"
-      },
       {
         name: "items",
         reason: "function-or-snippet"
@@ -96,4 +96,4 @@ export {
   navigation_bar_schema_default as default
 };
 
-//# debugId=85F9F77E5FB7F00864756E2164756E21
+//# debugId=886889924988D8C964756E2164756E21

package/dist/components/navigation-bar/navigation-bar.types.d.ts

@@ -11,7 +11,8 @@ export type NavigationBarToggleAttributes = {
 export type NavigationBarItemsContext = {
     variant: NavigationVariant;
 };
-export type NavigationBarProps = HTMLAttributes<HTMLElement> & {
+export type NavigationBarProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /** Custom class merged onto the root `<nav>` element. */
     class?: string;
     brand?: Snippet;
     /** Receives a context object with the current variant. */

package/dist/components/pricing-card/index.d.ts

@@ -0,0 +1,5 @@
+import './pricing-card.css';
+import PricingCard from './pricing-card.svelte';
+export default PricingCard;
+export type { PricingCardProps } from './pricing-card.types.ts';
+export { PricingCard };