@lostgradient/cinder 0.4.1 → 0.5.0

package/src/components/logo-cloud/logo-cloud.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category domain
+   * @status stable
+   * @purpose Responsive logo grid for “trusted by” sections that display partner/customer brand marks.
+   * @tag marketing
+   * @tag logos
+   * @tag social-proof
+   * @useWhen Displaying customer or partner logos near pricing, hero, or testimonial content.
+   * @useWhen Creating a compact proof strip that links out to partner pages or case studies.
+   * @avoidWhen Presenting individual people with names and roles. | team-section
+   * @avoidWhen Listing article content with headlines and excerpts. | blog-section
+   * @related team-section, testimonial-section, blog-section, container, image
+   */
+  export type { LogoCloudItem, LogoCloudProps } from './logo-cloud.types.ts';
+</script>
+
+<script lang="ts">
+  import Container from '../container/container.svelte';
+  import { classNames } from '../../utilities/class-names.ts';
+
+  import type { LogoCloudProps } from './logo-cloud.types.ts';
+
+  let {
+    as = 'section',
+    title,
+    description,
+    logos,
+    columns = 5,
+    grayscale = true,
+    maxWidth = 'wide',
+    class: className,
+    ...rest
+  }: LogoCloudProps = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-logo-cloud', className)}
+  data-cinder-columns={String(columns)}
+  data-cinder-grayscale={grayscale ? '' : undefined}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-logo-cloud__inner">
+      {#if title}
+        <header class="cinder-logo-cloud__header">
+          <h2 class="cinder-logo-cloud__title">{title}</h2>
+          {#if description}
+            <p class="cinder-logo-cloud__description">{description}</p>
+          {/if}
+        </header>
+      {/if}
+
+      <ul class="cinder-logo-cloud__list">
+        {#each logos as logo, index (`${logo.name}-${index}`)}
+          <li class="cinder-logo-cloud__item">
+            {#if logo.href}
+              <a href={logo.href} class="cinder-logo-cloud__link">
+                <img
+                  class="cinder-logo-cloud__image"
+                  src={logo.src}
+                  alt={logo.name}
+                  loading="lazy"
+                />
+              </a>
+            {:else}
+              <img class="cinder-logo-cloud__image" src={logo.src} alt={logo.name} loading="lazy" />
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </Container>
+</svelte:element>

package/src/components/logo-cloud/logo-cloud.types.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+/** @schemaObject */
+export type LogoCloudItem = {
+  /** Brand or company name. Used as image alt text. */
+  name: string;
+  /** Logo image source URL. */
+  src: string;
+  /** Optional link destination for the logo. */
+  href?: string;
+};
+
+/** Props for the LogoCloud component. */
+export type LogoCloudProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional heading text for the logo cloud. */
+  title?: string;
+  /** Optional support text under heading. */
+  description?: string;
+  /** Logos to render in the cloud. */
+  logos: LogoCloudItem[];
+  /** Grid columns on wide screens. @default 5 */
+  columns?: 3 | 4 | 5 | 6;
+  /** Apply grayscale filter until hover. @default true */
+  grayscale?: boolean;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-logo-cloud`. */
+  class?: string;
+};
+
+export interface LogoCloudSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional heading text for the logo cloud. */
+  title?: string;
+  /** Optional support text under heading. */
+  description?: string;
+  /** Logos to render in the cloud. */
+  logos: LogoCloudItem[];
+  /** Grid columns on wide screens. @default 5 */
+  columns?: 3 | 4 | 5 | 6;
+  /** Apply grayscale filter until hover. @default true */
+  grayscale?: boolean;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-logo-cloud`. */
+  class?: string;
+}

package/src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte

@@ -89,7 +89,7 @@
     border: none;
     border-radius: var(--cinder-radius-sm);
     background: transparent;
-    color: var(--cinder-text-muted);
+    color: var(--cinder-text);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     cursor: pointer;

package/src/components/markdown-editor/markdown-editor.svelte

@@ -114,6 +114,9 @@
 
   // Escape single quotes in placeholder for CSS content property
   const escapedPlaceholder = $derived(placeholder.replace(/'/g, "\\'"));
+  const accessibleEditorLabel = $derived(
+    label.trim().length > 0 ? label.trim() : 'Markdown editor',
+  );
 
   // Internal state
   let editorState = $state<EditorState | null>(null);
@@ -433,7 +436,7 @@
     // Initialize Milkdown with canonical markdown for consistent parsing/serialization (DEP-35).
     getInitialValue: () => normalizeSafely(value),
     getReadonly: () => readonly,
-    getAriaLabel: () => label,
+    getAriaLabel: () => accessibleEditorLabel,
     debounceMs: DEFAULT_DEBOUNCE_MS,
     getPlugins: () => plugins,
     getPlaceholderCompletion: () => placeholderCompletion,
@@ -568,12 +571,14 @@
     }
   });
 
-  // Forward aria-describedby to the ProseMirror view.dom when in WYSIWYG mode.
+  // Forward naming and description attributes to the actual ProseMirror textbox.
   // The textarea binding handles the source mode surface via the template.
   $effect(() => {
     const viewDom = editorState?.view?.dom;
     if (!viewDom) return;
 
+    viewDom.setAttribute('aria-label', accessibleEditorLabel);
+
     if (ariaDescribedby) {
       viewDom.setAttribute('aria-describedby', ariaDescribedby);
     } else {
@@ -701,7 +706,7 @@
         data-readonly={readonly || undefined}
         style:--editor-placeholder="'{escapedPlaceholder}'"
         role="application"
-        aria-label={label || 'Markdown editor'}
+        aria-label={accessibleEditorLabel}
         tabindex="0"
         {@attach editorAttachment}
       ></div>
@@ -713,7 +718,7 @@
         oninput={(e) => onchange?.(e.currentTarget.value)}
         {placeholder}
         readonly={readonly || undefined}
-        aria-label={label}
+        aria-label={accessibleEditorLabel}
         aria-describedby={ariaDescribedby}
         aria-multiline="true"
       ></textarea>

package/src/components/marquee/index.ts

@@ -0,0 +1,6 @@
+import './marquee.css';
+import Marquee from './marquee.svelte';
+
+export default Marquee;
+export type { MarqueeDirection, MarqueeProps } from './marquee.types.ts';
+export { Marquee };

package/src/components/marquee/marquee.css

@@ -0,0 +1,135 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-marquee {
+    --cinder-marquee-duration: 24s;
+    --cinder-marquee-gap: 1.5rem;
+    --cinder-marquee-play-state: running;
+    display: block;
+    position: relative;
+  }
+
+  .cinder-marquee__viewport {
+    overflow: clip;
+    position: relative;
+  }
+
+  .cinder-marquee__control {
+    position: absolute;
+    z-index: 1;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+  }
+
+  .cinder-marquee__control:focus-visible {
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0.5rem;
+    inline-size: auto;
+    block-size: auto;
+    margin: 0;
+    padding: 0.375rem 0.625rem;
+    clip-path: none;
+    border: 1px solid var(--cinder-border-strong, currentColor);
+    border-radius: var(--cinder-radius-sm, 0.25rem);
+    background: var(--cinder-surface, Canvas);
+    color: var(--cinder-text, CanvasText);
+    font: inherit;
+    line-height: 1.2;
+  }
+
+  .cinder-marquee__viewport: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);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-marquee__viewport:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(var(--cinder-ring-width) * -1);
+      box-shadow: none;
+    }
+  }
+
+  .cinder-marquee__track {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-marquee-gap);
+    inline-size: max-content;
+    animation: cinder-marquee-horizontal var(--cinder-marquee-duration) linear infinite;
+    animation-play-state: var(--cinder-marquee-play-state);
+    will-change: transform;
+  }
+
+  .cinder-marquee[data-cinder-ready='false'] .cinder-marquee__track {
+    animation-play-state: paused;
+  }
+
+  .cinder-marquee[data-cinder-manual-paused='true'] .cinder-marquee__track {
+    --cinder-marquee-play-state: paused;
+  }
+
+  .cinder-marquee__item {
+    flex: 0 0 auto;
+  }
+
+  .cinder-marquee[data-cinder-direction='vertical'] .cinder-marquee__track {
+    flex-direction: column;
+    animation-name: cinder-marquee-vertical;
+  }
+
+  .cinder-marquee[data-cinder-direction='vertical'] .cinder-marquee__viewport {
+    block-size: 8rem;
+  }
+
+  .cinder-marquee[data-cinder-direction='vertical'] .cinder-marquee__item {
+    inline-size: 100%;
+  }
+
+  @keyframes cinder-marquee-horizontal {
+    to {
+      transform: translateX(calc(-50% - (var(--cinder-marquee-gap) / 2)));
+    }
+  }
+
+  @keyframes cinder-marquee-vertical {
+    to {
+      transform: translateY(calc(-50% - (var(--cinder-marquee-gap) / 2)));
+    }
+  }
+
+  @media (hover: hover) {
+    .cinder-marquee[data-cinder-pause-hover='true']:not([data-cinder-manual-resumed='true']):hover
+      .cinder-marquee__track {
+      --cinder-marquee-play-state: paused;
+    }
+  }
+
+  .cinder-marquee[data-cinder-pause-focus='true']:not(
+      [data-cinder-manual-resumed='true']
+    ):focus-within
+    .cinder-marquee__track {
+    --cinder-marquee-play-state: paused;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-marquee__viewport {
+      overflow: auto;
+    }
+
+    .cinder-marquee__track {
+      animation: none;
+      transform: none;
+    }
+
+    .cinder-marquee__item[aria-hidden='true'] {
+      display: none;
+    }
+  }
+}

