@amedia/brick-mcp 0.1.3 → 0.1.4

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

@@ -0,0 +1,191 @@
+---
+name: brick-textarea
+version: 2.0.10
+selector: brick-textarea-v2
+category: Forms
+tags: [textarea, input, form, multiline, validation, accessibility]
+use_cases: [forms, comments, messages, descriptions, feedback, multiline-input]
+related: [brick-input, brick-tokens, brick-template]
+---
+
+# Brick Textarea
+
+An accessible, validated multiline text input component with label, help text, error handling, and character count support.
+
+## Key Capabilities
+
+- Multiline text input with semantic label
+- Optional or required field support
+- Built-in validation with error messages
+- Help text for guidance
+- Character length constraints (min/max)
+- Hidden label option for compact layouts
+- Autofocus support
+- Pattern validation
+- Accessibility-first design with proper ARIA labels
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute            | Type   | Default | Required | Description                                           |
+| -------------------- | ------ | ------- | -------- | ----------------------------------------------------- |
+| `data-label-text`    | string | -       | yes      | Label text for the textarea                           |
+| `data-id`            | string | -       | yes      | Unique ID for the textarea element                    |
+| `data-name`          | string | -       | yes      | Name attribute for form submission                    |
+| `data-value`         | string | -       | no       | Initial textarea value                                |
+| `data-placeholder`   | string | -       | no       | Placeholder text                                      |
+| `data-help-text`     | string | -       | no       | Help text displayed below textarea                    |
+| `data-error-text`    | string | -       | no       | Error message to display                              |
+| `data-required`      | string | -       | no       | Set to "true" to mark as required field               |
+| `data-optional-text` | string | -       | no       | Text to show for optional fields (e.g., "Optional")   |
+| `data-label-hidden`  | string | -       | no       | Set to "true" to visually hide label (keeps for a11y) |
+| `data-maxlength`     | string | -       | no       | Maximum character length                              |
+| `data-minlength`     | string | -       | no       | Minimum character length                              |
+| `data-pattern`       | string | -       | no       | Validation pattern (regex)                            |
+| `data-autofocus`     | string | -       | no       | Set to "true" to autofocus on load                    |
+| `data-alt`           | string | -       | no       | Alternative text for accessibility                    |
+
+## Examples
+
+### Basic Textarea
+
+```html
+<brick-textarea-v2
+  data-id="comment"
+  data-name="comment"
+  data-label-text="Your Comment"
+  data-placeholder="Enter your comment here..."
+>
+</brick-textarea-v2>
+```
+
+### Required Field with Help Text
+
+```html
+<brick-textarea-v2
+  data-id="message"
+  data-name="message"
+  data-label-text="Message"
+  data-help-text="Please provide a detailed message"
+  data-required="true"
+>
+</brick-textarea-v2>
+```
+
+### With Character Limits
+
+```html
+<brick-textarea-v2
+  data-id="bio"
+  data-name="bio"
+  data-label-text="Biography"
+  data-maxlength="500"
+  data-minlength="10"
+  data-help-text="Between 10 and 500 characters"
+>
+</brick-textarea-v2>
+```
+
+### With Error State
+
+```html
+<brick-textarea-v2
+  data-id="feedback"
+  data-name="feedback"
+  data-label-text="Feedback"
+  data-required="true"
+  data-error-text="This field is required"
+>
+</brick-textarea-v2>
+```
+
+### Optional Field
+
+```html
+<brick-textarea-v2
+  data-id="notes"
+  data-name="notes"
+  data-label-text="Additional Notes"
+  data-optional-text="Optional"
+>
+</brick-textarea-v2>
+```
+
+### With Initial Value
+
+```html
+<brick-textarea-v2
+  data-id="description"
+  data-name="description"
+  data-label-text="Description"
+  data-value="This is the initial description text."
+>
+</brick-textarea-v2>
+```
+
+## Programmatic Usage
+
+```javascript
+const textarea = document.querySelector('brick-textarea-v2');
+
+// Get value
+const value = textarea.dataValue;
+
+// Set value
+textarea.dataValue = 'New text content';
+
+// Show error
+textarea.dataErrorText = 'Invalid input';
+
+// Clear error
+textarea.dataErrorText = '';
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTextarea } from '@amedia/brick-textarea/template';
+
+const html = renderBrickTextarea({
+  dataId: 'message',
+  dataName: 'message',
+  dataLabelText: 'Your Message',
+  dataPlaceholder: 'Type your message...',
+  dataRequired: 'true',
+  dataHelpText: 'Maximum 1000 characters',
+  dataMaxlength: '1000',
+});
+```
+
+## Accessibility
+
+- Proper label association with textarea via `for` and `id`
+- Required fields marked with `aria-required`
+- Error states with `aria-invalid` and `aria-describedby`
+- Help text linked via `aria-describedby`
+- Hidden labels remain accessible to screen readers
+- Keyboard navigation support
+- Validation error announcements
+
+## Technical Details
+
+- **Custom Element**: `brick-textarea-v2`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: `<textarea>` with label and help elements
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- The `data-id` and `data-name` attributes are required for proper form functionality
+- Error text automatically shows validation state
+- Character limits are enforced by the browser
+- Pattern validation uses HTML5 pattern attribute
+- Hidden labels (`data-label-hidden="true"`) remain accessible to assistive technology
+- The component does not handle form submission - use within a `<form>` element
+
+## Version
+
+Current version: 2.0.10

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

