@reliability-design/web 1.4.2 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog — @reliability-design/web
 
+## 1.4.3 (2026-07-30)
+
+### Added
+
+- **New `rel-time-picker` component.** A form-field trigger button opening an Hour / Min / AM-PM column popup. Follows the range-picker draft model: column clicks stage a draft, **Apply** commits (emitting `rel-change`), Cancel/`Escape`/outside click discards, and a **Now** button snaps the draft to the current time. Supports `format` (`12h` | `24h` — the committed `value` is always 24-hour `"HH:mm"`), `minute-step` intervals, inclusive `min-time`/`max-time` bounds, the standard field API (`label`, `placeholder`, `helper-text`, `error`/`invalid` + `error-message`, `required`, `readonly`, `disabled`, `clearable`, `size`, `fullWidth`, hidden form input via `name`), `::part` hooks (base, label, trigger, value, icon, panel, option, footer, helper), and full keyboard/ARIA support. The Angular package ships a matching ControlValueAccessor wrapper for reactive and template-driven forms.
+- **`label-style` prop (`default` | `floating` | `none`) on `rel-textfield`, `rel-select`, and `rel-autocomplete`.** `"none"` renders no visible label; supply `field-aria-label` or `field-aria-labelledby` to keep the control's accessible name. The old `floatingLabel` boolean remains as a deprecated alias for `label-style="floating"`.
+- **`orientation` prop on `rel-radio` (`vertical` | `horizontal`).** Horizontal lays options out in a wrapping row; the group now renders `role="radiogroup"` with `aria-orientation`.
+- **`size` prop on `rel-radio` (`small` | `medium`).** Small drops the circle from 20px to 16px and steps the label/supporting typography down a size for denser forms.
+
+## 1.4.2 (2026-07-29)
+
+### Added
+
+- **New `rel-autocomplete` component.** A searchable single-select type-ahead built on `rel-textfield`, so every field feature (label, sizes, variants, floating label, icons, error display) carries over. Supports local items with `contains`/`starts-with`/`none` filtering or a remote `searchFn` (debounced, latest-query-wins with stale responses discarded, automatic loading row), per-item icons, bolded match highlighting, `clearable`, a configurable no-results row, full keyboard navigation, and combobox ARIA. Ships with an Angular ControlValueAccessor wrapper.
+- Per-option leading icons in the `rel-select` menu — options accept an `icon` field (`rel-icon` name).
+- `rel-select` multi-select chips no longer wrap to a second line — the visible chip count adapts to the field width, collapsing the rest into the "+N" chip; `max-visible-chips` is now an optional extra cap (default uncapped, was 3).
+- `icon` prop on `rel-checkbox` — a leading `rel-icon` between the checkbox and label.
+- `focus()` method on `rel-textfield` that forwards to the inner input (the host itself is not focusable).
+
+### Fixed
+
+- Disabled `rel-button` styling — disabled buttons dim to 0.5 opacity, and only fill styles (primary, default, icon) flatten to the disabled fill; outline, ghost, link, and static keep their own shape.
+- `rel-popover` rendering misaligned when anchored inside a centered `rel-modal`.
+- Removed the native title-attribute tooltip on hover over a `rel-modal` title.
+- Tab-focusing a below-fold `rel-checkbox`/`rel-radio` no longer scrolls the wrong container (which shoved the page past fixed shells and broke the layout).
+- Closed `rel-drawer`/`rel-modal` panels are removed from the Tab order — keyboard focus no longer disappears into invisible close buttons or slotted content.
+
 ## 1.4.1 (2026-07-27)
 
 ### Fixed

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

@@ -59,7 +59,8 @@ Two data modes:
 | `loading` | `boolean` | `false` | Externally-controlled loading row (internal `searchFn` loading is automatic) |
 | `no-results-text` | `string` | `"No results found"` | Row shown when a query yields nothing |
 | `loading-text` | `string` | `"Loading…"` | Text next to the loading spinner |
-| `label`, `placeholder`, `size`, `variant`, `floating-label`, `prefix-icon`, `disabled`, `readonly`, `required`, `error`, `error-message`, `helper-text`, `name`, `full-width` | — | — | Passed through to the inner `rel-textfield` unchanged |
+| `label`, `placeholder`, `size`, `variant`, `label-style`, `floating-label`, `field-aria-label`, `field-aria-labelledby`, `prefix-icon`, `disabled`, `readonly`, `required`, `error`, `error-message`, `helper-text`, `name`, `full-width` | — | — | Passed through to the inner `rel-textfield` unchanged |
+| `label-style` | `"default" \| "floating" \| "none"` | — | Label presentation. `"none"` renders no label — pair it with `field-aria-label`. Unset, the deprecated `floating-label` boolean decides |
 
 ## Events
 
