@amedia/brick-mcp 0.0.1-LLM-DOCS → 0.0.1-MAYBE-TOKENS

package/README.md

@@ -6,7 +6,35 @@ The Brick MCP Server is a Model Context Protocol (MCP) server that provides AI a
 
 ## 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,38 @@ 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:
+The recommended way to use the MCP server with Claude Code is via npx (requires building the package first):
 
 ```bash
+# From the brick-mcp package directory
+npm run build
+
 # Add to Claude Code
-claude mcp add --transport stdio Brick -- npx -y @amedia/brick-mcp@latest
+claude mcp add --transport stdio Brick -- npx -y @amedia/brick-mcp
 ```
 
-### HTTP Mode (for local development)
+For development, you can run it directly from source:
+
+```bash
+claude mcp add --transport stdio Brick -- node /absolute/path/to/brick/packages/brick-mcp/src/index.ts
+```
+
+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 +82,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)
@@ -55,7 +93,7 @@ Once configured, you can ask Claude about Brick components, design tokens, and i
 
 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
+3. **`get-design-tokens`**: Access design tokens filtered by category (colors, spacing, typography, shadows, borders) or theme
 
 ## Goals
 
@@ -65,6 +103,16 @@ 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.
@@ -74,7 +122,6 @@ The MCP server exposes three tools that AI assistants can call to fetch informat
 List all available Brick components with optional filtering.
 
 **Input**:
-
 ```typescript
 {
   filter?: string;  // Filter by name, category, or tag
@@ -82,16 +129,15 @@ List all available Brick components with optional filtering.
 ```
 
 **Output**:
-
 ```typescript
 {
   components: Array<{
-    name: string; // e.g., "brick-button"
-    version: string; // e.g., "9.0.0"
-    selector: string; // e.g., "brick-button-v9"
+    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
+    category?: string;   // Auto-categorized: Forms, Navigation, Layout, Feedback, Display, Utilities
+    tags?: string[];     // Auto-generated tags
   }>;
 }
 ```
@@ -105,7 +151,6 @@ List all available Brick components with optional filtering.
 Retrieve detailed documentation for one or more components.
 
 **Input**:
-
 ```typescript
 {
   components: string[];  // e.g., ["brick-button", "brick-modal"]
@@ -113,25 +158,23 @@ Retrieve detailed documentation for one or more components.
 ```
 
 **Output**:
-
 ```typescript
 {
   docs: Array<{
     name: string;
     version: string;
     selector: string;
-    description?: string; // From llm.txt or MDX content
+    description?: string;  // From llm.txt or MDX content
     examples: {
-      webComponent?: string; // Extracted from MDX or auto-generated
-      storybook?: string; // Link to Chromatic Storybook
+      webComponent?: string;  // Extracted from MDX or auto-generated
+      storybook?: string;     // Link to Chromatic Storybook
     };
-    cdnPath?: string; // Eik CDN URL for the component
+    cdnPath?: string;  // Eik CDN URL for the component
   }>;
 }
 ```
 
 **Data Sources**:
-
 - `llm.txt`: AI-friendly component summaries (if available)
 - `.mdx` files: Full documentation from Storybook
 - `package.json`: Version and description
@@ -143,7 +186,6 @@ Retrieve detailed documentation for one or more components.
 Access design tokens from brick-tokens with filtering options.
 
 **Input**:
-
 ```typescript
 {
   category?: 'colors' | 'spacing' | 'typography' | 'shadows' | 'borders';
@@ -152,7 +194,6 @@ Access design tokens from brick-tokens with filtering options.
 ```
 
 **Output**:
-
 ```typescript
 {
   tokens: Array<{
@@ -163,21 +204,10 @@ Access design tokens from brick-tokens with filtering options.
     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**:
-
-- Pre-built tokens from `brick-tokens/publications/publication/*.json`
-- Documentation from `tokens-documentation.json`
+**Data Source**: Pre-built tokens from `brick-tokens/publications/publication/*.json`
 
 ---
 
@@ -206,6 +236,51 @@ Claude: [Calls list-components with filter: "button"]
 
 ---
 
+## Architecture
+
+### Build Process
+
+The MCP server uses a pre-bundle approach to work as a standalone npm package:
+
+1. **Data Generation** (`npm run build`):
+   - Scans all `packages/brick-*` directories
+   - Extracts metadata from `package.json`
+   - Reads `llm.txt` and `.mdx` documentation files
+   - Auto-categorizes components (Forms, Navigation, Layout, etc.)
+   - Generates JSON files in `src/data/`:
+     - `components-metadata.json`: Lightweight list of all components
+     - `components/*.json`: Full documentation per component
+     - `tokens.json`: All design tokens from brick-tokens
+
+2. **Bundle** (ESBuild):
+   - Bundles TypeScript to `dist/index.js` (stdio mode) and `dist/http.js` (HTTP mode)
+   - Copies `src/data/` to `dist/data/`
+   - Adds shebang for CLI usage
+   - Result: Self-contained package that works via `npx`
+
+### Benefits
+
+1. **Fast Performance**: Pre-generated JSON files mean instant responses
+2. **Standalone Package**: Works without access to the full Brick monorepo
+3. **Always Up-to-date**: Data regenerated on every build
+4. **Discoverability**: Auto-categorization helps find the right component
+5. **Multiple Data Sources**: Combines llm.txt, MDX, and package.json for rich context
+
+## Development
+
+### Commands
+
+```bash
+npm run build           # Generate data + bundle for production
+npm run dev             # Run stdio server in development
+npm run dev:http        # Run HTTP server with auto-reload
+npm run start           # Run stdio server (production)
+npm run start:http      # Run HTTP server (production)
+npm run lint            # Lint TypeScript code
+npm run lint:fix        # Fix linting issues
+npm run test:typescript # Type check
+```
+
 ### Adding New Tools
 
 To add a new MCP tool:
@@ -217,25 +292,16 @@ To add a new MCP tool:
 
 ### Publishing
 
-The package is configured to publish to npm:
+The package is configured to publish to npm with Eik CDN support:
 
 ```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
+npm run build       # Build the package
+npm publish         # Publish to npm (requires permissions)
 ```
 
-For snapshot releases (testing pre-release versions):
-
-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.
-
 After publishing, the package can be used via:
-
 ```bash
-npx @amedia/brick-mcp           # Run the latest version
-npm install @amedia/brick-mcp   # Install in your project
+npx @amedia/brick-mcp  # Run the latest version
 ```
 
 ---

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"
+}

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

@@ -0,0 +1,11 @@
+{
+  "name": "brick-dialog",
+  "version": "2.0.12",
+  "selector": "brick-dialog-v2",
+  "description": "brick-dialog component",
+  "category": "Feedback",
+  "tags": [
+    "feedback"
+  ],
+  "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-dialog.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-dialog\n\n## Purpose\n\nThis component can be used to display a dialog or modal window (depending on the use case), that can be used to display information, forms, or other content that requires user interaction.\n\nThe dialog is displayed on top of the page content, and is dismissed when the user clicks the close button, or presses the Escape key.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\n\n<br />\n<br />\n### When to use dialog and when to use modal\n\n**Use a dialog when:**\n\n- The information or interaction is supplementary and non-critical.\n- Users might need to interact with both the dialog and the main content simultaneously.\n- Minimizing disruption to the user's workflow is important.\n\n**View the dialog:**\n\n<Story of={BrickStories.Dialog} />\n\n**Use a modal when:**\n\n- Immediate user action is required before proceeding.\n- You need to ensure the user's focus is solely on the modal content.\n- Preventing interaction with the main content is necessary to avoid errors or confusion.\n\n**View the modal:**\n\n<Story of={BrickStories.Modal} />\n\n## Accessibility\n\nHere are the key accessibility measures taken to ensure the component is accessible to all users, including those using assistive technologies:\n\n1. **Use of Appropriate ARIA Roles and Attributes:**\n\n   - The dialog element is given a `role=\"dialog\"`, informing assistive technologies that this element is a dialog window.\n   - When the dialog is used as a modal (`dataType === 'modal'`), it includes `aria-modal=\"true\"`, indicating that the content underneath is inert and should not be interacted with.\n   - The `setDialogLabel` method assigns an `aria-labelledby` attribute if a heading is present within the dialog, or an `aria-label` if not, ensuring the dialog has an accessible name.\n     <br />\n     <br />\n\n2. **Focus Management:**\n\n   - Before opening the dialog, the component saves the reference to the previously focused element (`previouslyFocusedElement`) to restore focus when the dialog is closed.\n   - Upon opening, the dialog gains focus, directing keyboard users and screen readers immediately to the dialog content.\n   - When the dialog closes, focus is returned to the element that was focused before the dialog opened, maintaining a logical focus order.\n     <br />\n     <br />\n\n3. **Keyboard Accessibility and Focus Trapping:**\n\n   - For modal dialogs, the `trapFocus` method ensures that focus stays within the dialog when navigating with the Tab key. It loops focus from the last focusable element back to the first and vice versa.\n   - The dialog listens for the `keydown` event to implement this focus trapping, crucial for users who rely on keyboard navigation.\n   - For non-modal dialogs, the Escape key is handled (`handleEscapeKey` method) to allow users to close the dialog using the keyboard.\n     <br />\n     <br />\n\n4. **Preventing Background Interaction:**\n\n   - When a modal dialog is open, the `aria-hidden=\"true\"` attribute is added to the `<body>` element, signaling assistive technologies to ignore background content.\n   - Scrolling is disabled (`document.body.style.overflow = 'hidden'`) to prevent users from interacting with content outside the modal, maintaining focus on the dialog.\n     <br />\n     <br />\n\n5. **Accessible Control Elements:**\n   - Close buttons are provided at the top (and bottom if modal) of the dialog, making it easy for users to find and activate them.\n   - The close buttons are accessible components (`brick-button-v[x]`).\n     <br />\n     <br />\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-dialog'} />\n\n### Server side rendering\n\nThe first version of the dialog component has not server side rendering support. If the need arises, this can be added in a future version.\n\n### Client side\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-dialog';\n  `}\n/>\n\n#### Create the DOM element\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-dialog-v2\n    data-type=\"modal\" \n    data-id=\"modal-${Math.random().toString(36).substring(2)}\"\n></brick-dialog-v2>`}\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-dialog-v2');\n  el.dataset.position = 'bottom';\n  `}\n/>\n\n**NOTE:**\nThe component should have a unique id. One easy way of implementing this is:\n\n```js\nconst dialogId = `dialog-${Math.random().toString(36).substring(2)}`;\n```\n\nor if you allready have UUID available in your application you can use that for even more robustness.\n\n### How to add content inside the dialog using template tags\n\nThe dialog content is added inside the dialog element, using template tags and `data-name` attributes.\n\n<Source\n  language=\"html\"\n  code={`\n<brick-dialog-v2>\n  <template data-name=\"header\">\n    <h2>Dialog Title</h2>\n  </template>\n  <template data-name=\"content\">\n    <p>Dialog content goes here.</p>\n  </template>\n</brick-dialog-v2\n>\n`}\n/>\n\n## Attributes overview for brick-dialog\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n## Templates\n\nAdd the content in the properly named template tags.\n\n<table>\n  <thead>\n    <tr>\n      <th>data-name</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>header</td>\n      <td>Template for the header markup of the dialog or modal</td>\n    </tr>\n    <tr>\n      <td>content</td>\n      <td>Template for the content markup of the dialog or modal</td>\n    </tr>\n  </tbody>\n</table>\n\n## Styling and CSS Properties\n\nCSS Custom Properties can be used to customize the visual appearance.\nMake sure you scope the overrides.\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-dialog-max-inline-size</code>\n      </td>\n      <td>Controls the max width</td>\n      <td>\n        <code>80vw</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Methods\n\n<table>\n  <thead>\n    <tr>\n      <th>Method name</th>\n      <th>Parameters</th>\n      <th>Description</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>openDialog() => void</code>\n      </td>\n      <td>N/A</td>\n      <td>\n        Opens the dialog or modal, automatically moving focus to the dialog.\n        Will trigger either show() or showModal() on the dialog element.\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>show()/showModal() => void</code>\n      </td>\n      <td>N/A</td>\n      <td>\n        Opens the dialog or modal, automatically moving focus to the dialog,\n        using the openDialog() method.\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>close() => void</code>\n      </td>\n      <td>N/A</td>\n      <td>Closes the dialog</td>\n    </tr>\n  </tbody>\n</table>\n\n### Svelte\n\n> **Note for Svelte users:**  \n> If you experience issues where the first `<template>` tag is stripped during Svelte 5 compilation, add a dummy template as a workaround.  \n> See [lihautan.com/compile-svelte-5-in-your-head#the-lt-template-gt-element](https://lihautan.com/compile-svelte-5-in-your-head#the-lt-template-gt-element) for details.\n\n```html\n<!-- Workaround: Prevent Svelte 5 from stripping the first template tag -->\n<template data-name=\"template-for-svelte-compile-will-be-stripped\"></template>\n```\n\n<Source language=\"html\"\ncode={`\n<script>\n  let dialogRef;\n\nfunction openDialog() {\ndialogRef.openDialog();\n}\n\n</script>\n\n<brick-dialog-v2 bind:this={dialogRef}>\n  <template data-name=\"template-for-svelte-compile-will-be-stripped\"></template>\n  <template data-name=\"header\">\n    <h2>Dialog Title</h2>\n  </template>\n  <template data-name=\"content\">\n    <p>Dialog content goes here.</p>\n  </template>\n</brick-dialog-v2>\n\n<button on:click={openDialog}>Open Dialog</button>\n`} />\n\n<Source language=\"html\"\ncode={`\n<script>\n  let dialogRef;\n\nfunction openDialog() {\ndialogRef.openDialog();\n}\n\n</script>\n\n<brick-dialog-v2 bind:this={dialogRef}>\n  <template data-name=\"header\">\n  <style>\n    .hei {\n      color: red;\n    }\n  </style>\n    <h2><div class=\"hei\">Dialog Title<div></h2>\n  </template>\n  <template data-name=\"content\">\n    <p>Dialog content goes here.</p>\n  </template>\n</brick-dialog-v2>\n\n<button on:click={openDialog}>Open Dialog</button>\n`} />\n\n<Markdown>{ReadMe}</Markdown>\n```\n"
+}

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

@@ -0,0 +1,10 @@
+{
+  "name": "brick-fonts",
+  "version": "2.0.2",
+  "selector": "brick-fonts-v2",
+  "description": "Distribution of font files",
+  "category": "Utilities",
+  "tags": [
+    "utilities"
+  ]
+}

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

@@ -0,0 +1,7 @@
+{
+  "name": "brick-helloworld",
+  "version": "2.0.1",
+  "selector": "brick-helloworld-v2",
+  "description": "Brick Hello World component",
+  "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport ChangeLog from '../CHANGELOG.md?raw';\n\nimport * as BrickStories from './brick-helloworld.stories.ts';\n\n<Meta of={BrickStories} />\n\n# brick-helloworld\n\n## Purpose\n\nThis brick component is used to showcase the anatomi of brick-\\* components, and usage.\n\nIt can be used to test changes in release and publishing, and build process.\n\nIt demonstrates the basic ingredients of a brick component.\nA template.ts for markup only, styles.js for css and types.ts for types etc.\n\nHow can `brick-helloworld` be used?\n\n## Server side\n\nFor performance reasons, it is recommended to render the markup serverside.\n\nAnd only if the component also needs some client side javascript, you need to inlude it clientside.\n\n### Import\n\n<Source\n  language=\"node\"\n  code={`\nnpm install @amedia/brick-helloworld\n//and then import and render\n\nimport { renderBrickHelloworld, getCssText } from '@amedia/brick-helloworld';\n\n`}\n/>\n\n### https-imports\n\nAlternatively you can use https-imports in node >= 18, from\n\nhttps://stateful.com/blog/nodejs-https-imports\n\n<Source\n  language=\"html\"\n  code={`import {renderBrickHelloworld, getCssText} from 'https://assets.acdn.no/pkg/@amedia/brick-helloworld/v0/template.js';\n   //the v0 version is an example`}\n/>\n\n### Usage\n\nAnd this is how you use the `renderBrickHelloworld` function to render markup, and getCssText() to get the styles.\n\n<Source\n  language=\"js\"\n  code={`\n    const someMarkup = renderBrickHelloworld({\n    text: 'The quick brown fox jumps over the lazy dog',\n    version: args.version });\n\n    //include the styles\n    const css = <style>getCssText()</style>;\n\n`}\n/>\nPreview:\n\n<Canvas of={BrickStories.Render} />\n\n## Client side\n\nIf the markup has been rendered serverside, the markup will not be recreated, but eventlisteners etc will happen client side.\n\nWhen the markup not has been rendered serverside, it will be created clientside.\n\nInclude the client side class from the Eik asset server with a script tag or import.\n\n### Eik asset server\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-helloworld/v0/brick-helloworld.js\"\n></script>\n//or \nimport 'https://assets.acdn.no/pkg/@amedia/brick-helloworld/v0/brick-helloworld.js'\n`}\n/>\n\n### Import\n\n<Source\n  language=\"html\"\n  code={`\n    import '@amedia/brick-helloworld';\n  `}\n/>\n\nTo render the markup client side, you can use several methods.\nEither as template literals, or createElement using javascript.\n\nSe examples below, and click \"Show code\":\n\n<Canvas of={BrickStories.TemplateLiterals} />\n\n<Canvas of={BrickStories.CreateElement} />\n\n#### css\n\nWhen the custom element is rendered in the client, the css is included.\n\n## Attributes and properties\n\n<Controls />\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"
+}

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

@@ -0,0 +1,10 @@
+{
+  "name": "brick-icon",
+  "version": "2.3.0",
+  "selector": "brick-icon-v2",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';\n\nimport * as BrickIconStories from './brick-icon.stories.ts';\n\n<Meta of={BrickIconStories} />\n\n# brick-icon\n\n`brick-icon` is component that renders an icon based on three properties: `data-icon-id`, `data-icon-text` and `data-icon-size`.\n\n`data-icon-id` is the ID of the SVG inside the sprite.\n\nWhen the parameter `data-icon-text` is used the SVG gets an attribute of `role=\"graphics-symbol\"` as well as an accessible name in the form a `title` tag inside the SVG. If `data-icon-text` is empty or missing, the SVG will get an attribute of `aria-hidden=\"true\"`, and the title tag is not rendered.\n\n`data-icon-size` sets the height of the svg container. The default is medium (24px) and the width is auto.\n\n> 👉 If you need your icon to be a specific height and width - use the `--b-icon-svg-height` and `--b-icon-svg-width` to set these. The container will scale accordingly.\n\n<br />\n\n## Purpose\n\nIts sole purpose is to render a SVG icon.\n\n## Preprequisite\n\nAn svg-sprite with the symbol with the id of the `iconId` must be embedded in the HTML on the page.\n\nCheck out `brick-icons` that provides this svg-sprite for each theme. These icons are maintained i Figma.\n\n### Why embedding the svg-sprite inline\n\nFor a small set of icons, using an inline SVG Sprite is generally the most performant.\n\n- eliminating the need for additional network request\n- simpler implementation, avoiding asynchronous requests. This can contribute to petter performance.\n- inline svgs are immediately available as soon as the HTML is parsed, where external SVG sprites require fetching the resource. This will enhance the perceived performance.\n\nEmbedding the svg-sprite in the HTML increases the size of the HTML document, but this is generally not a concern for small icons, but can be an issue if the set grows significantly.\n\n## Quick start\n\nFirst you need to install this in your project.\n\n```sh\nnpm i -S @amedia/brick-icon\n```\n\n## How to use\n\nFor client side rendering, import the package and write markup. The custom element will define itself if needed as long as its been fetched in the browser.\n\n```js\nimport '@amedia/brick-icon';\n\n`<brick-icon-v2 data-icon-id=\"${id}\" data-icon-text=\"${text}\" data-icon-size\"${size}\"></brick-icon-v2>`;\n```\n\nFor server side rendering, import th package and write markup. The custom element will define itself if needed as long as its been fetched in the browser.\n\n```js\nimport { renderBrickIcon } from '@amedia/brick-icon';\n\nrenderBrickIcon({\n  dataIconId: '123',\n  dataIconText: 'Some text',\n  dataIconSize: 'medium',\n});\n```\n\n## Observed Attributes client side\n\nThe following attributes are observed for changes:\n\n- `data-icon-id`\n- `data-icon-text`\n\n## Parameters for brick-icon\n\nThese are the parameters available for brick-icon\n\n<Controls />\n\n**_For local development with Storybook, please see the Brick [documentation](https://brick.api.no)._**\n\n## Accessibility\n\nIcons will get a proper role and accessible name when we want screen readers to read the SVG, and if we want to hide it then it will be hidden with `aria-hidden=\"true\"`\n\n## Styling and CSS Properties\n\n🤝 brick-icon 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 brick-icon 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-icon-color</code>\n      </td>\n      <td>This variable controls the color of the icon</td>\n      <td>\n        <code>'currentColor'</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-icon-color-breaking-pulseStart</code>\n      </td>\n      <td>\n        This variable controls the color of pulse animation start, in case of an\n        icon with id \"pill-breaking\"\n      </td>\n      <td>\n        <code>var(--brick-colors-pillNonePulseStartBg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-icon-color-breaking-pulseEnd</code>\n      </td>\n      <td>\n        This variable controls the color of pulse animation end, in case of an\n        icon with id \"pill-breaking\"\n      </td>\n      <td>\n        <code>var(--brick-colors-pillNonePulseEndBg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-icon-size</code>\n      </td>\n      <td>This variable controls the size of the svg container</td>\n      <td>\n        <code>var(--brick-sizes-iconM)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-icon-svg-width</code>\n      </td>\n      <td>This variable controls the width of the svg itself</td>\n      <td>\n        <code>var(--brick-sizes-iconM)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-icon-svg-height</code>\n      </td>\n      <td>This variable controls the height of the svg itself</td>\n      <td>\n        <code>var(--brick-sizes-iconM)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Canvas of={BrickIconStories.Icon} />\n"
+}

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

@@ -0,0 +1,11 @@
+{
+  "name": "brick-icons",
+  "version": "2.1.0",
+  "selector": "brick-icons-v2",
+  "description": "Icons package",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\n\nimport * as BrickIconsStories from './brick-icons.stories';\n\n<Meta of={BrickIconsStories} />\n\n# brick-icons\n\nThis package is responsible for getting the graphics from Figma and distributing svg-sprites per theme to our CDN, for easily reuse of svg icons.\n\n<br />\n\n## Purpose\n\n- To automate the process of adding an svg to Figma and make it available in a svg-sprite on our asset CDN server.\n  Eks url `https://assets.acdn.no/pkg/@amedia/brick-icons/2.0.4/icons/alfa/icons.svg`\n\n<br />\n\n## Build the correct path to theme url and icon name\n\n<Controls />\n\n|            | Options               | Example                                                             |\n| ---------- | --------------------- | ------------------------------------------------------------------- |\n| theme      | String                | \"icons/theme/icons.svg#name                                         |\n| titleLevel | `h1`, `h2`, `h3`, etc | Sets the text level. If nothing is defined, `h2` is used as default |\n\n<br />\n\n# Usage guidelines\n\nUse icons to enhance the appearance of a web interface\n\nUse an icon _only_ when it provides additional clarity or is necessary to draw attention to a UI element.\n\n## Specify if an icon is decorative\n\nIcons can either be decorative or informative. \"Decorative icons don’t add information to the content of a page. The information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.\" (w3.org)\n\n## Give informative icons a title\n\nA title is required so assistive technology can infer equal meaning as a sighted user would.\n\n### Do\n\nUse title text that gives context and meaning to the icon.\n\n### Don't\n\nAvoid title text that only describes the icon image.\n\n## Pair icons with text\n\n### Do\n\nPair icons with text.\n\n### Don't\n\nAvoid having standalone icons.\n\n## Icons should not be interactive\n\nIcons should not have interactions such as click or hover behavior. Instead they should be wrapped with an interactive element such as brick-button.\n\n# Roadmap\n\nImplement support for changing the icon color.\nSupport for size tokens to set size of the icon.\n\n# Usage\n\nHow to include an svg in your application\nThis is what the final code for a custom brick-card component looks like:\n\n```js\n<svg xmlns=\"http://www.w3.org/2000/svg\" title=\"yourtitlehere\">\n  <title>yourtitlehere</title>\n  <use href=\"icons/theme/icons.svg#name\"></use>\n</svg>\n```\n\n## Why SVG?\n\nPNGs and JPGs are created using thousands of tiny pixels. SVGs are made out of geometric primitives such as points, lines, and basic shapes. Because of this attribute, SVGs can be resized without any loss of quality to the image. We can also write code to change SVG attributes in realtime. These characteristics are ideal for icons since we usually want to customize their size or color. To do this with PNGs or JPGs we would need to create a separate file for each variation.\n\n#### ☝️ Now let's break it down.\n\n<br />\n\n## Developing on brick-icons\n\nFor more info on development on brick-icons, click [here](https://github.com/amedia/brick/blob/master/packages/brick-icons/README.md)\n\n<br />\n\n## References\n\n- [Some background in Slite](https://amedia.slite.com/app/docs/U_WMBgq9lQUcqw)\n"
+}

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

@@ -0,0 +1,7 @@
+{
+  "name": "brick-illustrations",
+  "version": "1.2.5",
+  "selector": "brick-illustrations-v1",
+  "description": "brick-illustrations",
+  "mdx": "import { Markdown } from '@storybook/addon-docs/blocks';\nimport { Meta } from '@storybook/addon-docs/blocks';\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-illustrations.stories';\n\n<Meta of={BrickStories} />\n\n# brick-illustrations\n\nThis package is responsible for getting the graphics from Figma and distributing svg files to our CDN, for easily reuse of svg illustrations.\n\n<br />\n\n## Purpose\n\nTo automate the process of adding an svg to Figma and make the svgs available our asset CDN server\n\n<br />\n\n# Usage guidelines\n\nUse illustrations to enhance the appearance of a web interface\n\n## Important: Review guidelines before use\n\nTo ensure proper use of brick-illustrations, please read the [Illustrations Usage Guidelines in Slite.](https://amedia.slite.com/app/docs/rAiiGn60o3METD?backward=)\nFollowing these guidelines helps maintain consistency and alignment across all projects.\n\n## Specify if an illustrations is decorative\n\nIllustrations can either be decorative or informative. \"Decorative icons don’t add information to the content of a page. The information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.\" (w3.org)\n\n## Give informative illustrations a title\n\nA title is required so assistive technology can infer equal meaning as a sighted user would.\n\n### Do\n\nUse title text that gives context and meaning to the illustration.\n\n### Don't\n\nAvoid title text that only describes the illustrations image.\n\n### Do\n\nPair illustrations with text.\n\n### Don't\n\nAvoid having standalone illustrations.\n\n## Illustrations should not be interactive\n\nIllustrations should not have interactions such as click or hover behavior. Instead they should be wrapped with an interactive element such as anchor link or button.\n\n# Usage\n\nHow to include an svg in your application\n\n## Why SVG?\n\nPNGs and JPGs are created using thousands of tiny pixels. SVGs are made out of geometric primitives such as points, lines, and basic shapes. Because of this attribute, SVGs can be resized without any loss of quality to the image. We can also write code to change SVG attributes in realtime. These characteristics are ideal for icons since we usually want to customize their size or color. To do this with PNGs or JPGs we would need to create a separate file for each variation.\n\n#### ☝️ Now let's break it down.\n\n<br />\n\n## Developing on brick-illustrations\n\nFor more info on development on brick-illustrations, click [here](https://github.com/amedia/brick/blob/master/packages/brick-illustrations/README.md)\n\n<br />\n\n<Markdown>{ReadMe}</Markdown>\n"
+}