@atelier-ui/angular 0.2.26 → 0.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/angular",
-  "version": "0.2.26",
+  "version": "0.2.35",
   "description": "Atelier component library for Angular — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "angular",

package/src/styles/tokens.css

@@ -143,6 +143,23 @@
   --ui-type-action: var(--ui-font-weight-semibold) var(--ui-font-size-md) /
     var(--ui-line-height-tight) var(--ui-font-family);
 
+  /* The row roles (ADR-0085). Where `control` is the label ON a control and
+   * `action` is the text of a control that acts, these two are the text IN a
+   * row: a menu item, an option, a table cell, a checkbox or radio label. They
+   * are regular weight, not medium, and they sit at the two default sizes the
+   * row ladder uses — `row` at md for the standard rung, `row-sm` at sm for the
+   * compact one. Same tight leading as the rest of the ladder: a row's height
+   * comes from --ui-row-height-*, so its leading must not grow with the text.
+   *
+   * The ADR-0073 carve-out applies here exactly as it does above: a control's
+   * own VALUE text keeps its longhands. `row` describes what the row DISPLAYS,
+   * not what an input CONTAINS.
+   */
+  --ui-type-row: var(--ui-font-weight-normal) var(--ui-font-size-md) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-row-sm: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+
   /* ── Colours · light mode (default) ────────────────────────── */
 
   /* Primary — Conciso deep teal */

package/types/atelier-ui-angular.d.ts

