@lostgradient/cinder 0.6.0 → 0.8.0

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

@@ -0,0 +1,6 @@
+import './stats-section.css';
+import StatsSection from './stats-section.svelte';
+
+export default StatsSection;
+export type { StatsSectionItem, StatsSectionProps } from './stats-section.types.ts';
+export { StatsSection };

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

@@ -0,0 +1,87 @@
+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.',
+    },
+    stats: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          label: {
+            type: 'string',
+            description: 'Metric label text.',
+          },
+          value: {
+            anyOf: [
+              {
+                type: 'string',
+              },
+              {
+                type: 'number',
+              },
+            ],
+            description: 'Metric value.',
+          },
+          changeValue: {
+            type: 'string',
+            description: 'Optional change value, e.g. "+12%".',
+          },
+          changeDirection: {
+            enum: ['up', 'down', 'neutral'],
+            description: 'Direction for change indicator.',
+          },
+          changeDescription: {
+            type: 'string',
+            description: 'Optional descriptor for change value.',
+          },
+        },
+        additionalProperties: false,
+        required: ['label', 'value'],
+      },
+      description: 'Stats to render via StatGroup + Stat.',
+    },
+    columns: {
+      enum: [1, 2, 3, 4, 'auto'],
+      description: 'Columns forwarded to StatGroup.',
+      default: 'auto',
+    },
+    variant: {
+      enum: ['default', 'cards', 'shared-borders'],
+      description: 'Variant forwarded to StatGroup.',
+      default: 'cards',
+    },
+    label: {
+      type: 'string',
+      description: 'Accessible label forwarded to StatGroup.',
+      default: 'Key metrics',
+    },
+    maxWidth: {
+      enum: ['prose', 'narrow', 'wide', 'full'],
+      description: 'Max width token forwarded to Container.',
+      default: 'wide',
+    },
+    class: {
+      type: 'string',
+      description: 'Custom class merged with `.cinder-stats-section`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['stats'],
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

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

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import Container from '../container/container.svelte';
+import Stat from '../stat/stat.svelte';
+import StatGroup from '../stat-group/stat-group.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+let { as = 'section', title, description, stats, columns = 'auto', variant = 'cards', label = 'Key metrics', maxWidth = 'wide', class: className, ...rest } = $props();
+function statChange(item) {
+    if (!item.changeValue || !item.changeDirection)
+        return undefined;
+    return item.changeDescription
+        ? {
+            value: item.changeValue,
+            direction: item.changeDirection,
+            description: item.changeDescription,
+        }
+        : { value: item.changeValue, direction: item.changeDirection };
+}
+function optionalStatProps(item) {
+    const change = statChange(item);
+    return change ? { change } : {};
+}
+</script>
+
+<svelte:element this={as} class={classNames('cinder-stats-section', className)} {...rest}>
+  <Container {maxWidth}>
+    <div class="cinder-stats-section__inner">
+      {#if title}
+        <header class="cinder-stats-section__header">
+          <h2 class="cinder-stats-section__title">{title}</h2>
+          {#if description}
+            <p class="cinder-stats-section__description">{description}</p>
+          {/if}
+        </header>
+      {/if}
+
+      <StatGroup {columns} {variant} {label}>
+        {#each stats as item, index (`${item.label}-${index}`)}
+          <Stat label={item.label} value={item.value} {...optionalStatProps(item)} />
+        {/each}
+      </StatGroup>
+    </div>
+  </Container>
+</svelte:element>

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

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContainerMaxWidth } from '../container/container.types.ts';
+import type { StatGroupColumns, StatGroupVariant } from '../stat-group/stat-group.types.ts';
+import type { StatChangeDirection } from '../stat/stat.types.ts';
+
+/** @schemaObject */
+export type StatsSectionItem = {
+  /** Metric label text. */
+  label: string;
+  /** Metric value. */
+  value: string | number;
+  /** Optional change value, e.g. "+12%". */
+  changeValue?: string;
+  /** Direction for change indicator. */
+  changeDirection?: StatChangeDirection;
+  /** Optional descriptor for change value. */
+  changeDescription?: string;
+};
+
+/** Props for the StatsSection component. */
+export type StatsSectionProps = 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;
+  /** Stats to render via StatGroup + Stat. */
+  stats: StatsSectionItem[];
+  /** Columns forwarded to StatGroup. @default "auto" */
+  columns?: StatGroupColumns;
+  /** Variant forwarded to StatGroup. @default "cards" */
+  variant?: StatGroupVariant;
+  /** Accessible label forwarded to StatGroup. @default "Key metrics" */
+  label?: string;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-stats-section`. */
+  class?: string;
+};
+
+export interface StatsSectionSchemaProps {
+  /** Wrapper element tag. @default "section" */
+  as?: 'section' | 'div';
+  /** Optional section heading text. */
+  title?: string;
+  /** Optional section description text. */
+  description?: string;
+  /** Stats to render via StatGroup + Stat. */
+  stats: StatsSectionItem[];
+  /** Columns forwarded to StatGroup. @default "auto" */
+  columns?: StatGroupColumns;
+  /** Variant forwarded to StatGroup. @default "cards" */
+  variant?: StatGroupVariant;
+  /** Accessible label forwarded to StatGroup. @default "Key metrics" */
+  label?: string;
+  /** Max width token forwarded to Container. @default "wide" */
+  maxWidth?: ContainerMaxWidth;
+  /** Custom class merged with `.cinder-stats-section`. */
+  class?: string;
+}

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

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

package/src/components/status-dot/index.ts

@@ -0,0 +1,11 @@
+import './status-dot.css';
+import StatusDot from './status-dot.svelte';
+
+export default StatusDot;
+export type {
+  StatusDotConnectionState,
+  StatusDotProps,
+  StatusDotSize,
+  StatusDotStatus,
+} from './status-dot.types.ts';
+export { StatusDot };

package/src/components/status-dot/status-dot.schema.ts

@@ -0,0 +1,45 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    status: {
+      enum: ['online', 'offline', 'warning', 'danger', 'pending', 'neutral', 'success', 'accent'],
+      description:
+        'Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`.',
+    },
+    connectionState: {
+      enum: ['connected', 'connecting', 'disconnected', 'error'],
+      description:
+        'Realtime connection preset. Sets status, default label, and live-region semantics.',
+    },
+    label: {
+      type: 'string',
+      description:
+        'Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way.',
+    },
+    showLabel: {
+      type: 'boolean',
+      description: 'Whether to render the visible label.',
+      default: true,
+    },
+    live: {
+      type: 'boolean',
+      description:
+        'Use role="status" with polite live-region attributes. Defaults true when connectionState is provided.',
+    },
+    size: {
+      enum: ['sm', 'md'],
+      description: 'Dot size.',
+      default: 'md',
+    },
+    class: {
+      type: 'string',
+      description: 'Extra classes appended to the root element.',
+    },
+  },
+  additionalProperties: false,
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/status-dot/status-dot.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+const connectionStatusMap = {
+    connected: 'online',
+    connecting: 'warning',
+    disconnected: 'offline',
+    error: 'danger',
+};
+const connectionLabels = {
+    connected: 'Connected',
+    connecting: 'Connecting',
+    disconnected: 'Disconnected',
+    error: 'Error',
+};
+let { status, connectionState, label, live, showLabel = true, size = 'md', class: className, 'aria-label': ariaLabel, ...rest } = $props();
+const normalizedAriaLabel = $derived(ariaLabel?.trim() ? ariaLabel.trim() : undefined);
+const resolvedStatus = $derived(status ?? (connectionState === undefined ? 'neutral' : connectionStatusMap[connectionState]));
+const resolvedLive = $derived(live ?? connectionState !== undefined);
+const normalizedLabel = $derived(label?.trim()
+    ? label.trim()
+    : connectionState === undefined
+        ? undefined
+        : connectionLabels[connectionState]);
+const hasVisibleLabel = $derived(showLabel && normalizedLabel !== undefined);
+// `role="img"` needs an author-provided name. Blank labels are treated as
+// absent so status is never communicated by color alone.
+const resolvedAriaLabel = $derived(normalizedAriaLabel ?? normalizedLabel ?? resolvedStatus);
+const visibleLabelIsLiveDuplicate = $derived(resolvedLive && normalizedLabel !== undefined && resolvedAriaLabel !== normalizedLabel);
+const needsHiddenLiveLabel = $derived(resolvedLive && (!hasVisibleLabel || visibleLabelIsLiveDuplicate));
+</script>
+
+<!--
+  `role="img"` (not `role="status"`) because StatusDot is a static decorative
+  indicator that can appear many times in a single view (e.g. one per row in a
+  list). `role="status"` is an ARIA polite live region: when injected into an
+  already-rendered DOM (paginated tables, virtualized lists) it can cause
+  screen readers to announce each dot as it mounts. `role="img"` declares the
+  element as a graphic with an accessible name supplied via `aria-label`,
+  which is the semantically correct choice for a non-changing visual state
+  badge.
+-->
+<span
+  {...rest}
+  class={classNames('cinder-status-dot', className)}
+  data-cinder-status={resolvedStatus}
+  data-cinder-state={connectionState}
+  data-cinder-size={size}
+  role={resolvedLive ? 'status' : 'img'}
+  aria-live={resolvedLive ? 'polite' : undefined}
+  aria-atomic={resolvedLive ? 'true' : undefined}
+  aria-label={resolvedLive ? undefined : resolvedAriaLabel}
+>
+  <span class="cinder-status-dot__indicator" aria-hidden="true"></span>
+  {#if hasVisibleLabel}
+    <span
+      class="cinder-status-dot__label"
+      aria-hidden={visibleLabelIsLiveDuplicate ? 'true' : undefined}>{normalizedLabel}</span
+    >
+  {/if}
+  {#if needsHiddenLiveLabel}
+    <span class="cinder-sr-only">{resolvedAriaLabel}</span>
+  {/if}
+</span>

package/src/components/status-dot/status-dot.types.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * Semantic status values understood by StatusDot.
+ *
+ * The string values are stamped onto the root as `data-cinder-status` and
+ * drive color exclusively via CSS — there are no hard-coded color classes
+ * on the component. The token mapping (e.g. `online` → `--cinder-success`,
+ * `danger` → `--cinder-danger`) lives in `status-dot.css` so consumers can
+ * theme without forking the component.
+ *
+ * - `success` maps to `--cinder-success` (same hue as `online`).
+ * - `accent` maps to `--cinder-accent`.
+ *
+ * Exported so host components (e.g. `stacked-list-item.svelte`) can type
+ * their own `status` prop against this union rather than restating it.
+ */
+export type StatusDotStatus =
+  | 'online'
+  | 'offline'
+  | 'warning'
+  | 'danger'
+  | 'pending'
+  | 'neutral'
+  | 'success'
+  | 'accent';
+
+export type StatusDotSize = 'sm' | 'md';
+
+/** Realtime connection states that StatusDot can render as a live-region preset. */
+export type StatusDotConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
+
+/**
+ * Props for StatusDot.
+ *
+ * The component manages the accessible name itself so the status is never
+ * communicated by color alone (WCAG 1.4.1): the visible label text wins,
+ * then a hidden but provided `label`, then the raw `status` token. A
+ * consumer-supplied `aria-label` always takes priority over the automatic
+ * fallback.
+ */
+export type StatusDotProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. */
+  status?: StatusDotStatus;
+  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+  connectionState?: StatusDotConnectionState;
+  /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
+  label?: string;
+  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+  live?: boolean;
+  /** Whether to render the visible label. Default `true`. */
+  showLabel?: boolean;
+  /** Dot size. Default `'md'`. */
+  size?: StatusDotSize;
+  /** Extra classes appended to the root element. */
+  class?: string;
+};
+
+export interface StatusDotSchemaProps {
+  /** Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`. `success` maps to `--cinder-success`; `accent` maps to `--cinder-accent`. */
+  status?: StatusDotStatus;
+  /** Realtime connection preset. Sets status, default label, and live-region semantics. */
+  connectionState?: StatusDotConnectionState;
+  /** Optional human label. Rendered visibly when `showLabel` is true; used as the accessible name either way. */
+  label?: string;
+  /** Whether to render the visible label. @default true */
+  showLabel?: boolean;
+  /** Use role="status" with polite live-region attributes. Defaults true when connectionState is provided. */
+  live?: boolean;
+  /** Dot size. @default "md" */
+  size?: StatusDotSize;
+  /** Extra classes appended to the root element. */
+  class?: string;
+}

package/src/components/status-dot/status-dot.variables.ts

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

package/src/components/steps/index.ts

@@ -0,0 +1,6 @@
+import './steps.css';
+import Steps from './steps.svelte';
+
+export default Steps;
+export type { StepItem, StepItemState, StepsOrientation, StepsProps } from './steps.types.ts';
+export { Steps };

package/src/components/steps/steps.css

@@ -203,6 +203,19 @@
     }
   }
 