package/src/components/marquee/marquee.examples.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "marquee",
+  "import": "@lostgradient/cinder/marquee",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Announcement ticker",
+      "description": "Continuously loop short announcements with pause on hover and focus.",
+      "code": "<script lang=\"ts\">\n  import { Marquee } from '@lostgradient/cinder/marquee';\n</script>\n\n<Marquee label=\"Announcements\">\n  {#snippet children()}\n    <span style=\"font-weight: 600;\">New dark theme tokens are live</span>\n    <span>•</span>\n    <span>v0.4.1 now available</span>\n    <span>•</span>\n    <span>Try the updated component decision aid</span>\n  {/snippet}\n</Marquee>\n"
+    },
+    {
+      "id": "vertical-status-strip",
+      "title": "Vertical status strip",
+      "description": "Loop status messages vertically and pause while focused.",
+      "code": "<script lang=\"ts\">\n  import { Marquee } from '@lostgradient/cinder/marquee';\n</script>\n\n<div style=\"max-inline-size: 24rem;\">\n  <Marquee direction=\"vertical\" duration=\"14s\" label=\"System status updates\">\n    {#snippet children()}\n      <div style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\n        <span>API latency is nominal.</span>\n        <span>Background jobs running in us-east-1.</span>\n        <span>Next maintenance window: Saturday 02:00 UTC.</span>\n      </div>\n    {/snippet}\n  </Marquee>\n</div>\n"
+    }
+  ]
+}

