@amedia/brick-mcp 0.1.3 → 0.1.4

package/data/components/brick-published.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-published",
-  "version": "4.0.1",
-  "selector": "brick-published-v4",
-  "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<brick-style></brick-style>;\n\n<Meta of={BrickStories} />\n\n# brick-published\n\n## Purpose\n\nThe `brick-published` component displays publication dates in a semantic and accessible way.\n\nIt wraps a `<time>` element with proper datetime attributes to provide both human-readable and machine-readable publication timestamps. This component is commonly used in articles, blog posts, and news content to indicate when content was published or last modified.\n\n- Semantic HTML using the `<time>` element\n- Support for both publication and modification dates via `itemprop` attribute\n- Flexible date display formatting while maintaining ISO 8601 datetime attributes\n- Server-side rendering support\n- Consistent styling across different contexts\n\n<Canvas of={BrickStories.Published} sourceState=\"shown\" />\n\n## Accessibility\n\nThe `brick-published` component follows web accessibility best practices:\n\n### Semantic Structure\n\n- Uses the native `<time>` element which provides semantic meaning to assistive technologies\n- Includes proper `datetime` attribute in ISO 8601 format for machine readability\n- Uses `itemprop` attribute for structured data (schema.org microdata)\n- Follows WCAG 2.2 guidelines for meaningful content structure\n- Uses semantic markup that doesn't require additional ARIA attributes\n- Provides both human-readable display text and machine-readable datetime values\n\n### Screen Reader Support\n\n- The component structure ensures screen readers can properly announce the publication date\n- The label (e.g., \"Published:\") provides clear context before the date\n- The `datetime` attribute allows assistive technologies to interpret the exact timestamp\n\n## Usage\n\nThe `brick-published` component can be used in multiple ways depending on your rendering approach:\n\n<Source language=\"js\" code={'npm install @amedia/brick-published'} />\n\n### Server side rendering\n\nRender 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      dataDatetime: '2022-04-22T12:00:00.000+0200',\n      dataLabel: 'Publisert:',\n      dataDisplayDate: '22.04.23 12:01',\n      dataItemprop: 'datePublished',\n    })\n`}\n/>\n\n### Client side\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import 'https://assets.acdn.no/pkg/@amedia/brick-published/v4/brick-published.js';\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-v4\n    data-label=\"Publisert:\" data-display-date=\"22.04.23 12:01\" data-datetime=\"2022-04-22T12:00:00.000+0200\" data-itemprop=\"datePublished\"\n></brick-published-v4>`}\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-v4');\n  el.setAttribute('data-label', 'Publisert:');\n  el.setAttribute('data-display-date', '22.04.23 12:01');\n  el.setAttribute('data-datetime', '2022-04-22T12:00:00.000+0200');\n  el.setAttribute('data-itemprop', 'datePublished');\n  document.body.appendChild(el);\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## Styling and CSS Properties\n\n🤝 brick-published 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-published-color-fg</code>\n      </td>\n      <td>\n        You can set the background svg of the avatar using this property.\n        Example: \"--b-published-color-fg:var(--brick-colors-baseInvertedFg);\"\n      </td>\n      <td>\n        <code>var(--brick-colors-baseFg)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Markdown>{ReadMe}</Markdown>\n"
-}

package/data/components/brick-share.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-share",
-  "version": "0.3.4",
-  "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"
-}

package/data/components/brick-stepper.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-stepper",
-  "version": "1.0.11",
-  "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"
-}

package/data/components/brick-tab.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-tab",
-  "version": "0.1.8",
-  "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"
-}

package/data/components/brick-tabs.json

@@ -1,9 +0,0 @@
-{
-  "name": "brick-tabs",
-  "version": "0.1.9",
-  "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"
-}

package/data/components/brick-tag.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-tag",
-  "version": "0.0.8",
-  "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"
-}

package/data/components/brick-teaser-player.json

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser-player",
-  "version": "1.0.22",
-  "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"
-}

package/data/components/brick-teaser-reels.json

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser-reels",
-  "version": "0.2.29",
-  "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"
-}

package/data/components/brick-teaser.json

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser",
-  "version": "19.2.5",
-  "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"
-}

package/data/components/brick-template.json

@@ -1,9 +0,0 @@
-{
-  "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"
-}

package/data/components/brick-textarea.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-textarea",
-  "version": "2.0.4",
-  "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"
-}

package/data/components/brick-themes.json

@@ -1,6 +0,0 @@
-{
-  "name": "brick-themes",
-  "version": "1.0.1",
-  "selector": "brick-themes-v1",
-  "description": "Brick theme names"
-}

package/data/components/brick-toast.json

@@ -1,9 +0,0 @@
-{
-  "name": "brick-toast",
-  "version": "0.1.20",
-  "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"
-}

