@joanroucoux/cairn-ui 0.6.2 → 0.6.4

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -506,21 +506,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
- * glow on hover and the press scale. The avatar itself keeps its own size.
+ * glow on hover and the press scale. On the current page (`aria-current="page"`, which `routerLinkActive`
+ * sets through `ariaCurrentWhenActive`) it holds a soft halo. The avatar itself keeps its own size.
  *
  * @example
  * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
  */
 class UiAvatarLink {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
             type: Directive,
             args: [{
                     selector: 'a[uiAvatarLink], button[uiAvatarLink]',
                     host: {
-                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
+                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) aria-[current=page]:bg-(--soft) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
                     },
                 }]
         }] });
@@ -748,22 +749,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }] } });
 
 /** Available card variants. `CardVariant` is derived from this tuple. */
-const CARD_VARIANTS = ['default', 'elevated'];
+const CARD_VARIANTS = ['default', 'elevated', 'inset'];
 /** Available card paddings. `CardPadding` is derived from this tuple. */
-const CARD_PADDINGS = ['none', 'sm', 'md', 'list', 'rows'];
+const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'];
 /** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
 const CARD_SURFACES = ['always', 'lg', 'max-lg'];
+/** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */
+const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'];
 const BASE_CLASSES$3 = 'block';
 const VARIANT_CLASSES = {
     default: {
-        always: 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] text-(--card-foreground)',
-        lg: 'lg:rounded-container lg:bg-(--card) lg:shadow-[inset_0_0_0_1px_var(--border)] lg:text-(--card-foreground)',
-        'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:shadow-[inset_0_0_0_1px_var(--border)] max-lg:text-(--card-foreground)',
+        always: 'rounded-container bg-(--card) text-(--card-foreground)',
+        lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',
     },
     elevated: {
-        always: 'rounded-container bg-(--elevated) shadow-[inset_0_0_0_1px_var(--hairline)] text-(--foreground)',
-        lg: 'lg:rounded-container lg:bg-(--elevated) lg:shadow-[inset_0_0_0_1px_var(--hairline)] lg:text-(--foreground)',
-        'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:shadow-[inset_0_0_0_1px_var(--hairline)] max-lg:text-(--foreground)',
+        always: 'rounded-container bg-(--elevated) text-(--foreground)',
+        lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',
+    },
+    inset: {
+        always: 'rounded-control bg-(--background) text-(--foreground)',
+        lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',
+        'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',
+    },
+};
+const AUTO_BORDERS = {
+    default: 'border',
+    elevated: 'hairline',
+    inset: 'none',
+};
+const BORDER_CLASSES = {
+    none: { always: '', lg: '', 'max-lg': '' },
+    border: {
+        always: 'shadow-[inset_0_0_0_1px_var(--border)]',
+        lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',
+        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',
+    },
+    hairline: {
+        always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',
+        lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
+        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
     },
 };
 const PADDING_CLASSES$1 = {
@@ -772,6 +798,11 @@ const PADDING_CLASSES$1 = {
         lg: 'lg:p-0',
         'max-lg': 'max-lg:p-0',
     },
+    xs: {
+        always: 'p-1',
+        lg: 'lg:p-1',
+        'max-lg': 'max-lg:p-1',
+    },
     sm: {
         always: 'p-3',
         lg: 'lg:p-3',
@@ -792,14 +823,27 @@ const PADDING_CLASSES$1 = {
         lg: 'lg:px-(--inset-card) lg:py-1',
         'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',
     },
+    recap: {
+        always: 'px-3 py-1',
+        lg: 'lg:px-3 lg:py-1',
+        'max-lg': 'max-lg:px-3 max-lg:py-1',
+    },
+    panel: {
+        always: 'px-3 py-2.5 lg:px-4 lg:py-3',
+        lg: 'lg:px-4 lg:py-3',
+        'max-lg': 'max-lg:px-3 max-lg:py-2.5',
+    },
 };
 /**
  * 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>
  */
 class UiCard {
@@ -809,10 +853,26 @@ class UiCard {
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     surface = input('always', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES[this.variant()][this.surface()]} ${PADDING_CLASSES$1[this.padding()][this.surface()]}`, /* @ts-ignore */
+    border = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    clip = input(false, { ...(ngDevMode ? { debugName: "clip" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => {
+        const variant = this.variant();
+        const surface = this.surface();
+        const border = this.border();
+        return [
+            BASE_CLASSES$3,
+            VARIANT_CLASSES[variant][surface],
+            BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],
+            PADDING_CLASSES$1[this.padding()][surface],
+            this.clip() ? 'overflow-hidden' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, clip: { classPropertyName: "clip", publicName: "clip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, decorators: [{
             type: Component,
@@ -823,7 +883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes()',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], clip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clip", required: false }] }] } });
 
 /**
  * Resolves to the styled control projected into a field.
@@ -1852,16 +1912,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }] });
 
 /** Available fact row sizes. `FactSize` is derived from this tuple. */
-const FACT_SIZES = ['md', 'sm', 'auto'];
+const FACT_SIZES = ['md', 'sm', 'auto', 'recap'];
 /** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
 const FACT_SUB_TONES = ['subtle', 'stale'];
 const SIZE_CLASSES$2 = {
-    md: { row: 'py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },
-    sm: { row: 'py-2.5', value: 'text-label' },
+    md: { row: 'gap-4 py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },
+    sm: { row: 'gap-4 py-2.5', value: 'text-label' },
     auto: {
-        row: 'py-3 lg:py-2.5 max-lg:[&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]',
+        row: 'gap-4 py-3 lg:py-2.5 max-lg:[&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]',
         value: 'text-body lg:text-label',
     },
+    recap: { row: 'gap-3 py-[9px] [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-label' },
 };
 const SUB_TONE_CLASSES$1 = {
     subtle: 'text-(--subtle-foreground)',
@@ -1906,7 +1967,7 @@ class UiFact {
     ...(ngDevMode ? [{ debugName: "subTone" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `flex items-baseline justify-between gap-4 ${SIZE_CLASSES$2[this.size()].row}`, /* @ts-ignore */
+    classes = computed(() => `flex items-baseline justify-between ${SIZE_CLASSES$2[this.size()].row}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     valueClasses = computed(() => `${SIZE_CLASSES$2[this.size()].value} tabular-nums`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
@@ -3388,6 +3449,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     host: { '[class]': 'classes()' },
                 }]
         }], propDecorators: { ruled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruled", required: false }] }] } });
+/**
+ * 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>
+ */
+class UiRowTile {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowTile, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiRowTile, isStandalone: true, selector: "[uiRowTile]", host: { classAttribute: "rounded-control grid size-9 flex-none place-items-center bg-(--muted)" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowTile, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiRowTile]',
+                    host: { class: 'rounded-control grid size-9 flex-none place-items-center bg-(--muted)' },
+                }]
+        }] });
 
 const nextId = (() => {
     let count = 0;
@@ -4158,5 +4240,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map