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

package/data/components/brick-icon.md

@@ -1,271 +0,0 @@
----
-name: brick-icon
-version: 2.3.1
-selector: brick-icon-v2
-category: Media
-tags: [icon, svg, graphics, accessibility, sprite, visual]
-use_cases: [all-ui, navigation, buttons, visual-indicators, status-display, content-decoration]
-related: [brick-button, brick-pill, brick-avatar]
----
-
-# Brick Icon
-
-A lightweight Web Component for rendering SVG icons from an embedded SVG sprite with built-in accessibility features.
-
-## Key Capabilities
-
-- Renders icons from an inline SVG sprite using icon IDs
-- Automatic accessibility handling with configurable screen reader text
-- Dynamic icon switching via attribute changes
-- Size control through data attributes or CSS variables
-- Color customization via CSS custom properties
-- Special animation support for breaking news icon
-- Framework-agnostic Web Component
-
-## Props/Attributes
-
-| Attribute | Type | Default | Required | Description |
-|-----------|------|---------|----------|-------------|
-| `data-icon-id` | string | - | yes | The ID of the SVG symbol inside the embedded SVG sprite |
-| `data-icon-text` | string | - | no | Screen reader announcement text. When provided, icon gets `role="graphics-symbol"` and a `<title>` tag. When omitted, icon is hidden from screen readers with `aria-hidden="true"` |
-| `data-icon-size` | 'small' \| 'medium' \| string | 'medium' | no | Predefined size for the icon container. 'small' or 'medium' values use token-based sizing |
-
-## Examples
-
-### Basic Icon (Decorative)
-
-Icon without screen reader text, suitable for decorative purposes or when paired with visible text:
-
-```html
-<brick-icon-v2 data-icon-id="chevron-right"></brick-icon-v2>
-```
-
-### Accessible Icon
-
-Icon with screen reader text for meaningful standalone icons:
-
-```html
-<brick-icon-v2
-  data-icon-id="play"
-  data-icon-text="Play video">
-</brick-icon-v2>
-```
-
-### Sized Icon
-
-Icon with predefined size:
-
-```html
-<brick-icon-v2
-  data-icon-id="search"
-  data-icon-text="Search"
-  data-icon-size="small">
-</brick-icon-v2>
-```
-
-### Icon in Button Context
-
-Decorative icon alongside text (hidden from screen readers):
-
-```html
-<button>
-  <brick-icon-v2 data-icon-id="play"></brick-icon-v2>
-  Play
-</button>
-```
-
-### Breaking News Icon
-
-Special icon with pulse animation:
-
-```html
-<brick-icon-v2
-  data-icon-id="pill-breaking"
-  data-icon-text="Breaking news">
-</brick-icon-v2>
-```
-
-## Programmatic Usage
-
-### Client-Side Rendering
-
-```javascript
-import '@amedia/brick-icon';
-
-// The custom element defines itself automatically
-const icon = document.createElement('brick-icon-v2');
-icon.setAttribute('data-icon-id', 'chevron-right');
-icon.setAttribute('data-icon-text', 'Navigate right');
-document.body.appendChild(icon);
-```
-
-### Server-Side Rendering
-
-```javascript
-import { renderBrickIcon } from '@amedia/brick-icon/template';
-
-const html = renderBrickIcon({
-  dataIconId: 'play',
-  dataIconText: 'Play video',
-  dataIconSize: 'medium'
-});
-```
-
-### Dynamic Icon Changes
-
-Icons can be updated dynamically via attribute changes:
-
-```javascript
-const icon = document.querySelector('brick-icon-v2');
-
-// Update icon ID
-icon.setAttribute('data-icon-id', 'chevron-up');
-
-// Update screen reader text
-icon.setAttribute('data-icon-text', 'Collapse section');
-```
-
-## Prerequisites
-
-### SVG Sprite Requirement
-
-brick-icon requires an SVG sprite to be embedded in the HTML page. The sprite must contain `<symbol>` elements with IDs matching the `data-icon-id` values.
-
-```html
-<svg style="display: none;">
-  <symbol id="play" viewBox="0 0 24 24">
-    <path d="..."/>
-  </symbol>
-  <symbol id="chevron-right" viewBox="0 0 24 24">
-    <path d="..."/>
-  </symbol>
-</svg>
-```
-
-Check out `@amedia/brick-icons` package which provides theme-specific SVG sprites maintained in Figma.
-
-### Why Inline SVG Sprite
-
-- Eliminates additional network requests
-- Simpler implementation without asynchronous loading
-- Icons available immediately when HTML is parsed
-- Better perceived performance
-- Optimal for small to medium icon sets
-
-## Accessibility
-
-### Automatic ARIA Handling
-
-- **With `data-icon-text`**: Icon receives `role="graphics-symbol"` and a `<title>` element with the provided text, making it accessible to screen readers
-- **Without `data-icon-text`**: Icon receives `aria-hidden="true"`, hiding it from screen readers (appropriate for decorative icons)
-
-### VoiceOver Compatibility
-
-Icons include `aria-labelledby` attributes for proper announcement in Safari with VoiceOver.
-
-### Best Practices
-
-- Omit `data-icon-text` for decorative icons or when adjacent text provides context
-- Always provide `data-icon-text` for standalone interactive icons
-- Ensure color contrast meets WCAG 2.1 AA requirements when customizing colors
-
-## Styling
-
-### CSS Custom Properties
-
-| Property | Description | Default |
-|----------|-------------|---------|
-| `--b-icon-color` | Icon fill color | `currentColor` |
-| `--b-icon-size` | Container size (height) | `var(--brick-sizes-iconM)` (24px) |
-| `--b-icon-svg-width` | SVG element width | `var(--brick-sizes-iconM)` (24px) |
-| `--b-icon-svg-height` | SVG element height | `var(--brick-sizes-iconM)` (24px) |
-| `--b-icon-color-breaking-pulseStart` | Breaking icon pulse animation start color | `var(--brick-colors-pillNonePulseStartBg)` |
-| `--b-icon-color-breaking-pulseEnd` | Breaking icon pulse animation end color | `var(--brick-colors-pillNonePulseEndBg)` |
-
-### Custom Sizing Example
-
-```css
-brick-icon-v2[data-icon-id="custom-large"] {
-  --b-icon-svg-width: 48px;
-  --b-icon-svg-height: 48px;
-}
-```
-
-### Color Customization
-
-```css
-brick-icon-v2 {
-  --b-icon-color: #007bff;
-}
-```
-
-## Common Patterns
-
-### Icon with Adjacent Text
-
-```html
-<a href="/search">
-  <brick-icon-v2 data-icon-id="search"></brick-icon-v2>
-  Search
-</a>
-```
-
-### Icon-Only Button
-
-```html
-<button aria-label="Close dialog">
-  <brick-icon-v2
-    data-icon-id="close"
-    data-icon-text="Close">
-  </brick-icon-v2>
-</button>
-```
-
-### Responsive Icon Sizing
-
-```css
-brick-icon-v2 {
-  --b-icon-size: 16px;
-}
-
-@media (min-width: 768px) {
-  brick-icon-v2 {
-    --b-icon-size: 24px;
-  }
-}
-```
-
-## Technical Details
-
-- **Custom Element**: `brick-icon-v2`
-- **Base Class**: BrickElement
-- **Dependencies**: @amedia/brick-tokens, @amedia/brick-template
-- **Renders as**: `<brick-icon-v2>` container with internal `<svg>` element
-- **Observed Attributes**: `data-icon-id`, `data-icon-text`
-- **Mirrored Props**: `data-icon-id`, `data-icon-text`, `data-icon-size`
-
-## Important Notes
-
-### Version 2 Breaking Changes
-
-Version 2.0.0 introduced breaking changes:
-- New tag name: `brick-icon-v2` (previously `brick-icon`)
-- Requires embedded SVG sprite in HTML (no external sprite loading)
-- Removed `theme` property (no longer needed)
-- Removed CommonJS build
-
-### Size Control
-
-The `data-icon-size` attribute sets predefined sizes:
-- `small`: Uses `--brick-sizes-iconS` token (typically 16px)
-- `medium`: Uses `--brick-sizes-iconM` token (typically 24px)
-
-For custom sizes, use CSS custom properties instead.
-
-### Breaking News Animation
-
-The icon with `data-icon-id="pill-breaking"` includes a special pulsing animation controlled by the `--b-icon-color-breaking-pulseStart` and `--b-icon-color-breaking-pulseEnd` CSS variables.
-
-## Version
-
-Current version: 2.3.1

