npm - @amedia/brick-mcp - Versions diffs - 0.0.1-LLM-DOCS → 0.0.1-NEW-PATH-1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/README.md +241 -98
package/dist/data/components/brick-actions.json +6 -0
package/dist/data/components/brick-alt-teaser.json +10 -0
package/dist/data/components/brick-avatar.json +11 -0
package/dist/data/components/brick-button.json +12 -0
package/dist/data/components/brick-card.json +10 -0
package/dist/data/components/brick-carousel.json +11 -0
package/dist/data/components/brick-classnames.json +10 -0
package/dist/data/components/brick-countdown.json +7 -0
package/dist/data/components/brick-dialog.json +11 -0
package/dist/data/components/brick-fonts.json +10 -0
package/dist/data/components/brick-helloworld.json +7 -0
package/dist/data/components/brick-icon.json +10 -0
package/dist/data/components/brick-icons.json +11 -0
package/dist/data/components/brick-illustrations.json +7 -0
package/dist/data/components/brick-image.json +10 -0
package/dist/data/components/brick-input.json +12 -0
package/{data → dist/data}/components/brick-mcp.json +1 -1
package/dist/data/components/brick-nifs.json +7 -0
package/{data → dist/data}/components/brick-pill.json +1 -1
package/{data → dist/data}/components/brick-player.json +1 -1
package/dist/data/components/brick-published.json +7 -0
package/{data → dist/data}/components/brick-share.json +1 -1
package/{data → dist/data}/components/brick-stepper.json +1 -1
package/{data → dist/data}/components/brick-tab.json +1 -1
package/{data → dist/data}/components/brick-tabs.json +1 -1
package/{data → dist/data}/components/brick-tag.json +1 -1
package/{data → dist/data}/components/brick-teaser-player.json +1 -1
package/{data → dist/data}/components/brick-teaser-reels.json +1 -1
package/{data → dist/data}/components/brick-teaser.json +1 -1
package/{data → dist/data}/components/brick-textarea.json +1 -1
package/{data → dist/data}/components/brick-toast.json +1 -1
package/{data → dist/data}/components/brick-toggle.json +1 -1
package/{data → dist/data}/components/brick-tokens.json +1 -1
package/{data → dist/data}/components/brick-tooltip.json +1 -1
package/{data → dist/data}/components-metadata.json +29 -29
package/dist/data/components.json +321 -0
package/dist/http.js +311 -0
package/dist/http.js.map +7 -0
package/dist/index.js +52 -81
package/dist/index.js.map +4 -4
package/package.json +3 -6
package/scripts/generate-data.js +37 -40
package/data/components/brick-actions.md +0 -59
package/data/components/brick-alt-teaser.md +0 -253
package/data/components/brick-avatar.md +0 -265
package/data/components/brick-button.md +0 -364
package/data/components/brick-card.md +0 -329
package/data/components/brick-carousel.md +0 -330
package/data/components/brick-classnames.md +0 -150
package/data/components/brick-countdown.md +0 -179
package/data/components/brick-dialog.md +0 -418
package/data/components/brick-fonts.md +0 -335
package/data/components/brick-helloworld.md +0 -202
package/data/components/brick-icon.md +0 -271
package/data/components/brick-icons.md +0 -430
package/data/components/brick-illustrations.md +0 -552
package/data/components/brick-image.md +0 -335
package/data/components/brick-input.md +0 -521
package/data/components/brick-nifs.md +0 -163
package/data/components/brick-published.json +0 -7
package/data/tokens-documentation.json +0 -7
/package/{data → dist/data}/components/brick-template.json +0 -0
/package/{data → dist/data}/components/brick-themes.json +0 -0
/package/{data → dist/data}/tokens.json +0 -0

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/data/components/brick-image.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "name": "brick-image",
+  "version": "6.0.4",
+  "selector": "brick-image-v6",
+  "category": "Display",
+  "tags": [
+    "display"
+  ],
+  "mdx": "import {\n  Meta,\n  Description,\n  Title,\n  Controls,\n  Canvas,\n  Markdown,\n  Source,\n} from '@storybook/addon-docs/blocks';\nimport ReadMe from '../README.md?raw';\nimport ChangeLog from '../CHANGELOG.md?raw';\nimport '../../../stories/brickStyle.js';\n\n<brick-style></brick-style>\n\nimport * as BrickStories from './brick-image.stories.ts';\n\n<Meta of={BrickStories} />\n\n<Title of={BrickStories} />\n<Description of={BrickStories} />\n\nhttps://imagekit.io/blog/lazy-loading-images-complete-guide/\n\nRenders a foreground image with the `img` html tag, supporting lazyload.\nIf `srcset` is provided, the image loaded will be responsive. Responsive in this context means that the best image url (defined in srcset) will be calculated based on container size and screen resolution. Take a look at the implementation for details.\n\n## Purpose\n\n`brick-image` is a custom element for rendering a responsive image.\nFor the simplest use, it just needs a `data-src`, `data-width` and `data-height` attribute.\n\n<Canvas\n  additionalActions={[\n    {\n      title: 'Open in GitHub',\n      onClick: () => {\n        window.open(\n          'https://github.com/amedia/brick/tree/master/packages/brick-image',\n          '_blank'\n        );\n      },\n    },\n    {\n      title: 'Open README in GitHub',\n      onClick: () => {\n        window.open(\n          'https://github.com/amedia/brick/tree/master/packages/brick-image/README.md',\n          '_blank'\n        );\n      },\n    },\n  ]}\n  of={BrickStories.Src}\n  sourceState=\"shown\"\n/>\n\n### Using native browser level lazy loading\n\nhttps://web.dev/articles/browser-level-image-lazy-loading\n\n### Aspect ratio\n\nIts recommended to always set either width/height or aspect-ratio on the image.\n\nBased on the attributes `data-height` and `data-width`, `brick-image` adds the css var `--brick-image-ratio` with the aspect ratio for the image.\n\nThe following css applies to the `<img>` element, for browsers supporting `aspect-ratio`:\n\n```css\naspect-ratio: auto var(--brick-image-ratio);\n```\n\nTo support older browsers, like Safari < 15, the `width` and `height` attribute are also set on the `<img>` tag.\n\n## Accessibility\n\nWe differentiate between images that are decorative and images that are informative (or functional).\n\nDecorative images usually don’t need alt text. They may exist on the page for purely aesthetic reasons – in other words, to make the page look pretty. Or they may be repeating information that is already on the page as text. In that case, adding alt text to the image is redundant, and an empty string can be used.\n\nInformative images, on the other hand, convey some kind of information. To determine whether an image is informative or not is to remove it from the design: if you are missing information because the image is gone, then it means the image is informative and needs alt text.\n\n#### Search Engine Optimization\n\nIn addition to improving accessibility, alt text is also used by search engines to determine the subject of an image and is considered as a ranking factor for `SEO`.\n\n#### Note\n\nUse proper grammar when writing alt text, such as punctuation and capital\nletter at the start of a sentence. This will improve the experience for\nscreen reader users.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-image'} />\n\n#### Import and renderBrickImage from '@amedia/brick-image/template'\n\nThe `renderBrickImage` function takes an object properties and returns both the markup for brick-image and the img tag.\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickImage } from '@amedia/brick-image/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderBrickImage({\n      dataSrc: src,\n      dataFetchPriority,\n      dataLoading,\n      dataAltText: alttext,\n      dataWidth: width,\n      dataHeight: height,\n      dataSizes,\n    })\n`}\n/>\n\n#### Styles\n\nMake sure to load the css file client side or inline the styles serverside.\n\nThe path to the css file is typically added to the manifest if you are working on an amedia-component.\n\n```html\nhttps://assets.acdn.no/pkg/@amedia/brick-image/[version]/styles.css\n```\n\nYou also have the option to serverside if you are using `getCssText()`.\n\n## Attributes and properties\n\n<Controls />\n\n# Responsive images\n\n### srcset\n\n[HTMLImageElement/srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)\n\nThe `srcset` attribute defines the set of image sizes we will allow the browser to choose between.\nThe `sizes` attribute must also be present, or the srcset itself will be ignored.\n\nSkip it for small, simple, or fixed-size images. If your image does not change much between screen-sizes a single optimized image is better.\n\n### sizes\n\n[HTMLImageElement/sizes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)\n\nThe img attribute `sizes`, gives hints to the browser about the size of the area, or container, the image will be displayed in.\nIn a grid listing out thumbnails in full width on smaller screens, but in 280px horisontally on larger screens:\n\n```js\ndata-sizes: '(min-width 600px) 280px, 100vw',\n```\n\nIf your component are used in various context, use the custom CSS Property `--brick-image-sizes` to set different `sizes` based on your needs.\nA good example where setting a custom `sizes` is when your component are used in a carousel, or a thumbnail grid.\n\nSetting this in your CSS, will override the `data-sizes` and tell the browser that the image will be displayed in a 300px area on larger screens, and take up 80vw on smaller screens:\n\n```css\n...your other css properties;\n--brick-image-sizes: (min-width: 600px) 300px, 80vw);\n```\n\n## CSS Properties\n\nCSS Custom Properties can be used to customize the visual appearance.\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--brick-image-sizes</code>\n      </td>\n      <td>\n        Use this css variable to dynamically set the `sizes`. This tells the\n        browser what sizes the image container will be using using [media\n        queries like syntax]\n        (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes)\n      </td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-height</code>\n      </td>\n      <td>Use this to set the `height` CSS property of the `img` element.</td>\n      <td>\n        <code>auto</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-maxheight</code>\n      </td>\n      <td>\n        Use this to set the `max-height` CSS property of the `img` element.\n      </td>\n      <td>\n        <code>auto</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-width</code>\n      </td>\n      <td>Use this to set the `width` CSS property of the `img` element</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-maxwidth</code>\n      </td>\n      <td>Use this to set the `max-width` CSS property of the `img` element</td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-objectfit</code>\n      </td>\n      <td>\n        Use this to set the `object-fit` CSS property of the `img` element\n      </td>\n      <td>\n        <code>cover</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>---brick-image-objectposition</code>\n      </td>\n      <td>\n        Use this to set the `object-position` CSS property of the `img` element\n      </td>\n      <td>\n        <code>center</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--brick-image-color-bg</code>\n      </td>\n      <td>\n        Can be used to set the background color if the image should be\n        letterboxed .\n      </td>\n      <td>\n        <code>transparent</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### data-decoding\n\nDue to issues with rendering images in Safari, the `decoding` attribute can be used to set the decoding mode.\nWe use this in article as a hack to prevent problems with webkit not computing correct height for the image\nDo not use this in your app as its probably not needed and we will remove it as soon as possible.\nhttps://stackoverflow.com/questions/66903058/why-does-safari-only-render-the-top-of-images-sometimes\n\n## Performance\n\nImages are often the largest assets on a page, and can be a major factor in slowing down the page load time.\nWhat the correct sizes of an image is will depend on the context of the image.\n\nThe `sizes` and `srcset` attributes will be used by the browser to determine which image to load, based on the container size and screen resolution.\nIf the image is small, simple or fixed size, a single optimized image is better. I.e when using images in a list of thumbnails, a srcset is not needed.\n\nCaution: Do not use `dataFetchPriority: 'high'` and `dataLoading:'eager'` unless you know the image is the LCP candidate. This will impact the Largest Contentful Paint timing.\nThe default value of `loading` is `lazy`, which means the image will be loaded when it comes into view.\n\n#### Resources\n\n- https://web.dev/articles/browser-level-image-lazy-loading\n- https://web.dev/articles/use-srcset-to-automatically-choose-the-right-image\n- https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#using-srcset\n- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\n\n<Markdown>{ReadMe}</Markdown>\n\n## Changelog\n\n<Markdown>{ChangeLog}</Markdown>\n"
+}

