@joanroucoux/cairn-ui 0.6.1 → 0.6.3

package/package.json

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

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

@@ -205,10 +205,10 @@ declare class UiButton {
 }
 
 /** Available card variants. `CardVariant` is derived from this tuple. */
-declare const CARD_VARIANTS: readonly ["default", "elevated"];
+declare const CARD_VARIANTS: readonly ["default", "elevated", "inset"];
 type CardVariant = (typeof CARD_VARIANTS)[number];
 /** Available card paddings. `CardPadding` is derived from this tuple. */
-declare const CARD_PADDINGS: readonly ["none", "sm", "md", "list", "rows"];
+declare const CARD_PADDINGS: readonly ["none", "xs", "sm", "md", "list", "rows", "recap", "panel"];
 type CardPadding = (typeof CARD_PADDINGS)[number];
 /** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
 declare const CARD_SURFACES: readonly ["always", "lg", "max-lg"];
@@ -216,19 +216,24 @@ type CardSurface = (typeof CARD_SURFACES)[number];
 /**
  * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
  * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
- * plain on an iPhone, or the reverse.
+ * plain on an iPhone, or the reverse. `variant="inset"` is the `--background` box that sits inside a
+ * card or a dialog: a picked title, a results list, a recap, an empty-state panel.
  *
  * @example
  * <ui-card variant="elevated" padding="sm">Total</ui-card>
+ * <ui-card variant="inset" border="hairline" padding="xs">Results</ui-card>
+ * <ui-card padding="none" clip>Table that touches the edges, clipped to the corners</ui-card>
  * <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
  */
 declare class UiCard {
-    readonly variant: _angular_core.InputSignal<"elevated" | "default">;
-    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none" | "list" | "rows">;
+    readonly variant: _angular_core.InputSignal<"elevated" | "default" | "inset">;
+    readonly padding: _angular_core.InputSignal<"sm" | "md" | "xs" | "none" | "list" | "rows" | "recap" | "panel">;
     readonly surface: _angular_core.InputSignal<"lg" | "always" | "max-lg">;
+    readonly border: _angular_core.InputSignal<"auto" | "none" | "border" | "hairline">;
+    readonly clip: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "clip": { "alias": "clip"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -444,7 +449,7 @@ declare class UiExternalLink {
 }
 
 /** Available fact row sizes. `FactSize` is derived from this tuple. */
-declare const FACT_SIZES: readonly ["md", "sm", "auto"];
+declare const FACT_SIZES: readonly ["md", "sm", "auto", "recap"];
 type FactSize = (typeof FACT_SIZES)[number];
 /** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
 declare const FACT_SUB_TONES: readonly ["subtle", "stale"];
@@ -460,7 +465,7 @@ type FactSubTone = (typeof FACT_SUB_TONES)[number];
  */
 declare class UiFacts {
     readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<"m-0 flex flex-col shadow-[inset_0_1px_0_var(--hairline)]" | "m-0 flex flex-col">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiFacts, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiFacts, "dl[uiFacts]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -475,7 +480,7 @@ declare class UiFact {
     readonly label: _angular_core.InputSignal<string>;
     readonly sub: _angular_core.InputSignal<string | undefined>;
     readonly subTone: _angular_core.InputSignal<"subtle" | "stale">;
-    readonly size: _angular_core.InputSignal<"auto" | "sm" | "md">;
+    readonly size: _angular_core.InputSignal<"auto" | "sm" | "md" | "recap">;
     protected readonly classes: _angular_core.Signal<string>;
     protected readonly valueClasses: _angular_core.Signal<string>;
     protected readonly subClasses: _angular_core.Signal<string>;
@@ -876,10 +881,24 @@ declare class UiRowItem {
  */
 declare class UiListRow {
     readonly ruled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<"flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17 shadow-[inset_0_-1px_0_var(--hairline)]" | "flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiListRow, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiListRow, "[uiListRow]", never, { "ruled": { "alias": "ruled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+/**
+ * The 36px filled tile that leads a row: an icon on a muted square with the control radius. Put it on
+ * a `span` as the first child of a `ui-row` or a `uiListRow`.
+ *
+ * @example
+ * <a ui-row size="xl" padding="sm" href="/export">
+ *   <span uiRowTile><svg lucideDownload [size]="18" /></span>
+ *   Export
+ * </a>
+ */
+declare class UiRowTile {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRowTile, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiRowTile, "[uiRowTile]", never, {}, {}, never, never, true, never>;
+}
 
 type SegmentedOption = {
     value: string;
@@ -1152,5 +1171,5 @@ declare class UiCellSub {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiCellSub, "[uiCellSub]", never, { "narrow": { "alias": "narrow"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiRowTile, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
 export type { AlertVariant, AmountFormatOptions, AmountMasking, AmountNumeric, AsyncAlign, AsyncState, AsyncVariant, AvatarSize, AxisTicks, BackLinkSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardSurface, CardVariant, CellBreakpoint, ChartPoint, ChoiceChipOption, ControlSize, ControlSurface, DeltaEmphasis, DeltaSize, DeltaWeight, DialogLayout, DialogWidth, DonutSlice, FactSize, FactSubTone, FilterChipOption, GroupSize, MeterSize, MeterTone, RowGap, RowPadding, RowSize, SegmentedOption, SegmentedSize, SkeletonShape, StatSize, SubTone, TableRow, TooltipSize, UiControlError };