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

package/data/components/brick-classnames.md

@@ -1,150 +0,0 @@
----
-name: brick-classnames
-version: 2.1.0
-category: Utility
-tags: [utility, css, theming, design-system, classnames]
-use_cases: [theming, styling, design-tokens, css-variables]
-related: [brick-themes, brick-tokens]
----
-
-# Brick Classnames
-
-A utility module that converts design theme names into CSS-safe class names for use with Brick design tokens.
-
-## Key Capabilities
-
-- Converts design theme names to CSS-safe class names
-- Ensures correct scoping for theme-specific CSS variables
-- Works seamlessly with brick-tokens theme CSS files
-- TypeScript support with type-safe design names
-- Simple, single-function API
-
-## API
-
-### `designNameToClassName(designName: Design): string`
-
-Converts a design theme name to a CSS-safe class name that corresponds with theme classes in brick-tokens.
-
-**Parameters:**
-- `designName`: `Design` - One of: `'nettavisen' | 'alt' | 'alfa' | 'bravo' | 'charlie'`
-
-**Returns:** `string` - A CSS class name (e.g., `'themeAlt'`, `'themeBravo'`)
-
-## Examples
-
-### Basic Usage
-
-```javascript
-import { designNameToClassName } from '@amedia/brick-classnames';
-
-const cssClass = designNameToClassName('alt');
-// Returns: 'themeAlt'
-
-const html = `<div class="${cssClass}">
-  <amedia-foo>bar</amedia-foo>
-</div>`;
-```
-
-### With CSS Variables
-
-```javascript
-const className = designNameToClassName('bravo');
-// Returns: 'themeBravo'
-
-// In your HTML
-const markup = `<div class="${className}">
-  <button>Styled with Bravo theme</button>
-</div>`;
-```
-
-```css
-/* Your component CSS can reference theme variables */
-.button {
-  color: var(--brick-colors-adText);
-  background: var(--brick-colors-primary);
-}
-```
-
-### All Available Themes
-
-```javascript
-import { designNameToClassName } from '@amedia/brick-classnames';
-
-designNameToClassName('nettavisen'); // 'themeNettavisen'
-designNameToClassName('alt');        // 'themeAlt'
-designNameToClassName('alfa');       // 'themeAlfa'
-designNameToClassName('bravo');      // 'themeBravo'
-designNameToClassName('charlie');    // 'themeCharlie'
-```
-
-## Framework Integration
-
-### Svelte
-
-```svelte
-<script>
-  import { designNameToClassName } from '@amedia/brick-classnames';
-
-  export let design = 'alt';
-
-  $: themeClass = designNameToClassName(design);
-</script>
-
-<div class={themeClass}>
-  <slot />
-</div>
-```
-
-### React
-
-```jsx
-import { designNameToClassName } from '@amedia/brick-classnames';
-
-function ThemedContainer({ design, children }) {
-  const themeClass = designNameToClassName(design);
-
-  return (
-    <div className={themeClass}>
-      {children}
-    </div>
-  );
-}
-```
-
-## Technical Details
-
-- **Package**: `@amedia/brick-classnames`
-- **Type**: Utility function
-- **Dependencies**: `@amedia/brick-themes`
-- **Output format**: Camel-cased class name with 'theme' prefix
-
-## Important Notes
-
-- You must load the corresponding theme CSS file from Eik to use the CSS variables
-- Theme CSS files are available at: `https://assets.acdn.no/pkg/@amedia/brick-tokens/v2/css/theme-{name}.css`
-- The class name provides scoping for CSS variables defined in brick-tokens
-- TypeScript provides autocomplete and validation for design names
-
-## Common Patterns
-
-### Loading Theme CSS
-
-```javascript
-import { designNameToClassName } from '@amedia/brick-classnames';
-
-const design = 'bravo';
-const className = designNameToClassName(design);
-
-// Load the corresponding CSS file
-const link = document.createElement('link');
-link.rel = 'stylesheet';
-link.href = `https://assets.acdn.no/pkg/@amedia/brick-tokens/v2/css/theme-${design}.css`;
-document.head.appendChild(link);
-
-// Apply the class to enable scoped variables
-document.body.className = className;
-```
-
-## Version
-
-Current version: 2.1.0

package/data/components/brick-countdown.md

@@ -1,179 +0,0 @@
----
-name: brick-countdown
-version: 2.0.9
-selector: brick-countdown-v2
-category: Feedback
-tags: [countdown, timer, animation, teaser, time-based]
-use_cases: [product-launches, event-countdown, limited-offers, time-sensitive-content]
-related: [brick-teaser]
----
-
-# Brick Countdown
-
-An animated countdown component that displays time remaining until a specified date, with automatic updates and localization support.
-
-## Key Capabilities
-
-- Animated digit transitions with flip animation
-- Automatic countdown updates every second
-- Supports days, hours, minutes, and seconds display
-- Localization support (Norwegian Bokmål and Nynorsk)
-- Automatically hides when countdown reaches zero
-- Server-side rendering support via template function
-- Accessible with screen reader support
-
-## Props/Attributes
-
-| Attribute | Type | Default | Required | Description |
-|-----------|------|---------|----------|-------------|
-| `data-date` | EpochTimeStamp | - | yes | Unix timestamp in milliseconds for the target date |
-| `data-text` | string | - | no | Optional text to display with the countdown |
-| `data-locale` | 'nb_NO' \| 'nn_NO' | 'nb_NO' | no | Locale for time unit labels |
-
-## Examples
-
-### Basic Countdown
-
-```html
-<brick-countdown-v2
-  data-date="1713515269513"
-></brick-countdown-v2>
-```
-
-### With Custom Text
-
-```html
-<brick-countdown-v2
-  data-date="1713515269513"
-  data-text="Starts in"
-></brick-countdown-v2>
-```
-
-### With Locale
-
-```html
-<brick-countdown-v2
-  data-date="1713515269513"
-  data-text="Tid igjen"
-  data-locale="nn_NO"
-></brick-countdown-v2>
-```
-
-### JavaScript Creation
-
-```javascript
-const el = document.createElement('brick-countdown-v2');
-el.dataset.date = '1713515269513';
-el.dataset.text = 'Event starts in';
-el.dataset.locale = 'nb_NO';
-document.body.appendChild(el);
-```
-
-## Server-Side Rendering
-
-### Import and Render
-
-```javascript
-import { renderBrickCountdown } from '@amedia/brick-countdown/template';
-
-const markup = renderBrickCountdown({
-  dataDate: 1713515269513,
-  dataText: 'Starts in',
-  dataLocale: 'nb_NO'
-});
-```
-
-### Client-Side Hydration
-
-After server-side rendering, load the client-side JavaScript for interactivity:
-
-```javascript
-import '@amedia/brick-countdown';
-```
-
-## Behavior
-
-### Countdown Logic
-
-- Updates every second with animated digit transitions
-- Hides days unit when less than 1 day remains
-- Automatically removes itself from DOM when countdown reaches zero
-- Validates date and logs error if invalid timestamp provided
-
-### Animation
-
-- Digits animate vertically using CSS custom properties
-- Smooth transitions between numbers
-- No animation for units that haven't changed
-
-## Accessibility
-
-- Uses semantic `<time>` element with `datetime` attribute
-- Screen reader text updates with countdown progress
-- Visual and screen reader content synchronized
-- Proper ARIA labeling for time remaining
-
-## Localization
-
-### Supported Locales
-
-**Norwegian Bokmål (nb_NO - default):**
-- days: "dager"
-- hours: "timer"
-- minutes: "minutter"
-- seconds: "sekunder"
-
-**Norwegian Nynorsk (nn_NO):**
-- days: "dagar"
-- hours: "timar"
-- minutes: "minutt"
-- seconds: "sekund"
-
-## Common Patterns
-
-### Event Countdown in Teaser
-
-```html
-<brick-teaser-v9>
-  <brick-countdown-v2
-    data-date="1713515269513"
-    data-text="Direktesending starter om"
-  ></brick-countdown-v2>
-  <!-- Other teaser content -->
-</brick-teaser-v9>
-```
-
-### Dynamic Countdown Creation
-
-```javascript
-function createCountdown(targetDate, text) {
-  const countdown = document.createElement('brick-countdown-v2');
-  countdown.dataset.date = targetDate.getTime().toString();
-  countdown.dataset.text = text;
-  return countdown;
-}
-
-const eventDate = new Date('2024-12-31T23:59:59');
-const countdownEl = createCountdown(eventDate, 'New Year in');
-```
-
-## Technical Details
-
-- **Custom Element**: `brick-countdown-v2`
-- **Base Class**: BrickElement
-- **Dependencies**: `@amedia/brick-template`, `@amedia/brick-tokens`
-- **Renders as**: Custom element with `<time>` element inside
-- **Update Interval**: 1000ms (1 second)
-
-## Important Notes
-
-- Date must be provided as Unix timestamp in milliseconds
-- Component automatically removes itself when countdown ends
-- Days display is hidden when less than 24 hours remain
-- Invalid dates will log an error and prevent countdown from starting
-- Countdown stops updating when only days remain (no sub-day updates needed)
-- Uses `setInterval` which is automatically cleared on component disconnect
-
-## Version
-
-Current version: 2.0.9