+  [data-cinder-state='skipped'] .cinder-steps__marker {
+    background: var(--cinder-surface);
+    box-shadow: inset 0 0 0 1px var(--cinder-border-muted);
+    color: var(--cinder-text-muted);
+  }
+
+  @media (forced-colors: active) {
+    [data-cinder-state='skipped'] .cinder-steps__marker {
+      outline: 1px solid ButtonText;
+      box-shadow: none;
+    }
+  }
+
   [data-cinder-state='upcoming'] .cinder-steps__marker {
     color: var(--cinder-text-muted);
   }
@@ -301,6 +314,7 @@
     font-weight: var(--cinder-font-semibold);
   }
 
+  [data-cinder-state='skipped'] .cinder-steps__label,
   [data-cinder-state='upcoming'] .cinder-steps__label {
     color: var(--cinder-text-muted);
   }
@@ -326,7 +340,7 @@
   }
 
   /* ----------------------------------------
- * Visually-hidden text for completed steps
+ * Visually-hidden text for completed and skipped steps
  * ---------------------------------------- */
 
   .cinder-steps__sr-only,

package/src/components/steps/steps.examples.json

@@ -15,6 +15,12 @@
       "description": "A step becomes navigable when its `StepItem` carries an `href` (renders the body as a link) or an `onclick` (renders it as a button). The marker and connector stay decorative — only the body region is the focusable, clickable target.",
       "code": "<script lang=\"ts\">\n  import { Steps } from '@lostgradient/cinder/steps';\n  import type { StepItem } from '@lostgradient/cinder/steps';\n\n  let current = $state(1);\n\n  const steps: StepItem[] = [\n    { id: 'account', label: 'Account', description: 'Create your login', href: '#account' },\n    {\n      id: 'profile',\n      label: 'Profile',\n      description: 'Jump back to edit',\n      onclick: () => (current = 1),\n    },\n    { id: 'review', label: 'Review', description: 'Confirm and submit' },\n  ];\n</script>\n\n<Steps {steps} currentStep={current} label=\"Onboarding\" />\n"
     },