@@ -210,6 +210,7 @@ declare class AtlIcon {
  * ```html
  * <atl-input type="email" placeholder="you@example.com" [(value)]="email" />
  * <atl-input [formField]="loginForm.email" placeholder="Email" />
+ * <atl-input label="Email" type="email" [(value)]="email" />
  * ```
  */
 declare class AtlInput implements FormValueControl<string> {
@@ -217,8 +218,29 @@ declare class AtlInput implements FormValueControl<string> {
     readonly value: _angular_core.ModelSignal<string>;
     /** The type of input field. */
     readonly type: _angular_core.InputSignal<"number" | "text" | "email" | "password" | "tel" | "url">;
+    /**
+     * Visible caption rendered as a `<label>` associated with the input via
+     * `for`/`id`. Omit it when the field is captioned some other way (an
+     * external `<label>`, or `aria-label`) — without one of these the input
+     * has no accessible name.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the native input, for when there is no visible
+     * `label`. An aliased input rather than a plain host attribute: an
+     * unrecognized `aria-label="…"` on `<atl-input>` would sit on the host
+     * element, which has no role, leaving the actual control unnamed.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Placeholder text shown when the input is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Explicit id for the native input. Wins over the auto-generated id — set
+     * this when something outside this component (an external `<label for>`,
+     * or `aria-describedby` from elsewhere on the page) needs a known, stable
+     * id to point at.
+     */
+    readonly id: _angular_core.InputSignal<string>;
     /** Whether the input is disabled. Bound by [formField] directive. */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** Whether the input is read-only. Bound by [formField] directive. */
@@ -235,6 +257,31 @@ declare class AtlInput implements FormValueControl<string> {
     readonly name: _angular_core.InputSignal<string>;
     /** @internal */
     protected readonly errorId: string;
+    /**
+     * @internal
+     * Fallback id, used only when the caller does not supply one. A
+     * module-scoped counter — the idiom every other Angular form control in
+     * this lib already uses for its own ids (checkbox, radio, toggle, select,
+     * textarea all do the same `` `atl-<name>-${nextId++}` `` thing for
+     * errorId) — rather than reaching for a `useId()`-equivalent. Collision-free
+     * across every instance rendered within one running copy of this module
+     * (one browser tab, or one server-render pass), which is the guarantee this
+     * lib actually needs: none of these adapters are server-rendered today.
+     *
+     * This is NOT the guarantee React's/Vue's `useId()` gives. `nextId` is a
+     * plain module-level variable, not reset per request: a persistent Node SSR
+     * process keeps incrementing it across requests while a fresh client always
+     * starts at 0, so server and client render would diverge the moment this
+     * component is server-rendered — the exact hydration mismatch this file
+     * used to (wrongly) claim the counter avoided. Two independently bundled
+     * copies of this module (e.g. two versions loaded by separate
+     * micro-frontends on one page) would likewise each start their own `nextId`
+     * at 0 and could collide. Neither risk is exercised today; revisit this if
+     * SSR or module-duplication ever applies here.
+     */
+    private readonly generatedId;
+    /** @internal */
+    protected readonly inputId: _angular_core.Signal<string>;
     /** @internal */
     /**
      * The message renders when there is a message. Gating it on `touched` as well was
@@ -249,7 +296,7 @@ declare class AtlInput implements FormValueControl<string> {
     /** @internal */
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlInput, "atl-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlInput, "atl-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -259,6 +306,7 @@ declare class AtlInput implements FormValueControl<string> {
  * ```html
  * <atl-textarea placeholder="Enter a description" [(value)]="description" />
  * <atl-textarea [formField]="form.bio" [rows]="4" />
+ * <atl-textarea label="Bio" [(value)]="bio" />
  * ```
  */
 declare class AtlTextarea implements FormValueControl<string> {
@@ -266,8 +314,28 @@ declare class AtlTextarea implements FormValueControl<string> {
     readonly value: _angular_core.ModelSignal<string>;
     /** Number of visible text rows. */
     readonly rows: _angular_core.InputSignal<number>;
+    /**
+     * Visible caption rendered as a `<label>` associated with the textarea via
+     * `for`/`id`. Omit it when the field is captioned some other way (an
+     * external `<label>`, or `aria-label`) — without one of these the textarea
+     * has no accessible name.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the native textarea, for when there is no visible
+     * `label`. An aliased input rather than a plain host attribute — see
+     * `atl-input.ts`'s identical `ariaLabel` for why.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Placeholder text shown when the textarea is empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Explicit id for the native textarea. Wins over the auto-generated id —
+     * set this when something outside this component (an external
+     * `<label for>`, or `aria-describedby` from elsewhere on the page) needs a
+     * known, stable id to point at.
+     */
+    readonly id: _angular_core.InputSignal<string>;
     /** Whether the textarea is disabled. Bound by [formField] directive. */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** Whether the textarea is read-only. Bound by [formField] directive. */
@@ -286,6 +354,17 @@ declare class AtlTextarea implements FormValueControl<string> {
     readonly autoResize: _angular_core.InputSignal<boolean>;
     /** @internal */
     protected readonly errorId: string;
+    /**
+     * @internal
+     * Fallback id, used only when the caller does not supply one. Same
+     * module-scoped counter idiom as `errorId` above and as every other
+     * Angular form control in this lib — see `atl-input.ts`'s `generatedId`
+     * for the honest account of what guarantee this idiom actually gives
+     * (same-module-instance uniqueness, not `useId()`-equivalent SSR safety).
+     */
+    private readonly generatedId;
+    /** @internal */
+    protected readonly inputId: _angular_core.Signal<string>;
     /** @internal */
     /**
      * The message renders when there is a message. Gating it on `touched` as well was
@@ -300,7 +379,7 @@ declare class AtlTextarea implements FormValueControl<string> {
     /** @internal */
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlTextarea, "atl-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlTextarea, "atl-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -586,6 +665,10 @@ declare const ATL_SELECT: InjectionToken<AtlSelectContext>;
  * <atl-select [formField]="form.country" placeholder="Select a country">
  *   <atl-option optionValue="us">United States</atl-option>
  * </atl-select>
+ *
+ * <atl-select label="Country" [(value)]="country" placeholder="Select a country">
+ *   <atl-option optionValue="us">United States</atl-option>
+ * </atl-select>
  * ```
  */
 declare class AtlSelect implements FormValueControl<string>, AtlSelectContext, OnDestroy {
@@ -595,6 +678,20 @@ declare class AtlSelect implements FormValueControl<string>, AtlSelectContext, O
     readonly touched: _angular_core.ModelSignal<boolean>;
     /** Placeholder text shown when no option is selected. */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Visible caption rendered as a `<label>` associated with the trigger
+     * button via `for`/`id`. Omit it when the field is captioned some other
+     * way (an external `<label>`, or `aria-label`) — without one of these the
+     * select has no accessible name (this is the L1 backlog item: a select
+     * with neither produces exactly that).
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the trigger button, for when there is no visible
+     * `label`. An aliased input rather than a plain host attribute — see
+     * `atl-input.ts`'s identical `ariaLabel` for why.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Whether the select is disabled. Bound by [formField] directive. */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** Whether the select has validation errors. Bound by [formField] directive. */
@@ -662,7 +759,7 @@ declare class AtlSelect implements FormValueControl<string>, AtlSelectContext, O
     private close;
     private createOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlSelect, "atl-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlSelect, "atl-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, ["*"], true, never>;
 }
 
 /**