@affinda/wc 0.6.2 → 0.7.0

package/dist/collection/components/af-button-group/af-button-group.css

@@ -2,6 +2,10 @@
   display: inline-block;
 }
 
+:host(.stack-mobile) {
+  max-width: 100%;
+}
+
 .button-group {
   display: inline-flex;
   align-items: center;
@@ -20,3 +24,22 @@
 ::slotted(*) {
   flex-shrink: 0;
 }
+
+@media (max-width: 767px) {
+  :host(.stack-mobile) {
+    display: block;
+    width: min(100%, 342px);
+  }
+
+  :host(.stack-mobile) .button-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--af-button-group-mobile-gap, 12px) !important;
+  }
+
+  :host(.stack-mobile) ::slotted(af-button) {
+    width: 100%;
+    --af-button-width: 100%;
+  }
+}

package/dist/collection/components/af-button-group/af-button-group.js

@@ -74,4 +74,3 @@ export class AfButtonGroup {
         };
     }
 }
-//# sourceMappingURL=af-button-group.js.map

package/dist/collection/components/af-callout/af-callout.css

@@ -0,0 +1,290 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Base Callout Styles
+   ========================================================================== */
+
+.callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 24px;
+  border-radius: var(--radius-lg, 20px);
+  position: relative;
+}
+
+/* ==========================================================================
+   Icon Container
+   ========================================================================== */
+
+.callout__icon {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, 12px);
+}
+
+/* ==========================================================================
+   Content Area
+   ========================================================================== */
+
+.callout__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.callout__heading {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 18px;
+  line-height: 24px;
+  /* Match icon height so heading row aligns with icon */
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  /* Always dark text for readability on light callout backgrounds */
+  color: var(--colour-brand-inkwell, #14343b);
+}
+
+.callout__description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  margin-top: 8px;
+  /* Always dark text for readability on light callout backgrounds */
+  color: var(--colour-inkwell-400, #2b484f);
+}
+
+.callout__description:empty {
+  display: none;
+  margin-top: 0;
+}
+
+/* ==========================================================================
+   Dismiss Button
+   ========================================================================== */
+
+.callout__dismiss {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm, 6px);
+  cursor: pointer;
+  /* Always dark for readability on light callout backgrounds */
+  color: var(--colour-inkwell-300, #60767b);
+  transition: background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard);
+}
+
+.callout__dismiss:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.callout__dismiss:focus-visible {
+  outline: 2px solid var(--colour-brand-ice, #a6fffb);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Semantic Variants — Status Colors
+   ========================================================================== */
+
+/* Success */
+.callout--success {
+  background-color: var(--af-callout-success-bg, #e6f4ed);
+  --callout-icon-bg: rgba(62, 143, 110, 0.15);
+  --callout-icon-color: var(--status-ok, #3e8f6e);
+}
+
+.callout--success .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Error */
+.callout--error {
+  background-color: var(--af-callout-error-bg, #fbeae8);
+  --callout-icon-bg: rgba(185, 74, 59, 0.15);
+  --callout-icon-color: var(--status-issue, #b94a3b);
+}
+
+.callout--error .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Warning — uses status-warning (soft-clay-600) */
+.callout--warning {
+  background-color: var(--colour-tints-soft-clay-100, #efeae2);
+  --callout-icon-bg: rgba(158, 135, 101, 0.15);
+  --callout-icon-color: var(--status-warning, #9e8765);
+}
+
+.callout--warning .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Info — uses status-info (azure) */
+.callout--info {
+  background-color: var(--colour-tints-ice-100, #edfffe);
+  --callout-icon-bg: rgba(127, 226, 212, 0.2);
+  --callout-icon-color: var(--status-info, #7fe2d4);
+}
+
+.callout--info .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* ==========================================================================
+   Themed Variants — Brand Colors
+   ========================================================================== */
+
+/* Inkwell */
+.callout--inkwell {
+  background-color: var(--af-callout-inkwell-bg, var(--colour-inkwell-50, #e8ebeb));
+  --callout-icon-bg: rgba(20, 52, 59, 0.1);
+  --callout-icon-color: var(--colour-brand-inkwell, #14343b);
+}
+
+.callout--inkwell .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Mist Green */
+.callout--mist-green {
+  background-color: var(--af-callout-mist-green-bg, var(--colour-tints-mist-green-100, #f4f7f6));
+  --callout-icon-bg: rgba(198, 213, 209, 0.5);
+  --callout-icon-color: var(--colour-brand-inkwell, #14343b);
+}
+
+.callout--mist-green .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Soft Clay */
+.callout--soft-clay {
+  background-color: var(--af-callout-soft-clay-bg, var(--colour-tints-soft-clay-100, #efeae2));
+  --callout-icon-bg: rgba(176, 150, 112, 0.2);
+  --callout-icon-color: var(--colour-brand-inkwell, #14343b);
+}
+
+.callout--soft-clay .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* Ice */
+.callout--ice {
+  background-color: var(--af-callout-ice-bg, var(--colour-tints-ice-100, #edfffe));
+  --callout-icon-bg: rgba(166, 255, 251, 0.4);
+  --callout-icon-color: var(--colour-brand-inkwell, #14343b);
+}
+
+.callout--ice .callout__icon {
+  background-color: var(--callout-icon-bg);
+  color: var(--callout-icon-color);
+}
+
+/* ==========================================================================
+   Dismissible — reserve space for dismiss button (heading row only)
+   ========================================================================== */
+
+.callout:has(.callout__dismiss) .callout__heading {
+  padding-right: 40px;
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .callout {
+    padding: 20px;
+    gap: 12px;
+  }
+
+  .callout__icon {
+    width: 36px;
+    height: 36px;
+  }
+
+  .callout__heading {
+    font-size: 16px;
+    line-height: 22px;
+    min-height: 36px;
+  }
+
+  .callout__description {
+    font-size: 14px;
+    line-height: 20px;
+    margin-top: 6px;
+  }
+
+  .callout__dismiss {
+    top: 14px;
+    right: 14px;
+  }
+
+  .callout:has(.callout__dismiss) .callout__heading {
+    padding-right: 32px;
+  }
+}
+
+@media (max-width: 480px) {
+  .callout {
+    padding: 16px;
+    gap: 10px;
+  }
+
+  .callout__icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .callout__icon af-icon {
+    --af-icon-size: 20px;
+  }
+
+  .callout__heading {
+    font-size: 15px;
+    line-height: 20px;
+    min-height: 32px;
+  }
+
+  .callout__description {
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 4px;
+  }
+
+  .callout__dismiss {
+    top: 10px;
+    right: 10px;
+    width: 36px;
+    height: 36px;
+  }
+
+  .callout:has(.callout__dismiss) .callout__heading {
+    padding-right: 28px;
+  }
+}

package/dist/collection/components/af-callout/af-callout.js

@@ -0,0 +1,188 @@
+import { h, Host } from "@stencil/core";
+const SEMANTIC_VARIANTS = ['info', 'warning', 'success', 'error'];
+const AUTO_ICONS = {
+    info: 'info',
+    warning: 'info',
+    success: 'check-circle',
+    error: 'info',
+    inkwell: 'info',
+    'mist-green': 'info',
+    'soft-clay': 'info',
+    ice: 'info',
+};
+/**
+ * Callout component for displaying notices, alerts, and informational messages.
+ * A muted version of af-in-page-banner — same rounded card aesthetic but smaller,
+ * simpler, icon-driven instead of illustration-driven, no action buttons.
+ *
+ * Supports two categories of variants:
+ * - Semantic: info, warning, success, error (uses status colors)
+ * - Themed: inkwell, mist-green, soft-clay, ice (uses brand tints)
+ *
+ * @slot - Heading/title content
+ * @slot description - Body text
+ *
+ * @example
+ * ```html
+ * <af-callout variant="warning">
+ *   Important Notice
+ *   <span slot="description">Please review the following information.</span>
+ * </af-callout>
+ * ```
+ */
+export class AfCallout {
+    constructor() {
+        /**
+         * Visual variant of the callout.
+         * - Semantic: `info`, `warning`, `success`, `error` (status colors)
+         * - Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)
+         */
+        this.variant = 'info';
+        /**
+         * Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide.
+         */
+        this.icon = 'auto';
+        /**
+         * Whether the callout can be dismissed by the user.
+         */
+        this.dismissible = false;
+        this.dismissed = false;
+        this.handleDismiss = () => {
+            this.dismissed = true;
+            this.calloutDismiss.emit();
+        };
+    }
+    get resolvedIcon() {
+        if (this.icon === 'none')
+            return null;
+        if (this.icon === 'auto')
+            return AUTO_ICONS[this.variant] || 'info';
+        return this.icon;
+    }
+    get isSemantic() {
+        return SEMANTIC_VARIANTS.includes(this.variant);
+    }
+    render() {
+        if (this.dismissed)
+            return null;
+        const iconName = this.resolvedIcon;
+        return (h(Host, null, h("div", { class: {
+                callout: true,
+                [`callout--${this.variant}`]: true,
+                'callout--semantic': this.isSemantic,
+                'callout--themed': !this.isSemantic,
+            }, role: "alert" }, iconName && (h("div", { class: "callout__icon" }, h("af-icon", { name: iconName, size: 24 }))), h("div", { class: "callout__content" }, h("div", { class: "callout__heading" }, h("slot", null)), h("div", { class: "callout__description" }, h("slot", { name: "description" }))), this.dismissible && (h("button", { type: "button", class: "callout__dismiss", onClick: this.handleDismiss, "aria-label": "Dismiss" }, h("af-icon", { name: "close", size: 16 }))))));
+    }
+    static get is() { return "af-callout"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-callout.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-callout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CalloutVariant",
+                    "resolved": "\"error\" | \"ice\" | \"info\" | \"inkwell\" | \"mist-green\" | \"soft-clay\" | \"success\" | \"warning\"",
+                    "references": {
+                        "CalloutVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-callout/af-callout.tsx",
+                            "id": "src/components/af-callout/af-callout.tsx::CalloutVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the callout.\n- Semantic: `info`, `warning`, `success`, `error` (status colors)\n- Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName | 'auto' | 'none'",
+                    "resolved": "\"account-01\" | \"account-02\" | \"accounts-payable\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"auto\" | \"bpo\" | \"chats\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close\" | \"code\" | \"data\" | \"document-upload\" | \"download\" | \"edit\" | \"email\" | \"eye\" | \"facebook\" | \"gear\" | \"github\" | \"heart\" | \"home\" | \"info\" | \"insurance\" | \"lending-01\" | \"lending-02\" | \"link-out\" | \"linkedin\" | \"map-pin\" | \"menu\" | \"minus\" | \"none\" | \"numbers\" | \"pause\" | \"play\" | \"plus\" | \"productivity\" | \"quote\" | \"recruitment\" | \"refresh\" | \"search\" | \"security-01\" | \"security-02\" | \"solutions\" | \"sparkle\" | \"support\" | \"system\" | \"time\" | \"verification-01\" | \"wand\" | \"x\" | \"youtube\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "@affinda/icons",
+                            "id": "../icons/dist/index.d.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'auto'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the callout can be dismissed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dismissed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "calloutDismiss",
+                "name": "af-callout-dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/af-card/af-card.js

@@ -34,7 +34,7 @@ export class AfCard {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '8e58ce6e72f8c93f96661f56677a8ac861966e4b' }, h("div", { key: '5ad157ce904665fcd07f847b2851a8c269f04dce', class: classes }, h("div", { key: 'd662a3f05b9779d548a1393ce84ffa9d78be9646', class: "card__content" }, h("slot", { key: 'eb52c38a4b17a88bdabc74a1ebe3a0e9c1ad287c' })))));
+        return (h(Host, { key: 'fd767f800a7177b2231596eaf41f906f0bdc29ae' }, h("div", { key: '1c0432706445a66dad1afaecb0dd1d7e696752a0', class: classes }, h("div", { key: '327e92a575b73f2c66a679c750ca2548151081f5', class: "card__content" }, h("slot", { key: 'b8e40ef939226b89dc762c8a932c23cddf33bb2f' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }
@@ -60,7 +60,8 @@ export class AfCard {
                         "Theme": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Theme"
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
                         }
                     }
                 },
@@ -119,4 +120,3 @@ export class AfCard {
         };
     }
 }
-//# sourceMappingURL=af-card.js.map

package/dist/collection/components/af-center/af-center.js

@@ -33,7 +33,7 @@ export class AfCenter {
         if (this.minHeight) {
             style.minHeight = this.minHeight;
         }
-        return (h(Host, { key: 'e91358ecc8de26481c2360e73043316ac63bf7bd', style: style }, h("slot", { key: 'e9d407b9a70103b215536cbab3a2a196d841f762' })));
+        return (h(Host, { key: '254f2bdac06cfff9069c0fd6e96356ca1586ca0c', style: style }, h("slot", { key: '8065217df655c40a888748fae7382b525e0fb047' })));
     }
     static get is() { return "af-center"; }
     static get encapsulation() { return "shadow"; }
@@ -116,4 +116,3 @@ export class AfCenter {
         };
     }
 }
-//# sourceMappingURL=af-center.js.map

package/dist/collection/components/af-chart-legend/af-chart-legend.css

@@ -0,0 +1,132 @@
+/**
+ * af-chart-legend styles
+ */
+
+:host {
+  display: block;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+}
+
+/* ==========================================================================
+   List Layout
+   ========================================================================== */
+
+.chart-legend__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:host(.chart-legend--vertical) .chart-legend__list {
+  flex-direction: column;
+  gap: 8px;
+}
+
+:host(.chart-legend--align-start) .chart-legend__list {
+  justify-content: flex-start;
+}
+
+:host(.chart-legend--align-center) .chart-legend__list {
+  justify-content: center;
+}
+
+:host(.chart-legend--align-end) .chart-legend__list {
+  justify-content: flex-end;
+}
+
+/* ==========================================================================
+   Legend Item
+   ========================================================================== */
+
+.chart-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+:host(.chart-legend--interactive) .chart-legend__item {
+  cursor: pointer;
+  user-select: none;
+}
+
+:host(.chart-legend--interactive) .chart-legend__item:hover,
+.chart-legend__item--hovered {
+  background-color: var(--af-background-level-1, #f4f7f6);
+}
+
+:host(.chart-legend--interactive) .chart-legend__item:focus-visible {
+  outline: 2px solid var(--af-chart-palette-1, #c6d5d1);
+  outline-offset: 2px;
+}
+
+.chart-legend__item--inactive {
+  opacity: 0.4;
+}
+
+.chart-legend__item--inactive:hover {
+  opacity: 0.7;
+}
+
+/* ==========================================================================
+   Swatch
+   ========================================================================== */
+
+.chart-legend__swatch {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+}
+
+.chart-legend__swatch--square {
+  border-radius: 2px;
+}
+
+.chart-legend__swatch--circle {
+  border-radius: 50%;
+}
+
+.chart-legend__swatch--line {
+  width: 16px;
+  height: 3px;
+  border-radius: 2px;
+}
+
+/* Color palette fallbacks */
+.chart-legend__swatch--0 { background-color: var(--af-chart-palette-1, #c6d5d1); }
+.chart-legend__swatch--1 { background-color: var(--af-chart-palette-2, #dde6e3); }
+.chart-legend__swatch--2 { background-color: var(--af-chart-palette-3, #c0ab8d); }
+.chart-legend__swatch--3 { background-color: var(--af-chart-palette-4, #dfd5c6); }
+.chart-legend__swatch--4 { background-color: var(--af-chart-palette-5, #14343b); }
+.chart-legend__swatch--5 { background-color: var(--af-chart-palette-1, #c6d5d1); opacity: 0.7; }
+.chart-legend__swatch--6 { background-color: var(--af-chart-palette-2, #dde6e3); opacity: 0.7; }
+.chart-legend__swatch--7 { background-color: var(--af-chart-palette-3, #c0ab8d); opacity: 0.7; }
+
+/* ==========================================================================
+   Label & Value
+   ========================================================================== */
+
+.chart-legend__label {
+  font-size: 13px;
+  color: var(--af-chart-text, #2b484f);
+}
+
+.chart-legend__value {
+  font-size: 12px;
+  color: var(--af-chart-text-muted, #6b8085);
+  font-variant-numeric: tabular-nums;
+  margin-left: 4px;
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+:host(.chart-legend--empty) {
+  display: none;
+}