package/dist/data/components/brick-input.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "brick-input",
+  "version": "3.0.8",
+  "selector": "brick-input-v3",
+  "description": "brick-input component",
+  "category": "Forms",
+  "tags": [
+    "forms",
+    "interactive"
+  ],
+  "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-input.stories';\n\n<Meta of={BrickStories} />\n\n# brick-input\n\n<br />\n\n## Purpose\n\nThis package exports a custom element called \"brick-input\" that can be used to create various types of input fields, with corresponding attributes.\n\nIt can be used to create standalone input fields, or as part of `brick-form` (not currently available).\n\nValidation of the input value is only done via the `pattern` attribute - if you provide it. This attribute is supported by `text`, `password`, `search`, `tel`, `url` and `email`. Also make sure to add an `errortext` attribute with a text that describes the error so the user knows what to do to fix it. This text will also be read by screen readers via aria-live, which is the only way for a screen reader user to know something is wrong (unless he tabs back to the input).\n\n**However**, if you use it as part of `brick-form`, validation is done automatically.\n\n<br />\n\n## How to use this component\n\nbrick-input can be used with both server side rendering and client side rendering. The way to do this is by:\n\n1. Client side markup using `<brick-input>`. (Client Side)\n2. Using the `renderBrickInput` function to render markup (Server Side)\n\n---\n\n<br />\n\n### How to use brick-input - Client Side Rendering\n\n```js\nimport { BrickInput } from '@amedia/brick-input';\n\nconst myMarkup = () => {\n  return `\n  <brick-input \n    data-label-text=\"Firstname\"\n    data-required=\"true\"\n    data-type=\"text\">\n  </brick-input>\n  `;\n};\n```\n\nHere is a codepen link: https://codepen.io/renatewr/pen/eYwYwBw?editors=1111\n\n#### Now let's break it down.\n\n<br />\n\n#### 1. First you need to install brick-input as a dependency:\n\n```bash\nnpm install @amedia/brick-input\n```\n\nand import it into the file where you want to use it.\n\n```js\nimport '@amedia/brick-input';\n```\n\nUse it in your markup:  \n**Note:**  \n`type` is a required attribute because it's the only way to know what type of input field to render. If you don't provide it, the component will render a `text` input field by default.\n\nIt is highly reccomended to use the `data-label-text` attribute to provide a label with a `for` attribute for the input field. This will make it accessible to screen readers.\n\nIf you don't want the label to be visible, you can set the attribute `data-label-hidden`. This will hide the label visually, but still make it accessible to screen readers.\n\n```html\n<brick-input-v1\n  data-id=\"firstname\"\n  data-label-text=\"Firstname\"\n  data-label-hidden=\"true\"\n  data-required=\"true\"\n  data-type=\"text\"\n></brick-input-v1>\n```\n\n**Note:** Se available attributes you can pass into the component (varies from type to type) in the table below 👇\n\n<br />\n\n## Attributes overview for brick-input\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-input-v1\n  data-accept=\".jpg, .png\"\n  data-alt=\"My input image\"\n  data-autocomplete=\"on\"\n  data-autofocus=\"true\"\n  data-checked=\"true\"\n  data-disabled=\"false\"\n  data-errortext=\"This is an error\"\n  data-helptext=\"This is help text\"\n  data-id=\"my-input\"\n  data-label-hidden=\"false\"\n  data-label-text=\"My Input Label\"\n  data-max=\"100\"\n  data-maxlength=\"50\"\n  data-min=\"0\"\n  data-minlength=\"10\"\n  data-multiple=\"false\"\n  data-name=\"myInputName\"\n  data-optionaltext=\"optional\"\n  data-pattern=\"[A-Za-z]+\"\n  data-placeholder=\"Enter a value here\"\n  data-readonly=\"false\"\n  data-required=\"true\"\n  data-size=\"20\"\n  data-spellcheck=\"true\"\n  data-src=\"https://via.placeholder.com/150\"\n  data-step=\"5\"\n  data-type=\"text\"\n  data-value=\"Initial value\"\n>\n</brick-input-v1>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-input\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n"
+}

