@joanroucoux/cairn-ui 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joanroucoux/cairn-ui",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Cairn UI: a monochrome, accessible Angular design system.",
   "keywords": [
     "angular",

package/styles/theme.css

@@ -36,3 +36,7 @@
   --animate-cairn-spin: cairn-spin var(--duration-spin) linear infinite;
   --animate-cairn-pulse: cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate;
 }
+
+html {
+  scrollbar-gutter: stable;
+}

package/styles/tokens.css

@@ -30,11 +30,7 @@
   --ramp-5: light-dark(#b0b6b4, #5a605e);
   --ramp-6: light-dark(#ced3d1, #3b403e);
 
-  --secondary: light-dark(#f1f3f2, #1e2020);
-  --secondary-foreground: light-dark(#111414, #edefee);
   --muted: light-dark(#f1f3f2, #1e2020);
-  --accent: light-dark(#f1f3f2, #1e2020);
-  --accent-foreground: light-dark(#111414, #edefee);
   --destructive: light-dark(#b8443c, #a33a33);
   --destructive-foreground: light-dark(#fafbfa, #fafbfa);
 

package/types/joanroucoux-cairn-ui-async.d.ts

@@ -10,7 +10,9 @@ type AsyncVariant = (typeof ASYNC_VARIANTS)[number];
 export declare const ASYNC_ALIGNS: readonly ["start", "center", "auto"];
 type AsyncAlign = (typeof ASYNC_ALIGNS)[number];
 /**
- * The three states of a block that depends on a service call, next to the ready content.
+ * The three states of a block that depends on a service call, next to the ready content. During the
+ * first 150 ms of a load the `[asyncLoading]` content is laid out but invisible and hidden from
+ * assistive technology, so the block already holds its skeleton's space.
  *
  * @example
  * <ui-async [state]="totalState()" errorTitle="The total couldn’t be loaded" errorMessage="The server didn’t respond." retryLabel="Try again" (retry)="reload()">
@@ -96,7 +98,7 @@ declare const SKELETON_MIN_MS = 400;
 /**
  * Turns the live state of a call into the state to draw: `loading` only appears once the call has
  * lasted 150 ms and, once shown, stays at least 400 ms. Until then the previous state stays on
- * screen; `null` means nothing to draw yet (a first load under 150 ms). Call it in an injection context.
+ * screen; `null` means no state to draw yet (a first load under 150 ms), which `ui-async` renders as an invisible skeleton. Call it in an injection context.
  *
  * @example
  * protected readonly shown = delayedState(this.state);

package/types/joanroucoux-cairn-ui-external-link.d.ts

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
  * Link to another site: the label followed by an external-link icon.
  *
  * @example
- * <a ui-external-link href="https://example.com" target="_blank" rel="noopener">Page on example.com</a>
+ * <a ui-external-link href="https://www.contoso.com" target="_blank" rel="noopener">Page on contoso.com</a>
  */
 export declare class UiExternalLink {
   static ɵfac: i0.ɵɵFactoryDeclaration<UiExternalLink, never>;

package/types/joanroucoux-cairn-ui-input.d.ts

@@ -17,7 +17,7 @@ export declare const CONTROL_SIZE_CLASSES: Record<ControlSize, string>;
  * so a surrounding `ui-field` can show the message.
  *
  * @example
- * <input uiInput type="email" placeholder="you@example.com" />
+ * <input uiInput type="email" placeholder="you@contoso.com" />
  */
 export declare class UiInput implements UiControl {
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;