@lifecorner/angular-ui-kit 3.6.1 → 3.8.0

package/src/styles/_horizon.scss

@@ -31,6 +31,19 @@
  *                            on the land add its height, e.g. 136 px on the phone)
  *   --lc-horizon-sun-radius  the sun's radius (58 px phone, 70 · 90 · 120 · 166 px)
  *   --lc-horizon-sun-x       the sun's centre from the block's left edge (72%)
+ *   --lc-horizon-figure-size the figure's size in .lc-horizon__figure
+ *                            (64 px phone, 96 px from 1024, 128 px from 1920)
+ *   --lc-horizon-figure-gap  its right edge to the sun's left edge (16 px; 24 px from 1024)
+ *
+ * Figure (3.8, G-4): Edu on the line, left of the sun, in a DIRECT child with
+ * .lc-horizon__figure (lc-character, <img>, <picture>, or an element holding an
+ * inline <svg>), placed BEFORE .lc-horizon__land. His feet stand on the line
+ * (the box bottom 12.5 % of its size below it); the block's height above the
+ * line becomes max(sun + 22 px, figure + 8 px). Decorative, never a target:
+ *
+ *   <div class="lc-horizon" aria-hidden="true">
+ *     <lc-character class="lc-horizon__figure" pose="comforts" />
+ *   </div>
  *
  * Colours: --color-background-low, --color-horizon-line, --color-land-1…3,
  * --color-sun-1…3, --color-sun-ring, --color-sun-halo (theme tokens).
@@ -40,6 +53,8 @@
   --_lc-horizon-land: var(--lc-horizon-land, 112px);
   --_lc-horizon-r: var(--lc-horizon-sun-radius, 58px);
   --_lc-horizon-x: var(--lc-horizon-sun-x, 72%);
+  --_lc-horizon-fig: var(--lc-horizon-figure-size, 64px);
+  --_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, 16px);
 
   position: relative;
   flex: 1 0 auto;
@@ -84,6 +99,8 @@
   @media (min-width: 1024px) {
     --_lc-horizon-land: var(--lc-horizon-land, 100px);
     --_lc-horizon-r: var(--lc-horizon-sun-radius, 70px);
+    --_lc-horizon-fig: var(--lc-horizon-figure-size, 96px);
+    --_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, 24px);
   }
 
   @media (min-width: 1280px) {
@@ -99,6 +116,7 @@
   @media (min-width: 1920px) {
     --_lc-horizon-land: var(--lc-horizon-land, 184px);
     --_lc-horizon-r: var(--lc-horizon-sun-radius, 166px);
+    --_lc-horizon-fig: var(--lc-horizon-figure-size, 128px);
   }
 
   // Windows high contrast and other forced-colour modes: no decoration.
@@ -113,3 +131,37 @@
   position: absolute;
   inset: auto 0 0;
 }