package/data/components/brick-toggle.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-toggle",
-  "version": "3.1.7",
-  "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"
-}

package/data/components/brick-tokens.json

@@ -1,8 +0,0 @@
-{
-  "name": "brick-tokens",
-  "version": "5.19.6",
-  "selector": "brick-tokens-v5",
-  "description": "Tokens package",
-  "category": "Utilities",
-  "tags": ["utilities"]
-}

package/data/components/brick-tooltip.json

@@ -1,7 +0,0 @@
-{
-  "name": "brick-tooltip",
-  "version": "1.0.10",
-  "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"
-}

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

@@ -1,6 +0,0 @@
-{
-  "name": "brick-mcp",
-  "version": "0.0.1",
-  "selector": "brick-mcp-v0",
-  "description": "This is a MCP server for Brick"
-}

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

@@ -1,6 +0,0 @@
-{
-  "name": "brick-pill",
-  "version": "9.0.2",
-  "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"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-player",
-  "version": "1.27.17",
-  "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"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-published",
-  "version": "4.0.1",
-  "selector": "brick-published-v4",
-  "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<brick-style></brick-style>;\n\n<Meta of={BrickStories} />\n\n# brick-published\n\n## Purpose\n\nThe `brick-published` component displays publication dates in a semantic and accessible way.\n\nIt wraps a `<time>` element with proper datetime attributes to provide both human-readable and machine-readable publication timestamps. This component is commonly used in articles, blog posts, and news content to indicate when content was published or last modified.\n\n- Semantic HTML using the `<time>` element\n- Support for both publication and modification dates via `itemprop` attribute\n- Flexible date display formatting while maintaining ISO 8601 datetime attributes\n- Server-side rendering support\n- Consistent styling across different contexts\n\n<Canvas of={BrickStories.Published} sourceState=\"shown\" />\n\n## Accessibility\n\nThe `brick-published` component follows web accessibility best practices:\n\n### Semantic Structure\n\n- Uses the native `<time>` element which provides semantic meaning to assistive technologies\n- Includes proper `datetime` attribute in ISO 8601 format for machine readability\n- Uses `itemprop` attribute for structured data (schema.org microdata)\n- Follows WCAG 2.2 guidelines for meaningful content structure\n- Uses semantic markup that doesn't require additional ARIA attributes\n- Provides both human-readable display text and machine-readable datetime values\n\n### Screen Reader Support\n\n- The component structure ensures screen readers can properly announce the publication date\n- The label (e.g., \"Published:\") provides clear context before the date\n- The `datetime` attribute allows assistive technologies to interpret the exact timestamp\n\n## Usage\n\nThe `brick-published` component can be used in multiple ways depending on your rendering approach:\n\n<Source language=\"js\" code={'npm install @amedia/brick-published'} />\n\n### Server side rendering\n\nRender 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      dataDatetime: '2022-04-22T12:00:00.000+0200',\n      dataLabel: 'Publisert:',\n      dataDisplayDate: '22.04.23 12:01',\n      dataItemprop: 'datePublished',\n    })\n`}\n/>\n\n### Client side\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import 'https://assets.acdn.no/pkg/@amedia/brick-published/v4/brick-published.js';\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-v4\n    data-label=\"Publisert:\" data-display-date=\"22.04.23 12:01\" data-datetime=\"2022-04-22T12:00:00.000+0200\" data-itemprop=\"datePublished\"\n></brick-published-v4>`}\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-v4');\n  el.setAttribute('data-label', 'Publisert:');\n  el.setAttribute('data-display-date', '22.04.23 12:01');\n  el.setAttribute('data-datetime', '2022-04-22T12:00:00.000+0200');\n  el.setAttribute('data-itemprop', 'datePublished');\n  document.body.appendChild(el);\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## Styling and CSS Properties\n\n🤝 brick-published 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-published-color-fg</code>\n      </td>\n      <td>\n        You can set the background svg of the avatar using this property.\n        Example: \"--b-published-color-fg:var(--brick-colors-baseInvertedFg);\"\n      </td>\n      <td>\n        <code>var(--brick-colors-baseFg)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<Markdown>{ReadMe}</Markdown>\n"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-share",
-  "version": "0.3.4",
-  "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"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-stepper",
-  "version": "1.0.11",
-  "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"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-tab",
-  "version": "0.1.8",
-  "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"
-}

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-tabs",
-  "version": "0.1.9",
-  "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"
-}

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

@@ -1,7 +0,0 @@
-{
-  "name": "brick-tag",
-  "version": "0.0.8",
-  "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"
-}

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser-player",
-  "version": "1.0.22",
-  "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"
-}

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser-reels",
-  "version": "0.2.29",
-  "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"
-}

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-teaser",
-  "version": "19.2.5",
-  "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"
-}