@@ -0,0 +1,104 @@
+---
+name: brick-themes
+version: 1.0.1
+selector: N/A
+category: Utilities
+tags: [themes, theming, publications, branding, design-tokens]
+use_cases: [publication-branding, multi-tenant-theming, brand-customization]
+related: [brick-tokens]
+---
+
+# Brick Themes
+
+A utility package that provides theme name constants for Amedia publications, used in conjunction with brick-tokens for publication-specific styling and branding.
+
+## Key Capabilities
+
+- Centralized theme name constants
+- Publication theme definitions
+- Used by brick-tokens for theme generation
+- TypeScript type definitions
+- Ensures consistent theme naming across the design system
+
+## Overview
+
+Brick Themes is an internal utility package that defines theme names for various Amedia publications. It works in conjunction with `@amedia/brick-tokens` to provide publication-specific design tokens and styling.
+
+## Usage
+
+### Import Theme Names
+
+```javascript
+import { themes } from '@amedia/brick-themes';
+
+// Use theme names
+console.log(themes.alfa);    // 'alfa'
+console.log(themes.bergen);  // 'bergen'
+console.log(themes.bt);      // 'bt'
+```
+
+### With Brick Tokens
+
+```javascript
+import '@amedia/brick-tokens';
+import '@amedia/brick-tokens/dist/themes/alfa/index.js';
+import '@amedia/brick-tokens/dist/themes/bergen/index.js';
+import '@amedia/brick-tokens/dist/themes/bt/index.js';
+```
+
+## Available Themes
+
+The package provides theme names for Amedia publications including:
+
+- **Alfa** (alfa)
+- **Bergen** (bergen)
+- **BT** (bt)
+- And many more publication-specific themes
+
+Each theme name corresponds to a theme definition in brick-tokens that includes:
+- Publication-specific color palettes
+- Brand colors
+- Typography settings
+- Spacing and layout tokens
+
+## Integration with Brick Tokens
+
+Brick Themes works as a companion package to brick-tokens:
+
+1. **brick-themes**: Defines theme name constants
+2. **brick-tokens**: Uses these names to generate theme-specific token sets
+3. **Components**: Apply themes via brick-tokens
+
+```javascript
+// Theme names from brick-themes
+import { themes } from '@amedia/brick-themes';
+
+// Theme tokens from brick-tokens
+import `@amedia/brick-tokens/dist/themes/${themes.alfa}/index.js`;
+```
+
+## Technical Details
+
+- **Package Type**: Theme name constants and utilities
+- **Output**: ES modules with theme definitions
+- **TypeScript**: Full type definitions included
+- **CDN**: Available via Eik CDN
+- **Dependencies**: None (standalone utility)
+
+## CDN Usage
+
+```html
+<script src="https://assets.acdn.no/pkg/@amedia/brick-themes/1.0.1/brick-themes.js" type="module"></script>
+```
+
+## Important Notes
+
+- This is primarily an internal package used by brick-tokens
+- Theme names must match between brick-themes and brick-tokens
+- The package ensures type safety for theme names
+- Publication themes are managed centrally for consistency
+- Version 1.0.1 is the current stable version
+
+## Version
+
+Current version: 1.0.1

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

