npm - @affinda/wc - Versions diffs - 0.1.0 → 0.3.0 - Mend

@affinda/wc 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (489) hide show

package/dist/collection/components/af-hero/af-hero.js ADDED Viewed

@@ -0,0 +1,314 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Blob-shape mask used to clip hero photos on the inkwell-photo variant.
+ * Extracted from the 7+ hand-rolled copies in the website so the path is
+ * defined exactly once. Intrinsic viewBox: 741 × 940.
+ */
+const BLOB_MASK_URL = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')";
+/**
+ * Mobile blob shape — simpler D-curve matching the live mobile banner.
+ */
+const BLOB_MASK_URL_MOBILE = "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')";
+/**
+ * Map each variant to its underlying section theme token. Keeps one source
+ * of truth instead of having consumers spell the theme twice.
+ */
+const VARIANT_THEMES = {
+    'inkwell-photo': 'inkwell',
+    'inkwell-illustration': 'inkwell',
+    'inkwell-centered': 'inkwell',
+    'soft-clay-illustration': 'soft-clay',
+    'mist-green-illustration': 'mist-green',
+};
+/**
+ * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+ * the Affinda marketing site (and sibling apps) currently ship. Covers five
+ * canonical patterns via the `variant` prop:
+ *
+ * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+ *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+ *   value-creation, about-us) and industry landing pages that carry a
+ *   photograph instead of an illustration.
+ * - `inkwell-illustration` — inkwell background, illustration on the right.
+ *   Use for: industry landing pages, /industries, /integrations, /platform
+ *   with bespoke art.
+ * - `inkwell-centered` — inkwell background, centred typography lockup.
+ *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+ *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+ * - `soft-clay-illustration` — soft-clay background, illustration on the
+ *   right. Use for: /news, /industries overview, /security, /compare.
+ * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+ *   the mist-green theme. Reserved for future pages.
+ *
+ * ## Slots
+ *
+ * - default — heading content (use when richer markup than the `heading`
+ *   prop can express is needed; e.g. coloured spans or line breaks).
+ * - `description` — supporting copy under the heading.
+ * - `badge` — optional pre-heading label (pill, version tag).
+ * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+ * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+ *   the blob mask automatically.
+ * - `illustration` — the illustration SVG for `-illustration` variants.
+ * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+ *   slot `<af-paperclip-decoration />` here.
+ * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+ *   Painted with the theme's background so it cleanly overlaps the image's
+ *   lower edge on the photo variant.
+ *
+ * ## Float-navbar handling
+ *
+ * When `floatNavbar` is true (the default for the inkwell variants) the
+ * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+ * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+ * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+ * / navbar-spacer-transparent treatment. Consumers already import
+ * `@affinda/css` so no extra import is required. The rule deactivates
+ * when the hero is removed from the DOM.
+ *
+ * ## Image lift
+ *
+ * The `inkwell-photo` variant renders the photo column with
+ * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+ * setting `--af-hero-image-lift` on the `<af-hero>` element.
+ */
+export class AfHero {
+    constructor() {
+        /** Layout / theme preset. See variant docs in the component header. */
+        this.variant = 'inkwell-photo';
+        /** Heading text (use the default slot for richer markup). */
+        this.heading = '';
+        /** Description text (use the `description` slot for richer markup). */
+        this.description = '';
+        /**
+         * Top padding preset. `default` = 124px (matches IndustryHero /
+         * IllustrationHero). `loose` = 164px (matches ListingHero — gives the
+         * image a touch more breathing room above the lockup on archive pages).
+         */
+        this.topPad = 'default';
+        /** Typography lockup max-width (px). Defaults to 620, matching the live site. */
+        this.maxWidth = 620;
+        /**
+         * Whether to apply the blob mask to the slotted `image`. Defaults to
+         * `true` for `inkwell-photo`. Set `false` if you want to slot in a
+         * pre-masked raster or a custom wrapper.
+         */
+        this.maskImage = true;
+    }
+    get resolvedFloatNavbar() {
+        if (typeof this.floatNavbar === 'boolean')
+            return this.floatNavbar;
+        return (this.variant === 'inkwell-photo' ||
+            this.variant === 'inkwell-illustration' ||
+            this.variant === 'inkwell-centered');
+    }
+    get theme() {
+        return VARIANT_THEMES[this.variant];
+    }
+    connectedCallback() {
+        if (this.resolvedFloatNavbar && typeof document !== 'undefined') {
+            document.body.setAttribute('data-af-hero-float-navbar', 'true');
+        }
+    }
+    disconnectedCallback() {
+        if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {
+            document.body.removeAttribute('data-af-hero-float-navbar');
+        }
+    }
+    renderCopy() {
+        const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';
+        return (h("div", { class: "hero__copy" }, h("div", { class: "hero__badge" }, h("slot", { name: "badge" })), h("af-typography-lockup", { "heading-size": "1", "text-alignment": alignment, "max-width": String(this.maxWidth) }, this.heading ? h("h1", null, this.heading) : h("slot", null), this.description ? (h("span", { slot: "description" }, this.description)) : (h("slot", { name: "description", slot: "description" }))), h("div", { class: "hero__buttons" }, h("slot", { name: "buttons" }))));
+    }
+    renderPhoto() {
+        return (h("div", { class: {
+                hero__image: true,
+                'hero__image--masked': this.maskImage,
+            } }, h("slot", { name: "image" })));
+    }
+    renderIllustration() {
+        return (h("div", { class: "hero__illustration" }, h("slot", { name: "illustration" })));
+    }
+    render() {
+        const v = this.variant;
+        const centered = v === 'inkwell-centered';
+        const hasImage = v === 'inkwell-photo';
+        const hasIllustration = v === 'inkwell-illustration' ||
+            v === 'soft-clay-illustration' ||
+            v === 'mist-green-illustration';
+        return (h(Host, { key: '6e8e522c6593a79fbb93eaf421c6b3f41a2072f5', class: {
+                [`hero--${v}`]: true,
+                [`hero--pad-${this.topPad}`]: true,
+                [`hero--theme-${this.theme}`]: true,
+                'hero--float-navbar': this.resolvedFloatNavbar,
+            } }, h("af-section", { key: 'dc6181658d53a8c7166d3f090df9666d35310338', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (h("div", { key: 'b8357ea1cc08dafa3a3f5e4cd8c545bef1e3df1c', class: "hero__paperclip", "aria-hidden": "true" }, h("slot", { key: 'da4b0dcb83e6e8c09b9962ba7d0c09e02f6721c5', name: "paperclip" }))), h("af-container", { key: '0dbffc963a56e53ed7206b59cccfd74f5bd792ee', class: "hero__inner" }, centered ? (this.renderCopy()) : (h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), h("div", { key: 'd4316dbc5ba954ce2a52d73dfb73575b77f394db', class: "hero__logos" }, h("slot", { key: 'd9ff55a2c238d5db322aef90cb28006d91f7dffc', name: "logos-below" })))));
+    }
+    static get is() { return "af-hero"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-hero.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-hero.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeroVariant",
+                    "resolved": "\"inkwell-centered\" | \"inkwell-illustration\" | \"inkwell-photo\" | \"mist-green-illustration\" | \"soft-clay-illustration\"",
+                    "references": {
+                        "HeroVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "id": "src/components/af-hero/af-hero.tsx::HeroVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout / theme preset. See variant docs in the component header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'inkwell-photo'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text (use the default slot for richer markup)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text (use the `description` slot for richer markup)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "floatNavbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Float the site header over the hero and paint the navbar-spacer\ntransparent so the hero background flows to the top of the viewport.\nDefaults to true for the three inkwell variants, false for the\nsoft-clay / mist-green illustration variants (whose consumers don't\nalways want a full-bleed crown)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "float-navbar"
+            },
+            "topPad": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeroTopPad",
+                    "resolved": "\"default\" | \"loose\"",
+                    "references": {
+                        "HeroTopPad": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "id": "src/components/af-hero/af-hero.tsx::HeroTopPad"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Top padding preset. `default` = 124px (matches IndustryHero /\nIllustrationHero). `loose` = 164px (matches ListingHero \u2014 gives the\nimage a touch more breathing room above the lockup on archive pages)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "top-pad",
+                "defaultValue": "'default'"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Typography lockup max-width (px). Defaults to 620, matching the live site."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "620"
+            },
+            "maskImage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to apply the blob mask to the slotted `image`. Defaults to\n`true` for `inkwell-photo`. Set `false` if you want to slot in a\npre-masked raster or a custom wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask-image",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=af-hero.js.map

package/dist/collection/components/af-hero/af-hero.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-hero.js","sourceRoot":"","sources":["../../../src/components/af-hero/af-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n | 'inkwell-photo'\n | 'inkwell-illustration'\n | 'inkwell-centered'\n | 'soft-clay-illustration'\n | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n 'inkwell-photo': 'inkwell',\n 'inkwell-illustration': 'inkwell',\n 'inkwell-centered': 'inkwell',\n 'soft-clay-illustration': 'soft-clay',\n 'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n * Use for: listing / archive pages (blog, case-studies, whitepapers,\n * value-creation, about-us) and industry landing pages that carry a\n * photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n * Use for: industry landing pages, /industries, /integrations, /platform\n * with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n * Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n * watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n * right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n * the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n * prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n * the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n * slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n * Painted with the theme's background so it cleanly overlaps the image's\n * lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n tag: 'af-hero',\n styleUrl: 'af-hero.css',\n shadow: false,\n scoped: true,\n})\nexport class AfHero {\n @Element() el!: HTMLElement;\n\n /** Layout / theme preset. See variant docs in the component header. */\n @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n /** Heading text (use the default slot for richer markup). */\n @Prop() heading: string = '';\n\n /** Description text (use the `description` slot for richer markup). */\n @Prop() description: string = '';\n\n /**\n * Float the site header over the hero and paint the navbar-spacer\n * transparent so the hero background flows to the top of the viewport.\n * Defaults to true for the three inkwell variants, false for the\n * soft-clay / mist-green illustration variants (whose consumers don't\n * always want a full-bleed crown).\n */\n @Prop({ reflect: true }) floatNavbar?: boolean;\n\n /**\n * Top padding preset. `default` = 124px (matches IndustryHero /\n * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n * image a touch more breathing room above the lockup on archive pages).\n */\n @Prop() topPad: HeroTopPad = 'default';\n\n /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n @Prop() maxWidth: number = 620;\n\n /**\n * Whether to apply the blob mask to the slotted `image`. Defaults to\n * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n * pre-masked raster or a custom wrapper.\n */\n @Prop() maskImage: boolean = true;\n\n private get resolvedFloatNavbar(): boolean {\n if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n return (\n this.variant === 'inkwell-photo' ||\n this.variant === 'inkwell-illustration' ||\n this.variant === 'inkwell-centered'\n );\n }\n\n private get theme() {\n return VARIANT_THEMES[this.variant];\n }\n\n connectedCallback() {\n if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n document.body.setAttribute('data-af-hero-float-navbar', 'true');\n }\n }\n\n disconnectedCallback() {\n if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n document.body.removeAttribute('data-af-hero-float-navbar');\n }\n }\n\n private renderCopy() {\n const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n return (\n <div class=\"hero__copy\">\n <div class=\"hero__badge\">\n <slot name=\"badge\"></slot>\n </div>\n <af-typography-lockup\n heading-size=\"1\"\n text-alignment={alignment}\n max-width={String(this.maxWidth)}\n >\n {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n {this.description ? (\n <span slot=\"description\">{this.description}</span>\n ) : (\n <slot name=\"description\" slot=\"description\"></slot>\n )}\n </af-typography-lockup>\n <div class=\"hero__buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n );\n }\n\n private renderPhoto() {\n return (\n <div\n class={{\n hero__image: true,\n 'hero__image--masked': this.maskImage,\n }}\n >\n <slot name=\"image\"></slot>\n </div>\n );\n }\n\n private renderIllustration() {\n return (\n <div class=\"hero__illustration\">\n <slot name=\"illustration\"></slot>\n </div>\n );\n }\n\n render() {\n const v = this.variant;\n const centered = v === 'inkwell-centered';\n const hasImage = v === 'inkwell-photo';\n const hasIllustration =\n v === 'inkwell-illustration' ||\n v === 'soft-clay-illustration' ||\n v === 'mist-green-illustration';\n\n return (\n <Host\n class={{\n [`hero--${v}`]: true,\n [`hero--pad-${this.topPad}`]: true,\n [`hero--theme-${this.theme}`]: true,\n 'hero--float-navbar': this.resolvedFloatNavbar,\n }}\n >\n <af-section\n theme={this.theme}\n padding=\"none\"\n container={false}\n class=\"hero__section\"\n >\n {centered && (\n <div class=\"hero__paperclip\" aria-hidden=\"true\">\n <slot name=\"paperclip\"></slot>\n </div>\n )}\n <af-container class=\"hero__inner\">\n {centered ? (\n this.renderCopy()\n ) : (\n <div class=\"hero__grid\">\n {this.renderCopy()}\n {hasImage && this.renderPhoto()}\n {hasIllustration && this.renderIllustration()}\n </div>\n )}\n </af-container>\n <div class=\"hero__logos\">\n <slot name=\"logos-below\"></slot>\n </div>\n </af-section>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-icon-box/af-icon-box.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class AfIconBox {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (h(Host, { key: 'e270fbfc75794a1bc2fce141cde5e6295d13c80c' }, h("div", { key: '3533c3e5afe2aaf1ee0227ffe9d37323b954753f', class: containerClasses }, h("af-icon", { key: 'e692e0110fb1233ced5d29f7b8f612c0ab89e058', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: '59cf379ff62d3a5ed7fd7398f240976a023d1f8a' }, h("div", { key: '9fc4e502df8da3cf2112702cd2216a8c7a03a21f', class: containerClasses }, h("af-icon", { key: '8bc89de5589f531829a8377862c7b1bda4c7ce60', name: this.icon, size: iconSize }))));
     }
     static get is() { return "af-icon-box"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-icon-text/af-icon-text.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class AfIconText {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (h(Host, { key: '5ee5ddd91804507b0e4029adeee9eebb687448d9' }, h("div", { key: '5c00e4451c12aeaf924c2d9dff3ad85cb5555813', class: containerClasses }, h("af-icon-box", { key: 'd375fa1087651f86fd778744c276bd92e387b297', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '2be428ff1b3210972248ef741086d96eb6829cb9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '0da48d34ee2d1ab77c2aac80daffdbce4b2774b1' }), h("span", { key: '140db3a089b16211db54b67b786a90795dbe3d8a', slot: "description" }, h("slot", { key: '37d6b87dc348b95c5178e9a04e902f04664a0feb', name: "description" })), h("span", { key: '10031a47ef045d9ad95cb1bb90289fa1d599bc35', slot: "buttons" }, h("slot", { key: 'decf43947df87a58f42d10ba5025e9c6e1149ca2', name: "buttons" }))))));
+        return (h(Host, { key: '439c52c428eb8bdd4a1d89143a3e1f3b1f1ae272' }, h("div", { key: 'ff0edf1e55f225abc3a31e928d08388cae6209e2', class: containerClasses }, h("af-icon-box", { key: '8a88ed7babd257ce508c90139b3d431b80aa9d32', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'b1d4722558f9f27daccfeb7e5efe954f0af3ece0', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '02ab65533f8d40c24b46082271b06c7acac914db' }), h("span", { key: '3d0556c8b0f5b3d262c44efcb271541d74f46535', slot: "description" }, h("slot", { key: '155f5bfba6ac9a9e58ba3b4bec1d736b995c327d', name: "description" })), h("span", { key: '8fb65696a03bed3776953fc1b51c077b12030837', slot: "buttons" }, h("slot", { key: 'bc30a8813ec47e8a265282f841e30bbabfe1f06f', name: "buttons" }))))));
     }
     static get is() { return "af-icon-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-illustrated-card/af-illustrated-card.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class AfIllustratedCard {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (h(Host, { key: 'afe7b84219cbe07a6949825042295def34dafe5e' }, h("div", { key: '9b5697ca0732d5bc5ac8170869bf04db5c3e9b07', class: wrapperClasses }, h("af-card", { key: '0de8d7d93eb225298664e9edcd7efec821c341c6', theme: this.theme }, h("div", { key: '4a691832606f011d996f005c533f423acc960ea2', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '59d8417922cffd552df7610b72b4f2ec6c222105', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: 'ee18abb24d0637f3bea71b48ccafdd3c6df0ea45' }), h("span", { key: 'be0bebfef478da4491ba1137ba1975052f4dcb5c', slot: "description" }, h("slot", { key: 'b05c91bd5d5085f74d94fabd22d8b79a2b008719', name: "body" })), h("span", { key: '79c1f836418dd6d2d2c96a1ea680bf05ade2b0d8', slot: "buttons" }, h("slot", { key: '03a5aff63f8225bf2323abe44e8e830562cf0c6c', name: "buttons" })))), h("div", { key: '1c75154af4e7cc89eceda3f16a958ca720f17450', class: "illustrated-card__illustration-area" }, h("slot", { key: '46071088a5aad6cbf64635a3961aa78e1f7b3fee', name: "illustration" }))))));
+        return (h(Host, { key: 'ef2bef2685ff1c476d6cdffcac8dba7d8bb0f9e9' }, h("div", { key: '7a9fab8ac214d2715b2f96186e4cbb2978b53137', class: wrapperClasses }, h("af-card", { key: '9967cb01f648bb29b33743d50f733c21883ae6fd', theme: this.theme }, h("div", { key: 'eb791121145c80101fdb5109636a990de735074f', class: "illustrated-card__content" }, h("af-typography-lockup", { key: 'f5f39cc0cfa368df8cd8f44b4f259af6dcf25fdb', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: '0ed9b6ef9c8af21b239d505bd4a55f19d6aff418' }), h("span", { key: '1e7af14cfbd40cedf7c4cacc67d0232560ca6a18', slot: "description" }, h("slot", { key: '1a63ad36fd61d5140201c0d62a37e36dad5470a3', name: "body" })), h("span", { key: '9fe3673d3aee02dae3f2d541a332a68e37794427', slot: "buttons" }, h("slot", { key: '932d6a3ca09ef215818dfca3353ceca2764b3ac2', name: "buttons" })))), h("div", { key: 'ceb3132f1986c70766e897aad8c71b155eb3d84e', class: "illustrated-card__illustration-area" }, h("slot", { key: '1b2456a9b4a87823832555b0836381336e44ee83', name: "illustration" }))))));
     }
     static get is() { return "af-illustrated-card"; }
     static get encapsulation() { return "scoped"; }
@@ -54,9 +54,15 @@ export class AfIllustratedCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay'",
+                    "original": "Theme",
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\" | undefined",
-                    "references": {}
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/af-illustrated-card/af-illustrated-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAEzD~~;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,~~GAAsE~~,YAAY,CAAC;~~QAEhG~~;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAwCnD;IAtCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU;4BAEvB,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/*\n Illustrated Card molecule component that combines a card with an illustration.\n \n Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n \n Uses af-card atom internally and af-typography-lockup for text hierarchy.\n \n @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n /\n@Component({\n tag: 'af-illustrated-card',\n styleUrl: 'af-illustrated-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIllustratedCard {\n /\n Theme variant - sets background color and provides theme context.\n * Defaults to 'mist-green'.\n /\n @Prop() theme?: ~~'white'~~ ~~\| 'white-ivory' \| 'inkwell' \| 'mist-green' \| 'soft-clay'~~ = 'mist-green';\n\n /\n Responsive breakpoint for typography sizing.\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Card size variant (applies to desktop only).\n /\n @Prop() cardSize: 'default' \| 'large' = 'default';\n\n render() {\n const wrapperClasses = {\n 'illustrated-card': true,\n [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n [`illustrated-card--size-${this.cardSize}`]: true,\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme}>\n {/ Content area with typography lockup /}\n <div class=\"illustrated-card__content\">\n <af-typography-lockup\n headingSize={3}\n breakpoint={this.breakpoint}\n textAlignment=\"left\"\n buttonLayout=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n <span slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Illustration area at bottom */}\n <div class=\"illustrated-card__illustration-area\">\n <slot name=\"illustration\"></slot>\n </div>\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAW,YAAY,CAAC;QAErC;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAwCnD;IAtCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU;4BAEvB,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/*\n Illustrated Card molecule component that combines a card with an illustration.\n \n Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n \n Uses af-card atom internally and af-typography-lockup for text hierarchy.\n \n @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n /\n@Component({\n tag: 'af-illustrated-card',\n styleUrl: 'af-illustrated-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIllustratedCard {\n /\n Theme variant - sets background color and provides theme context.\n * Defaults to 'mist-green'.\n /\n @Prop() theme?: Theme = 'mist-green';\n\n /\n Responsive breakpoint for typography sizing.\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Card size variant (applies to desktop only).\n /\n @Prop() cardSize: 'default' \| 'large' = 'default';\n\n render() {\n const wrapperClasses = {\n 'illustrated-card': true,\n [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n [`illustrated-card--size-${this.cardSize}`]: true,\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme}>\n {/ Content area with typography lockup /}\n <div class=\"illustrated-card__content\">\n <af-typography-lockup\n headingSize={3}\n breakpoint={this.breakpoint}\n textAlignment=\"left\"\n buttonLayout=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n <span slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Illustration area at bottom */}\n <div class=\"illustrated-card__illustration-area\">\n <slot name=\"illustration\"></slot>\n </div>\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-image/af-image.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class AfImage {
         this.shape = 'rounded';
     }
     render() {
-        return (h(Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
     }
     static get is() { return "af-image"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js CHANGED Viewed

@@ -66,7 +66,7 @@ export class AfInPageBanner {
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '6bea21791ecb2e68e63a757f5ecfdaa1f07b728d' }, h("div", { key: '2c5afc83dcdc9917ae0542d81c1de02abfdd90a6', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '8c646d4ea9d08a3a1c1bed729d09503cd7257ece', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '77afe16ba80d1568869ab4a24dc75a65c49dab90', class: "banner__content" }, h("div", { key: 'dce08d53d206a7ccd358da11d337330dcf269d52', class: "banner__copy" }, h("h2", { key: '626df9e5fcbb345ff1f477191203343db10f2e52', class: "banner__heading" }, h("slot", { key: '5e6daf16162dffb58d9e4c61e91d226ba5fc35e7', name: "heading" }, this.heading)), h("div", { key: 'ef9dab42d2a03f3d7fdf0b8a4aed1bac5f104795', class: "banner__description" }, h("slot", { key: '3a4b3c7c474f00375c6ac49653713dec61f2a6f5', name: "description" }, this.description))), h("div", { key: 'af2f8c614c803b272fcac1ae83cbc3f3de908a4d', class: "banner__buttons" }, h("slot", { key: 'b047769e0807ad1915e28b174ef6122969ab52c6', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: '46d8a79deb045a8ba2baf1625583f181af576157', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'dde5d455151eac0b5abd2c45e920a1c45155145d', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }
@@ -86,12 +86,13 @@ export class AfInPageBanner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BannerTheme",
-                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white-ivory\"",
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
                     "references": {
-                        "BannerTheme": {
-                            "location": "global",
-                            "id": "global::BannerTheme"
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
                         }
                     }
                 },

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAIzD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,~~GAAgB~~,YAAY,CAAC;~~QAE1C~~,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KA4E5C;IA1EC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACvB,2DAAI,KAAK,EAAC,iBAAiB;4BACzB,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC;wBACL,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF;oBAEN,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,SAAS;4BACjB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,IACtD,IAAI,CAAC,iBAAiB,CACb,CACb;4BACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,IAC1D,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\~~n\ntype~~ ~~BannerTheme~~ = ~~'white-ivory'~~ \| ~~'mist-green'~~ \| '~~soft-clay~~' ~~\| 'inkwell'~~;\n\n/*\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n \n Slot-based composition (preferred for rich content):\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n \n The string props remain supported for simple cases.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: ~~BannerTheme~~ = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAU,YAAY,CAAC;QAEpC,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KA4E5C;IA1EC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACvB,2DAAI,KAAK,EAAC,iBAAiB;4BACzB,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC;wBACL,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF;oBAEN,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,SAAS;4BACjB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,IACtD,IAAI,CAAC,iBAAiB,CACb,CACb;4BACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,IAC1D,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/*\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n \n Slot-based composition (preferred for rich content):\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n \n The string props remain supported for simple cases.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: Theme = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-inline/af-inline.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class AfInline {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
+        return (h(Host, { key: '05c8a9c14341060f3e5f24397770740b09fee85c', style: style }, h("slot", { key: '871efa9e4e74690534375283878c8b0732f4859d' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +73,9 @@ export class AfInline {
                     "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\"",
                     "references": {
                         "Gap": {
-                            "location": "global",
-                            "id": "global::Gap"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Gap"
                         }
                     }
                 },

package/dist/collection/components/af-inline/af-inline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-inline.js","sourceRoot":"","sources":["../../../src/components/af-inline/af-inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,QAAQ,CAAC;QAEhC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,IAAI,CAAC;KAmC9B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\~~n\ntype~~ ~~Gap~~ = ~~'1'~~ \| ~~'2'~~ \| '3' ~~\| '4' \| '5' \| '6' \| '8'~~;\ntype Align = 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline';\ntype Justify = 'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly';\n\n/*\n Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.\n * Ideal for button groups, tags, pills, and other inline elements.\n \n @slot - Content to layout inline\n /\n@Component({\n tag: 'af-inline',\n styleUrl: 'af-inline.css',\n shadow: true,\n})\nexport class AfInline {\n /\n Gap between items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n /\n @Prop() gap: Gap = '2';\n\n /\n Align items on the cross axis.\n /\n @Prop() align: Align = 'center';\n\n /\n Justify content on the main axis.\n /\n @Prop() justify: Justify = 'start';\n\n /\n Whether items should wrap to the next line when they overflow.\n */\n @Prop() wrap: boolean = true;\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n\n const justifyMap: Record<Justify, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n around: 'space-around',\n evenly: 'space-evenly',\n };\n\n const style = {\n display: 'inline-flex',\n flexDirection: 'row',\n gap: `var(--space-${this.gap})`,\n alignItems: alignMap[this.align],\n justifyContent: justifyMap[this.justify],\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n } as Record<string, string>;\n\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"]}
1	+ {"version":3,"file":"af-inline.js","sourceRoot":"","sources":["../../../src/components/af-inline/af-inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,QAAQ,CAAC;QAEhC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,IAAI,CAAC;KAmC9B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Align = 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline';\ntype Justify = 'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly';\n\n/*\n Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.\n * Ideal for button groups, tags, pills, and other inline elements.\n \n @slot - Content to layout inline\n /\n@Component({\n tag: 'af-inline',\n styleUrl: 'af-inline.css',\n shadow: true,\n})\nexport class AfInline {\n /\n Gap between items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n /\n @Prop() gap: Gap = '2';\n\n /\n Align items on the cross axis.\n /\n @Prop() align: Align = 'center';\n\n /\n Justify content on the main axis.\n /\n @Prop() justify: Justify = 'start';\n\n /\n Whether items should wrap to the next line when they overflow.\n */\n @Prop() wrap: boolean = true;\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n\n const justifyMap: Record<Justify, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n around: 'space-around',\n evenly: 'space-evenly',\n };\n\n const style = {\n display: 'inline-flex',\n flexDirection: 'row',\n gap: `var(--space-${this.gap})`,\n alignItems: alignMap[this.align],\n justifyContent: justifyMap[this.justify],\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n } as Record<string, string>;\n\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-logo-well/af-logo-well.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
+        return (h(Host, { key: 'b3abd933476da0e33ab6fcc4cd2f638fd8d3d69e' }, h("div", { key: '16d17b912cb38663ae6d2f71109a99cc5cb9ab08', class: "logo-well" }, h("slot", { key: '801820bb88b3af3ebb1f9514b2a8f1297b6d033c' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-nav-accordion/af-nav-accordion.js CHANGED Viewed

@@ -71,7 +71,7 @@ export class AfNavAccordion {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+        return (h(Host, { key: 'a0c6718b375af88cefb975e997d70a228d1fb9aa', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '63b1716e6b40f7d73c9609a030b03af55a5db714', class: "nav-accordion" }, h("slot", { key: '48bb056a8e8cf39a47b20b8c54abbc7266f75765' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.js CHANGED Viewed

@@ -84,11 +84,11 @@ export class AfNavAccordionItem {
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+        return (h(Host, { key: '514c8d8a02712f76eb9de767f6ab5c171f7cba8a', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+            } }, h("div", { key: 'c8e9e4d3cea27fe1ecdcb629f1525c1e3fb8c02a', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4da5b93689a0dac535dca6233b3c9d2218d333c1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '103be83255e80feef963f95566cb22c0ab4bb338', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2f48b5257f7fdcaf30635dc178ff452cd4a176a0' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }