@atelier-ui/angular 0.2.22 → 0.2.24

package/package.json

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

package/src/styles/tokens.css

@@ -119,7 +119,29 @@
   --ui-type-label: var(--ui-font-weight-medium) var(--ui-font-size-xs) /
     var(--ui-line-height-tight) var(--ui-font-family);
   --ui-type-code: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
-    var(--ui-line-height-normal) var(--ui-font-mono);
+    var(--ui-line-height-code) var(--ui-font-mono);
+
+  /* The two roles the eight did not span. Both were measured on BOTH sides
+   * before being added (ADR-0074), which is the only sound basis for a role:
+   *
+   *   control  Medium 14 — 6 CSS rules (tab button, page button, step label,
+   *            chip label, select label, chat action) and 75 Figma text nodes.
+   *   action   SemiBold 16 — 3 CSS rules (button, accordion trigger, chat
+   *            header title) and 15 Figma text nodes.
+   *
+   * Both are TIGHT, and that was unanimous rather than chosen: every one of the
+   * 30 Figma nodes in these two combinations that states a leading at all states
+   * 125%, and .atl-button and .accordion-trigger state --ui-line-height-tight.
+   *
+   * They are named for the --ui-control-height-* ladder they live on: text on a
+   * control, not prose. A control's own VALUE text (an input's content) is not
+   * one of these — that stays a longhand, because its padding formula names the
+   * leading as an operand (ADR-0073).
+   */
+  --ui-type-control: var(--ui-font-weight-medium) var(--ui-font-size-sm) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-action: var(--ui-font-weight-semibold) var(--ui-font-size-md) /
+    var(--ui-line-height-tight) var(--ui-font-family);
 
   /* ── Colours · light mode (default) ────────────────────────── */
 

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

@@ -23,7 +23,7 @@ interface AtlComboboxOption {
     label: string;
     disabled?: boolean;
 }
-type AtlIconName = 'success' | 'check' | 'warning' | 'danger' | 'info' | 'error' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'sort-asc' | 'sort-desc' | 'arrow-right' | 'arrow-left' | 'copy' | 'paste' | 'add' | 'edit' | 'delete' | 'close' | 'more' | 'person' | 'default-toast';
+type AtlIconName = 'success' | 'check' | 'warning' | 'danger' | 'info' | 'error' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-double-left' | 'chevron-double-right' | 'sort-asc' | 'sort-desc' | 'arrow-right' | 'arrow-left' | 'copy' | 'paste' | 'add' | 'edit' | 'delete' | 'close' | 'more' | 'person' | 'default-toast';
 type AtlIconSize = 'sm' | 'md' | 'lg';
 type AtlChatVariant = 'drawer' | 'popup' | 'inline';
 type AtlChatStatus = 'idle' | 'streaming' | 'error';
@@ -236,6 +236,13 @@ declare class AtlInput implements FormValueControl<string> {
     /** @internal */
     protected readonly errorId: string;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -280,6 +287,13 @@ declare class AtlTextarea implements FormValueControl<string> {
     /** @internal */
     protected readonly errorId: string;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -322,6 +336,13 @@ declare class AtlCheckbox implements FormCheckboxControl {
     /** @internal */
     private readonly nativeInput;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -447,6 +468,13 @@ declare class AtlRadioGroup implements FormValueControl<string>, AtlRadioGroupCo
     /** @internal */
     private keyManager;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -495,6 +523,13 @@ declare class AtlToggle implements FormCheckboxControl {
     /** @internal */
     protected readonly errorId: string;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -591,6 +626,13 @@ declare class AtlSelect implements FormValueControl<string>, AtlSelectContext, O
     /** @internal */
     protected readonly selectedLabel: _angular_core.Signal<string>;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -718,6 +760,13 @@ declare class AtlCombobox implements FormValueControl<string> {
     /** @internal */
     protected readonly activeOptionId: _angular_core.Signal<string | null>;
     /** @internal */
+    /**
+     * The message renders when there is a message. Gating it on `touched` as well was
+     * an Angular-only rule: `touched` is not in the spec contract and React and Vue have
+     * no equivalent, so the same four fields showed their errors at three different
+     * moments depending on the framework. Deciding *when* to pass errors belongs to the
+     * form layer, which is where `touched` lives (ADR-0055).
+     */
     protected readonly showErrors: _angular_core.Signal<boolean>;
     /** @internal */
     protected readonly hostClasses: _angular_core.Signal<string>;