@atelier-ui/angular 0.2.13 → 0.2.15

package/package.json

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

package/src/styles/tokens.css

@@ -38,6 +38,18 @@
   --ui-letter-spacing-wide: 0.01em;
   --ui-letter-spacing-uppercase: 0.08em;
   --ui-font-size-3xl: 2.25rem;
+
+  /* ── Control heights ────────────────────────────────────────
+   * The height of an interactive control is the primitive; its block padding
+   * is DERIVED from it (ADR-0041):
+   *   padding-block: calc((height - line-height * font-size) / 2 - border)
+   * Stating the height and deriving the padding is what makes an input and a
+   * button the same height. Stating the padding and hoping, which is what the
+   * library did until 2026-08-26, made them 6px apart.
+   */
+  --ui-control-height-sm: 2rem;
+  --ui-control-height-md: 2.5rem;
+  --ui-control-height-lg: 3rem;
   --ui-font-weight-normal: 400;
   --ui-font-weight-medium: 500;
   --ui-font-weight-semibold: 600;
@@ -167,6 +179,18 @@
   --ui-radius-xl: 1.25rem;  /* was 1rem     */
   --ui-radius-full: 9999px;
 
+  /* ── Border widths ──────────────────────────────────────────────────────────
+   * Two steps, because the library only ever needed two: the hairline that
+   * separates surfaces (133 uses) and the heavier weight that marks a control
+   * (12 uses — the avatar status ring, the stepper circle, the checkbox mark,
+   * the table header rule). The 1.5px weight nine control outlines used is
+   * folded into `thick`: a half pixel renders blurry at 1x device-pixel-ratio
+   * and the two weights were never distinguishable side by side.
+   * Not here on purpose: AtlToast's 4px accent bar and AtlRadio's 6px dot are
+   * graphic devices drawn with `border-width`, not border weights. See ADR-0047. */
+  --ui-border-width: 1px;
+  --ui-border-width-thick: 2px;
+
   /* Spacing */
   --ui-spacing-1: 0.25rem;
   --ui-spacing-2: 0.5rem;

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

@@ -23,7 +23,7 @@ interface AtlComboboxOption {
     label: string;
     disabled?: boolean;
 }
-type AtlIconName = 'success' | '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' | 'default-toast';
+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 AtlIconSize = 'sm' | 'md' | 'lg';
 type AtlChatVariant = 'drawer' | 'popup' | 'inline';
 type AtlChatStatus = 'idle' | 'streaming' | 'error';
