@amedia/brick-mcp 0.1.5 → 0.1.6

package/data/components/brick-countdown.md

@@ -1,6 +1,6 @@
 ---
 name: brick-countdown
-version: 2.0.9
+version: 3.0.0
 selector: brick-countdown-v2
 category: Feedback
 tags: [countdown, timer, animation, teaser, time-based]
@@ -18,18 +18,18 @@ An animated countdown component that displays time remaining until a specified d
 - 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)
+- Localization support following IETF BCP 47 standard (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                        |
+| 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 (IETF BCP 47 format)   |
 
 ## Examples
 
@@ -54,7 +54,7 @@ An animated countdown component that displays time remaining until a specified d
 <brick-countdown-v2
   data-date="1713515269513"
   data-text="Tid igjen"
-  data-locale="nn_NO"
+  data-locale="nn-NO"
 ></brick-countdown-v2>
 ```
 
@@ -64,7 +64,7 @@ An animated countdown component that displays time remaining until a specified d
 const el = document.createElement('brick-countdown-v2');
 el.dataset.date = '1713515269513';
 el.dataset.text = 'Event starts in';
-el.dataset.locale = 'nb_NO';
+el.dataset.locale = 'nb-NO';
 document.body.appendChild(el);
 ```
 
@@ -78,7 +78,7 @@ import { renderBrickCountdown } from '@amedia/brick-countdown/template';
 const markup = renderBrickCountdown({
   dataDate: 1713515269513,
   dataText: 'Starts in',
-  dataLocale: 'nb_NO',
+  dataLocale: 'nb-NO',
 });
 ```
 
@@ -116,19 +116,21 @@ import '@amedia/brick-countdown';
 
 ### Supported Locales
 
-**Norwegian Bokmål (nb_NO - default):**
+The component follows the IETF BCP 47 language tag standard for locale values.
+
+**Norwegian Bokmål (nb-NO - default):**
 
 - days: "dager"
 - hours: "timer"
-- minutes: "minutter"
-- seconds: "sekunder"
+- minutes: "min"
+- seconds: "sek"
 
-**Norwegian Nynorsk (nn_NO):**
+**Norwegian Nynorsk (nn-NO):**
 
 - days: "dagar"
 - hours: "timar"
-- minutes: "minutt"
-- seconds: "sekund"
+- minutes: "min"
+- seconds: "sek"
 
 ## Common Patterns
 
@@ -139,6 +141,7 @@ import '@amedia/brick-countdown';
   <brick-countdown-v2
     data-date="1713515269513"
     data-text="Direktesending starter om"
+    data-locale="nb-NO"
   ></brick-countdown-v2>
   <!-- Other teaser content -->
 </brick-teaser-v9>
@@ -177,4 +180,12 @@ const countdownEl = createCountdown(eventDate, 'New Year in');
 
 ## Version
 
-Current version: 2.0.9
+Current version: 3.0.0 (pending release)
+
+## Breaking Changes in v3.0.0
+
+**Locale format update**: The `data-locale` attribute now follows the IETF BCP 47 standard:
+- Changed from `nb_NO` to `nb-NO` (Norwegian Bokmål)
+- Changed from `nn_NO` to `nn-NO` (Norwegian Nynorsk)
+
+If you are upgrading from v2.x, update any hardcoded locale values to use the hyphenated format.

package/data/components/brick-input.md

@@ -1,7 +1,7 @@
 ---
 name: brick-input
-version: 3.0.9
-selector: brick-input-v3
+version: 4.0.0
+selector: brick-input-v4
 category: Forms
 tags: [input, form-control, text-field, validation, form-element, user-input]
 use_cases:
@@ -15,7 +15,7 @@ use_cases:
     surveys,
     data-entry,
   ]
-related: [brick-tokens, brick-form]
+related: [brick-tokens, brick-form, brick-textarea]
 ---
 
 # Brick Input
@@ -24,7 +24,7 @@ A web component that renders accessible input fields with labels, validation sup
 
 ## Key Capabilities
 
-- Supports all standard HTML input types (text, email, password, number, date, checkbox, radio, etc.)
+- Supports all standard HTML input types (text, email, password, number, date, checkbox, radio, file, etc.)
 - Built-in label management with optional visual hiding (screen-reader accessible)
 - Pattern-based validation with error messages and aria-live announcements
 - Help text and optional field indicators
@@ -35,9 +35,11 @@ A web component that renders accessible input fields with labels, validation sup
 
 ## Props/Attributes
 
+All properties use camelCase naming when accessed programmatically (e.g., `dataLabelText`). Attributes use kebab-case (e.g., `data-label-text`).
+
 | Attribute           | Type                                                                                                                                                                                                               | Default                          | Required    | Description                                                            |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | ---------------------------------------------------------------------- |
-| `type`              | `'text' \| 'email' \| 'password' \| 'number' \| 'date' \| 'checkbox' \| 'radio' \| 'tel' \| 'url' \| 'search' \| 'file' \| 'color' \| 'range' \| 'time' \| 'button' \| 'submit' \| 'reset' \| 'hidden' \| 'image'` | `'text'`                         | yes         | Type of input field to render                                          |
+| `data-type`         | `'text' \| 'email' \| 'password' \| 'number' \| 'date' \| 'checkbox' \| 'radio' \| 'tel' \| 'url' \| 'search' \| 'file' \| 'color' \| 'range' \| 'time' \| 'button' \| 'submit' \| 'reset' \| 'hidden' \| 'image'` | `'text'`                         | yes         | Type of input field to render                                          |
 | `data-label-text`   | string                                                                                                                                                                                                             | -                                | recommended | Label text for the input field                                         |
 | `data-id`           | string                                                                                                                                                                                                             | -                                | no          | ID for the input element                                               |
 | `data-name`         | string                                                                                                                                                                                                             | -                                | no          | Name attribute for form submission                                     |
@@ -72,20 +74,20 @@ A web component that renders accessible input fields with labels, validation sup
 ### Basic Text Input
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="text"
   data-label-text="First Name"
   data-id="firstname"
   data-name="firstname"
   data-required="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Email Input with Validation
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="email"
   data-label-text="Email Address"
   data-id="email"
@@ -95,13 +97,13 @@ A web component that renders accessible input fields with labels, validation sup
   data-errortext="Please enter a valid email address"
   data-helptext="We'll never share your email"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Password Input
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="password"
   data-label-text="Password"
   data-id="password"
@@ -111,13 +113,13 @@ A web component that renders accessible input fields with labels, validation sup
   data-pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
   data-errortext="Password must be at least 8 characters with letters and numbers"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Number Input with Range
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="number"
   data-label-text="Age"
   data-id="age"
@@ -126,13 +128,13 @@ A web component that renders accessible input fields with labels, validation sup
   data-max="120"
   data-required="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Checkbox Input
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="checkbox"
   data-label-text="I accept the terms and conditions"
   data-id="terms"
@@ -140,7 +142,7 @@ A web component that renders accessible input fields with labels, validation sup
   data-value="accepted"
   data-required="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Radio Button Group
@@ -150,7 +152,7 @@ A web component that renders accessible input fields with labels, validation sup
 <fieldset>
   <legend>Select an option</legend>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="radio"
     data-label-text="Option 1"
     data-id="option1"
@@ -158,9 +160,9 @@ A web component that renders accessible input fields with labels, validation sup
     data-value="1"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="radio"
     data-label-text="Option 2"
     data-id="option2"
@@ -168,14 +170,14 @@ A web component that renders accessible input fields with labels, validation sup
     data-value="2"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 </fieldset>
 ```
 
 ### Date Input
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="date"
   data-label-text="Date of Birth"
   data-id="dob"
@@ -184,13 +186,13 @@ A web component that renders accessible input fields with labels, validation sup
   data-max="2025-12-31"
   data-required="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Search Input
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="search"
   data-label-text="Search"
   data-label-hidden="true"
@@ -198,13 +200,13 @@ A web component that renders accessible input fields with labels, validation sup
   data-name="q"
   data-placeholder="Search articles..."
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### File Upload
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="file"
   data-label-text="Upload Document"
   data-id="document"
@@ -212,20 +214,20 @@ A web component that renders accessible input fields with labels, validation sup
   data-accept=".pdf,.doc,.docx"
   data-multiple="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Input with Datalist (Autocomplete)
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="text"
   data-label-text="Choose a browser"
   data-id="browser"
   data-name="browser"
   data-list="browsers"
 >
-</brick-input-v3>
+</brick-input-v4>
 
 <datalist id="browsers">
   <option value="Chrome"></option>
@@ -238,20 +240,20 @@ A web component that renders accessible input fields with labels, validation sup
 ### Optional Field
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="text"
   data-label-text="Middle Name"
   data-id="middlename"
   data-name="middlename"
   data-optionaltext="(optional)"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ### Phone Number with Pattern
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="tel"
   data-label-text="Phone Number"
   data-id="phone"
@@ -261,7 +263,7 @@ A web component that renders accessible input fields with labels, validation sup
   data-errortext="Please enter a valid 8-digit phone number"
   data-required="true"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 ## Framework Integration
@@ -280,7 +282,7 @@ A web component that renders accessible input fields with labels, validation sup
   }
 </script>
 
