@amedia/brick-mcp 0.0.2 → 0.1.1

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

@@ -0,0 +1,59 @@
+---
+name: brick-actions
+version: 0.1.5
+category: Tooling
+tags: [github-actions, automation, eik, publishing, ci-cd]
+use_cases: [ci-cd, automated-publishing, eik-deployment]
+related: []
+---
+
+# Brick Actions
+
+Custom JavaScript GitHub Actions used to automate packaging and publishing to Eik when packages are published to NPM.
+
+## Key Capabilities
+
+- Automatically publishes packages to Eik CDN after NPM publication
+- Filters packages based on Eik configuration in package.json
+- Integrates with Changesets workflow for version management
+- Validates required secrets/tokens before execution
+
+## Technical Details
+
+- **Type**: GitHub Action (JavaScript)
+- **Main**: dist/index.js
+- **Build Tool**: @vercel/ncc
+- **Dependencies**: @actions/core, @actions/exec, @actions/github, @eik/cli, @manypkg/get-packages
+
+## How It Works
+
+1. Triggered when Changesets publishes packages to NPM
+2. Receives `publishedPackages` as input
+3. Filters packages that have `eik` configuration in package.json
+4. Runs `eik package` command with proper credentials
+5. Publishes to Eik CDN at https://assets.acdn.no
+
+## Development
+
+### Building
+
+```bash
+npm run build-index
+```
+
+This uses @vercel/ncc to compile code and modules into a single distribution file.
+
+### Testing
+
+Can be tested locally using [Act](https://github.com/nektos/act) with environment variables via dotenv.
+
+## Important Notes
+
+- Not a Brick web component - this is tooling for CI/CD
+- Changesets handles versioning and CHANGELOG updates
+- Does not commit `.eik/integrity.json` files
+- Requires proper Eik credentials in GitHub secrets
+
+## Version
+
+Current version: 0.1.5

package/dist/data/components/brick-alt-teaser.md

@@ -0,0 +1,264 @@
+---
+name: brick-alt-teaser
+version: 8.0.65
+selector: brick-alt-teaser-v8
+category: Media
+tags: [teaser, article, news, card, content-preview, media, alt-theme]
+use_cases:
+  [
+    news-listing,
+    content-cards,
+    article-preview,
+    editorial-content,
+    opinion-pieces,
+    video-teasers,
+    photo-galleries,
+    reviews,
+    featured-content,
+  ]
+related: [brick-image, brick-player, brick-pill, brick-icon]
+---
+
+# Brick Alt Teaser
+
+A flexible article teaser component designed for the Alt theme, supporting multiple content types including standard articles, features, opinions, videos, galleries, and reviews.
+
+## Key Capabilities
+
+- Multiple layout variants: standard article, feature, opinion, video, gallery, and review
+- Responsive image handling with srcset and custom aspect ratios
+- Video playback integration via brick-player
+- Photo gallery support with image count indicator
+- Review ratings displayed as dice icons
+- Opinion pieces with author bylines and profile images
+- Countdown timer support for time-sensitive content
+- Analytics integration with ADP (Amedia Data Platform)
+- Customizable background colors for visual categorization
+- Accessibility features including ARIA labels and screen reader support
+
+## Props/Attributes
+
+| Attribute                     | Type    | Default   | Required | Description                                                        |
+| ----------------------------- | ------- | --------- | -------- | ------------------------------------------------------------------ |
+| `title`                       | string  | ''        | yes      | Main headline of the article                                       |
+| `link`                        | string  | ''        | yes      | URL to the full article                                            |
+| `publication`                 | string  | ''        | no       | Publication domain (e.g., "www.tb.no")                             |
+| `name`                        | string  | ''        | no       | Publication name (e.g., "Tønsbergs Blad")                          |
+| `articleId`                   | string  | ''        | no       | Unique article identifier for tracking                             |
+| `published`                   | string  | ''        | no       | Publication date/time (supports ISO 8601 or human-readable format) |
+| `readEstimate`                | string  | ''        | no       | Estimated reading time (e.g., "Lesetid 4 min")                     |
+| `image`                       | string  | ''        | no       | Primary image URL                                                  |
+| `srcset`                      | string  | ''        | no       | Responsive image srcset for different screen sizes                 |
+| `imagesizes`                  | string  | ''        | no       | Image sizes attribute for responsive images                        |
+| `imageRatio`                  | string  | ''        | no       | Custom aspect ratio (e.g., "16/9", "4/3", "1.33")                  |
+| `aoi`                         | number  | -         | no       | Area of interest width for image cropping                          |
+| `altText`                     | string  | ''        | no       | Alternative text for images                                        |
+| `tags`                        | string  | ''        | no       | Comma-separated content tags                                       |
+| `pretitle`                    | string  | ''        | no       | Text displayed above the main title (for features)                 |
+| `feature`                     | boolean | false     | no       | Enables feature layout variant                                     |
+| `opinion`                     | boolean | false     | no       | Enables opinion layout variant                                     |
+| `review`                      | number  | -         | no       | Review rating (1-6, displayed as dice icons)                       |
+| `gallery`                     | string  | ''        | no       | Comma-separated list of gallery image URLs                         |
+| `isVideo`                     | boolean | false     | no       | Enables video teaser mode                                          |
+| `videoId`                     | string  | ''        | no       | Video identifier for brick-player                                  |
+| `playerId`                    | string  | ''        | no       | Flowplayer player ID                                               |
+| `authorName`                  | string  | ''        | no       | Author name(s) for opinion pieces (comma-separated for multiple)   |
+| `authorRole`                  | string  | ''        | no       | Author role/title for opinion pieces                               |
+| `authorImage`                 | string  | ''        | no       | Author profile image URL                                           |
+| `backgroundColor`             | string  | '#d3d9de' | no       | Background color for the teaser card                               |
+| `countdown`                   | string  | ''        | no       | ISO 8601 date for countdown timer                                  |
+| `menuOnClickEventName`        | string  | ''        | no       | Custom event name dispatched when menu is clicked                  |
+| `publicationOnHoverEventName` | string  | ''        | no       | Custom event name dispatched on publication logo hover             |
+| `siteId`                      | string  | ''        | no       | Site identifier for analytics                                      |
+| `small`                       | boolean | false     | no       | Enables compact layout variant                                     |
+
+## Examples
+
+### Basic Article Teaser
+
+```html
+<brick-alt-teaser-v8
+  title="Harvard: Fem av de beste treningsøvelsene du noensinne kan gjøre"
+  link="https://example.com/article/123"
+  publication="www.tb.no"
+  name="Tønsbergs Blad"
+  published="i dag 13:37"
+  readEstimate="Lesetid 4 min"
+  image="https://g.acdn.no/api/reflex/v1/image/resize/480/example.jpg"
+  srcset="https://g.acdn.no/api/reflex/v1/image/resize/480/example.jpg 880w, https://g.acdn.no/api/reflex/v1/image/resize/1280/example.jpg 1280w"
+  articleId="5-95-91371"
+  tags="Utvikling"
+  backgroundColor="#D3D9DE"
+>
+</brick-alt-teaser-v8>
+```
+
+### Feature Teaser
+
+```html
+<brick-alt-teaser-v8
+  feature="true"
+  pretitle="Stikktittel for feature"
+  title="Tittel for feature teaser"
+  publication="www.akersposten.no"
+  name="Akersposten"
+  image="https://g.acdn.no/api/reflex/v1/image/resize/480/example.jpg"
+  altText="Beskrivende alt-tekst"
+  link="https://example.com/feature/456"
+  backgroundColor="#DEDCD3"
+>
+</brick-alt-teaser-v8>
+```
+
+### Video Teaser
+
+```html
+<brick-alt-teaser-v8
+  title="Tittel for video teaser"
+  isVideo="true"
+  videoId="ea507f6b-ca59-4ae6-a5fa-942fd02b458a"
+  playerId="3689c16b-4cb9-4a36-baf4-2c3aa7fcc811"
+  publication="www.tb.no"
+  name="Tønsbergs Blad"
+  published="i dag 13:37"
+  readEstimate="Spilletid 13:37 min"
+  link="https://example.com/video/789"
+  backgroundColor="#D3DED6"
+>
+</brick-alt-teaser-v8>
+```
+
+### Opinion Teaser
+
+```html
+<brick-alt-teaser-v8
+  opinion="true"
+  title="Mening om viktig samfunnsspørsmål"
+  authorName="Hege Breen Bakken"
+  authorRole="Politisk redaktør i Drammens Tidende"
+  authorImage="https://image.journalisten.no/357695.jpg"
+  publication="www.dt.no"
+  name="Drammens Tidende"
+  published="i dag 13:37"
+  image="https://g.acdn.no/api/reflex/v1/image/resize/480/example.jpg"
+  link="https://example.com/opinion/101"
+>
+</brick-alt-teaser-v8>
+```
+
+### Gallery Teaser
+
+```html
+<brick-alt-teaser-v8
+  title="Bildegalleri fra årets arrangement"
+  gallery="https://example.com/img1.jpg, https://example.com/img2.jpg, https://example.com/img3.jpg"
+  image="https://example.com/img1.jpg"
+  readEstimate="3 bilder"
+  publication="www.tb.no"
+  name="Tønsbergs Blad"
+  published="i dag 13:37"
+  link="https://example.com/gallery/202"
+  altText="Bilder fra arrangementet"
+>
+</brick-alt-teaser-v8>
+```
+
+### Review Teaser
+
+```html
+<brick-alt-teaser-v8
+  title="Anmeldelse: Årets beste film"
+  review="5"
+  image="https://g.acdn.no/api/reflex/v1/image/resize/480/example.jpg"
+  publication="www.tb.no"
+  name="Tønsbergs Blad"
+  published="i dag 13:37"
+  readEstimate="Lesetid 6 min"
+  link="https://example.com/review/303"
+  altText="Filmplakat"
+>
+</brick-alt-teaser-v8>
+```
+
+## Programmatic Usage
+
+```javascript
+import { BrickAltTeaser } from '@amedia/brick-alt-teaser';
+
+// The component auto-registers as brick-alt-teaser-v8
+// You can also manually define it:
+if (!customElements.get('brick-alt-teaser-v8')) {
+  customElements.define('brick-alt-teaser-v8', BrickAltTeaser);
+}
+
+// Create and append programmatically
+const teaser = document.createElement('brick-alt-teaser-v8');
+teaser.setAttribute('title', 'My Article Title');
+teaser.setAttribute('link', 'https://example.com/article');
+teaser.setAttribute('image', 'https://example.com/image.jpg');
+document.querySelector('#container').appendChild(teaser);
+
+// Listen to custom events
+teaser.addEventListener('my-menu-event', (event) => {
+  console.log('Menu clicked');
+});
+```
+
+## Accessibility
+
+- **ARIA Labels**: Each teaser includes a comprehensive screen reader label combining title, publication, and date
+- **Keyboard Navigation**: Single tab stop per teaser (title link only) to avoid redundant navigation
+- **Focus Indicators**: Clear 2px outline on all focusable elements
+- **Semantic HTML**: Uses `<article>` with Schema.org NewsArticle markup
+- **Alt Text Support**: Images can include descriptive alternative text via `altText` attribute
+- **Skip Decorative Images**: Image links are `aria-hidden` to prevent duplicate announcements
+- **Menu Button**: Options menu includes proper `aria-expanded` state management
+
+## Analytics Integration
+
+The component includes built-in ADP (Amedia Data Platform) tracking:
+
+- **Teaser Clicks**: Automatically tagged with `data-adp-clickLabel="teaser"` and `data-adp-clickValue="read-article"`
+- **Menu Interactions**: Menu button tagged with `data-adp-clickvalue="open-menu"`
+- **Publication Tracking**: Publication logo includes hover tracking
+- **Custom Events**: Dispatches custom events via `menuOnClickEventName` and `publicationOnHoverEventName`
+- **Article Metadata**: Includes Schema.org itemprops for structured data tracking
+
+## Layout Variants
+
+The component automatically selects layout based on attributes:
+
+- **Opinion Layout**: Triggered by `opinion="true"` - Image above title with author byline
+- **Video/Gallery Layout**: Triggered by `isVideo="true"` or `gallery` attribute - Media at top
+- **Feature Layout**: Triggered by `feature="true"` - Enhanced styling with optional pretitle
+- **Standard Layout**: Default layout with image below title
+- **Small Layout**: Triggered by `small="true"` - Compact horizontal layout
+
+## Technical Details
+
+- **Custom Element**: `brick-alt-teaser-v8`
+- **Base Class**: HTMLElement (vanilla web component)
+- **Dependencies**:
+  - `@amedia/brick-tokens` - Design tokens and styling
+  - `@amedia/brick-image` - Image rendering
+  - `@amedia/brick-player` - Video playback
+  - `@amedia/brick-pill` - Tag/pill components
+  - `@amedia/brick-icon` - Icon rendering
+- **Renders as**: `<article>` with nested semantic HTML
+- **Styling**: CSS-in-JS via Stitches with design tokens
+- **Schema.org**: Implements NewsArticle microdata
+
+## Important Notes
+
+- **Alt Team Component**: Built and maintained by the Alt theme team. Consult with them before using in other contexts.
+- **Image Srcset**: As of v8.0.0, image srcset must be provided externally with correct sizes and encoding - it is no longer auto-generated
+- **Date Formats**: The `published` attribute accepts both human-readable strings ("i dag 13:37") and ISO 8601 timestamps
+- **Multiple Authors**: Opinion pieces support multiple comma-separated authors, which will display with ellipsis overflow
+- **Background Colors**: Common background colors follow design token patterns for subject categorization (default, nature, sport, health, culture, economy)
+- **Review Ratings**: Review attribute accepts values 1-6, displayed as dice icons
+- **Video Player**: Requires valid Flowplayer player ID and video ID for video teasers
+- **Countdown**: Countdown attribute expects ISO 8601 date format for time-sensitive content
+
+## Version
+
+Current version: 8.0.65

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

@@ -0,0 +1,299 @@
+---
+name: brick-avatar
+version: 0.2.36
+selector: brick-avatar-v0
+category: Media
+tags: [avatar, profile, user, image, initials, icon, identity, media]
+use_cases:
+  [
+    user-profiles,
+    author-bylines,
+    comment-sections,
+    team-rosters,
+    sports-teams,
+    contact-lists,
+    chat-interfaces,
+    social-features,
+  ]
+related: [brick-image, brick-tokens]
+---
+
+# Brick Avatar
+
+A visual component representing a person, object, or entity through an image, icon, or initials.
+
+## Key Capabilities
+
+- Display user profile images with automatic fallback to initials
+- Support for multiple sizes (small, medium, large) and shapes (default theme, circle)
+- Decorative letter shapes for sports teams and organizations (shield, t-shirt)
+- Custom CSS property support for SVG backgrounds
+- Accessible implementation with proper alt text handling
+- Server-side rendering support for optimal performance
+
+## Props/Attributes
+
+| Attribute            | Type                           | Default  | Required | Description                                                                                                                           |
+| -------------------- | ------------------------------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `data-img`           | string                         | ""       | no       | URL for the avatar image. Preferably a square image (cropped from top if not square)                                                  |
+| `data-letters`       | string                         | ""       | no       | One or two letter string used as initials when image is not provided or fails to load                                                 |
+| `data-alt`           | string                         | ""       | no       | Alternative text for images or screen reader text for letter avatars. Empty string hides decorative avatars from assistive technology |
+| `data-size`          | "small" \| "medium" \| "large" | "medium" | no       | Controls the size of the avatar using design tokens                                                                                   |
+| `data-shape`         | "circle" \| ""                 | ""       | no       | Sets the avatar shape. Empty string uses theme default avatar shape                                                                   |
+| `data-letters-shape` | "shield" \| "tshirt" \| ""     | ""       | no       | Adds a background shape behind letters. Only applies when using `data-letters`, not with `data-img`                                   |
+
+## Examples
+
+### Basic Avatar with Initials
+
+Display user initials as a fallback or primary identifier.
+
+```html
+<brick-avatar-v0
+  data-letters="AM"
+  data-alt="Initials for Amedia"
+  data-size="medium"
+>
+</brick-avatar-v0>
+```
+
+### Avatar with Image
+
+Show a profile photo with automatic fallback to initials if image fails.
+
+```html
+<brick-avatar-v0
+  data-img="https://example.com/profile-photo.jpg"
+  data-alt="Profile picture of John Doe"
+  data-letters="JD"
+  data-size="large"
+>
+</brick-avatar-v0>
+```
+
+### Circle Avatar for User Profiles
+
+Use circle shape for a softer, more personal feel in user interfaces.
+
+```html
+<brick-avatar-v0
+  data-img="https://example.com/user-avatar.jpg"
+  data-alt="User profile picture"
+  data-shape="circle"
+  data-size="medium"
+>
+</brick-avatar-v0>
+```
+
+### Sports Team Avatar with Shield
+
+Display team initials with a shield background, commonly used in sports applications.
+
+```html
+<brick-avatar-v0
+  data-letters="BSK"
+  data-alt="Bærum Sportsklubb team logo"
+  data-letters-shape="shield"
+  data-size="medium"
+  style="--b-avatar-color-fg:var(--brick-colors-supportiveSportFg);
+         --b-avatar-color-border:var(--brick-colors-supportiveSportBg);
+         --b-avatar-color-shape:var(--brick-colors-supportiveSportBg);"
+>
+</brick-avatar-v0>
+```
+
+### Team Avatar with T-Shirt Shape
+
+Use t-shirt shape for team jerseys or sports team identification.
+
+```html
+<brick-avatar-v0
+  data-letters="T"
+  data-alt="Team T jersey"
+  data-letters-shape="tshirt"
+  data-size="large"
+  style="--b-avatar-color-fg:var(--brick-colors-supportiveSportFg);
+         --b-avatar-color-shape:red;"
+>
+</brick-avatar-v0>
+```
+
+### Avatar with SVG Background
+
+Set a custom SVG as the avatar background using CSS custom property.
+
+```html
+<brick-avatar-v0
+  data-alt="Organization logo"
+  data-size="small"
+  style="--b-avatar-borderWidth:0;
+         --b-avatar-svg:url('https://example.com/logo.svg')"
+>
+</brick-avatar-v0>
+```
+
+### Decorative Avatar (No Alt Text)
+
+For purely decorative avatars where information is conveyed elsewhere, omit `data-alt` for accessibility.
+
+```html
+<brick-avatar-v0
+  data-img="https://example.com/decorative-icon.jpg"
+  data-size="small"
+>
+</brick-avatar-v0>
+```
+
+## Server-Side Rendering
+
+### Render Function
+
+Use the template function for optimal server-side rendering performance.
+
+```javascript
+import { renderBrickAvatar } from '@amedia/brick-avatar/template';
+
+const markup = renderBrickAvatar({
+  dataLetters: 'KN',
+  dataAlttext: 'Initials for Kari Nordmann',
+  dataSize: 'medium',
+});
+```
+
+### Client-Side Import
+
+Import the web component definition for client-side hydration and interactivity.
+
+```javascript
+import '@amedia/brick-avatar';
+```
+
+## CSS Custom Properties
+
+Customize the avatar appearance using CSS custom properties. Always scope your overrides and ensure WCAG 2.1 AA compliance.
+
+| Property                  | Description                                            | Default                             |
+| ------------------------- | ------------------------------------------------------ | ----------------------------------- |
+| `--b-avatar-svg`          | Set the background SVG image using `url()` notation    | None                                |
+| `--b-avatar-size`         | Controls the size (prefer using `data-size` attribute) | `var(--brick-sizes-avatarM)`        |
+| `--b-avatar-color-bg`     | Background color for letter avatars                    | `var(--brick-colors-baseNeutral00)` |
+| `--b-avatar-color-fg`     | Text color for letter avatars                          | `var(--brick-colors-baseFg)`        |
+| `--b-avatar-color-border` | Border color                                           | `var(--brick-colors-baseNeutral00)` |
+| `--b-avatar-color-shape`  | Background color for letter shapes (shield, t-shirt)   | `transparent`                       |
+| `--b-avatar-borderWidth`  | Border width                                           | `var(--brick-borderWidths-baseS)`   |
+| `--b-avatar-padding`      | Internal padding                                       | `0`                                 |
+
+### Custom Styling Example
+
+```html
+<brick-avatar-v0
+  data-img="https://api.nifs.no/images/teams/logo/8/"
+  data-size="large"
+  style="--b-avatar-padding:10px;
+         --b-avatar-size:120px;
+         --b-avatar-color-bg:var(--brick-colors-supportiveSportBg);
+         --b-avatar-color-fg:var(--brick-colors-supportiveSportFg);
+         --b-avatar-color-border:transparent;"
+>
+</brick-avatar-v0>
+```
+
+## Accessibility
+
+### Image Avatars
+
+- Always provide `data-alt` for informative images describing the person or entity
+- Omit `data-alt` for purely decorative avatars (automatically gets empty alt attribute)
+- Screen readers will ignore decorative images with empty alt text
+
+### Letter Avatars
+
+- The `data-alt` property creates a visually hidden element for screen readers
+- Provides context for abbreviated initials (e.g., "KN" becomes "Initials for Kari Nordmann")
+- Ensures users with assistive technology understand the meaning of the letters
+
+### Keyboard Navigation
+
+- Avatar component is non-interactive by default
+- If wrapped in an interactive element (button, link), ensure proper focus states
+
+## Common Patterns
+
+### Author Byline
+
+Display author information in article headers or comments.
+
+```html
+<div class="author-byline">
+  <brick-avatar-v0
+    data-img="https://example.com/author.jpg"
+    data-alt="Photo of Jane Smith"
+    data-letters="JS"
+    data-size="small"
+    data-shape="circle"
+  >
+  </brick-avatar-v0>
+  <span class="author-name">Jane Smith</span>
+</div>
+```
+
+### User List
+
+Show multiple users in a team or contact list.
+
+```html
+<ul class="user-list">
+  <li>
+    <brick-avatar-v0 data-letters="AM" data-alt="Amedia" data-size="medium">
+    </brick-avatar-v0>
+    <span>Amedia</span>
+  </li>
+  <li>
+    <brick-avatar-v0
+      data-letters="KN"
+      data-alt="Kari Nordmann"
+      data-size="medium"
+    >
+    </brick-avatar-v0>
+    <span>Kari Nordmann</span>
+  </li>
+</ul>
+```
+
+### Sports Team Roster
+
+Display team members with jersey-style avatars.
+
+```html
+<div class="team-roster">
+  <brick-avatar-v0
+    data-letters="10"
+    data-alt="Player number 10"
+    data-letters-shape="tshirt"
+    data-size="large"
+    style="--b-avatar-color-shape:#003366;
+           --b-avatar-color-fg:#ffffff;"
+  >
+  </brick-avatar-v0>
+</div>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-avatar-v0`
+- **Base Class**: BrickElement (from @amedia/brick-template)
+- **Dependencies**: @amedia/brick-tokens, @amedia/brick-image
+- **Renders as**: Custom element with internal image or text content
+- **Browser Support**: All modern browsers supporting Custom Elements v1
+
+## Important Notes
+
+- Images should preferably be square for best results; non-square images are cropped from the top
+- The `data-letters-shape` attribute only works with letter avatars, not image avatars
+- Custom CSS properties override default theme values; ensure color contrast meets WCAG 2.1 AA standards
+- When using `--b-avatar-svg`, the image is set as a background and will not have alt text for accessibility
+- Server-side rendering is recommended for optimal performance and SEO
+
+## Version
+
+Current version: 0.2.36