@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/grid-list/grid-list.schema.ts

@@ -0,0 +1,31 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    minColumnWidth: {
+      type: 'string',
+      description:
+        'Minimum width of each grid cell, expressed as a CSS `<length>` value\n(e.g. `"16rem"`, `"240px"`, `"min(20rem, 100%)"`). Used as the first\nargument to `minmax()` inside a `repeat(auto-fill, ...)` track.\nDefault: `"16rem"`. Empty string is treated as unset.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+        description: 'Items — typically `GridListItem` instances.',
+      },
+      {
+        name: 'class',
+        reason: 'unknown-shape',
+        description: 'Extra class names merged with `cinder-grid-list`.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/grid-list/grid-list.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { minColumnWidth, class: className, children, ...rest } = $props();
+const minWidth = $derived(minColumnWidth && minColumnWidth.length > 0 ? minColumnWidth : undefined);
+</script>
+
+<ul
+  {...rest}
+  role="list"
+  class={classNames('cinder-grid-list', className)}
+  style:--cinder-grid-list-min-width={minWidth}
+>
+  {@render children()}
+</ul>

package/src/components/grid-list/grid-list.types.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type GridListProps = Omit<HTMLAttributes<HTMLUListElement>, 'role'> & {
+  /**
+   * Minimum width of each grid cell, expressed as a CSS `<length>` value
+   * (e.g. `"16rem"`, `"240px"`, `"min(20rem, 100%)"`). Used as the first
+   * argument to `minmax()` inside a `repeat(auto-fill, ...)` track.
+   * Default: `"16rem"`. Empty string is treated as unset.
+   */
+  minColumnWidth?: string;
+  /** Extra class names merged with `cinder-grid-list`. */
+  class?: string;
+  /** Items — typically `GridListItem` instances. */
+  children: Snippet;
+};

package/src/components/grid-list/grid-list.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = ['--cinder-grid-list-min-width'];
+
+export default variables;

package/src/components/grid-list/index.ts

@@ -0,0 +1,16 @@
+import GridListItem from '../grid-list-item/grid-list-item.svelte';
+import './grid-list.css';
+import GridListRoot from './grid-list.svelte';
+
+/**
+ * `GridList` is the parent compound component and a namespace exposing the
+ * compose-only `GridList.Item` leaf. The leaf remains importable individually
+ * via `@lostgradient/cinder/grid-list-item`.
+ */
+const GridList = Object.assign(GridListRoot, {
+  Item: GridListItem,
+});
+
+export default GridList;
+export type { GridListProps } from './grid-list.types.ts';
+export { GridList };

package/src/components/grid-list-item/grid-list-item.schema.ts

@@ -0,0 +1,69 @@
+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-grid-list__item` root element.',
+    },
+    href: {
+      type: 'string',
+      description:
+        'Destination URL. When set, the `title` snippet is rendered as a stretched `<a>` anchor covering the entire tile.',
+    },
+    rel: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description:
+        '`rel` attribute forwarded to the stretched-link anchor; `noopener noreferrer` is merged automatically when `target="_blank"`.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'actions',
+        reason: 'function-or-snippet',
+        description:
+          'Action buttons. This wrapper is lifted above the stretched-link overlay\nvia `position: relative; z-index: 1` so buttons remain clickable.',
+      },
+      {
+        name: 'image',
+        reason: 'function-or-snippet',
+        description: 'Optional image region (avatar, thumbnail).',
+      },
+      {
+        name: 'meta',
+        reason: 'function-or-snippet',
+        description: 'Tertiary metadata (badges, supplementary text).',
+      },
+      {
+        name: 'subtitle',
+        reason: 'function-or-snippet',
+        description: 'Secondary description.',
+      },
+      {
+        name: 'target',
+        reason: 'unknown-shape',
+        description:
+          'When `target` matches `"_blank"` (case-insensitive), the component\nautomatically composes `rel="noopener noreferrer"` with any\nconsumer-supplied `rel` tokens to prevent reverse-tabnapping.',
+      },
+      {
+        name: 'title',
+        reason: 'function-or-snippet',
+        description:
+          'Primary label. Provides the accessible name for the stretched link when `href` is set.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/grid-list-item/grid-list-item.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { href, target, rel, class: className, image, title, subtitle, meta, actions, ...rest } = $props();
+/**
+ * Compose `rel` for the stretched-link anchor.
+ * When target matches "_blank" (case-insensitive), merge "noopener" and
+ * "noreferrer" into whatever the consumer supplied, deduplicating tokens.
+ */
+const composedRel = $derived.by(() => {
+    const isBlank = target?.toLowerCase() === '_blank';
+    if (!isBlank)
+        return rel;
+    const tokens = new Set((rel ?? '').split(/\s+/).filter(Boolean));
+    tokens.add('noopener');
+    tokens.add('noreferrer');
+    return [...tokens].join(' ');
+});
+</script>
+
+<li {...rest} class={classNames('cinder-grid-list__item', className)}>
+  {#if image}
+    <div class="cinder-grid-list__image">
+      {@render image()}
+    </div>
+  {/if}
+  {#if title}
+    <div class="cinder-grid-list__title">
+      {#if href !== undefined}
+        <a class="cinder-grid-list__link" {href} {target} rel={composedRel}>
+          {@render title()}
+        </a>
+      {:else}
+        {@render title()}
+      {/if}
+    </div>
+  {/if}
+  {#if subtitle}
+    <div class="cinder-grid-list__subtitle">
+      {@render subtitle()}
+    </div>
+  {/if}
+  {#if meta}
+    <div class="cinder-grid-list__meta">
+      {@render meta()}
+    </div>
+  {/if}
+  {#if actions}
+    <div class="cinder-grid-list__actions">
+      {@render actions()}
+    </div>
+  {/if}
+</li>

package/src/components/grid-list-item/grid-list-item.types.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+type LiEventAttribute = Extract<keyof HTMLAttributes<HTMLLIElement>, `on${string}`>;
+type GridListItemBase = Omit<
+  HTMLAttributes<HTMLLIElement>,
+  'title' | 'class' | 'role' | 'tabindex' | LiEventAttribute
+> & {
+  /** Additional class merged onto the `.cinder-grid-list__item` root element. */
+  class?: string;
+  /** Optional image region (avatar, thumbnail). */
+  image?: Snippet;
+  /** Primary label. Provides the accessible name for the stretched link when `href` is set. */
+  title?: Snippet;
+  /** Secondary description. */
+  subtitle?: Snippet;
+  /** Tertiary metadata (badges, supplementary text). */
+  meta?: Snippet;
+  /**
+   * Action buttons. This wrapper is lifted above the stretched-link overlay
+   * via `position: relative; z-index: 1` so buttons remain clickable.
+   */
+  actions?: Snippet;
+};
+/** Non-linkified item — no stretched-link overlay. */
+type GridListItemStatic = GridListItemBase & {
+  href?: never;
+  target?: never;
+  rel?: never;
+};
+/**
+ * Linkified item — `title` becomes a stretched link covering the entire card
+ * via a pseudo-element overlay. Only `actions` (and descendants marked with
+ * `data-cinder-stretched-link-escape`) remain pointer-operable above the overlay.
+ *
+ * `title` is required when `href` is set: it provides the accessible name for
+ * the stretched-link anchor. An item with `href` but no `title` would render a
+ * pseudo-element overlay with no reachable `<a>` and no accessible name.
+ */
+type GridListItemLinked = GridListItemBase & {
+  /** Destination URL. When set, the `title` snippet is rendered as a stretched `<a>` anchor covering the entire tile. */
+  href: string;
+  /** Required when href is set — provides the accessible name for the anchor. */
+  title: Snippet;
+  /**
+   * When `target` matches `"_blank"` (case-insensitive), the component
+   * automatically composes `rel="noopener noreferrer"` with any
+   * consumer-supplied `rel` tokens to prevent reverse-tabnapping.
+   */
+  target?: HTMLAnchorAttributes['target'];
+  /** `rel` attribute forwarded to the stretched-link anchor; `noopener noreferrer` is merged automatically when `target="_blank"`. */
+  rel?: HTMLAnchorAttributes['rel'];
+};
+export type GridListItemProps = GridListItemStatic | GridListItemLinked;

package/src/components/grid-list-item/grid-list-item.variables.ts

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

package/src/components/grid-list-item/index.ts

@@ -0,0 +1,5 @@
+import GridListItem from './grid-list-item.svelte';
+
+export default GridListItem;
+export type { GridListItemProps } from './grid-list-item.types.ts';
+export { GridListItem };

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

@@ -0,0 +1,67 @@
+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',
+    },
+    eyebrow: {
+      type: 'string',
+      description: 'Small uppercase intro label rendered above the title.',
+    },
+    title: {
+      type: 'string',
+      description: 'Main marketing headline.',
+    },
+    description: {
+      type: 'string',
+      description: 'Supporting copy shown below the title.',
+    },
+    align: {
+      enum: ['start', 'center'],
+      description: 'Text alignment for heading and body copy.',
+      default: 'start',
+    },
+    mediaPosition: {
+      enum: ['start', 'end'],
+      description: 'Position of the optional media panel on wide layouts.',
+      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-hero-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['title'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'actions',
+        reason: 'function-or-snippet',
+        description: 'Optional CTA row, usually one or two Button components.',
+      },
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        description: 'Optional extra content rendered below description/actions.',
+      },
+      {
+        name: 'media',
+        reason: 'function-or-snippet',
+        description: 'Optional visual/media block (image, demo, illustration).',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,47 @@
+<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', eyebrow, title, description, align = 'start', mediaPosition = 'end', maxWidth = 'wide', actions, media, class: className, children, ...rest } = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-hero-section', className)}
+  data-cinder-align={align}
+  data-cinder-media-position={mediaPosition}
+  data-cinder-has-media={media ? '' : undefined}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-hero-section__inner">
+      <div class="cinder-hero-section__content">
+        {#if eyebrow}
+          <p class="cinder-hero-section__eyebrow">{eyebrow}</p>
+        {/if}
+        <h2 class="cinder-hero-section__title">{title}</h2>
+        {#if description}
+          <p class="cinder-hero-section__description">{description}</p>
+        {/if}
+        {#if actions}
+          <div class="cinder-hero-section__actions">
+            {@render actions()}
+          </div>
+        {/if}
+        {#if children}
+          <div class="cinder-hero-section__extra">
+            {@render children()}
+          </div>
+        {/if}
+      </div>
+      {#if media}
+        <div class="cinder-hero-section__media">
+          {@render media()}
+        </div>
+      {/if}
+    </div>
+  </Container>
+</svelte:element>

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

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+export type HeroSectionAlign = 'start' | 'center';
+export type HeroSectionMediaPosition = 'start' | 'end';
+
+/** Props for the HeroSection component. */
+export type HeroSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Optional CTA row, usually one or two Button components. */
+  actions?: Snippet;
+  /** Optional visual/media block (image, demo, illustration). */
+  media?: Snippet;
+  /** Optional extra content rendered below description/actions. */
+  children?: Snippet;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+};
+
+export interface HeroSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Small uppercase intro label rendered above the title. */
+  eyebrow?: string;
+  /** Main marketing headline. */
+  title: string;
+  /** Supporting copy shown below the title. */
+  description?: string;
+  /** Text alignment for heading and body copy. @default "start" */
+  align?: HeroSectionAlign;
+  /** Position of the optional media panel on wide layouts. @default "end" */
+  mediaPosition?: HeroSectionMediaPosition;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-hero-section`. */
+  class?: string;
+}

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

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

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