-<brick-input-v3
+<brick-input-v4
   data-type="email"
   data-label-text="Email"
   data-id="email"
@@ -301,7 +303,7 @@ function MyForm() {
   };
 
   return (
-    <brick-input-v3
+    <brick-input-v4
       data-type="text"
       data-label-text="Username"
       data-id="username"
@@ -318,14 +320,13 @@ function MyForm() {
 ```javascript
 import { BrickInput } from '@amedia/brick-input';
 
-const input = new BrickInput({
-  type: 'email',
-  labelText: 'Email Address',
-  id: 'email',
-  name: 'email',
-  required: true,
-  placeholder: 'you@example.com',
-});
+const input = new BrickInput();
+input.dataType = 'email';
+input.dataLabelText = 'Email Address';
+input.dataId = 'email';
+input.dataName = 'email';
+input.dataRequired = true;
+input.dataPlaceholder = 'you@example.com';
 
 // Set change handler
 input.onChange = (event) => {
@@ -342,15 +343,15 @@ document.querySelector('form').appendChild(input);
 import { renderBrickInput } from '@amedia/brick-input/template';
 
 const inputHTML = renderBrickInput({
-  type: 'text',
-  labelText: 'First Name',
-  id: 'firstname',
-  name: 'firstname',
-  required: true,
+  dataType: 'text',
+  dataLabelText: 'First Name',
+  dataId: 'firstname',
+  dataName: 'firstname',
+  dataRequired: true,
 });
 
 // Include CSS file in your HTML
-// <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-input/v3/css/styles.css">
+// <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-input/v4/css/styles.css">
 ```
 
 ## Accessibility
@@ -370,13 +371,13 @@ const inputHTML = renderBrickInput({
 Validation is triggered on `blur` event for inputs with a `data-pattern` attribute:
 
 ```html
-<brick-input-v3
+<brick-input-v4
   data-type="text"
   data-label-text="Username"
   data-pattern="^[a-zA-Z0-9_]{3,16}$"
   data-errortext="Username must be 3-16 characters (letters, numbers, underscore only)"
 >
-</brick-input-v3>
+</brick-input-v4>
 ```
 
 **Supported types for pattern validation:**
@@ -400,7 +401,7 @@ Error messages are:
 
 ```html
 <form>
-  <brick-input-v3
+  <brick-input-v4
     data-type="email"
     data-label-text="Email"
     data-id="login-email"
@@ -408,9 +409,9 @@ Error messages are:
     data-autocomplete="email"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="password"
     data-label-text="Password"
     data-id="login-password"
@@ -418,7 +419,7 @@ Error messages are:
     data-autocomplete="current-password"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
   <button type="submit">Log In</button>
 </form>
@@ -428,7 +429,7 @@ Error messages are:
 
 ```html
 <form>
-  <brick-input-v3
+  <brick-input-v4
     data-type="text"
     data-label-text="Full Name"
     data-id="fullname"
@@ -436,9 +437,9 @@ Error messages are:
     data-autocomplete="name"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="email"
     data-label-text="Email"
     data-id="email"
@@ -446,9 +447,9 @@ Error messages are:
     data-autocomplete="email"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="password"
     data-label-text="Password"
     data-id="password"
@@ -457,16 +458,16 @@ Error messages are:
     data-minlength="8"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="checkbox"
     data-label-text="I agree to the terms and conditions"
     data-id="terms"
     data-name="terms"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
   <button type="submit">Register</button>
 </form>
@@ -476,7 +477,7 @@ Error messages are:
 
 ```html
 <form role="search">
-  <brick-input-v3
+  <brick-input-v4
     data-type="search"
     data-label-text="Search"
     data-label-hidden="true"
@@ -485,7 +486,7 @@ Error messages are:
     data-placeholder="Search articles..."
     data-autocomplete="off"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
   <button type="submit">Search</button>
 </form>
@@ -495,32 +496,32 @@ Error messages are:
 
 ```html
 <form>
-  <brick-input-v3
+  <brick-input-v4
     data-type="text"
     data-label-text="Name"
     data-id="contact-name"
     data-name="name"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="email"
     data-label-text="Email"
     data-id="contact-email"
     data-name="email"
     data-required="true"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
-  <brick-input-v3
+  <brick-input-v4
     data-type="tel"
     data-label-text="Phone"
     data-id="contact-phone"
     data-name="phone"
     data-optionaltext="(optional)"
   >
-  </brick-input-v3>
+  </brick-input-v4>
 
   <button type="submit">Send</button>
 </form>
@@ -528,7 +529,7 @@ Error messages are:
 
 ## Technical Details
 
-- **Custom Element**: `brick-input-v3`
+- **Custom Element**: `brick-input-v4`
 - **Base Class**: BrickElement
 - **Dependencies**:
   - @amedia/brick-tokens (design tokens and utilities)
@@ -539,7 +540,51 @@ Error messages are:
 
 ## Important Notes
 
-- The `type` attribute is required - defaults to `'text'` if not provided
+### Breaking Changes in v4.0.0
+
+**Property Naming Convention Updated:**
+
+- Properties now use camelCase with `data` prefix (e.g., `dataLabelText`, `dataType`, `dataPlaceholder`)
+- Attributes continue to use kebab-case (e.g., `data-label-text`, `data-type`, `data-placeholder`)
+
+**Migration Required:**
+
+If you're using server-side rendering (`renderBrickInput`), update your code to use camelCase properties with the `data` prefix:
+
+```javascript
+// Before (v3.x)
+renderBrickInput({
+  type: 'text',
+  labelText: 'First Name',
+  placeholder: 'Enter your name',
+  required: true,
+});
+
+// After (v4.0.0)
+renderBrickInput({
+  dataType: 'text',
+  dataLabelText: 'First Name',
+  dataPlaceholder: 'Enter your name',
+  dataRequired: true,
+});
+```
+
+If you're using the component in HTML with attributes, no changes are required - attributes already use the correct kebab-case format:
+
+```html
+<!-- No changes needed for HTML usage -->
+<brick-input-v4
+  data-type="text"
+  data-label-text="First Name"
+  data-placeholder="Enter your name"
+  data-required="true"
+>
+</brick-input-v4>
+```
+
+### General Notes
+
+- The `data-type` attribute is required - defaults to `'text'` if not provided
 - Use `data-label-text` for accessibility - it creates proper label associations
 - Use `data-label-hidden` to visually hide labels while keeping them accessible to screen readers
 - Pattern validation only works with: text, password, search, tel, url, and email types
@@ -549,9 +594,7 @@ Error messages are:
 - Validation triggers on blur (when user leaves the field)
 - The component provides an `onChange` setter/getter for custom change handling
 - Checkbox and radio inputs automatically manage their `checked` attribute on change
-- Version 3.0.0 removed the `getCssText` export - use CSS files instead
-- Version 2.0.0 changed the onChange event to bubble up correctly
 
 ## Version
 
-Current version: 3.0.9
+Current version: 4.0.0