package/data/components/brick-icons.md

@@ -1,430 +0,0 @@
----
-name: brick-icons
-version: 2.1.0
-category: Media
-tags: [icons, svg, sprite, graphics, design-system, figma]
-use_cases: [icons, ui-enhancement, navigation-icons, action-icons, status-indicators, brand-icons, decorative-graphics]
-related: [brick-button, brick-card, brick-actions]
----
-
-# Brick Icons
-
-SVG icon sprite library providing theme-specific icon sets distributed via CDN for consistent, scalable graphics across Amedia's design system.
-
-## Key Capabilities
-
-- **Theme-Specific Sprites**: Separate SVG sprite files for each theme (alfa, bravo, charlie, nettavisen, alt)
-- **CDN Distribution**: Icons served via Eik CDN for optimal performance and caching
-- **Figma Automation**: Icons automatically synced from Figma using Figmagic
-- **Scalable Graphics**: SVG format ensures crisp rendering at any size without quality loss
-- **Color Inheritance**: Icons use `currentColor` for easy color customization via CSS
-- **Comprehensive Icon Set**: Includes navigation, action, status, social, and brand icons
-
-## Available Themes
-
-| Theme | CDN Path |
-|-------|----------|
-| alfa | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg` |
-| bravo | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/bravo/icons.svg` |
-| charlie | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg` |
-| nettavisen | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg` |
-| alt | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg` |
-
-## Icon Categories
-
-**Navigation**: arrow-down, arrow-up, arrow-left, arrow-right, arrow-dropdown, arrow-dropup, chevron-down, chevron-up, close, menu
-
-**Actions**: add, delete, copy, share, share-url, edit, settings-fill, settings-outline, camera, gift
-
-**Status**: checkmark, checkmark-toggle, check-circle, error-circle, warning-circle, info-circle, lock, notification-off
-
-**Media**: play, pause, replay, volume-on, volume-off, desktop, mobile
-
-**Social/Brand**: facebook, instagram, linkedin, twitter, youtube, appstore, googleplay
-
-**Tags/Labels**: pill-tag, pill-video, pill-breaking, pill-untold, plusall, tag-fill, tag-outline
-
-**Other**: clock, datepicker, dice-1 through dice-6, logo-alt
-
-## Examples
-
-### Basic Icon Usage
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark"></use>
-</svg>
-```
-
-### Accessible Icon with Title
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-labelledby="search-title">
-  <title id="search-title">Search</title>
-  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#search"></use>
-</svg>
-```
-
-### Decorative Icon (Hidden from Screen Readers)
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#arrow-right"></use>
-</svg>
-```
-
-### Icon with Custom Color and Size
-
-```html
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" style="color: #ff0000;">
-  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#heart"></use>
-</svg>
-```
-
-### Icon in Button Component
-
-```html
-<brick-button-v9 data-variant="primary">
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true">
-    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#add"></use>
-  </svg>
-  Add Item
-</brick-button-v9>
-```
-
-### Social Media Icon Link
-
-```html
-<a href="https://facebook.com/example" aria-label="Follow us on Facebook">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#facebook"></use>
-  </svg>
-</a>
-```
-
-## Framework Integration
-
-### Svelte
-
-```svelte
-<script>
-  const theme = 'alfa';
-  const iconName = 'checkmark';
-  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${iconName}`;
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <use href={iconUrl}></use>
-</svg>
-```
-
-### React
-
-```jsx
-function Icon({ theme, name, size = 24, title }) {
-  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${name}`;
-
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} aria-labelledby={title ? `icon-${name}` : undefined}>
-      {title && <title id={`icon-${name}`}>{title}</title>}
-      <use href={iconUrl}></use>
-    </svg>
-  );
-}
-
-// Usage
-<Icon theme="alfa" name="checkmark" title="Success" />
-```
-
-### Vue
-
-```vue
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size">
-    <title v-if="title">{{ title }}</title>
-    <use :href="iconUrl"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    theme: { type: String, required: true },
-    name: { type: String, required: true },
-    size: { type: Number, default: 24 },
-    title: String
-  },
-  computed: {
-    iconUrl() {
-      return `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${this.theme}/icons.svg#${this.name}`;
-    }
-  }
-}
-</script>
-```
-
-## Programmatic Usage
-
-### Import Sprite Paths
-
-```javascript
-import { alfa, bravo, charlie, nettavisen, alt } from '@amedia/brick-icons';
-
-console.log(alfa); // './sprites/alfa/icons.svg'
-```
-
-### Dynamic Icon Loading
-
-```javascript
-// Helper function to create icon element
-function createIcon(theme, iconName, options = {}) {
-  const { width = 24, height = 24, title, color } = options;
-
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  svg.setAttribute('width', width);
-  svg.setAttribute('height', height);
-
-  if (color) {
-    svg.style.color = color;
-  }
-
-  if (title) {
-    const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
-    titleElement.textContent = title;
-    svg.appendChild(titleElement);
-  } else {
-    svg.setAttribute('aria-hidden', 'true');
-  }
-
-  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href',
-    `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${iconName}`
-  );
-
-  svg.appendChild(use);
-  return svg;
-}
-
-// Usage
-const icon = createIcon('alfa', 'checkmark', {
-  width: 32,
-  height: 32,
-  title: 'Completed',
-  color: '#00aa00'
-});
-document.body.appendChild(icon);
-```
-
-## Accessibility
-
-### Informative vs Decorative Icons
-
-**Informative Icons** (convey meaning):
-- MUST include a `<title>` element with descriptive text
-- MUST have `aria-labelledby` pointing to the title element ID
-- Example: Standalone icon buttons, status indicators
-
-**Decorative Icons** (purely visual):
-- MUST include `aria-hidden="true"`
-- Should be paired with visible text labels
-- Example: Icons next to text labels in buttons
-
-### Best Practices
-
-```html
-<!-- ✅ GOOD: Informative icon with proper accessibility -->
-<button>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-labelledby="close-title">
-    <title id="close-title">Close dialog</title>
-    <use href="icons/alfa/icons.svg#close"></use>
-  </svg>
-</button>
-
-<!-- ✅ GOOD: Decorative icon paired with text -->
-<button>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true">
-    <use href="icons/alfa/icons.svg#add"></use>
-  </svg>
-  Add Item
-</button>
-
-<!-- ❌ BAD: Informative icon without accessibility support -->
-<button>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-    <use href="icons/alfa/icons.svg#delete"></use>
-  </svg>
-</button>
-
-<!-- ❌ BAD: Standalone decorative icon -->
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-  <use href="icons/alfa/icons.svg#arrow-right"></use>
-</svg>
-```
-
-### Keyboard Navigation
-
-Icons themselves are not interactive. Always wrap icons in interactive elements like:
-- `<button>` for actions
-- `<a>` for navigation
-- Ensure interactive elements are keyboard accessible with proper focus styles
-
-## Common Patterns
-
-### Icon Button
-
-```html
-<brick-button-v9 data-variant="ghost" data-shape="circle">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-labelledby="settings-title">
-    <title id="settings-title">Open settings</title>
-    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#settings-fill"></use>
-  </svg>
-</brick-button-v9>
-```
-
-### Status Indicator with Icon
-
-```html
-<div class="status-success" style="display: flex; align-items: center; gap: 8px; color: #00aa00;">
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true">
-    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#check-circle"></use>
-  </svg>
-  <span>Operation completed successfully</span>
-</div>
-```
-
-### Navigation Menu Item
-
-```html
-<a href="/profile" style="display: flex; align-items: center; gap: 12px;">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#user"></use>
-  </svg>
-  <span>My Profile</span>
-</a>
-```
-
-### Media Controls
-
-```html
-<div class="media-controls" style="display: flex; gap: 16px;">
-  <button aria-label="Play video">
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#play"></use>
-    </svg>
-  </button>
-  <button aria-label="Mute audio">
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
-      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#volume-on"></use>
-    </svg>
-  </button>
-</div>
-```
-
-### Social Media Links
-
-```html
-<nav aria-label="Social media" style="display: flex; gap: 16px;">
-  <a href="https://facebook.com/example" aria-label="Facebook">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#facebook"></use>
-    </svg>
-  </a>
-  <a href="https://twitter.com/example" aria-label="Twitter">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#twitter"></use>
-    </svg>
-  </a>
-  <a href="https://instagram.com/example" aria-label="Instagram">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
-      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#instagram"></use>
-    </svg>
-  </a>
-</nav>
-```
-
-## Technical Details
-
-- **Package Name**: @amedia/brick-icons
-- **Distribution**: CDN via Eik (https://assets.acdn.no)
-- **Source**: Figma (synced via Figmagic)
-- **Format**: SVG sprite sheets
-- **Themes**: alfa, bravo, charlie, nettavisen, alt
-- **Build Tools**: Figmagic, svg-sprite, svgson
-- **Dependencies**: None (icons are static assets)
-
-### CDN URL Structure
-
-```
-https://assets.acdn.no/pkg/@amedia/brick-icons/v{major}/icons/{theme}/icons.svg#{icon-name}
-```
-
-Example:
-```
-https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark
-```
-
-### Version Aliasing
-
-The package uses Eik version aliasing:
-- `v1` → Latest 1.x.x version
-- `v2` → Latest 2.x.x version (current)
-
-This allows automatic updates within major versions without changing URLs.
-
-## Important Notes
-
-### Icon Updates
-
-Icons are automatically synced from Figma. To update icons:
-
-1. Ensure you have Figma API access token
-2. Run: `npm run build:svg && npm run build:altered-svg && npm run build:sprite`
-3. Create changeset: `npx changeset`
-4. Commit and push changes
-5. After merge, flush Varnish cache if needed
-
-### Color Customization
-
-Most icons use `currentColor` for fill/stroke, allowing easy color changes via CSS:
-
-```html
-<svg style="color: #ff0000;" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <use href="icons/alfa/icons.svg#heart"></use>
-</svg>
-```
-
-Some multi-colored brand icons (like social media logos) may have fixed colors.
-
-### Performance
-
-- Icons are served from CDN with aggressive caching
-- Sprite sheets bundle all icons per theme in single HTTP request
-- Use version aliases (v2) for automatic updates within major versions
-- Consider preloading sprite sheets for critical icons:
-
-```html
-<link rel="preload" as="image" type="image/svg+xml"
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg">
-```
-
-### Browser Compatibility
-
-SVG sprites with `<use>` elements are supported in all modern browsers. For legacy browser support, consider using polyfills like svg4everybody.
-
-### Icon Availability
-
-Not all icons are available in all themes. Check the Figma source files or sprite sheets to confirm icon availability for your theme. The build process syncs exactly what's in Figma for each theme.
-
-### Non-Interactive Elements
-
-Icons are purely presentational elements and should NOT be interactive on their own. Always wrap icons in interactive elements like `<button>` or `<a>` tags when user interaction is needed.
-
-## Version
-
-Current version: 2.1.0
-
-Recent updates:
-- **2.1.0**: New icons: gift, camera, settings-outline
-- **2.0.4**: Synced icons
-- **2.0.0**: Removed CommonJS support (ESM only)