package/{data → dist/data}/components/brick-mcp.json RENAMED Viewed

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

package/dist/data/components/brick-nifs.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "name": "brick-nifs",
+  "version": "0.0.7",
+  "selector": "brick-nifs-v0",
+  "description": "brick-nifs component",
+  "mdx": "import { Meta, Controls, Canvas } from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-nifs.stories';\n\n<Meta of={BrickStories} />\n\n# brick-nifs\n\nInformation about brick-nifs, and how to use it goes here.\n\n<Controls />\n\n<Canvas of={BrickStories.Main} />\n"
+}

package/{data → dist/data}/components/brick-pill.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-pill",
-  "version": "9.0.2",
+  "version": "9.0.1",
   "selector": "brick-pill-v9",
   "mdx": "import {\n  Meta,\n  Story,\n  Subtitle,\n  Controls,\n  Source,\n  Markdown,\n  Canvas,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-pill.stories';\n\n<Meta of={BrickStories} />\n\n# brick-pill & brick-pillbox\n\n`brick-pill` can be used to display meta information, or a small piece of text information. They are read-only status indicators or labels, and are not interactive. It can hold text or text and icon, and be displayed with and without background color.\n\n`brick-pillbox` is a wrapper container for multiple pills.\n[Link to `brick-pillbox` documentation](?path=/docs/brick-pillbox--documentation)\n\n<Canvas of={BrickStories.Versions} />\n\n## Purpose\n\nUsed for example to decorate or embellish a frontpage article teaser. Adding small details about the\narticle the teaser links to.\nCan also be used elsewhere where such garnish is needed.\n\n## Accessibility\n\nColor contrasts adhere to the WCAG 2.1 guidelines.  \nIcons in brick-pill are decorative, so we hide the icon from screenreaders.\n\n## Usage\n\n`brick-pill` can be used standalone, but you might wrap `brick-pill` with `brick-pillbox`.\nImport `brick-pill` and `brick-pillbox` in the file you render your markup:\n\nFirst you need to install the package in your project.\n\n<Source\n  language=\"node\"\n  code={`\n    npm install @amedia/brick-pill\n  `}\n/>\n\n### Server side rendering\n\nWhen rendering the markup serverside\n\n#### Import and render markup\n\n<Source\n  language=\"javascript\"\n  code={`\n    import { renderBrickPill, renderBrickPillBox } from '@amedia/brick-pill/template';\n`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`\n    \n    const pills = renderBrickPill({\n      filled: true,\n      version: 'plus'\n    })\n    const wrapperMarkup = renderBrickPillBox({\n      filled: true\n    }, pills)\n`}\n/>\n\n### Client side\n\nIf the markup has been rendered serverside, the markup will not be recreated, but i.e eventlisteners will happen client side.\n\nInclude the client side class from the asset server with a script tag, or use import.\n\n#### Script tag\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-pill/v0/brick-pill.js\"\n></script>`}\n/>\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-pill';\n  `}\n/>\n\n#### Create the DOM element\n\nThere are a few ways to create brick-pill client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`\n    <brick-pill\n    data-text=\"Siste\"\n    data-version=\"breaking\"\n    data-filled=\"true\"\n></brick-pill>\n`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-pill-v9');\n  el.dataset.version = 'vignette';\n  el.dataset.text = 'Brick pill is awesome';\n  el.dataset.filled = 'true';\n  `}\n/>\n\n### Using Svelte?\n\nTake a look at this REPL: https://svelte.dev/repl/b124e26657b944908566c8c21f985415\n\n## Attributes and properties for brick-pill\n\n`brick-pill` exists in different [versions](?path=/story/brick-pill--versions), and [skins](?path=/story/brick-pill--black-filled).\n\nDataset attributes get camel cased as properties.\nFor example the attribute `data-text` is equivalent `dataset.text` on an element, and `dataText` as property.\n\n#### Note\n\nAll dataset attributes in html are in the format of <code>data-example-attribute=\"example\"</code>, but properties\nis camel cased, like <code>dataExampleAttrbute</code>. Se mapping to attributes in the \"Default\" column below.\n\n<Controls of={BrickStories.Versions} />\n\n### dataVersion: countdown\n\nTimestamp should always be a Epoch Unix Timestamp.\nBoth data-version data-countdown-date need to be present in order to render the component.\nIf adding the parameter \"data-countdown-toggle-text\", another pill will take its place when the countdown has ended. If you wish another version than \"vignette\", send in the version parameter parameter.\n\nNote that when using the countdown version, the inner markup (icon and clock) will always be rendered client-side.\n\n<Source\n  language=\"javascript\"\n  code={`const timestamp = new Date().getTime()\n  //or \nconst timestamp = +new Date();\n  `}\n/>\n\n<Source\n  language=\"html\"\n  code={`<brick-pill \n    data-version=\"countdown\" \n    data-countdown-date=\"1676460023618\" \n    data-countdown-toggle-text=\"Direkte\" \n    data-countdown-toggle-version=\"breaking\"></brick-pill>\n  `}\n/>\n\n### dataVersion: opinion\n\nIf dataFilled is true, css variabels are used for background and text colors.\n\n<Source\n  language=\"css\"\n  code={`\n--opinion-background-color;\n--opinion-color-text;\n  `}\n/>\n\n### Use with Pillbox\n\n<Source\n  language=\"html\"\n  code={`\n    <brick-pillbox data-filled=\"true\"><brick-pill\n    data-text=\"Siste\"\n    data-version=\"breaking\"\n    data-filled=\"true\"\n></brick-pill>\n</brick-pillbox>\n`}\n/>\n\nWhen the parent is `brick-pillbox`, it affects styling of the pill.\n\n- removes single pill border radius\n- truncates the text on the last pill\n- adds divider between pills eligble for dividers\n\n## Styling and CSS Properties\n\n🤝 `brick-pill` is styled using CSS properties.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing properties before resorting to custom properties.\n\nMake sure you scope the overrides.\n\n<div class=\"note\">\n  <span>Note</span>\n  <p>\n    It is your responsibilty to validate that your overrides adhere to the\n    **WCAG 2.1 AA** guidelines.\n  </p>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-pill-color-bg</code>\n      </td>\n      <td>This variable controls the background color of the filled pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-fg</code>\n      </td>\n      <td>This variable controls the text color of the pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-breakingBg</code>\n      </td>\n      <td>\n        This variable controls the background color of the filled breaking pill\n      </td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-color-breakingFg</code>\n      </td>\n      <td>This variable controls the text color of the breaking pill</td>\n      <td>\n        <code>-</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg</code>\n      </td>\n      <td>\n        Set the url to an svg, scoped to pill with version \"icon\". Ex\n        :--b-pill-svg:\n        url('https://r.acdn.no/local/v3/publications/www.ao.no/gfx/square.svg')\n      </td>\n      <td>\n        <code></code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg-width</code>\n      </td>\n      <td>This variable controls the width of the svg.</td>\n      <td>\n        <code>11px</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-pill-svg-height</code>\n      </td>\n      <td>This variable controls the height of the svg.</td>\n      <td>\n        <code>11px</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n**_For local development with Storybook, please see the Brick [documentation](https://brick.api.no)._**\n\n<br />\n\n## Dependencies\n\nAs part of the Brick design system, the brick-pill is dependent the following:\n\n- @stitches/core - [Stitches](https://stitches.dev/), a CSS-in-JS tool enabling theming and variants support\n- brick-tokens [@amedia/brick-tokens](https://www.npmjs.com/package/@amedia/brick-tokens) for styling related to the [Brick designsystem](http://brick.api.no)\n- brick-icon: [@amedia/brick-icons](https://www.npmjs.com/package/@amedia/brick-icons)\n\n## Design\n\nWhen styling anything related to Brick, be sure to use the correct tokens documented in Figma, and the theme class will make sure the correct values are set.\n\nDesign with tokens can be found in Figma here:  \nPill: https://www.figma.com/file/FC8ydpRXVG0TDJh6FBDLpt/Components?node-id=896%3A20191&t=0DnpQsgKFSnsGaDx-0  \nExample of use: https://www.figma.com/file/FC8ydpRXVG0TDJh6FBDLpt/Components?node-id=1023%3A22043&t=tnOBgNfqCz1lBphO-0\n\n## README\n\n<Markdown>{ReadMe}</Markdown>\n\n## CHANGELOG\n\n**/CHANGELOG.MD**\n[Changelog](https://github.com/amedia/brick/blob/master/packages/brick-pill/CHANGELOG.md)\n"
 }

