@amedia/brick-mcp 0.1.3 → 0.1.5

package/dist/data/components/brick-tooltip.md

@@ -0,0 +1,249 @@
+---
+name: brick-tooltip
+version: 1.0.17
+selector: brick-tooltip-v1
+category: Feedback
+tags: [tooltip, hint, help, popover, overlay, positioning]
+use_cases: [help-text, additional-info, icon-explanations, contextual-help]
+related: [brick-tokens, brick-template]
+---
+
+# Brick Tooltip
+
+A contextual help component that displays additional information when hovering over or focusing on an anchor element, with configurable positioning and optional tail indicator.
+
+## Key Capabilities
+
+- Four positioning options (above, below, left, right)
+- Anchored to any element via ID reference
+- Optional visual tail/arrow
+- Hover and focus trigger support
+- Automatic positioning within viewport
+- Accessibility support with proper ARIA
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute        | Type                                    | Default  | Required | Description                                    |
+| ---------------- | --------------------------------------- | -------- | -------- | ---------------------------------------------- |
+| `data-anchor`    | string                                  | -        | yes      | ID of the element to anchor the tooltip to     |
+| `data-text`      | string                                  | -        | yes      | Tooltip text content                           |
+| `data-position`  | `"above" \| "below" \| "left" \| "right"` | `"above"` | no       | Position relative to anchor element            |
+| `data-tail`      | string                                  | `"false"` | no       | Set to "true" to show visual tail/arrow        |
+
+## Examples
+
+### Basic Tooltip (Above)
+
+```html
+<button id="help-btn">Help</button>
+<brick-tooltip-v1
+  data-anchor="help-btn"
+  data-text="Click for more information"
+>
+</brick-tooltip-v1>
+```
+
+### Tooltip Below
+
+```html
+<span id="username">John Doe</span>
+<brick-tooltip-v1
+  data-anchor="username"
+  data-text="Premium member since 2020"
+  data-position="below"
+>
+</brick-tooltip-v1>
+```
+
+### Tooltip with Tail
+
+```html
+<button id="save-btn">Save</button>
+<brick-tooltip-v1
+  data-anchor="save-btn"
+  data-text="Save your changes"
+  data-position="above"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Left Positioned
+
+```html
+<span id="info-icon">ℹ️</span>
+<brick-tooltip-v1
+  data-anchor="info-icon"
+  data-text="Additional information about this feature"
+  data-position="left"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Right Positioned
+
+```html
+<button id="delete-btn">Delete</button>
+<brick-tooltip-v1
+  data-anchor="delete-btn"
+  data-text="This action cannot be undone"
+  data-position="right"
+>
+</brick-tooltip-v1>
+```
+
+## Programmatic Usage
+
+```javascript
+// Create tooltip dynamically
+const tooltip = document.createElement('brick-tooltip-v1');
+tooltip.dataAnchor = 'my-button';
+tooltip.dataText = 'Helpful information';
+tooltip.dataPosition = 'below';
+tooltip.dataTail = 'true';
+document.body.appendChild(tooltip);
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTooltip } from '@amedia/brick-tooltip/template';
+
+const html = renderBrickTooltip({
+  dataAnchor: 'help-icon',
+  dataText: 'This is a helpful tooltip',
+  dataPosition: 'above',
+  dataTail: 'true',
+});
+```
+
+## Positioning
+
+The tooltip automatically positions itself relative to the anchor element:
+
+- **above**: Tooltip appears above the anchor
+- **below**: Tooltip appears below the anchor
+- **left**: Tooltip appears to the left of the anchor
+- **right**: Tooltip appears to the right of the anchor
+
+If there isn't enough space in the specified position, the tooltip may adjust to stay within the viewport.
+
+## Accessibility
+
+- Tooltip is announced to screen readers
+- Anchor element receives `aria-describedby` pointing to tooltip
+- Tooltip appears on both hover and keyboard focus
+- ESC key dismisses tooltip
+- Proper ARIA roles and attributes
+
+## Common Patterns
+
+### Icon with Tooltip
+
+```html
+<brick-icon id="help-icon" data-icon-id="help-circle"></brick-icon>
+<brick-tooltip-v1
+  data-anchor="help-icon"
+  data-text="Click to learn more about this feature"
+  data-position="right"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Form Field Help
+
+```html
+<label for="email">Email Address
+  <span id="email-help">?</span>
+</label>
+<input type="email" id="email" aria-describedby="tooltip-email">
+
+<brick-tooltip-v1
+  id="tooltip-email"
+  data-anchor="email-help"
+  data-text="We'll never share your email address"
+  data-position="right"
+>
+</brick-tooltip-v1>
+```
+
+### Button Explanation
+
+```html
+<button id="advanced-btn" aria-describedby="advanced-tooltip">
+  Advanced Settings
+</button>
+<brick-tooltip-v1
+  id="advanced-tooltip"
+  data-anchor="advanced-btn"
+  data-text="Configure advanced options for power users"
+  data-position="below"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  let anchorId = 'my-element';
+</script>
+
+<button id={anchorId}>Hover me</button>
+<brick-tooltip-v1
+  data-anchor={anchorId}
+  data-text="Helpful information"
+  data-position="above"
+  data-tail="true"
+/>
+```
+
+### React
+
+```jsx
+function ComponentWithTooltip() {
+  const id = 'help-button';
+
+  return (
+    <>
+      <button id={id}>Help</button>
+      <brick-tooltip-v1
+        data-anchor={id}
+        data-text="Get help and support"
+        data-position="below"
+      />
+    </>
+  );
+}
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-tooltip-v1`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: Positioned overlay element
+- **SSR Compatible**: Yes, with template function
+- **Positioning**: Absolute positioning relative to anchor
+
+## Important Notes
+
+- The anchor element must have a unique ID
+- The anchor element must exist in the DOM when tooltip is created
+- Tooltip visibility is controlled by CSS (hover/focus on anchor)
+- The tail/arrow is purely visual and doesn't affect positioning logic
+- Long tooltip text may wrap or require position adjustment
+- Tooltips should be kept concise for best UX
+- Multiple tooltips can exist on the same page for different anchors
+
+## Version
+
+Current version: 1.0.17

package/dist/data/components-metadata.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "brick-alt-teaser",
-    "version": "8.0.73",
+    "version": "8.1.1",
     "selector": "brick-alt-teaser-v8",
     "category": "Display",
     "tags": [
@@ -10,7 +10,7 @@
   },
   {
     "name": "brick-avatar",
-    "version": "0.2.42",
+    "version": "0.2.45",
     "selector": "brick-avatar-v0",
     "description": "brick-avatar component",
     "category": "Display",
@@ -20,7 +20,7 @@
   },
   {
     "name": "brick-button",
-    "version": "9.4.1",
+    "version": "9.4.3",
     "selector": "brick-button-v9",
     "category": "Forms",
     "tags": [
@@ -30,13 +30,13 @@
   },
   {
     "name": "brick-byline",
-    "version": "1.0.3",
+    "version": "1.0.7",
     "selector": "brick-byline-v1",
     "description": "brick-byline component"
   },
   {
     "name": "brick-card",
-    "version": "7.3.15",
+    "version": "7.3.17",
     "selector": "brick-card-v7",
     "category": "Layout",
     "tags": [
@@ -45,7 +45,7 @@
   },
   {
     "name": "brick-carousel",
-    "version": "2.2.4",
+    "version": "2.2.6",
     "selector": "brick-carousel-v2",
     "description": "Simple carousel for any content passed to it.",
     "category": "Display",
@@ -55,8 +55,8 @@
   },
   {
     "name": "brick-classnames",
-    "version": "2.1.0",
-    "selector": "brick-classnames-v2",
+    "version": "3.0.1",
+    "selector": "brick-classnames-v3",
     "description": "Utility method to create a safe string from a design name",
     "category": "Utilities",
     "tags": [
@@ -65,13 +65,13 @@
   },
   {
     "name": "brick-countdown",
-    "version": "2.0.14",
+    "version": "2.0.16",
     "selector": "brick-countdown-v2",
     "description": "brick-countdown component"
   },
   {
     "name": "brick-dialog",
-    "version": "2.0.20",
+    "version": "2.1.0",
     "selector": "brick-dialog-v2",
     "description": "brick-dialog component",
     "category": "Feedback",
@@ -81,7 +81,7 @@
   },
   {
     "name": "brick-expand",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "selector": "brick-expand-v0",
     "description": "brick-expand component"
   },
@@ -97,13 +97,13 @@
   },
   {
     "name": "brick-helloworld",
-    "version": "2.0.8",
+    "version": "2.0.10",
     "selector": "brick-helloworld-v2",
     "description": "Brick Hello World component"
   },
   {
     "name": "brick-icon",
-    "version": "2.3.7",
+    "version": "2.3.9",
     "selector": "brick-icon-v2",
     "category": "Display",
     "tags": [
@@ -112,13 +112,13 @@
   },
   {
     "name": "brick-illustrations",
-    "version": "1.2.5",
+    "version": "1.2.6",
     "selector": "brick-illustrations-v1",
     "description": "brick-illustrations"
   },
   {
     "name": "brick-image",
-    "version": "6.0.10",
+    "version": "6.0.12",
     "selector": "brick-image-v6",
     "category": "Display",
     "tags": [
@@ -127,7 +127,7 @@
   },
   {
     "name": "brick-input",
-    "version": "3.0.14",
+    "version": "3.0.16",
     "selector": "brick-input-v3",
     "description": "brick-input component",
     "category": "Forms",
@@ -136,50 +136,44 @@
       "interactive"
     ]
   },
-  {
-    "name": "brick-nifs",
-    "version": "0.0.7",
-    "selector": "brick-nifs-v0",
-    "description": "brick-nifs component"
-  },
   {
     "name": "brick-pill",
-    "version": "9.0.8",
+    "version": "9.0.10",
     "selector": "brick-pill-v9"
   },
   {
     "name": "brick-player",
-    "version": "1.27.25",
-    "selector": "brick-player-v1",
+    "version": "2.0.1",
+    "selector": "brick-player-v2",
     "description": "Component for playing video and audio files"
   },
   {
     "name": "brick-published",
-    "version": "4.0.6",
+    "version": "4.0.8",
     "selector": "brick-published-v4",
     "description": "brick-published"
   },
   {
     "name": "brick-share",
-    "version": "0.3.11",
+    "version": "0.3.13",
     "selector": "brick-share-v0",
     "description": "brick-share component"
   },
   {
     "name": "brick-stepper",
-    "version": "1.0.17",
+    "version": "1.0.19",
     "selector": "brick-stepper-v1",
     "description": "brick-stepper component"
   },
   {
     "name": "brick-tab",
-    "version": "0.1.13",
+    "version": "0.1.15",
     "selector": "brick-tab-v0",
     "description": "brick-tab component"
   },
   {
     "name": "brick-tabs",
-    "version": "0.1.14",
+    "version": "0.1.16",
     "selector": "brick-tabs-v0",
     "description": "brick-tabs component handling tablist, tabs and tabpanel",
     "category": "Navigation",
@@ -189,13 +183,13 @@
   },
   {
     "name": "brick-tag",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "selector": "brick-tag-v0",
     "description": "brick-tag component"
   },
   {
     "name": "brick-teaser",
-    "version": "21.0.1",
+    "version": "21.2.4",
     "selector": "brick-teaser-v21",
     "description": "Teaser component.",
     "category": "Display",
@@ -205,7 +199,7 @@
   },
   {
     "name": "brick-teaser-player",
-    "version": "1.0.31",
+    "version": "1.1.1",
     "selector": "brick-teaser-player-v1",
     "description": "brick-video-teaser component",
     "category": "Display",
@@ -215,7 +209,7 @@
   },
   {
     "name": "brick-teaser-reels",
-    "version": "0.4.4",
+    "version": "0.4.6",
     "selector": "brick-teaser-reels-v0",
     "description": "brick-teaser-reels component",
     "category": "Display",
@@ -225,19 +219,19 @@
   },
   {
     "name": "brick-textarea",
-    "version": "2.0.9",
+    "version": "2.0.11",
     "selector": "brick-textarea-v2",
     "description": "brick-textarea component"
   },
   {
     "name": "brick-themes",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "selector": "brick-themes-v1",
     "description": "Brick theme names"
   },
   {
     "name": "brick-toast",
-    "version": "0.1.27",
+    "version": "0.1.29",
     "selector": "brick-toast-v0",
     "description": "brick-toast component",
     "category": "Feedback",
@@ -247,14 +241,14 @@
   },
   {
     "name": "brick-toggle",
-    "version": "3.1.13",
+    "version": "3.1.15",
     "selector": "brick-toggle-v3",
     "description": "brick-toggle component"
   },
   {
     "name": "brick-tokens",
-    "version": "5.21.0",
-    "selector": "brick-tokens-v5",
+    "version": "6.0.1",
+    "selector": "brick-tokens-v6",
     "description": "Tokens package",
     "category": "Utilities",
     "tags": [
@@ -263,7 +257,7 @@
   },
   {
     "name": "brick-tooltip",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "selector": "brick-tooltip-v1",
     "description": "brick-tooltip component"
   }

package/dist/data/tokens.json

@@ -4008,13 +4008,6 @@
     "description": "Mellomstor tekst til bruk i tabeller.",
     "cssVariable": "font-family: var(--brick-fonts-baseTabularM);\nfont-size: var(--brick-fontSizes-baseTabularM);\nfont-weight: var(--brick-fontWeights-baseTabularM);\nletter-spacing: var(--brick-letterSpacings-baseTabularM);\nline-height: var(--brick-lineHeights-baseTabularM);"
   },
-  {
-    "path": "typography.base.test",
-    "name": "baseTest",
-    "type": "typography",
-    "value": "400 16px/1.4 'National 2'",
-    "cssVariable": "font-family: var(--brick-fonts-baseTest);\nfont-size: var(--brick-fontSizes-baseTest);\nfont-weight: var(--brick-fontWeights-baseTest);\nletter-spacing: var(--brick-letterSpacings-baseTest);\nline-height: var(--brick-lineHeights-baseTest);"
-  },
   {
     "path": "typography.article.body.s",
     "name": "articleBodyS",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@amedia/brick-mcp",
   "homepage": "https://github.com/amedia/brick.git",
   "author": "Amedia",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "This is a MCP server for Brick",
   "license": "MIT",
   "type": "module",
@@ -31,47 +31,47 @@
   },
   "dependencies": {
     "@fastify/cors": "11.1.0",
-    "@modelcontextprotocol/sdk": "1.24.3",
+    "@modelcontextprotocol/sdk": "1.25.2",
     "fastify": "5.6.1",
     "zod": "3.25.76",
     "zod-to-json-schema": "3.24.6"
   },
   "devDependencies": {
-    "@amedia/brick-alt-teaser": "*",
-    "@amedia/brick-avatar": "*",
-    "@amedia/brick-button": "*",
-    "@amedia/brick-byline": "*",
-    "@amedia/brick-card": "*",
-    "@amedia/brick-carousel": "*",
-    "@amedia/brick-classnames": "*",
-    "@amedia/brick-countdown": "*",
-    "@amedia/brick-dialog": "*",
-    "@amedia/brick-expand": "*",
-    "@amedia/brick-fonts": "*",
-    "@amedia/brick-helloworld": "*",
-    "@amedia/brick-icon": "*",
-    "@amedia/brick-icons": "*",
-    "@amedia/brick-illustrations": "*",
-    "@amedia/brick-image": "*",
-    "@amedia/brick-input": "*",
-    "@amedia/brick-pill": "*",
-    "@amedia/brick-player": "*",
-    "@amedia/brick-published": "*",
-    "@amedia/brick-share": "*",
-    "@amedia/brick-stepper": "*",
-    "@amedia/brick-tab": "*",
-    "@amedia/brick-tabs": "*",
-    "@amedia/brick-tag": "*",
-    "@amedia/brick-teaser": "*",
-    "@amedia/brick-teaser-player": "*",
-    "@amedia/brick-teaser-reels": "*",
-    "@amedia/brick-template": "*",
-    "@amedia/brick-textarea": "*",
-    "@amedia/brick-themes": "*",
-    "@amedia/brick-toast": "*",
-    "@amedia/brick-toggle": "*",
-    "@amedia/brick-tokens": "*",
-    "@amedia/brick-tooltip": "*"
+    "@amedia/brick-alt-teaser": "8.1.1",
+    "@amedia/brick-avatar": "0.2.45",
+    "@amedia/brick-button": "9.4.3",
+    "@amedia/brick-byline": "1.0.7",
+    "@amedia/brick-card": "7.3.17",
+    "@amedia/brick-carousel": "2.2.6",
+    "@amedia/brick-classnames": "3.0.1",
+    "@amedia/brick-countdown": "2.0.16",
+    "@amedia/brick-dialog": "2.1.0",
+    "@amedia/brick-expand": "0.0.9",
+    "@amedia/brick-fonts": "2.0.2",
+    "@amedia/brick-helloworld": "2.0.10",
+    "@amedia/brick-icon": "2.3.9",
+    "@amedia/brick-icons": "2.2.2",
+    "@amedia/brick-illustrations": "1.2.6",
+    "@amedia/brick-image": "6.0.12",
+    "@amedia/brick-input": "3.0.16",
+    "@amedia/brick-pill": "9.0.10",
+    "@amedia/brick-player": "2.0.1",
+    "@amedia/brick-published": "4.0.8",
+    "@amedia/brick-share": "0.3.13",
+    "@amedia/brick-stepper": "1.0.19",
+    "@amedia/brick-tab": "0.1.15",
+    "@amedia/brick-tabs": "0.1.16",
+    "@amedia/brick-tag": "0.0.15",
+    "@amedia/brick-teaser": "21.2.4",
+    "@amedia/brick-teaser-player": "1.1.1",
+    "@amedia/brick-teaser-reels": "0.4.6",
+    "@amedia/brick-template": "2.0.1",
+    "@amedia/brick-textarea": "2.0.11",
+    "@amedia/brick-themes": "1.0.2",
+    "@amedia/brick-toast": "0.1.29",
+    "@amedia/brick-toggle": "3.1.15",
+    "@amedia/brick-tokens": "6.0.1",
+    "@amedia/brick-tooltip": "1.0.18"
   },
   "eik": {
     "server": "https://assets.acdn.no",

package/data/components/brick-mcp.json

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

package/data/components/brick-pill.json

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

package/data/components/brick-player.json

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