+
+// Edu on the horizon line (3.8, G-4): left of the sun, the feet on the line.
+// Only a block WITH the figure gets the taller minimum; without it the block
+// renders exactly as before.
+.lc-horizon:has(> .lc-horizon__figure) {
+  min-height: calc(var(--_lc-horizon-land) + max(var(--_lc-horizon-r) + 22px, var(--_lc-horizon-fig) + 8px));
+}
+
+// The slot sizes the figure (an lc-character's `size` input doesn't apply).
+// Its right edge sits the gap left of the sun's left edge; the box bottom lies
+// 12.5 % of its size below the line, where the standing poses' feet end
+// (y 87.5 of 100). Px, not rem: at 200 % text the figure keeps its size.
+.lc-horizon__figure {
+  --lc-character-size: var(--_lc-horizon-fig);
+
+  position: absolute;
+  right: calc(100% - var(--_lc-horizon-x) + var(--_lc-horizon-r) + var(--_lc-horizon-fig-gap));
+  bottom: calc(var(--_lc-horizon-land) - var(--_lc-horizon-fig) * 0.125);
+  width: var(--_lc-horizon-fig);
+  height: var(--_lc-horizon-fig);
+  pointer-events: none;
+
+  // Decoration, like the horizon's own: dropped, its box kept.
+  @media (forced-colors: active) {
+    visibility: hidden;
+  }
+}
+
+// A <picture> or an element holding an inline <svg>.
+.lc-horizon__figure > :is(img, svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/styles/horizon.figure.spec.ts

@@ -0,0 +1,79 @@
+import { compile } from 'sass';
+import { resolve } from 'path';
+
+/**
+ * The horizon's figure slot (3.8, G-4, AC-15 and AC-16 of request 005), read
+ * from the compiled CSS. The block without a figure is pinned by
+ * horizon.spec.ts, which this request leaves unchanged.
+ */
+const css = '\n' + compile(resolve(__dirname, '_horizon.scss')).css;
+
+/** The declarations of the top-level rule whose selector is exactly `selector` (compiled rules start a line). */
+function rule(selector: string): string {
+  const start = css.indexOf(`\n${selector} {`);
+  expect(start).toBeGreaterThan(-1);
+  return css.slice(start, css.indexOf('}', start));
+}
+
+describe('.lc-horizon__figure (G-4)', () => {
+  it('takes the figure size and gap from custom properties: 64 px and 16 px on the phone', () => {
+    const base = rule('.lc-horizon');
+    expect(base).toMatch(/--_lc-horizon-fig:\s*var\(--lc-horizon-figure-size, 64px\)/);
+    expect(base).toMatch(/--_lc-horizon-fig-gap:\s*var\(--lc-horizon-figure-gap, 16px\)/);
+  });
+
+  it.each([
+    [1024, '96px', '24px'],
+    [1920, '128px', null],
+  ])('steps up from %s px: size %s, gap %s', (width, size, gap) => {
+    const start = css.indexOf(`@media (min-width: ${width}px) {\n  .lc-horizon {`);
+    expect(start).toBeGreaterThan(-1);
+    const step = css.slice(start, css.indexOf('}', start));
+    expect(step).toContain(`--_lc-horizon-fig: var(--lc-horizon-figure-size, ${size})`);
+    if (gap) expect(step).toContain(`--_lc-horizon-fig-gap: var(--lc-horizon-figure-gap, ${gap})`);
+    else expect(step).not.toContain('--_lc-horizon-fig-gap');
+  });
+
+  it.each([1280, 1440])('keeps 96 px and 24 px at %s px (no figure step there)', (width) => {
+    const start = css.indexOf(`@media (min-width: ${width}px) {\n  .lc-horizon {`);
+    expect(css.slice(start, css.indexOf('}', start))).not.toContain('--_lc-horizon-fig');
+  });
+
+  it('raises the minimum above the line to max(sun + 22 px, figure + 8 px) only with a figure child', () => {
+    expect(rule('.lc-horizon:has(> .lc-horizon__figure)')).toMatch(
+      /min-height:\s*calc\(var\(--_lc-horizon-land\) \+ max\(var\(--_lc-horizon-r\) \+ 22px, var\(--_lc-horizon-fig\) \+ 8px\)\)/,
+    );
+    // The block without the figure keeps land + sun + 22 px (horizon.spec.ts).
+    expect(rule('.lc-horizon')).toMatch(/min-height:\s*calc\(var\(--_lc-horizon-land\) \+ var\(--_lc-horizon-r\) \+ 22px\)/);
+  });
+
+  it('places the figure left of the sun with the gap, its feet on the line, sized by the slot', () => {
+    const figure = rule('.lc-horizon__figure');
+    expect(figure).toMatch(/position:\s*absolute/);
+    expect(figure).toMatch(/right:\s*calc\(100% - var\(--_lc-horizon-x\) \+ var\(--_lc-horizon-r\) \+ var\(--_lc-horizon-fig-gap\)\)/);
+    expect(figure).toMatch(/bottom:\s*calc\(var\(--_lc-horizon-land\) - var\(--_lc-horizon-fig\) \* 0\.125\)/);
+    expect(figure).toMatch(/width:\s*var\(--_lc-horizon-fig\)/);
+    expect(figure).toMatch(/height:\s*var\(--_lc-horizon-fig\)/);
+    expect(figure).toMatch(/--lc-character-size:\s*var\(--_lc-horizon-fig\)/);
+  });
+
+  it('AC-16: the figure is never a pointer target', () => {
+    expect(rule('.lc-horizon__figure')).toMatch(/pointer-events:\s*none/);
+  });
+
+  it('drops the figure in forced colours, keeping its box', () => {
+    expect(css).toMatch(/@media \(forced-colors: active\) \{\s*\.lc-horizon__figure \{\s*visibility: hidden;/);
+  });
+
+  it('fills the slot with a <picture>’s image or an inline <svg>', () => {
+    const child = rule('.lc-horizon__figure > :is(img, svg)');
+    expect(child).toMatch(/display:\s*block/);
+    expect(child).toMatch(/width:\s*100%/);
+    expect(child).toMatch(/height:\s*100%/);
+  });
+
+  it('adds no motion and no raw colour', () => {
+    const figureCss = css.slice(css.indexOf('.lc-horizon:has('));
+    expect(figureCss).not.toMatch(/animation|transition|#[0-9a-f]{3,6}\b/i);
+  });
+});

package/types/lifecorner-angular-ui-kit-character-svg.d.ts

@@ -0,0 +1,44 @@
+/** One of a pose's two drawings: `light` for light surfaces, `dark` for dark ones. */
+export type CharacterDrawing = 'light' | 'dark';
+/** A pose's two drawings as SVG markup, each equal to its file `<pose>-<drawing>.svg`. */
+export interface CharacterSvgPair {
+  readonly light: string;
+  readonly dark: string;
+}
+/**
+ * Edu's poses (3.8, gap G-4), in the order of the docs. `calm` is the neutral
+ * Edu; the post-only poses (peeks-around-corner, amazed, looks-ahead) are not shipped.
+ */
+export type CharacterPose = 'hello' | 'shows-the-way' | 'happy' | 'welcomes-member' | 'resting' | 'in-his-corner' | 'comforts' | 'all-done' | 'calm' | 'connects' | 'discovered' | 'thinking' | 'connection-paused' | 'see-you';
+/** Every shipped pose, in the order of the docs. */
+export declare const CHARACTER_POSES: readonly CharacterPose[];
+/** hello (Hallo); dark drawn. */
+export declare const CHARACTER_SVG_HELLO: CharacterSvgPair;
+/** shows-the-way (Zeigt den Weg); dark drawn. */
+export declare const CHARACTER_SVG_SHOWS_THE_WAY: CharacterSvgPair;
+/** happy (Freut sich); dark drawn. */
+export declare const CHARACTER_SVG_HAPPY: CharacterSvgPair;
+/** welcomes-member (Begrüßt ein Mitglied); dark by the rule. */
+export declare const CHARACTER_SVG_WELCOMES_MEMBER: CharacterSvgPair;
+/** resting (Ruht sich aus); dark by the rule. */
+export declare const CHARACTER_SVG_RESTING: CharacterSvgPair;
+/** in-his-corner (Sitzt in seiner Ecke); dark by the rule. */
+export declare const CHARACTER_SVG_IN_HIS_CORNER: CharacterSvgPair;
+/** comforts (Tröstet); dark by the rule. */
+export declare const CHARACTER_SVG_COMFORTS: CharacterSvgPair;
+/** all-done (Erledigt); dark by the rule. */
+export declare const CHARACTER_SVG_ALL_DONE: CharacterSvgPair;
+/** calm (ruhig); dark drawn. */
+export declare const CHARACTER_SVG_CALM: CharacterSvgPair;
+/** connects (Verbindet); dark by the rule. */
+export declare const CHARACTER_SVG_CONNECTS: CharacterSvgPair;
+/** discovered (Hat etwas entdeckt); dark by the rule. */
+export declare const CHARACTER_SVG_DISCOVERED: CharacterSvgPair;
+/** thinking (Denkt nach); dark by the rule. */
+export declare const CHARACTER_SVG_THINKING: CharacterSvgPair;
+/** connection-paused (Verbindung pausiert); dark by the rule. */
+export declare const CHARACTER_SVG_CONNECTION_PAUSED: CharacterSvgPair;
+/** see-you (Bis bald); dark by the rule. */
+export declare const CHARACTER_SVG_SEE_YOU: CharacterSvgPair;
+/** Every pose's light and dark drawing, keyed by pose. */
+export declare const CHARACTER_SVG: Readonly<Record<CharacterPose, CharacterSvgPair>>;

package/types/lifecorner-angular-ui-kit-character.d.ts

@@ -0,0 +1,104 @@
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+import { CharacterPose, CharacterPose as CharacterPose$1 } from "@lifecorner/angular-ui-kit/character-svg";
+/** Edge of the figure's square box in px. `--lc-character-size` overrides it. */
+export type CharacterSize = 48 | 64 | 80 | 96 | 128;
+/**
+ * Which drawing to show.
+ * - `auto`: the root theme picks the light or the dark drawing.
+ * - `dark`: the on-dark drawing in both themes, for a fixed dark surface.
+ */
+export type CharacterColorMode = 'auto' | 'dark';
+/**
+ * The URL folder that holds the pose files (`<pose>-light.svg`,
+ * `<pose>-dark.svg`, copied from the package's `assets/character/`). Follows
+ * `LC_LOGO_BASE_PATH` (default `/assets` → `/assets/character`) unless you
+ * provide it yourself.
+ *
+ * @example
+ * ```ts
+ * providers: [{ provide: LC_CHARACTER_BASE_PATH, useValue: '/static/edu' }]
+ * ```
+ */
+export declare const LC_CHARACTER_BASE_PATH: InjectionToken<string>;
+/**
+ * Edu, the LifeCorner character, in one of his poses (3.8, gap G-4).
+ *
+ * Renders the pose files as `<img>` (no inline SVG, no Trusted Types policy),
+ * in a square box that is sized by CSS before any JavaScript runs, so the
+ * figure prerenders and never shifts the layout. Decorative by default
+ * (`aria-hidden="true"`); `ariaLabel` makes it an image with that name. The
+ * figure is still: nothing animates.
+ *
+ * Without Angular, use the files (`@lifecorner/angular-ui-kit/assets/character/<pose>-<light|dark>.svg`)
+ * or the strings of `@lifecorner/angular-ui-kit/character-svg`.
+ *
+ * @example Decorative, follows the app theme
+ * ```html
+ * <lc-character pose="comforts" size="96" />
+ * ```
+ *
+ * @example On a fixed dark surface, with a name
+ * ```html
+ * <lc-character pose="hello" colorMode="dark" ariaLabel="Edu winkt" />
+ * ```
+ */
+export declare class CharacterComponent {
+  /**
+   * Which pose to draw: hello, shows-the-way, happy, welcomes-member, resting,
+   * in-his-corner, comforts, all-done, calm, connects, discovered, thinking,
+   * connection-paused, see-you. `calm` is the neutral Edu.
+   * @default 'calm'
+   */
+  readonly pose: import("@angular/core").InputSignal<CharacterPose$1>;
+  /**
+   * Edge of the square box in px: 48, 64, 80, 96 or 128 (`size="96"` works
+   * too). `--lc-character-size` overrides it; set that hook per breakpoint in
+   * CSS.
+   * @default 64
+   */
+  readonly size: import("@angular/core").InputSignalWithTransform<CharacterSize, CharacterSize | "48" | "64" | "80" | "96" | "128">;
+  /**
+   * Which drawing to show.
+   * - `auto`: both drawings are in the DOM and the root theme shows one
+   *   (light, dark, and system with the OS setting), without JavaScript.
+   * - `dark`: only the on-dark drawing, in both themes, for a fixed dark
+   *   surface such as the hero band.
+   * @default 'auto'
+   */
+  readonly colorMode: import("@angular/core").InputSignal<CharacterColorMode>;
+  /**
+   * Empty: decorative (`aria-hidden="true"`). Set: `role="img"` with this
+   * name. This is your own translated text; the kit ships none.
+   * @default ''
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly basePath;
+  protected readonly lightSrc: import("@angular/core").Signal<string>;
+  protected readonly darkSrc: import("@angular/core").Signal<string>;
+  protected readonly hostClass: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CharacterComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CharacterComponent, "lc-character", never, {
+    "pose": {
+      "alias": "pose";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorMode": {
+      "alias": "colorMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export type { CharacterPose };

package/types/lifecorner-angular-ui-kit-code-block.d.ts

@@ -20,6 +20,21 @@ export declare class CodeBlockComponent {
   showCopy: import("@angular/core").InputSignal<boolean>;
   /** Whether the code block has a header bar */
   showHeader: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the scrollable code region (`role="region"`). When it
+   * is unset or empty, the `filename` is used, then the `language`. Set a
+   * short, localised name that is unique on the page, such as "Befehl für
+   * Claude Code". Not used when `wrap` is set.
+   * @default undefined
+   */
+  regionLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Wraps long lines (`white-space: pre-wrap`, breaking anywhere if needed)
+   * instead of scrolling sideways. A wrapped block doesn't scroll, so its body
+   * is neither a tab stop nor a region.
+   * @default false
+   */
+  wrap: import("@angular/core").InputSignal<boolean>;
   /** Visible label of the copy button. */
   copyLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the copy button. */
@@ -32,6 +47,8 @@ export declare class CodeBlockComponent {
   protected highlightedLines: import("@angular/core").Signal<CodeLine[]>;
   protected lineNumbers: import("@angular/core").Signal<number[]>;
   protected headerLabel: import("@angular/core").Signal<string>;
+  /** The region's name: `regionLabel`, then `filename`, then `language` (`''` falls through). */
+  protected regionName: import("@angular/core").Signal<string>;
   protected codeClasses: import("@angular/core").Signal<string>;
   protected copyToClipboard(): Promise<void>;
   static ɵfac: i0.ɵɵFactoryDeclaration<CodeBlockComponent, never>;
@@ -66,6 +83,16 @@ export declare class CodeBlockComponent {
       "required": false;
       "isSignal": true;
     };
+    "regionLabel": {
+      "alias": "regionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
     "copyLabel": {
       "alias": "copyLabel";
       "required": false;

package/types/lifecorner-angular-ui-kit.d.ts

@@ -9,6 +9,8 @@ export * from "@lifecorner/angular-ui-kit/icon";
 export * from "@lifecorner/angular-ui-kit/icon-names";
 export * from "@lifecorner/angular-ui-kit/icons";
 export * from "@lifecorner/angular-ui-kit/logo";
+export * from "@lifecorner/angular-ui-kit/character";
+export * from "@lifecorner/angular-ui-kit/character-svg";
 export * from "@lifecorner/angular-ui-kit/menu";
 export * from "@lifecorner/angular-ui-kit/input";
 export * from "@lifecorner/angular-ui-kit/radio";