@amedia/brick-mcp 0.1.3 → 0.1.4

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-template",
-  "version": "1.3.1",
-  "selector": "brick-template-v1",
-  "description": "Web Component template for @amedia/brick",
-  "category": "Utilities",
-  "tags": ["utilities"],
-  "mdx": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Getting started/Development/brick-template/Documentation\" />\n\n<brick-style></brick-style>\n\n# brick-template (internal)\n\n`brick-template` is an internal package handling some of the boilerplate when building brick-\\* web components.\n\n```bash\nbrick-template:\n  <private>\n  - /src/lib\n     # Exporting a web component, \"BrickElement\". Handling some of the boilerplate for webcomponents.\n     |- template.ts\n     # Exporting a decorator used to declare the custom element.\n     |_ utils.ts\n  # Exporting BrickElement class, defineCustomElement-decorator mm.\n  - src/index.ts\n```\n\n`brick-template` can be used as base class for web components, both vanillajs and Svelte. It only implements a standard Web Component.\n\n## Usage\n\nCreate a folder under _/packages/_ named _brick-helloworld_ with following structure:\n\n```bash\npackages/brick-helloworld:\n- /src\n  # The web component class\n  |- brickHelloworld.ts\n  # exporting web component from brickHelloworld.ts and render function from template.ts\n  |- index.ts\n  # the markup and render function, also export your type interface\n  |- template.ts\n  # styling, exporting all css classes to be used\n  |- styles.js\n- /stories\n  # Stories need to be named consistently to show up in the correct spot in the menu\n  # The stories you need to demonstrate your component, with title `Bricks/brick-brickhelloworld`.\n  |- brickHelloworld.stories.js\n  # The mdx containing rich documentation of your comoponent, with title \"Bricks/brick-helloworld/Documentation\"\n  |- brickHelloworld.mdx\n- /tests\n  # Test files\n  |- template.test.ts (for testing your render function)\n\n# This build file is used when building each package\n- build.js\n# Changelog and Readme\n- CHANGELOG.md\n- README.md\n```\n\nLets look at each files:\n\n### index.ts\n\n```bash\nexport { renderBrickHelloworld } from './template';\nexport { BrickHelloworld } from './brickHelloworld';\n\n```\n\n### brickHelloworld.ts\n\n```bash\n# packages/brick-myawesomecomponent/src/brickMyAwesomeComponent.ts\n\nimport { BrickElement, defineCustomElement } from \"@amedia/brick-template\";\n\nimport { brickHelloworldtemplate } from './template';\nimport type { BrickHelloworldData } from './types.js';\n\n\n@defineCustomElement({\nselector: \"brick-helloworld\",\n})\n\nclass BrickHelloworld extends BrickElement implements BrickHelloworldData {\n\n  dataText?:string;\n  dataVersion?:string;\n\n  constructor(data: BrickHelloworldData) {\n    super();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n  }\n\n  # This will be called when any children of the component is rendered.\n  # Update the attribute 'children-rendered' and use the lifecycle methods attributeChangedCallback to respond to it.\n  childrenRenderedCallback() {\n    this.setAttribute('children-rendered', 'true');\n  }\n\n  # THe HTML getter is then used by brick-template to cloning contents from a <template> element. This is more performant than using innerHTML because it avoids additional HTML parse costs.\n  get HTML() {\n    return brickHelloworldtemplate({\n      dataText: this.dataText || '',\n      dataVersion: this.dataVersion || '',\n    });\n  }\n\n  # Attributes should almost always have mirrored properties. However, we don't just use the observedAttributes array as the source for this integration, because you may often want to write custom getter/setter functions for some attributes\n  # This is required to make sure that the attribute is updated when the property is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  static get mirroredProps() {\n    return ['data-text', 'data-version'];\n  }\n\n  # The observedAttributes array is used to tell the browser which attributes to watch for changes. This is required to make sure that the property is updated when the attribute is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  static get observedAttributes() {\n    return ['children-rendered'];\n  }\n\n  # The attributeChangedCallback is called when an attribute is changed. This is required to make sure that the property is updated when the attribute is changed, and makes it easer to use in frameworks like Svelte and Preact, which heuristically set properties instead of attributes.\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    if(oldValue === newValue) return;\n    if (name === 'children-rendered' && newValue === 'true') {\n      this.processTemplates();\n    }\n  }\n  # This is called by the attributeChangedCallback when the attribute 'children-rendered' is updated to true.\n  processTemplates() {\n    console.log('Children has rendered: ${this}');\n    # ...\n  }\n}\n\n```\n\n### src/styles.js\n\n```bash\nimport { css } from '@amedia/brick-tokens';\nexport const titleClass = css({\n    color: '$supportiveBlackText'\n    backgroundColor: '$supportiveBlackBg'\n});\n\n```\n\n### src/template.ts\n\n```bash\n\nimport { titleClass } from './styles.js';\n\nimport type { BrickHelloworldData } from './types.js';\n\nexport const brickHelloworldTemplate=(data:BrickHelloworldData) => {\n  const {title, isRendered} = data;\n  const markup = `<h1 class=\"${titleClass}\">Brick is Awesome! ${title}</h1>`;\n # If isRendered ==='true' it means the markup is rendered serverside, so we do not want to update the DOM client side.\n  if(isRendered){\n     return `<brick-helloworld data-title=\"${title}\" is-rendered >${markup}</brick-helloworld>`;\n  }\n  # if not, we return the markup that will be attached to the DOM client side, by our web component classs\n  return `${markup}`\n}\n\nexport const renderBrickHelloworld = (dataset: BrickHelloworldData) => {\n  const { title isRendered = true } = data;\n  const { dataVersion, dataText, isRendered = true } = dataset;\n  return `${brickHelloworldtemplate({\n    dataVersion,\n    dataText,\n    isRendered,\n  })}`;\n};\n\n```\n\n### types.ts\n\n```bash\nimport type { BrickHelloworld } from './brickHelloworld.js';\n\nexport interface BrickHelloworldData {\n  dataText?: string | undefined;\n  dataVersion?: string | undefined;\n  isRendered?: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'brick-helloworld': BrickHelloworld;\n  }\n}\n\n```\n\n### build.js\n\n```bash\nimport { build } from '../../esbuild.config.js';\n\nbuild({\n  entryPoints: ['src/index.ts'],\n});\n\n```\n\n### package.json\n\nYour package needs a package.json where your dependencies and dev dependencies are listed, and also some scripts:\n\n```bash\n# package.json\n\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.mjs\",\n  \"type\": \"module\",\n  \"browser\": {\n    \"./dist/index.mjs\": \"./dist/eik/brick-helloworld.js\"\n  },\n  \"exports\": {\n    \".\": {\n      \"import\": \"./dist/index.mjs\",\n      \"default\": \"./dist/eik.js\"\n    },\n    \"./template\": {\n      \"import\": \"./template/index.mjs\",\n      \"default\": \"./template/index.mjs\"\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"template\"\n  ],\n\n \"scripts\": {\n    \"build\": \"node build.js\",\n    \"build:dev\": \"NODE_ENV=development node build.js\",\n    \"clean\": \"rimraf dist && echo 🧹 Cleaned \\\\'dist\\\\'\"\n  },\n\n   \"eik\": {\n    \"server\": \"https://assets.acdn.no\",\n    \"files\": \"./dist/eik\"\n  },\n\n  # We use hard versions\n   \"dependencies\": {\n    \"@amedia/brick-tokens\": \"3.0.0\",\n    \"@amedia/brick-template\": \"1.0.6\"\n    \"...\"\n  }\n\n  # Eik config\n  \"eik\": {\n    \"server\": \"https://assets.acdn.no\",\n    \"files\": {\n      \"brick-helloworld.js\": \"./dist/eik/brick-helloworld.js\",\n      \"brick-helloworld.js.map\": \"./dist/eik/brick-helloworld.js.map\",\n      \"index.d.ts\": \"./dist/index.d.ts\",\n      \"template.js\": \"./dist/eik/template.js\"\n    }\n  },\n\n```\n\n### /stories\n\nWe use Storybook when developing locally. Write your stories to demonstrate each state of your web component.\n\n### /tests\n\nWrite unit tests for calculation. Use your stories as state mock data for your tests. Take a look at `brick-helloworld` and see how it can be done.\n"
-}

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

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

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

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

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

@@ -1,9 +0,0 @@
-{
-  "name": "brick-toast",
-  "version": "0.1.20",
-  "selector": "brick-toast-v0",
-  "description": "brick-toast component",
-  "category": "Feedback",
-  "tags": ["feedback"],
-  "mdx": "import {\n  Meta,\n  Canvas,\n  Source,\n  Controls,\n  Markdown,\n} from '@storybook/addon-docs/blocks';\n\nimport * as BrickStories from './brick-toast.stories';\n\nimport ReadMe from '../README.md?raw';\n\n<Meta of={BrickStories} />\n\n# brick-toast\n\n## Purpose\n\nThe brick-toast component is used to display non-intrusive notifications to users. It shows a temporary message that appears and automatically disappears after a certain period of time. Toast notifications are useful for providing feedback about the result of an action (success, error, warning) without interrupting the user's workflow.\n\n<Canvas of={BrickStories.Success} />\n\n## Accessibility\n\n- Toast notifications use `role=\"status\"` to ensure screen readers announce the content.\n- `role=\"status\"` will implicitely give the component `aria-live=\"polite\"` and `aria-atomic=\"true\"` properties which announce content changes without interrupting the current task. These two implicit properties are set explicitly - for transparency, as it might not be common knowledge what `role=\"status\"` actually does.\n- The close button includes an aria-label with instructions and the duration information\n- Focus management: The toast returns focus to the trigger element when closed\n- The toast pauses its auto-hide timer when hovered or focused, improving accessibility for users who need more time to read\n\n## Usage\n\nFirst you need to install the package in your project:\n\n<Source language=\"js\" code={'npm install @amedia/brick-toast'} />\n\n### Server side rendering\n\nIf possible, render the markup serverside\n\n#### Import and render from '@amedia/brick-toast/template'\n\n<Source\n  language=\"javascript\"\n  code={`import { renderBrickToast } from '@amedia/brick-toast/template';`}\n/>\n\n<Source\n  language=\"javascript\"\n  code={`const toast = renderBrickToast({\n      dataMessage: 'Successfully saved changes',\n      dataIconid: 'check-circle',\n      dataDuration: '5000'\n    })\n`}\n/>\n\n**NB!**\nYou need to include the javascript clientside for events and code running in the client.\nAnd also the css for the components in use (brick-toast, brick-icon, brick-button), for example:\n\n<Source\n  language=\"javascript\"\n  code={`<script type=\"module\" src=\"https://assets.acdn.no/pkg/@amedia/brick-toast/0.0.1/brick-toast.js\"></script>\n  \n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-toast/0.0.1/css/styles.css\"/>\n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-button/7.3.11/css/styles.css\"/>\n  <link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-icon/2.2.6/css/styles.css\"/>\n  `}\n/>\n**Remember to replace the version with the latest version of the package.**\n\n### Client side\n\nNB!\nMake sure to also include brick-toast javascript clientside for events and code running in the client.\n\n#### Import\n\n<Source\n  language=\"javascript\"\n  code={`\n    import '@amedia/brick-toast';\n  `}\n/>\n\n#### Create the DOM element\n\nIf the markup is not rendered serverside, there are two options creating markup client side.\n\nExample: Template literals\nThe simplest way is using template literals, passing the appropriate data-attributes.\n\n<Source\n  language=\"html\"\n  code={`<brick-toast\n    data-message=\"Successfully saved changes\"\n    data-iconid=\"check-circle\"\n    data-duration=\"5000\"\n    data-open=\"true\"\n></brick-toast>`}\n/>\n\nExample: Using javascript\nCreating the element using javascript, setting dataset properties.\n\n<Source\n  language=\"javascript\"\n  code={`\n  const el = document.createElement('brick-toast');\n  el.dataset.message = 'Successfully saved changes';\n  el.dataset.iconid = 'check-circle';\n  el.dataset.duration = '5000';\n  el.dataset.open = 'true';\n  document.body.appendChild(el); // Add to the DOM to display\n  `}\n/>\n\n## Attributes overview for brick-toast\n\n### Available data attributes\n\nAll dataset attributes are synced to camelcased properties.\n\n- `data-message`: The text message to display in the toast (required)\n- `data-iconid`: The icon ID to display (e.g., 'check-circle', 'error-circle')\n- `data-status`: Set to 'error' to display the toast in error style. Other values might be supported in the future. Default is no status (undefined).\n- `data-close-btn`: Set to 'false' to hide the close button (default is visible)\n- `data-position`: Position of the toast on screen ('top-center', 'top-left', 'top-right', 'center-center', 'bottom-left', 'bottom-center', 'bottom-right'). Default is 'top-center'\n- `data-duration`: Duration in milliseconds before the toast automatically closes (default is 5000)\n- `data-open`: Controls whether the toast is visible. Set the attribute on the element to show the toast (data-open=\"true\"). Set the value to \"false\" to hide it (it will also auto hide based on the data-duration attribute which is default 5s).\n\n<Controls />\n<Canvas />\n\n<Markdown>{ReadMe}</Markdown>\n"
-}

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

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

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

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

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

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