@amedia/brick-mcp 0.1.3 → 0.1.4

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

@@ -0,0 +1,241 @@
+---
+name: brick-tab
+version: 0.1.14
+selector: brick-tab
+category: Navigation
+tags: [tab, tabs, tablist, navigation, accessibility, aria, icon, avatar]
+use_cases: [tabbed-navigation, content-organization, settings-panels, category-switching]
+related: [brick-tabs, brick-icon, brick-tokens]
+---
+
+# Brick Tab
+
+An individual tab button component that works within brick-tabs to provide accessible tabbed navigation with support for labels, icons, and avatars.
+
+## Key Capabilities
+
+- Individual tab button within a tablist
+- Optional icon support via brick-icon
+- Optional avatar image(s) display
+- Icon-only mode with required ARIA label
+- Proper ARIA attributes for accessibility
+- Keyboard navigation support (handled by brick-tabs)
+- Must be used within brick-tabs and brick-tablist components
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute          | Type   | Default | Required | Description                                                    |
+| ------------------ | ------ | ------- | -------- | -------------------------------------------------------------- |
+| `data-label`       | string | -       | no*      | Tab button label text                                          |
+| `data-button-id`   | string | -       | yes      | Unique ID for the tab button element                           |
+| `data-panel-id`    | string | -       | yes      | ID of the associated tabpanel element                          |
+| `data-icon-id`     | string | -       | no       | Icon ID from brick-icon to display                             |
+| `data-avatar-urls` | string | -       | no       | Comma-separated URLs for avatar images                         |
+| `data-aria-label`  | string | -       | no**     | ARIA label for accessibility (required for icon-only tabs)     |
+
+*Either `data-label` or `data-icon-id` must be provided
+**Required when `data-label` is not provided (icon-only mode)
+
+## Examples
+
+### Basic Tab
+
+```html
+<brick-tabs>
+  <brick-tablist>
+    <brick-tab
+      data-label="Tab 1"
+      data-button-id="tab-1"
+      data-panel-id="tab1-panel"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="tab1-panel" data-labelledby="tab-1">
+    <p>Tab 1 content</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Tab with Icon
+
+```html
+<brick-tab
+  data-label="Volume"
+  data-button-id="tab-2"
+  data-panel-id="tab2-panel"
+  data-icon-id="volume-on"
+></brick-tab>
+```
+
+### Icon-Only Tab
+
+```html
+<brick-tab
+  data-button-id="tab-3"
+  data-panel-id="tab3-panel"
+  data-icon-id="plusall"
+  data-aria-label="Pluss alt abonnement"
+></brick-tab>
+```
+
+### Tab with Avatar
+
+```html
+<brick-tab
+  data-label="Min avis"
+  data-button-id="tab-4"
+  data-panel-id="tab4-panel"
+  data-avatar-urls="https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg"
+></brick-tab>
+```
+
+### Tab with Multiple Avatars
+
+```html
+<brick-tab
+  data-label="Mine aviser"
+  data-button-id="tab-5"
+  data-panel-id="tab5-panel"
+  data-avatar-urls="https://r.acdn.no/local/v3/publications/www.dt.no/gfx/square.svg, https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg, https://r.acdn.no/local/v3/publications/www.ao.no/gfx/square.svg"
+></brick-tab>
+```
+
+## Complete Example with brick-tabs
+
+```html
+<brick-tabs data-aria-label="Main navigation">
+  <brick-tablist>
+    <brick-tab
+      data-label="For meg"
+      data-button-id="tab-1"
+      data-panel-id="tab1-panel"
+      data-avatar-urls="https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Andre aviser"
+      data-button-id="tab-2"
+      data-panel-id="tab2-panel"
+      data-icon-id="volume-on"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Dine aviser"
+      data-button-id="tab-3"
+      data-panel-id="tab3-panel"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="tab1-panel" data-labelledby="tab-1">
+    <p>Content for tab 1</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="tab2-panel" data-labelledby="tab-2">
+    <p>Content for tab 2</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="tab3-panel" data-labelledby="tab-3">
+    <p>Content for tab 3</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTab } from '@amedia/brick-tab/template';
+
+const tabHTML = renderBrickTab({
+  dataLabel: 'Tab 1',
+  dataButtonId: 'tab-1',
+  dataPanelId: 'tab1-panel',
+  dataIconId: 'volume-on',
+});
+```
+
+## Accessibility
+
+- Properly implements ARIA tab pattern
+- Tab buttons have `role="tab"`
+- `aria-controls` attribute points to associated panel
+- `aria-selected` managed by brick-tabs parent
+- Icon-only tabs require `data-aria-label` for screen readers
+- Keyboard navigation (Left/Right arrows, Home/End) handled by brick-tabs
+- Focus management handled by brick-tabs parent
+
+## Common Patterns
+
+### Publication Tabs with Avatars
+
+```html
+<brick-tabs>
+  <brick-tablist>
+    <brick-tab
+      data-label="Rogalands Avis"
+      data-button-id="tab-ra"
+      data-panel-id="panel-ra"
+      data-avatar-urls="https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="panel-ra" data-labelledby="tab-ra">
+    <!-- Publication content -->
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Settings Tabs with Icons
+
+```html
+<brick-tabs>
+  <brick-tablist>
+    <brick-tab
+      data-label="Account"
+      data-icon-id="user"
+      data-button-id="tab-account"
+      data-panel-id="panel-account"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Notifications"
+      data-icon-id="bell"
+      data-button-id="tab-notifications"
+      data-panel-id="panel-notifications"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="panel-account" data-labelledby="tab-account">
+    <!-- Account settings -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-notifications" data-labelledby="tab-notifications">
+    <!-- Notification settings -->
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-tab`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Parent Component**: Must be used within `brick-tabs` and `brick-tablist`
+- **Renders as**: `<button role="tab">`
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- brick-tab must always be used within brick-tabs and brick-tablist components
+- The `data-button-id` must be unique within the page
+- The `data-panel-id` must match the `id` attribute of the associated brick-tabpanel
+- Icon-only tabs (no `data-label`) require `data-aria-label` for accessibility
+- Avatar URLs in `data-avatar-urls` should be comma-separated for multiple avatars
+- Keyboard navigation and focus management are handled by the parent brick-tabs component
+- The component does not function properly when tested in isolation (requires brick-tabs parent)
+
+## Version
+
+Current version: 0.1.14

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

