@lostgradient/cinder 0.6.0 → 0.8.0

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

@@ -0,0 +1,80 @@
+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: 'Optional section heading text.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional section description text.',
+    },
+    members: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Team member name.',
+          },
+          role: {
+            type: 'string',
+            description: 'Team member role.',
+          },
+          bio: {
+            type: 'string',
+            description: 'Optional short bio.',
+          },
+          avatarSrc: {
+            type: 'string',
+            description: 'Optional avatar image source.',
+          },
+          href: {
+            type: 'string',
+            description: 'Optional profile link destination.',
+          },
+        },
+        additionalProperties: false,
+        required: ['name', 'role'],
+      },
+      description: 'Team members to render.',
+    },
+    columns: {
+      enum: [2, 3, 4],
+      description: 'Grid column count.',
+      default: 3,
+    },
+    showAvatarGroup: {
+      type: 'boolean',
+      description: 'Whether to render a compact AvatarGroup summary above the grid.',
+      default: false,
+    },
+    avatarGroupLabel: {
+      type: 'string',
+      description: 'Label for the AvatarGroup summary.',
+      default: 'Team members',
+    },
+    maxWidth: {
+      enum: ['prose', 'narrow', 'wide', 'full'],
+      description: 'Max width token forwarded to Container.',
+      default: 'wide',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-team-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['members'],
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Avatar from '../avatar/avatar.svelte';
+import AvatarGroup from '../avatar-group/avatar-group.svelte';
+import Card from '../card/card.svelte';
+import Container from '../container/container.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { as = 'section', title, description, members, columns = 3, showAvatarGroup = false, avatarGroupLabel = 'Team members', maxWidth = 'wide', class: className, ...rest } = $props();
+const avatarItems = $derived(members.map((member) => member.avatarSrc ? { name: member.name, src: member.avatarSrc } : { name: member.name }));
+function avatarProps(name, src) {
+    return src ? { name, src } : { name };
+}
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-team-section', className)}
+  data-cinder-columns={String(columns)}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-team-section__inner">
+      {#if title}
+        <header class="cinder-team-section__header">
+          <h2 class="cinder-team-section__title">{title}</h2>
+          {#if description}
+            <p class="cinder-team-section__description">{description}</p>
+          {/if}
+        </header>
+      {/if}
+
+      {#if showAvatarGroup}
+        <div class="cinder-team-section__summary">
+          <AvatarGroup avatars={avatarItems} label={avatarGroupLabel} maxVisible={6} />
+        </div>
+      {/if}
+
+      <ul class="cinder-team-section__list">
+        {#each members as member, index (`${member.name}-${index}`)}
+          <li class="cinder-team-section__item">
+            <Card>
+              <div class="cinder-team-section__person">
+                <Avatar {...avatarProps(member.name, member.avatarSrc)} size="lg" />
+                <div class="cinder-team-section__meta">
+                  <p class="cinder-team-section__name">{member.name}</p>
+                  <p class="cinder-team-section__role">{member.role}</p>
+                </div>
+              </div>
+              {#if member.bio}
+                <p class="cinder-team-section__bio">{member.bio}</p>
+              {/if}
+              {#if member.href}
+                <a
+                  class="cinder-team-section__link"
+                  href={member.href}
+                  aria-label={`View ${member.name}'s profile`}
+                >
+                  View profile
+                </a>
+              {/if}
+            </Card>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </Container>
+</svelte:element>

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

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+/** @schemaObject */
+export type TeamSectionMember = {
+  /** Team member name. */
+  name: string;
+  /** Team member role. */
+  role: string;
+  /** Optional short bio. */
+  bio?: string;
+  /** Optional avatar image source. */
+  avatarSrc?: string;
+  /** Optional profile link destination. */
+  href?: string;
+};
+
+/** Props for the TeamSection component. */
+export type TeamSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section heading text. */
+  title?: string;
+  /** Optional section description text. */
+  description?: string;
+  /** Team members to render. */
+  members: TeamSectionMember[];
+  /** Grid column count. @default 3 */
+  columns?: 2 | 3 | 4;
+  /** Whether to render a compact AvatarGroup summary above the grid. @default false */
+  showAvatarGroup?: boolean;
+  /** Label for the AvatarGroup summary. @default "Team members" */
+  avatarGroupLabel?: string;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-team-section`. */
+  class?: string;
+};
+
+export interface TeamSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section heading text. */
+  title?: string;
+  /** Optional section description text. */
+  description?: string;
+  /** Team members to render. */
+  members: TeamSectionMember[];
+  /** Grid column count. @default 3 */
+  columns?: 2 | 3 | 4;
+  /** Whether to render a compact AvatarGroup summary above the grid. @default false */
+  showAvatarGroup?: boolean;
+  /** Label for the AvatarGroup summary. @default "Team members" */
+  avatarGroupLabel?: string;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-team-section`. */
+  class?: string;
+}

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

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

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

@@ -0,0 +1,10 @@
+import './testimonial-section.css';
+import TestimonialSection from './testimonial-section.svelte';
+
+export default TestimonialSection;
+export type {
+  TestimonialSectionItem,
+  TestimonialSectionLayout,
+  TestimonialSectionProps,
+} from './testimonial-section.types.ts';
+export { TestimonialSection };

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

@@ -0,0 +1,75 @@
+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: 'Optional section heading.',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional heading description.',
+    },
+    testimonials: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          quote: {
+            type: 'string',
+            description: 'Quoted testimonial content.',
+          },
+          name: {
+            type: 'string',
+            description: 'Person attribution name.',
+          },
+          role: {
+            type: 'string',
+            description: 'Optional role/job title.',
+          },
+          avatarSrc: {
+            type: 'string',
+            description: 'Optional avatar image source.',
+          },
+          company: {
+            type: 'string',
+            description: 'Optional company or team attribution.',
+          },
+        },
+        additionalProperties: false,
+        required: ['name', 'quote'],
+      },
+      description: 'Testimonials to render.',
+    },
+    layout: {
+      enum: ['single', 'grid'],
+      description: 'Layout mode.',
+      default: 'grid',
+    },
+    columns: {
+      enum: [2, 3],
+      description: 'Columns used by grid layout.',
+      default: 3,
+    },
+    maxWidth: {
+      enum: ['prose', 'narrow', 'wide', 'full'],
+      description: 'Max width token forwarded to Container.',
+      default: 'wide',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-testimonial-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['testimonials'],
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Avatar from '../avatar/avatar.svelte';
+import Card from '../card/card.svelte';
+import Container from '../container/container.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { as = 'section', title, description, testimonials, layout = 'grid', columns = 3, maxWidth = 'wide', class: className, ...rest } = $props();
+function avatarProps(name, src) {
+    return src ? { name, src } : { name };
+}
+</script>
+
+<svelte:element
+  this={as}
+  class={classNames('cinder-testimonial-section', className)}
+  data-cinder-layout={layout}
+  data-cinder-columns={String(columns)}
+  {...rest}
+>
+  <Container {maxWidth}>
+    <div class="cinder-testimonial-section__inner">
+      {#if title}
+        <header class="cinder-testimonial-section__header">
+          <h2 class="cinder-testimonial-section__title">{title}</h2>
+          {#if description}
+            <p class="cinder-testimonial-section__description">{description}</p>
+          {/if}
+        </header>
+      {/if}
+
+      <ul class="cinder-testimonial-section__list">
+        {#each testimonials as item, index (`${item.name}-${index}`)}
+          <li class="cinder-testimonial-section__item">
+            <Card>
+              <blockquote class="cinder-testimonial-section__quote">“{item.quote}”</blockquote>
+              <div class="cinder-testimonial-section__person">
+                <Avatar {...avatarProps(item.name, item.avatarSrc)} size="sm" />
+                <div class="cinder-testimonial-section__person-meta">
+                  <p class="cinder-testimonial-section__name">{item.name}</p>
+                  {#if item.role || item.company}
+                    <p class="cinder-testimonial-section__role">
+                      {[item.role, item.company].filter(Boolean).join(' · ')}
+                    </p>
+                  {/if}
+                </div>
+              </div>
+            </Card>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </Container>
+</svelte:element>

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

@@ -0,0 +1,57 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+
+/** @schemaObject */
+export type TestimonialSectionItem = {
+  /** Quoted testimonial content. */
+  quote: string;
+  /** Person attribution name. */
+  name: string;
+  /** Optional role/job title. */
+  role?: string;
+  /** Optional avatar image source. */
+  avatarSrc?: string;
+  /** Optional company or team attribution. */
+  company?: string;
+};
+
+export type TestimonialSectionLayout = 'single' | 'grid';
+
+/** Props for the TestimonialSection component. */
+export type TestimonialSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section heading. */
+  title?: string;
+  /** Optional heading description. */
+  description?: string;
+  /** Testimonials to render. */
+  testimonials: TestimonialSectionItem[];
+  /** Layout mode. @default "grid" */
+  layout?: TestimonialSectionLayout;
+  /** Columns used by grid layout. @default 3 */
+  columns?: 2 | 3;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-testimonial-section`. */
+  class?: string;
+};
+
+export interface TestimonialSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section heading. */
+  title?: string;
+  /** Optional heading description. */
+  description?: string;
+  /** Testimonials to render. */
+  testimonials: TestimonialSectionItem[];
+  /** Layout mode. @default "grid" */
+  layout?: TestimonialSectionLayout;
+  /** Columns used by grid layout. @default 3 */
+  columns?: 2 | 3;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-testimonial-section`. */
+  class?: string;
+}

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

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

package/src/components/textarea/index.ts

@@ -0,0 +1,6 @@
+import './textarea.css';
+import Textarea from './textarea.svelte';
+
+export default Textarea;
+export type { TextareaProps } from './textarea.types.ts';
+export { Textarea };

package/src/components/textarea/textarea.schema.ts

@@ -0,0 +1,65 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    disabled: {
+      type: 'boolean',
+      description: 'Disables the textarea.',
+    },
+    maxlength: {
+      type: 'number',
+      description:
+        'Maximum character count. Passed through to the native `maxlength` attribute and shown as the limit in the `showCount` counter.',
+    },
+    required: {
+      type: 'boolean',
+      description:
+        'Marks the field as required. Passed through to the native `required` attribute.',
+    },
+    rows: {
+      type: 'number',
+      description: 'Number of visible text rows. Defaults to 4.',
+    },
+    id: {
+      type: 'string',
+      description: 'Unique identifier — required for label association and ARIA wiring.',
+    },
+    label: {
+      type: 'string',
+      description: 'Visible label rendered in a `<label>` element associated via `for`.',
+    },
+    description: {
+      type: 'string',
+      description: 'Helper text displayed below the textarea; wired via `aria-describedby`.',
+    },
+    error: {
+      type: 'string',
+      description: 'Validation error message; sets `aria-invalid="true"` and `aria-describedby`.',
+    },
+    showCount: {
+      type: 'boolean',
+      description:
+        'When `true` AND `maxlength` is set, renders a live character counter\n(`{value.length}/{maxlength}`) below the textarea. The counter element\nis wired into `aria-describedby` so screen readers announce it as part\nof the field\'s description, and it is also placed inside an\n`aria-live="polite"` region so updates are announced as the user types.',
+    },
+  },
+  additionalProperties: false,
+  required: ['id'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'class',
+        reason: 'unknown-shape',
+        description: 'Extra class names merged with `.cinder-textarea`.',
+      },
+      {
+        name: 'value',
+        reason: 'unknown-shape',
+        description: 'Bound value of the textarea.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/textarea/textarea.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { resolveFieldControl } from '../../_internal/field-control.ts';
+import { getFormFieldContext } from '../../_internal/form-field-context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { resolveMaximumLength } from '../textarea-count.ts';
+let { id, value = $bindable(''), label, description, error, rows = 4, disabled, required, class: customClassName, maxlength, showCount = false, 'aria-describedby': consumerDescribedBy, 'aria-invalid': consumerInvalid, ...rest } = $props();
+const context = getFormFieldContext();
+const maximumLength = $derived(resolveMaximumLength(maxlength));
+const countId = $derived(showCount && maximumLength !== undefined ? `${id}-count` : undefined);
+const currentCount = $derived(value?.length ?? 0);
+const ownRequired = $derived(required ?? undefined);
+const field = $derived(resolveFieldControl({
+    id,
+    generatedId: id,
+    context,
+    hasDescription: !!description,
+    hasError: !!error,
+    localIdNamespace: 'textarea',
+    consumerDescribedBy,
+    consumerInvalid,
+    additionalDescribedBy: [countId],
+    required: ownRequired,
+    disabled,
+}));
+</script>
+
+<div class="cinder-textarea-field">
+  {#if label}
+    <label for={id} class="cinder-textarea-label" data-disabled={field.disabled || undefined}>
+      {label}
+      {#if field.required}
+        <span class="cinder-_required-marker" aria-hidden="true">*</span>
+      {/if}
+    </label>
+  {/if}
+  <textarea
+    {id}
+    {rows}
+    disabled={field.disabled}
+    required={field.required}
+    {maxlength}
+    class={classNames('cinder-_input-frame', 'cinder-textarea', customClassName)}
+    aria-invalid={field.ariaInvalid}
+    aria-describedby={field.describedBy}
+    bind:value
+    {...rest}
+  ></textarea>
+  {#if description}
+    <p id={field.ownDescriptionId} class="cinder-textarea-description">{description}</p>
+  {/if}
+  {#if countId}
+    <output
+      id={countId}
+      for={id}
+      class="cinder-textarea-count"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      {currentCount}/{maximumLength}
+    </output>
+  {/if}
+  {#if error}
+    <p id={field.ownErrorId} class="cinder-textarea-error" aria-live="polite">{error}</p>
+  {/if}
+</div>

package/src/components/textarea/textarea.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+export type TextareaProps = HTMLTextareaAttributes & {
+  /** Unique identifier — required for label association and ARIA wiring. */
+  id: string;
+  /** Bound value of the textarea. */
+  value?: string;
+  /** Visible label rendered in a `<label>` element associated via `for`. */
+  label?: string;
+  /** Helper text displayed below the textarea; wired via `aria-describedby`. */
+  description?: string;
+  /** Validation error message; sets `aria-invalid="true"` and `aria-describedby`. */
+  error?: string;
+  /** Number of visible text rows. Defaults to 4. */
+  rows?: number;
+  // `required` and `maxlength` redeclare inherited `HTMLTextareaAttributes` keys,
+  // deliberately narrowing them from `… | null` to clean `boolean` / `number`. The
+  // native "remove the attribute" `null` is noise in the documented prop surface
+  // (this mirrors how `rows` above narrows its inherited type). Both props are
+  // explicitly destructured in textarea.svelte, so the narrowed type is the only
+  // accepted shape — there is no `...rest` escape hatch. textarea.test.ts pins this.
+  /** Marks the field as required. Passed through to the native `required` attribute. */
+  required?: boolean;
+  /** Maximum character count. Passed through to the native `maxlength` attribute and shown as the limit in the `showCount` counter. */
+  maxlength?: number;
+  /** Disables the textarea. */
+  disabled?: boolean;
+  /** Extra class names merged with `.cinder-textarea`. */
+  class?: string;
+  /**
+   * When `true` AND `maxlength` is set, renders a live character counter
+   * (`{value.length}/{maxlength}`) below the textarea. The counter element
+   * is wired into `aria-describedby` so screen readers announce it as part
+   * of the field's description, and it is also placed inside an
+   * `aria-live="polite"` region so updates are announced as the user types.
+   */
+  showCount?: boolean;
+};

package/src/components/textarea/textarea.variables.ts

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

package/src/components/textarea-count.ts

@@ -0,0 +1,19 @@
+/**
+ * Parses a `maxlength` prop value into a usable integer, mirroring the HTML
+ * non-negative-integer attribute parser. Accepts digit-only strings (with
+ * optional surrounding whitespace or leading zeros) and non-negative safe
+ * integers. Rejects negative values, decimals, exponents, signs, empty strings,
+ * and internal whitespace.
+ */
+export function resolveMaximumLength(value: unknown): number | undefined {
+  if (typeof value === 'number') {
+    return Number.isSafeInteger(value) && value >= 0 ? value : undefined;
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!/^\d+$/.test(trimmed)) return undefined;
+    const parsed = Number(trimmed);
+    return parsed >= 0 && Number.isSafeInteger(parsed) ? parsed : undefined;
+  }
+  return undefined;
+}

package/src/components/time-field/index.ts

@@ -0,0 +1,6 @@
+import './time-field.css';
+import TimeField from './time-field.svelte';
+
+export default TimeField;
+export type { TimeFieldChange, TimeFieldGranularity, TimeFieldProps } from './time-field.types.ts';
+export { TimeField };