@@ -83,6 +84,7 @@ Two data modes:
 - Combobox pattern: `role="combobox"` with `aria-expanded`, `aria-controls`, and `aria-activedescendant`; panel is `role="listbox"` with `role="option"` rows
 - Known limitation: the combobox role sits on a wrapper around the field rather than on the `<input>` itself — the input lives in `rel-textfield`'s nested shadow root, which `aria-activedescendant` cannot reference across. This is the standard pragmatic pattern for composed shadow components
 - Loading row uses `role="status"`; disabled/readonly never open the panel
+- With `label-style="none"` no `<label>` renders, so `field-aria-label` (or `field-aria-labelledby`) must supply the accessible name — it also names the suggestion panel. A placeholder is not a valid naming mechanism; the inner field logs a console warning when both are missing
 
 ## Notes / Edge Cases
 

package/dist/components/rel-autocomplete/rel-autocomplete.ts

@@ -3,7 +3,12 @@ import { customElement, property, state, query } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-textfield/rel-textfield.js";
-import type { RelTextfield, TextFieldSize, TextFieldVariant } from "../rel-textfield/rel-textfield.js";
+import type {
+  RelTextfield,
+  TextFieldSize,
+  TextFieldVariant,
+  FieldLabelStyle,
+} from "../rel-textfield/rel-textfield.js";
 
 /** An item is a plain string or any object read through displayField/valueField. */
 export type AutocompleteItem = string | Record<string, unknown>;
