@reliability-design/web 1.4.9 → 1.4.11

package/dist/components/rel-tab/README.md

@@ -1,174 +1,184 @@
-# rel-tab
-
-`<rel-tab>` implements the Figma **Tab Item** component (6473:1075) as an underline tab strip with roving-tabindex keyboard navigation, optional count or dot badges and a single shared tabpanel below the strip. Tabs are declared either with slotted `<rel-tab-item>` elements (registered by this folder; they render nothing themselves) or with the `tabs` array property. Use it to switch between peer views of the same content in place; for moving between pages use links or the navbar recipe, and for ordered multi-step flows use `<rel-stepper>`.
-
-## Usage
-
-```html
-<!-- Declarative tabs with badges and a disabled item -->
-<rel-tab id="inbox-tabs" size="medium">
-  <rel-tab-item slot="items" label="Inbox" value="inbox" badge="5"></rel-tab-item>
-  <rel-tab-item slot="items" label="Drafts" value="drafts" badge-dot></rel-tab-item>
-  <rel-tab-item slot="items" label="Archive" value="archive" disabled></rel-tab-item>
-  <div id="inbox-panel">Inbox content.</div>
-</rel-tab>
-
-<script>
-  const tabs = document.getElementById('inbox-tabs');
-  tabs.addEventListener('rel-tab-change', (e) => {
-    const index = e.detail; // number
-    const item = tabs.querySelectorAll('rel-tab-item')[index];
-    document.getElementById('inbox-panel').textContent = `${item.value} content.`;
-  });
-</script>
-
-<!-- Sizes: small (32px), medium (40px), large (48px) -->
-<rel-tab size="small">
-  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
-  <rel-tab-item slot="items" label="Details"></rel-tab-item>
-</rel-tab>
-<rel-tab size="large" activeindex="1">
-  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
-  <rel-tab-item slot="items" label="Details"></rel-tab-item>
-</rel-tab>
-
-<!-- Tabs from the `tabs` property -->
-<rel-tab id="array-tabs"></rel-tab>
-<script>
-  document.getElementById('array-tabs').tabs = [
-    { label: 'Overview' },
-    { label: 'Alerts', badge: 2 },
-    { label: 'Beta', badgeDot: true },
-    { label: 'Coming soon', disabled: true },
-  ];
-</script>
-```
-
-### Deprecated aliases
-
-```html
-<!-- size="sm" / "md" / "lg" → size="small" / "medium" / "large" (still accepted; no console notice is logged) -->
-<rel-tab size="sm">
-  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
-</rel-tab>
-```
-
-<!-- readme-gen:start -->
-
-<!-- Generated from rel-tab.ts — do not edit; run readme-generate.mjs -->
-
-## Elements
-
-| Element | Class | Source |
-| --- | --- | --- |
-| `<rel-tab>` | `RelTab` | `rel-tab.ts` |
-| `<rel-tab-item>` | `RelTabItem` | `rel-tab.ts` |
-
-## API
-
-### `<rel-tab>`
-
-#### Attributes / Properties
-
-| Property | Attribute | Type | Default | Description |
-| --- | --- | --- | --- | --- |
-| `tabs` | `tabs` | `TabItem[]` | `[]` | Tab definitions as `{ label, badge?, badgeDot?, disabled? }` objects — normally set as a property (as an attribute it must be a JSON string). Assign a new array to update; mutating in place does not re-render. Ignored when `<rel-tab-item>` children are slotted into `items`. |
-| `activeIndex` | `activeindex` | `number` | `0` | Zero-based index of the selected tab. Set it to switch tabs programmatically (no event is fired for programmatic changes). Reflected. |
-| `size` | `size` | `"sm" \| "md" \| "lg" \| "small" \| "medium" \| "large"` | `"md"` | Tab size — styled via :host([size]) rules. Explicit item heights 32 / 40 / 48px (audit 34); `small\|medium\|large` alias `sm\|md\|lg`. Reflected. |
-
-### Events
-
-| Event | Detail | Bubbles / composed | Description |
-| --- | --- | --- | --- |
-| `rel-tab-change` | `index` | bubbles / composed | Fired when the user selects a tab by click or keyboard (not on programmatic `activeIndex` changes). Detail: the new active index (number). |
-| `rel-change` | `index` | bubbles / composed | Prefixed alias of `rel-tab-change`, added in 1.4.9 — fired on the same action with the same detail. Both events fire; listen to one. Prefer this in new code, since every interactive component in the library emits `rel-change`. `rel-tab-change` is kept for as long as 1.x. |
-
-### Slots
-
-| Slot | Description |
-| --- | --- |
-| (default) | Content of the single tabpanel rendered under the strip (always visible — swap it yourself on `rel-tab-change`) |
-| `items` | `<rel-tab-item>` definitions; when present they take precedence over the `tabs` array |
-
-### CSS Parts
-
-| Part | Description |
-| --- | --- |
-| `list` | The `role="tablist"` row |
-| `item` | Each `role="tab"` element |
-| `icon` | — |
-| `label` | The text span inside each tab |
-
-### Tokens / CSS Variables
-
-#### Component hooks
-
-Set these on the host (or an ancestor) to customise the element without touching design tokens.
-
-| Custom property | Default | Description |
-| --- | --- | --- |
-| `--rel-tab-active-color` | `var(--tab-active-color)` | Underline colour of the active tab; default `var(--rel-bg-brand)` |
-| `--rel-tab-hover-color` | `var(--tab-hover-color)` | Background of an inactive tab on hover; default `var(--rel-bg-neutral-elevated-1)` |
-| `--rel-tab-text-default` | `var(--tab-text-default)` | Label colour of the active tab; default `var(--rel-text-default)` |
-| `--rel-tab-text-disabled` | `inherit` | Label colour of a disabled tab; default `var(--rel-text-disabled)` |
-| `--rel-tab-text-hover` | `var(--tab-text-hover)` | Label colour while hovering an enabled tab; default `var(--rel-text-label)` |
-| `--rel-tab-underline-height` | `var(--tab-underline-height)` | Thickness of the active underline; default 1px (`--rel-stroke-sm`, the weight Figma draws). Set it to restore the heavier 3px bar shipped previously. |
-
-### `<rel-tab-item>`
-
-#### Attributes / Properties
-
-| Property | Attribute | Type | Default | Description |
-| --- | --- | --- | --- | --- |
-| `label` | `label` | `string` | `""` | Text shown on the tab. |
-| `icon` | `icon` | `string` | `""` | Icon name from the generated icon dictionary, rendered before the label (Figma "Show Icon" / "Icon"). Sized 20 / 18 / 16px with the tab's own size step. |
-| `value` | `value` | `string` | `""` | Optional identifier for the tab. `<rel-tab>` does not read it; look it up from the item at `event.detail` when handling `rel-tab-change`. |
-| `badge` | `badge` | `number` | `0` | Count shown in a small badge after the label; `0` hides the badge. |
-| `badgeDot` | `badge-dot` | `boolean` | `false` | Shows a small dot instead of a numbered badge — takes precedence over `badge`. |
-| `disabled` | `disabled` | `boolean` | `false` | Greys the tab out and skips it in click, arrow-key and Home/End navigation. |
-
-### Events
-
-| Event | Detail | Bubbles / composed | Description |
-| --- | --- | --- | --- |
-| — | — | — | This element emits no custom events. |
-
-### Slots
-
-| Slot | Description |
-| --- | --- |
-| — | This element has no slots. |
-
-### CSS Parts
-
-| Part | Description |
-| --- | --- |
-| — | None exposed. |
-
-<!-- readme-gen:end -->
-
-## Accessibility
-
-- The strip is `role="tablist"`; every tab is `role="tab"` with `aria-selected`, `aria-disabled` and `aria-controls` pointing at the shared `role="tabpanel"`, which in turn is `aria-labelledby` the active tab and is focusable (`tabindex="0"`).
-- Roving tabindex: only the active tab is in the Tab order (`tabindex="0"`); other and disabled tabs are `tabindex="-1"`.
-- Arrow keys use automatic activation — moving focus also selects the tab and fires `rel-tab-change`.
-- Focus is shown as a 2px outline inset inside the tab.
-- Disabled tabs ignore clicks and keys and are skipped by arrow, Home and End navigation.
-
-| Key | Action |
-| --- | --- |
-| `ArrowRight` | Selects and focuses the next enabled tab (wraps to the first). |
-| `ArrowLeft` | Selects and focuses the previous enabled tab (wraps to the last). |
-| `Home` | Selects and focuses the first enabled tab. |
-| `End` | Selects and focuses the last enabled tab. |
-| `Enter` / `Space` | Selects the focused tab (no-op when disabled). |
-| `Tab` | Leaves the strip (moves to the tabpanel). |
-
-## Notes / Edge Cases
-
-- There is one always-visible tabpanel (the default slot). The component does not show/hide content per tab — swap or filter the panel content yourself on `rel-tab-change` or by watching `activeIndex`.
-- `rel-tab-change` fires for user selection only; setting `activeIndex` programmatically updates the strip silently.
-- Slotted `<rel-tab-item>` elements take precedence over the `tabs` array. Their `value` is not read by `<rel-tab>` — look it up from the item at `event.detail` when you need an identifier. The `items` slot itself is hidden.
-- `badge-dot` wins over `badge`; a `badge` of `0` renders no badge. Badges use the danger tone on enabled tabs and a neutral inverse tone on disabled tabs.
-- `size` accepts `small` / `medium` / `large` (item heights 32 / 40 / 48px with body-sm / md / lg type); the short forms `sm` / `md` / `lg` are aliases (see Deprecated aliases).
-- Legacy hook aliases still honoured: `--tab-active-color`, `--tab-underline-height`, `--tab-text-default`, `--tab-text-hover`, `--tab-text-disabled` and `--tab-hover-color` are read as fallbacks of the `--rel-tab-*` hooks.
+# rel-tab
+
+`<rel-tab>` implements the Figma **Tab Item** component (6473:1075) as an underline tab strip with roving-tabindex keyboard navigation, optional count or dot badges and a single shared tabpanel below the strip. Tabs are declared either with slotted `<rel-tab-item>` elements (registered by this folder; they render nothing themselves) or with the `tabs` array property. Use it to switch between peer views of the same content in place; for moving between pages use links or the navbar recipe, and for ordered multi-step flows use `<rel-stepper>`.
+
+## Usage
+
+```html
+<!-- Declarative tabs with badges and a disabled item -->
+<rel-tab id="inbox-tabs" size="medium">
+  <rel-tab-item slot="items" label="Inbox" value="inbox" badge="5"></rel-tab-item>
+  <rel-tab-item slot="items" label="Drafts" value="drafts" badge-dot></rel-tab-item>
+  <rel-tab-item slot="items" label="Archive" value="archive" disabled></rel-tab-item>
+  <div id="inbox-panel">Inbox content.</div>
+</rel-tab>
+
+<script>
+  const tabs = document.getElementById('inbox-tabs');
+  tabs.addEventListener('rel-tab-change', (e) => {
+    const index = e.detail; // number
+    const item = tabs.querySelectorAll('rel-tab-item')[index];
+    document.getElementById('inbox-panel').textContent = `${item.value} content.`;
+  });
+</script>
+
+<!-- Sizes: small (32px), medium (40px), large (48px) -->
+<rel-tab size="small">
+  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
+  <rel-tab-item slot="items" label="Details"></rel-tab-item>
+</rel-tab>
+<rel-tab size="large" active-index="1">
+  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
+  <rel-tab-item slot="items" label="Details"></rel-tab-item>
+</rel-tab>
+
+<!-- Tabs from the `tabs` property -->
+<rel-tab id="array-tabs"></rel-tab>
+<script>
+  document.getElementById('array-tabs').tabs = [
+    { label: 'Overview' },
+    { label: 'Alerts', badge: 2 },
+    { label: 'Beta', badgeDot: true },
+    { label: 'Coming soon', disabled: true },
+  ];
+</script>
+```
+
+### Deprecated aliases
+
+```html
+<!-- size="sm" / "md" / "lg" → size="small" / "medium" / "large" (still accepted; no console notice is logged) -->
+<rel-tab size="sm">
+  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
+</rel-tab>
+
+<!-- activeindex → active-index (since 1.5.0; still works, logs a one-time console notice, removed in 3.0).
+     activeIndex still reflects as activeindex in 1.x. -->
+<rel-tab activeindex="1">
+  <rel-tab-item slot="items" label="Overview"></rel-tab-item>
+  <rel-tab-item slot="items" label="Details"></rel-tab-item>
+</rel-tab>
+```
+
+<!-- readme-gen:start -->
+
+<!-- Generated from rel-tab.ts — do not edit; run readme-generate.mjs -->
+
+## Elements
+
+| Element | Class | Source |
+| --- | --- | --- |
+| `<rel-tab>` | `RelTab` | `rel-tab.ts` |
+| `<rel-tab-item>` | `RelTabItem` | `rel-tab.ts` |
+
+## API
+
+### `<rel-tab>`
+
+#### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `tabs` | `tabs` | `TabItem[]` | `[]` | Tab definitions as `{ label, badge?, badgeDot?, disabled? }` objects — normally set as a property (as an attribute it must be a JSON string). Assign a new array to update; mutating in place does not re-render. Ignored when `<rel-tab-item>` children are slotted into `items`. |
+| `activeIndex` | `active-index` | `number` | `0` | Zero-based index of the selected tab. Set it to switch tabs programmatically (no event is fired for programmatic changes). Reflected (as `activeindex` in 1.x). The `activeindex` attribute spelling is deprecated (still works; removal targeted for 3.0). |
+| `size` | `size` | `"sm" \| "md" \| "lg" \| "small" \| "medium" \| "large"` | `"md"` | Tab size — styled via :host([size]) rules. Explicit item heights 32 / 40 / 48px (audit 34); `small\|medium\|large` alias `sm\|md\|lg`. Reflected. |
+| `orientation` | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | New in 1.5.0. Tab list layout: `horizontal` (default, a row above the panel) or `vertical` (a column beside the panel as wide as its longest label, tabs 24px apart along a rule on the list's inline-start edge, the active bar on that edge, labels that wrap rather than truncate; Up / Down move between tabs). There is no built-in breakpoint: switch to horizontal on small screens in your app. Reflected. |
+| `iconPlacement` | `icon-placement` | `"start" \| "top"` | `"start"` | New in 1.5.0. Icon position in every tab: `start` (default, before the label) or `top` (stacked above the label, with the badge beside the label). Stacked tabs are 76 / 64 / 52px tall at large / medium / small. Works in both orientations. Reflected. |
+
+### Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| `rel-change` | `index` | bubbles / composed | Prefixed alias of `rel-tab-change`, added in 1.4.9 — fired on the same action with the same detail. Both events fire; listen to one. Prefer this in new code, since every interactive component in the library emits `rel-change`. `rel-tab-change` is kept for as long as 1.x. |
+| `rel-tab-change` | `index` | bubbles / composed | Fired when the user selects a tab by click or keyboard (not on programmatic `activeIndex` changes). Detail: the new active index (number). |
+
+### Slots
+
+| Slot | Description |
+| --- | --- |
+| (default) | Content of the single tabpanel rendered under the strip (always visible — swap it yourself on `rel-tab-change`) |
+| `items` | `<rel-tab-item>` definitions; when present they take precedence over the `tabs` array |
+
+### CSS Parts
+
+| Part | Description |
+| --- | --- |
+| `list` | The `role="tablist"` row |
+| `item` | Each `role="tab"` element |
+| `icon` | — |
+| `label` | The text span inside each tab |
+
+### Tokens / CSS Variables
+
+#### Component hooks
+
+Set these on the host (or an ancestor) to customise the element without touching design tokens.
+
+| Custom property | Default | Description |
+| --- | --- | --- |
+| `--rel-tab-active-color` | `var(--tab-active-color)` | Underline colour of the active tab; default `var(--rel-bg-brand)` |
+| `--rel-tab-hover-color` | `var(--tab-hover-color)` | Background of an inactive tab on hover; default `transparent` (the design darkens the label instead). Set it to bring a hover fill back. |
+| `--rel-tab-list-width` | `max-content` | Width of the tab list when `orientation="vertical"`; default `max-content` |
+| `--rel-tab-text-default` | `var(--tab-text-default)` | Label colour of the active tab; default `var(--rel-text-default)` |
+| `--rel-tab-text-disabled` | `var(--rel-text-default)` | Label colour of a disabled tab; default `var(--rel-text-disabled)` |
+| `--rel-tab-text-hover` | `var(--tab-text-hover)` | Label colour while hovering an enabled tab; default `var(--rel-text-default)` |
+| `--rel-tab-underline-height` | `var(--tab-underline-height)` | Thickness of the active underline; default 1px (`--rel-stroke-sm`, the weight Figma draws). Set it to restore the heavier 3px bar shipped previously. |
+
+### `<rel-tab-item>`
+
+#### Attributes / Properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `""` | Text shown on the tab. |
+| `icon` | `icon` | `string` | `""` | Icon name from the generated icon dictionary, rendered before the label (Figma "Show Icon" / "Icon"). Sized 20 / 18 / 16px with the tab's own size step. |
+| `value` | `value` | `string` | `""` | Optional identifier for the tab. `<rel-tab>` does not read it; look it up from the item at `event.detail` when handling `rel-tab-change`. |
+| `badge` | `badge` | `number` | `0` | Count shown in a small badge after the label; `0` hides the badge. |
+| `badgeDot` | `badge-dot` | `boolean` | `false` | Shows a small dot instead of a numbered badge — takes precedence over `badge`. |
+| `disabled` | `disabled` | `boolean` | `false` | Greys the tab out and skips it in click, arrow-key and Home/End navigation. |
+
+### Events
+
+| Event | Detail | Bubbles / composed | Description |
+| --- | --- | --- | --- |
+| — | — | — | This element emits no custom events. |
+
+### Slots
+
+| Slot | Description |
+| --- | --- |
+| — | This element has no slots. |
+
+### CSS Parts
+
+| Part | Description |
+| --- | --- |
+| — | None exposed. |
+
+<!-- readme-gen:end -->
+
+## Accessibility
+
+- The strip is `role="tablist"`; every tab is `role="tab"` with `aria-selected`, `aria-disabled` and `aria-controls` pointing at the shared `role="tabpanel"`, which in turn is `aria-labelledby` the active tab and is focusable (`tabindex="0"`).
+- Roving tabindex: only the active tab is in the Tab order (`tabindex="0"`); other and disabled tabs are `tabindex="-1"`.
+- Arrow keys use automatic activation — moving focus also selects the tab and fires `rel-tab-change`.
+- Focus is shown as a 2px outline inset inside the tab.
+- Disabled tabs ignore clicks and keys and are skipped by arrow, Home and End navigation.
+
+| Key | Action |
+| --- | --- |
+| `ArrowRight` | Selects and focuses the next enabled tab (wraps to the first). |
+| `ArrowLeft` | Selects and focuses the previous enabled tab (wraps to the last). |
+| `Home` | Selects and focuses the first enabled tab. |
+| `End` | Selects and focuses the last enabled tab. |
+| `Enter` / `Space` | Selects the focused tab (no-op when disabled). |
+| `Tab` | Leaves the strip (moves to the tabpanel). |
+
+## Notes / Edge Cases
+
+- There is one always-visible tabpanel (the default slot). The component does not show/hide content per tab — swap or filter the panel content yourself on `rel-tab-change` or by watching `activeIndex`.
+- `rel-tab-change` fires for user selection only; setting `activeIndex` programmatically updates the strip silently.
+- Slotted `<rel-tab-item>` elements take precedence over the `tabs` array. Their `value` is not read by `<rel-tab>` — look it up from the item at `event.detail` when you need an identifier. The `items` slot itself is hidden.
+- `badge-dot` wins over `badge`; a `badge` of `0` renders no badge. Badges use the danger tone on enabled tabs and a neutral inverse tone on disabled tabs.
+- `size` accepts `small` / `medium` / `large` (item heights 32 / 40 / 48px with body-sm / md / lg type); the short forms `sm` / `md` / `lg` are aliases (see Deprecated aliases).
+- Legacy hook aliases still honoured: `--tab-active-color`, `--tab-underline-height`, `--tab-text-default`, `--tab-text-hover`, `--tab-text-disabled` and `--tab-hover-color` are read as fallbacks of the `--rel-tab-*` hooks.

package/dist/components/rel-textfield/README.md

@@ -19,7 +19,7 @@
 <rel-textfield label-style="none" placeholder="Search orders" field-aria-label="Search orders"></rel-textfield>
 
 <!-- Leading icon, helper text, required -->
-<rel-textfield label="Search" prefixicon="search" helpertext="Type at least 3 characters" required></rel-textfield>
+<rel-textfield label="Search" prefix-icon="search" helper-text="Type at least 3 characters" required></rel-textfield>
 
 <!-- Prefix / suffix text (Figma .Preffix / .Suffix) -->
 <rel-textfield label="Website" prefix-text="https://" prefix-style="fill"></rel-textfield>
@@ -36,7 +36,7 @@
   id="pw"
   label="Password"
   type="password"
-  righticon="eye"
+  right-icon="visibility-on"
   clickable-right-icon
   right-icon-aria-label="Show password">
 </rel-textfield>
@@ -49,7 +49,7 @@
 </script>
 
 <!-- Error state -->
-<rel-textfield label="Username" value="a" error errormessage="Must be at least 3 characters"></rel-textfield>
+<rel-textfield label="Username" value="a" error error-message="Must be at least 3 characters"></rel-textfield>
 
 <!-- Multiline (textarea) -->
 <rel-textfield label="Notes" multiline rows="5" maxlength="500"></rel-textfield>
@@ -59,7 +59,7 @@
 <rel-textfield label="Disabled" disabled></rel-textfield>
 <rel-textfield id="qty" label="Quantity" type="number"></rel-textfield>
 <script>
-  // fullWidth defaults to true; a boolean attribute cannot express false, so unset it via the property
+  // fullWidth defaults to true; full-width="false" in markup does the same as this
   document.getElementById("qty").fullWidth = false;
 </script>
 ```
@@ -70,6 +70,13 @@
 <!-- floatingLabel → label-style="floating" (kept permanently as an alias; no console notice) -->
 <rel-textfield label="Old spelling" floatinglabel></rel-textfield>
 <rel-textfield label="Canonical" label-style="floating"></rel-textfield>
+
+<!-- Lowercase-joined attribute spellings → kebab-case (since 1.5.0; the old ones still work,
+     log a one-time console notice, and are removed in 3.0) -->
+<rel-textfield label="Old spelling" prefixicon="search" lefticon="search" righticon="visibility-on" prefixiconarialabel="Search"
+  helpertext="Helper" errormessage="Error" fullwidth></rel-textfield>
+<rel-textfield label="Canonical" prefix-icon="search" left-icon="search" right-icon="visibility-on" prefix-icon-aria-label="Search"
+  helper-text="Helper" error-message="Error" full-width></rel-textfield>
 ```
 
 <!-- readme-gen:start -->
@@ -86,8 +93,8 @@
 | `placeholder` | `placeholder` | `string` | `""` | Placeholder shown while the field is empty. Under the floating label style it stays hidden until the field is focused. |
 | `type` | `type` | `string` | `"text"` | Native input `type` (`text`, `email`, `password`, `number`, …). Ignored when `multiline` is set. |
 | `value` | `value` | `string` | `""` | Current text. Updated on every keystroke; set it to control the field programmatically. |
-| `leftIcon` | `lefticon` | `string` | `undefined` | Legacy name for the leading icon (a `rel-icon` name). `prefixIcon` wins when both are set. |
-| `rightIcon` | `righticon` | `string` | `undefined` | Trailing `rel-icon` name rendered in the suffix block. Decorative unless `clickableRightIcon` is set. |
+| `leftIcon` | `left-icon` | `string` | `undefined` | Legacy name for the leading icon (a `rel-icon` name). `prefixIcon` wins when both are set. The `lefticon` attribute spelling is deprecated (still works; removal targeted for 3.0). |
+| `rightIcon` | `right-icon` | `string` | `undefined` | Trailing `rel-icon` name rendered in the suffix block. Decorative unless `clickableRightIcon` is set. The `righticon` attribute spelling is deprecated (still works; removal targeted for 3.0). |
 | `clickableRightIcon` | `clickable-right-icon` | `boolean` | `false` | Makes the trailing icon interactive (pointer + focusable) and emits `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. |
 | `rightIconAriaLabel` | `right-icon-aria-label` | `string` | `undefined` | Accessible label for the trailing icon when it is clickable. |
 | `prefixText` | `prefix-text` | `string` | `undefined` | Short text rendered before the input, e.g. `"http://"` or `"$"`. Sits in the same prefix block as `prefixIcon` and is styled by `prefixStyle`. |
@@ -105,16 +112,16 @@
 | `required` | `required` | `boolean` | `false` | Marks the input required: sets native `required` / `aria-required` and appends an asterisk to the label. |
 | `multiline` | `multiline` | `boolean` | `false` | Renders a textarea instead of a single-line input (see `rows`). Prefix/suffix blocks and `type` are ignored in this mode. Reflected. |
 | `rows` | `rows` | `number` | `3` | Visible text rows of the textarea when `multiline` is set. |
-| `prefixIcon` | `prefixicon` | `string` | `undefined` | Leading `rel-icon` name rendered in the prefix block (preferred over the legacy `leftIcon`). |
-| `prefixIconAriaLabel` | `prefixiconarialabel` | `string` | `undefined` | Accessible label for the leading icon. Without it the icon is `aria-hidden` (decorative). |
+| `prefixIcon` | `prefix-icon` | `string` | `undefined` | Leading `rel-icon` name rendered in the prefix block (preferred over the legacy `leftIcon`). The `prefixicon` attribute spelling is deprecated (still works; removal targeted for 3.0). |
+| `prefixIconAriaLabel` | `prefix-icon-aria-label` | `string` | `undefined` | Accessible label for the leading icon. Without it the icon is `aria-hidden` (decorative). The `prefixiconarialabel` attribute spelling is deprecated (still works; removal targeted for 3.0). |
 | `error` | `error` | `boolean` | `false` | Puts the field in the error state: danger border, `aria-invalid`, and `errorMessage` replacing the helper text. |
-| `errorMessage` | `errormessage` | `string` | `undefined` | Text shown below the control instead of `helperText` while the field is in the error state. |
-| `helperText` | `helpertext` | `string` | `undefined` | Helper line below the control (preferred over the legacy `supportingText`); linked to the input via `aria-describedby`. |
+| `errorMessage` | `error-message` | `string` | `undefined` | Text shown below the control instead of `helperText` while the field is in the error state. The `errormessage` attribute spelling is deprecated (still works; removal targeted for 3.0). |
+| `helperText` | `helper-text` | `string` | `undefined` | Helper line below the control (preferred over the legacy `supportingText`); linked to the input via `aria-describedby`. The `helpertext` attribute spelling is deprecated (still works; removal targeted for 3.0). |
 | `helperIcon` | `helper-icon` | `string` | `undefined` | Icon name from the generated icon dictionary, rendered before the helper line (Figma "Supporting Icon"). Sized 16px, or 14px at `size="small"`, and it takes the helper's colour — so it turns `--rel-text-danger` in the error state. Decorative: it is hidden from screen readers, since the helper text it sits beside is already announced. |
 | `readonly` | `readonly` | `boolean` | `false` | Makes the input read-only: focusable and selectable but not editable. |
 | `maxLength` | `maxlength` | `number` | `undefined` | Maximum number of characters (native `maxlength`). |
 | `name` | `name` | `string` | `undefined` | Form field name forwarded to the native input, for form submission and autofill. |
-| `fullWidth` | `fullwidth` | `boolean` | `true` | Fills the parent width as a block element (default). Unset it to render inline at the content's natural width. Reflected. |
+| `fullWidth` | `full-width` | `boolean` | `true` | Fills the parent width as a block element (default). Unset it to render inline at the content's natural width. Reflected (as `fullwidth` in 1.x). The `fullwidth` attribute spelling is deprecated (still works; removal targeted for 3.0). |
 
 #### Deprecated (still supported — removal targeted for 3.0)
 
@@ -185,26 +192,12 @@ Focus behaviour: `focus()` on the host focuses the inner input / textarea (the h
 
 ## Notes / Edge Cases
 
-- Attribute spellings: props declared with an explicit `attribute` use kebab-case (`label-style`, `prefix-text`, `clickable-right-icon`, `field-aria-label`, …). The others have Lit's default all-lowercase attribute — `prefixicon`, `righticon`, `helpertext`, `errormessage`, `maxlength`, `fullwidth`, `supportingtext`, `floatinglabel` — see the Attribute column above. HTML attribute names are case-insensitive, so `helperText="…"` in markup also works.
-- **The same logical prop can take a _different_ spelling on `rel-autocomplete` / `rel-select`.** Those components declare an explicit kebab `attribute` where this one falls back to Lit's all-lowercase default, so `prefix-icon` works on `<rel-autocomplete>` and is silently ignored on `<rel-textfield>`. There is no error when this happens — an attribute a component does not observe is inert, so the icon simply never appears. The pairs that differ today:
-
-  | Prop | `rel-textfield` | `rel-autocomplete` / `rel-select` |
-  | --- | --- | --- |
-  | `prefixIcon` | `prefixicon` | `prefix-icon` (autocomplete) |
-  | `helperText` | `helpertext` | `helper-text` (autocomplete) |
-  | `errorMessage` | `errormessage` | `error-message` (autocomplete) |
-  | `floatingLabel` | `floatinglabel` | `floating-label` (autocomplete) |
-  | `fullWidth` | `fullwidth` | `full-width` (autocomplete) |
-  | `leftIcon` | `lefticon` | `left-icon` (select) |
-  | `rightIcon` | `righticon` | `right-icon` (select) |
-  | `supportingText` | `supportingtext` | `supporting-text` (select) |
-
-  All three agree on `label-style`, `field-aria-label` and `field-aria-labelledby`. This is an inconsistency, not a design decision: the kebab spellings are the intended direction, and unifying on them means retiring the lowercase ones, which only a major version can do — so it is targeted for 3.0. Until then the Attribute column above is the authority for **this** component. In a Lit template you can sidestep the whole question with a property binding (`.prefixIcon=${…}`), which is spelling-independent; that is also how `rel-autocomplete` drives the field it wraps, so its own forwarding is unaffected by the mismatch.
-- Legacy names still work but the canonical ones win when both are set: `leftIcon` → `prefixIcon`, `supportingText` → `helperText`, `state="error"` → `error`, `state="disabled"` → `disabled`. `lefticon` / `righticon` attributes are also read once at connect time.
+- Attribute spellings: every multi-word attribute is kebab-case (`label-style`, `prefix-text`, `prefix-icon`, `left-icon`, `right-icon`, `prefix-icon-aria-label`, `helper-text`, `error-message`, `full-width`, …), the same spelling `rel-autocomplete` and `rel-select` use — see the Attribute column above. The older all-lowercase spellings still work since 1.5.0 but log a one-time console notice and are removed in 3.0 (see Deprecated aliases); when both spellings are present the kebab one wins. `maxlength` keeps the native HTML spelling, and the deprecated `supportingText` / `floatingLabel` props keep their old attributes. In a Lit template a property binding (`.prefixIcon=${…}`) sidesteps spelling entirely.
+- Legacy names still work but the canonical ones win when both are set: `leftIcon` → `prefixIcon`, `supportingText` → `helperText`, `state="error"` → `error`, `state="disabled"` → `disabled`.
 - `errorMessage` replaces the helper line only while the field is in the error state **and** the message is set; otherwise the helper text stays visible. There is no built-in validation — set `error` from your form layer.
 - `state="error"` (legacy) auto-clears to `"default"` as soon as the user types a non-empty value and comes back once the value is emptied again; the `error` boolean never auto-clears.
 - `multiline` renders a `<textarea>` (`rows`, vertical resize, 80px minimum height). `type`, the prefix / suffix blocks and their slots are ignored in this mode (the slots stay mounted but hidden).
-- `fullWidth` defaults to `true` and reflects as `fullwidth`; without it the host becomes `inline-block` at its content width. To turn it off from HTML you must bind the property (`.fullWidth=${false}`), since a boolean attribute cannot express `false`.
+- `fullWidth` defaults to `true`; without it the host becomes `inline-block` at its content width. Turn it off with `full-width="false"` (since 1.5.0) or the property (`.fullWidth=${false}`). In 1.x it still reflects as the `fullwidth` attribute, so `rel-textfield[fullwidth]` selectors keep matching.
 - `label-style="floating"`: the placeholder is hidden until the field is focused; the label floats onto the border when focused or filled. Internally the deprecated `floatingLabel` boolean is kept in sync with `labelStyle` and its reflected `floatinglabel` attribute is the styling hook, so both spellings render identically. With a `prefix-style="clear"` prefix the floated label slides back over the control's left edge (Figma "Floating Label"); `divider` / `fill` prefixes keep it after the block.
 - `variant="legend"` + `label-style="none"` drops the `<legend>` entirely so the top border runs continuous; a `fill` prefix is squared off in this variant because it cannot reach the notched top border.
 - `--rel-field-label-reserve` (see Component hooks) keeps a `label-style="none"` field bottom-aligned with labelled siblings; set it to `0` in toolbars or table cells.