@amedia/brick-mcp 0.1.2 → 0.1.4

package/data/components/brick-tooltip.md

@@ -0,0 +1,249 @@
+---
+name: brick-tooltip
+version: 1.0.17
+selector: brick-tooltip-v1
+category: Feedback
+tags: [tooltip, hint, help, popover, overlay, positioning]
+use_cases: [help-text, additional-info, icon-explanations, contextual-help]
+related: [brick-tokens, brick-template]
+---
+
+# Brick Tooltip
+
+A contextual help component that displays additional information when hovering over or focusing on an anchor element, with configurable positioning and optional tail indicator.
+
+## Key Capabilities
+
+- Four positioning options (above, below, left, right)
+- Anchored to any element via ID reference
+- Optional visual tail/arrow
+- Hover and focus trigger support
+- Automatic positioning within viewport
+- Accessibility support with proper ARIA
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute        | Type                                    | Default  | Required | Description                                    |
+| ---------------- | --------------------------------------- | -------- | -------- | ---------------------------------------------- |
+| `data-anchor`    | string                                  | -        | yes      | ID of the element to anchor the tooltip to     |
+| `data-text`      | string                                  | -        | yes      | Tooltip text content                           |
+| `data-position`  | `"above" \| "below" \| "left" \| "right"` | `"above"` | no       | Position relative to anchor element            |
+| `data-tail`      | string                                  | `"false"` | no       | Set to "true" to show visual tail/arrow        |
+
+## Examples
+
+### Basic Tooltip (Above)
+
+```html
+<button id="help-btn">Help</button>
+<brick-tooltip-v1
+  data-anchor="help-btn"
+  data-text="Click for more information"
+>
+</brick-tooltip-v1>
+```
+
+### Tooltip Below
+
+```html
+<span id="username">John Doe</span>
+<brick-tooltip-v1
+  data-anchor="username"
+  data-text="Premium member since 2020"
+  data-position="below"
+>
+</brick-tooltip-v1>
+```
+
+### Tooltip with Tail
+
+```html
+<button id="save-btn">Save</button>
+<brick-tooltip-v1
+  data-anchor="save-btn"
+  data-text="Save your changes"
+  data-position="above"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Left Positioned
+
+```html
+<span id="info-icon">ℹ️</span>
+<brick-tooltip-v1
+  data-anchor="info-icon"
+  data-text="Additional information about this feature"
+  data-position="left"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Right Positioned
+
+```html
+<button id="delete-btn">Delete</button>
+<brick-tooltip-v1
+  data-anchor="delete-btn"
+  data-text="This action cannot be undone"
+  data-position="right"
+>
+</brick-tooltip-v1>
+```
+
+## Programmatic Usage
+
+```javascript
+// Create tooltip dynamically
+const tooltip = document.createElement('brick-tooltip-v1');
+tooltip.dataAnchor = 'my-button';
+tooltip.dataText = 'Helpful information';
+tooltip.dataPosition = 'below';
+tooltip.dataTail = 'true';
+document.body.appendChild(tooltip);
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickTooltip } from '@amedia/brick-tooltip/template';
+
+const html = renderBrickTooltip({
+  dataAnchor: 'help-icon',
+  dataText: 'This is a helpful tooltip',
+  dataPosition: 'above',
+  dataTail: 'true',
+});
+```
+
+## Positioning
+
+The tooltip automatically positions itself relative to the anchor element:
+
+- **above**: Tooltip appears above the anchor
+- **below**: Tooltip appears below the anchor
+- **left**: Tooltip appears to the left of the anchor
+- **right**: Tooltip appears to the right of the anchor
+
+If there isn't enough space in the specified position, the tooltip may adjust to stay within the viewport.
+
+## Accessibility
+
+- Tooltip is announced to screen readers
+- Anchor element receives `aria-describedby` pointing to tooltip
+- Tooltip appears on both hover and keyboard focus
+- ESC key dismisses tooltip
+- Proper ARIA roles and attributes
+
+## Common Patterns
+
+### Icon with Tooltip
+
+```html
+<brick-icon id="help-icon" data-icon-id="help-circle"></brick-icon>
+<brick-tooltip-v1
+  data-anchor="help-icon"
+  data-text="Click to learn more about this feature"
+  data-position="right"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+### Form Field Help
+
+```html
+<label for="email">Email Address
+  <span id="email-help">?</span>
+</label>
+<input type="email" id="email" aria-describedby="tooltip-email">
+
+<brick-tooltip-v1
+  id="tooltip-email"
+  data-anchor="email-help"
+  data-text="We'll never share your email address"
+  data-position="right"
+>
+</brick-tooltip-v1>
+```
+
+### Button Explanation
+
+```html
+<button id="advanced-btn" aria-describedby="advanced-tooltip">
+  Advanced Settings
+</button>
+<brick-tooltip-v1
+  id="advanced-tooltip"
+  data-anchor="advanced-btn"
+  data-text="Configure advanced options for power users"
+  data-position="below"
+  data-tail="true"
+>
+</brick-tooltip-v1>
+```
+
+## Framework Integration
+
+### Svelte
+
+```svelte
+<script>
+  let anchorId = 'my-element';
+</script>
+
+<button id={anchorId}>Hover me</button>
+<brick-tooltip-v1
+  data-anchor={anchorId}
+  data-text="Helpful information"
+  data-position="above"
+  data-tail="true"
+/>
+```
+
+### React
+
+```jsx
+function ComponentWithTooltip() {
+  const id = 'help-button';
+
+  return (
+    <>
+      <button id={id}>Help</button>
+      <brick-tooltip-v1
+        data-anchor={id}
+        data-text="Get help and support"
+        data-position="below"
+      />
+    </>
+  );
+}
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-tooltip-v1`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: Positioned overlay element
+- **SSR Compatible**: Yes, with template function
+- **Positioning**: Absolute positioning relative to anchor
+
+## Important Notes
+
+- The anchor element must have a unique ID
+- The anchor element must exist in the DOM when tooltip is created
+- Tooltip visibility is controlled by CSS (hover/focus on anchor)
+- The tail/arrow is purely visual and doesn't affect positioning logic
+- Long tooltip text may wrap or require position adjustment
+- Tooltips should be kept concise for best UX
+- Multiple tooltips can exist on the same page for different anchors
+
+## Version
+
+Current version: 1.0.17

package/data/components-metadata.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "brick-alt-teaser",
-    "version": "8.0.70",
+    "version": "8.1.0",
     "selector": "brick-alt-teaser-v8",
     "category": "Display",
     "tags": [
@@ -10,7 +10,7 @@
   },
   {
     "name": "brick-avatar",
-    "version": "0.2.42",
+    "version": "0.2.44",
     "selector": "brick-avatar-v0",
     "description": "brick-avatar component",
     "category": "Display",
@@ -20,7 +20,7 @@
   },
   {
     "name": "brick-button",
-    "version": "9.3.6",
+    "version": "9.4.2",
     "selector": "brick-button-v9",
     "category": "Forms",
     "tags": [
@@ -30,13 +30,13 @@
   },
   {
     "name": "brick-byline",
-    "version": "1.0.2",
+    "version": "1.0.6",
     "selector": "brick-byline-v1",
     "description": "brick-byline component"
   },
   {
     "name": "brick-card",
-    "version": "7.3.13",
+    "version": "7.3.16",
     "selector": "brick-card-v7",
     "category": "Layout",
     "tags": [
@@ -45,7 +45,7 @@
   },
   {
     "name": "brick-carousel",
-    "version": "2.2.2",
+    "version": "2.2.5",
     "selector": "brick-carousel-v2",
     "description": "Simple carousel for any content passed to it.",
     "category": "Display",
@@ -55,8 +55,8 @@
   },
   {
     "name": "brick-classnames",
-    "version": "2.1.0",
-    "selector": "brick-classnames-v2",
+    "version": "3.0.0",
+    "selector": "brick-classnames-v3",
     "description": "Utility method to create a safe string from a design name",
     "category": "Utilities",
     "tags": [
@@ -65,13 +65,13 @@
   },
   {
     "name": "brick-countdown",
-    "version": "2.0.14",
+    "version": "2.0.15",
     "selector": "brick-countdown-v2",
     "description": "brick-countdown component"
   },
   {
     "name": "brick-dialog",
-    "version": "2.0.18",
+    "version": "2.0.21",
     "selector": "brick-dialog-v2",
     "description": "brick-dialog component",
     "category": "Feedback",
@@ -81,7 +81,7 @@
   },
   {
     "name": "brick-expand",
-    "version": "0.0.4",
+    "version": "0.0.8",
     "selector": "brick-expand-v0",
     "description": "brick-expand component"
   },
@@ -97,13 +97,13 @@
   },
   {
     "name": "brick-helloworld",
-    "version": "2.0.7",
+    "version": "2.0.9",
     "selector": "brick-helloworld-v2",
     "description": "Brick Hello World component"
   },
   {
     "name": "brick-icon",
-    "version": "2.3.6",
+    "version": "2.3.8",
     "selector": "brick-icon-v2",
     "category": "Display",
     "tags": [
@@ -118,7 +118,7 @@
   },
   {
     "name": "brick-image",
-    "version": "6.0.10",
+    "version": "6.0.11",
     "selector": "brick-image-v6",
     "category": "Display",
     "tags": [
@@ -127,7 +127,7 @@
   },
   {
     "name": "brick-input",
-    "version": "3.0.14",
+    "version": "3.0.15",
     "selector": "brick-input-v3",
     "description": "brick-input component",
     "category": "Forms",
@@ -138,48 +138,48 @@
   },
   {
     "name": "brick-nifs",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "selector": "brick-nifs-v0",
     "description": "brick-nifs component"
   },
   {
     "name": "brick-pill",
-    "version": "9.0.7",
+    "version": "9.0.9",
     "selector": "brick-pill-v9"
   },
   {
     "name": "brick-player",
-    "version": "1.27.22",
-    "selector": "brick-player-v1",
+    "version": "2.0.0",
+    "selector": "brick-player-v2",
     "description": "Component for playing video and audio files"
   },
   {
     "name": "brick-published",
-    "version": "4.0.6",
+    "version": "4.0.7",
     "selector": "brick-published-v4",
     "description": "brick-published"
   },
   {
     "name": "brick-share",
-    "version": "0.3.9",
+    "version": "0.3.12",
     "selector": "brick-share-v0",
     "description": "brick-share component"
   },
   {
     "name": "brick-stepper",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "selector": "brick-stepper-v1",
     "description": "brick-stepper component"
   },
   {
     "name": "brick-tab",
-    "version": "0.1.13",
+    "version": "0.1.14",
     "selector": "brick-tab-v0",
     "description": "brick-tab component"
   },
   {
     "name": "brick-tabs",
-    "version": "0.1.14",
+    "version": "0.1.15",
     "selector": "brick-tabs-v0",
     "description": "brick-tabs component handling tablist, tabs and tabpanel",
     "category": "Navigation",
@@ -189,14 +189,14 @@
   },
   {
     "name": "brick-tag",
-    "version": "0.0.13",
+    "version": "0.0.14",
     "selector": "brick-tag-v0",
     "description": "brick-tag component"
   },
   {
     "name": "brick-teaser",
-    "version": "20.1.0",
-    "selector": "brick-teaser-v20",
+    "version": "21.2.1",
+    "selector": "brick-teaser-v21",
     "description": "Teaser component.",
     "category": "Display",
     "tags": [
@@ -205,7 +205,7 @@
   },
   {
     "name": "brick-teaser-player",
-    "version": "1.0.28",
+    "version": "1.1.0",
     "selector": "brick-teaser-player-v1",
     "description": "brick-video-teaser component",
     "category": "Display",
@@ -215,7 +215,7 @@
   },
   {
     "name": "brick-teaser-reels",
-    "version": "0.4.2",
+    "version": "0.4.5",
     "selector": "brick-teaser-reels-v0",
     "description": "brick-teaser-reels component",
     "category": "Display",
@@ -225,7 +225,7 @@
   },
   {
     "name": "brick-textarea",
-    "version": "2.0.9",
+    "version": "2.0.10",
     "selector": "brick-textarea-v2",
     "description": "brick-textarea component"
   },
@@ -237,7 +237,7 @@
   },
   {
     "name": "brick-toast",
-    "version": "0.1.25",
+    "version": "0.1.28",
     "selector": "brick-toast-v0",
     "description": "brick-toast component",
     "category": "Feedback",
@@ -247,14 +247,14 @@
   },
   {
     "name": "brick-toggle",
-    "version": "3.1.12",
+    "version": "3.1.14",
     "selector": "brick-toggle-v3",
     "description": "brick-toggle component"
   },
   {
     "name": "brick-tokens",
-    "version": "5.21.0",
-    "selector": "brick-tokens-v5",
+    "version": "6.0.0",
+    "selector": "brick-tokens-v6",
     "description": "Tokens package",
     "category": "Utilities",
     "tags": [
@@ -263,7 +263,7 @@
   },
   {
     "name": "brick-tooltip",
-    "version": "1.0.15",
+    "version": "1.0.17",
     "selector": "brick-tooltip-v1",
     "description": "brick-tooltip component"
   }