@@ -0,0 +1,10 @@
+import './hero-section.css';
+import HeroSection from './hero-section.svelte';
+
+export default HeroSection;
+export type {
+  HeroSectionAlign,
+  HeroSectionMediaPosition,
+  HeroSectionProps,
+} from './hero-section.types.ts';
+export { HeroSection };

package/src/components/hover-card/hover-card.schema.ts

@@ -0,0 +1,83 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    open: {
+      type: 'boolean',
+      description: 'Controls the open state of the card; bindable for controlled usage.',
+    },
+    openDelay: {
+      type: 'number',
+      description:
+        'Delay in milliseconds before the card opens after the pointer enters or focus lands on the trigger. Default `300`.',
+    },
+    closeDelay: {
+      type: 'number',
+      description:
+        'Delay in milliseconds before the card closes after the pointer leaves and focus departs. Default `150`.',
+    },
+    placement: {
+      enum: [
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+      description:
+        'Preferred placement of the card relative to the trigger. Default `bottom-start`.',
+    },
+    offset: {
+      type: 'number',
+      description: 'Distance in pixels between the trigger and the card. Default `8`.',
+    },
+    showArrow: {
+      type: 'boolean',
+      description:
+        'When true, renders a directional arrow pointing from the card toward the trigger. Default `false`.',
+    },
+    description: {
+      type: 'string',
+      description:
+        'Visually hidden text wired to the trigger via aria-describedby for assistive technology context.',
+    },
+    class: {
+      type: 'string',
+      description: "Additional class names merged with the component's root class.",
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'children',
+        reason: 'function-or-snippet',
+        required: true,
+      },
+      {
+        name: 'onopenchange',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'trigger',
+        reason: 'function-or-snippet',
+        required: true,
+      },
+      {
+        name: 'triggerRef',
+        reason: 'unknown-shape',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;