package/{data → dist/data}/components/brick-player.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-player",
-  "version": "1.27.17",
+  "version": "1.27.16",
   "selector": "brick-player-v1",
   "description": "Component for playing video and audio files",
   "mdx": "import {\n  Meta,\n  Controls,\n  Canvas,\n  Source,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\nimport ReadMe from '../readme.md?raw';\nimport * as BrickStories from './brick-player.stories';\n\n<Meta of={BrickStories} />\n\n# brick-player\n\n## How to use this component\n\n<Source\n  language=\"html\"\n  code={`\n  <brick-player\n  mediaid=\"flowplayer-uuid-mediaid\"\n  playerid=\"flowplayer-config-uuid\"\n/>`}\n/>\n\n## Testing ads\n\nIf you're experiencing issues with \"The Cross-Origin-Opener-Policy header has been ignored\" in\nChrome, you can try the following:\n\n1. Go to chrome://flags/#unsafely-treat-insecure-origin-as-secure\n1. Add http://imasdk.googleapis.com\n1. Set \"Insecure origins treated as secure\" to Enabled\n1. Restart Google Chrome\n\n## Attributes overview for brick-player\n\nAll html attributes are defined using regular strings. They are parsed during initialisation into instance properties with both built-in and custom types. Changes made to attributes after initialisation are reflected into properties in a reactive manner - and vice versa.\n\nIn the overview, the corresponding properties are listed in the \"Description\" column.\n\n<Controls of={BrickStories.AspectRatio169} />\n\n<Canvas of={BrickStories.AspectRatio169} />\n\n<Markdown>{ReadMe}</Markdown>\n"

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

@@ -0,0 +1,7 @@
+{
+  "name": "brick-published",
+  "version": "3.0.0",
+  "selector": "brick-published-v3",
+  "description": "brick-published",
+  "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-published.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-published\n\n## Purpose\n\nInformation about the purpose of brick-published2, and how to use it goes here.\n\n## Accessibility\n\nInformation about accessibility concerns - if they are any.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-published'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-published/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickPublished, } from '@amedia/brick-published/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderPublished({\n      dataTitle: 'My awesome brick title',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-published2 javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-published';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-published\n    data-title=\"My awesome brick title\"\n></brick-published>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-published');\n  el.dataset.title = 'My awesome brick-title';\n  `}\n/>\n\n## Attributes overview for brick-published\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
+}

