@amedia/brick-mcp 0.0.1-LLM-DOCS → 0.0.1-NEW-PATH-1

package/README.md

@@ -2,11 +2,39 @@
 
 ## Overview
 
-The Brick MCP Server is a Model Context Protocol (MCP) server that provides AI assistants (like Claude Code) with direct access to the Brick design system. It enables accurate, context-aware assistance when developers implement Brick components by exposing component documentation, design tokens, and usage examples through standardized MCP tools.
+This is a Model Context Protocol (MCP) server for the Brick design system. It enables AI assistants (like Claude Code) to provide accurate, context-aware assistance when developers implement Brick components.
 
 ## Prerequisites
 
-Follow the Amedia CLI guide available [here](https://amedia.slite.com/app/docs/6GMS-ASZ1r2rWM)
+Before using the Brick MCP server, you need to set up Claude Code:
+
+> **Note**: This guide assumes that you have pulled the latest changes and installed all dependencies.
+
+### 1. Install Claude CLI
+
+```bash
+curl -fsSL https://claude.ai/install.sh | bash
+```
+
+### 2. Authenticate with Google Cloud
+
+You'll need to authenticate daily to access Amedia's coding agent project:
+
+```bash
+gcloud auth application-default login --project amedia-coding-agent
+```
+
+> **Note**: You will need to re-authenticate once per day.
+
+### 3. Install Claude Code VS Code Extension (Optional)
+
+If you prefer using Claude Code within VS Code:
+
+1. Open VS Code
+2. Go to the Extensions marketplace
+3. Search for "Claude Code"
+4. Install the extension (the one from Anthropic)
+5. Restart VS Code if necessary
 
 ## Usage
 
@@ -14,22 +42,28 @@ The Brick MCP server can be run in two modes:
 
 ### Stdio Mode (for Claude Code)
 
-The recommended way to use the MCP server with Claude Code is via npx:
+To add the Brick MCP server to Claude Code using stdio transport:
 
 ```bash
-# Add to Claude Code
-claude mcp add --transport stdio Brick -- npx -y @amedia/brick-mcp@latest
+claude mcp add --transport stdio Brick -- node /absolute/path/to/brick/packages/brick-mcp/src/index.ts
 ```
 
-### HTTP Mode (for local development)
+Replace `/absolute/path/to/brick/` with the actual path to your Brick repository.
+
+### HTTP Mode (for remote access)
 
 To run the MCP server as an HTTP service:
 
 ```bash
-# Fetch data folder
-npm run build
 # Development with watch mode
 npm run dev:http
+
+# Production
+npm run build
+npm run start:http
+
+# Custom port and host
+PORT=3001 HOST=localhost npm run start:http
 ```
 
 The HTTP server exposes:
@@ -38,12 +72,6 @@ The HTTP server exposes:
 - `http://localhost:3000/sse` - SSE endpoint for MCP protocol communication
 - `http://localhost:3000/message` - Message endpoint for client-to-server communication
 
-To add to Claude run
-
-```bash
-claude mcp add Brick-http --transport sse --scope user -- http://0.0.0.0:3000/sse
-```
-
 #### Environment Variables
 
 - `PORT` - Server port (default: 3000)
@@ -51,11 +79,12 @@ claude mcp add Brick-http --transport sse --scope user -- http://0.0.0.0:3000/ss
 
 ### What the MCP Server Provides
 
-Once configured, you can ask Claude about Brick components, design tokens, and implementation patterns. The MCP server provides three main tools:
+Once configured, you can ask Claude about Brick components, design tokens, and implementation patterns. The MCP server provides:
 
-1. **`list-components`**: Discover all available Brick components with filtering by name, category, or tags
-2. **`get-component-docs`**: Retrieve detailed documentation including MDX content, llm.txt summaries, examples, and Storybook links
-3. **`get-design-tokens`**: Access design tokens filtered by category (colors, spacing, typography, shadows, borders) or theme, with available themes list and comprehensive documentation about the token system
+- **Component Discovery**: List and search available Brick components
+- **Documentation**: Get detailed component props, events, and usage examples
+- **Design Tokens**: Access color, spacing, typography, and other design tokens
+- **Best Practices**: Component implementation guidelines and patterns
 
 ## Goals
 
@@ -65,19 +94,34 @@ Once configured, you can ask Claude about Brick components, design tokens, and i
 4. **Best Practices**: Include usage examples and patterns from Storybook
 5. **Developer Experience**: Reduce friction when implementing Brick components through AI-assisted development
 
+## What is MCP?
+
+The Model Context Protocol (MCP) is a standardized way to expose resources, tools, and data to AI models. It enables AI assistants to:
+
+- **Access structured data** through Resources
+- **Take actions** through Tools
+- **Provide context-aware assistance** with domain-specific knowledge
+
+MCP servers can be written in TypeScript using the `@modelcontextprotocol/sdk` package.
+
 ## MCP Tools (Actions)
 
-The MCP server exposes three tools that AI assistants can call to fetch information about the Brick design system. All data is pre-generated during the build process and bundled as JSON files, making the server fast and suitable for use as a standalone npm package.
+Tools are functions that AI assistants can call to actively query and interact with the Brick design system. When you ask Claude about Brick components, it uses these tools behind the scenes to fetch accurate, up-to-date information directly from the codebase.
+
+These tools make Claude context-aware about the specific Brick setup, ensuring accurate implementation guidance tailored to the components and design tokens available in the project.
 
-### 1. `list-components`
+<details>
+<summary>
+  <strong>1. <code>list-components</code></strong>
+</summary>
 
-List all available Brick components with optional filtering.
+**Purpose**: List all available Brick components with metadata
 
-**Input**:
+**Input Schema**:
 
 ```typescript
 {
-  filter?: string;  // Filter by name, category, or tag
+  filter?: string;  // Optional: filter by category or tag
 }
 ```
 
@@ -89,22 +133,23 @@ List all available Brick components with optional filtering.
     name: string; // e.g., "brick-button"
     version: string; // e.g., "9.0.0"
     selector: string; // e.g., "brick-button-v9"
-    description?: string;
-    category?: string; // Auto-categorized: Forms, Navigation, Layout, Feedback, Display, Utilities
-    tags?: string[]; // Auto-generated tags
+    description: string; // Brief description
+    category?: string; // e.g., "Forms", "Navigation"
+    tags?: string[]; // e.g., ["interactive", "form"]
   }>;
 }
 ```
 
-**Example**: `{ "filter": "button" }` returns all button-related components.
+**Use Case**: "What components are available in Brick?"
 
----
+</details>
 
-### 2. `get-component-docs`
+<details>
+<summary><strong>2. <code>get-component-docs</code></strong></summary>
 
-Retrieve detailed documentation for one or more components.
+**Purpose**: Retrieve detailed documentation for specific component(s)
 
-**Input**:
+**Input Schema**:
 
 ```typescript
 {
@@ -120,34 +165,74 @@ Retrieve detailed documentation for one or more components.
     name: string;
     version: string;
     selector: string;
-    description?: string; // From llm.txt or MDX content
+    description: string;
+
+    // Props/Attributes
+    props: Array<{
+      name: string;
+      type: string;
+      required: boolean;
+      default?: any;
+      description: string;
+    }>;
+
+    // Events
+    events: Array<{
+      name: string;
+      type: string;
+      description: string;
+    }>;
+
+    // Methods
+    methods?: Array<{
+      name: string;
+      signature: string;
+      description: string;
+    }>;
+
+    // Usage Examples
     examples: {
-      webComponent?: string; // Extracted from MDX or auto-generated
-      storybook?: string; // Link to Chromatic Storybook
+      webComponent: string; // HTML usage
+      template: string; // Template function usage
+      storybook?: string; // Link to Storybook
+    };
+
+    // Accessibility
+    accessibility: {
+      wcagLevel: string; // e.g., "AA"
+      ariaRoles?: string[];
+      keyboardNav?: string;
+      notes?: string;
     };
-    cdnPath?: string; // Eik CDN URL for the component
+
+    // Styling
+    cssCustomProperties?: Array<{
+      name: string;
+      description: string;
+      default?: string;
+    }>;
+
+    // Related
+    relatedComponents?: string[];
   }>;
 }
 ```
 
-**Data Sources**:
+**Use Case**: "How do I use brick-button? What props does it accept?"
 
-- `llm.txt`: AI-friendly component summaries (if available)
-- `.mdx` files: Full documentation from Storybook
-- `package.json`: Version and description
+</details>
 
----
-
-### 3. `get-design-tokens`
+<details>
+<summary><strong>3. <code>get-design-tokens</code></strong></summary>
 
-Access design tokens from brick-tokens with filtering options.
+**Purpose**: Access design tokens from brick-tokens
 
-**Input**:
+**Input Schema**:
 
 ```typescript
 {
   category?: 'colors' | 'spacing' | 'typography' | 'shadows' | 'borders';
-  theme?: string;  // e.g., "bergen", "alfa", "bt"
+  theme?: 'base' | 'light' | 'dark';
 }
 ```
 
@@ -156,93 +241,151 @@ Access design tokens from brick-tokens with filtering options.
 ```typescript
 {
   tokens: Array<{
-    name: string;        // e.g., "color-primary"
-    value: string;       // e.g., "#0066CC"
-    type: string;        // Token type from Design Tokens spec
-    description?: string;
-    category?: string;
+    name: string; // e.g., "color-primary"
+    value: string; // e.g., "#0066CC"
+    cssVar: string; // e.g., "--brick-color-primary"
+    category: string;
     theme?: string;
   }>;
-  themes: string[];      // Available theme names (e.g., ["alfa", "bergen", "bt"])
-  documentation: {
-    anOverview?: string;  // Overview of the design token system
-    formats?: string;     // Information about token formats
-    naming?: string;      // Token naming conventions
-    themes?: string;      // Theme documentation
-    usage?: string;       // Usage guidelines
-  };
 }
 ```
 
-**Data Sources**:
+**Use Case**: "What color tokens are available in Brick?"
 
-- Pre-built tokens from `brick-tokens/publications/publication/*.json`
-- Documentation from `tokens-documentation.json`
+</details>
 
----
+<details>
+<summary><strong>4. <code>search-components</code></strong></summary>
 
-## Usage Example
+**Purpose**: Search components by keyword or functionality
 
-Once configured, Claude Code can use the MCP tools to answer questions about Brick:
+**Input Schema**:
 
+```typescript
+{
+  query: string; // e.g., "button", "form input", "navigation"
+}
 ```
-User: "I need to add a button to my app using Brick"
 
-Claude: [Calls list-components with filter: "button"]
-        [Calls get-component-docs with components: ["brick-button"]]
+**Output**:
 
-        "I can help you add a Brick button. Here's the brick-button-v9 component:
+```typescript
+{
+  results: Array<{
+    name: string;
+    selector: string;
+    description: string;
+    relevanceScore: number; // 0-1
+    matchedOn: string[]; // e.g., ["name", "description", "tags"]
+  }>;
+}
+```
 
-        <brick-button-v9>Click me</brick-button-v9>
+**Use Case**: "Find components related to forms"
 
-        You can load it from the Eik CDN:
-        https://assets.acdn.no/pkg/@amedia/brick-button/9.0.0/brick-button.js
+</details>
 
-        For detailed examples and variants, check the Storybook documentation:
-        https://master--60060c41f82e040021133482.chromatic.com/?path=/docs/bricks-brick-button
+<details>
+<summary><strong>5. <code>get-usage-examples</code> (Optional for v1)</strong></summary>
 
-        Would you like me to implement this in your file?"
+**Purpose**: Get real-world code examples from Storybook stories
+
+**Input Schema**:
+
+```typescript
+{
+  component: string;     // e.g., "brick-button"
+  scenario?: string;     // e.g., "primary", "disabled", "loading"
+}
 ```
 
----
+**Output**:
+
+```typescript
+{
+  examples: Array<{
+    title: string;
+    description: string;
+    code: string;
+    storyUrl?: string;
+  }>;
+}
+```
 
-### Adding New Tools
+**Use Case**: "Show me examples of brick-button in different states"
 
-To add a new MCP tool:
+</details>
 
-1. Create a new file in `src/tools/yourTool.ts`
-2. Implement the tool function with input/output types using Zod
-3. Register the tool in `src/server.ts` using `server.registerTool()`
-4. Update this README with tool documentation
+---
 
-### Publishing
+## Usage Example
 
-The package is configured to publish to npm:
+You can interact with the Brick MCP server in Claude Code:
 
-```bash
-# From the Brick root
-# 1. Make your changes and create a changeset
-npx changeset
-# 2. Create a PR - merging will trigger a "Version Packages" PR
-# 3. Merge the "Version Packages" PR to publish to npm
 ```
+User: "I need to add a button to my app using Brick"
 
-For snapshot releases (testing pre-release versions):
+Claude: [Uses list-components tool to find button components]
+        [Uses get-component-docs to get brick-button documentation]
 
-1. Create a changeset and then run the [snapshot GitHub action](https://github.com/amedia/brick/actions/workflows/snapshotRelease.yml) for your branch and this package.
+        "I can help you add a Brick button. Here's how to use brick-button-v9:
 
-After publishing, the package can be used via:
+        Web Component usage:
+        <brick-button-v9 variant="primary" size="medium">
+          Click me
+        </brick-button-v9>
+
+        The component accepts these props:
+        - variant: 'primary' | 'secondary' | 'tertiary'
+        - size: 'small' | 'medium' | 'large'
+        - disabled: boolean
+
+        Would you like me to implement this in your file?"
+```
+
+### Alternative: npm Package Configuration (Future)
+
+Once published to npm as `@amedia/brick-mcp`, you could also configure it via:
 
 ```bash
-npx @amedia/brick-mcp           # Run the latest version
-npm install @amedia/brick-mcp   # Install in your project
+claude mcp add --transport stdio Brick -- npx @amedia/brick-mcp
 ```
 
 ---
 
+## Benefits
+
+1. **Faster Development**: Developers get instant, accurate component documentation
+2. **Fewer Errors**: AI knows exact props, types, and patterns
+3. **Consistency**: AI suggests best practices from Storybook
+4. **Discoverability**: Easy to find the right component for the job
+5. **Always Up-to-date**: Extracts docs from source, no manual maintenance
+
+---
+
+## Next Steps
+
+1. **Decision**: Where to create the package (monorepo vs standalone)?
+2. **Approval**: Review and approve this approach
+3. **Implementation**: Start with Phase 1 (Foundation)
+4. **Iteration**: Build incrementally and test with real usage
+5. **Documentation**: Create user guide for consuming the MCP server
+
+---
+
+## Open Questions
+
+1. Should the MCP server be in the monorepo or a separate repository?
+2. Should we include component screenshots/visual examples?
+3. Do we want to support multiple Brick versions simultaneously?
+4. Should we cache the extracted documentation or build it on-demand?
+5. Do we need authentication for the MCP server (if deployed as HTTP)?
+6. Should we integrate with Storybook's static JSON export?
+
+---
+
 ## References
 
-- [MCP TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk)
-- [MCP Specification](https://spec.modelcontextprotocol.io/)
-- [Brick Design System](https://www.brick.api.no)
-- [Chromatic Storybook](https://master--60060c41f82e040021133482.chromatic.com/)
+- MCP TypeScript SDK: <https://github.com/modelcontextprotocol/typescript-sdk>
+- MCP Example Servers: <https://github.com/modelcontextprotocol/servers>
+- Brick Designsystem: `www.brick.api.no`

package/dist/data/components/brick-actions.json

@@ -0,0 +1,6 @@
+{
+  "name": "brick-actions",
+  "version": "0.1.5",
+  "selector": "brick-actions-v0",
+  "description": "Brick github actions"
+}

package/dist/data/components/brick-alt-teaser.json

@@ -0,0 +1,10 @@
+{
+  "name": "brick-alt-teaser",
+  "version": "8.0.64",
+  "selector": "brick-alt-teaser-v8",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';\n\nimport * as BrickAltTeaserStories from './brick-alt-teaser.stories';\n\n<Meta of={BrickAltTeaserStories} />\n\n# brick-alt-teaser\n\nbrick-alt-teaser is built, maintained and used by the alt team.\nYou probably shouldn't use it without checking in with them first.\n\nFeel free to check out the teaser variants in this section for inspo.\n\n## Properties\n\nbrick-alt-teaser has the following properties:\n\n<Controls />\n\n<Canvas of={BrickAltTeaserStories.Story} />\n"
+}

package/dist/data/components/brick-avatar.json

@@ -0,0 +1,11 @@
+{
+  "name": "brick-avatar",
+  "version": "0.2.35",
+  "selector": "brick-avatar-v0",
+  "description": "brick-avatar component",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-avatar.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-avatar\n\n## Purpose\n\nThis component can be used as a visual element representing a person, object or entity, either as an image thumbnail, icon or with initials as text.\n\nThe `brick-avatar` exists in a default and circle variant. The default variant uses the theme avatar value for radii.\n\n<Canvas of={BrickStories.Avatar} />\n<Canvas of={BrickStories.Shield} />\n\nIt supports a custom CSS property to set the background image of the avatar.\n\n<Canvas of={BrickStories.AvatarImageCssProperty} />\n\n### Resources\n\nhttps://open-ui.org/components/avatar.research/\n\n## Accessibility\n\nAvatars with an image should always include alternativ text of the image if it conveys information relevant for the reader. This is done using the `dataAlttext` property, and its value will be inserted into the alt attribute of the image.\n\nIf the image is purely for decoration, then the `dataAlttext` property should not be used and the image will automatically get an empty alt-attribute: alt=\"\".\nThis tells screen readers to ignore the image.\n\nThe same property, `dataAlttext`, can be used when the avatar contains letters in abbreviated form, such as \"KN\" (Kari Nordmann) or \"BSK\" (Bærum Sportsklubb).\nIn this case the `dataAlttext` property will be used to create a visually hidden element with the value inserted. This element will be exposed to screen readers, but not sighted users.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-avatar'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-avatar/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickAvatar, } from '@amedia/brick-avatar/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderAvatar({\n      dataLetters: 'A',\n      dataAlttext: 'Initials for Amedia',\n      dataSize: 'small'\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-avatar javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-avatar';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\n\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-avatar-v0 data-alttext=\"Initialer for Amedia\" data-letters=\"A\"></brick-avatar-v0>`}\n/>\n\nExample: Using javascript\n\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-avatar-v0');\n  el.dataset.alttext = 'Initials for Amedia';\n  el.dataset.init = 'A';\n  `}\n/>\n\n## Attributes for brick-avatar\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-avatar is styled using CSS properties that must exist on the page.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing variants before resorting to custom properties.\n\nMake sure you scope the overrides.\n\n<div className=\"note\">\n  <span>Note</span>\n  It is your responsibilty to validate that your overrides adhere to the **WCAG\n  2.1 AA** guidelines.\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-avatar-svg</code>\n      </td>\n      <td>\n        You can set the background svg of the avatar using this property.\n        Example:\n        \"--b-avatar-svg:url(`https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg`)\"\n      </td>\n      <td>\n        <code>None</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-color-bg</code>\n      </td>\n      <td>\n        Controls the background color of the avatar with initials, using [color\n        tokens](?path=/story/brick-tokens-tokens--colors-base)\n      </td>\n      <td>\n        <code>var(--brick-colors-baseNeutral00)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-color-fg</code>\n      </td>\n      <td>\n        Controls the text color of the avatar with initials, using [color\n        tokens](?path=/story/brick-tokens-tokens--colors-base)\n      </td>\n      <td>\n        <code>var(--brick-colors-baseFg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-size</code>\n      </td>\n      <td>\n        Using the `data-size` attribute is recommended. Controls the size of the\n        avatar, using [sizing tokens](?path=/story/brick-tokens-tokens--sizes).\n      </td>\n      <td>\n        <code>var(--brick-sizes-avatarM)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-padding</code>\n      </td>\n      <td>\n        Controls the padding inside the avatar, using [sizing\n        tokens](?path=/story/brick-tokens-tokens--sizes).\n      </td>\n      <td>\n        <code>0</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-color-shape</code>\n      </td>\n      <td>Used when data-letters-shape=\"shield\" to set background color</td>\n      <td>\n        <code>transparent</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-color-border</code>\n      </td>\n      <td>\n        Controls the color of the border using\n        <a href=\"/?path=/story/brick-tokens-tokens--colors-base\">\n          color tokens\n        </a>\n      </td>\n      <td>\n        <code>var(--brick-colors-baseNeutral00)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-avatar-borderWidth</code>\n      </td>\n      <td>Controls the width of the border</td>\n      <td>\n        <code>var(--brick-borderWidths-baseS)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Canvas of={BrickStories.CssOverrides} />\n\n<Markdown>{ReadMe}</Markdown>\n"
+}

package/dist/data/components/brick-button.json

@@ -0,0 +1,12 @@
+{
+  "name": "brick-button",
+  "version": "9.3.0",
+  "selector": "brick-button-v9",
+  "category": "Forms",
+  "tags": [
+    "forms",
+    "interactive"
+  ],
+  "llm": "# Brick Button\n\n> A customizable button web component built with the Brick Design System\n\n## Overview\n\n`@amedia/brick-button` is a web component (custom element) that provides a flexible button implementation with support for multiple visual styles, icons, accessibility features, and integration with internal routers.\n\n## Key Features\n\n- **Multiple Variants**: Primary, secondary, and outlined button styles\n- **Icon Support**: Optional icons with configurable placement (top, right, left)\n- **Size Options**: Small and medium sizes\n- **Accessibility**: Full ARIA attribute support\n- **Router Integration**: Special `data-as` attribute for SPA router compatibility\n- **Analytics Ready**: Built-in ADP (analytics) click tracking attributes\n- **Flexible Rendering**: Works as button, anchor link, or non-interactive element\n\n## Installation\n\n```bash\nnpm install @amedia/brick-button\n```\n\n## Basic Usage\n\n```html\n<brick-button-v9\n  data-label=\"Click me\"\n  data-version=\"primary\">\n</brick-button-v9>\n```\n\n## Props/Attributes\n\nAll props are passed as data attributes:\n\n### Core Props\n\n- `data-label` (string): Button text content\n- `data-version` ('primary' | 'secondary' | 'outlined'): Visual style variant\n- `data-size` ('small' | 'medium'): Button size\n- `data-disabled` (string): Disables the button when present\n\n### Link Props\n\n- `data-linkto` (string): If provided, renders as `<a>` tag with this href\n- `data-target` (string): Link target attribute (e.g., \"_blank\")\n\n### Icon Props\n\n- `data-icon-id` (string): Icon identifier from brick-icon library\n- `data-iconplacement` ('top' | 'right' | 'left'): Icon position relative to label\n- `data-icontext` (string): Alternative text for the icon\n\n### Router Integration\n\n- `data-as` ('span' | 'div'): Renders as non-interactive element for use inside router link components\n\n### Analytics Props\n\n- `data-adplabel` (string): Sets `data-adp-clicklabel` for analytics tracking\n- `data-adpvalue` (string): Sets `data-adp-clickvalue` for analytics tracking\n\n### Accessibility Props\n\n- `data-aria-label` (string): ARIA label\n- `data-aria-labelledby` (string): ARIA labelledby\n- `data-aria-describedby` (string): ARIA describedby\n- `data-aria-controls` (string): ARIA controls\n- `data-aria-expanded` (string): ARIA expanded state\n- `data-aria-pressed` (string): ARIA pressed state\n\n## Usage Examples\n\n### Primary Button\n\n```html\n<brick-button-v9\n  data-label=\"Submit\"\n  data-version=\"primary\">\n</brick-button-v9>\n```\n\n### Button with Icon\n\n```html\n<brick-button-v9\n  data-label=\"Download\"\n  data-version=\"outlined\"\n  data-icon-id=\"download\"\n  data-iconplacement=\"left\">\n</brick-button-v9>\n```\n\n### Link Button\n\n```html\n<brick-button-v9\n  data-label=\"Go to page\"\n  data-linkto=\"/my-page\"\n  data-version=\"secondary\">\n</brick-button-v9>\n```\n\n### With SPA Router (Svelte example)\n\n```html\n<script>\n  import { Link } from \"svelte-routing\"\n</script>\n\n<Link to='/offers'>\n  <brick-button-v9\n    data-label=\"See other subscriptions\"\n    data-as=\"span\"\n    data-version=\"outlined\">\n  </brick-button-v9>\n</Link>\n```\n\n### Programmatic Usage\n\n```javascript\nimport { BrickButton } from '@amedia/brick-button';\n\nconst button = new BrickButton({\n  dataLabel: 'Click me',\n  dataVersion: 'primary',\n  dataSize: 'medium'\n});\n\n// Add click handler\nbutton.onClick = (event) => {\n  console.log('Button clicked!', event);\n};\n\ndocument.body.appendChild(button);\n```\n\n## Technical Details\n\n### Custom Element\n\n- **Tag Name**: `brick-button-v9`\n- **Selector**: `brick-button`\n- **Base Class**: `BrickElement` (from `@amedia/brick-template`)\n\n### Rendering Behavior\n\nThe component renders different HTML based on configuration:\n\n1. **Button Element** (default): `<button>` when no `data-linkto` or `data-as`\n2. **Anchor Element**: `<a>` when `data-linkto` is provided\n3. **Non-interactive Element**: `<span>` or `<div>` when `data-as` is set\n\n### Dynamic Updates\n\nThe component supports dynamic attribute updates through `attributeChangedCallback`:\n- Label changes update the text content\n- Icon changes update the icon element\n- Link changes update the href\n- ARIA attributes propagate to the inner element\n\n### Template Export\n\nFor server-side rendering:\n\n```javascript\nimport { renderBrickButton } from '@amedia/brick-button/template';\n\nconst html = renderBrickButton({\n  dataLabel: 'Server rendered',\n  dataVersion: 'primary',\n});\n```\n\n## Dependencies\n\n- `@amedia/brick-tokens`: Design tokens for styling\n- `@amedia/brick-icon`: Icon component integration\n- `@amedia/brick-template`: Base web component framework\n\n## File Structure\n\n```\npackages/brick-button/\n├── src/\n│   ├── brick-button.ts       # Main component class\n│   ├── template.ts            # Template rendering logic\n│   ├── template.types.ts      # TypeScript interfaces\n│   ├── types.ts               # Type exports\n│   ├── utils.ts               # Utility functions\n│   └── __tests__/             # Test files\n├── stories/                   # Storybook documentation\n├── template/                  # Template export\n├── dist/                      # Built files\n├── README.md                  # Developer documentation\n└── package.json\n```\n\n## Key Methods\n\n### Public Methods\n\n- `focus(options?: FocusOptions)`: Programmatically focus the button\n\n### Properties\n\n- `button_data`: Getter/setter for all button data attributes\n- `onClick`: Getter/setter for click event handler\n- `HTML`: Returns the rendered HTML template\n\n### Static Properties\n\n- `mirroredProps`: List of attributes that sync between dataset and properties\n- `observedAttributes`: Attributes that trigger `attributeChangedCallback`\n\n## Browser Compatibility\n\nThis is a web component using Custom Elements V1 API. Requires browser support for:\n- Custom Elements\n- Shadow DOM (if used by base template)\n- ES modules\n\n## Router Integration Details\n\nThe `data-as` attribute solves the problem of nesting interactive elements. When using with SPA routers that generate `<a>` tags, you can render the button as a `<span>` or `<div>` to avoid nested anchor/button elements, which violates HTML specifications.\n\n## Analytics Integration\n\nThe component includes built-in support for ADP (Amedia Data Platform) analytics:\n- Use `data-adplabel` to track what was clicked\n- Use `data-adpvalue` to track additional context\n- These automatically transform to `data-adp-clicklabel` and `data-adp-clickvalue` attributes\n\n## Development\n\n```bash\nnpm install\nnpm run storybook\n```\n\n## Build\n\n```bash\nnpm run build        # Production build\nnpm run build:dev    # Development build\nnpm run build:types  # TypeScript declarations only\n```\n\n## Version\n\nCurrent version: 9.3.0\n\n## License\n\nMIT\n",
+  "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Subtitle,\n  Controls,\n  Source,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-button.stories';\n\n<Meta of={BrickStories} />\n\n# brick-button\n\nA a clickable element which communicates that users can trigger an action.\n\n## Purpose\n\nButton vs. Anchor (Link)\n\nIf pressing the trigger should return in a URL change, a \"data-linkto\" attribute or \"dataLinkto\" property must be set, with the url should be passed, and\nbrick-button will render an `<a>` tag. Everything else is rendering a `<button>` html tag.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\n\n<Canvas of={BrickStories.BrickButton} />\n\n## Accessibility\n\nThe component will adhere to the **WCAG 2.1 AA** guidelines.\n\n## Usage\n\nFirst you need to install this in your project\n\n### npm\n\n<Source\n  language=\"node\"\n  code={`\n    npm install @amedia/brick-button\n  `}\n/>\n\n### Server side rendering\n\nWhen rendering the markup serverside\n\n#### Import and render markup\n\n<Source\n  language=\"javascript\"\n  code={`\n    import { renderBrickButton } from '@amedia/brick-button/template';\n`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`\n    \n    const myButton = renderBrickButton({\n      dataVersion: 'primary'\n    })\n`}\n/>\n\n#### Include css file\n\n```html\n<link\n  rel=\"stylesheet\"\n  href=\"https://assets.acdn.no/pkg/@amedia/brick-button/[version]/css/styles.css\"\n/>\n```\n\n### Codesandbox for SSR\n\n<iframe src=\"https://codesandbox.io/p/devbox/brick-node-6n567y?file=%2Fsrc%2Fviews%2Fbrick-button.js\"\nheight=\"200\"\nstyle={{\n    width: '100%',\n    height: '350px',\n    border: '0',\n    borderRadius: '4px',\n    overflow: 'hidden',\n  }}\ntitle=\"brick-node\"\nallow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\nsandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n\n> </iframe>\n\n### Client side\n\nIf you have rendered the markup serverside, the button will not be recreated, but it will still have client side interactions like eventlisteners and animations.\n\nThere are two ways to include the client side class:\n\n#### Using a script tag\n\nInclude the component from the asset server with a script tag in your html.\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-button/[version]/brick-button.js\"\n></script>`}\n/>\n\n#### Importing in your javascript file\n\nImport the component from the asset server in your javascript file.\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-button';\n  `}\n/>\n\n#### Create the DOM element\n\nExample: Using template literals\n\n<Source\n  language=\"html\"\n  code={`\n<brick-button-v9\n      data-version=\"primary\"\n      data-label=\"My awesome button\">\n</brick-button-v9>\n  `}\n/>\n\nExample: Using javascript\n\n<Source\n  language=\"javascript\"\n  code={`\n    const el = document.createElement('brick-button-v9');\n    el.dataset.version = 'primary';\n    el.dataset.label = 'My awesome button';\n    el.dataset.linkTo = \"#\"\n  `}\n/>\n\n### Svelte\n\n[REPL with example](https://svelte.dev/playground/bc16883a2eb14009a24afc07f01e6c37?version=5.28.2)\n\nNotice the two ignore rules to make the Svelte compiler allow `onClick` on custom elements.\n\n```js\n<!-- svelte-ignore a11y_click_events_have_key_events -->\n<!-- svelte-ignore a11y_no_static_element_interactions -->\n```\n\n<iframe\n  style={{\n    width: '100%',\n    height: '800px',\n    border: '0',\n    borderRadius: '4px',\n    overflow: 'hidden',\n  }}\n  src=\"https://svelte.dev/playground/bc16883a2eb14009a24afc07f01e6c37?version=5.28.2\"\n></iframe>\n\n### Codepen\n\n<codepen-link\nhtml=\"<div class='themeAlfa'><brick-button-v7 data-label='My awesome button' data-version='primary' data-link-to='#'></brick-button-v7><brick-button-v7 data-label='My awesome button' data-version='secondary' data-link-to='#'></brick-button-v7> <brick-button-v7 data-label='My awesome button' data-version='outlined' data-size='small' data-link-to='#'></brick-button-v7></div>\"\njs=\"import 'https://assets.acdn.no/pkg/@amedia/brick-button/v7/brick-button.js';\"\ntitle=\"Open in CodePen\"\npen-title=\"brick-button\"\neditors=\"111\"\ncss=\"body{ font-family: 'Open Sans', sans-serif; }\"\ncss-external=\"//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700;https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.4/css/theme-alfa.css\"\njs-external=\"https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js;https://assets.acdn.no/pkg/@amedia/brick-button/v6/brick-button.js\"\n\n>\n\n<brick-button-v7 class=\"themeAlfa\" data-version=\"primary\" data-label=\"Example in Codepen\"></brick-button-v7>\n</codepen-link>\n\n## Events\n\nTo handle click events on the `brick-button` web component, you can add event listeners directly to the component itself.\n\n## Attributes for brick-button\n\nThese are the dataset attributes available. They have corresponding properties camelCased. E.g. `data-label` has a corresponding property `dataLabel`.\n\n<Controls />\n\n## Dependencies\n\nAs part of the Brick design system, the brick-button is dependent on two packages.\n\n- @stitches/core - [Stitches](https://stitches.dev/), a CSS-in-JS tool enabling theming and variants support\n- Brick tokens [@amedia/brick-tokens](https://www.npmjs.com/package/@amedia/brick-tokens) for styling related to the [Brick designsystem](http://brick.api.no)\n\n## Styling and CSS Properties\n\n🤝 brick-button is styled using CSS properties that must exist on the page.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing properties before resorting to custom properties.\n\nMake sure you scope the overrides to the button tag.\n\n<div class=\"note\">\n  <span>Note</span>\n  <p>\n    It is your responsibilty to validate that your overrides adhere to the\n    **WCAG 2.1 AA** guidelines.\n  </p>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-button-width</code>\n      </td>\n      <td>This variable controls the width of the button, i.e '100%'</td>\n      <td>\n        <code>fit-content</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-button-height</code>\n      </td>\n      <td>This variable controls the height of the button, i.e '100%'</td>\n      <td>\n        <code>2.75rem</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-button-border</code>\n      </td>\n      <td>Sets border width</td>\n      <td>\n        <code>2px</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>---b-button-radii</code>\n      </td>\n      <td>Sets border radius</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-button-justify</code>\n      </td>\n      <td>Controls button text and icon alignment in the button</td>\n      <td>\n        <code>center</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Canvas of={BrickStories.ColorsOverride} />\n\n## README\n\n<Markdown>{ReadMe}</Markdown>\n\n### CHANGELOG\n\n[Changelog](https://github.com/amedia/brick/blob/master/packages/brick-button/CHANGELOG.md)\n"
+}

package/dist/data/components/brick-card.json

@@ -0,0 +1,10 @@
+{
+  "name": "brick-card",
+  "version": "7.3.7",
+  "selector": "brick-card-v7",
+  "category": "Layout",
+  "tags": [
+    "layout"
+  ],
+  "mdx": "import {\n  Meta,\n  Markdown,\n  Controls,\n  Canvas,\n  Source,\n} from '@storybook/addon-docs/blocks';\nimport ReadMe from '../README.md?raw';\nimport ChangeLog from '../CHANGELOG.md?raw';\n\nimport * as BrickStories from './brick-card-skins.stories';\n\n<Meta title=\"Bricksets/brick-card/Documentation\" />\n\n# brick-card\n\nBrick-card is basically a styled container. Brick-card is an extremely flexible container and it does not require any specific components inside it. As a default, brick-card uses brick-image and brick-button, but you do not have to use these, if you do not need them.\n\n<br />\n\n## Purpose\n\n- To group together relatable content.\n\nBrick-card takes a number of parameters. As mentioned, it also uses `brick-image` and `brick-button`, which themselves take on parameters used on brick-card. Se below.\n\n<br />\n\n## Properties/attributes overview for brick-card\n\nThese are the properties and attributes available on brick-card\n\n<Controls of={BrickStories.Dark} />\n\n<Canvas of={BrickStories.Dark} />\n\n## Usage guide\n\nBrick-card is an isomorphic custom element. This means that it can be used with both server side rendering and client side rendering. The way to do this is by:\n\n1. Creating your own custom component using brick-card. (client side) <br/>\n   _or_\n2. Using the `renderBrickCard` function to render out a card. (server side)\n\n---\n\n<br />\n\n### How to create your own card component - Client Side Rendering\n\nThis is what the final code for a custom brick-card component looks like:\n\n```js\nimport '@amedia/brick-card';\n\nconst myCard = `<brick-card-v7\ndata-image-src=\"https://assets.acdn.no/local/v3/publications/www.ao.no/gfx/small.svg\"\ndata-title-text=\"This is my title\"\ndata-text=\"This is my bodytext\"></brick-card-v7>`;\n\nconst myMarkup = `<h1>This is a page with a card</h1>${myCard}`;\n```\n\n#### ☝️ Now let's break it down.\n\n<br />\n\n#### 1. Install brick-card in your project:\n\n```\nnpm install --save @amedia/brick-card\n```\n\nand import it.\n\n```js\nimport from '@amedia/brick-card';\n```\n\n#### 2. Use the `<brick-card-v7>` custom element and the attributes you want to use.\n\nIn this example, we want an image, a headline and some text on the card. So we pass `data-image-src`, `data-title-text` and `data-text` like so:\n\n```js\nconst myCard = `<brick-card-v7 data-image-src=\"https://assets.acdn.no/local/v3/publications/www.ao.no/gfx/small.svg\" data-title-text=\"This is my title\" data-text=\"This is my bodytext\"></brick-card-v7>`;\n```\n\nSince the `data-image-src` we passed is a logo, we might want it to be smaller than usual. We can then add `data-image-size=\"small\"`\n\n> You can try to add `data-image-size=\"large\"` to see the difference.\n\n```js\nconst myCard = `<brick-card-v7 data-image-src=\"https://assets.acdn.no/local/v3/publications/www.ao.no/gfx/small.svg\" data-image-size=\"small\" data-title-text=\"This is my title\" data-text=\"This is my bodytext\"></brick-card-v7>`;\n```\n\n#### This renders a card like so:\n\nNote: Did you miss available properties? Scroll up ☝️\n\n#### 4. Add your new card to your markup.\n\n```js\nconst myMarkup = () => {\n  return `\n  <h1>This is a page with a card</h1>\n  ${myCard}\n  `;\n};\n```\n\n**You just made a card, using brick-card** 🎉 <br/>\nCheck out other available properties/attributes and customize the card for your needs!\n\n> **Note:** Brick-card inherits a theme attribute from a parent element.\n\n<br />\n\n---\n\n### How to use the _renderBrickCard_ function - Server side rendering\n\n#### 1. Install brick-card.\n\n```js\nnpm install --save @amedia/brick-card\n```\n\nand import the `renderBrickCard` function.\n\n```js\nimport { renderBrickCard } from '@amedia/brick-card';\n```\n\n#### 2. Assign it to a variable and pass the properties you need.\n\n```js\nconst brickCardMarkup = renderBrickCard({\n  imagesrc='https://assets.acdn.no/local/v3/publications/www.ao.no/gfx/small.svg'\n  dataTitleText: 'This is my title',\n  dataText: 'This is my body text',\n});\n```\n\n### Client side requirements\n\n#### Image\n\nWhen using images, brick-image need to be imported client side.\n\n#### 3. That's it. You can now use `renderBrickCard` to render your card server side.\n\nEasy as that 🎉\n\n## ADP logging\n\nbrick-card gives the possibility to let ADP logger to register clicks.\nUse `dataPrimaryButtonAdpLabel`/`dataPrimaryButtonAdpValue` and `dataSecondaryButtonAdpLabel`/`dataSecondaryButtonAdpValue` as arguments to your server rendered component.\n`data-primary-button-adp-label`/`data-primary-button-adp-value` and `data-primary-button-adp-label`/`data-primary-button-adp-value` if you write markup for the browser.\n\nHowever, brick-card does not render the `itemscope` etc for ADP logger to recognize the component, so for the click labels to register, you need to wrap brick-card with all the data you need for this purpose.\nThe adp button labels will only work with its ADP wrapper to define its scope.\n\n<br />\n\n## Developing on brick-card\n\nBrick-card is a part of the Brick design system.\nFor more info on development on brick-card, click [here](https://github.com/amedia/brick/blob/master/packages/brick-card/README.md)\n\n<br />\n\n## References\n\n`Brick-card` is set up to consume `brick-image` and `brick-button`, and `brick-stepper`.\nFor more advanced use of these, check them out here:\n\n- [brick-button](https://github.com/amedia/brick/tree/master/packages/brick-button)\n- [brick-image](https://github.com/amedia/brick/tree/master/packages/brick-image)\n- [brick-stepper](https://github.com/amedia/brick/tree/master/packages/brick-stepper)\n\n<Markdown>{ReadMe}</Markdown>\n\n## Changelog\n\n<Markdown>{ChangeLog}</Markdown>\n"
+}

package/dist/data/components/brick-carousel.json

@@ -0,0 +1,11 @@
+{
+  "name": "brick-carousel",
+  "version": "2.0.9",
+  "selector": "brick-carousel-v2",
+  "description": "Simple carousel for any content passed to it.",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from '../../../stories/brickStyle.js';\n\nimport ReadMe from '../README.md?raw';\nimport ChangeLog from '../CHANGELOG.md?raw';\n\nimport * as BrickStories from './brick-carousel.stories';\n\n<Meta of={BrickStories} />\n<brick-style></brick-style>\n\n# brick-carousel\n\n**This component is a carousel that can be used to display any number of items.**\n\n## Purpose\n\nThe purpose of this component is to display a horizontal carousel of items anywhere on the page, be it frontpage, article or other.\n\n### Bullet points for the carousel in its present form:\n\n- A horizontal carousel\n- Any number of items\n- The items are displayed one, two or three at a time depending on the width of the carousel\n- There is a scroll hint to indicate that there are more items to the right (part of the next item is visible)\n- Navigate with buttons, mouse, or keyboard on desktop, and touch when on mobile device.\n- Makes no assumptions about the content of the items, and has no css that styles the items.\n\n## How to use this component\n\nThis component can be used in two ways:\n\n### 1. Client-side usage (Browser/Web Component)\n\n**Use when:** Building interactive web pages where the carousel processes DOM children dynamically.\n\nFor use in the browser where the web component processes DOM children dynamically.\n\nInclude this file client side:  \nhttps://assets.acdn.no/pkg/@amedia/brick-carousel/x.x.x/brick-carousel.js\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-carousel/x.x.x/brick-carousel.js\"\n></script>`}\n/>\n\nThe `x.x.x` part of the url should be the latest version of the component.\n\nUse it in your template by adding `<brick-carousel-v2>` to your markup, and add the items you want to display as slides as direct children of the brick-carousel tag.\n\n**Each direct child of brick-carousel will be considered a slide in the carousel.** The web component will add required html tags and wrap elements in a list.\n\nThe direct child can be any tag, such as `<article>`, `<div>`. In the example below, the direct children are `article` tags.\n\n### 2. Server-side usage (SSR/Node.js)\n\n**Use when:** Server-side rendering in Node.js environments, or when you need pre-rendered HTML with validation.\n\nFor server-side rendering in Node.js environments, use the `renderBrickCarousel` function.\n\n<Source\n  language=\"typescript\"\n  code={`\nimport { renderBrickCarousel } from '@amedia/brick-carousel/template';\n\nconst carouselHTML = renderBrickCarousel({\ndataItems: [\n'<article>...</article>',\n'<article>...</article>',\n'<article>...</article>'\n],\ndataVersion: 'carousel',\ndataMinSlidesToShow: '2'\n});`}\n/>\n\n**Key differences for server-side rendering:**\n\n- Use `dataItems` array containing HTML content strings\n- The template automatically wraps each item with the proper `<li>` markup and attributes\n- All parameters are strings (e.g., `dataMinSlidesToShow: '2'`)\n- Function validates input and provides helpful error messages\n- Returns complete HTML string ready for server-side rendering\n\n<div className=\"note\">\n\n### Validation and Error Handling\n\nThe `renderBrickCarousel` function includes built-in validation with descriptive error messages to help with debugging.\n\n</div>\n\n### Examples\n\n#### Client-side Examples (Browser/Web Component)\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2>\n    <article>...</article> \n    <article>...</article>\n</brick-carousel-v2>`}\n/>\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2>\n    <template><article>...</article></template>\n    <template><brick-player>...</brick-player></template>\n</brick-carousel-v2>`}\n/>\n\n#### Server-side Examples (SSR/Node.js)\n\n<Canvas of={BrickStories.IsRendered2} />\n\n<Canvas of={BrickStories.IsRendered3} />\n\n<div className=\"note\">\n\n### Wrap elements in a template tag (Client-side only)\n\n[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n\n**For client-side usage only:** A good approach is to wrap each child in a `template` tag.\nThis will ensure that the child elements are inside an HTML fragment, preventing issues with event listeners and references.\n\nNote that the content, must be a template string to avoid any custom elements to be initialized too early.\nAll template content will be added to the HTML document _after_ it has been placed in the carousel item list.\nThis allows for custom elements, like brick-player, to be initialized properly.\n\n**For server-side usage:** Items are passed as HTML content strings in the `dataItems` array and are automatically wrapped with the proper `<li>` markup by the template.\n\n</div>\n\n## Parameters overview for brick-carousel\n\nThese are the parameters available for brick-carousel.\n\n<Controls />\n\n## Client-side Examples\n\n**Basic carousel:**\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2>\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n</brick-carousel-v2>`}\n/>\n\n<Canvas of={BrickStories.carousel} />\n\n**Example with `data-min-slides-to-show=\"2\"`**\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2 data-min-slides-to-show=\"2\">\n    <article>...</article>\n    <article>...</article>\n</brick-carousel-v2>`}\n/>\n\n<Canvas of={BrickStories.CarouselWith2Children} />\n\n**Example with `data-version=\"gallery\"`**\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2 data-version=\"gallery\">\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n</brick-carousel-v2>`}\n/>\n\n<Canvas of={BrickStories.gallery} />\n\n**Example with `data-hide-btn-start-end`**\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-carousel-v2 data-hide-btn-start-end=\"true\">\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n    <article>...</article>\n</brick-carousel-v2>`}\n/>\n\n<Canvas of={BrickStories.hideBtnStartEnd} />\n\n## Styling and CSS Properties\n\n🤝 Styled using CSS properties that must exist on the page.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing variants before resorting to custom properties.\n\nMake sure you scope the overrides.\n\n<div className=\"note\">\n  <span>Note</span>\n  It is your responsibilty to validate that your overrides adhere to the **WCAG\n  2.1 AA** guidelines.\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-carousel-btn-min</code>\n      </td>\n      <td>Overrides the minimum width and height for the button</td>\n      <td>\n        <code>2rem</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-carousel-btn-max</code>\n      </td>\n      <td>Overrides the maximum width and height for the button</td>\n      <td>\n        <code>3.125rem</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Feedback\n\nPlease give feedback on this component (#designsystem on slack), and if you have any ideas for improvements, please let us know.\n\n<Markdown>{ReadMe}</Markdown>\n\n## Changelog\n\n<Markdown>{ChangeLog}</Markdown>\n```\n"
+}

package/dist/data/components/brick-classnames.json

@@ -0,0 +1,10 @@
+{
+  "name": "brick-classnames",
+  "version": "2.1.0",
+  "selector": "brick-classnames-v2",
+  "description": "Utility method to create a safe string from a design name",
+  "category": "Utilities",
+  "tags": [
+    "utilities"
+  ]
+}

package/dist/data/components/brick-countdown.json

@@ -0,0 +1,7 @@
+{
+  "name": "brick-countdown",
+  "version": "2.0.8",
+  "selector": "brick-countdown-v2",
+  "description": "brick-countdown component",
+  "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-countdown.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-countdown\n\nBrick-countdown is a simple component, used by [brick-teaser](https://github.com/amedia/brick/tree/master/packages/brick-teaser), displaying an animated countdown.\n\n## Purpose\n\nDisplays a countdown to a given date.\n\n<Canvas of={BrickStories.Days} />\n\n## Accessibility\n\nInformation about accessibility concerns - if they are any.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n{' '}\n\n<Source language=\"js\" code={'npm install @amedia/brick-countdown'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-countdown/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickCountdown, } from '@amedia/brick-countdown/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderCountdown({\n      dataDate: '1713515269513',\n      dataText: 'My awesome brick title',\n      dataLocale: 'nb_NO'\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-countdown javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-countdown';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-countdown-v1\n    data-date=\"1713515269513\"\n    data-text=\"My awesome countdown text\"\n    data-locale=\"nb_NO\"\n></brick-countdown-v1>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-countdown-v1');\n  el.dataset.date = '1713515269513';\n  el.dataset.text = 'My awesome brick-title';\n  el.dataset.locale = 'nb_NO';\n  `}\n/>\n\n## Attributes overview for brick-countdown\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+}