@@ -76,7 +81,15 @@ export class RelAutocomplete extends LitElement {
   @property({ type: String }) placeholder: string = "";
   @property({ type: String }) size: TextFieldSize = "medium";
   @property({ type: String }) variant: TextFieldVariant = "default";
+  /** See `FieldLabelStyle`. Left `undefined` the deprecated `floatingLabel` decides. */
+  @property({ type: String, attribute: "label-style", reflect: true })
+  labelStyle?: FieldLabelStyle;
+  /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
   @property({ type: Boolean, attribute: "floating-label" }) floatingLabel = false;
+  /** Accessible name for the input. Required when `labelStyle="none"`. */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+  /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
   @property({ type: String, attribute: "prefix-icon" }) prefixIcon?: string;
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) readonly = false;
@@ -105,6 +118,12 @@ export class RelAutocomplete extends LitElement {
    *  doesn't overwrite the input text the way it does for external writes. */
   private internalValueWrite = false;
 
+  /** Name used for the suggestion panel — the visible label, or fieldAriaLabel
+   *  once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
+  private get accessibleName() {
+    return (this.labelStyle === "none" ? this.fieldAriaLabel : this.label) || "";
+  }
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -540,7 +559,10 @@ export class RelAutocomplete extends LitElement {
           .value="${this.inputText}"
           .size="${this.size}"
           .variant="${this.variant}"
+          .labelStyle="${this.labelStyle}"
           .floatingLabel="${this.floatingLabel}"
+          .fieldAriaLabel="${this.fieldAriaLabel}"
+          .fieldAriaLabelledby="${this.fieldAriaLabelledby}"
           .prefixIcon="${this.prefixIcon}"
           .disabled="${this.disabled}"
           .readonly="${this.readonly}"
@@ -562,7 +584,7 @@ export class RelAutocomplete extends LitElement {
         part="panel list"
         class="ac-panel"
         role="listbox"
-        aria-label="${this.label || "Suggestions"}"
+        aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >

package/dist/components/rel-button/rel-button.ts

@@ -191,8 +191,8 @@ export class RelButton extends LitElement {
          pointer-events:none on the HOST would make it transparent to the
          pointer and suppress the cursor entirely. */
       cursor: not-allowed;
-      /* The disabled tokens are full-contrast pairs (light: #0B0B0B on
-         #C2C2C2, dark: #FFF on #404040), so on their own they render a
+      /* The disabled tokens are full-contrast pairs (light: near-black on
+         gray-300, dark: white on gray-700), so on their own they render a
          crisp button that reads as enabled. Dulling happens here instead —
          same opacity mechanism the rest of the library uses. */
       opacity: 0.5;

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

@@ -28,6 +28,17 @@ A radio button group component that allows users to select a single option from
   planRadio.selectedValue = 'basic';
 </script>
 
+<!-- Horizontal row layout -->
+<rel-radio id="sizeRadio" name="size-group" orientation="horizontal"></rel-radio>
+<script>
+  const sizeRadio = document.getElementById('sizeRadio');
+  sizeRadio.options = [
+    { value: 's', label: 'Small' },
+    { value: 'm', label: 'Medium' },
+    { value: 'l', label: 'Large' }
+  ];
+</script>
+
 <!-- Listen for changes -->
 <rel-radio id="preferenceRadio"></rel-radio>
 <script>
@@ -49,6 +60,8 @@ A radio button group component that allows users to select a single option from
 |------|------|---------|-------------|
 | `options` | `RadioOption[]` | `[]` | Array of radio options (see RadioOption interface below) |
 | `name` | `string` | `"radio-group"` | Name attribute for the radio group (for form grouping) |
+| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout axis: `"vertical"` stacks options in a column; `"horizontal"` lays them out in a wrapping row (reflected attribute) |
+| `size` | `"small" \| "medium"` | `"medium"` | Control scale: `"medium"` = 20px circle with body-lg labels; `"small"` = 16px circle with body-md labels (reflected attribute) |
 | `selectedValue` | `string \| null` | `null` | Currently selected option value (reflected attribute) |
 | `disabled` | `boolean` | `false` | Disables the entire radio group |
 
@@ -82,7 +95,8 @@ None exposed.
 - `--rel-fonts-weight-body-medium` - Font weight for labels
 
 ### Spacing Tokens
-- `--rel-spacing-xs` - Gap between radio options
+- `--rel-spacing-xs` - Gap between radio options (also the row gap when wrapping horizontally)
+- `--rel-spacing-xl` - Column gap between options in `orientation="horizontal"`
 - `--rel-spacing-3xs` - Gap within each option (label and supporting text)
 - `--rel-spacing-2xs` - Gap between radio circle and label
 
@@ -94,6 +108,7 @@ None exposed.
 - `--rel-text-danger` - Error state border and dot color
 
 ## Accessibility
+- The option list renders with `role="radiogroup"` and `aria-orientation` reflecting the `orientation` prop
 - Uses visually hidden native radio inputs for proper screen reader support
 - Custom visual radio circle with proper focus indicators
 - Focus visible state with outline offset for keyboard navigation

package/dist/components/rel-radio/rel-radio.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import type { Orientation } from "../rel-stepper/rel-stepper.js";
 
 export interface RadioOption {
   value: string;
@@ -14,6 +15,14 @@ export class RelRadio extends LitElement {
 
   @property({ type: String }) name = "radio-group";
 
+  /** Layout axis of the option list. `"vertical"` (default) stacks options in
+   *  a column; `"horizontal"` lays them out in a wrapping row. */
+  @property({ type: String, reflect: true }) orientation: Orientation = "vertical";
+
+  /** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
+   *  `"small"` = 16px circle with body-md labels. */
+  @property({ type: String, reflect: true }) size: "small" | "medium" = "medium";
+
   @property({ type: String, reflect: true })
   selectedValue: string | null = null;
 
@@ -45,6 +54,15 @@ export class RelRadio extends LitElement {
       gap: var(--rel-spacing-xs);
     }
 
+    /* Horizontal orientation — options flow in a wrapping row. Wider column
+       gap than the vertical rhythm so adjacent option labels read as separate
+       choices; row gap keeps the vertical value for wrapped lines. */
+    :host([orientation="horizontal"]) .rel-radio-group {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--rel-spacing-xs) var(--rel-spacing-xl);
+    }
+
     .rel-radio-option {
       display: inline-flex;
       flex-direction: column;
@@ -147,6 +165,34 @@ export class RelRadio extends LitElement {
 
     }
 
+    /* Size variant (medium is the base scale above). Supporting-text indent =
+       circle width + the radio-main gap, so it stays aligned under the label. */
+    :host([size="small"]) .radio-custom {
+      width: 16px;
+      height: 16px;
+    }
+
+    :host([size="small"]) input:checked + .radio-custom::after {
+      inset: 3px;
+    }
+
+    :host([size="small"]) .radio-label {
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+    }
+
+    :host([size="small"]) .radio-supporting {
+      margin-left: 24px;
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
     /* Error state (Figma State=Error, both Is Checked values) */
     .rel-radio-option.error-unchecked .radio-custom,
     .rel-radio-option.error-checked .radio-custom {
@@ -243,7 +289,12 @@ export class RelRadio extends LitElement {
 
   render() {
     return html`
-      <div part="base" class="rel-radio-group">
+      <div
+        part="base"
+        class="rel-radio-group"
+        role="radiogroup"
+        aria-orientation="${this.orientation}"
+      >
         ${this.options.map((o) => this.renderOption(o))}
       </div>
       ${this.error && this.errorMessage

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

@@ -34,6 +34,9 @@ A custom combobox-style select component built on the same textfield visual lang
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `""` | Label text displayed above the select |
+| `label-style` | `"default" \| "floating" \| "none"` | `"default"` | Label presentation. `"default"` sits above the trigger, `"floating"` rests over the placeholder and animates onto the border line, `"none"` renders no label at all |
+| `field-aria-label` | `string` | - | Accessible name for the trigger. Required with `label-style="none"` |
+| `field-aria-labelledby` | `string` | - | IDREF list of external element(s) naming the trigger. Wins over `field-aria-label` |
 | `options` | `(string \| SelectOptionObject)[]` | `[]` | Options to display in the dropdown. Each entry is either a plain string or an object: `{ value, label?, supportingText?, icon? }`. `icon` is a `rel-icon` name rendered as a prefix (leading icon) on the menu item — before the label in single-select rows, and between the checkbox and label in multi-select rows |
 | `selected` | `string` | `""` | Currently selected option value |
 | `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the select |
@@ -80,6 +83,9 @@ None exposed.
 ### Border Tokens
 - `--rel-border-radius-xs` - Rounded border radius (default `border="rounded"`)
 
+### Layout Tokens
+- `--rel-field-label-reserve` - Height held for the absent label row under `label-style="none"`, so the trigger bottom-aligns with labelled siblings. Defaults to the label line-height plus the wrapper gap; set to `0` to collapse the row entirely in compact contexts (toolbars, table cells)
+
 ## Accessibility
 - Trigger input uses `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls`
 - Dropdown panel uses `role="listbox"`; each option uses `role="option"` with `aria-selected`

package/dist/components/rel-select/rel-select.ts

@@ -4,11 +4,13 @@ import { repeat } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-chip/rel-chip.js";
 import "../rel-checkbox/rel-checkbox.js";
+import type { FieldLabelStyle } from "../rel-textfield/rel-textfield.js";
 
 export type SelectState = "default" | "error" | "disabled";
 export type SelectSize = "small" | "medium" | "large";
 export type SelectBorder = "rounded" | "sharp";
-export type SelectLabelStyle = "default" | "floating";
+/** Alias of the shared field type — kept so existing imports keep resolving. */
+export type SelectLabelStyle = FieldLabelStyle;
 
 export interface SelectOptionObject {
   value: string;
@@ -44,7 +46,16 @@ export class RelSelect extends LitElement {
   // hyphens) — e.g. labelStyle would otherwise only respond to "labelstyle".
   // Every multi-word property below gets an explicit kebab-case `attribute`
   // so it works the way HTML usage actually looks.
-  @property({ type: String, attribute: "label-style" }) labelStyle: SelectLabelStyle = "default";
+  @property({ type: String, attribute: "label-style", reflect: true })
+  labelStyle: SelectLabelStyle = "default";
+
+  /**
+   * Accessible name for the trigger. Required when `labelStyle="none"`, since no
+   * `<label>` renders and a placeholder is not a valid naming mechanism.
+   */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+  /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
+  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
 
   @property({ type: Array }) options: SelectOption[] = [];
 
@@ -149,6 +160,22 @@ export class RelSelect extends LitElement {
 
     }
 
+    /* ── labelStyle="none" ──
+       No label renders. An empty spacer holds the label row's full height so the
+       trigger still bottom-aligns with labelled siblings in a form row.
+       The reserve covers label line-height + the wrapper gap, and the negative
+       margin cancels the flex gap that would otherwise sit below it — so
+       --rel-field-label-reserve: 0 collapses the row to genuinely zero
+       (toolbars, table cells), not just to the leftover gap. */
+    .label-reserve {
+      flex: none;
+      height: var(
+        --rel-field-label-reserve,
+        calc(var(--rel-body-sm-regular-line-height) + var(--rel-spacing-2xs))
+      );
+      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
+    }
+
     /* Error only colors the border/focus ring and the supporting text below
        the field — label, floating label, placeholder, and icons stay normal. */
 
@@ -564,7 +591,25 @@ export class RelSelect extends LitElement {
     }
   }
 
+  private _warnedNoName = false;
+
   protected updated(changed: PropertyValues<this>) {
+    if (
+      !this._warnedNoName &&
+      this.labelStyle === "none" &&
+      !this.fieldAriaLabel &&
+      !this.fieldAriaLabelledby &&
+      !this.getAttribute("aria-label")
+    ) {
+      this._warnedNoName = true;
+      console.warn(
+        '<rel-select label-style="none"> has no accessible name. Set ' +
+          "`field-aria-label` or `field-aria-labelledby` — a placeholder is not a " +
+          "valid naming mechanism.",
+        this
+      );
+    }
+
     if (
       changed.has("selectedValues") ||
       changed.has("options") ||
@@ -922,7 +967,10 @@ export class RelSelect extends LitElement {
     const opts = this.normalizedOptions;
     const filtered = this.filteredOptions;
     const isDisabled = this.state === "disabled";
+    const labelHidden = this.labelStyle === "none";
     const showFloatingChrome = this.labelStyle === "floating" && !!this.label;
+    // With no visible label the ARIA name comes from fieldAriaLabel instead.
+    const accessibleName = (labelHidden ? this.fieldAriaLabel : this.label) || "";
 
     const wrapperClasses = [
       "select-wrapper",
@@ -945,9 +993,11 @@ export class RelSelect extends LitElement {
 
     return html`
       <div class="${wrapperClasses}">
-        ${!showFloatingChrome && this.label
-          ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
-          : ""}
+        ${labelHidden
+          ? html`<div class="label-reserve" aria-hidden="true"></div>`
+          : !showFloatingChrome && this.label
+            ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
+            : ""}
 
         <div class="select-container">
           ${showFloatingChrome
@@ -966,7 +1016,8 @@ export class RelSelect extends LitElement {
             aria-controls="${listboxId}"
             aria-activedescendant="${activeOptionId}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.label || this.placeholder}"
+            aria-label="${this.fieldAriaLabelledby ? nothing : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -1011,7 +1062,7 @@ export class RelSelect extends LitElement {
         part="panel list" class="select-listbox"
         role="listbox"
         aria-multiselectable="${this.multiple}"
-        aria-label="${this.label || "Options"}"
+        aria-label="${accessibleName || "Options"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >

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

@@ -18,6 +18,13 @@ A text input field component with support for labels, icons, validation states,
   supportingText="Must be at least 8 characters">
 </rel-textfield>
 
+<!-- No label — an accessible name is required in its place -->
+<rel-textfield
+  label-style="none"
+  placeholder="Search orders"
+  field-aria-label="Search orders">
+</rel-textfield>
+
 <!-- Setting value via JavaScript -->
 <rel-textfield id="myField" label="Username"></rel-textfield>
 <script>
@@ -33,6 +40,10 @@ A text input field component with support for labels, icons, validation states,
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | - | Label text displayed above the input |
+| `label-style` | `"default" \| "floating" \| "none"` | - | Label presentation. `"none"` renders no label at all. Unset, the deprecated `floatingLabel` boolean decides |
+| `floatingLabel` | `boolean` | `false` | **Deprecated** — use `label-style="floating"`. Kept permanently as an alias |
+| `field-aria-label` | `string` | - | Accessible name for the input. Required with `label-style="none"` |
+| `field-aria-labelledby` | `string` | - | IDREF list of external element(s) naming the input. Wins over `field-aria-label` |
 | `placeholder` | `string` | `""` | Placeholder text |
 | `type` | `string` | `"text"` | Input type (text, email, password, etc.) |
 | `value` | `string` | `""` | Current input value |
@@ -72,10 +83,15 @@ None exposed.
 - `--rel-bg-neutral-elevated-1`: Disabled background
 - `--rel-spacing-*`: Spacing tokens
 - `--rel-border-radius-sm`: Border radius
+- `--rel-field-label-reserve`: Height held for the absent label row under `label-style="none"`, so the input bottom-aligns with labelled siblings. Defaults to the label line-height plus the wrapper gap; set to `0` to collapse the row entirely in compact contexts (toolbars, table cells)
 
 ## Accessibility
 
 - Associates `<label>` with input via `for`/`id`
+- With `label-style="none"` no `<label>` renders, so `field-aria-label` (or
+  `field-aria-labelledby`) must supply the accessible name — a placeholder is
+  not a valid naming mechanism. The component logs a console warning when both
+  are missing.
 - Supports native HTML5 input attributes (`required`, `disabled`, `readonly`, `maxlength`)
 - Focus ring visible on keyboard navigation (`:focus-visible`)
 - Error state communicated visually via border color

package/dist/components/rel-textfield/rel-textfield.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, html, css, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
@@ -6,6 +6,16 @@ export type TextFieldState = "default" | "error" | "disabled";
 export type TextFieldSize = "small" | "medium" | "large";
 export type TextFieldVariant = "default" | "underline" | "legend";
 
+/**
+ * How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
+ * and `<rel-autocomplete>` so the three stay in step.
+ *   - `"default"`  — static label above the control
+ *   - `"floating"` — label rests over the placeholder, animates onto the border
+ *   - `"none"`     — no label renders; supply `fieldAriaLabel` /
+ *                    `fieldAriaLabelledby` to keep an accessible name
+ */
+export type FieldLabelStyle = "default" | "floating" | "none";
+
 @customElement("rel-textfield")
 export class RelTextfield extends LitElement {
   @property({ type: String }) label?: string;
@@ -22,7 +32,23 @@ export class RelTextfield extends LitElement {
   @property({ type: String }) supportingText?: string;
   @property({ type: String }) state: TextFieldState = "default";
   @property({ type: String }) size: TextFieldSize = "medium";
+  /**
+   * Label presentation. Left `undefined` the deprecated `floatingLabel` boolean
+   * decides, so existing markup keeps working; set explicitly and it wins.
+   * Declares `attribute` because Lit would otherwise only listen for the
+   * all-lowercase `labelstyle`.
+   */
+  @property({ type: String, attribute: "label-style", reflect: true })
+  labelStyle?: FieldLabelStyle;
+  /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
   @property({ type: Boolean, reflect: true }) floatingLabel = false;
+  /**
+   * Accessible name for the input. Required when `labelStyle="none"`, since no
+   * `<label>` renders and a placeholder is not a valid naming mechanism.
+   */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+  /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
   @property({ type: String, reflect: true }) variant: TextFieldVariant = "default";
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) required = false;
@@ -65,6 +91,17 @@ export class RelTextfield extends LitElement {
     return this.helperText ?? this.supportingText;
   }
 
+  /** labelStyle supersedes the deprecated floatingLabel boolean. */
+  private get resolvedLabelStyle(): FieldLabelStyle {
+    if (this.labelStyle) return this.labelStyle;
+    return this.floatingLabel ? "floating" : "default";
+  }
+
+  /** True when no visible label renders and the input needs an ARIA name. */
+  private get labelHidden() {
+    return this.resolvedLabelStyle === "none";
+  }
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -101,6 +138,22 @@ export class RelTextfield extends LitElement {
       margin-left: 2px;
     }
 
+    /* ── labelStyle="none" ──
+       No label renders. An empty spacer holds the label row's full height so the
+       input box still bottom-aligns with labelled siblings in a form row.
+       The reserve covers label line-height + the wrapper gap, and the negative
+       margin cancels the flex gap that would otherwise sit below it — so
+       --rel-field-label-reserve: 0 collapses the row to genuinely zero
+       (toolbars, table cells), not just to the leftover gap. */
+    .label-reserve {
+      flex: none;
+      height: var(
+        --rel-field-label-reserve,
+        calc(var(--rel-body-sm-medium-line-height) + var(--rel-spacing-2xs))
+      );
+      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
+    }
+
     /* Floating label variant */
     :host([floatinglabel]) .textfield-wrapper {
       gap: 0;
@@ -477,6 +530,12 @@ export class RelTextfield extends LitElement {
       box-sizing: border-box;
     }
 
+    /* labelStyle="none" + legend: nothing to seat in the notch, so drop the
+       legend entirely and let the top border run continuous. */
+    :host([label-style="none"][variant="legend"]) .field-legend {
+      display: none;
+    }
+
     /* Prefix icon (legend): vertically centered; input inset via has-left-icon */
     :host([variant="legend"]) .icon.left {
       top: 50%;
@@ -568,6 +627,29 @@ export class RelTextfield extends LitElement {
     if (rightIcon) this.rightIcon = rightIcon;
   }
 
+  willUpdate(changed: PropertyValues<this>) {
+    // Keep the deprecated boolean an accurate mirror of labelStyle. This is what
+    // lets every `:host([floatinglabel])` rule below stay untouched — the
+    // reflected attribute is still the single styling hook for the floating form.
+    if (changed.has("labelStyle") && this.labelStyle) {
+      this.floatingLabel = this.labelStyle === "floating";
+    }
+  }
+
+  private _warnedNoName = false;
+
+  updated() {
+    if (this._warnedNoName || !this.labelHidden) return;
+    if (this.fieldAriaLabel || this.fieldAriaLabelledby || this.getAttribute("aria-label")) return;
+    this._warnedNoName = true;
+    console.warn(
+      '<rel-textfield label-style="none"> has no accessible name. Set ' +
+        "`field-aria-label` or `field-aria-labelledby` — a placeholder is not a " +
+        "valid naming mechanism.",
+      this
+    );
+  }
+
   /** Focuses the inner input/textarea (the host itself is not focusable). */
   focus(options?: FocusOptions) {
     (this.renderRoot.querySelector("input, textarea") as HTMLElement | null)?.focus(options);
@@ -649,8 +731,11 @@ export class RelTextfield extends LitElement {
       .filter(Boolean)
       .join(" ");
 
+    const labelStyle = this.resolvedLabelStyle;
+    const labelHidden = labelStyle === "none";
+
     const labelTemplate = (extraClass = "") => {
-      if (!this.label) return "";
+      if (!this.label || labelHidden) return "";
       return html`<label
         part="label"
         class="textfield-label${extraClass}"
@@ -658,7 +743,14 @@ export class RelTextfield extends LitElement {
       >${this.label}${this.required ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</label>`;
     };
 
-    const ariaLabelledby = this.variant === "legend" && this.label ? legendId : undefined;
+    // With no visible label the <label for> / <legend> naming path is gone, so
+    // fieldAriaLabelledby → fieldAriaLabel take over. An explicit labelledby
+    // always wins; aria-label only fills in when nothing else names the input.
+    const legendLabelledby =
+      this.variant === "legend" && this.label && !labelHidden ? legendId : undefined;
+    const ariaLabelledby = this.fieldAriaLabelledby ?? legendLabelledby;
+    const hasVisibleLabel = !labelHidden && !!this.label;
+    const ariaLabel = !hasVisibleLabel && !ariaLabelledby ? this.fieldAriaLabel : undefined;
 
     const inputTemplate = this.multiline
       ? html`<textarea part="input"
@@ -674,6 +766,7 @@ export class RelTextfield extends LitElement {
           ?required="${this.required}"
           aria-invalid="${isError}"
           aria-required="${this.required}"
+          aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
           aria-describedby="${describedById ?? nothing}"
           @focus="${this.handleFocus}"
@@ -693,6 +786,7 @@ export class RelTextfield extends LitElement {
           ?required="${this.required}"
           aria-invalid="${isError}"
           aria-required="${this.required}"
+          aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
           aria-describedby="${describedById ?? nothing}"
           @focus="${this.handleFocus}"
@@ -725,7 +819,7 @@ export class RelTextfield extends LitElement {
       // is always present (only its content is dynamic).
       return html`
         <div class="${wrapperClasses}">
-          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${this.label ?? ""}${this.required ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
+          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${labelHidden ? "" : this.label ?? ""}${this.required && !labelHidden ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
             ${!this.multiline ? leadingIconTemplate : ""}
             ${inputTemplate}
           </fieldset>
@@ -736,10 +830,14 @@ export class RelTextfield extends LitElement {
 
     return html`
       <div class="${wrapperClasses}">
-        ${!this.floatingLabel ? labelTemplate() : ""}
+        ${labelHidden
+          ? html`<div class="label-reserve" aria-hidden="true"></div>`
+          : labelStyle !== "floating"
+            ? labelTemplate()
+            : ""}
 
         <div part="control" class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
-          ${this.floatingLabel
+          ${labelStyle === "floating"
             ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "")
             : ""}
           ${!this.multiline ? leadingIconTemplate : ""}