@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/faceted-filter-bar/faceted-filter-bar.svelte

@@ -0,0 +1,166 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { tick } from 'svelte';
+import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+import SearchField from '../search-field/search-field.svelte';
+import Chip from '../chip/chip.svelte';
+import Button from '../button/button.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+const generatedId = $props.id();
+let { 'aria-label': ariaLabel = 'Filters', searchQuery, searchPlaceholder = 'Search…', searchAriaLabel = 'Search', facets = [], appliedFilters = [], disabled = false, class: className, onsearchchange, onfacetchange, onfilterremove, onclearall, ...rest } = $props();
+const searchId = $derived(`${generatedId}-search`);
+let rootElement = $state();
+// Internal uncontrolled search value when searchQuery is not provided.
+let internalSearchQuery = $state('');
+const isSearchControlled = $derived(searchQuery !== undefined);
+const currentSearchQuery = $derived(isSearchControlled ? (searchQuery ?? '') : internalSearchQuery);
+// Facet controls are fully controlled by `appliedFilters`: the value a facet
+// shows is whatever applied filter owns its key, or empty. There is no
+// separate internal source of truth — that would let a select keep showing a
+// value the parent has cleared (URL-state reset, clear-all, saved filters).
+// A facet change is reported via `onfacetchange`; the consumer commits it
+// back through `appliedFilters`.
+function resolveFacetValue(key) {
+    return appliedFilters.find((filter) => filter.key === key)?.value ?? '';
+}
+function resolveFilterDisplayValue(key, value) {
+    const facet = facets.find((candidate) => candidate.key === key);
+    if (facet?.type !== 'select')
+        return value;
+    return facet.options.find((option) => option.value === value)?.label ?? value;
+}
+const hasAppliedFilters = $derived(appliedFilters.length > 0 || currentSearchQuery.length > 0);
+const totalActiveCount = $derived(appliedFilters.length);
+// Live region summary message — always in DOM, content changes when filters change.
+const summaryMessage = $derived.by(() => {
+    if (totalActiveCount === 0)
+        return '';
+    const parts = appliedFilters.map((filter) => `${filter.label}: ${resolveFilterDisplayValue(filter.key, filter.value)}`);
+    return `${totalActiveCount} active filter${totalActiveCount === 1 ? '' : 's'}: ${parts.join(', ')}`;
+});
+function handleSearchInput(value) {
+    if (!isSearchControlled) {
+        internalSearchQuery = value;
+    }
+    onsearchchange?.(value);
+}
+async function handleFilterRemove(key) {
+    const filterIndex = appliedFilters.findIndex((filter) => filter.key === key);
+    const facetFallbackKey = appliedFilters[filterIndex]?.key;
+    onfilterremove?.(key);
+    await tick();
+    const removeButtons = Array.from(rootElement?.querySelectorAll('.cinder-chip__remove') ?? []);
+    const nextRemoveButton = removeButtons[Math.min(filterIndex, removeButtons.length - 1)];
+    const facetSelect = facetFallbackKey
+        ? document.getElementById(`${generatedId}-facet-${facetFallbackKey}`)
+        : null;
+    const searchInput = document.getElementById(searchId);
+    (nextRemoveButton ?? facetSelect ?? searchInput)?.focus();
+}
+function handleClearAll() {
+    if (!isSearchControlled) {
+        internalSearchQuery = '';
+    }
+    onclearall?.();
+}
+function getFacetCurrentValue(key) {
+    return resolveFacetValue(key);
+}
+</script>
+
+<div
+  bind:this={rootElement}
+  {...rest}
+  class={classNames('cinder-faceted-filter-bar', className)}
+  role="search"
+  aria-label={ariaLabel}
+  data-disabled={disabled ? '' : undefined}
+>
+  <!-- Controls row: search field + facet selects -->
+  <div class="cinder-faceted-filter-bar__controls">
+    <SearchField
+      id={searchId}
+      class="cinder-faceted-filter-bar__search"
+      value={currentSearchQuery}
+      placeholder={searchPlaceholder}
+      aria-label={searchAriaLabel}
+      {disabled}
+      oninput={handleSearchInput}
+    />
+
+    {#each facets as facet (facet.key)}
+      {#if facet.type === 'select'}
+        {@const selectFacet = facet as SelectFacet}
+        <div class="cinder-faceted-filter-bar__facet">
+          <label
+            class="cinder-faceted-filter-bar__facet-label"
+            for={`${generatedId}-facet-${selectFacet.key}`}
+          >
+            {selectFacet.label}
+          </label>
+          <select
+            id={`${generatedId}-facet-${selectFacet.key}`}
+            class="cinder-faceted-filter-bar__select"
+            value={resolveFacetValue(selectFacet.key)}
+            disabled={disabled || selectFacet.disabled}
+            aria-label={selectFacet.label}
+            onchange={(event) => {
+              const target = event.currentTarget as HTMLSelectElement;
+              onfacetchange?.(selectFacet.key, target.value);
+            }}
+          >
+            <option value="">{selectFacet.placeholder ?? selectFacet.label}</option>
+            {#each selectFacet.options as option (option.value)}
+              <option value={option.value} disabled={option.disabled}>{option.label}</option>
+            {/each}
+          </select>
+          <span class="cinder-faceted-filter-bar__select-chevron" aria-hidden="true"></span>
+        </div>
+      {:else if facet.type === 'custom'}
+        <div class="cinder-faceted-filter-bar__facet">
+          {@render facet.control({
+            value: getFacetCurrentValue(facet.key),
+            onchange: (value: string) => {
+              onfacetchange?.(facet.key, value);
+            },
+          })}
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  <!-- Active controls row: chips + clear all -->
+  {#if hasAppliedFilters}
+    <div class="cinder-faceted-filter-bar__chips" aria-label="Active filter controls">
+      {#each appliedFilters as filter (filter.key)}
+        {@const displayValue = resolveFilterDisplayValue(filter.key, filter.value)}
+        <Chip
+          mode="removable"
+          label={`${filter.label}: ${displayValue}`}
+          removeAriaLabel={`Remove filter: ${filter.label}: ${displayValue}`}
+          {disabled}
+          onremove={() => handleFilterRemove(filter.key)}
+        />
+      {/each}
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="cinder-faceted-filter-bar__clear-all"
+        {disabled}
+        aria-label="Clear all filters"
+        onclick={handleClearAll}
+      >
+        Clear all
+      </Button>
+    </div>
+  {/if}
+
+  <!-- Always-in-DOM live region for accessible filter count summary.
+       Visibility toggled by content, never by {#if}, so the region is
+       registered with ATs before text is injected. -->
+  <VisuallyHiddenLiveRegion message={summaryMessage} priority="polite" />
+</div>

package/src/components/faceted-filter-bar/faceted-filter-bar.types.ts

@@ -0,0 +1,98 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/** A single option available within a select-type facet. */
+export type FacetOption = {
+  /** The value submitted when this option is selected. */
+  value: string;
+  /** The human-readable label shown in the option list. */
+  label: string;
+  /** When true, the option is visible but not selectable. */
+  disabled?: boolean;
+};
+
+/**
+ * A facet configured with a fixed list of options rendered as a native select.
+ * Use for status, category, queue, or any enumerable filter dimension.
+ */
+export type SelectFacet = {
+  /** Discriminant that determines how the facet is rendered. */
+  type: 'select';
+  /** Unique key used to identify this facet in the applied-filter map. */
+  key: string;
+  /** Accessible label for the facet control. */
+  label: string;
+  /** Placeholder text shown when no value is selected. */
+  placeholder?: string;
+  /** Options available for selection. */
+  options: readonly FacetOption[];
+  /** Whether the facet control is disabled. */
+  disabled?: boolean;
+};
+
+/**
+ * A facet rendered by a consumer-supplied snippet. Use for date-range pickers,
+ * comboboxes, or any control that cannot be expressed as a select list.
+ */
+export type CustomFacet = {
+  /** Discriminant that determines how the facet is rendered. */
+  type: 'custom';
+  /** Unique key used to identify this facet in the applied-filter map. */
+  key: string;
+  /** Accessible label for the facet (used in the applied-filter chip). */
+  label: string;
+  /** Consumer-supplied snippet that renders the full facet control. */
+  control: Snippet<[{ value: string; onchange: (value: string) => void }]>;
+};
+
+/** Union of all supported facet definition types. */
+export type FacetDefinition = SelectFacet | CustomFacet;
+
+/** An applied filter entry: a facet key paired with its current value and display label. */
+export type AppliedFilter = {
+  /** The facet key this filter belongs to. */
+  key: string;
+  /** The current value of the filter. */
+  value: string;
+  /** The human-readable label used in the removable chip. */
+  label: string;
+};
+
+/**
+ * Props for the FacetedFilterBar component.
+ *
+ * A composed filtering toolbar that combines a leading search field, consumer-defined
+ * facet controls, applied-filter chips, and a clear-all action into one accessible unit.
+ */
+export type FacetedFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+  /** Accessible label for the filter toolbar region. Required for screen readers. */
+  'aria-label'?: string;
+  /** Current text search query. When provided, the search field is controlled. */
+  searchQuery?: string;
+  /** Placeholder text shown in the leading search field. */
+  searchPlaceholder?: string;
+  /** Accessible label for the search input. Defaults to 'Search'. */
+  searchAriaLabel?: string;
+  /**
+   * Facet definitions rendered as filter controls after the search field.
+   * Each entry is either a select-type facet or a custom snippet-driven facet.
+   */
+  facets?: readonly FacetDefinition[];
+  /**
+   * Applied filters displayed as removable chips below the controls row.
+   * Controlled by the consumer; each entry is a key/value/label triple.
+   */
+  appliedFilters?: readonly AppliedFilter[];
+  /** When true, all filter controls and chips are disabled. */
+  disabled?: boolean;
+  /** Additional CSS classes applied to the root element. */
+  class?: string;
+  /** Fires when the search query changes. */
+  onsearchchange?: (query: string) => void;
+  /** Fires when a facet value changes, with the facet key and new value. */
+  onfacetchange?: (key: string, value: string) => void;
+  /** Fires when a specific applied filter chip is removed. */
+  onfilterremove?: (key: string) => void;
+  /** Fires when the clear-all button is clicked. */
+  onclearall?: () => void;
+};

package/src/components/faceted-filter-bar/faceted-filter-bar.variables.ts

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

package/src/components/faceted-filter-bar/index.ts

@@ -0,0 +1,13 @@
+import './faceted-filter-bar.css';
+import FacetedFilterBar from './faceted-filter-bar.svelte';
+
+export default FacetedFilterBar;
+export type {
+  AppliedFilter,
+  CustomFacet,
+  FacetDefinition,
+  FacetOption,
+  FacetedFilterBarProps,
+  SelectFacet,
+} from './faceted-filter-bar.types.ts';
+export { FacetedFilterBar };

package/src/components/feature-section/feature-section.schema.ts

@@ -0,0 +1,86 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    as: {
+      enum: ['section', 'div'],
+      description: 'Wrapper element tag.',
+      default: 'section',
+    },
+    title: {
+      type: 'string',
+      description: 'Section title rendered above the feature list.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional supporting intro copy for the section heading.',
+    },
+    items: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          title: {
+            type: 'string',
+            description: 'Feature heading text.',
+          },
+          description: {
+            type: 'string',
+            description: 'Supporting feature description.',
+          },
+          icon: {
+            type: 'string',
+            description: 'Optional decorative icon text (emoji or short symbol).',
+          },
+        },
+        additionalProperties: false,
+        required: ['description', 'title'],
+      },
+      description: 'Features to render.',
+    },
+    layout: {
+      enum: ['grid', 'split'],
+      description: 'Section layout mode.',
+      default: 'grid',
+    },
+    columns: {
+      enum: [2, 3, 4],
+      description: 'Grid column count used by the `grid` layout.',
+      default: 3,
+    },
+    mediaPosition: {
+      enum: ['start', 'end'],
+      description: 'Position of optional media in split layout.',
+      default: 'end',
+    },
+    maxWidth: {
+      enum: ['prose', 'narrow', 'wide', 'full'],
+      description: 'Max width token forwarded to Container.',
+      default: 'wide',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-feature-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['items', 'title'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description: 'Optional content rendered under the heading before the features list.',
+      },
+      {
+        name: 'media',
+        reason: 'function-or-snippet',
+        description: 'Optional media content for split layout.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/feature-section/feature-section.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Container from '../container/container.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { as = 'section', title, description, items, layout = 'grid', columns = 3, mediaPosition = 'end', maxWidth = 'wide', media, class: className, children, ...rest } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-feature-section', className)}
+  data-cinder-layout={layout}
+  data-cinder-columns={String(columns)}
+  data-cinder-media-position={mediaPosition}
+  data-cinder-has-media={media ? '' : undefined}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-feature-section__inner">
+      <header class="cinder-feature-section__header">
+        <h2 class="cinder-feature-section__title">{title}</h2>
+        {#if description}
+          <p class="cinder-feature-section__description">{description}</p>
+        {/if}
+        {#if children}
+          <div class="cinder-feature-section__extra">{@render children()}</div>
+        {/if}
+      </header>
+
+      <div class="cinder-feature-section__body">
+        <ul class="cinder-feature-section__list">
+          {#each items as item, index (`${item.title}-${index}`)}
+            <li class="cinder-feature-section__item">
+              {#if item.icon}
+                <span class="cinder-feature-section__icon" aria-hidden="true">{item.icon}</span>
+              {/if}
+              <h3 class="cinder-feature-section__item-title">{item.title}</h3>
+              <p class="cinder-feature-section__item-description">{item.description}</p>
+            </li>
+          {/each}
+        </ul>
+
+        {#if media}
+          <aside class="cinder-feature-section__media">
+            {@render media()}
+          </aside>
+        {/if}
+      </div>
+    </div>
+  </Container>
+</svelte:element>

package/src/components/feature-section/feature-section.types.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+/** @schemaObject */
+export type FeatureSectionItem = {
+  /** Feature heading text. */
+  title: string;
+  /** Supporting feature description. */
+  description: string;
+  /** Optional decorative icon text (emoji or short symbol). */
+  icon?: string;
+};
+
+export type FeatureSectionLayout = 'grid' | 'split';
+export type FeatureSectionMediaPosition = 'start' | 'end';
+
+/** Props for the FeatureSection component. */
+export type FeatureSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Section title rendered above the feature list. */
+  title: string;
+  /** Optional supporting intro copy for the section heading. */
+  description?: string;
+  /** Features to render. */
+  items: FeatureSectionItem[];
+  /** Section layout mode. @default "grid" */
+  layout?: FeatureSectionLayout;
+  /** Grid column count used by the `grid` layout. @default 3 */
+  columns?: 2 | 3 | 4;
+  /** Position of optional media in split layout. @default "end" */
+  mediaPosition?: FeatureSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Optional media content for split layout. */
+  media?: Snippet;
+  /** Optional content rendered under the heading before the features list. */
+  children?: Snippet;
+  /** Custom class merged with `.cinder-feature-section`. */
+  class?: string;
+};
+
+export interface FeatureSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Section title rendered above the feature list. */
+  title: string;
+  /** Optional supporting intro copy for the section heading. */
+  description?: string;
+  /** Features to render. */
+  items: FeatureSectionItem[];
+  /** Section layout mode. @default "grid" */
+  layout?: FeatureSectionLayout;
+  /** Grid column count used by the `grid` layout. @default 3 */
+  columns?: 2 | 3 | 4;
+  /** Position of optional media in split layout. @default "end" */
+  mediaPosition?: FeatureSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-feature-section`. */
+  class?: string;
+}

package/src/components/feature-section/feature-section.variables.ts

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

package/src/components/feature-section/index.ts

@@ -0,0 +1,11 @@
+import './feature-section.css';
+import FeatureSection from './feature-section.svelte';
+
+export default FeatureSection;
+export type {
+  FeatureSectionItem,
+  FeatureSectionLayout,
+  FeatureSectionMediaPosition,
+  FeatureSectionProps,
+} from './feature-section.types.ts';
+export { FeatureSection };

package/src/components/feed/feed.schema.ts

@@ -0,0 +1,30 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    class: {
+      type: 'string',
+      description: 'Additional class merged onto the `.cinder-feed` root element.',
+    },
+    live: {
+      type: 'boolean',
+      description:
+        'When true, the wrapper becomes an ARIA live region: `aria-live="polite"`\nand `aria-atomic="false"`. Use for feeds that mutate while the user is\non the page (streaming notifications, log tails, chat-like activity).\nDefaults to false — a polite live region on a static feed is noise.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Feed events (typically `<FeedEvent>` children).',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/feed/feed.svelte

@@ -0,0 +1,13 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { live = false, class: className, children, ...rest } = $props();
+const liveRegionAttributes = $derived(live ? { 'aria-live': 'polite', 'aria-atomic': 'false' } : {});
+</script>
+
+<ol {...rest} {...liveRegionAttributes} class={classNames('cinder-feed', className)}>
+  {@render children()}
+</ol>

package/src/components/feed/feed.types.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type FeedProps = Omit<HTMLAttributes<HTMLOListElement>, 'children' | 'class'> & {
+  /** Additional class merged onto the `.cinder-feed` root element. */
+  class?: string;
+  /**
+   * When true, the wrapper becomes an ARIA live region: `aria-live="polite"`
+   * and `aria-atomic="false"`. Use for feeds that mutate while the user is
+   * on the page (streaming notifications, log tails, chat-like activity).
+   * Defaults to false — a polite live region on a static feed is noise.
+   */
+  live?: boolean;
+  /** Feed events (typically `<FeedEvent>` children). */
+  children: Snippet;
+};

package/src/components/feed/feed.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = ['--cinder-feed-rail-size'];
+
+export default variables;

package/src/components/feed/index.ts

@@ -0,0 +1,16 @@
+import FeedEvent from '../feed-event/feed-event.svelte';
+import './feed.css';
+import FeedRoot from './feed.svelte';
+
+/**
+ * `Feed` is the parent compound component and a namespace exposing the
+ * compose-only `Feed.Event` leaf. The leaf remains importable individually via
+ * `@lostgradient/cinder/feed-event`.
+ */
+const Feed = Object.assign(FeedRoot, {
+  Event: FeedEvent,
+});
+
+export default Feed;
+export type { FeedProps } from './feed.types.ts';
+export { Feed };

package/src/components/feed-event/feed-event.schema.ts

@@ -0,0 +1,51 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    class: {
+      type: 'string',
+      description: 'Additional class merged onto the `.cinder-feed-event` root element.',
+    },
+    datetime: {
+      type: 'string',
+      description:
+        'ISO 8601 datetime string. Rendered as `<time datetime={datetime}>` so\nassistive tech and parsers receive a machine-readable timestamp. This is\nalways the authoritative value; the visible label is separate (see\n`timestamp` / `timestampLabel`).',
+    },
+    timestamp: {
+      type: 'string',
+      description:
+        'Visible time label, as plain text — the common case (`"2m ago"`,\n`"May 12, 3:30 PM"`). Rendered inside the `<time>` element. Optional, with a\ndeliberate three-way contract:\n\n- **omitted** (`undefined`) and no `timestampLabel` → falls back to the raw\n  `datetime` string, which is deterministic and SSR-safe (no locale or\n  timezone dependence).\n- **explicit empty string** (`timestamp=""`) → renders no visible label.\n  This is treated as "intentionally blank", NOT as omitted, so it does\n  **not** trigger the `datetime` fallback. Use it to hide the label while\n  keeping the machine-readable `<time datetime>` for assistive tech.\n- **non-empty string** → rendered verbatim.',
+    },
+    variant: {
+      enum: ['icon', 'minimal'],
+      description: 'Icon variant: renders a circular badge on the rail with the icon inside.',
+    },
+  },
+  additionalProperties: false,
+  required: ['datetime'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description:
+          'Main event body — the description, links, and secondary metadata. Passed as\nthe default children snippet:\n\n```svelte\n<FeedEvent datetime="…" timestamp="2m ago">\n  <strong>{user.name}</strong> pushed 3 commits\n</FeedEvent>\n```',
+      },
+      {
+        name: 'icon',
+        reason: 'function-or-snippet',
+        description: 'Required for the icon variant. Type-enforced by the discriminated union.',
+      },
+      {
+        name: 'timestampLabel',
+        reason: 'function-or-snippet',
+        description:
+          'Rich visible time label, for the rare case where the label needs markup\n(e.g. an `<abbr>` or nested element). Takes precedence over `timestamp` when\nboth are supplied. Most consumers should use the `timestamp` string instead.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/feed-event/feed-event.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { datetime, variant = 'icon', class: className, icon, children, timestamp, timestampLabel, ...rest } = $props();
+</script>
+
+<li {...rest} class={classNames('cinder-feed-event', className)} data-cinder-variant={variant}>
+  <span class="cinder-feed-event-rail" aria-hidden="true">
+    {#if variant === 'icon'}
+      <span class="cinder-feed-event-icon">{@render (icon as Snippet)()}</span>
+    {:else}
+      <span class="cinder-feed-event-dot"></span>
+    {/if}
+  </span>
+  <div class="cinder-feed-event-body">
+    {#if children}
+      <div class="cinder-feed-event-content">{@render children()}</div>
+    {/if}
+    <time class="cinder-feed-event-time" {datetime}>
+      {#if timestampLabel}{@render timestampLabel()}{:else if timestamp !== undefined}{timestamp}{:else}{datetime}{/if}
+    </time>
+  </div>
+</li>