@@ -145,7 +145,42 @@ declare class AtlBadge {
 }
 
 /**
- * Pictogram glyph icon. 21 named variants matching the Figma `AtlIcon`
+ * Icon geometry — the single source of truth for what every AtlIcon draws.
+ *
+ * Before this file, the library had four ways to draw the same thing: AtlIcon
+ * rendered Unicode glyphs and no component used it; eleven components drew 14
+ * inline `<svg>`s of their own; and two stylesheets put a literal `✕` in a CSS
+ * `content:`. The result was one concept with several drawings — `close` existed
+ * as an identical two-line SVG in five components, as a *differently drawn* X in
+ * AtlStepper, as `'×'` in AtlIcon and as `'✕'` in CSS, and `check` existed as
+ * three unrelated paths. Nothing gated it. See ADR-0046.
+ *
+ * Conventions, which every entry follows so a consumer can scale and colour icons
+ * without knowing which one they got:
+ *
+ * - **One viewBox: `0 0 24 24`.** Rendered size comes from the `size` prop, never
+ *   from the geometry, so `sm`/`md`/`lg` are the same shape at three scales.
+ * - **`stroke` icons** are drawn with `currentColor`, `stroke-width: 2`, round caps
+ *   and joins, and no fill. **`fill` icons** are solid `currentColor` silhouettes.
+ *   Mixing the two inside one icon is not allowed — it reads wrong at small sizes.
+ * - **Paths only** (no `<line>`/`<rect>`/`<polyline>`), so the renderer in each
+ *   framework is a single `<path>` loop rather than a per-primitive switch.
+ *
+ * The seven icons the library itself uses (`close`, `check`, `chevron-down`,
+ * `copy`, `person`, `sort-asc`, `sort-desc`) keep the geometry the components
+ * already shipped, normalised to the 24 viewBox. The rest are the same idiom.
+ */
+type AtlIconKind = 'stroke' | 'fill';
+interface AtlIconGeometry {
+    /** How the paths are painted. Never mixed within one icon. */
+    kind: AtlIconKind;
+    /** Path `d` values, drawn in order, all in the 0 0 24 24 viewBox. */
+    paths: string[];
+}
+
+/**
+ * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
+ * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
  * component set. Decorative by default; pass `label` to announce a meaning
  * to assistive tech.
  *
@@ -159,7 +194,10 @@ declare class AtlIcon {
     readonly name: _angular_core.InputSignal<AtlIconName>;
     readonly size: _angular_core.InputSignal<AtlIconSize>;
     readonly label: _angular_core.InputSignal<string | undefined>;
-    protected readonly glyph: _angular_core.Signal<string>;
+    protected readonly viewBox = "0 0 24 24";
+    protected readonly strokeWidth = 2;
+    protected readonly geometry: _angular_core.Signal<AtlIconGeometry>;
+    protected readonly isStroke: _angular_core.Signal<boolean>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlIcon, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlIcon, "atl-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -304,6 +342,7 @@ interface AtlRadioGroupContext {
     readonly value: WritableSignal<string>;
     readonly name: Signal<string>;
     readonly disabled: Signal<boolean>;
+    readonly readonly: Signal<boolean>;
     select(v: string): void;
     markTouched(): void;
     registerItem(item: RadioItem): void;
@@ -348,6 +387,13 @@ declare class AtlRadio implements RadioItem, OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     /** @internal */
+    /**
+     * readonly is enforced by cancelling the click, not only by the group's
+     * `select()` guard: HTML ignores `readonly` on a radio, so the input would flip
+     * its own DOM state while the model stayed put — and with OnPush nothing
+     * re-renders to correct it. See ADR-0045.
+     */
+    protected onClick(event: Event): void;
     protected onChange(): void;
     /** @internal */
     protected onBlur(): void;
@@ -380,6 +426,12 @@ declare class AtlRadioGroup implements FormValueControl<string>, AtlRadioGroupCo
     readonly touched: _angular_core.ModelSignal<boolean>;
     /** Whether the group is disabled. Bound by [formField] directive. */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the selection can be read but not changed. Enforced by the guards in
+     * `select()` and `onKeydown()`: HTML ignores `readonly` on a radio input, so the
+     * group has to block the change itself. See ADR-0045.
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
     /** Whether the group has validation errors. Bound by [formField] directive. */
     readonly invalid: _angular_core.InputSignal<boolean>;
     /** Whether the group is required. Bound by [formField] directive. */
@@ -409,7 +461,7 @@ declare class AtlRadioGroup implements FormValueControl<string>, AtlRadioGroupCo
     /** @internal */
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlRadioGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlRadioGroup, "atl-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "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<AtlRadioGroup, "atl-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "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; }; "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>;
 }
 
 /**
@@ -631,6 +683,12 @@ declare class AtlCombobox implements FormValueControl<string> {
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Whether the combobox is disabled. */
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the value can be read but not changed. Enforced here rather than by
+     * the DOM: `readonly` on the text input would stop typing, but nothing stops the
+     * panel from opening and an option from being picked. See ADR-0045.
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
     /** Whether the combobox has validation errors. */
     readonly invalid: _angular_core.InputSignal<boolean>;
     /** Whether the combobox is required. */
@@ -680,7 +738,7 @@ declare class AtlCombobox implements FormValueControl<string> {
     private open;
     private close;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AtlCombobox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlCombobox, "atl-combobox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "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, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AtlCombobox, "atl-combobox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "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; }; "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, never, true, never>;
 }
 
 /**