package/src/components/marquee/marquee.svelte

@@ -0,0 +1,268 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category layout
+   * @status beta
+   * @purpose Auto-scrolling horizontal or vertical ticker that loops content continuously with reduced-motion-safe behavior.
+   * @tag marquee
+   * @tag ticker
+   * @useWhen Showing repeating announcements, partner logos, or status strips in a constrained space.
+   * @useWhen You need CSS-driven, seamless loop motion that can pause on hover/focus.
+   * @avoidWhen Users need to manually scroll and inspect static overflow content. | scroll-area
+   * @avoidWhen Information should remain fixed in place without motion emphasis.
+   * @related scroll-area, banner
+   */
+  export type { MarqueeDirection, MarqueeProps } from './marquee.types.ts';
+</script>
+
+<script lang="ts">
+  import { classNames } from '../../utilities/class-names.ts';
+
+  import type { MarqueeProps } from './marquee.types.ts';
+
+  let {
+    direction = 'horizontal',
+    duration = '24s',
+    gap = '1.5rem',
+    label,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    class: customClassName,
+    children,
+    ...rest
+  }: MarqueeProps = $props();
+
+  const mergedClassName = $derived(classNames('cinder-marquee', customClassName));
+  const normalizedLabel = $derived(
+    typeof label === 'string' && label.trim().length > 0 ? label.trim() : undefined,
+  );
+  const ariaLabelledby = $derived((rest as { 'aria-labelledby'?: string })['aria-labelledby']);
+  const hasAccessibleName = $derived(
+    Boolean(normalizedLabel) ||
+      (typeof ariaLabelledby === 'string' && ariaLabelledby.trim().length > 0),
+  );
+  const role = $derived(hasAccessibleName ? 'region' : undefined);
+  let manuallyPaused = $state(false);
+  let manualResumeRequested = $state(false);
+  const pauseControlLabel = $derived(
+    manuallyPaused ? 'Resume marquee animation' : 'Pause marquee animation',
+  );
+  let primaryTrackItem: HTMLDivElement | undefined = $state();
+  let duplicateTrackItem: HTMLDivElement | undefined = $state();
+  let duplicateReady = $state(false);
+  let duplicateCloneVersion = 0;
+
+  function rewriteUrlReferences(value: string, idMap: Map<string, string>): string {
+    let nextValue = value;
+    for (const [originalId, duplicateId] of idMap) {
+      nextValue = nextValue.replaceAll(`url(#${originalId})`, `url(#${duplicateId})`);
+    }
+
+    return nextValue;
+  }
+
+  function rewriteCloneIds(root: HTMLElement): void {
+    const elementsWithIds = root.querySelectorAll<HTMLElement>('[id]');
+    if (elementsWithIds.length > 0) {
+      duplicateCloneVersion += 1;
+      const idMap = new Map<string, string>();
+      for (const element of elementsWithIds) {
+        const originalId = element.getAttribute('id');
+        if (!originalId) continue;
+        const duplicateId = `${originalId}--cinder-marquee-duplicate-${duplicateCloneVersion}`;
+        idMap.set(originalId, duplicateId);
+        element.setAttribute('id', duplicateId);
+      }
+
+      if (idMap.size > 0) {
+        const referenceAttributes = [
+          'href',
+          'xlink:href',
+          'fill',
+          'stroke',
+          'filter',
+          'mask',
+          'clip-path',
+          'marker-start',
+          'marker-mid',
+          'marker-end',
+          'aria-labelledby',
+          'aria-describedby',
+        ];
+        const urlReferenceAttributes = new Set([
+          'fill',
+          'stroke',
+          'filter',
+          'mask',
+          'clip-path',
+          'marker-start',
+          'marker-mid',
+          'marker-end',
+        ]);
+
+        root.querySelectorAll<HTMLElement>('*').forEach((element) => {
+          for (const attribute of referenceAttributes) {
+            const value = element.getAttribute(attribute);
+            if (!value) continue;
+
+            if (urlReferenceAttributes.has(attribute)) {
+              const rewrittenUrlValue = rewriteUrlReferences(value, idMap);
+              if (rewrittenUrlValue !== value) {
+                element.setAttribute(attribute, rewrittenUrlValue);
+              }
+              continue;
+            }
+
+            let nextValue = value;
+            for (const [originalId, duplicateId] of idMap) {
+              if (attribute === 'href' || attribute === 'xlink:href') {
+                if (nextValue === `#${originalId}`) {
+                  nextValue = `#${duplicateId}`;
+                }
+                continue;
+              }
+
+              if (attribute === 'aria-labelledby' || attribute === 'aria-describedby') {
+                nextValue = nextValue
+                  .split(/\s+/)
+                  .map((token) => (token === originalId ? duplicateId : token))
+                  .join(' ');
+              }
+            }
+
+            if (nextValue !== value) {
+              element.setAttribute(attribute, nextValue);
+            }
+          }
+
+          const styleValue = element.getAttribute('style');
+          if (!styleValue) return;
+          const rewrittenStyle = rewriteUrlReferences(styleValue, idMap);
+          if (rewrittenStyle !== styleValue) {
+            element.setAttribute('style', rewrittenStyle);
+          }
+        });
+      }
+    }
+
+    root
+      .querySelectorAll<
+        HTMLElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      >('input, select, textarea, button, fieldset, output, option, optgroup, [name]')
+      .forEach((element) => {
+        element.removeAttribute('name');
+      });
+  }
+
+  function syncDuplicateTrack() {
+    if (!primaryTrackItem || !duplicateTrackItem) return;
+    const clone = primaryTrackItem.cloneNode(true) as HTMLElement;
+    rewriteCloneIds(clone);
+    duplicateTrackItem.replaceChildren(...clone.childNodes);
+    duplicateReady = true;
+  }
+
+  function toggleManualPausedState(): void {
+    const nextPaused = !manuallyPaused;
+    manuallyPaused = nextPaused;
+    manualResumeRequested = !nextPaused;
+  }
+
+  function clearManualResumeRequest(): void {
+    manualResumeRequested = false;
+  }
+
+  function clearManualResumeRequestAfterFocusLeaves(event: FocusEvent): void {
+    const nextTarget = event.relatedTarget;
+    if (
+      event.currentTarget instanceof HTMLElement &&
+      nextTarget instanceof Node &&
+      event.currentTarget.contains(nextTarget)
+    ) {
+      return;
+    }
+
+    clearManualResumeRequest();
+  }
+
+  function clearManualResumeRequestAfterPointerLeaves(event: PointerEvent): void {
+    if (
+      event.currentTarget instanceof HTMLElement &&
+      event.currentTarget.contains(document.activeElement)
+    ) {
+      return;
+    }
+
+    clearManualResumeRequest();
+  }
+
+  $effect(() => {
+    if (!primaryTrackItem || !duplicateTrackItem) return;
+    duplicateReady = false;
+    syncDuplicateTrack();
+    const observer = new MutationObserver(() => {
+      syncDuplicateTrack();
+    });
+    observer.observe(primaryTrackItem, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+    });
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(() => {
+            syncDuplicateTrack();
+          });
+    resizeObserver?.observe(primaryTrackItem);
+    return () => {
+      observer.disconnect();
+      resizeObserver?.disconnect();
+    };
+  });
+</script>
+
+<div
+  {...rest}
+  class={mergedClassName}
+  data-cinder-direction={direction}
+  data-cinder-pause-hover={pauseOnHover ? 'true' : 'false'}
+  data-cinder-pause-focus={pauseOnFocus ? 'true' : 'false'}
+  data-cinder-manual-paused={manuallyPaused ? 'true' : 'false'}
+  data-cinder-manual-resumed={manualResumeRequested ? 'true' : 'false'}
+  data-cinder-ready={duplicateReady ? 'true' : 'false'}
+  aria-label={normalizedLabel}
+  {role}
+  style:--cinder-marquee-duration={duration}
+  style:--cinder-marquee-gap={gap}
+  onfocusout={clearManualResumeRequestAfterFocusLeaves}
+  onpointerleave={clearManualResumeRequestAfterPointerLeaves}
+>
+  <div
+    class="cinder-marquee__viewport"
+    role="group"
+    aria-label={normalizedLabel ? `${normalizedLabel} scroll area` : 'Marquee content'}
+    tabindex="0"
+  >
+    <button
+      type="button"
+      class="cinder-marquee__control"
+      aria-pressed={manuallyPaused}
+      onclick={toggleManualPausedState}
+    >
+      {pauseControlLabel}
+    </button>
+    <div class="cinder-marquee__track">
+      <div class="cinder-marquee__item" bind:this={primaryTrackItem}>
+        {@render children()}
+      </div>
+      <div
+        class="cinder-marquee__item"
+        aria-hidden="true"
+        inert
+        bind:this={duplicateTrackItem}
+      ></div>
+    </div>
+  </div>
+</div>