package/{data → dist/data}/components/brick-share.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-share",
-  "version": "0.3.4",
+  "version": "0.3.3",
   "selector": "brick-share-v0",
   "description": "brick-share component",
   "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-share.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-share\n\n## Purpose\n\nBrick-share triggers an action to share a link.\nIt will check whether the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) is supported.\nIf it is supported, it will use this to share the link, using the sharing mechanisms of the underlying operating system.\nIf it is not supported, it will display \"Kopier lenke\" or accompanying labelText and copy the provided link to the clipboard.\n\nIf no link is provided or if the url can not be parsed, it will share the address of the current page.\n\nBrick-share uses [brick-toast](https://master--60060c41f82e040021133482.chromatic.com/?path=/docs/bricks-brick-toast--documentation) to display success and error messages.\n\n<Canvas of={BrickStories.Share} />\n\n## Accessibility\n\nWhen native sharing mechanisms are triggered, all accessibility concerns are handled by the underlying operating system and are outside our control.This means that we can not control the accessibility when this is triggered.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-share'} />\n\n### Server side rendering\n\nIf possible, render the markup server-side\n\n#### Import and render from '@amedia/brick-share/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickShare } from '@amedia/brick-share/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const share = renderShare({\n      dataUrl: 'the url to be shared',\n      dataTitle: 'A company with a promising design system',\n      dataText: 'You should really check out this website',\n      dataShareLabel: 'Share link',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-share javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-share';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered server-side, there are two options creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-share\n    data-url=\"https://amedia.no\"\n></brick-share>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-share');\n  el.dataset.url = 'https://amedia.no';\n  `}\n/>\n\n## Attributes overview for brick-share\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"

package/{data → dist/data}/components/brick-stepper.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-stepper",
-  "version": "1.0.11",
+  "version": "1.0.10",
   "selector": "brick-stepper-v1",
   "description": "brick-stepper component",
   "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-stepper.stories';\n\n<Meta of={BrickStories} />\n\n# brick-stepper\n\n<br />\n\n## Purpose\n\nThis package exports a custom element called \"brick-stepper\" that can be used to show how many steps there are in a process, and which step the user is currently on. It can also show a label under each step, icons, reverse order of the\nsteps, and also takes accessibility into account by providing the possibility of adding an aria-label (other than the default provided). There are also texts hidden from sighted users that gives information about the state of the step they are on; \"Ferdig\" or \"Gjenstår\".\n\n<br />\n\n## How to use this component\n\nbrick-stepper can be used with both server side rendering and client side rendering.\nThe way to do this is by either:\n\n1. Using `<brick-stepper-v1>` or `createElement` for your markup (Client Side)\n2. Using the `renderBrickStepper` function to render markup (Server Side)\n\n---\n\n<br />\n\n### How to use brick-stepper - Client Side Rendering\n\n```js\nimport { BrickInput } from '@amedia/brick-stepper';\n\nconst markup = () => {\n  return `\n  <brick-stepper-v1 \n    data-steps=\"6\"\n    data-steps-current=\"2\"\n    data-steps-label=\"Steg\"\n  </brick-stepper-v1>\n  `;\n};\n```\n\n#### Now let's break it down.\n\n<br />\n\n#### 1. First you need to install brick-stepper as a dependency:\n\n```bash\nnpm install @amedia/brick-stepper\n```\n\nand import it into the file where you want to use it.\n\n```js\nimport { BrickStepper } from '@amedia/brick-stepper';\n```\n\nUse it in your markup:\n\n```html\n<brick-stepper-v1 data-steps=\"6\" data-steps-current=\"2\"></brick-stepper-v1>\n```\n\nor using createElement:\n\n```js\nconst stepper = document.createElement('brick-stepper');\nstepper.setAttribute('data-steps', '6');\nstepper.setAttribute('data-steps-current', '2');\n```\n\n### How to use brick-stepper - Server Side Rendering\n\n```js\nimport { renderBrickStepper } from '@amedia/brick-stepper/template';\n\nconst markup = () => {\n  return renderBrickStepper({\n    dataSteps: '6',\n    dataStepsCurrent: '2',\n    dataStepsLabel: 'Steg',\n  });\n};\n```\n\n**Note:** Se available attributes you can pass into the component in the table below 👇\n\n<br />\n\n## Attributes overview for brick-stepper\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-stepper-v1\n  data-steps=\"6\"\n  data-steps-current=\"2\"\n  data-steps-order=\"desc\"\n  data-steps-aria-label=\"Dager igjen av abonnementet\"\n  data-steps-label=\"Dag\"\n  data-steps-completed=\"2\"\n  data-steps-icon-lock=\"true\"\n  data-steps-icon-check=\"true\"\n>\n</brick-stepper-v1>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-stepper\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n"

package/{data → dist/data}/components/brick-tab.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-tab",
-  "version": "0.1.8",
+  "version": "0.1.7",
   "selector": "brick-tab-v0",
   "description": "brick-tab component",
   "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\nimport * as BrickStories from './brick-tab.stories';\nimport ReadMe from '../README.md?raw';\nimport { BrickStyle } from '../../../stories/brickStyle.js';\n\n<brick-style></brick-style>\n\n<Meta of={BrickStories} />\n\n# brick-tab\n\n## Purpose\n\nThe interactive tab button for use within the `brick-tabs` component.\n\n<div class=\"note\">\n  <p>\n    Do not use this component on its own. It must be used within\n    `brick-tablist`,`brick-tabpanel` and `brick-tabs`.\n  </p>\n</div>\n\n<Canvas of={BrickStories.Tab} sourceState=\"shown\" />\n\n## Accessibility\n\nSee `brick-tabs` for accessibility information.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-tab'} />\n\n### Server side rendering\n\nRender the markup serverside for best performance\n\n#### Import and render from '@amedia/brick-tab/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTab } from '@amedia/brick-tab/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderBrickTab({\n      dataLabel: 'My awesome tab',\n      dataButtonId: '1234567890',\n      dataPanelId: '0987654321',\n      dataIconId: 'arrow-left,\n      dataAvatarUrls: \"https://example.com/image1.jpg,https://example.com/image2.jpg\",\n    })\n`}\n/>\n\n### Client side\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\nUsing template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-tab\n    data-label=\"My awesome tab\"\n></brick-tab>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-tab');\n  el.dataset.label = 'My awesome tab';\n  `}\n/>\n\n## Attributes overview for brick-tab\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"

package/{data → dist/data}/components/brick-tabs.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-tabs",
-  "version": "0.1.9",
+  "version": "0.1.8",
   "selector": "brick-tabs-v0",
   "description": "brick-tabs component handling tablist, tabs and tabpanel",
   "category": "Navigation",