@@ -0,0 +1,420 @@
+---
+name: brick-tabs
+version: 0.1.15
+selector: brick-tabs
+category: Navigation
+tags: [tabs, tablist, tabpanel, navigation, accessibility, aria, container]
+use_cases: [tabbed-navigation, content-organization, settings-panels, category-switching, multi-section-content]
+related: [brick-tab, brick-icon, brick-tokens]
+---
+
+# Brick Tabs
+
+A container component that implements the ARIA tabs pattern, managing tablist, individual tabs, and tabpanels with full keyboard navigation and accessibility support.
+
+## Key Capabilities
+
+- Complete ARIA tabs pattern implementation
+- Automatic keyboard navigation (Arrow keys, Home, End)
+- Automatic focus management
+- Pre-select specific tab via attribute
+- Optional border styling
+- Configurable tab wrapping behavior
+- Configurable tab width (full or auto)
+- Manages state for child brick-tab components
+- Full accessibility with ARIA labels
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute              | Type                     | Default     | Required | Description                                               |
+| ---------------------- | ------------------------ | ----------- | -------- | --------------------------------------------------------- |
+| `data-aria-label`      | string                   | -           | yes      | ARIA label for the tablist (e.g., "Main navigation")      |
+| `data-selected-panel`  | string                   | First panel | no       | ID of panel to show on initial render                     |
+| `data-border`          | string                   | -           | no       | Set to "true" to add border styling                       |
+| `data-wrap`            | `"wrap" \| "no-wrap"`    | `"no-wrap"` | no       | Control tab wrapping behavior                             |
+| `data-width`           | `"full" \| "auto"`       | `"auto"`    | no       | Tab button width (full = 100%, auto = content-based)      |
+
+## Examples
+
+### Basic Tabs
+
+```html
+<brick-tabs data-aria-label="Content sections">
+  <brick-tablist>
+    <brick-tab
+      data-label="For meg"
+      data-button-id="tab-1"
+      data-panel-id="tab1-panel"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Andre aviser"
+      data-button-id="tab-2"
+      data-panel-id="tab2-panel"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="tab1-panel" data-labelledby="tab-1">
+    <p>Content for first tab</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="tab2-panel" data-labelledby="tab-2">
+    <p>Content for second tab</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Pre-selected Tab
+
+```html
+<brick-tabs
+  data-aria-label="Navigation"
+  data-selected-panel="tab2-panel"
+>
+  <brick-tablist>
+    <brick-tab
+      data-label="Tab 1"
+      data-button-id="tab-1"
+      data-panel-id="tab1-panel"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Tab 2"
+      data-button-id="tab-2"
+      data-panel-id="tab2-panel"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="tab1-panel" data-labelledby="tab-1">
+    <p>Tab 1 content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="tab2-panel" data-labelledby="tab-2">
+    <p>Tab 2 content (initially visible)</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### With Border
+
+```html
+<brick-tabs
+  data-aria-label="Settings"
+  data-border="true"
+>
+  <brick-tablist>
+    <brick-tab
+      data-label="Account"
+      data-button-id="tab-1"
+      data-panel-id="panel-1"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Privacy"
+      data-button-id="tab-2"
+      data-panel-id="panel-2"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="panel-1" data-labelledby="tab-1">
+    <!-- Account settings -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-2" data-labelledby="tab-2">
+    <!-- Privacy settings -->
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Wrapping Tabs with Full Width
+
+```html
+<brick-tabs
+  data-aria-label="Categories"
+  data-wrap="wrap"
+  data-width="full"
+>
+  <brick-tablist>
+    <brick-tab
+      data-label="Category 1"
+      data-button-id="cat-1"
+      data-panel-id="panel-1"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Category 2"
+      data-button-id="cat-2"
+      data-panel-id="panel-2"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Category 3"
+      data-button-id="cat-3"
+      data-panel-id="panel-3"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Category 4"
+      data-button-id="cat-4"
+      data-panel-id="panel-4"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="panel-1" data-labelledby="cat-1">
+    <p>Category 1 content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-2" data-labelledby="cat-2">
+    <p>Category 2 content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-3" data-labelledby="cat-3">
+    <p>Category 3 content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-4" data-labelledby="cat-4">
+    <p>Category 4 content</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Tabs with Icons and Avatars
+
+```html
+<brick-tabs data-aria-label="Publications">
+  <brick-tablist>
+    <brick-tab
+      data-label="For meg"
+      data-button-id="tab-1"
+      data-panel-id="panel-1"
+      data-avatar-urls="https://r.acdn.no/local/v3/publications/www.rastavanger.no/gfx/square.svg"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Andre aviser"
+      data-button-id="tab-2"
+      data-panel-id="panel-2"
+      data-icon-id="volume-on"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Dine aviser"
+      data-button-id="tab-3"
+      data-panel-id="panel-3"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="panel-1" data-labelledby="tab-1">
+    <p>Personal content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-2" data-labelledby="tab-2">
+    <p>Other publications</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="panel-3" data-labelledby="tab-3">
+    <p>Your publications</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+## Programmatic Usage
+
+### Switch Tabs Programmatically
+
+```javascript
+const tabs = document.querySelector('brick-tabs');
+
+// Switch to specific panel
+tabs.dataSelectedPanel = 'tab2-panel';
+```
+
+### Listen for Tab Changes
+
+```javascript
+const tabs = document.querySelector('brick-tabs');
+
+tabs.addEventListener('brick-tabs:change', (event) => {
+  console.log('Active panel:', event.detail.panelId);
+});
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTabs } from '@amedia/brick-tabs/template';
+
+const html = renderBrickTabs({
+  dataAriaLabel: 'Main navigation',
+  dataSelectedPanel: 'tab1-panel',
+  dataBorder: 'true',
+  dataWrap: 'wrap',
+  dataWidth: 'full',
+});
+```
+
+## Keyboard Navigation
+
+The component automatically handles keyboard navigation:
+
+- **Left Arrow**: Move to previous tab
+- **Right Arrow**: Move to next tab
+- **Home**: Move to first tab
+- **End**: Move to last tab
+- **Tab**: Move focus into active tabpanel content
+
+## Accessibility
+
+- Implements W3C ARIA Authoring Practices tabs pattern
+- Tablist has `role="tablist"`
+- Each tab has `role="tab"`, `aria-controls`, and `aria-selected`
+- Each tabpanel has `role="tabpanel"` and `aria-labelledby`
+- Keyboard navigation fully supported
+- Focus management automatically handled
+- Only active tabpanel visible to screen readers
+- Required `data-aria-label` for tablist semantic labeling
+
+## Common Patterns
+
+### Settings Tabs
+
+```html
+<brick-tabs data-aria-label="User settings" data-border="true">
+  <brick-tablist>
+    <brick-tab
+      data-label="Profile"
+      data-button-id="profile-tab"
+      data-panel-id="profile-panel"
+      data-icon-id="user"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Notifications"
+      data-button-id="notifications-tab"
+      data-panel-id="notifications-panel"
+      data-icon-id="bell"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Security"
+      data-button-id="security-tab"
+      data-panel-id="security-panel"
+      data-icon-id="lock"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="profile-panel" data-labelledby="profile-tab">
+    <!-- Profile settings form -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="notifications-panel" data-labelledby="notifications-tab">
+    <!-- Notification preferences -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="security-panel" data-labelledby="security-tab">
+    <!-- Security settings -->
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+### Content Categories
+
+```html
+<brick-tabs data-aria-label="Article categories" data-width="full">
+  <brick-tablist>
+    <brick-tab
+      data-label="Latest"
+      data-button-id="latest-tab"
+      data-panel-id="latest-panel"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Sports"
+      data-button-id="sports-tab"
+      data-panel-id="sports-panel"
+    ></brick-tab>
+
+    <brick-tab
+      data-label="Business"
+      data-button-id="business-tab"
+      data-panel-id="business-panel"
+    ></brick-tab>
+  </brick-tablist>
+
+  <brick-tabpanel id="latest-panel" data-labelledby="latest-tab">
+    <!-- Latest articles -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="sports-panel" data-labelledby="sports-tab">
+    <!-- Sports articles -->
+  </brick-tabpanel>
+
+  <brick-tabpanel id="business-panel" data-labelledby="business-tab">
+    <!-- Business articles -->
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  let selectedPanel = 'tab1-panel';
+</script>
+
+<brick-tabs
+  data-aria-label="Navigation"
+  data-selected-panel={selectedPanel}
+>
+  <brick-tablist>
+    <brick-tab
+      data-label="Tab 1"
+      data-button-id="tab-1"
+      data-panel-id="tab1-panel"
+    />
+    <brick-tab
+      data-label="Tab 2"
+      data-button-id="tab-2"
+      data-panel-id="tab2-panel"
+    />
+  </brick-tablist>
+
+  <brick-tabpanel id="tab1-panel" data-labelledby="tab-1">
+    <p>Tab 1 content</p>
+  </brick-tabpanel>
+
+  <brick-tabpanel id="tab2-panel" data-labelledby="tab-2">
+    <p>Tab 2 content</p>
+  </brick-tabpanel>
+</brick-tabs>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-tabs`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-tab (tab buttons)
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Child Components**: Requires brick-tablist, brick-tab, and brick-tabpanel
+- **Renders as**: Container div managing tablist and tabpanels
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- Must contain brick-tablist with brick-tab children and brick-tabpanel siblings
+- Each brick-tab's `data-panel-id` must match a brick-tabpanel's `id` attribute
+- Each brick-tabpanel's `data-labelledby` must match a brick-tab's `data-button-id`
+- The `data-aria-label` is required for proper accessibility
+- First tab/panel is selected by default unless `data-selected-panel` is specified
+- Tab IDs must be unique within the page
+- Keyboard navigation is automatic and cannot be disabled
+- Only one tabpanel is visible at a time (others are hidden with `display: none`)
+
+## Version
+
+Current version: 0.1.15