package/src/components/marquee/marquee.types.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type MarqueeDirection = 'horizontal' | 'vertical';
+
+/** Props for the Marquee component. */
+export type MarqueeProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'aria-label' | 'children' | 'class' | 'role'
+> & {
+  /** Scroll direction for the looping track. @default "horizontal" */
+  direction?: MarqueeDirection;
+  /** Animation duration for one complete loop (valid CSS time). @default "24s" */
+  duration?: string;
+  /** Gap between repeated items (valid CSS length). @default "1.5rem" */
+  gap?: string;
+  /** Accessible region label for the marquee container. */
+  label?: string;
+  /** Pause animation while hovered (pointer-capable devices). @default true */
+  pauseOnHover?: boolean;
+  /** Pause animation while any child is focused. @default true */
+  pauseOnFocus?: boolean;
+  /** Custom class merged with `.cinder-marquee`. */
+  class?: string;
+  /** Rendered marquee content. */
+  children: Snippet;
+};
+
+export interface MarqueeSchemaProps {
+  /** Scroll direction for the looping track. @default "horizontal" */
+  direction?: MarqueeDirection;
+  /** Animation duration for one complete loop (valid CSS time). @default "24s" */
+  duration?: string;
+  /** Gap between repeated items (valid CSS length). @default "1.5rem" */
+  gap?: string;
+  /** Accessible region label for the marquee container. */
+  label?: string;
+  /** Pause animation while hovered (pointer-capable devices). @default true */
+  pauseOnHover?: boolean;
+  /** Pause animation while any child is focused. @default true */
+  pauseOnFocus?: boolean;
+  /** Custom class merged with `.cinder-marquee`. */
+  class?: string;
+}

package/src/components/mega-menu/index.ts

@@ -0,0 +1,11 @@
+import './mega-menu.css';
+import MegaMenu from './mega-menu.svelte';
+
+export default MegaMenu;
+export type {
+  MegaMenuItem,
+  MegaMenuLink,
+  MegaMenuProps,
+  MegaMenuSection,
+} from './mega-menu.types.ts';
+export { MegaMenu };