+    {
+      "id": "skipped",
+      "title": "Skipped step",
+      "description": "Use `state: \"skipped\"` when a flow advances past a step without completing it.",
+      "code": "<script lang=\"ts\">\n  import { Steps } from '@lostgradient/cinder/steps';\n  import type { StepItem } from '@lostgradient/cinder/steps';\n\n  const steps: StepItem[] = [\n    { id: 'account', label: 'Account', description: 'Create your login' },\n    {\n      id: 'profile',\n      label: 'Profile',\n      description: 'Optional details were skipped',\n      state: 'skipped',\n    },\n    { id: 'review', label: 'Review', description: 'Confirm and submit' },\n  ];\n</script>\n\n<Steps {steps} currentStep={2} label=\"Onboarding\" />\n"
+    },
     {
       "id": "vertical",
       "title": "Vertical orientation",

package/src/components/steps/steps.schema.json

@@ -18,6 +18,10 @@
       "type": "string",
       "description": "Visually-hidden text prepended to completed steps so screen readers\nannounce state + label. Defaults to 'Completed'."
     },
+    "skippedLabel": {
+      "type": "string",
+      "description": "Visually-hidden text prepended to skipped steps so screen readers announce\nstate + label. Defaults to 'Skipped'."
+    },
     "class": {
       "type": "string",
       "description": "Additional class names merged with `.cinder-steps`."

package/src/components/steps/steps.schema.ts

@@ -0,0 +1,49 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    currentStep: {
+      type: 'number',
+      description:
+        'Zero-based index of the active step. Steps with index < currentStep are\n"completed". Pass `steps.length` to mark every step as complete (terminal\n"done" state).',
+    },
+    orientation: {
+      enum: ['horizontal', 'vertical'],
+      description: "Layout direction. Defaults to 'horizontal'.",
+    },
+    label: {
+      type: 'string',
+      description: "Accessible name for the wrapping nav landmark. Defaults to 'Progress'.",
+    },
+    completedLabel: {
+      type: 'string',
+      description:
+        "Visually-hidden text prepended to completed steps so screen readers\nannounce state + label. Defaults to 'Completed'.",
+    },
+    skippedLabel: {
+      type: 'string',
+      description:
+        "Visually-hidden text prepended to skipped steps so screen readers announce\nstate + label. Defaults to 'Skipped'.",
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class names merged with `.cinder-steps`.',
+    },
+  },
+  additionalProperties: false,
+  required: ['currentStep'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'steps',
+        reason: 'unknown-shape',
+        required: true,
+        description: 'Ordered list of step entries from first to last.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/steps/steps.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import Check from 'lucide-svelte/icons/check';
+let { steps, currentStep, orientation = 'horizontal', label = 'Progress', completedLabel = 'Completed', skippedLabel = 'Skipped', class: className, } = $props();
+const clampedCurrent = $derived(steps.length === 0 ? undefined : Math.max(0, Math.min(steps.length, currentStep)));
+const stepStates = $derived(steps.map((step, index) => {
+    if (clampedCurrent === undefined)
+        return 'upcoming';
+    if (index === clampedCurrent)
+        return 'current';
+    if (step.state === 'skipped' && index < clampedCurrent)
+        return 'skipped';
+    if (index < clampedCurrent)
+        return 'complete';
+    return 'upcoming';
+}));
+</script>
+
+<nav
+  class={classNames('cinder-steps', className)}
+  aria-label={label}
+  data-cinder-orientation={orientation}
+>
+  <ol class="cinder-steps__list">
+    {#each steps as step, index (step.id)}
+      {@const state = stepStates[index] ?? 'upcoming'}
+      {@const isCurrent = state === 'current'}
+      {@const isComplete = state === 'complete'}
+      {@const connectorState =
+        clampedCurrent !== undefined && index < clampedCurrent ? 'complete' : 'upcoming'}
+      {@const hasHref = step.href !== undefined}
+      {@const isInteractive = hasHref || step.onclick !== undefined}
+      {@const stepLabel = step.label}
+      {@const stepDescription = step.description}
+      <li
+        class="cinder-steps__item"
+        data-cinder-state={state}
+        aria-current={isCurrent && !isInteractive ? 'step' : undefined}
+      >
+        <span class="cinder-steps__marker" aria-hidden="true">
+          {#if isComplete}
+            <Check class="cinder-steps__check" />
+          {:else}
+            <span class="cinder-steps__index">{index + 1}</span>
+          {/if}
+        </span>
+        {#if hasHref}
+          <a
+            class="cinder-steps__interactive cinder-steps__body"
+            href={step.href}
+            onclick={step.onclick}
+            aria-current={isCurrent ? 'step' : undefined}
+          >
+            {@render stepBody(stepLabel, stepDescription, state, completedLabel, skippedLabel)}
+          </a>
+        {:else if step.onclick}
+          <button
+            type="button"
+            class="cinder-steps__interactive cinder-steps__body"
+            onclick={step.onclick}
+            aria-current={isCurrent ? 'step' : undefined}
+          >
+            {@render stepBody(stepLabel, stepDescription, state, completedLabel, skippedLabel)}
+          </button>
+        {:else}
+          <span class="cinder-steps__body">
+            {@render stepBody(stepLabel, stepDescription, state, completedLabel, skippedLabel)}
+          </span>
+        {/if}
+        {#if index < steps.length - 1}
+          <span
+            class="cinder-steps__connector"
+            data-cinder-state={connectorState}
+            aria-hidden="true"
+          ></span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+{#snippet stepBody(
+  bodyLabel: string,
+  bodyDescription: string | undefined,
+  bodyState: StepItemState,
+  bodyCompletedLabel: string,
+  bodySkippedLabel: string,
+)}
+  <span class="cinder-steps__body-content">
+    {#if bodyState === 'complete'}
+      <span class="cinder-steps__sr-only">{bodyCompletedLabel}</span>
+      <span class="cinder-steps__sr-only-separator"> </span>
+    {:else if bodyState === 'skipped'}
+      <span class="cinder-steps__sr-only">{bodySkippedLabel}</span>
+      <span class="cinder-steps__sr-only-separator"> </span>
+    {/if}
+    <span class="cinder-steps__label">{bodyLabel}</span>
+    {#if bodyDescription}
+      <span class="cinder-steps__description">{bodyDescription}</span>
+    {/if}
+  </span>
+{/snippet}