@@ -0,0 +1,271 @@
+---
+name: brick-toast
+version: 0.1.28
+selector: brick-toast
+category: Feedback
+tags: [toast, notification, alert, message, feedback, snackbar, temporary]
+use_cases: [success-messages, error-notifications, info-alerts, temporary-feedback, user-notifications]
+related: [brick-button, brick-icon, brick-tokens]
+---
+
+# Brick Toast
+
+A notification component that displays temporary messages with configurable position, duration, status styling, and optional close button.
+
+## Key Capabilities
+
+- Temporary notification messages
+- Multiple position options (9 positions)
+- Auto-dismiss with configurable duration
+- Optional close button
+- Error status styling
+- Custom icons support
+- Programmatic open/close control
+- Accessibility support
+- Automatic stacking of multiple toasts
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute        | Type                                                                                | Default           | Required | Description                                    |
+| ---------------- | ----------------------------------------------------------------------------------- | ----------------- | -------- | ---------------------------------------------- |
+| `data-message`   | string                                                                              | -                 | yes      | Message text to display                        |
+| `data-open`      | string                                                                              | `"false"`         | no       | Set to "true" to show toast                    |
+| `data-duration`  | string (number)                                                                     | `"3000"`          | no       | Auto-dismiss duration in milliseconds          |
+| `data-position`  | `"top-center" \| "top-left" \| "top-right" \| "center-center" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"bottom-center"` | no       | Toast position on screen                       |
+| `data-status`    | `"error"`                                                                           | -                 | no       | Status styling (currently only error supported)|
+| `data-iconid`    | string                                                                              | -                 | no       | Icon ID from brick-icon                        |
+| `data-close-btn` | string                                                                              | `"true"`          | no       | Set to "false" to hide close button            |
+
+## Examples
+
+### Basic Toast
+
+```html
+<brick-toast
+  data-message="Changes saved successfully"
+  data-open="true"
+>
+</brick-toast>
+```
+
+### Error Toast
+
+```html
+<brick-toast
+  data-message="An error occurred"
+  data-status="error"
+  data-open="true"
+>
+</brick-toast>
+```
+
+### Top Right Position
+
+```html
+<brick-toast
+  data-message="New message received"
+  data-position="top-right"
+  data-open="true"
+>
+</brick-toast>
+```
+
+### With Custom Icon
+
+```html
+<brick-toast
+  data-message="Upload complete"
+  data-iconid="check-circle"
+  data-open="true"
+>
+</brick-toast>
+```
+
+### Without Close Button
+
+```html
+<brick-toast
+  data-message="Loading..."
+  data-close-btn="false"
+  data-duration="5000"
+  data-open="true"
+>
+</brick-toast>
+```
+
+### Long Duration
+
+```html
+<brick-toast
+  data-message="Important notification"
+  data-duration="10000"
+  data-open="true"
+>
+</brick-toast>
+```
+
+## Programmatic Usage
+
+```javascript
+// Create and show toast
+const toast = document.createElement('brick-toast');
+toast.dataMessage = 'Action completed';
+toast.dataPosition = 'top-center';
+toast.dataDuration = '3000';
+toast.dataOpen = 'true';
+document.body.appendChild(toast);
+
+// Show existing toast
+const existingToast = document.querySelector('brick-toast');
+existingToast.dataOpen = 'true';
+
+// Close toast
+existingToast.dataOpen = 'false';
+
+// Listen for close event
+toast.addEventListener('brick-toast:close', (event) => {
+  console.log('Toast closed');
+});
+```
+
+## Position Options
+
+```html
+<!-- Top positions -->
+<brick-toast data-position="top-left" data-message="Top left" data-open="true"></brick-toast>
+<brick-toast data-position="top-center" data-message="Top center" data-open="true"></brick-toast>
+<brick-toast data-position="top-right" data-message="Top right" data-open="true"></brick-toast>
+
+<!-- Center positions -->
+<brick-toast data-position="center-center" data-message="Center" data-open="true"></brick-toast>
+
+<!-- Bottom positions -->
+<brick-toast data-position="bottom-left" data-message="Bottom left" data-open="true"></brick-toast>
+<brick-toast data-position="bottom-center" data-message="Bottom center" data-open="true"></brick-toast>
+<brick-toast data-position="bottom-right" data-message="Bottom right" data-open="true"></brick-toast>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickToast } from '@amedia/brick-toast/template';
+
+const html = renderBrickToast({
+  dataMessage: 'Success message',
+  dataStatus: 'error',
+  dataPosition: 'top-right',
+  dataDuration: '5000',
+  dataOpen: 'true',
+  dataIconid: 'check',
+  dataCloseBtn: 'true',
+});
+```
+
+## Accessibility
+
+- Role="alert" for screen reader announcements
+- Live region announcements for dynamic messages
+- Keyboard accessible close button (Enter/Space)
+- Focus management for close button
+- ARIA labels for all interactive elements
+
+## Common Patterns
+
+### Success Notification
+
+```javascript
+function showSuccess(message) {
+  const toast = document.createElement('brick-toast');
+  toast.dataMessage = message;
+  toast.dataIconid = 'check-circle';
+  toast.dataPosition = 'bottom-center';
+  toast.dataOpen = 'true';
+  document.body.appendChild(toast);
+}
+
+showSuccess('Settings saved successfully');
+```
+
+### Error Notification
+
+```javascript
+function showError(message) {
+  const toast = document.createElement('brick-toast');
+  toast.dataMessage = message;
+  toast.dataStatus = 'error';
+  toast.dataIconid = 'alert-circle';
+  toast.dataPosition = 'top-center';
+  toast.dataDuration = '5000';
+  toast.dataOpen = 'true';
+  document.body.appendChild(toast);
+}
+
+showError('Failed to save changes');
+```
+
+### Multiple Toasts
+
+```javascript
+// Toasts automatically stack when multiple are shown
+function showMultipleToasts() {
+  ['First message', 'Second message', 'Third message'].forEach((msg, i) => {
+    setTimeout(() => {
+      const toast = document.createElement('brick-toast');
+      toast.dataMessage = msg;
+      toast.dataOpen = 'true';
+      document.body.appendChild(toast);
+    }, i * 500);
+  });
+}
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  let showToast = false;
+  let message = '';
+
+  function notify(msg) {
+    message = msg;
+    showToast = true;
+  }
+</script>
+
+<brick-toast
+  data-message={message}
+  data-open={showToast ? 'true' : 'false'}
+  on:brick-toast:close={() => showToast = false}
+/>
+
+<button on:click={() => notify('Hello!')}>Show Toast</button>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-toast`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-button (close button)
+  - @amedia/brick-icon (icons)
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: Fixed position overlay element
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- Toasts auto-dismiss after the specified duration (default 3000ms)
+- Multiple toasts automatically stack in the specified position
+- The close button can be disabled for loading states
+- Currently only "error" status is styled differently (more statuses may be added)
+- Toast remains in DOM after closing unless manually removed
+- Position is fixed and unaffected by scroll
+- Toasts should be added to document.body for proper positioning
+
+## Version
+
+Current version: 0.1.28