package/{data → dist/data}/components/brick-tag.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-tag",
-  "version": "0.0.8",
+  "version": "0.0.7",
   "selector": "brick-tag-v0",
   "description": "brick-tag component",
   "mdx": "import { Meta, Canvas, Source, Controls } from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-tag-link.stories';\n\n<Meta of={BrickStories} />\n\n# brick-tag\n\nbrick-tag is used to label information related to an item.\n\nBrick-tag is available in link variant - The tag can be used to navigate to a\nspecific url.\n\n{' '}\n\n<br />\n\n## Versions\n\n<br />\n\n### Default\n\nThe default form of a tag. Used for basic links in static texts.\n\n<Canvas of={BrickStories.Simple} />\n\n### Prominent\n\nProminent tags are larger and more visible. Used for important links or calls to action.\n\n<Canvas of={BrickStories.Prominent} />\n\n### Capsule\n\nCapsule tags are smaller and more subtle. Used for less important links or calls to action.\n\n<Canvas of={BrickStories.Capsule} />\n\n## Accessibility\n\nIf a you need to provide a more detailed description of the tag, use the `data-aria-label` attribute.\nIf you choose to override sizes or colors of the tag, make sure to validate that your overrides adhere to the **WCAG 2.1 AA** guidelines.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n{' '}\n\n<Source language=\"js\" code={'npm install @amedia/brick-tag'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside. This is recommended for performance reasons.\n\n##### Import and render from '@amedia/brick-tag/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTag } from '@amedia/brick-tag/template.js';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toggle = renderBrickTag({\n      dataText: 'Ullhunder',\n      dataLink: 'https://ba.no/tag/ullhunder',\n      dataVersion: 'simple',\n      dataSize: 'medium',\n      dataAriaLabel: 'Vis artikler om Ullhunder',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-tag javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-tag';\n  `}\n/>\n\n#### Create the DOM element\n\nThere are two options for creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-tag-v0\n    data-text=\"Ullhunder\"\n    data-link=\"https://ba.no/tag/ullhunder\"\n    data-version=\"simple\"\n    data-size=\"medium\"\n    data-aria-label=\"Vis artikler om Ullhunder\"\n></brick-tag-v0>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-tag-v0');\n  el.dataset.text = 'Ullhunder';\n  el.dataset.link = 'https://ba.no/tag/ullhunder';\n  el.dataset.version = 'simple';\n  el.dataset.size = 'medium';\n  el.dataset.ariaLabel = 'Vis artikler om Ullhunder';\n  `}\n/>\n\n## Attributes\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-tag is styled using CSS properties that must exist on the page.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing properties before resorting to custom properties.\nSometimes the default styling of the tag doesn't fit your needs. You can override the default styling using the following CSS properties. Make sure you scope the overrides to the tag.\n\n> **Note:** It is your responsibilty to validate that your overrides adhere to the **WCAG 2.1 AA** guidelines.\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-tag-link-color-fg</code>\n      </td>\n      <td>Controls the color of the tag</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleFg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-hover-fg</code>\n      </td>\n      <td>Controls the color of the tag on hover</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleFg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-font-size</code>\n      </td>\n      <td>Controls the font size of the tag</td>\n      <td>\n        <code>var(--brick-fontSizes-baseBodyM)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-color-bg</code>\n      </td>\n      <td>Controls the background color of the tag</td>\n      <td>\n        <code>var(--brick-colors-utilityInteractionSubtleBg)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tag-link-hover-bg</code>\n      </td>\n      <td>Controls the background color of the tag on hover</td>\n      <td>\n        <code>var(--brick-colors-utilitySecondaryHoverBg)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"

package/{data → dist/data}/components/brick-teaser-player.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-teaser-player",
-  "version": "1.0.22",
+  "version": "1.0.21",
   "selector": "brick-teaser-player-v1",
   "description": "brick-video-teaser component",
   "category": "Display",

package/{data → dist/data}/components/brick-teaser-reels.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-teaser-reels",
-  "version": "0.2.29",
+  "version": "0.2.28",
   "selector": "brick-teaser-reels-v0",
   "description": "brick-teaser-reels component",
   "category": "Display",

package/{data → dist/data}/components/brick-teaser.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-teaser",
-  "version": "19.2.5",
+  "version": "19.2.4",
   "selector": "brick-teaser-v19",
   "description": "Teaser component.",
   "category": "Display",

package/{data → dist/data}/components/brick-textarea.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-textarea",
-  "version": "2.0.4",
+  "version": "2.0.3",
   "selector": "brick-textarea-v2",
   "description": "brick-textarea component",
   "mdx": "import {\n  Meta,\n  Story,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-textarea.stories';\n\n<Meta of={BrickStories} />\n\n# brick-textarea\n\n## Purpose\n\n`brick-textarea` renders a multiline text input element. It lets users enter multiple lines of text, often used in a form.\n\nIt resizes automatically, but both size and resize options can be overwritten with CSS variables.\n\nValidation of the textarea value is done via the `pattern` attribute - if you provide it.\n\n<Canvas of={BrickStories.Textarea} />\n\n## Usage\n\nFirst you need to install the package in your project:\n\n{' '}\n\n<Source language=\"js\" code={'npm install @amedia/brick-textarea'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-textarea/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTextarea, } from '@amedia/brick-textarea/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const textarea = renderBrickTextarea({\n      dataLabel: 'My label text',\n    })\n`}\n/>\n\n### Client side\n\nNB! Make sure to also include brick-textarea javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-textarea';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-textarea-v2\n    data-label=\"This is my awesome brick-textarea\"\n></brick-textarea>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-textarea-v2');\n  el.dataset.label = 'My awesome brick-textarea';\n  `}\n/>\n\n## Attributes overview for brick-textarea\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n**Example:**\n\n```html\n<brick-textarea-v2\n  data-alt=\"Textarea for an obituary\"\n  data-label-text=\"Obituary\"\n  data-error-text=\"This is an error\"\n  data-help-text=\"Descriptive help\"\n  data-id=\"my-textarea\"\n  data-label-hidden=\"false\"\n  data-name=\"MyTextAreaName\"\n  data-max-length=\"1700\"\n  data-min-length=\"10\"\n  data-placeholder=\"Write your message here\"\n  data-required=\"true\"\n  data-optional-text=\"optional\"\n  data-pattern=\"[A-Za-z]\"\n  data-autofocus=\"true\"\n  data-value=\"Initial value\"\n>\n</brick-textarea-v2>\n```\n\n**NOTE!**\nWe use the `data-` prefix on the attributes.  \nNot all attributes need to be specified for every instance of the \"brick-input\" component, and some attributes have default values that will be used if they are not specified. The example above simply shows all available attributes for reference.\n\n## Styling and CSS Properties\n\nCSS Custom Properties can be used to customize the visual appearance.\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-textarea-height</code>\n      </td>\n      <td>\n        Use this CSS variable to set the `height` of the textarea. The textarea\n        will grow taller as the user types in more lines of text, but if height\n        is set, it will never shrink below that value.\n      </td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-textarea-width</code>\n      </td>\n      <td>\n        Use this to set the `width` CSS property of the `textarea` element.\n      </td>\n      <td>\n        <code>100%</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-textarea-resize</code>\n      </td>\n      <td>\n        Use this to set the `resize` CSS property of the `textarea` element. Use\n        this if you want the user to be able to resize the textarea manually, by\n        clicking and dragging.\n      </td>\n      <td>\n        <code>none</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"

