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

package/dist/data/components.json

@@ -0,0 +1,321 @@
+[
+  {
+    "name": "brick-actions",
+    "version": "0.1.5",
+    "selector": "brick-actions-v0",
+    "description": "Brick github actions"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+    ]
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "name": "brick-fonts",
+    "version": "2.0.2",
+    "selector": "brick-fonts-v2",
+    "description": "Distribution of font files",
+    "category": "Utilities",
+    "tags": [
+      "utilities"
+    ]
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "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"
+  },
+  {
+    "name": "brick-image",
+    "version": "6.0.4",
+    "selector": "brick-image-v6",
+    "category": "Display",
+    "tags": [
+      "display"
+    ],
+    "mdx": "import {\n  Meta,\n  Description,\n  Title,\n  Controls,\n  Canvas,\n  Markdown,\n  Source,\n} from '@storybook/addon-docs/blocks';\nimport ReadMe from '../README.md?raw';\nimport ChangeLog from '../CHANGELOG.md?raw';\nimport '../../../stories/brickStyle.js';\n\n<brick-style></brick-style>\n\nimport * as BrickStories from './brick-image.stories.ts';\n\n<Meta of={BrickStories} />\n\n<Title of={BrickStories} />\n<Description of={BrickStories} />\n\nhttps://imagekit.io/blog/lazy-loading-images-complete-guide/\n\nRenders a foreground image with the `img` html tag, supporting lazyload.\nIf `srcset` is provided, the image loaded will be responsive. Responsive in this context means that the best image url (defined in srcset) will be calculated based on container size and screen resolution. Take a look at the implementation for details.\n\n## Purpose\n\n`brick-image` is a custom element for rendering a responsive image.\nFor the simplest use, it just needs a `data-src`, `data-width` and `data-height` attribute.\n\n<Canvas\n  additionalActions={[\n    {\n      title: 'Open in GitHub',\n      onClick: () => {\n        window.open(\n          'https://github.com/amedia/brick/tree/master/packages/brick-image',\n          '_blank'\n        );\n      },\n    },\n    {\n      title: 'Open README in GitHub',\n      onClick: () => {\n        window.open(\n          'https://github.com/amedia/brick/tree/master/packages/brick-image/README.md',\n          '_blank'\n        );\n      },\n    },\n  ]}\n  of={BrickStories.Src}\n  sourceState=\"shown\"\n/>\n\n### Using native browser level lazy loading\n\nhttps://web.dev/articles/browser-level-image-lazy-loading\n\n### Aspect ratio\n\nIts recommended to always set either width/height or aspect-ratio on the image.\n\nBased on the attributes `data-height` and `data-width`, `brick-image` adds the css var `--brick-image-ratio` with the aspect ratio for the image.\n\nThe following css applies to the `<img>` element, for browsers supporting `aspect-ratio`:\n\n```css\naspect-ratio: auto var(--brick-image-ratio);\n```\n\nTo support older browsers, like Safari < 15, the `width` and `height` attribute are also set on the `<img>` tag.\n\n## Accessibility\n\nWe differentiate between images that are decorative and images that are informative (or functional).\n\nDecorative images usually don’t need alt text. They may exist on the page for purely aesthetic reasons – in other words, to make the page look pretty. Or they may be repeating information that is already on the page as text. In that case, adding alt text to the image is redundant, and an empty string can be used.\n\nInformative images, on the other hand, convey some kind of information. To determine whether an image is informative or not is to remove it from the design: if you are missing information because the image is gone, then it means the image is informative and needs alt text.\n\n#### Search Engine Optimization\n\nIn addition to improving accessibility, alt text is also used by search engines to determine the subject of an image and is considered as a ranking factor for `SEO`.\n\n#### Note\n\nUse proper grammar when writing alt text, such as punctuation and capital\nletter at the start of a sentence. This will improve the experience for\nscreen reader 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-image'} />\n\n#### Import and renderBrickImage from '@amedia/brick-image/template'\n\nThe `renderBrickImage` function takes an object properties and returns both the markup for brick-image and the img tag.\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickImage } from '@amedia/brick-image/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderBrickImage({\n      dataSrc: src,\n      dataFetchPriority,\n      dataLoading,\n      dataAltText: alttext,\n      dataWidth: width,\n      dataHeight: height,\n      dataSizes,\n    })\n`}\n/>\n\n#### Styles\n\nMake sure to load the css file client side or inline the styles serverside.\n\nThe path to the css file is typically added to the manifest if you are working on an amedia-component.\n\n```html\nhttps://assets.acdn.no/pkg/@amedia/brick-image/[version]/styles.css\n```\n\nYou also have the option to serverside if you are using `getCssText()`.\n\n## Attributes and properties\n\n<Controls />\n\n# Responsive images\n\n### srcset\n\n[HTMLImageElement/srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)\n\nThe `srcset` attribute defines the set of image sizes we will allow the browser to choose between.\nThe `sizes` attribute must also be present, or the srcset itself will be ignored.\n\nSkip it for small, simple, or fixed-size images. If your image does not change much between screen-sizes a single optimized image is better.\n\n### sizes\n\n[HTMLImageElement/sizes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)\n\nThe img attribute `sizes`, gives hints to the browser about the size of the area, or container, the image will be displayed in.\nIn a grid listing out thumbnails in full width on smaller screens, but in 280px horisontally on larger screens:\n\n```js\ndata-sizes: '(min-width 600px) 280px, 100vw',\n```\n\nIf your component are used in various context, use the custom CSS Property `--brick-image-sizes` to set different `sizes` based on your needs.\nA good example where setting a custom `sizes` is when your component are used in a carousel, or a thumbnail grid.\n\nSetting this in your CSS, will override the `data-sizes` and tell the browser that the image will be displayed in a 300px area on larger screens, and take up 80vw on smaller screens:\n\n```css\n...your other css properties;\n--brick-image-sizes: (min-width: 600px) 300px, 80vw);\n```\n\n## CSS Properties\n\nCSS Custom Properties can be used to customize the visual appearance.\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>--brick-image-sizes</code>\n      </td>\n      <td>\n        Use this css variable to dynamically set the `sizes`. This tells the\n        browser what sizes the image container will be using using [media\n        queries like syntax]\n        (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)\n      </td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-height</code>\n      </td>\n      <td>Use this to set the `height` CSS property of the `img` element.</td>\n      <td>\n        <code>auto</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-maxheight</code>\n      </td>\n      <td>\n        Use this to set the `max-height` CSS property of the `img` element.\n      </td>\n      <td>\n        <code>auto</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-width</code>\n      </td>\n      <td>Use this to set the `width` CSS property of the `img` element</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-maxwidth</code>\n      </td>\n      <td>Use this to set the `max-width` CSS property of the `img` element</td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-objectfit</code>\n      </td>\n      <td>\n        Use this to set the `object-fit` CSS property of the `img` element\n      </td>\n      <td>\n        <code>cover</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>---brick-image-objectposition</code>\n      </td>\n      <td>\n        Use this to set the `object-position` CSS property of the `img` element\n      </td>\n      <td>\n        <code>center</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-color-bg</code>\n      </td>\n      <td>\n        Can be used to set the background color if the image should be\n        letterboxed .\n      </td>\n      <td>\n        <code>transparent</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### data-decoding\n\nDue to issues with rendering images in Safari, the `decoding` attribute can be used to set the decoding mode.\nWe use this in article as a hack to prevent problems with webkit not computing correct height for the image\nDo not use this in your app as its probably not needed and we will remove it as soon as possible.\nhttps://stackoverflow.com/questions/66903058/why-does-safari-only-render-the-top-of-images-sometimes\n\n## Performance\n\nImages are often the largest assets on a page, and can be a major factor in slowing down the page load time.\nWhat the correct sizes of an image is will depend on the context of the image.\n\nThe `sizes` and `srcset` attributes will be used by the browser to determine which image to load, based on the container size and screen resolution.\nIf the image is small, simple or fixed size, a single optimized image is better. I.e when using images in a list of thumbnails, a srcset is not needed.\n\nCaution: Do not use `dataFetchPriority: 'high'` and `dataLoading:'eager'` unless you know the image is the LCP candidate. This will impact the Largest Contentful Paint timing.\nThe default value of `loading` is `lazy`, which means the image will be loaded when it comes into view.\n\n#### Resources\n\n- https://web.dev/articles/browser-level-image-lazy-loading\n- https://web.dev/articles/use-srcset-to-automatically-choose-the-right-image\n- https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#using-srcset\n- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\n\n<Markdown>{ReadMe}</Markdown>\n\n## Changelog\n\n<Markdown>{ChangeLog}</Markdown>\n"
+  },
+  {
+    "name": "brick-input",
+    "version": "3.0.8",
+    "selector": "brick-input-v3",
+    "description": "brick-input component",
+    "category": "Forms",
+    "tags": [
+      "forms",
+      "interactive"
+    ],
+    "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-input.stories';\n\n<Meta of={BrickStories} />\n\n# brick-input\n\n<br />\n\n## Purpose\n\nThis package exports a custom element called \"brick-input\" that can be used to create various types of input fields, with corresponding attributes.\n\nIt can be used to create standalone input fields, or as part of `brick-form` (not currently available).\n\nValidation of the input value is only done via the `pattern` attribute - if you provide it. This attribute is supported by `text`, `password`, `search`, `tel`, `url` and `email`. Also make sure to add an `errortext` attribute with a text that describes the error so the user knows what to do to fix it. This text will also be read by screen readers via aria-live, which is the only way for a screen reader user to know something is wrong (unless he tabs back to the input).\n\n**However**, if you use it as part of `brick-form`, validation is done automatically.\n\n<br />\n\n## How to use this component\n\nbrick-input can be used with both server side rendering and client side rendering. The way to do this is by:\n\n1. Client side markup using `<brick-input>`. (Client Side)\n2. Using the `renderBrickInput` function to render markup (Server Side)\n\n---\n\n<br />\n\n### How to use brick-input - Client Side Rendering\n\n```js\nimport { BrickInput } from '@amedia/brick-input';\n\nconst myMarkup = () => {\n  return `\n  <brick-input \n    data-label-text=\"Firstname\"\n    data-required=\"true\"\n    data-type=\"text\">\n  </brick-input>\n  `;\n};\n```\n\nHere is a codepen link: https://codepen.io/renatewr/pen/eYwYwBw?editors=1111\n\n#### Now let's break it down.\n\n<br />\n\n#### 1. First you need to install brick-input as a dependency:\n\n```bash\nnpm install @amedia/brick-input\n```\n\nand import it into the file where you want to use it.\n\n```js\nimport '@amedia/brick-input';\n```\n\nUse it in your markup:  \n**Note:**  \n`type` is a required attribute because it's the only way to know what type of input field to render. If you don't provide it, the component will render a `text` input field by default.\n\nIt is highly reccomended to use the `data-label-text` attribute to provide a label with a `for` attribute for the input field. This will make it accessible to screen readers.\n\nIf you don't want the label to be visible, you can set the attribute `data-label-hidden`. This will hide the label visually, but still make it accessible to screen readers.\n\n```html\n<brick-input-v1\n  data-id=\"firstname\"\n  data-label-text=\"Firstname\"\n  data-label-hidden=\"true\"\n  data-required=\"true\"\n  data-type=\"text\"\n></brick-input-v1>\n```\n\n**Note:** Se available attributes you can pass into the component (varies from type to type) in the table below 👇\n\n<br />\n\n## Attributes overview for brick-input\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-input-v1\n  data-accept=\".jpg, .png\"\n  data-alt=\"My input image\"\n  data-autocomplete=\"on\"\n  data-autofocus=\"true\"\n  data-checked=\"true\"\n  data-disabled=\"false\"\n  data-errortext=\"This is an error\"\n  data-helptext=\"This is help text\"\n  data-id=\"my-input\"\n  data-label-hidden=\"false\"\n  data-label-text=\"My Input Label\"\n  data-max=\"100\"\n  data-maxlength=\"50\"\n  data-min=\"0\"\n  data-minlength=\"10\"\n  data-multiple=\"false\"\n  data-name=\"myInputName\"\n  data-optionaltext=\"optional\"\n  data-pattern=\"[A-Za-z]+\"\n  data-placeholder=\"Enter a value here\"\n  data-readonly=\"false\"\n  data-required=\"true\"\n  data-size=\"20\"\n  data-spellcheck=\"true\"\n  data-src=\"https://via.placeholder.com/150\"\n  data-step=\"5\"\n  data-type=\"text\"\n  data-value=\"Initial value\"\n>\n</brick-input-v1>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-input\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n"
+  },
+  {
+    "name": "brick-mcp",
+    "version": "0.0.1",
+    "selector": "brick-mcp-v0",
+    "description": "This is a MCP server for Brick"
+  },
+  {
+    "name": "brick-nifs",
+    "version": "0.0.7",
+    "selector": "brick-nifs-v0",
+    "description": "brick-nifs component",
+    "mdx": "import { Meta, Controls, Canvas } from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-nifs.stories';\n\n<Meta of={BrickStories} />\n\n# brick-nifs\n\nInformation about brick-nifs, and how to use it goes here.\n\n<Controls />\n\n<Canvas of={BrickStories.Main} />\n"
+  },
+  {
+    "name": "brick-pill",
+    "version": "9.0.1",
+    "selector": "brick-pill-v9",
+    "mdx": "import {\n  Meta,\n  Story,\n  Subtitle,\n  Controls,\n  Source,\n  Markdown,\n  Canvas,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-pill.stories';\n\n<Meta of={BrickStories} />\n\n# brick-pill & brick-pillbox\n\n`brick-pill` can be used to display meta information, or a small piece of text information. They are read-only status indicators or labels, and are not interactive. It can hold text or text and icon, and be displayed with and without background color.\n\n`brick-pillbox` is a wrapper container for multiple pills.\n[Link to `brick-pillbox` documentation](?path=/docs/brick-pillbox--documentation)\n\n<Canvas of={BrickStories.Versions} />\n\n## Purpose\n\nUsed for example to decorate or embellish a frontpage article teaser. Adding small details about the\narticle the teaser links to.\nCan also be used elsewhere where such garnish is needed.\n\n## Accessibility\n\nColor contrasts adhere to the WCAG 2.1 guidelines.  \nIcons in brick-pill are decorative, so we hide the icon from screenreaders.\n\n## Usage\n\n`brick-pill` can be used standalone, but you might wrap `brick-pill` with `brick-pillbox`.\nImport `brick-pill` and `brick-pillbox` in the file you render your markup:\n\nFirst you need to install the package in your project.\n\n<Source\n  language=\"node\"\n  code={`\n    npm install @amedia/brick-pill\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 { renderBrickPill, renderBrickPillBox } from '@amedia/brick-pill/template';\n`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`\n    \n    const pills = renderBrickPill({\n      filled: true,\n      version: 'plus'\n    })\n    const wrapperMarkup = renderBrickPillBox({\n      filled: true\n    }, pills)\n`}\n/>\n\n### Client side\n\nIf the markup has been rendered serverside, the markup will not be recreated, but i.e eventlisteners will happen client side.\n\nInclude the client side class from the asset server with a script tag, or use import.\n\n#### Script tag\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-pill/v0/brick-pill.js\"\n></script>`}\n/>\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-pill';\n  `}\n/>\n\n#### Create the DOM element\n\nThere are a few ways to create brick-pill 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={`\n    <brick-pill\n    data-text=\"Siste\"\n    data-version=\"breaking\"\n    data-filled=\"true\"\n></brick-pill>\n`}\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-pill-v9');\n  el.dataset.version = 'vignette';\n  el.dataset.text = 'Brick pill is awesome';\n  el.dataset.filled = 'true';\n  `}\n/>\n\n### Using Svelte?\n\nTake a look at this REPL: https://svelte.dev/repl/b124e26657b944908566c8c21f985415\n\n## Attributes and properties for brick-pill\n\n`brick-pill` exists in different [versions](?path=/story/brick-pill--versions), and [skins](?path=/story/brick-pill--black-filled).\n\nDataset attributes get camel cased as properties.\nFor example the attribute `data-text` is equivalent `dataset.text` on an element, and `dataText` as property.\n\n#### Note\n\nAll dataset attributes in html are in the format of <code>data-example-attribute=\"example\"</code>, but properties\nis camel cased, like <code>dataExampleAttrbute</code>. Se mapping to attributes in the \"Default\" column below.\n\n<Controls of={BrickStories.Versions} />\n\n### dataVersion: countdown\n\nTimestamp should always be a Epoch Unix Timestamp.\nBoth data-version data-countdown-date need to be present in order to render the component.\nIf adding the parameter \"data-countdown-toggle-text\", another pill will take its place when the countdown has ended. If you wish another version than \"vignette\", send in the version parameter parameter.\n\nNote that when using the countdown version, the inner markup (icon and clock) will always be rendered client-side.\n\n<Source\n  language=\"javascript\"\n  code={`const timestamp = new Date().getTime()\n  //or \nconst timestamp = +new Date();\n  `}\n/>\n\n<Source\n  language=\"html\"\n  code={`<brick-pill \n    data-version=\"countdown\" \n    data-countdown-date=\"1676460023618\" \n    data-countdown-toggle-text=\"Direkte\" \n    data-countdown-toggle-version=\"breaking\"></brick-pill>\n  `}\n/>\n\n### dataVersion: opinion\n\nIf dataFilled is true, css variabels are used for background and text colors.\n\n<Source\n  language=\"css\"\n  code={`\n--opinion-background-color;\n--opinion-color-text;\n  `}\n/>\n\n### Use with Pillbox\n\n<Source\n  language=\"html\"\n  code={`\n    <brick-pillbox data-filled=\"true\"><brick-pill\n    data-text=\"Siste\"\n    data-version=\"breaking\"\n    data-filled=\"true\"\n></brick-pill>\n</brick-pillbox>\n`}\n/>\n\nWhen the parent is `brick-pillbox`, it affects styling of the pill.\n\n- removes single pill border radius\n- truncates the text on the last pill\n- adds divider between pills eligble for dividers\n\n## Styling and CSS Properties\n\n🤝 `brick-pill` is styled using CSS properties.\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.\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-pill-color-bg</code>\n      </td>\n      <td>This variable controls the background color of the filled pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-fg</code>\n      </td>\n      <td>This variable controls the text color of the pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-breakingBg</code>\n      </td>\n      <td>\n        This variable controls the background color of the filled breaking pill\n      </td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-breakingFg</code>\n      </td>\n      <td>This variable controls the text color of the breaking pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg</code>\n      </td>\n      <td>\n        Set the url to an svg, scoped to pill with version \"icon\". Ex\n        :--b-pill-svg:\n        url('https://r.acdn.no/local/v3/publications/www.ao.no/gfx/square.svg')\n      </td>\n      <td>\n        <code></code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg-width</code>\n      </td>\n      <td>This variable controls the width of the svg.</td>\n      <td>\n        <code>11px</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg-height</code>\n      </td>\n      <td>This variable controls the height of the svg.</td>\n      <td>\n        <code>11px</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n**_For local development with Storybook, please see the Brick [documentation](https://brick.api.no)._**\n\n<br />\n\n## Dependencies\n\nAs part of the Brick design system, the brick-pill is dependent the following:\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- brick-icon: [@amedia/brick-icons](https://www.npmjs.com/package/@amedia/brick-icons)\n\n## Design\n\nWhen styling anything related to Brick, be sure to use the correct tokens documented in Figma, and the theme class will make sure the correct values are set.\n\nDesign with tokens can be found in Figma here:  \nPill: https://www.figma.com/file/FC8ydpRXVG0TDJh6FBDLpt/Components?node-id=896%3A20191&t=0DnpQsgKFSnsGaDx-0  \nExample of use: https://www.figma.com/file/FC8ydpRXVG0TDJh6FBDLpt/Components?node-id=1023%3A22043&t=tnOBgNfqCz1lBphO-0\n\n## README\n\n<Markdown>{ReadMe}</Markdown>\n\n## CHANGELOG\n\n**/CHANGELOG.MD**\n[Changelog](https://github.com/amedia/brick/blob/master/packages/brick-pill/CHANGELOG.md)\n"
+  },
+  {
+    "name": "brick-player",
+    "version": "1.27.16",
+    "selector": "brick-player-v1",
+    "description": "Component for playing video and audio files",
+    "mdx": "import {\n  Meta,\n  Controls,\n  Canvas,\n  Source,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\nimport ReadMe from '../readme.md?raw';\nimport * as BrickStories from './brick-player.stories';\n\n<Meta of={BrickStories} />\n\n# brick-player\n\n## How to use this component\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-player\n  mediaid=\"flowplayer-uuid-mediaid\"\n  playerid=\"flowplayer-config-uuid\"\n/>`}\n/>\n\n## Testing ads\n\nIf you're experiencing issues with \"The Cross-Origin-Opener-Policy header has been ignored\" in\nChrome, you can try the following:\n\n1. Go to chrome://flags/#unsafely-treat-insecure-origin-as-secure\n1. Add http://imasdk.googleapis.com\n1. Set \"Insecure origins treated as secure\" to Enabled\n1. Restart Google Chrome\n\n## Attributes overview for brick-player\n\nAll html attributes are defined using regular strings. They are parsed during initialisation into instance properties with both built-in and custom types. Changes made to attributes after initialisation are reflected into properties in a reactive manner - and vice versa.\n\nIn the overview, the corresponding properties are listed in the \"Description\" column.\n\n<Controls of={BrickStories.AspectRatio169} />\n\n<Canvas of={BrickStories.AspectRatio169} />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-published",
+    "version": "3.0.0",
+    "selector": "brick-published-v3",
+    "description": "brick-published",
+    "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-published.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-published\n\n## Purpose\n\nInformation about the purpose of brick-published2, and how to use it goes here.\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<Source language=\"js\" code={'npm install @amedia/brick-published'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-published/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickPublished, } from '@amedia/brick-published/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderPublished({\n      dataTitle: 'My awesome brick title',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-published2 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-published';\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-published\n    data-title=\"My awesome brick title\"\n></brick-published>`}\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-published');\n  el.dataset.title = 'My awesome brick-title';\n  `}\n/>\n\n## Attributes overview for brick-published\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-share",
+    "version": "0.3.3",
+    "selector": "brick-share-v0",
+    "description": "brick-share 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-share.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-share\n\n## Purpose\n\nBrick-share triggers an action to share a link.\nIt will check whether the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) is supported.\nIf it is supported, it will use this to share the link, using the sharing mechanisms of the underlying operating system.\nIf it is not supported, it will display \"Kopier lenke\" or accompanying labelText and copy the provided link to the clipboard.\n\nIf no link is provided or if the url can not be parsed, it will share the address of the current page.\n\nBrick-share uses [brick-toast](https://master--60060c41f82e040021133482.chromatic.com/?path=/docs/bricks-brick-toast--documentation) to display success and error messages.\n\n<Canvas of={BrickStories.Share} />\n\n## Accessibility\n\nWhen native sharing mechanisms are triggered, all accessibility concerns are handled by the underlying operating system and are outside our control.This means that we can not control the accessibility when this is triggered.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-share'} />\n\n### Server side rendering\n\nIf possible, render the markup server-side\n\n#### Import and render from '@amedia/brick-share/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickShare } from '@amedia/brick-share/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const share = renderShare({\n      dataUrl: 'the url to be shared',\n      dataTitle: 'A company with a promising design system',\n      dataText: 'You should really check out this website',\n      dataShareLabel: 'Share link',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-share 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-share';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered server-side, 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-share\n    data-url=\"https://amedia.no\"\n></brick-share>`}\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-share');\n  el.dataset.url = 'https://amedia.no';\n  `}\n/>\n\n## Attributes overview for brick-share\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-stepper",
+    "version": "1.0.10",
+    "selector": "brick-stepper-v1",
+    "description": "brick-stepper component",
+    "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-stepper.stories';\n\n<Meta of={BrickStories} />\n\n# brick-stepper\n\n<br />\n\n## Purpose\n\nThis package exports a custom element called \"brick-stepper\" that can be used to show how many steps there are in a process, and which step the user is currently on. It can also show a label under each step, icons, reverse order of the\nsteps, and also takes accessibility into account by providing the possibility of adding an aria-label (other than the default provided). There are also texts hidden from sighted users that gives information about the state of the step they are on; \"Ferdig\" or \"Gjenstår\".\n\n<br />\n\n## How to use this component\n\nbrick-stepper can be used with both server side rendering and client side rendering.\nThe way to do this is by either:\n\n1. Using `<brick-stepper-v1>` or `createElement` for your markup (Client Side)\n2. Using the `renderBrickStepper` function to render markup (Server Side)\n\n---\n\n<br />\n\n### How to use brick-stepper - Client Side Rendering\n\n```js\nimport { BrickInput } from '@amedia/brick-stepper';\n\nconst markup = () => {\n  return `\n  <brick-stepper-v1 \n    data-steps=\"6\"\n    data-steps-current=\"2\"\n    data-steps-label=\"Steg\"\n  </brick-stepper-v1>\n  `;\n};\n```\n\n#### Now let's break it down.\n\n<br />\n\n#### 1. First you need to install brick-stepper as a dependency:\n\n```bash\nnpm install @amedia/brick-stepper\n```\n\nand import it into the file where you want to use it.\n\n```js\nimport { BrickStepper } from '@amedia/brick-stepper';\n```\n\nUse it in your markup:\n\n```html\n<brick-stepper-v1 data-steps=\"6\" data-steps-current=\"2\"></brick-stepper-v1>\n```\n\nor using createElement:\n\n```js\nconst stepper = document.createElement('brick-stepper');\nstepper.setAttribute('data-steps', '6');\nstepper.setAttribute('data-steps-current', '2');\n```\n\n### How to use brick-stepper - Server Side Rendering\n\n```js\nimport { renderBrickStepper } from '@amedia/brick-stepper/template';\n\nconst markup = () => {\n  return renderBrickStepper({\n    dataSteps: '6',\n    dataStepsCurrent: '2',\n    dataStepsLabel: 'Steg',\n  });\n};\n```\n\n**Note:** Se available attributes you can pass into the component in the table below 👇\n\n<br />\n\n## Attributes overview for brick-stepper\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-stepper-v1\n  data-steps=\"6\"\n  data-steps-current=\"2\"\n  data-steps-order=\"desc\"\n  data-steps-aria-label=\"Dager igjen av abonnementet\"\n  data-steps-label=\"Dag\"\n  data-steps-completed=\"2\"\n  data-steps-icon-lock=\"true\"\n  data-steps-icon-check=\"true\"\n>\n</brick-stepper-v1>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-stepper\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n"
+  },
+  {
+    "name": "brick-tab",
+    "version": "0.1.7",
+    "selector": "brick-tab-v0",
+    "description": "brick-tab component",
+    "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\nimport * as BrickStories from './brick-tab.stories';\nimport ReadMe from '../README.md?raw';\nimport { BrickStyle } from '../../../stories/brickStyle.js';\n\n<brick-style></brick-style>\n\n<Meta of={BrickStories} />\n\n# brick-tab\n\n## Purpose\n\nThe interactive tab button for use within the `brick-tabs` component.\n\n<div class=\"note\">\n  <p>\n    Do not use this component on its own. It must be used within\n    `brick-tablist`,`brick-tabpanel` and `brick-tabs`.\n  </p>\n</div>\n\n<Canvas of={BrickStories.Tab} sourceState=\"shown\" />\n\n## Accessibility\n\nSee `brick-tabs` for accessibility information.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-tab'} />\n\n### Server side rendering\n\nRender the markup serverside for best performance\n\n#### Import and render from '@amedia/brick-tab/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTab } from '@amedia/brick-tab/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderBrickTab({\n      dataLabel: 'My awesome tab',\n      dataButtonId: '1234567890',\n      dataPanelId: '0987654321',\n      dataIconId: 'arrow-left,\n      dataAvatarUrls: \"https://example.com/image1.jpg,https://example.com/image2.jpg\",\n    })\n`}\n/>\n\n### Client side\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\nUsing template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-tab\n    data-label=\"My awesome tab\"\n></brick-tab>`}\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-tab');\n  el.dataset.label = 'My awesome tab';\n  `}\n/>\n\n## Attributes overview for brick-tab\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-tabs",
+    "version": "0.1.8",
+    "selector": "brick-tabs-v0",
+    "description": "brick-tabs component handling tablist, tabs and tabpanel",
+    "category": "Navigation",
+    "tags": [
+      "navigation"
+    ],
+    "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-tabs.stories';\n\nimport ReadMe from '../README.md?raw';\nimport { BrickStyle } from '../../../stories/brickStyle.js';\n\n<brick-style></brick-style>\n\n<Meta of={BrickStories} />\n\n# brick-tabs\n\n## Purpose\n\nThe `brick-tabs` component is used to handle a tabbed interface, allowing users to switch between different views or sections of content within the same page.\n\n`brick-tabs` must include the following elements:\n\n- `brick-tablist` : the container for the tabs\n- `brick-tab`: the interactive tab button users click to switch between different views\n- `brick-tabpanel`: the content revealed when a tab is selected\n\n<div class=\"note\">\n  <p>\n    Do not use this component on its own. It must be used in conjunction with\n    `brick-tab`, `brick-tablist` and `brick-tabpanel`.\n  </p>\n</div>\n\n<Canvas of={BrickStories.Tabs} sourceState=\"shown\" />\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 `brick-tablist` element is given a `role=\"tablist\"`, informing assistive technologies that this element is a container for a set of tabs. [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)\n     The tablist role in ARIA is used to define a container element that holds a set of interactive tabs.\n   - Each tab is given a `role=\"tab\"` and is associated with its corresponding tab panel using `aria-controls`. [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role)\n   - The tab panels are given a `role=\"tabpanel\"` and are associated with their corresponding tabs using `aria-labelledby`. [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role)\n   - The selected tab is given `aria-selected=\"true\"` and the deselected tabs are given `aria-selected=\"false\"`.\n\n2. **Keyboard Accessibility:**\n\n   - Users can navigate between tabs using the arrow keys, which will display the corresponding tab panel.\n   - If the tab panel contains interactive elements, users can navigate within the tab panel using the tab key.\n\n3. **Focus Management:**\n\n   - When a tab is selected, focus is moved to the corresponding tab panel.\n   - Focus is managed to ensure a logical order and to maintain context for keyboard and screen reader 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-tabs'} />\n\n### Server side rendering\n\nRender the markup serverside for best performance\n\n#### Import and render from '@amedia/brick-tabs/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTabs } from '@amedia/brick-tabs/template';`}\n/>\n\nExample of using `renderBrickTabs` with two tabs and two tab panels. Pass the innermarkup as children.\n\n<Source\n  language=\"javascript\"\n  code={`const tabs = 'renderBrickTabs({\n      dataAriaLabel: 'Siste nyheter',\n      children:\" \n        <brick-tablist>\n          'renderBrickTab({.. dataPanelId:'tab1-panel' })'\n          'renderBrickTab({.. dataPanelId:'tab2-panel' })'\n        </brick-tablist>\n        <brick-tabpanel id=\"tab1-panel\">Tab 1 content</brick-tabpanel>\n        <brick-tabpanel id=\"tab2-panel\">Tab 2 content</brick-tabpanel>\"\n    })`}\n/>\n\n### Client side\n\nNB! Make sure to include `brick-tabs` 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-tabs';\n  `}\n/>\n\n#### Create the DOM element\n\nThere are two options creating markup client side.\n\nExample: Template literals\n\n<Source\n  language=\"html\"\n  code={`<brick-tabs\n    data-aria-label=\"Siste nyheter\",\n>\n <brick-tablist>\n   <brick-tab data-label=\"Tab 1\" data-panel-id=\"tab1-panel\"></brick-tab>\n   <brick-tab data-label=\"Tab 2\" data-panel-id=\"tab2-panel\"></brick-tab>\n </brick-tablist>\n <brick-tabpanel data-panel-id=\"tab1-panel\">Tab 1 content</brick-tabpanel>\n <brick-tabpanel data-panel-id=\"tab2-panel\">Tab 2 content</brick-tabpanel>\n</brick-tabs>`}\n/>\n\nExample: Using javascript  \nCreating the elements using javascript, setting dataset properties and creating the correct html structure.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-tabs');\n  el.dataset.ariaLabel = 'Siste nyheter';\n  const tablist = document.createElement('brick-tablist');\n  const tab1 = document.createElement('brick-tab');\n  tab1.dataset.label = 'Tab 1';\n  tab1.dataset.panelId = 'tab1-panel';\n  etc..\n  `}\n/>\n\n## Attributes/properties for brick-tabs\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n## CSS Properties\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-tablist-wrap</code>\n      </td>\n      <td>\n        <code>wrap</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tablist-grow</code>\n      </td>\n      <td>\n        <code>1</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Events\n\n## Methods\n\nRegister a callback for when the selected panel changes\n\n<Source\n  language=\"js\"\n  code={`tabs.onPanelChange((newPanelId, oldPanelId) => {\n  console.log('Selected panel changed from <oldPanelId> to <newPanelId>');\n});`}\n/>\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-tag",
+    "version": "0.0.7",
+    "selector": "brick-tag-v0",
+    "description": "brick-tag component",
+    "mdx": "import { Meta, Canvas, Source, Controls } from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-tag-link.stories';\n\n<Meta of={BrickStories} />\n\n# brick-tag\n\nbrick-tag is used to label information related to an item.\n\nBrick-tag is available in link variant - The tag can be used to navigate to a\nspecific url.\n\n{' '}\n\n<br />\n\n## Versions\n\n<br />\n\n### Default\n\nThe default form of a tag. Used for basic links in static texts.\n\n<Canvas of={BrickStories.Simple} />\n\n### Prominent\n\nProminent tags are larger and more visible. Used for important links or calls to action.\n\n<Canvas of={BrickStories.Prominent} />\n\n### Capsule\n\nCapsule tags are smaller and more subtle. Used for less important links or calls to action.\n\n<Canvas of={BrickStories.Capsule} />\n\n## Accessibility\n\nIf a you need to provide a more detailed description of the tag, use the `data-aria-label` attribute.\nIf you choose to override sizes or colors of the tag, make sure to validate that your overrides adhere to the **WCAG 2.1 AA** guidelines.\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-tag'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside. This is recommended for performance reasons.\n\n##### Import and render from '@amedia/brick-tag/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTag } from '@amedia/brick-tag/template.js';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderBrickTag({\n      dataText: 'Ullhunder',\n      dataLink: 'https://ba.no/tag/ullhunder',\n      dataVersion: 'simple',\n      dataSize: 'medium',\n      dataAriaLabel: 'Vis artikler om Ullhunder',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-tag 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-tag';\n  `}\n/>\n\n#### Create the DOM element\n\nThere are two options for 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-tag-v0\n    data-text=\"Ullhunder\"\n    data-link=\"https://ba.no/tag/ullhunder\"\n    data-version=\"simple\"\n    data-size=\"medium\"\n    data-aria-label=\"Vis artikler om Ullhunder\"\n></brick-tag-v0>`}\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-tag-v0');\n  el.dataset.text = 'Ullhunder';\n  el.dataset.link = 'https://ba.no/tag/ullhunder';\n  el.dataset.version = 'simple';\n  el.dataset.size = 'medium';\n  el.dataset.ariaLabel = 'Vis artikler om Ullhunder';\n  `}\n/>\n\n## Attributes\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-tag 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.\nSometimes the default styling of the tag doesn't fit your needs. You can override the default styling using the following CSS properties. Make sure you scope the overrides to the tag.\n\n> **Note:** It is your responsibilty to validate that your overrides adhere to the **WCAG 2.1 AA** guidelines.\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-tag-link-color-fg</code>\n      </td>\n      <td>Controls the color of the tag</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleFg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-hover-fg</code>\n      </td>\n      <td>Controls the color of the tag on hover</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleFg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-font-size</code>\n      </td>\n      <td>Controls the font size of the tag</td>\n      <td>\n        <code>var(--brick-fontSizes-baseBodyM)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-color-bg</code>\n      </td>\n      <td>Controls the background color of the tag</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleBg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-hover-bg</code>\n      </td>\n      <td>Controls the background color of the tag on hover</td>\n      <td>\n        <code>var(--brick-colors-utilitySecondaryHoverBg)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
+  },
+  {
+    "name": "brick-teaser",
+    "version": "19.2.4",
+    "selector": "brick-teaser-v19",
+    "description": "Teaser component.",
+    "category": "Display",
+    "tags": [
+      "display"
+    ],
+    "mdx": "import { Canvas, Meta, Story, Controls } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Bricksets/brick-teaser/Documentation\" />\n\n# brick-teaser\n\n`brick-teaser` is a component that renders a preview of an article (teaser).\n\n<br />\n\n## Purpose\n\nBrick-teaser purpose is to be context independent and render responsively on any device or platform.<br/>\nA teaser is used in a variety of contexts, such as the frontpage of newspaper, an article etc.<br/>\nTherefore it should be easy to use, with possibility to use more advanced features.\n\n<br />\n\n## Quick start\n\nFirst you need to install this in your project\n\n### NPM\n\n```sh\nnpm i -S @amedia/brick-teaser\n```\n\n### Eik\n\nExample from using esbuild (borrowed from https://github.com/amedia/mozart/blob/master/esbuild.config.js )\n\n```sh\nimport * as eik from '@eik/esbuild-plugin';\n\n\nUsed to replace local node_modules with web imports\nawait eik.load({\n  maps: [\n    {\n      imports: {\n        '@amedia/brick-teaser':\n          'https://assets.acdn.no/pkg/@amedia/brick-teaser/[alias]/[path]',\n      },\n    },\n  ],\n});\n\n```\n\n```sh\nplugins: [\n    ...\n    eik.plugin(),\n    ..]\n```\n\n## Usage\n\nbrick-teaser can be used with both server side and client side rendering:\n\n**NOTE! Video preview animation client side**\n\nDue to WCAG rules for browser initated animation, we use a custom element that takes care of a maximum visibility of the video preview for 5 seconds.\n\nTo enable animation, the javascript file for `video-preview` must be included client-side (in Optimus for example), from Eik: https://assets.acdn.no/pkg/@amedia/brick-teaser/v10/video-preview.js.\n\n<br />\n\n**Using custom element brick-teaser. (Client Side)**\n\nBrick-teaser supports multiple ways of setting data client side.\nIt has support for both static and dynamic data.\n\n**_Static data_**\n\nStatic data is sent in as an object to brick-teaser.\n\nThe preferred way is to setting it directly as a property:\n\n```js\nconst brickTeaser: BrickTeaser = document.createElement(\n            'brick-teaser-v19'\n          ) as BrickTeaser;\nbrickTeaser.data = mapToTeaser(data);\n```\n\nIf setting data as a property is difficult to achieve it is possible set it with the\ncreateTeaserDataTag function.\nThis creates a script tag where the data is transformed to json.\n\n```js\nimport { createTeaserDataTag } from '@amedia/brick-teaser';\n\n<brick-teaser-v19\n  data-teaser=\"${data}\"\n  data-version=\"default\"\n  data-theme=\"${theme}\"\n>\n  ${createTeaserDataTag(data)}\n</brick-teaser-v19>;\n```\n\n**_Dynamic data_**\n\nDynamic data is sent in as an attribute prefixed with data-\\*.\n\nHeres an example with the breaking-news text.\nWhen this attributes changes the breaking news text is rerendered.\n\n```js\nimport { createTeaserDataTag } from '@amedia/brick-teaser';\n\n<brick-teaser-v19\n  data-breaking-news-text\n...\n/>\n\n```\n\n**Using the `renderBrickTeaser` function (Server Side)**\n\n```\nimport { renderTeaser } from '@amedia/brick-teaser'\nconst teaserData;\nconst options;\n\nrenderTeaser(\n  teaserData\n  options\n)\n\n```\n\n## Parameter overview for brick-teaser\n\nThese are the parameters available on brick-teaser.\n\n<table>\n  <tr>\n    <th>Name</th>\n    <th>Options</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>data</td>\n    <td>TeaserApi</td>\n    <td>This is the main teaser data</td>\n  </tr>\n  <tr>\n    <td>options</td>\n    <td>RenderOptions</td>\n    <td>Attributes supporting corner cases</td>\n  </tr>\n  <tr>\n    <td>theme</td>\n    <td>Design</td>\n    <td>Should be one of the themes defined in brick tokens</td>\n  </tr>\n  <tr>\n    <td>size</td>\n    <td>string</td>\n    <td>For client side, can also be set as part of data</td>\n  </tr>\n  <tr>\n    <td>version</td>\n    <td>string</td>\n    <td>For client side, can also be set as part of data</td>\n  </tr>\n</table>\n\n**TeaserApi (mandatory attributes)**\n\n```\ninterface TeaserApi {\n  id: string;\n  url: string;\n  type: string;\n}\n```\n\nSee complete interface: [TeaserApi](https://github.com/amedia/brick/blob/master/packages/brick-teaser/src/api/teaserApi.ts)\n\n**RenderOptions**\n\n```\ninterface RenderOptions {\n  useAutolayout?: boolean; //Set when used by Scorponok in order work with the autolayout stack.\n  removeLogScope?: boolean; //Removes adp log itemscope and all related data. If meta is sent in, these will also be removed.\n}\n```\n\n**Design**\n\n```\ntype Design =\n  | 'nettavisen'\n  | 'alt'\n  | 'alfa'\n  | 'bravo'\n  | 'charlie';\n```\n\n### ADP logging and meta tags\n\nbrick-teaser will render all the mandatory meta tags for registration by ADP, including meta tags for a/b testing:\n\n- itemtype\n- contentModel\n- identifier\n- adpType\n\nFor a/b test:\n\n- testid\n- variant\n\nIt is possible to send in additional meta tags - see meta tag section.\n\nbrick-teaser renders meta tags of your choice. The `meta` property acceptis a list of objects containing `itemprop` and `content`\n\n```\n  const brickTeaserMarkup = renderTeaser({\n    ...props,\n    meta: [\n      {\n        itemprop: 'productFeature',\n        content: 'ghost-alt',\n      },\n    ],\n  })\n```\n\nThis will render:\n\n```\n<meta itemprop=\"productFeature\" content=\"ghost-alt\" />\n```\n\nTo prevent any log data to render:\n\n```\n<brick-teaser-v19 renderoptions-remove-log-scope=\"true\">\n```\n\nor\n\n```\nconst brickTeaserMarkup = renderTeaser(teaserData, { removeLogScope: true })\n\n```\n\n### useAutolayout flag\n\nIn a frontpage context, brick-teaser is currently prerendered/rendered through multiple systems (Scorponok, Optimus, Maelstrom) which we call 'autolayout'.\nIn autolayout we alter properties like the image and title sizes. We therefore need take this into account when rendering a brick-teaser.\nHence some the styles for brick-teaser with the autolayout flag will differ from the default.\nThis is described more in detail [developing with brick-teaser](https://github.com/amedia/brick/blob/master/packages/brick-teaser/README.md)\n\n## Breaking news\n\nIf `breakingNews: true` there are 2 main scenarios:\n\n### breakingNewsText\n\nIf breakingNewsText has content, i.e **Siste**.\n\n- breakingNewsPosition: 'title': Both pulse animation and word SISTE in front of the title text.\n- breakingNewsPosition: 'vignette' : brick-pill with pulse animation, and the word Siste\n- breakingNewsPosition: 'none': No pulse, but the word \"SISTE:\" in front of the title text\n\nSamme font som i pillene. Størrelse?\n\n### No breakingNewsText/undefined\n\n- breakingNewsPosition: 'title': BreakingTitle.Only pulse animation in front of the title.\n- breakingNewsPosition: 'vignette': BreakingVignette. brick-pill with pulse animation.\n\n## Developing with brick-teaser\n\nbrick-teaser is a part of the Brick design system.\nFor more info on development with brick-teaser, click [here](https://github.com/amedia/brick/blob/master/packages/brick-teaser/README.md)\n\n## Dependencies\n\nAs part of the Brick design system, the brick-teaser is dependent on six packages:\n\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- Brick Image [@amedia/brick-image](https://www.npmjs.com/package/@amedia/brick-image)\n- Brick Vignette [@amedia/brick-vignette](https://www.npmjs.com/package/@amedia/brick-vignette)\n- Brick Pill [@amedia/brick-image](https://www.npmjs.com/package/@amedia/brick-pill)\n- Brick Icon [@amedia/brick-icon](https://www.npmjs.com/package/@amedia/brick-icon)\n- Brick Countdown [@amedia/brick-countdown](https://www.npmjs.com/package/@amedia/brick-countdown)\n"
+  },
+  {
+    "name": "brick-teaser-player",
+    "version": "1.0.21",
+    "selector": "brick-teaser-player-v1",
+    "description": "brick-video-teaser 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-teaser-player.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-teaser-player\n\n## Purpose\n\nInformation about the purpose of brick-video-teaser, and how to use it goes here.\n\n{' '}\n\n<Canvas of={BrickStories.Ratios} />\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-video-teaser'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-teaser-player/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTeaserPlayer, } from '@amedia/brick-teaser-player/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const myPlayer = renderBrickTeaserPlayer({\n  TODO: Add props here\n      dataTitle: 'My awesome brick title',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-teaser-player 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-teaser-player';\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-teaser-player-v1\n    data-title=\"My awesome brick title\"\n></brick-teaser-player-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-teaser-player');\n  el.dataset.title = 'My awesome brick-title';\n  `}\n/>\n\n## Attributes overview for brick-teaser-player\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 Styling is 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-teaser-player-radii</code>\n      </td>\n      <td>Controls the radii</td>\n      <td>\n        <code>var(--brick-radii-teaser)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-teaser-player-bg</code>\n      </td>\n      <td>\n        Overrides the background color. If not set default value is used in that\n        order\n      </td>\n      <td>\n        <code>\n          var(--b-teaser-color-bg, var(--brick-colors-supportiveNoneBg))\n        </code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-teaser-player-fg</code>\n      </td>\n      <td>Overrides the front color</td>\n      <td>\n        <code>\n          var(--b-teaser-color-fg, var(--brick-colors-supportiveNoneFg))\n        </code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Markdown>{ReadMe}</Markdown>\n\nHvis tittelen er mer enn 3 linjer så ellipsis\n"
+  },
+  {
+    "name": "brick-teaser-reels",
+    "version": "0.2.28",
+    "selector": "brick-teaser-reels-v0",
+    "description": "brick-teaser-reels 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-teaser-reels.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-teaser-reels\n\n## Purpose\n\nThe teaser is a component for displaying a video reel teaser. Its intended use is in a carousel (brick-carousel).\nFor a reel video the usual aspect ratio is 9/16 (default value, but can be overridden). The teaser is a clickable element that navigates to the video reel.\nIt takes an image url, a video url(s), a title, aspect-ratio and a url as input.\n\n<Canvas of={BrickStories.VideoAndImage} />\n\n## Accessibility\n\nColor contrast is secured through the use of tokens with tested values. The image supports `alt` text, the video-clip is hidden from screen reader users using `aria-hidden`. The anchor uses `aria-labelledby` to reference the title and has an added description to clarify the type of content it teases.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-teaser-reels'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-teaser-reels/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTeaserReels, } from '@amedia/brick-teaser-reels/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderTeaserReels({\n      dataImageSrc: './image.jpg',\n      dataVideoSrc: './videoSmall.mp4,./videoLarge.mp4',\n      dataTitle: 'My awesome title',\n      dataUrl: '/reels/story?acpId=aa,bb,cc,dd&selected=bb&&signature=xxx',\n      dataAspectRatio: '9/16',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-teaser-reels 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-teaser-reels';\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-teaser-reels\n    dataImageSrc=\"./image.jpg\"\n    dataVideoSrc=\"./videoSmall.mp4,./videoLarge.mp4\"\n    dataTitle=\"My awesome title\"\n    dataUrl=\"/reels/story?acpId=aa,bb,cc,dd&selected=bb&&signature=xxx\"\n    dataAspectRatio=\"9/16\"\n></brick-teaser-reels>`}\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-teaser-reels');\n  el.dataset.title = 'My awesome title';\n  el.dataset.imgUrl = './image.jpg';\n  el.dataset.videoUrl = './videoSmall.mp4,./videoLarge.mp4';\n  el.dataset.href = '/reels/story?acpId=aa,bb,cc,dd&selected=bb&&signature=xxx';\n  el.dataset.aspectRatio = '9/16';\n  `}\n/>\n\n## Attributes overview for brick-teaser-reels\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-teaser-reels title is styled using CSS properties that must exist on the page.\n\nIt is possible to use CSS custom properties to override the default styles of the background color and text color.\nHere we show how to override the default colors with another color token:\n\n```css\n--b-reels-color-fg: var(--brick-colors-baseSubtleFg);\n--b-reels-color-bg: var(--brick-colors-baseSubtleBg);\n```\n\n<div className=\"note\">\n  <span>**Note**</span>\n  It is your responsibilty to validate that your override colors adhere to the\n  **WCAG 2.1 AA** guidelines. Check here to be sure:\n  [https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)\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-reels-color-bg</code>\n      </td>\n      <td>Controls the background color of the title</td>\n      <td>\n        <code>var(--brick-colors-supportiveReelMarkerBg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-reels-color-fg</code>\n      </td>\n      <td>Controls the text color of the title</td>\n      <td>\n        <code>var(--brick-colors-supportiveReelMarkerFg)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<br />\n<br />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-template",
+    "version": "1.3.1",
+    "selector": "brick-template-v1",
+    "description": "Web Component template for @amedia/brick",
+    "category": "Utilities",
+    "tags": [
+      "utilities"
+    ],
+    "mdx": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Getting started/Development/brick-template/Documentation\" />\n\n<brick-style></brick-style>\n\n# brick-template (internal)\n\n`brick-template` is an internal package handling some of the boilerplate when building brick-\\* web components.\n\n```bash\nbrick-template:\n  <private>\n  - /src/lib\n     # Exporting a web component, \"BrickElement\". Handling some of the boilerplate for webcomponents.\n     |- template.ts\n     # Exporting a decorator used to declare the custom element.\n     |_ utils.ts\n  # Exporting BrickElement class, defineCustomElement-decorator mm.\n  - src/index.ts\n```\n\n`brick-template` can be used as base class for web components, both vanillajs and Svelte. It only implements a standard Web Component.\n\n## Usage\n\nCreate a folder under _/packages/_ named _brick-helloworld_ with following structure:\n\n```bash\npackages/brick-helloworld:\n- /src\n  # The web component class\n  |- brickHelloworld.ts\n  # exporting web component from brickHelloworld.ts and render function from template.ts\n  |- index.ts\n  # the markup and render function, also export your type interface\n  |- template.ts\n  # styling, exporting all css classes to be used\n  |- styles.js\n- /stories\n  # Stories need to be named consistently to show up in the correct spot in the menu\n  # The stories you need to demonstrate your component, with title `Bricks/brick-brickhelloworld`.\n  |- brickHelloworld.stories.js\n  # The mdx containing rich documentation of your comoponent, with title \"Bricks/brick-helloworld/Documentation\"\n  |- brickHelloworld.mdx\n- /tests\n  # Test files\n  |- template.test.ts (for testing your render function)\n\n# This build file is used when building each package\n- build.js\n# Changelog and Readme\n- CHANGELOG.md\n- README.md\n```\n\nLets look at each files:\n\n### index.ts\n\n```bash\nexport { renderBrickHelloworld } from './template';\nexport { BrickHelloworld } from './brickHelloworld';\n\n```\n\n### brickHelloworld.ts\n\n```bash\n# packages/brick-myawesomecomponent/src/brickMyAwesomeComponent.ts\n\nimport { BrickElement, defineCustomElement } from \"@amedia/brick-template\";\n\nimport { brickHelloworldtemplate } from './template';\nimport type { BrickHelloworldData } from './types.js';\n\n\n@defineCustomElement({\nselector: \"brick-helloworld\",\n})\n\nclass BrickHelloworld extends BrickElement implements BrickHelloworldData {\n\n  dataText?:string;\n  dataVersion?:string;\n\n  constructor(data: BrickHelloworldData) {\n    super();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n  }\n\n  # This will be called when any children of the component is rendered.\n  # Update the attribute 'children-rendered' and use the lifecycle methods attributeChangedCallback to respond to it.\n  childrenRenderedCallback() {\n    this.setAttribute('children-rendered', 'true');\n  }\n\n  # THe HTML getter is then used by brick-template to cloning contents from a <template> element. This is more performant than using innerHTML because it avoids additional HTML parse costs.\n  get HTML() {\n    return brickHelloworldtemplate({\n      dataText: this.dataText || '',\n      dataVersion: this.dataVersion || '',\n    });\n  }\n\n  # Attributes should almost always have mirrored properties. However, we don't just use the observedAttributes array as the source for this integration, because you may often want to write custom getter/setter functions for some attributes\n  # This is required to make sure that the attribute is updated when the property is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  static get mirroredProps() {\n    return ['data-text', 'data-version'];\n  }\n\n  # The observedAttributes array is used to tell the browser which attributes to watch for changes. This is required to make sure that the property is updated when the attribute is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  static get observedAttributes() {\n    return ['children-rendered'];\n  }\n\n  # The attributeChangedCallback is called when an attribute is changed. This is required to make sure that the property is updated when the attribute is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if(oldValue === newValue) return;\n    if (name === 'children-rendered' && newValue === 'true') {\n      this.processTemplates();\n    }\n  }\n  # This is called by the attributeChangedCallback when the attribute 'children-rendered' is updated to true.\n  processTemplates() {\n    console.log('Children has rendered: ${this}');\n    # ...\n  }\n}\n\n```\n\n### src/styles.js\n\n```bash\nimport { css } from '@amedia/brick-tokens';\nexport const titleClass = css({\n    color: '$supportiveBlackText'\n    backgroundColor: '$supportiveBlackBg'\n});\n\n```\n\n### src/template.ts\n\n```bash\n\nimport { titleClass } from './styles.js';\n\nimport type { BrickHelloworldData } from './types.js';\n\nexport const brickHelloworldTemplate=(data:BrickHelloworldData) => {\n  const {title, isRendered} = data;\n  const markup = `<h1 class=\"${titleClass}\">Brick is Awesome! ${title}</h1>`;\n # If isRendered ==='true' it means the markup is rendered serverside, so we do not want to update the DOM client side.\n  if(isRendered){\n     return `<brick-helloworld data-title=\"${title}\" is-rendered >${markup}</brick-helloworld>`;\n  }\n  # if not, we return the markup that will be attached to the DOM client side, by our web component classs\n  return `${markup}`\n}\n\nexport const renderBrickHelloworld = (dataset: BrickHelloworldData) => {\n  const { title isRendered = true } = data;\n  const { dataVersion, dataText, isRendered = true } = dataset;\n  return `${brickHelloworldtemplate({\n    dataVersion,\n    dataText,\n    isRendered,\n  })}`;\n};\n\n```\n\n### types.ts\n\n```bash\nimport type { BrickHelloworld } from './brickHelloworld.js';\n\nexport interface BrickHelloworldData {\n  dataText?: string | undefined;\n  dataVersion?: string | undefined;\n  isRendered?: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'brick-helloworld': BrickHelloworld;\n  }\n}\n\n```\n\n### build.js\n\n```bash\nimport { build } from '../../esbuild.config.js';\n\nbuild({\n  entryPoints: ['src/index.ts'],\n});\n\n```\n\n### package.json\n\nYour package needs a package.json where your dependencies and dev dependencies are listed, and also some scripts:\n\n```bash\n# package.json\n\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.mjs\",\n  \"type\": \"module\",\n  \"browser\": {\n    \"./dist/index.mjs\": \"./dist/eik/brick-helloworld.js\"\n  },\n  \"exports\": {\n    \".\": {\n      \"import\": \"./dist/index.mjs\",\n      \"default\": \"./dist/eik.js\"\n    },\n    \"./template\": {\n      \"import\": \"./template/index.mjs\",\n      \"default\": \"./template/index.mjs\"\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"template\"\n  ],\n\n \"scripts\": {\n    \"build\": \"node build.js\",\n    \"build:dev\": \"NODE_ENV=development node build.js\",\n    \"clean\": \"rimraf dist && echo 🧹 Cleaned \\\\'dist\\\\'\"\n  },\n\n   \"eik\": {\n    \"server\": \"https://assets.acdn.no\",\n    \"files\": \"./dist/eik\"\n  },\n\n  # We use hard versions\n   \"dependencies\": {\n    \"@amedia/brick-tokens\": \"3.0.0\",\n    \"@amedia/brick-template\": \"1.0.6\"\n    \"...\"\n  }\n\n  # Eik config\n  \"eik\": {\n    \"server\": \"https://assets.acdn.no\",\n    \"files\": {\n      \"brick-helloworld.js\": \"./dist/eik/brick-helloworld.js\",\n      \"brick-helloworld.js.map\": \"./dist/eik/brick-helloworld.js.map\",\n      \"index.d.ts\": \"./dist/index.d.ts\",\n      \"template.js\": \"./dist/eik/template.js\"\n    }\n  },\n\n```\n\n### /stories\n\nWe use Storybook when developing locally. Write your stories to demonstrate each state of your web component.\n\n### /tests\n\nWrite unit tests for calculation. Use your stories as state mock data for your tests. Take a look at `brick-helloworld` and see how it can be done.\n"
+  },
+  {
+    "name": "brick-textarea",
+    "version": "2.0.3",
+    "selector": "brick-textarea-v2",
+    "description": "brick-textarea component",
+    "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-textarea.stories';\n\n<Meta of={BrickStories} />\n\n# brick-textarea\n\n## Purpose\n\n`brick-textarea` renders a multiline text input element. It lets users enter multiple lines of text, often used in a form.\n\nIt resizes automatically, but both size and resize options can be overwritten with CSS variables.\n\nValidation of the textarea value is done via the `pattern` attribute - if you provide it.\n\n<Canvas of={BrickStories.Textarea} />\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-textarea'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-textarea/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTextarea, } from '@amedia/brick-textarea/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const textarea = renderBrickTextarea({\n      dataLabel: 'My label text',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-textarea 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-textarea';\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-textarea-v2\n    data-label=\"This is my awesome brick-textarea\"\n></brick-textarea>`}\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-textarea-v2');\n  el.dataset.label = 'My awesome brick-textarea';\n  `}\n/>\n\n## Attributes overview for brick-textarea\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-textarea-v2\n  data-alt=\"Textarea for an obituary\"\n  data-label-text=\"Obituary\"\n  data-error-text=\"This is an error\"\n  data-help-text=\"Descriptive help\"\n  data-id=\"my-textarea\"\n  data-label-hidden=\"false\"\n  data-name=\"MyTextAreaName\"\n  data-max-length=\"1700\"\n  data-min-length=\"10\"\n  data-placeholder=\"Write your message here\"\n  data-required=\"true\"\n  data-optional-text=\"optional\"\n  data-pattern=\"[A-Za-z]\"\n  data-autofocus=\"true\"\n  data-value=\"Initial value\"\n>\n</brick-textarea-v2>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-input\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n\n## Styling and CSS Properties\n\nCSS Custom Properties can be used to customize the visual appearance.\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-textarea-height</code>\n      </td>\n      <td>\n        Use this CSS variable to set the `height` of the textarea. The textarea\n        will grow taller as the user types in more lines of text, but if height\n        is set, it will never shrink below that value.\n      </td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-textarea-width</code>\n      </td>\n      <td>\n        Use this to set the `width` CSS property of the `textarea` element.\n      </td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-textarea-resize</code>\n      </td>\n      <td>\n        Use this to set the `resize` CSS property of the `textarea` element. Use\n        this if you want the user to be able to resize the textarea manually, by\n        clicking and dragging.\n      </td>\n      <td>\n        <code>none</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"
+  },
+  {
+    "name": "brick-themes",
+    "version": "1.0.1",
+    "selector": "brick-themes-v1",
+    "description": "Brick theme names"
+  },
+  {
+    "name": "brick-toast",
+    "version": "0.1.19",
+    "selector": "brick-toast-v0",
+    "description": "brick-toast component",
+    "category": "Feedback",
+    "tags": [
+      "feedback"
+    ],
+    "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-toast.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-toast\n\n## Purpose\n\nThe brick-toast component is used to display non-intrusive notifications to users. It shows a temporary message that appears and automatically disappears after a certain period of time. Toast notifications are useful for providing feedback about the result of an action (success, error, warning) without interrupting the user's workflow.\n\n<Canvas of={BrickStories.Success} />\n\n## Accessibility\n\n- Toast notifications use `role=\"status\"` to ensure screen readers announce the content.\n- `role=\"status\"` will implicitely give the component `aria-live=\"polite\"` and `aria-atomic=\"true\"` properties which announce content changes without interrupting the current task. These two implicit properties are set explicitly - for transparency, as it might not be common knowledge what `role=\"status\"` actually does.\n- The close button includes an aria-label with instructions and the duration information\n- Focus management: The toast returns focus to the trigger element when closed\n- The toast pauses its auto-hide timer when hovered or focused, improving accessibility for users who need more time to read\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-toast'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-toast/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickToast } from '@amedia/brick-toast/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toast = renderBrickToast({\n      dataMessage: 'Successfully saved changes',\n      dataIconid: 'check-circle',\n      dataDuration: '5000'\n    })\n`}\n/>\n\n**NB!**\nYou need to include the javascript clientside for events and code running in the client.\nAnd also the css for the components in use (brick-toast, brick-icon, brick-button), for example:\n\n<Source\n  language=\"javascript\"\n  code={`<script type=\"module\" src=\"https://assets.acdn.no/pkg/@amedia/brick-toast/0.0.1/brick-toast.js\"></script>\n  \n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-toast/0.0.1/css/styles.css\"/>\n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-button/7.3.11/css/styles.css\"/>\n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-icon/2.2.6/css/styles.css\"/>\n  `}\n/>\n**Remember to replace the version with the latest version of the package.**\n\n### Client side\n\nNB!\nMake sure to also include brick-toast 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-toast';\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-toast\n    data-message=\"Successfully saved changes\"\n    data-iconid=\"check-circle\"\n    data-duration=\"5000\"\n    data-open=\"true\"\n></brick-toast>`}\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-toast');\n  el.dataset.message = 'Successfully saved changes';\n  el.dataset.iconid = 'check-circle';\n  el.dataset.duration = '5000';\n  el.dataset.open = 'true';\n  document.body.appendChild(el); // Add to the DOM to display\n  `}\n/>\n\n## Attributes overview for brick-toast\n\n### Available data attributes\n\nAll dataset attributes are synced to camelcased properties.\n\n- `data-message`: The text message to display in the toast (required)\n- `data-iconid`: The icon ID to display (e.g., 'check-circle', 'error-circle')\n- `data-status`: Set to 'error' to display the toast in error style. Other values might be supported in the future. Default is no status (undefined).\n- `data-close-btn`: Set to 'false' to hide the close button (default is visible)\n- `data-position`: Position of the toast on screen ('top-center', 'top-left', 'top-right', 'center-center', 'bottom-left', 'bottom-center', 'bottom-right'). Default is 'top-center'\n- `data-duration`: Duration in milliseconds before the toast automatically closes (default is 5000)\n- `data-open`: Controls whether the toast is visible. Set the attribute on the element to show the toast (data-open=\"true\"). Set the value to \"false\" to hide it (it will also auto hide based on the data-duration attribute which is default 5s).\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  },
+  {
+    "name": "brick-toggle",
+    "version": "3.1.6",
+    "selector": "brick-toggle-v3",
+    "description": "brick-toggle component",
+    "mdx": "import {\n  Meta,\n  Controls,\n  Canvas,\n  Source,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-toggle.stories';\n\n<Meta of={BrickStories} />\n\n# brick-toggle\n\nIt represents a boolean option and allows the user to toggle between two states, checked or unchecked.\n\n<Canvas of={BrickStories.On} />\n\n## Purpose\n\nIt should be used in forms when an \"on/off\" or \"yes/no\" input is needed.\nUse it together with text to describe the purpose of the brick-toggle, together with a value attribute representing the on/off value.\nThis value shouldn't change when the state of the brick-toggle changes. Help text can also be used to provide additional guidance.\n\n## Accessibility\n\nThe element will self apply the attributes `role=\"switch\"` and `aria-checked=\"true\"` or `aria-checked=\"false\"`, in addition to `tabindex=0`.\n\nThe role attribute helps assistive technology like a screen reader tell the user what kind of control this is.\nThe ARIA switch role is functionally identical to the checkbox role, except that instead of representing \"checked\" and \"unchecked\" states, which are fairly generic in meaning, the switch role represents the states \"on\" and \"off.\" More about the [switch role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)\n\nThe tabindex attribute opts the element into the tab order, making it keyboard focusable and operable. To learn more about these two topics, check out [What can ARIA do?](https://web.dev/semantics-aria/#what-can-aria-do) and [Using tabindex](https://web.dev/using-tabindex/).\n\nClicking on the switch with a mouse, or space bar, toggles these checked states.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source\n  language=\"js\"\n  code={`\n    npm install @amedia/brick-toggle\n  `}\n/>\n\n### Server side rendering\n\nWhen rendering the markup serverside\n\n#### Import and render from '@amedia/brick-toggle/template'\n\n<Source\n  language=\"javascript\"\n  code={`\n    import { renderBrickToggle, } from '@amedia/brick-toggle/template';\n`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`\n    \n    const toggle = renderToggle({\n      dataLabel: 'Lightbulb',\n      dataKey: 'light',\n      dataOnText: 'På',\n      dataOffText: 'Av'\n    })\n`}\n/>\n\nNB! Make sure to also include brick-toggle javascript clientside for the events occurring in the client.\n\n### Client side\n\nIf the markup has been rendered serverside, the markup will not be recreated, but i.e eventlisteners will happen client side.\nInclude the client side class from the asset server with a script tag, or use import.\n\n#### Script tag\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-toggle/<version>/brick-toggle.js\"\n></script>`}\n/>\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-toggle';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating brick-toggle 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={`\n    <brick-toggle-v3\n    data-value=\"Lightbulb\"\n    data-on-text=\"On\"\n    data-off-text=\"Off\"\n></brick-toggle-v3>\n`}\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-toggle');\n  el.dataset.value = 'Lightbulb';\n  el.dataset.onText = 'On';\n  el.dataset.offText = 'Off';\n  `}\n/>\n\n#### Using Svelte?\n\nTake a look at this REPL: https://svelte.dev/repl/2b4763c4f6cd4a089376d02c170e434d\n\n**svelte**\n\n```svelte\n<script>\n  import '@amedia/brick-toggle';\n  function myEventHandler(event) {\n    console.log(event.detail);\n  }\n</script>\n\n<brick-toggle-v3\n  checked\n  data-value=\"Bryne\"\n  data-key=\"123\"\n  on:brick-toggle:change={myEventHandler}\n></brick-toggle-v3>\n```\n\nOutput when clicked:\n\n```json\n{ \"dataKey\": \"123\", \"dataLabel\": \"Bryne\", \"checked\": \"true\" }\n```\n\nhttps://css-tricks.com/using-custom-elements-in-svelte/\n\n**You just made a toggle switch with brick-toggle** 🎉\n\n## Custom Event : `brick-toggle:change`\n\nWhen the brick-toggle state changes, it fires a custom event: `brick-toggle:change`, and by listening to that event, the consumer will get an object with details.\n\n```js\nconst brickToggle = document.querySelector('[brick-component=\"brick-toggle\"]');\nbrickToggle.addEventListener('brick-toggle:change', (e) => {\n  console.log(e.detail); // { checked: \"true\", dataLabel: 'Bryne', dataKey=\"123\" }\n});\n```\n\n## Attributes overview for brick-toggle\n\nAll dataset attributes are synced to camelcased properties.\n\nI.e the property `dataOnText` is mirroring the attribute `data-on-text`.\n\nThese are the properties and dataset attributes available on brick-toggle:\n\n<Controls />\nAll dataset attributes can be read using `dataset.onText`, or\n`getAttribute('data-on-text')`.\n\n[Using attributes and properties](https://ultimatecourses.com/blog/using-attributes-and-properties-in-custom-elements)\n\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-toggle is styled ausing custom CSS properties.\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-toggle-flex</code>\n      </td>\n      <td>\n        Controls the flex value of the label. Set it to 1 to allow it to take\n        100% width available\n      </td>\n      <td>\n        <code>0</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-toggle-order</code>\n      </td>\n      <td>\n        Controls the order of the visual toggle. Set it to 3 if you want it last\n        in the row.\n      </td>\n      <td>\n        <code>2</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Example using custom css properties\n\nThe following example has these custom properties in the css scoped to the area with the list of toggles.\n\n```\n'--b-toggle-flex': 1,\n'--b-toggle-order': 3,\n```\n\n<Canvas of={BrickStories.SampleList} />\n\n## Theming\n\nbrick-toggle comes with style and are using using brick-tokens.\n\nThe theme classname must be set higher in the DOM tree, a parant `div` or even the `body` element.\n\n<Markdown>{ReadMe}</Markdown>\n\n## References\n\n- [w3ariaswitch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch/)\n- [deque example](https://dequeuniversity.com/rules/axe/4.6/aria-toggle-field-name?application=axeAPI)\n- https://web.dev/components-howto-checkbox/\n- https://css-tricks.com/using-custom-elements-in-svelte/\n- https://blog.bitsrc.io/building-your-own-web-component-library-b4f6b419cc0b\n- https://ultimatecourses.com/blog/using-attributes-and-properties-in-custom-elements\n- https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/\n- https://javascript.works-hub.com/learn/web-components-api-lifecycle-events-and-custom-events-66668\n- https://bradfrost.com/blog/post/lets-talk-about-web-components/\n- [Svelte Repl](https://svelte.dev/repl/67c8a913386240a8b8427408342bc502?version=3.55.1)\n- https://blog.openreplay.com/an-introduction-to-native-web-components/\n\n```\n\n```\n"
+  },
+  {
+    "name": "brick-tokens",
+    "version": "5.19.5",
+    "selector": "brick-tokens-v5",
+    "description": "Tokens package",
+    "category": "Utilities",
+    "tags": [
+      "utilities"
+    ]
+  },
+  {
+    "name": "brick-tooltip",
+    "version": "1.0.9",
+    "selector": "brick-tooltip-v1",
+    "description": "brick-tooltip 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-tooltip.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n## Purpose\n\nThis component can be used to display a contextual text bubble that displays a short description for an element, and that appears on pointer hover, keyboard focus or touch.\n\nBecause the tooltip itself never receives focus and is not in the tabbing order, a tooltip can not contain interactive elements like links, inputs, or buttons.\n\n## Accessibility\n\nThe tooltip should be used to provide additional information about an element, and should not be used to convey critical information. The tooltip should be short and concise, and should not contain more than 200 characters.\n\nThe tooltip is displayed on hover, focus or touch, and is dismissed when the pointer leaves the element, the element loses focus, the user touches outside the tooltip, or presses the Escape key.\n\nScreen readers will announce the tooltip when the element receives focus.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-tooltip'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-tooltip/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTooltip, } from '@amedia/brick-tooltip/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderBrickTooltip({\n    dataAnchor: 'tooltip-trigger-1',\n    dataText: 'Tooltip text',\n    dataPosition: 'below',\n    dataTail: 'true',\n    })\n`}\n/>\n\n**NB! Make sure to also include brick-tooltip javascript clientside for events and code running in the client:**\n\nE.g.\n\n`import 'https://assets.acdn.no/pkg/@amedia/brick-tooltip/v0/brick-tooltip.js';`\n\nor\n\n`script type=\"module src=\"https://assets.acdn.no/pkg/@amedia/brick-tooltip/v0/brick-tooltip.js\"></script>`\n\n### Client side\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-tooltip';\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-tooltip-v1 \n    data-anchor=\"tooltip-trigger-1\" \n    data-text=\"Tooltip text\" \n    data-position=\"below\" \n    data-tail=\"true\">\n  </brick-tooltip-v1>`}\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-tooltip-v1');\n  el.dataset.for = 'tooltip-trigger-1';\n  el.dataset.tooltip = 'Tooltip text';\n  el.dataset.position = 'below';\n  el.dataset.tail = 'true';\n  `}\n/>\n\n## Connecting the tooltip to a trigger element\n\nIn order to connect the tooltip to a trigger element, the `data-anchor` attribute must be set to the id of the trigger element. In the example below, the tooltip is connected to a paragraph element with the id `tooltip-6p3ffk0urk4`.\n\n```html\n<p id=\"tooltip-6p3ffk0urk4\">Personalisert innhold</p>\n<brick-tooltip-v1\n  data-anchor=\"tooltip-6p3ffk0urk4\"\n  data-text=\"Du ser denne teaseren fordi du har vist interesse for temaet tidligere\"\n  data-position=\"right\"\n  data-tail=\"true\"\n>\n</brick-tooltip-v1>\n```\n\n**NOTE:**\nThe trigger element must have a unique id. One easy way of implementing this is:\n\n```js\nconst tooltipTriggerId = `tooltip-${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## Attributes for brick-tooltip\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n## Styling and CSS Properties\n\n🤝 brick-tooltip is partially styled using CSS properties that must exist on the page.\n\nIt is possible to use CSS custom properties to override the default styles of the background color and text color.\nHere we show how to override the default colors with another color token:\n\n```css\n--b-tooltip-color-fg: var(--brick-colors-baseSubtleFg);\n--b-tooltip-color-bg: var(--brick-colors-baseSubtleBg);\n```\n\n<div className=\"note\">\n  <span>**Note**</span>\n  It is your responsibilty to validate that your override colors adhere to the\n  **WCAG 2.1 AA** guidelines. Check here to be sure:\n  [https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)\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-tooltip-color-bg</code>\n      </td>\n      <td>\n        Controls the background color of the tooltip, 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-tooltip-color-fg</code>\n      </td>\n      <td>\n        Controls the text color of the tooltip, using [color\n        tokens](?path=/story/brick-tokens-tokens--colors-base)\n      </td>\n      <td>\n        <code>var(--brick-colors-baseNeutral900)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Caveats for use\n\nThere is a known issue with the tooltip not being positioned correctly when the trigger element or its parent has a `translate: transform` property. This is due to the way the tooltip is positioned using the `getBoundingClientRect()` method, which the transform property negates.\n\n<br />\n<br />\n<br />\n\n<Markdown>{ReadMe}</Markdown>\n"
+  }
+]