# Stacks Svelte

Stacks Svelte Components Documentation

> Generated Storybook documentation optimized for LLM consumption.

---

## Table of Contents

1. [Getting Started/Overview](#getting-started-overview)
2. [Components/Avatar](#components-avatar)
3. [Components/AwardBling](#components-awardbling)
5. [Components/Button](#components-button)
6. [Components/ExpandingInput](#components-expandinginput)
7. [Components/Icon](#components-icon)
8. [Components/Link](#components-link)
9. [Components/Modal](#components-modal)
10. [Components/Notice](#components-notice)
11. [Components/PaginationController](#components-paginationcontroller)
12. [Components/Popover](#components-popover)
13. [Components/PostSummary](#components-postsummary)
14. [Components/Select](#components-select)
15. [Components/Skeleton](#components-skeleton)
16. [Components/Spinner](#components-spinner)
17. [Components/Tag](#components-tag)
18. [Components/TextInput](#components-textinput)
19. [Components/Toast](#components-toast)
20. [Components/UserCard](#components-usercard)

---

## Getting Started/Overview

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/getting-started-overview--docs](https://svelte.stackoverflow.design/?path=/docs/getting-started-overview--docs)

---

## Components/Avatar

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-avatar--docs](https://svelte.stackoverflow.design/?path=/docs/components-avatar--docs)

### Usage Examples

**Base:**

```svelte
<Avatar name="example" src="https://picsum.photos/128" />
```

**href:**

```svelte
<Avatar name="href example" href="#" src="https://picsum.photos/64" size={64} />
```

**Letter:**

```svelte
<Avatar name="letter example" class="bg-theme-primary-400" letter="S" size={64} />
```

**badge:**

```svelte
<Avatar name="badge example" badge src="https://picsum.photos/64" size={64} />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | Account name for screen readers |
| `size` | `Size` | The size of the avatar in pixels |
| `href` | `string` | Render the tag as a link with the given href |
| `src` | `string` | The avatar image source |
| `letter` | `string` | Single character to display as the avatar |
| `badge` | `boolean` | Boolean to show the shield badge on the avatar |
| `class` | `string` | Additional CSS classes added to the element |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--base)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--sizes)
- **href**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--href)
- **Letter**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--letter)
- **badge**: [View](https://svelte.stackoverflow.design/?path=/story/components-avatar--badge)

---

## Components/AwardBling

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-awardbling--docs](https://svelte.stackoverflow.design/?path=/docs/components-awardbling--docs)

### Usage Examples

**Base:**

```svelte
<AwardBling type="gold" name="Award Bling" children={"23" as unknown as Snippet} />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `type` | `Type` | The type of the award bling |
| `name` | `string` | The accessible text provided for screen readers |
| `class` | `string` | Additional CSS classes added to the element |
| `children` | `Snippet` | Optional snippet of content to display along with the award bling |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-awardbling--base)
- **Types**: [View](https://svelte.stackoverflow.design/?path=/story/components-awardbling--types)

---

## Components/Button

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-button--docs](https://svelte.stackoverflow.design/?path=/docs/components-button--docs)

### Usage Examples

**Base:**

```svelte
<Button >Ask question</Button>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `branding` | `Brand` | Applies styling appropriate for the given brand |
| `size` | `Size` | The size of the button |
| `variant` | `Variant` | The weight of the button |
| `weight` | `Weight` | The weight of the button |
| `href` | `string` | Render the button as a link with the given href |
| `disabled` | `boolean` | Boolean describing if the button is disabled |
| `dropdown` | `boolean` | Modifier describing if the button should include an appropriately-styled caret |
| `icon` | `boolean` | Boolean describing if the button contains an icon |
| `link` | `boolean` | Modifier describing if the button should be styled as a link |
| `loading` | `boolean` | Modifier describing if a loading spinner should be showed |
| `selected` | `boolean` | Modifier describing if the button is selected |
| `unset` | `boolean` | Modifier describing if all button styles should be removed including its focus state |
| `class` | `string` | Additional CSS classes added to the element |
| `children` | `Snippet` | Snippet for the button content |
| `badge` | `Snippet` | Optional badge to display on the button |

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--variants)
- **Loading**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--loading)
- **Dropdown**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--dropdown)
- **Badges**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--badges)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--sizes)
- **Additional styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-button--additional-styles)

---

## Components/ExpandingInput

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-expandinginput--docs](https://svelte.stackoverflow.design/?path=/docs/components-expandinginput--docs)

### Usage Examples

**Base:**

```svelte
<ExpandingInput placeholder="Enter your text here…"  />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The id to pair with a label |
| `variant` | `Variant` | The input's variant |
| `value` | `any` | Initial value to pass to input |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-expandinginput--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-expandinginput--variants)

---

## Components/Icon

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-icon--docs](https://svelte.stackoverflow.design/?path=/docs/components-icon--docs)

### Usage Examples

**Base:**

```svelte
<Icon src={Icons.IconWave} />
```

**Title:**

```svelte
<Icon src={Icons.IconWave} title="Hello" />
```

**Native:**

```svelte
<Icon src={Icons.IconWave} native />
```

**Styles:**

```svelte
<Icon src={Icons.IconWave} class="fc-theme-secondary-400" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `src` | `string` | The source of the SVG |
| `title` | `string` | The value of the nested title tag (will remove the aria-hidden attribute from the rendered SVG) |
| `native` | `boolean` | Boolean describing if the icon should be rendered with its native colors |
| `class` | `string` | Additional CSS classes added to the SVG element |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--base)
- **Title**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--title)
- **Native**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--native)
- **Styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--styles)
- **Showcase**: [View](https://svelte.stackoverflow.design/?path=/story/components-icon--showcase)

---

## Components/Link

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-link--docs](https://svelte.stackoverflow.design/?path=/docs/components-link--docs)

### Usage Examples

**Dropdown:**

```svelte
<Link href="#" dropdown />
```

**Disabled:**

```svelte
<Link href="#" disabled />
```

**Underlined:**

```svelte
<Link href="#" underlined />
```

**Visited:**

```svelte
<Link href="#" visited />
```

**Button element:**

```svelte
<Link >Click me</Link>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string \| undefined` | The href of the link. When not provided, renders the component as a `button` element. |
| `variant` | `Variant` | The weight of the link |
| `disabled` | `any` | Boolean describing if the link is disabled |
| `dropdown` | `any` | Modifier describing if the link should include an appropriately-styled caret |
| `underlined` | `any` | Modifier describing if the link should be underlined |
| `visited` | `any` | Modifier describing if the link should apply a visited state style |
| `class` | `string` | Additional CSS classes added to the element |

### Story Variations (7)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--base)
- **Dropdown**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--dropdown)
- **Disabled**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--disabled)
- **Underlined**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--underlined)
- **Visited**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--visited)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--variants)
- **Button element**: [View](https://svelte.stackoverflow.design/?path=/story/components-link--button-element)

---

## Components/Modal

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-modal--docs](https://svelte.stackoverflow.design/?path=/docs/components-modal--docs)

### Usage Examples

**Base:**

```svelte
<Modal id="base-modal" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The html id attribute for the modal (required) |
| `visible` | `any` | Boolean controlling the visibility of the modal |
| `state` | `State` | The state of the modal |
| `i18nCloseButtonLabel` | `any` | Localized translation for the close button aria label |
| `preventCloseOnClickOutside` | `any` | Boolean controlling whether or not the modal should close when the user clicks outside. This is an escape hatch, please consider whether use of this prop is absolutely necessary! |
| `hideCloseButton` | `any` | Boolean controlling display of the modal close button. This is an escape hatch, please consider whether use of this prop is absolutely necessary! |
| `class` | `string` | Additional CSS classes added to the element |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-modal--base)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-modal--states)

---

## Components/Notice

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-notice--docs](https://svelte.stackoverflow.design/?path=/docs/components-notice--docs)

### Usage Examples

**Base:**

```svelte
<Notice  children={content}></Notice>
```

**Actions:**

```svelte
<Notice variant="info">
    I am a notice with a Close Action
    {#snippet actions()}
        <NoticeAction
            type="close"
            onclick={() => {
                alert("You closed the notice");
            }}
        />,
    {/snippet}
</Notice>
<hr />
<Notice variant="info">
    I am a notice with a Custom Action
    {#snippet actions()}
        <NoticeAction>Click me</NoticeAction>
    {/snippet}
</Notice>
```

**With Icon:**

```svelte
<Notice variant="danger" icon={IconAlert} iconTitle="Alert Icon">
    I am a notice with an icon
</Notice>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `Variant` | The variant of the notice |
| `important` | `boolean` | Apply important styling to for extra emphasis |
| `role` | `AriaRole \| undefined \| null` | Underlying ARIA role attribute (see https: |
| `icon` | `string` | The icon to display within the badge |
| `iconTitle` | `string` | The title attribute for the icon |
| `class` | `string` | Additional CSS classes added to the element |
| `children` | `Snippet` | Snippet for the button content |
| `actions` | `Snippet` | Snippet for notice actions |

### Subcomponents

#### NoticeAction

| Prop | Type | Description |
|------|------|-------------|
| `type` | `"close"` | Type of notice action |
| `i18nCloseButtonLabel` | `string` | Title for the icon |
| `children` | `Snippet` | Snippet for the button content |

### Story Variations (4)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--variants)
- **Actions**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--actions)
- **With Icon**: [View](https://svelte.stackoverflow.design/?path=/story/components-notice--with-icon)

---

## Components/PaginationController

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs](https://svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs)

### Usage Examples

**First page selected of many:**

```svelte
<PaginationController page={1} totalPages={12} />
```

**Intermediate page selected of many:**

```svelte
<PaginationController page={6} totalPages={12} />
```

**Last page selected of many:**

```svelte
<PaginationController page={12} totalPages={12} />
```

**Intermediate page selected of few:**

```svelte
<PaginationController page={2} totalPages={5} />
```

**Only one page:**

```svelte
<PaginationController page={1} totalPages={1} />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `page` | `number` | The current page number |
| `totalPages` | `number` | The total number of pages |
| `urlGenerator` | `(page: number)` | Function to generate the URL for a given page number |
| `followLink` | `any` | Whether to follow the link natively or rely on the pagechange event |
| `i18nNextText` | `any` | Localized translation for the visible "Next" page link text |
| `i18nPrevText` | `any` | Localized translation for the visible "Prev" page link text |
| `i18nPageText` | `any` | Localized translation for Next/Prev "page" screen reader text |
| `i18nNavigationLabel` | `string` | Localized translation aria-label on nav element wrapping the pagination component |

### Subcomponents

#### Pagination

| Prop | Type | Description |
|------|------|-------------|
| `i18nNavigationLabel` | `string` | - |

#### PaginationItem

| Prop | Type | Description |
|------|------|-------------|
| `url` | `string` | - |
| `selected` | `boolean` | - |

#### PaginationItemClear

### Story Variations (5)

- **First page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--first-page-selected-of-many)
- **Intermediate page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--intermediate-page-selected-of-many)
- **Last page selected of many**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--last-page-selected-of-many)
- **Intermediate page selected of few**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--intermediate-page-selected-of-few)
- **Only one page**: [View](https://svelte.stackoverflow.design/?path=/story/components-paginationcontroller--only-one-page)

---

## Components/Popover

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-popover--docs](https://svelte.stackoverflow.design/?path=/docs/components-popover--docs)

### Usage Examples

**Base:**

```svelte
<Popover id="popover-base" />
```

**Tooltip:**

```svelte
<Popover id="tooltip" tooltip>
    <PopoverReference>
        <Button weight="filled">Tooltip</Button>
    </PopoverReference>
    <PopoverContent>Here I am</PopoverContent>
</Popover>

<Popover id="tooltip-interactive" tooltip>
    <PopoverReference>
        <Button weight="filled">Tooltip Interactive</Button>
    </PopoverReference>
    <PopoverContent>
        <p>This tooltip contains a focusable element.</p>
        <Button weight="filled">Some action</Button>
    </PopoverContent>
</Popover>
```

**Autoshow:**

```svelte
<Popover id="autoshow" placement="right" autoshow>
    <PopoverReference>
        <Button weight="filled">Trigger</Button>
    </PopoverReference>
    <PopoverContent>Here I am</PopoverContent>
</Popover>
```

**Inline Reference:**

```svelte
<Popover id="inline" placement="top">
    <p class="ws3">
        This is is a paragraph <PopoverReference
            ><span role="button" class="s-link"
                >containing a button styled as a link that wraps across
                two lines</span
            ></PopoverReference
        >. It shows the benefit of using floating ui inline middleware.
    </p>
    <PopoverContent>Here I am</PopoverContent>
</Popover>
```

**Not Dismissible:**

```svelte
<Popover id="not-dismissable" placement="right" dismissible={false}>
    <PopoverReference>
        <Button weight="filled">Trigger</Button>
    </PopoverReference>
    <PopoverContent>Here I am<PopoverCloseButton /></PopoverContent>
</Popover>
```

**Focus Trap:**

```svelte
<Popover
    id="focus-trap"
    placement="right"
    dismissible={false}
    trapFocus={true}
    let:close
>
    <PopoverReference>
        <Button weight="filled">Trigger</Button>
    </PopoverReference>
    <PopoverContent>
        <p class="d-flex fd-column g16">
            The focus is now trapped in the popover.
            <TextInput size="sm" id="name" label="Name"></TextInput>
            <TextInput size="sm" id="surname" label="Surname"
            ></TextInput>
            <Button
                type="submit"
                weight="filled"
                onclick={() => close()}
            >
                Submit
            </Button>
            <PopoverCloseButton />
        </p>
    </PopoverContent>
</Popover>
```

**Controlled:**

```svelte
<Popover id="controlled" placement="top" {visible}>
        <PopoverReference>
            <Icon src={IconAccessibility} title="Accessibility" />
        </PopoverReference>
        <PopoverContent>Controlled by external state</PopoverContent>
    </Popover>
    <div class="d-flex ai-center g8 mt24">
        <label class="s-label" for="popover-visibility-control">
            Visibility
        </label>
        <input
            class="s-toggle-switch"
            id="popover-visibility-control"
            type="checkbox"
            checked={visible}
            on:click={onToggle}
        />
</div>
```

**External Reference:**

```svelte
<p class="wmx3 pb12 ta-center">
    This API is particularly useful when the reference element is
    outside the svelte codebase<br /> (e.g. in a Razor view)
</p>
<button class="s-btn s-btn__filled" id="external-reference-element">
    External Reference
</button>
<Popover id="external-reference" placement="bottom">
    <PopoverReference elementId="external-reference-element" />
    <PopoverContent>Here I am<PopoverCloseButton /></PopoverContent>
</Popover>
```

**Events:**

```svelte
<Popover
    id="events"
    placement="right"
    on:open={() => (lastEvent = "opened")}
    on:close={() => (lastEvent = "closed")}
    let:visible
>
    <PopoverReference>
        <Button weight="filled">Trigger</Button>
    </PopoverReference>
    <PopoverContent>Here I am</PopoverContent>
    <p class="mt12">Visible: {visible}</p>
</Popover>
<p>Last Event: {lastEvent}</p>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | The html id attribute for the popover (required) |
| `autoshow` | `any` | Whether or not the popover should be visible on mount |
| `visible` | `boolean \| undefined` | Boolean describing if the popover panel should be visible or not. If not specified, the component is uncontrolled and toggling behavior is automatically taken care of. When specified, the component is controlled by the consumer and the internal open/closed state is ignored. |
| `placement` | `Placement` | Dictates where to place the popover in relation to the reference element |
| `strategy` | `Strategy` | The type of CSS position property to use for the popover content. See https://floating-ui.com/docs/computeposition#strategy |
| `trapFocus` | `any` | Whether or not the popover should trap focus within itself When active make sure to include in the popover content a way for the user dismiss the popover (e.g. a cancel button or the PopoverCloseButton component) |
| `dismissible` | `any` | Whether or not the popover should close when clicking outside of it or in the reference element |
| `tooltip` | `any` | Whether or not the popover should be an on-hover tooltip |

### Subcomponents

#### PopoverCloseButton

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | The aria-label for the close button |
| `class` | `string` | Additional CSS classes added to the element |

#### PopoverContent

| Prop | Type | Description |
|------|------|-------------|
| `role` | `string \| null` | The aria role of the popover (if not specified, it will default to 'dialog' for popovers or 'tooltip' when in tooltip mode) |
| `class` | `string` | Additional CSS classes added to the element |

#### PopoverReference

| Prop | Type | Description |
|------|------|-------------|
| `elementId` | `string \| null` | The id of the reference element (this is an alternative to passing the element as a slot) |

### Story Variations (11)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--base)
- **Tooltip**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--tooltip)
- **Autoshow**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--autoshow)
- **Placements**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--placements)
- **Strategies**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--strategies)
- **Inline Reference**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--inline-reference)
- **Not Dismissible**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--not-dismissible)
- **Focus Trap**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--focus-trap)
- **Controlled**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--controlled)
- **External Reference**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--external-reference)
- **Events**: [View](https://svelte.stackoverflow.design/?path=/story/components-popover--events)

---

## Components/PostSummary

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-postsummary--docs](https://svelte.stackoverflow.design/?path=/docs/components-postsummary--docs)

### Usage Examples

**Minimal:**

```svelte
<!-- `minimal` prop is true -->
<PostSummary {...baseArgs} minimal>
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**New activity:**

```svelte
<!-- `activityIndicator` prop is true -->
<PostSummary {...baseArgs} activityIndicator>
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Gated:**

```svelte
<!-- `gated` prop is true -->
<PostSummary {...baseArgs} gated>
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Answered:**

```svelte
<!-- `bounty` prop included -->
<PostSummary {...baseArgs} acceptedAnswer>
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Bounty:**

```svelte
<!-- `bounty` prop included -->
<PostSummary {...baseArgs} bounty={50}>
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Read Time:**

```svelte
<!-- `readTime` prop included -->
<PostSummary {...baseArgs} readTime="5 minute read">
    <svelte:fragment slot="tags">
        <Tag href="#">data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Ignored:**

```svelte
<!-- `ignored` prop is true -->
<PostSummary {...baseArgs} ignored>
    <svelte:fragment slot="tags">
        <Tag href="#" ignored>data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

**Watched:**

```svelte
<!-- `watched` prop is true -->
<PostSummary {...baseArgs} watched>
    <svelte:fragment slot="tags">
        <Tag href="#" watched>data</Tag>
        <Tag href="#">data-insights</Tag>
    </svelte:fragment>
</PostSummary>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `href` | `string` | The URL to navigate to when the post title is clicked |
| `title` | `string` | The title of the post |
| `timestamp` | `string` | The timestamp for the post |
| `userAvatar` | `string` | Avatar image source of post author |
| `userName` | `string` | The display name of the post author |
| `userProfileUrl` | `string` | Link to the post author's profile |
| `userReputation` | `string \| number` | The reputation of the post author |
| `acceptedAnswer` | `boolean` | Apply styling to the "answers" stats item to indicate the post has an accepted answer |
| `activityIndicator` | `boolean` | Show an activity indicator before the title |
| `answers` | `number \| string \| undefined` | Count of answers on the post |
| `bounty` | `number \| undefined` | The bounty placed on the post |
| `contentType` | `ContentType` | The content type of the post to be indicated on the post summary |
| `excerpt` | `string \| undefined` | A brief excerpt of the post content |
| `excerptSize` | `ExcerptSize` | The size of the excerpt text |
| `gated` | `boolean` | Indicate a post is by displaying a shield icon before the title |
| `hotness` | `Hotness` | Applies a "hot" styling to the views stats item |
| `ignored` | `boolean` | Apply "ignored" styling |
| `minimal` | `boolean` | Apply "minimal" styling |
| `readTime` | `string \| undefined` | The readtime on the post |
| `state` | `State` | The state of the post which affects its styling |
| `views` | `number \| string \| undefined` | Count of views on the post |
| `votes` | `number \| string \| undefined` | Count of votes on the post |
| `watched` | `boolean` | Apply "watched" styling |
| `i18nAcceptedAnswerIconTitle` | `string \| undefined` | Label to be provided for the "accepted answer" checkmark icon on the "answers" stats item |
| `i18nActivityIndicatorText` | `string` | Text for the activity indicator |
| `i18nAnswersUnit` | `string` | Text for the views stats item unit |
| `i18nActionMenuButtonText` | `string` | Text for the action menu button |
| `i18nContentTypeText` | `string \| undefined` | Text for the content type |
| `i18nGatedTitle` | `string \| undefined` | Text on gated posts for the shield icon that preceeds the post title |
| `i18nStateBadgeText` | `string \| undefined` | Text for the state badge |
| `i18nViewsUnit` | `string` | Text for the views stats item unit |
| `i18nVotesUnit` | `string` | Text for the votes stats item unit |
| `class` | `string` | Additional CSS classes added to the element |

### Subcomponents

#### PostSummaryAnswer

| Prop | Type | Description |
|------|------|-------------|
| `excerpt` | `string` | A brief excerpt of the answer |
| `href` | `string` | The URL to navigate to when the "View answers" link is clicked |
| `timestamp` | `string` | The timestamp for the answer |
| `userAvatar` | `string` | Avatar image source of answer's author |
| `userName` | `string` | The display name of the answer author |
| `userProfileUrl` | `string` | Link to the answer author's profile |
| `userReputation` | `string \| number` | The reputation of the answer author |
| `votes` | `number \| string` | Count of votes on the answer |
| `accepted` | `boolean` | Display the "Accepted answer" stats item |
| `i18nAcceptedAnswerText` | `any` | The text for "Accepted answer" stats item |
| `i18nVotesUnit` | `string` | Text for the votes stats item unit |
| `i18nViewAnswersText` | `any` | The text for "View answers" link |

#### PostSummaryContentType

| Prop | Type | Description |
|------|------|-------------|
| `name` | `ContentTypeName` | The type of content to indicate |
| `href` | `string` | The URL to navigate to when the content type is clicked |
| `i18nContentTypeText` | `string \| undefined` | The excerpt text to be displayed |

#### PostSummaryExcerpt

| Prop | Type | Description |
|------|------|-------------|
| `excerpt` | `string` | The excerpt text to be displayed |
| `size` | `ExcerptSize` | The size of the excerpt text |

#### PostSummaryStateBadge

| Prop | Type | Description |
|------|------|-------------|
| `state` | `BadgeState` | The state of the post, which affects its styling |
| `i18nText` | `string \| undefined` | Text to display in the badge |

#### PostSummaryStatsItem

| Prop | Type | Description |
|------|------|-------------|
| `number` | `string \| number` | Number to be displayed |
| `unit` | `string` | Label to be displayed as the unit of the number |
| `hotness` | `Hotness` | Apply hotness styling |
| `variant` | `Variant` | The variant of the stats item |
| `class` | `string` | Additional CSS classes added to the element |

### Story Variations (14)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--base)
- **Minimal**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--minimal)
- **Excerpt Size**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--excerpt-size)
- **New activity**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--new-activity)
- **Gated**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--gated)
- **Answered**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--answered)
- **Bounty**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--bounty)
- **Read Time**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--read-time)
- **Hotness**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--hotness)
- **Content Type**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--content-type)
- **Ignored**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--ignored)
- **Watched**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--watched)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--states)
- **Optional slots**: [View](https://svelte.stackoverflow.design/?path=/story/components-postsummary--optional-slots)

---

## Components/Select

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-select--docs](https://svelte.stackoverflow.design/?path=/docs/components-select--docs)

### Usage Examples

**Base:**

```svelte
<Select id="select-base" label="Base" />
```

**With Description and Message:**

```svelte
<Select
    id="select-with-description-and-message"
    label="With Description and Message"
>
    {#snippet description()}
        Select the sorting order
    {/snippet}
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
    {#snippet message()}
        The available sorting orders are Relevance, Newest, Active, and
        Score
    {/snippet}
</Select>
```

**Disabled:**

```svelte
<Select id="select-disabled" label="Disabled" disabled>
    <SelectItem value="relevance" text="Relevance" />
    <SelectItem value="newest" text="Newest" />
    <SelectItem value="active" text="Active" />
    <SelectItem value="score" text="Score" />
</Select>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | `id` attribute of the select element |
| `label` | `string` | The label associated with the select element |
| `selected` | `string \| number` | Specify the initial selected item value |
| `disabled` | `boolean` | Sets the disabled state |
| `hideLabel` | `boolean` | The visiblity of the label element |
| `name` | `string` | Name attribute of the select element |
| `size` | `Size` | The size of the select |
| `state` | `State` | The validation state of the select |
| `labelPlacement` | `LabelPlacement` | The placement of the label relative to the select |
| `children` | `Snippet` | Snippet to render options as SelectItem components |
| `description` | `Snippet` | Snippet to render a description between the label and the select (only when label is visible and placed on top) |
| `message` | `Snippet` | Snippet to render a message after the select element |

### Subcomponents

#### SelectItem

| Prop | Type | Description |
|------|------|-------------|
| `value` | `string \| number` | Specify the option value |
| `text` | `string` | Specify the option text |
| `disabled` | `boolean` | Set to `true` to disable the option |

### Story Variations (6)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--base)
- **Label placement**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--label-placement)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--sizes)
- **State**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--state)
- **With Description and Message**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--with-description-and-message)
- **Disabled**: [View](https://svelte.stackoverflow.design/?path=/story/components-select--disabled)

---

## Components/Skeleton

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-skeleton--docs](https://svelte.stackoverflow.design/?path=/docs/components-skeleton--docs)

### Usage Examples

**AI:**

```svelte
<Skeleton variant="ai" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | The accessible label for screen readers |
| `variant` | `Variant` | The variant of the skeleton |

### Story Variations (2)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-skeleton--base)
- **AI**: [View](https://svelte.stackoverflow.design/?path=/story/components-skeleton--ai)

---

## Components/Spinner

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-spinner--docs](https://svelte.stackoverflow.design/?path=/docs/components-spinner--docs)

### Usage Examples

**Label:**

```svelte
<Spinner label="Saving your changes…" />
```

**Class:**

```svelte
<Spinner class="fc-theme-primary-500" />
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `label` | `any` | The accessible label for screen readers |
| `size` | `Size` | The size of the spinner |
| `class` | `string` | Additional CSS classes added to the element |

### Story Variations (4)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-spinner--base)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-spinner--sizes)
- **Label**: [View](https://svelte.stackoverflow.design/?path=/story/components-spinner--label)
- **Class**: [View](https://svelte.stackoverflow.design/?path=/story/components-spinner--class)

---

## Components/Tag

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-tag--docs](https://svelte.stackoverflow.design/?path=/docs/components-tag--docs)

### Usage Examples

**Base:**

```svelte
<Tag children={"javascript" as unknown as Snippet} />
```

**Sponsor:**

```svelte
<Tag>
    microsoft
    {#snippet sponsor()}
        <Icon src={IconMicrosoft} native class="as-center w16" />
    {/snippet}
</Tag>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `size` | `Size` | The size of the tag |
| `variant` | `Variant` | The variants of the tag |
| `href` | `string` | Render the tag as a link with the given href |
| `dismissable` | `boolean` | Boolean describing if the tag is dismissable This only takes effect if the href prop is not set |
| `ignored` | `boolean` | Boolean describing if the tag is ignored |
| `watched` | `boolean` | Boolean describing if the tag is watched |
| `i18nDismissButtonText` | `string` | Localized translation for the dismiss button text |
| `class` | `string` | Additional CSS classes added to the element |
| `ondismiss` | `() => void` | Callback function to call when the tag is dismissed |
| `children` | `Snippet` | Snippet containing the tag name |
| `sponsor` | `Snippet` | Optional snippet for displaying a sponsor icon before the tag name |

### Story Variations (5)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--base)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--variants)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--sizes)
- **Sponsor**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--sponsor)
- **Additional styles**: [View](https://svelte.stackoverflow.design/?path=/story/components-tag--additional-styles)

---

## Components/TextInput

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-textinput--docs](https://svelte.stackoverflow.design/?path=/docs/components-textinput--docs)

### Usage Examples

**Base:**

```svelte
<TextInput id="base-example-input" label="Username" />
```

**Status:**

```svelte
<div class="d-flex fd-column">
        <TextInput
            id="optional-status-input"
            placeholder="Age"
            label="optional input"
            optional
        />
    <div class="d-flex fd-column">
        <TextInput
            id="required-status-input"
            placeholder="Full name"
            label="required input"
            required
        />
    </div>
</div>
```

**Disabled and readonly:**

```svelte
<p class="s-description mb24">
    `disabled` and `readonly` props add a custom style to the input. All
    other props are proxied to the underlying HTML input element.
</p>
<hr class="fc-black-050 mb24" />
    <div class="d-flex fd-column">
        <TextInput
            id="disabled-input"
            label="disabled input"
            placeholder="Disabled input"
            disabled
        />
    <div class="d-flex fd-column">
        <TextInput
            id="readonly-input"
            label="readonly input"
            placeholder="Readonly input"
            readonly
        />
    </div>
</div>
```

**Slots:**

```svelte
<div class="d-flex fd-column">
        <TextInput id="description-slot-input" label="Description slot">
            <span slot="description">
                This TextInput includes a description slot.
            </span>
        </TextInput>
    <div class="d-flex fd-column">
        <TextInput id="message-slot-input" label="Message slot">
            <span slot="message">
                This TextInput includes a message slot.
            </span>
        </TextInput>
    </div>
    <div class="d-flex fd-column">
        <TextInput id="fill-slot-input" label="Fill slot">
            <span slot="fill">https://</span>
        </TextInput>
    </div>
</div>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `id` | `string` | `id` attribute of the text input |
| `label` | `string` | The label associated with the input |
| `disabled` | `boolean` | Sets the disabled state of the input |
| `hideLabel` | `boolean` | The visiblity of the label element |
| `fillSide` | `FillSide` | Where to place the input fill element |
| `name` | `string \| undefined` | Name attribute of the input |
| `optional` | `boolean` | Shows optional label status |
| `placeholder` | `string` | Placeholder text for the input |
| `readonly` | `boolean` | Sets the readonly state of the input |
| `required` | `boolean` | Make the input required and show required label status |
| `size` | `Size` | The size of the text input |
| `state` | `State` | The size of the text input |
| `type` | `Type` | The type of the text input |
| `i18nOptionalText` | `string \| undefined` | Localized translation for the optional label status text |
| `i18nRequiredText` | `string \| undefined` | Localized translation for the required label status text |
| `class` | `string` | Additional CSS classes added to the underlying HTML input element |

### Story Variations (9)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--base)
- **Input fill**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--input-fill)
- **Label visibility**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--label-visibility)
- **Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--sizes)
- **States**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--states)
- **Status**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--status)
- **Types**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--types)
- **Disabled and readonly**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--disabled-and-readonly)
- **Slots**: [View](https://svelte.stackoverflow.design/?path=/story/components-textinput--slots)

---

## Components/Toast

To show and hide toasts you need to first ensure that a `Toaster` component is rendered in your page.
Ideally only one `Toaster` component is rendered per page.

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-toast--docs](https://svelte.stackoverflow.design/?path=/docs/components-toast--docs)

### API

#### showToast(message, options)

| Parameter | Type | Description |
|-----------|------|-------------|
| `message` | `string \| Snippet (required)` | Toast message as plain text or Svelte Snippet |
| `options` | `ToastOptions` | Configuration object (see ToastOptions below) |

#### ToastOptions

| Parameter | Type | Description |
|-----------|------|-------------|
| `variant` | `danger \\| warning \\| info \\| success` | Visual style of the toast |
| `important` | `boolean` | Emphasize the toast |
| `icon` | `string` | Icon source for example from the stacks-icons package |
| `iconTitle` | `string` | Accessible title for the icon |
| `transient` | `boolean` | Auto-dismiss the toast after `duration` (default: true) |
| `dismissible` | `boolean` | Render a close action to allow user dismissal (default: true) |
| `duration` | `number` | Auto-dismiss delay in ms (when `transient` is true) (default: 10000) |
| `onUserClose` | `() => void` | Fired when the user closes the toast |
| `onAutoClose` | `() => void` | Fired when the toast auto-closes |
| `onClose` | `() => void` | Fired on any close (user or auto) |
| `actions` | `Snippet` | Custom action buttons (e.g. `<NoticeAction>`) |

#### hideToast(toastId)

| Parameter | Type | Description |
|-----------|------|-------------|
| `toastId` | `string \| number (required)` | ID returned by `showToast` |

### Subcomponents

#### Toast

### Story Variations (9)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--base)
- **With HTML Message**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--with-html-message)
- **Variants**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--variants)
- **With Icon**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--with-icon)
- **Not dismissible**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--not-dismissible)
- **Persistency and Duration**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--persistency-and-duration)
- **With Actions**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--with-actions)
- **On Close Callbacks**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--on-close-callbacks)
- **Closed Externally**: [View](https://svelte.stackoverflow.design/?path=/story/components-toast--closed-externally)

---

## Components/UserCard

**View in Storybook:** [https://svelte.stackoverflow.design/?path=/docs/components-usercard--docs](https://svelte.stackoverflow.design/?path=/docs/components-usercard--docs)

### Usage Examples

**Deleted:**

```svelte
<UserCard {...baseArgs} deleted />
```

**Highlighted:**

```svelte
<UserCard {...baseArgs} highlighted />
```

**With Tags:**

```svelte
<UserCard {...baseArgs}>
    {#snippet tags()}
        <Tag href="#" size="xs">css</Tag>
        <Tag href="#" size="xs">reactjs</Tag>
        <Tag href="#" size="xs">javascript</Tag>
    {/snippet}
</UserCard>
```

**With Type:**

```svelte
<UserCard {...baseArgs}>
    {#snippet type()}
        <Icon src={IconStarVerifiedSm}></Icon> Recognized by Hum
    {/snippet}
</UserCard>
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `name` | `string` | Name of user to be displayed |
| `avatar` | `string` | Avatar image source of user |
| `deleted` | `boolean` | Apply styling indicating the user has been deleted |
| `highlighted` | `boolean` | Add a highlight to the user card |
| `href` | `string` | Link to be used for the username |
| `location` | `string` | Location of the user |
| `reputation` | `string \| number` | The reputation of the user |
| `role` | `string` | The user's role (such as job title) |
| `size` | `Size` | The size of the user card |
| `timestamp` | `string` | Timestamp displayed in the user card generally used to indicate when a comment was posted |
| `gold` | `Award` | Count of gold award badges to display |
| `silver` | `Award` | Count of silver award badges to display |
| `bronze` | `Award` | Count of bronze award badges to display |
| `admin` | `boolean` | Display a badge indicating the user is an admin |
| `moderator` | `boolean` | Display a badge indicating the user is a moderator |
| `staff` | `boolean` | Display a badge indicating the user is a staff member |
| `class` | `string` | Additional CSS classes added to the element |
| `tags` | `Snippet` | Optional snippet to showcase user’s most popular tags (e.g. `<Tag href="#" size="xs">css</Tag>`) |
| `type` | `Snippet` | Optional snippet to showcase user’s type or affiliate badge |

### Story Variations (8)

- **Base**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--base)
- **Badges**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--badges)
- **Deleted**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--deleted)
- **Highlighted**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--highlighted)
- **Role and location**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--role-and-location)
- **All Sizes**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--all-sizes)
- **With Tags**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--with-tags)
- **With Type**: [View](https://svelte.stackoverflow.design/?path=/story/components-usercard--with-type)

---

## Generation Info

- **Generated:** 2025-10-21T08:19:49.567Z
- **Components:** 19
- **Stories:** 114