package/{data → dist/data}/components/brick-toast.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-toast",
-  "version": "0.1.20",
+  "version": "0.1.19",
   "selector": "brick-toast-v0",
   "description": "brick-toast component",
   "category": "Feedback",

package/{data → dist/data}/components/brick-toggle.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-toggle",
-  "version": "3.1.7",
+  "version": "3.1.6",
   "selector": "brick-toggle-v3",
   "description": "brick-toggle component",
   "mdx": "import {\n  Meta,\n  Controls,\n  Canvas,\n  Source,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport ReadMe from '../README.md?raw';\nimport * as BrickStories from './brick-toggle.stories';\n\n<Meta of={BrickStories} />\n\n# brick-toggle\n\nIt represents a boolean option and allows the user to toggle between two states, checked or unchecked.\n\n<Canvas of={BrickStories.On} />\n\n## Purpose\n\nIt should be used in forms when an \"on/off\" or \"yes/no\" input is needed.\nUse it together with text to describe the purpose of the brick-toggle, together with a value attribute representing the on/off value.\nThis value shouldn't change when the state of the brick-toggle changes. Help text can also be used to provide additional guidance.\n\n## Accessibility\n\nThe element will self apply the attributes `role=\"switch\"` and `aria-checked=\"true\"` or `aria-checked=\"false\"`, in addition to `tabindex=0`.\n\nThe role attribute helps assistive technology like a screen reader tell the user what kind of control this is.\nThe ARIA switch role is functionally identical to the checkbox role, except that instead of representing \"checked\" and \"unchecked\" states, which are fairly generic in meaning, the switch role represents the states \"on\" and \"off.\" More about the [switch role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)\n\nThe tabindex attribute opts the element into the tab order, making it keyboard focusable and operable. To learn more about these two topics, check out [What can ARIA do?](https://web.dev/semantics-aria/#what-can-aria-do) and [Using tabindex](https://web.dev/using-tabindex/).\n\nClicking on the switch with a mouse, or space bar, toggles these checked states.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source\n  language=\"js\"\n  code={`\n    npm install @amedia/brick-toggle\n  `}\n/>\n\n### Server side rendering\n\nWhen rendering the markup serverside\n\n#### Import and render from '@amedia/brick-toggle/template'\n\n<Source\n  language=\"javascript\"\n  code={`\n    import { renderBrickToggle, } from '@amedia/brick-toggle/template';\n`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`\n    \n    const toggle = renderToggle({\n      dataLabel: 'Lightbulb',\n      dataKey: 'light',\n      dataOnText: 'På',\n      dataOffText: 'Av'\n    })\n`}\n/>\n\nNB! Make sure to also include brick-toggle javascript clientside for the events occurring in the client.\n\n### Client side\n\nIf the markup has been rendered serverside, the markup will not be recreated, but i.e eventlisteners will happen client side.\nInclude the client side class from the asset server with a script tag, or use import.\n\n#### Script tag\n\n<Source\n  language=\"html\"\n  code={`\n  <script\n  type=\"module\"\n  src=\"https://assets.acdn.no/pkg/@amedia/brick-toggle/<version>/brick-toggle.js\"\n></script>`}\n/>\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-toggle';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating brick-toggle client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`\n    <brick-toggle-v3\n    data-value=\"Lightbulb\"\n    data-on-text=\"On\"\n    data-off-text=\"Off\"\n></brick-toggle-v3>\n`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-toggle');\n  el.dataset.value = 'Lightbulb';\n  el.dataset.onText = 'On';\n  el.dataset.offText = 'Off';\n  `}\n/>\n\n#### Using Svelte?\n\nTake a look at this REPL: https://svelte.dev/repl/2b4763c4f6cd4a089376d02c170e434d\n\n**svelte**\n\n```svelte\n<script>\n  import '@amedia/brick-toggle';\n  function myEventHandler(event) {\n    console.log(event.detail);\n  }\n</script>\n\n<brick-toggle-v3\n  checked\n  data-value=\"Bryne\"\n  data-key=\"123\"\n  on:brick-toggle:change={myEventHandler}\n></brick-toggle-v3>\n```\n\nOutput when clicked:\n\n```json\n{ \"dataKey\": \"123\", \"dataLabel\": \"Bryne\", \"checked\": \"true\" }\n```\n\nhttps://css-tricks.com/using-custom-elements-in-svelte/\n\n**You just made a toggle switch with brick-toggle** 🎉\n\n## Custom Event : `brick-toggle:change`\n\nWhen the brick-toggle state changes, it fires a custom event: `brick-toggle:change`, and by listening to that event, the consumer will get an object with details.\n\n```js\nconst brickToggle = document.querySelector('[brick-component=\"brick-toggle\"]');\nbrickToggle.addEventListener('brick-toggle:change', (e) => {\n  console.log(e.detail); // { checked: \"true\", dataLabel: 'Bryne', dataKey=\"123\" }\n});\n```\n\n## Attributes overview for brick-toggle\n\nAll dataset attributes are synced to camelcased properties.\n\nI.e the property `dataOnText` is mirroring the attribute `data-on-text`.\n\nThese are the properties and dataset attributes available on brick-toggle:\n\n<Controls />\nAll dataset attributes can be read using `dataset.onText`, or\n`getAttribute('data-on-text')`.\n\n[Using attributes and properties](https://ultimatecourses.com/blog/using-attributes-and-properties-in-custom-elements)\n\n<Canvas />\n\n## Styling and CSS Properties\n\n🤝 brick-toggle is styled ausing custom CSS properties.\n\nCSS Custom Properties can be used to customize the visual appearance. It is recommended to use the existing variants before resorting to custom properties.\n\nMake sure you scope the overrides.\n\n<div className=\"note\">\n  <span>Note</span>\n  It is your responsibilty to validate that your overrides adhere to the **WCAG\n  2.1 AA** guidelines.\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-toggle-flex</code>\n      </td>\n      <td>\n        Controls the flex value of the label. Set it to 1 to allow it to take\n        100% width available\n      </td>\n      <td>\n        <code>0</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-toggle-order</code>\n      </td>\n      <td>\n        Controls the order of the visual toggle. Set it to 3 if you want it last\n        in the row.\n      </td>\n      <td>\n        <code>2</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Example using custom css properties\n\nThe following example has these custom properties in the css scoped to the area with the list of toggles.\n\n```\n'--b-toggle-flex': 1,\n'--b-toggle-order': 3,\n```\n\n<Canvas of={BrickStories.SampleList} />\n\n## Theming\n\nbrick-toggle comes with style and are using using brick-tokens.\n\nThe theme classname must be set higher in the DOM tree, a parant `div` or even the `body` element.\n\n<Markdown>{ReadMe}</Markdown>\n\n## References\n\n- [w3ariaswitch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch/)\n- [deque example](https://dequeuniversity.com/rules/axe/4.6/aria-toggle-field-name?application=axeAPI)\n- https://web.dev/components-howto-checkbox/\n- https://css-tricks.com/using-custom-elements-in-svelte/\n- https://blog.bitsrc.io/building-your-own-web-component-library-b4f6b419cc0b\n- https://ultimatecourses.com/blog/using-attributes-and-properties-in-custom-elements\n- https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/\n- https://javascript.works-hub.com/learn/web-components-api-lifecycle-events-and-custom-events-66668\n- https://bradfrost.com/blog/post/lets-talk-about-web-components/\n- [Svelte Repl](https://svelte.dev/repl/67c8a913386240a8b8427408342bc502?version=3.55.1)\n- https://blog.openreplay.com/an-introduction-to-native-web-components/\n\n```\n\n```\n"

package/{data → dist/data}/components/brick-tokens.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-tokens",
-  "version": "5.19.6",
+  "version": "5.19.5",
   "selector": "brick-tokens-v5",
   "description": "Tokens package",
   "category": "Utilities",

package/{data → dist/data}/components/brick-tooltip.json RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "brick-tooltip",
-  "version": "1.0.10",
+  "version": "1.0.9",
   "selector": "brick-tooltip-v1",
   "description": "brick-tooltip component",
   "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-tooltip.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n## Purpose\n\nThis component can be used to display a contextual text bubble that displays a short description for an element, and that appears on pointer hover, keyboard focus or touch.\n\nBecause the tooltip itself never receives focus and is not in the tabbing order, a tooltip can not contain interactive elements like links, inputs, or buttons.\n\n## Accessibility\n\nThe tooltip should be used to provide additional information about an element, and should not be used to convey critical information. The tooltip should be short and concise, and should not contain more than 200 characters.\n\nThe tooltip is displayed on hover, focus or touch, and is dismissed when the pointer leaves the element, the element loses focus, the user touches outside the tooltip, or presses the Escape key.\n\nScreen readers will announce the tooltip when the element receives focus.\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-tooltip'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-tooltip/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickTooltip, } from '@amedia/brick-tooltip/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const markup = renderBrickTooltip({\n    dataAnchor: 'tooltip-trigger-1',\n    dataText: 'Tooltip text',\n    dataPosition: 'below',\n    dataTail: 'true',\n    })\n`}\n/>\n\n**NB! Make sure to also include brick-tooltip javascript clientside for events and code running in the client:**\n\nE.g.\n\n`import 'https://assets.acdn.no/pkg/@amedia/brick-tooltip/v0/brick-tooltip.js';`\n\nor\n\n`script type=\"module src=\"https://assets.acdn.no/pkg/@amedia/brick-tooltip/v0/brick-tooltip.js\"></script>`\n\n### Client side\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-tooltip';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\n\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-tooltip-v1 \n    data-anchor=\"tooltip-trigger-1\" \n    data-text=\"Tooltip text\" \n    data-position=\"below\" \n    data-tail=\"true\">\n  </brick-tooltip-v1>`}\n/>\n\nExample: Using javascript\n\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-tooltip-v1');\n  el.dataset.for = 'tooltip-trigger-1';\n  el.dataset.tooltip = 'Tooltip text';\n  el.dataset.position = 'below';\n  el.dataset.tail = 'true';\n  `}\n/>\n\n## Connecting the tooltip to a trigger element\n\nIn order to connect the tooltip to a trigger element, the `data-anchor` attribute must be set to the id of the trigger element. In the example below, the tooltip is connected to a paragraph element with the id `tooltip-6p3ffk0urk4`.\n\n```html\n<p id=\"tooltip-6p3ffk0urk4\">Personalisert innhold</p>\n<brick-tooltip-v1\n  data-anchor=\"tooltip-6p3ffk0urk4\"\n  data-text=\"Du ser denne teaseren fordi du har vist interesse for temaet tidligere\"\n  data-position=\"right\"\n  data-tail=\"true\"\n>\n</brick-tooltip-v1>\n```\n\n**NOTE:**\nThe trigger element must have a unique id. One easy way of implementing this is:\n\n```js\nconst tooltipTriggerId = `tooltip-${Math.random().toString(36).substring(2)}`;\n```\n\nor if you allready have UUID available in your application you can use that for even more robustness.\n\n## Attributes for brick-tooltip\n\nAll dataset attributes are synced to camelcased properties.\n\n<Controls />\n\n## Styling and CSS Properties\n\n🤝 brick-tooltip is partially styled using CSS properties that must exist on the page.\n\nIt is possible to use CSS custom properties to override the default styles of the background color and text color.\nHere we show how to override the default colors with another color token:\n\n```css\n--b-tooltip-color-fg: var(--brick-colors-baseSubtleFg);\n--b-tooltip-color-bg: var(--brick-colors-baseSubtleBg);\n```\n\n<div className=\"note\">\n  <span>**Note**</span>\n  It is your responsibilty to validate that your override colors adhere to the\n  **WCAG 2.1 AA** guidelines. Check here to be sure:\n  [https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th>Property</th>\n      <th>Description</th>\n      <th>Default</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>\n        <code>--b-tooltip-color-bg</code>\n      </td>\n      <td>\n        Controls the background color of the tooltip, using [color\n        tokens](?path=/story/brick-tokens-tokens--colors-base)\n      </td>\n      <td>\n        <code>var(--brick-colors-baseNeutral00)</code>\n      </td>\n    </tr>\n    <tr>\n      <td>\n        <code>--b-tooltip-color-fg</code>\n      </td>\n      <td>\n        Controls the text color of the tooltip, using [color\n        tokens](?path=/story/brick-tokens-tokens--colors-base)\n      </td>\n      <td>\n        <code>var(--brick-colors-baseNeutral900)</code>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n## Caveats for use\n\nThere is a known issue with the tooltip not being positioned correctly when the trigger element or its parent has a `translate: transform` property. This is due to the way the tooltip is positioned using the `getBoundingClientRect()` method, which the transform property negates.\n\n<br />\n<br />\n<br />\n\n<Markdown>{ReadMe}</Markdown>\n"