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-typography-lockup/af-typography-lockup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' \| 'center' \| 'right' \| 'justify';\n\n/*\n Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n \n Semantic vs visual: `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5\|card}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n \n headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n * headingSize=\"card\" ↔ <h3> (card-title scale: 22/20px)\n \n When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n \n The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)\n * and targets card titles in dense grids (diff-card h3, NumberedStepper\n * title, expert-insights related-card h3 on the marketing site). It sits\n * between `4` and `5` in the type ladder.\n /\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /\n The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock). The `card` variant sits\n * between 4 and 5 at 22/20px and is meant for card titles.\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 \| 'card' = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n /\n @Prop() textAlignment: TextAlign = 'left';\n\n /\n Heading text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() headingAlignment?: TextAlign;\n\n /\n Description text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() descriptionAlignment?: TextAlign;\n\n /\n Button layout direction (horizontal or vertical stacking)\n /\n @Prop() buttonLayout: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Buttons position alignment. Falls back to textAlignment if not specified.\n /\n @Prop() buttonsAlignment?: TextAlign;\n\n /\n Maximum width for the copy section (in pixels)\n /\n @Prop() maxWidth?: number;\n\n /\n Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() headingColor: 'primary' \| 'secondary' = 'primary';\n\n /\n Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() descriptionColor: 'default' \| 'secondary' = 'default';\n\n /\n Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n // The `card` variant is a named scale (card-title), not a semantic level.\n // Skip the numeric-proximity check entirely — convention is <h3>, but\n // consumers may legitimately pair it with <h2>-<h4> depending on context.\n if (expected === 'card') return;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Host } from '@stencil/core';\nimport type { HeadingSize } from '../../types';\n\ntype TextAlign = 'left' \| 'center' \| 'right' \| 'justify';\n\n/*\n Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n \n Semantic vs visual: `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5\|card}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n \n headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n * headingSize=\"card\" ↔ <h3> (card-title scale: 22/20px)\n \n When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n \n The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)\n * and targets card titles in dense grids (diff-card h3, NumberedStepper\n * title, expert-insights related-card h3 on the marketing site). It sits\n * between `4` and `5` in the type ladder.\n /\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /\n The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock). The `card` variant sits\n * between 4 and 5 at 22/20px and is meant for card titles.\n /\n @Prop() headingSize: HeadingSize = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n /\n @Prop() textAlignment: TextAlign = 'left';\n\n /\n Heading text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() headingAlignment?: TextAlign;\n\n /\n Description text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() descriptionAlignment?: TextAlign;\n\n /\n Button layout direction (horizontal or vertical stacking)\n /\n @Prop() buttonLayout: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Buttons position alignment. Falls back to textAlignment if not specified.\n /\n @Prop() buttonsAlignment?: TextAlign;\n\n /\n Maximum width for the copy section (in pixels)\n /\n @Prop() maxWidth?: number;\n\n /\n Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() headingColor: 'primary' \| 'secondary' = 'primary';\n\n /\n Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() descriptionColor: 'default' \| 'secondary' = 'default';\n\n /\n Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n // The `card` variant is a named scale (card-title), not a semantic level.\n // Skip the numeric-proximity check entirely — convention is <h3>, but\n // consumers may legitimately pair it with <h2>-<h4> depending on context.\n if (expected === 'card') return;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-video-container/af-video-container.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class AfVideoContainer {
          * Handles play button click - emits event and optionally opens URL
          */
         this.handlePlayClick = () => {
-            const event = this.playClick.emit({ videoUrl: this.videoUrl });
+            const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });
             // Only open URL if event wasn't prevented and URL exists
             if (!event.defaultPrevented && this.videoUrl) {
                 window.open(this.videoUrl, '_blank');
@@ -42,7 +42,7 @@ export class AfVideoContainer {
         };
     }
     render() {
-        return (h(Host, { key: 'f05355faddc6ea71285398ae46a648b11d919969' }, h("div", { key: '98bb4043023aefe2a9a75d60ff8c3d3349464c39', class: "video-container" }, h("div", { key: 'e72cf9ebebc3fa965bc676b14eed7272d6216c0e', class: "video-container__top" }, h("slot", { key: '638a975a8b805e802ea4a6badcff49b35001da5c', name: "top" })), h("div", { key: '7cbbf984f3680bd6a120a1d5e74bef034334a8bb', class: "video-container__video" }, h("af-aspect-ratio", { key: '76e845c0c959584fa0cd41ac88f33028591c63f6', ratio: "16:9" }, h("div", { key: '796aba9a4180d9ed69e821159a981a1043e0ac8c', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: '0762654f68c216ad26152279174a2b124e5d5150', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'e39fe70e65f54a1075d77ea5d4314e88e69febe6', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '44ef1e1d5ef606e8cf3cb2adb1ee2845da85d910', name: "play", size: 24 }))))), h("div", { key: '861da1a01d91cefad8bd379f75113cfc978be76b', class: "video-container__bottom" }, h("slot", { key: 'ba43d1a4104a69048b5e38965f613734231e9dcb', name: "bottom" })))));
+        return (h(Host, { key: '6554d80d7b00b2e7c2ebed35d10fe48b2e55af21' }, h("div", { key: '7acffa76ffb032446270850359deb315af18dd43', class: "video-container" }, h("div", { key: 'd79361dc04ce97b953754a63b76805be4391b593', class: "video-container__top" }, h("slot", { key: 'c5b1f43ecfb23cc39cc83dba5711a70eb909edef', name: "top" })), h("div", { key: 'd2159295b5950d500f06389ce2d394c7e7c902db', class: "video-container__video" }, h("af-aspect-ratio", { key: 'fb17e071a5003a62f6fd8037a5d73d5f195eee14', ratio: "16:9" }, h("div", { key: 'c1aaedd7603b9a024f8bbe1ac280597e662b5c07', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'a55c605d6e07c569cdcbd3ecd1239e3d6ba63bc3', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'd04a4b4b5313327e5d81e75219ae9bc0d3866c33', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '52bc748aacd58d1acc1f22e2acfb07eb71447cdc', name: "play", size: 24 }))))), h("div", { key: '8f423ee569de7c7749f675d7815a50b4d491252e', class: "video-container__bottom" }, h("slot", { key: 'd645d52209cb8537a7286b161c257ebd011cc061', name: "bottom" })))));
     }
     static get is() { return "af-video-container"; }
     static get encapsulation() { return "scoped"; }
@@ -122,8 +122,8 @@ export class AfVideoContainer {
     }
     static get events() {
         return [{
-                "method": "playClick",
-                "name": "playClick",
+                "method": "afPlayClick",
+                "name": "afPlayClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-video-container.js","sourceRoot":"","sources":["../../../src/components/af-video-container/af-video-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACxB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,uCAAuC;QAC/B,aAAQ,GAAW,iBAAiB,CAAC;QAE7C,8CAA8C;QACtC,aAAQ,GAAW,EAAE,CAAC;QAS9B;;WAEG;QACK,oBAAe,GAAG,GAAG,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,~~SAAS~~,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;~~YAE/D~~,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBAGN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,wEAAiB,KAAK,EAAC,MAAM;wBAC3B,4DAAK,KAAK,EAAC,oCAAoC;4BAC5C,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,GACd,CACH;4BAED,+DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,YAAY,EACvB,IAAI,EAAC,QAAQ;gCAEb,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAY,CAClC,CACL,CACU,CACd;gBAGN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n/*\n Video Container molecule component for showcasing video content.\n * \n * Uses slots for typography lockups above and below the video.\n * When used inside af-split-section, the top slot inherits the top theme\n * and the bottom slot inherits the bottom theme for correct colors.\n * \n * @example\n * ```html\n * <af-split-section top-theme=\"mist-green\" bottom-theme=\"white\">\n * <af-video-container video-thumbnail-url=\"/path/to/thumbnail.jpg\">\n * <af-typography-lockup slot=\"top\" text-alignment=\"center\" heading-size=\"2\">\n * <af-heading level=\"2\">Watch our product demo</af-heading>\n * <af-text slot=\"description\">See how Affinda transforms your workflow</af-text>\n * <af-button slot=\"buttons\" variant=\"primary\">Get Started</af-button>\n * </af-typography-lockup>\n * </af-video-container>\n * </af-split-section>\n * ```\n * \n * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.\n * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.\n /\n@Component({\n tag: 'af-video-container',\n styleUrl: 'af-video-container.css',\n shadow: false,\n scoped: true,\n})\nexport class AfVideoContainer {\n /* Video thumbnail image URL /\n @Prop() videoThumbnailUrl: string = '';\n\n /* Video alt text for accessibility /\n @Prop() videoAlt: string = 'Video thumbnail';\n\n /* Optional video URL for play button link /\n @Prop() videoUrl: string = '';\n\n /* \n * Emitted when the play button is clicked.\n * Use this to handle video playback (e.g., open modal, embed player).\n * If videoUrl is set and no handler prevents default, opens URL in new tab.\n /\n @Event() ~~playClick~~!: EventEmitter<{ videoUrl: string }>;\n\n /\n Handles play button click - emits event and optionally opens URL\n /\n private handlePlayClick = () => {\n const event = this.~~playClick~~.emit({ videoUrl: this.videoUrl });\n \n // Only open URL if event wasn't prevented and URL exists\n if (!event.defaultPrevented && this.videoUrl) {\n window.open(this.videoUrl, '_blank');\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"video-container\">\n {/ Top slot - for typography lockup above video (inherits top theme) /}\n <div class=\"video-container__top\">\n <slot name=\"top\"></slot>\n </div>\n\n {/ Video thumbnail section /}\n <div class=\"video-container__video\">\n <af-aspect-ratio ratio=\"16:9\">\n <div class=\"video-container__thumbnail-wrapper\">\n {this.videoThumbnailUrl && (\n <img \n src={this.videoThumbnailUrl} \n alt={this.videoAlt}\n class=\"video-container__thumbnail\"\n loading=\"lazy\"\n />\n )}\n {/ Play button overlay /}\n <button \n class=\"video-container__play-button\"\n onClick={this.handlePlayClick}\n aria-label=\"Play video\"\n type=\"button\"\n >\n <af-icon name=\"play\" size={24}></af-icon>\n </button>\n </div>\n </af-aspect-ratio>\n </div>\n\n {/ Bottom slot - for typography lockup below video (inherits bottom theme) */}\n <div class=\"video-container__bottom\">\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}
1	+ {"version":3,"file":"af-video-container.js","sourceRoot":"","sources":["../../../src/components/af-video-container/af-video-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACxB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,uCAAuC;QAC/B,aAAQ,GAAW,iBAAiB,CAAC;QAE7C,8CAA8C;QACtC,aAAQ,GAAW,EAAE,CAAC;QAS9B;;WAEG;QACK,oBAAe,GAAG,GAAG,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAEjE,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBAGN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,wEAAiB,KAAK,EAAC,MAAM;wBAC3B,4DAAK,KAAK,EAAC,oCAAoC;4BAC5C,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,GACd,CACH;4BAED,+DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,YAAY,EACvB,IAAI,EAAC,QAAQ;gCAEb,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAY,CAClC,CACL,CACU,CACd;gBAGN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n/*\n Video Container molecule component for showcasing video content.\n * \n * Uses slots for typography lockups above and below the video.\n * When used inside af-split-section, the top slot inherits the top theme\n * and the bottom slot inherits the bottom theme for correct colors.\n * \n * @example\n * ```html\n * <af-split-section top-theme=\"mist-green\" bottom-theme=\"white\">\n * <af-video-container video-thumbnail-url=\"/path/to/thumbnail.jpg\">\n * <af-typography-lockup slot=\"top\" text-alignment=\"center\" heading-size=\"2\">\n * <af-heading level=\"2\">Watch our product demo</af-heading>\n * <af-text slot=\"description\">See how Affinda transforms your workflow</af-text>\n * <af-button slot=\"buttons\" variant=\"primary\">Get Started</af-button>\n * </af-typography-lockup>\n * </af-video-container>\n * </af-split-section>\n * ```\n * \n * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.\n * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.\n /\n@Component({\n tag: 'af-video-container',\n styleUrl: 'af-video-container.css',\n shadow: false,\n scoped: true,\n})\nexport class AfVideoContainer {\n /* Video thumbnail image URL /\n @Prop() videoThumbnailUrl: string = '';\n\n /* Video alt text for accessibility /\n @Prop() videoAlt: string = 'Video thumbnail';\n\n /* Optional video URL for play button link /\n @Prop() videoUrl: string = '';\n\n /* \n * Emitted when the play button is clicked.\n * Use this to handle video playback (e.g., open modal, embed player).\n * If videoUrl is set and no handler prevents default, opens URL in new tab.\n /\n @Event() afPlayClick!: EventEmitter<{ videoUrl: string }>;\n\n /\n Handles play button click - emits event and optionally opens URL\n /\n private handlePlayClick = () => {\n const event = this.afPlayClick.emit({ videoUrl: this.videoUrl });\n \n // Only open URL if event wasn't prevented and URL exists\n if (!event.defaultPrevented && this.videoUrl) {\n window.open(this.videoUrl, '_blank');\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"video-container\">\n {/ Top slot - for typography lockup above video (inherits top theme) /}\n <div class=\"video-container__top\">\n <slot name=\"top\"></slot>\n </div>\n\n {/ Video thumbnail section /}\n <div class=\"video-container__video\">\n <af-aspect-ratio ratio=\"16:9\">\n <div class=\"video-container__thumbnail-wrapper\">\n {this.videoThumbnailUrl && (\n <img \n src={this.videoThumbnailUrl} \n alt={this.videoAlt}\n class=\"video-container__thumbnail\"\n loading=\"lazy\"\n />\n )}\n {/ Play button overlay /}\n <button \n class=\"video-container__play-button\"\n onClick={this.handlePlayClick}\n aria-label=\"Play video\"\n type=\"button\"\n >\n <af-icon name=\"play\" size={24}></af-icon>\n </button>\n </div>\n </af-aspect-ratio>\n </div>\n\n {/ Bottom slot - for typography lockup below video (inherits bottom theme) */}\n <div class=\"video-container__bottom\">\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-visually-hidden/af-visually-hidden.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class AfVisuallyHidden {
         this.focusable = false;
     }
     render() {
-        return (h(Host, { key: 'f687eddee200aa53700847e5bf237656db0d33df', class: { 'focusable': this.focusable } }, h("slot", { key: '96e16af57c3b73cc0a338325b9baec14ae4cce1b' })));
+        return (h(Host, { key: '7d0224d1f120153733e77b38281f8f9ebe9841b8', class: { 'focusable': this.focusable } }, h("slot", { key: '3a355db9347be885ba5c1b1bf1aa89ec4c4c1e06' })));
     }
     static get is() { return "af-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components.js CHANGED Viewed

@@ -21,4 +21,5 @@ export { AfTab } from './components/af-tab/af-tab';
 export { AfTabBar } from './components/af-tab-bar/af-tab-bar';
 export { AfFeatureCard } from './components/af-feature-card/af-feature-card';
 export { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';
+export { AfHero } from './components/af-hero/af-hero';
 //# sourceMappingURL=components.js.map

package/dist/collection/components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\nexport { AfCheckbox } from './components/af-checkbox/af-checkbox';\nexport { AfRadio } from './components/af-radio/af-radio';\nexport { AfSwitch } from './components/af-switch/af-switch';\nexport { AfFieldset } from './components/af-fieldset/af-fieldset';\nexport { AfInput } from './components/af-input/af-input';\nexport { AfTextarea } from './components/af-textarea/af-textarea';\nexport { AfTag } from './components/af-tag/af-tag';\nexport { AfTab } from './components/af-tab/af-tab';\nexport { AfTabBar } from './components/af-tab-bar/af-tab-bar';\nexport { AfFeatureCard } from './components/af-feature-card/af-feature-card';\nexport { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';\n"]}
1	+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\nexport { AfCheckbox } from './components/af-checkbox/af-checkbox';\nexport { AfRadio } from './components/af-radio/af-radio';\nexport { AfSwitch } from './components/af-switch/af-switch';\nexport { AfFieldset } from './components/af-fieldset/af-fieldset';\nexport { AfInput } from './components/af-input/af-input';\nexport { AfTextarea } from './components/af-textarea/af-textarea';\nexport { AfTag } from './components/af-tag/af-tag';\nexport { AfTab } from './components/af-tab/af-tab';\nexport { AfTabBar } from './components/af-tab-bar/af-tab-bar';\nexport { AfFeatureCard } from './components/af-feature-card/af-feature-card';\nexport { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';\nexport { AfHero } from './components/af-hero/af-hero';\nexport type { HeroVariant, HeroTopPad } from './components/af-hero/af-hero';\n"]}

package/dist/collection/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=types.js.map

package/dist/collection/types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG","sourcesContent":["/**\n * Shared prop-union types used across multiple @affinda/wc components.\n *\n * Before adding a new union here: check whether the value list is truly\n * shared across components, or whether it's specific to one. Component-\n * local unions (e.g. a 2-value `direction` prop) should stay local; only\n * lift types here when they're duplicated verbatim in 2+ places, or when\n * a semantic concept (theme, spacing scale) deserves a single source of\n * truth.\n */\n\n/**\n * Brand theme token. Drives background colour and theme-dependent child\n * styling (typography colour, button tokens, etc.) via a `theme-{name}`\n * class on the rendered wrapper.\n *\n * Canonical values: `'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'`.\n *\n * Consumers: af-section, af-theme-override, af-feature-card,\n * af-illustrated-card, af-card, af-client-carousel, af-navbar,\n * af-in-page-banner, af-split-section.\n */\nexport type Theme =\n | 'white'\n | 'inkwell'\n | 'mist-green'\n | 'soft-clay'\n | 'white-ivory';\n\n/**\n * Gap spacing token. Maps to `--space-{n}` CSS custom properties (space\n * scale: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px).\n *\n * Canonical values: `'1' | '2' | '3' | '4' | '5' | '6' | '8'`.\n *\n * Consumers: af-stack, af-grid, af-inline, af-divider (as part of its\n * `spacing` prop). Note: af-button-group uses `gap: string` (free-form\n * CSS length) and intentionally opts out of the token ladder.\n */\nexport type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Section padding variant. Drives top/bottom padding via `padding-{name}`\n * classes on the rendered wrapper.\n *\n * Canonical values: `'none' | 'tight' | 'default' | 'loose'`.\n *\n * Consumers: af-section, af-split-section.\n */\nexport type Padding = 'none' | 'tight' | 'default' | 'loose';\n\n/**\n * Typography heading size. Controls ONLY the visual scale of a heading\n * lockup; the semantic level (h1-h6) is determined by the slotted tag\n * the consumer passes in. See af-typography-lockup for the full\n * semantic-vs-visual convention.\n *\n * Canonical values: `1 | 2 | 3 | 4 | 5 | 'card'`.\n *\n * - `1`-`5` map to the type ladder (1 largest, 5 smallest).\n * - `'card'` is a named card-title scale (22/20px) that sits between\n * `4` and `5`, used for card titles in dense grids.\n *\n * Consumers: af-typography-lockup.\n */\nexport type HeadingSize = 1 | 2 | 3 | 4 | 5 | 'card';\n"]}

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

@@ -68,7 +68,7 @@ const AfAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordionItem
         const contentStyle = {
             maxHeight: this.open ? `${this.contentHeight}px` : '0px'
         };
-        return (h(Host, { key: 'f09a5fe4d1ca9e14d674c5cb255c391355fba0b9', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '2e53d4c8599acd81e7a624ac130add7ea7be3c86', class: "accordion-item" }, h("button", { key: 'c3b97ff90a37ac7f582b2ba086db0faa21328dc2', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: '48446eb132a44680630f46c1bd65921a440f688a', class: "trigger-content" }, h("slot", { key: 'a47fdf5a659602a340091544587be928c226a89b', name: "trigger" })), h("div", { key: '1c938183404f982ebcfe3ba0661f57e4ecf2c006', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: '20d3ef9eb98b0cbb2f0af2165cc911fb3ec93bd5', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '7477c118131ce91b79d1c9f74174c9431ee60dca', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '676a89763218ddbd6daddb174a4eebecfffb6a94', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'fb0f8760497cf998daa0f1cd5c52c6349fb125e4', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '300f0b749dbaf06bb44ad9b176f3d9f64c52db6e' }))))));
+        return (h(Host, { key: '62ba3529b8f862d5e9ec88672e9452ce2fc6fcf5', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '4bb13e5c6f26d3bf9fd65fb620fb8161396fb8df', class: "accordion-item" }, h("button", { key: 'c46022e2985db411428da2798e0f225f47031af1', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: 'b89f4babebfae4da95af856adf155308574e56a2', class: "trigger-content" }, h("slot", { key: '20ea8938675a12e2d3c71c341788abb0ceb1d236', name: "trigger" })), h("div", { key: '42414ee23bfba9bf5025a7637630a69cda22d0e3', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: 'ed17cf43c888aba66a1b0e03b69af4ea65ed9c44', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '0f095319bebcea25c313b2237c2c8bb693508efc', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e6fef8f13b9282cc148cfe7d34739a1efefdadee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '745ff6e1e9d56c2fac10fa0c39a744791ad66c92', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '141ff050b84e081e9031d739b1b2015697cadff1' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -90,7 +90,7 @@ const AfAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordion extends
         });
     }
     render() {
-        return (h(Host, { key: 'e0060977dd938771a54e2941a962a58bf18b61dd', class: { [`mode-${this.mode}`]: true } }, h("div", { key: 'dacacd23dc6f116bb8c856161d1a956c0fc7d70d', class: "accordion" }, h("slot", { key: '1dcc400fc416c79f0ac1cf48893de03c46e31741' }))));
+        return (h(Host, { key: '9b0b627ab9e4bc82ae52adb616ee430dd6451bdc', class: { [`mode-${this.mode}`]: true } }, h("div", { key: '9941d4fea3ddfcf8f5d64883347dceda215401ba', class: "accordion" }, h("slot", { key: '00db0154b54e87b3411541c361b5dca4f91e2015' }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { A as AfCard$1, d as defineCustomElement$1 } from './p-CKLkuSI3.js';
+import { A as AfCard$1, d as defineCustomElement$1 } from './p-CJxqw006.js';
 const AfCard = AfCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-center.js CHANGED Viewed

@@ -35,7 +35,7 @@ const AfCenter$1 = /*@__PURE__*/ proxyCustomElement(class AfCenter extends H {
         if (this.minHeight) {
             style.minHeight = this.minHeight;
         }
-        return (h(Host, { key: 'fc1bcaef9b11c0c5f69e9ef95d58adf61b4f244a', style: style }, h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' })));
+        return (h(Host, { key: '0b93a207374e7665f06187ae2f8837f251ea1312', style: style }, h("slot", { key: 'c5d0fb0f3a37effb8e8cd466bd13d86c88958229' })));
     }
     static get style() { return afCenterCss; }
 }, [257, "af-center", {

package/dist/components/af-client-carousel.js CHANGED Viewed

@@ -64,7 +64,7 @@ const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarous
         // Direction classes are left on in static mode too — the `.mode-static`
         // CSS rule overrides `animation` to `none`, so the direction is a no-op
         // visually but keeps the markup shape consistent across modes.
-        return (h(Host, { key: 'a60dab195d08a5afa44c871598584c1175cff4af', class: `theme-${this.theme} mode-${this.mode}` }, h("div", { key: 'dafd6b1501a592ceaa0b9babc27d2437ccfb2c62', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, h("div", { key: 'c318457802deebbc34b289b2d83d0dd50c15cc5c', class: "carousel-container" }, h("div", { key: '878d1a443b488828f54e6915cede096654624435', class: "carousel-row scroll-left" }, h("div", { key: '1e8751fc3ed7429196b6d7e5e9e6fb0255ab277c', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: 'd030308358617334fa318abd95780133d13a0b01', name: "row-1" }, h("slot", { key: '230f591311b0245946dd64c465fe7e9634a9ab99' })))), rows === 2 && (h("div", { key: 'd942aaa3e6994e73f1ad52a2deedc9564f6105fd', class: "carousel-row scroll-right" }, h("div", { key: '96e438271bee8bd840a7645b1634fc0e125617de', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: '90661d285bc8f65b1d1188f66a15edf60503b1a3', name: "row-2" }))))))));
+        return (h(Host, { key: 'ca25bfa9d9ca4bcf2b9326e48c89e7f5fb0599b3', class: `theme-${this.theme} mode-${this.mode}` }, h("div", { key: 'ea36aed6990f569561dce562510f88a9a50b5653', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, h("div", { key: 'a96a00ea379f9908f01845e9d2e515146bc2de1e', class: "carousel-container" }, h("div", { key: '1a5d6c4298b9229ee1ef3c3cf2fd0f358e5bf0e8', class: "carousel-row scroll-left" }, h("div", { key: '825e3e9149cc95c97892bb89becc2ea3eccddde5', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: '6e03784bd1f196374f0b73bb45b54f6dc1db66a2', name: "row-1" }, h("slot", { key: 'ed18d97e06d91a10ed6914cafa488ffc59f385ff' })))), rows === 2 && (h("div", { key: '7143c9333e29ffaaf5b8bcf8d1cf905d60236a7a', class: "carousel-row scroll-right" }, h("div", { key: '8446a3dcf958b370b4cc14a27ec4bd7c0228ded2', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: '2d4de0f0697f22ac4742cebe0e20ed94b218f030', name: "row-2" }))))))));
     }
     get el() { return this; }
     static get style() { return afClientCarouselCss; }

package/dist/components/af-client-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"af-client-carousel.js","mappings":"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","names":["AfClientCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/ Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. /\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/ ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. /\n.client-carousel.mode-static .logo-track {\n animation: none;\n / The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. /\n justify-content: center;\n / Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. /\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n / Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. /\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n / Match the row's no-clip behaviour so wrapped logos stay visible. /\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n / Keep horizontal bleed contained for consistency with scroll mode. /\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. /\n.logo-track > {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n/ ≤ mobile /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay' \| 'white-ivory';\ntype Mode = 'scroll' \| 'static';\n\n/*\n Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n \n This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n \n For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n \n Seamless loop (scroll mode only): the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n /\n Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n \n When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n /\n @Prop() rows: 1 \| 2 = 1;\n\n /\n Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n /\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /\n Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n \n In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement \| undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"af-client-carousel.js","mappings":"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","names":["AfClientCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=scoped","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n/ Respect reduced motion: stop the infinite scroll and hold at a\n * stable frame so logos remain visible instead of being offscreen. /\n@media (prefers-reduced-motion: reduce) {\n .logo-track,\n .scroll-left .logo-track,\n .scroll-right .logo-track {\n animation: none;\n transform: translateX(0);\n }\n}\n\n/ ==========================================================================\n Static Mode\n ==========================================================================\n Non-animated, centred row. Used when the logo set is small enough to\n fit on screen without scrolling (the former website LogoPillRow use\n case). The clone-for-seamless-loop is skipped in TSX, so each logo\n appears exactly once here. /\n.client-carousel.mode-static .logo-track {\n animation: none;\n / The track is what we centre — the .carousel-row is full-width so\n * it can host the overflow cue in scroll mode; in static mode we\n * centre its child track instead of fighting the row's flex default. /\n justify-content: center;\n / Let the track grow only as wide as its content so justify-content\n * on the parent row can actually centre it horizontally. /\n flex-wrap: wrap;\n width: 100%;\n}\n\n.client-carousel.mode-static .carousel-row {\n justify-content: center;\n / Static rows have no scrolling motion to mask, so allow the row to\n * expand content-naturally instead of clipping at viewport edges. /\n overflow: visible;\n}\n\n.client-carousel.mode-static .carousel-container {\n / Match the row's no-clip behaviour so wrapped logos stay visible. /\n overflow: visible;\n}\n\n.client-carousel.mode-static {\n / Keep horizontal bleed contained for consistency with scroll mode. /\n overflow: hidden;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted children (originals projected through the slot) and\n * JS-appended clones as flex rows. In scoped mode Stencil keeps all\n * this in light DOM, so a direct-descendant selector covers both. /\n.logo-track > {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n/ ≤ tablet /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n/ ≤ mobile /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\ntype Mode = 'scroll' \| 'static';\n\n/*\n Full-width row of client logos, either infinite-scrolling (default)\n * or a centred static row.\n \n This is a section-level component that spans full width.\n * Renders one or two rows; single row matches the Webflow reference,\n * two rows is the denser variant. When `mode=\"scroll\"` (default) rows\n * animate in opposite directions; when `mode=\"static\"` rows are centred\n * and the animation is disabled.\n \n For headlines, use a separate TypographyLockup or Heading component\n * above this carousel.\n \n Seamless loop (scroll mode only): the CSS animation translates\n * the track from 0% to -50% (or vice versa), which only looks continuous\n * if the track holds two identical copies of the content end-to-end.\n * Shadow DOM slots can only project content once, so we clone the\n * slotted nodes in `componentDidLoad` and append the copies to the track.\n * Static mode skips the clone — nothing is animating, so duplicating\n * the logos would just render them twice.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n // Scoped (not shadow) so that cloned nodes inherit the consumer's\n // external CSS (e.g. Astro-scoped `.logo-pill` on the SiteHeader\n // carousel). Shadow DOM would seal the clones off from outer styles.\n shadow: false,\n scoped: true,\n})\nexport class AfClientCarousel {\n @Element() el!: HTMLElement;\n\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n /\n Number of rows.\n * - `1` (default) — single row, matches the Webflow reference.\n * - `2` — two rows (scroll in opposite directions, or stacked when static).\n \n When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n /\n @Prop() rows: 1 \| 2 = 1;\n\n /\n Layout mode.\n * - `scroll` (default) — infinite animated scroll; rows fill the full\n * width and are cloned for a seamless loop.\n * - `static` — no animation, logos centred horizontally. Use when the\n * logo set is small enough to fit on screen without scrolling.\n /\n @Prop() mode: Mode = 'scroll';\n\n private row1TrackRef?: HTMLElement;\n private row2TrackRef?: HTMLElement;\n\n componentDidLoad() {\n // Static mode doesn't animate, so the clone trick isn't needed —\n // skipping it avoids rendering every logo twice.\n if (this.mode === 'static') return;\n this.duplicateTrackContent(this.row1TrackRef);\n if (Number(this.rows) === 2) {\n this.duplicateTrackContent(this.row2TrackRef);\n }\n }\n\n /\n Append clones of every existing track child into the track so the\n * -50% translate animation loops seamlessly. Marks clones with\n * `aria-hidden` and `data-carousel-clone` so assistive tech ignores\n * them and we can skip them when re-duplicating.\n \n In scoped mode, slotted content is moved into the track as regular\n * children (there's no `<slot>` element to read from), so we just\n * iterate direct children that aren't themselves prior clones.\n */\n private duplicateTrackContent(track: HTMLElement \| undefined) {\n if (!track) return;\n const originals = Array.from(track.children).filter(\n (child) => !(child as HTMLElement).hasAttribute('data-carousel-clone'),\n );\n originals.forEach((el) => {\n const clone = el.cloneNode(true) as HTMLElement;\n clone.setAttribute('data-carousel-clone', '');\n clone.setAttribute('aria-hidden', 'true');\n track.appendChild(clone);\n });\n }\n\n render() {\n const rows = Number(this.rows);\n // Direction classes are left on in static mode too — the `.mode-static`\n // CSS rule overrides `animation` to `none`, so the direction is a no-op\n // visually but keeps the markup shape consistent across modes.\n return (\n <Host class={`theme-${this.theme} mode-${this.mode}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\" ref={(el) => (this.row1TrackRef = el)}>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\" ref={(el) => (this.row2TrackRef = el)}>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/af-contact-item.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AfContactItem$1 = /*@__PURE__*/ proxyCustomElement(class AfContactItem ext
         this.value = '';
     }
     render() {
-        return (h(Host, { key: '1a52a5ea61e7ef04f3b86e8338ed6984a57101a2' }, h("div", { key: '9c69396e916f489d572f045e78daf990a72e0d24', class: "contact-item" }, this.label && (h("h5", { key: '7575301c7a83aa2034aaaf9b9bdb2a0bd5e072bb', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '5cbca2b4420b2184fb08ac7f1edb22bce50b9c4c', class: "contact-item__value" }, this.value)), h("slot", { key: '45624be318ed9146a9ec0f2b81af110f8cb82ff6' }))));
+        return (h(Host, { key: '96c81142044b30c89d0b57ca51796bb11b20a939' }, h("div", { key: '91e097ce9e31a20896a2df199c905a848a35065b', class: "contact-item" }, this.label && (h("h5", { key: '8ed3a89a50249ca99f50637ec1486b0def63a057', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '1503e602ac07c85a88b612eb600f07c4cb152e00', class: "contact-item__value" }, this.value)), h("slot", { key: '700f83924b662a99f5450a97b79b48c9b21e9cd0' }))));
     }
     static get style() { return afContactItemCss; }
 }, [262, "af-contact-item", {

package/dist/components/af-divider.js CHANGED Viewed

@@ -32,7 +32,7 @@ const AfDivider$1 = /*@__PURE__*/ proxyCustomElement(class AfDivider extends H {
                 marginTop: spacingValue,
                 marginBottom: spacingValue,
             };
-        return (h(Host, { key: '6d986be8da228de6f6203c3e3fc38f79751c1e97', class: {
+        return (h(Host, { key: 'b8c2649ffe99bf4c816cf3e9d0be51c1a40fe43a', class: {
                 'divider': true,
                 'divider--horizontal': !isVertical,
                 'divider--vertical': isVertical,

package/dist/components/af-divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"af-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;~~MCc5WA~~,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfDivider","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(.divider--horizontal) {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n display: inline-block;\n width: 1px;\n height: 100%;\n min-height: 1em;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Orientation = 'horizontal' \| 'vertical';\ntype Spacing = ~~'none'~~ \| '1' ~~\| '2' \| '3' \| '4' \| '5' \| '6' \| '8'~~;\n\n/*\n Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n /\n@Component({\n tag: 'af-divider',\n styleUrl: 'af-divider.css',\n shadow: true,\n})\nexport class AfDivider {\n /\n Orientation of the divider.\n /\n @Prop() orientation: Orientation = 'horizontal';\n\n /\n Spacing (margin) around the divider using space tokens.\n * For horizontal: margin-top and margin-bottom\n * For vertical: margin-left and margin-right\n */\n @Prop() spacing: Spacing = '4';\n\n render() {\n const isVertical = this.orientation === 'vertical';\n const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n const style: Record<string, string> = isVertical\n ? {\n marginLeft: spacingValue,\n marginRight: spacingValue,\n }\n : {\n marginTop: spacingValue,\n marginBottom: spacingValue,\n };\n\n return (\n <Host\n class={{\n 'divider': true,\n 'divider--horizontal': !isVertical,\n 'divider--vertical': isVertical,\n }}\n style={style}\n role=\"separator\"\n aria-orientation={this.orientation}\n ></Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"af-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,oWAAoW;;MCe5WA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAgB,YAAY;AAE/C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,GAAG;AA6B/B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,GAAG,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,OAAO,GAAG;QAEnF,MAAM,KAAK,GAA2B;AACpC,cAAE;AACE,gBAAA,UAAU,EAAE,YAAY;AACxB,gBAAA,WAAW,EAAE,YAAY;AAC1B;AACH,cAAE;AACE,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,YAAY,EAAE,YAAY;aAC3B;QAEL,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,qBAAqB,EAAE,CAAC,UAAU;AAClC,gBAAA,mBAAmB,EAAE,UAAU;AAChC,aAAA,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,WAAW,EAAA,kBAAA,EACE,IAAI,CAAC,WAAW,EAAA,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfDivider","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-divider/af-divider.css?tag=af-divider&encapsulation=shadow","src/components/af-divider/af-divider.tsx"],"sourcesContent":[":host {\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(.divider--horizontal) {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n}\n\n:host(.divider--vertical) {\n display: inline-block;\n width: 1px;\n height: 100%;\n min-height: 1em;\n background-color: var(--colour-tints-inkwell-100, #d4d4d4);\n align-self: stretch;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Orientation = 'horizontal' \| 'vertical';\ntype Spacing = Gap \| 'none';\n\n/*\n Divider component for visual separation between content.\n * Supports horizontal and vertical orientations with theme-aware styling.\n /\n@Component({\n tag: 'af-divider',\n styleUrl: 'af-divider.css',\n shadow: true,\n})\nexport class AfDivider {\n /\n Orientation of the divider.\n /\n @Prop() orientation: Orientation = 'horizontal';\n\n /\n Spacing (margin) around the divider using space tokens.\n * For horizontal: margin-top and margin-bottom\n * For vertical: margin-left and margin-right\n */\n @Prop() spacing: Spacing = '4';\n\n render() {\n const isVertical = this.orientation === 'vertical';\n const spacingValue = this.spacing === 'none' ? '0' : `var(--space-${this.spacing})`;\n\n const style: Record<string, string> = isVertical\n ? {\n marginLeft: spacingValue,\n marginRight: spacingValue,\n }\n : {\n marginTop: spacingValue,\n marginBottom: spacingValue,\n };\n\n return (\n <Host\n class={{\n 'divider': true,\n 'divider--horizontal': !isVertical,\n 'divider--vertical': isVertical,\n }}\n style={style}\n role=\"separator\"\n aria-orientation={this.orientation}\n ></Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/af-feature-accordion.js CHANGED Viewed

@@ -90,13 +90,13 @@ const AfFeatureAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureAcc
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (h(Host, { key: '03ae097e99c77b487ca8fe64571840c63e7da862' }, h("div", { key: '2ad42ea20ce150e762763a3fb58ba8c52f1b31a9', class: "feature-accordion" }, h("div", { key: 'e6952ea34da35c5ee7e77c0f43cfc328b4ecbb05', class: "feature-accordion__container" }, h("h2", { key: '8d360f7af4c0de8ddad629d209c41fcc56a55a95', class: "feature-accordion__heading" }, this.heading), h("div", { key: '56b3155755a3b0d68ff89727df3ae9aae70defd4', class: "feature-accordion__content" }, h("div", { key: 'bc15d1c26cb079ea19b817e729d0dfb29d5858bb', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '335d71685c8aad8e3ffc0b32c95b8ddd3b670491' }, h("div", { key: '03d0f317865722652ad21e8dfd38e3806e890993', class: "feature-accordion" }, h("div", { key: 'ddc8fa8c2690f670cd3fdd7efa55c7c11ff29e14', class: "feature-accordion__container" }, h("h2", { key: '2d81b47cdc05b6924f2a5a17407bd5d073b6f955', class: "feature-accordion__heading" }, this.heading), h("div", { key: 'ea1c924a393afab5a8dfe223d3404798a7cacf46', class: "feature-accordion__content" }, h("div", { key: '64edad33b88cc793e93debad5f2f051f795deb65', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
                 'accordion-item': true,
                 'accordion-item--expanded': this.expandedIndex === index
             }, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon" }, this.expandedIndex === index ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), h("div", { class: "accordion-item__content", style: {
                 maxHeight: this.expandedIndex === index ? '200px' : '0',
                 opacity: this.expandedIndex === index ? '1' : '0'
-            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '3e160193fdb6a45b2d7e493ddb6925dbee121150', class: "feature-accordion__image-container" }, h("div", { key: '7ab7c3b54a88009f38379dc19c59ba4650ab4ce9', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'cd3f5b1ea37b55d1c7183070c98cc44af3d90694', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '0956c500e38f588edb6a4e570d2cfc4f152453fb', class: "feature-accordion__image-placeholder" }, h("slot", { key: '36f7ed6e0554c429c891f71589296159e7531385', name: "image" }))))))))));
+            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: 'ca61ce3c070f35e9084dcd2bdd4c0fdf8c873fb5', class: "feature-accordion__image-container" }, h("div", { key: 'f741bd15d6fdd17b8947a099a94ba37c5d9a797b', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '8f8dbccdfb3ac4857d0a8bb8bcc317b00ac1cb87', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: 'a06a0cb9eccf2504e9515c9da650cb9b2717173b', class: "feature-accordion__image-placeholder" }, h("slot", { key: '31097d47af5bb4f131aecfddb2ed370bb84c3b34', name: "image" }))))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/af-feature-card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { A as AfFeatureCard$1, d as defineCustomElement$1 } from './p-CNzQtskW.js';
+import { A as AfFeatureCard$1, d as defineCustomElement$1 } from './p-mbl86-w6.js';
 const AfFeatureCard = AfFeatureCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-feature-grid.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
-import { d as defineCustomElement$2 } from './p-DO9J0XTo.js';
+import { d as defineCustomElement$2 } from './p-BXmiPS9x.js';
 const afFeatureGridCss = ".sc-af-feature-grid-h{display:block;width:100%}.feature-grid.sc-af-feature-grid{display:flex;flex-direction:column;align-items:center;width:100%}.feature-grid__cards.sc-af-feature-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;width:100%;max-width:1440px;align-items:stretch}.feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{height:100%}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(3, 1fr)}.feature-grid--cols-2.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-1.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr}.feature-grid__progress.sc-af-feature-grid{display:none;width:100%;margin-top:16px}@media (max-width: 767px){.feature-grid__cards.sc-af-feature-grid{gap:16px}.feature-grid--mobile-list.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr;gap:20px}.feature-grid--mobile-grid.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid::-webkit-scrollbar{display:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{flex:0 0 280px;scroll-snap-align:start}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__progress.sc-af-feature-grid{display:block}}@media (min-width: 768px) and (max-width: 1023px){.feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid,.feature-grid--cols-4.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}}";
@@ -82,7 +82,7 @@ const AfFeatureGrid$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureGrid ext
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (h(Host, { key: 'eb0a98e3493d564f6728613ef1c0b949dcbe7816' }, h("div", { key: 'c91f2fa779d050d9e9419eff301ba8fd80242bc0', class: gridClasses }, h("div", { key: '82989034a3f94cad6747429a1587c3ada160571f', class: "feature-grid__cards" }, h("slot", { key: '9ba0222a8ca2455fd83fbb054e1e4fc2c6f4e598' })), showProgressLine && (h("div", { key: '9c510e8f5366762546829210f5ec1f50788b4ecf', class: "feature-grid__progress" }, h("af-progress-line", { key: '584cd3da69b1b219743338bd6deb0a2c1bbab6b9', progress: this.scrollProgress }))))));
+        return (h(Host, { key: '9aacf2968c1723a036ab7583b052f56d7673543f' }, h("div", { key: 'c965c986ee73a4913e45406b461824927a541331', class: gridClasses }, h("div", { key: '177edb18e1342d60eda11adad85dad87a6c002c3', class: "feature-grid__cards" }, h("slot", { key: 'e0f15eba0bd58263f7a33474f34093785158f03d' })), showProgressLine && (h("div", { key: 'b952584d6b23121bfb820ebdcc1a526a34597f67', class: "feature-grid__progress" }, h("af-progress-line", { key: '97b4ac99e10078b6345a5567a6603290b8467af5', progress: this.scrollProgress }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/af-footer-column.js CHANGED Viewed

@@ -12,7 +12,7 @@ const AfFooterColumn$1 = /*@__PURE__*/ proxyCustomElement(class AfFooterColumn e
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: 'aff327dcb95b40e2835062053b7e59ee38d1e251' }, h("div", { key: '1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426', class: "footer-column" }, this.heading && (h("h5", { key: 'ef2532c50e755acb21f786edfbc23ade0097e385', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'c96d5cda9bef99805eb17af7689a294adf80e33b', class: "footer-column__list" }, h("slot", { key: '5efdffcd7fc885e71a9460bc21a2d40bf486c14d' })))));
+        return (h(Host, { key: '02afc8f33ad0417467d4e795e77a1da74c7ede57' }, h("div", { key: 'f24cbe4720cf6e5df7351e9fe8cec05cca8753b0', class: "footer-column" }, this.heading && (h("h5", { key: '1f615da8d2c755dd0ab5a9679275538d4bb5945e', class: "footer-column__heading" }, this.heading)), h("ul", { key: '0ecdc874412334c418e049dcb0fff738cfdaa52b', class: "footer-column__list" }, h("slot", { key: '148b478bbd04204b3467329f98171a538b22d650' })))));
     }
     static get style() { return afFooterColumnCss; }
 }, [262, "af-footer-column", {

package/dist/components/af-footer-link.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AfFooterLink$1 = /*@__PURE__*/ proxyCustomElement(class AfFooterLink exten
         this.external = false;
     }
     render() {
-        return (h(Host, { key: '6a353087c08983e0e8a962ba97a2d1fa0afd1003' }, h("li", { key: '746175585030c809e05bd697a518f0ae0bc93d89' }, h("a", { key: '5409787ffbcd34661bbcd643fe68ba2e8354d127', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '506e4056466d3764b4a2a55927932ad5fe5ea0ba' }), this.external && (h("svg", { key: '93e6405e6252095281d63cfbcf1548af54582c24', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '72370b0a31dccb15f92bf8fa67fa868e2f0f33ee', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: 'f6c6f0433dc6bcffe507c33c0dec2590a7b167c6' }, h("li", { key: 'c2e69faa620fe59b1cec6e5c32ed37d3a34d9fb7' }, h("a", { key: '35330c42625be987164190b40d1ed1649a259a7f', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '43940df1b20b76d4f9dbec8a94ec39cd56080af3' }), this.external && (h("svg", { key: '7a3e086ead102abed43ed7e765d3012c5e963306', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'e3c266072bca65c154cf925fadc4beb59dfe8f86', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get style() { return afFooterLinkCss; }
 }, [262, "af-footer-link", {

package/dist/components/af-footer.js CHANGED Viewed

@@ -20,7 +20,7 @@ const AfFooter$1 = /*@__PURE__*/ proxyCustomElement(class AfFooter extends H {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: 'b0fceb1896656d8a17b3afda396dd74a9181668e' }, h("footer", { key: '6b48abc3e62d21f96fb3c4aa84b2eedd292e3386', class: "footer" }, h("div", { key: 'ba192ee7d600ddce8e1c2fcc5631259c5eff89db', class: "footer__container" }, h("div", { key: 'f7fa42a5d13aacf16bd49ab2a3257b80156383dd', class: "footer__top" }, h("div", { key: '25c7452fbba9a33805fa419e1d91da04c97e3843', class: "footer__brand" }, h("div", { key: 'd3e0c2b52ce7e6a1f399c13ed9d6f1a1c75d5c35', class: "footer__brand-card" }, h("div", { key: '197934823ea93f20575e3f737c777bd3fe6bdec9', class: "footer__logo" }, h("slot", { key: 'f2b8ab9d513704d6c5e3c2e78cd73a264e78225a', name: "logo" })), h("div", { key: 'c00e0d6bad4a5c99e6e39dab101b77c2fae36495', class: "footer__social" }, h("slot", { key: 'de662f1f8e9deb052eb79aed4a05a98c2d9f65aa', name: "social" }))), h("div", { key: '3c678879008647c05a60803ca7a067c4e4e61746', class: "footer__contact-card" }, h("slot", { key: '58071ccf22c23b1ef5341505dcf1d0ba57357512', name: "contact" }))), h("div", { key: '1eed42db812f2dce3aa935ab5ac1096625848ae6', class: "footer__nav" }, h("div", { key: '50aef430fdb85c2087dd2e2d87ad8cf1d16c7c8b', class: "footer__nav-columns" }, h("slot", { key: 'b900525b63c6072707a5b0d35f72237d1b2fe6a9', name: "nav" })), this.showStatus && (h("div", { key: 'fe957d27c0cbaf5a4e2627c3f37de884a87d09d7', class: "footer__status" }, h("span", { key: 'c123f1e69a1b8958eefede7510ae65395c58d948', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '9524fa81546c3755e0f28d1f335915dfadf0c08a', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'adac84ed1240b1587ad4dd730813243009bb55b7', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'e662a65603a58375ecda64c12f60936ef4bf7535', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '88688f225266e295d4f97ed64fdfe1a67a26561a', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '9e37465b342340a36b309f2da9b5a0d68d5d3bec', class: "footer__legal" }, h("slot", { key: 'c4f6763e9affaf59c7740a78e738938ab25576d0', name: "legal" })), h("div", { key: 'ccdd834682869e69d9c09d2b8f1a6cb3648b671b', class: "footer__badges" }, h("slot", { key: 'cd10ff8b4e90f9a38270b5ed5d7884cea7f241a2', name: "badges" })))))));
+        return (h(Host, { key: '0f0b3ac453f4bf2f17d0185484c312aae99d4f5e' }, h("footer", { key: '017d608cb00c9fb3da012fe9941e80cd9d5135e8', class: "footer" }, h("div", { key: '545a499bd2b75a1efea1efe1659e336753bcce46', class: "footer__container" }, h("div", { key: '66ed8e54b1af9445e15cb4e650d54a240f158c8c', class: "footer__top" }, h("div", { key: 'b4b442dbcaf2e52aae6c76706ecff5aa928bf2f5', class: "footer__brand" }, h("div", { key: '73ad4e70efa91fe96c6de0b80f270c470c73c8e4', class: "footer__brand-card" }, h("div", { key: '0ef27728bb86632b9451ed94220528f527ba62bb', class: "footer__logo" }, h("slot", { key: '5f6de1e2b9f7e9523ce49414ec1bf88a8411478b', name: "logo" })), h("div", { key: 'fdc742da1adce4e0a874c2ee1998e051aea5f10a', class: "footer__social" }, h("slot", { key: '3073881efc66cf692b3d986e11798587cba6f272', name: "social" }))), h("div", { key: '5fe296475d338597af763acb3957a406b5fdf887', class: "footer__contact-card" }, h("slot", { key: '38be1a96c41c246fba05b7ec080b50330ab43f22', name: "contact" }))), h("div", { key: 'e12c9774d5d4806728b375386a0491ed2e7a1d74', class: "footer__nav" }, h("div", { key: '6c5e293d11a87f48add7799c86fe5ff14618094c', class: "footer__nav-columns" }, h("slot", { key: '5d189a739cbdb1b989eb77008aac4b3f91be4940', name: "nav" })), this.showStatus && (h("div", { key: '29f8108dfd88e8f83f75dc765870621055bb952a', class: "footer__status" }, h("span", { key: '4e61880dc288cfc19fbef5a91fdc5295512d725a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: 'dd1055516d076ac8a814e7b60bedf6989341225c', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '7ddb72ef4df731dcadc479a6ecbe059b1ca569cb', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'c5acf298a42067cad20c914350e6f89b98e16162', class: "footer__bottom" }, this.copyrightText && (h("p", { key: 'ed923670ea3258db98b0eb7a5e197e87b5f45784', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '7a71bf0cf0f44bb38c4c696fd151ecbea2d3de1b', class: "footer__legal" }, h("slot", { key: 'afef7ce942c8fe362fb83d03438604378b4ac8f7', name: "legal" })), h("div", { key: 'b8940476d2cae97bc70916f4252e2a3337da37b8', class: "footer__badges" }, h("slot", { key: '3b076b800f2771237ea8f7fc2f1cc2c46c2e4ccc', name: "badges" })))))));
     }
     static get style() { return afFooterCss; }
 }, [262, "af-footer", {

package/dist/components/af-grid-callout.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
-import { d as defineCustomElement$2 } from './p-DNeNJhuM.js';
+import { d as defineCustomElement$2 } from './p-ClZAZSzR.js';
 const afGridCalloutCss = ".sc-af-grid-callout-h{display:block;width:100%}.grid-callout.sc-af-grid-callout{display:flex;width:100%;gap:40px;align-items:stretch}.grid-callout__image-container.sc-af-grid-callout{flex:0 0 auto;width:45%;min-height:400px;position:relative;overflow:hidden}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0 4000px 4000px 0;margin-left:calc(-1 * var(--container-padding, 80px))}.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:4000px 0 0 4000px;margin-right:calc(-1 * var(--container-padding, 80px))}.grid-callout__image.sc-af-grid-callout{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.grid-callout__content.sc-af-grid-callout{flex:1;display:flex;flex-direction:column;gap:48px;padding:40px 0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:40px}.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-right:40px}.grid-callout--no-image.sc-af-grid-callout{flex-direction:column}.grid-callout--no-image.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding:0}.grid-callout__heading.sc-af-grid-callout{max-width:840px}.grid-callout__items.sc-af-grid-callout{display:grid;gap:40px;width:100%}.grid-callout__items--cols-2.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items--cols-3.sc-af-grid-callout{grid-template-columns:repeat(3, 1fr)}.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(4, 1fr)}.grid-callout__cta.sc-af-grid-callout{display:flex;gap:12px;flex-wrap:wrap}.grid-callout__cta.sc-af-grid-callout:empty{display:none}@media (max-width: 1024px){.grid-callout.sc-af-grid-callout{gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:40%}.grid-callout__content.sc-af-grid-callout{gap:40px}.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items.sc-af-grid-callout{gap:32px}}@media (max-width: 768px){.grid-callout.sc-af-grid-callout{flex-direction:column;gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:calc(100% + 2 * var(--container-padding, 20px));min-height:280px;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px));border-radius:0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px))}.grid-callout__content.sc-af-grid-callout{padding:0;gap:32px}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:0;padding-right:0}.grid-callout__items.sc-af-grid-callout{grid-template-columns:1fr;gap:32px}.grid-callout__items--cols-2.sc-af-grid-callout,.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:1fr}}";

package/dist/components/af-grid.js CHANGED Viewed

@@ -30,14 +30,14 @@ const AfGrid$1 = /*@__PURE__*/ proxyCustomElement(class AfGrid extends H {
             end: 'end',
             stretch: 'stretch',
         };
-        return (h(Host, { key: 'bcc57cad4861ded2353d7668fa76281f327efac8', style: {
+        return (h(Host, { key: '440c50dbd3a572f292b6a5b4b31845a70b5871bf', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, h("div", { key: 'e4aaf0f25478b42470f24b7eb831f6598be15423', class: "grid" }, h("slot", { key: 'bc40be3d30c45c2af348bb67804c25f29d606895' }))));
+            } }, h("div", { key: '76ddac9b00743e64fa4e49e9fa80d02088dc858c', class: "grid" }, h("slot", { key: 'ac6ce8acf4e1ca3acabff3176b06a57eee265b72' }))));
     }
     static get style() { return afGridCss; }
 }, [257, "af-grid", {

package/dist/components/af-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"af-grid.js","mappings":";;AAAA,MAAM,SAAS,GAAG,udAAud;;MCiB5dA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,CAAC;AAiB5B;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AA2BjC;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,OAAO,EAAE,SAAS;SACnB;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC3D,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC7E,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;AACpF,gBAAA,YAAY,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AACxC,gBAAA,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACX,aAAA,EAAA,EAE3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-grid/af-grid.css?tag=af-grid&encapsulation=shadow","src/components/af-grid/af-grid.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(var(--grid-columns), 1fr);\n gap: var(--grid-gap);\n align-items: var(--grid-align);\n}\n\n/* ≤ tablet /\n/ Large breakpoint: 1024px and below /\n@media (max-width: 1024px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-lg), 1fr);\n }\n}\n\n/ mobile-only /\n/ Medium breakpoint: 768px and below /\n@media (max-width: 768px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-md), 1fr);\n }\n}\n\n/ ≤ small /\n/ Small breakpoint: 480px and below /\n@media (max-width: 480px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-sm), 1fr);\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\~~n\ntype~~ ~~Gap~~ = ~~'1'~~ \| ~~'2'~~ \| '3' ~~\| '4' \| '5' \| '6' \| '8'~~;\ntype Columns = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12;\ntype Align = 'start' \| 'center' \| 'end' \| 'stretch';\n\n/\n Generic CSS Grid component for flexible column layouts.\n * Supports responsive column counts at different breakpoints.\n \n @slot - Grid items\n /\n@Component({\n tag: 'af-grid',\n styleUrl: 'af-grid.css',\n shadow: true,\n})\nexport class AfGrid {\n /\n Number of columns at the default (largest) breakpoint.\n /\n @Prop() columns: Columns = 3;\n\n /\n Number of columns at the large breakpoint (1024px and below).\n /\n @Prop() columnsLg?: Columns;\n\n /\n Number of columns at the medium breakpoint (768px and below).\n /\n @Prop() columnsMd?: Columns;\n\n /\n Number of columns at the small breakpoint (375px and below).\n /\n @Prop() columnsSm?: Columns;\n\n /\n Gap between grid items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n /\n @Prop() gap: Gap = '4';\n\n /\n Align items within their grid cells.\n */\n @Prop() align: Align = 'stretch';\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'start',\n center: 'center',\n end: 'end',\n stretch: 'stretch',\n };\n\n return (\n <Host\n style={{\n '--grid-columns': String(this.columns),\n '--grid-columns-lg': String(this.columnsLg ?? this.columns),\n '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),\n '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),\n '--grid-gap': `var(--space-${this.gap})`,\n '--grid-align': alignMap[this.align],\n } as Record<string, string>}\n >\n <div class=\"grid\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"af-grid.js","mappings":";;AAAA,MAAM,SAAS,GAAG,udAAud;;MCiB5dA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,CAAC;AAiB5B;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AA2BjC;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,OAAO,EAAE,SAAS;SACnB;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC3D,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;AAC7E,gBAAA,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;AACpF,gBAAA,YAAY,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AACxC,gBAAA,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AACX,aAAA,EAAA,EAE3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-grid/af-grid.css?tag=af-grid&encapsulation=shadow","src/components/af-grid/af-grid.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(var(--grid-columns), 1fr);\n gap: var(--grid-gap);\n align-items: var(--grid-align);\n}\n\n/* ≤ tablet /\n/ Large breakpoint: 1024px and below /\n@media (max-width: 1024px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-lg), 1fr);\n }\n}\n\n/ mobile-only /\n/ Medium breakpoint: 768px and below /\n@media (max-width: 768px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-md), 1fr);\n }\n}\n\n/ ≤ small /\n/ Small breakpoint: 480px and below /\n@media (max-width: 480px) {\n .grid {\n grid-template-columns: repeat(var(--grid-columns-sm), 1fr);\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Columns = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12;\ntype Align = 'start' \| 'center' \| 'end' \| 'stretch';\n\n/\n Generic CSS Grid component for flexible column layouts.\n * Supports responsive column counts at different breakpoints.\n \n @slot - Grid items\n /\n@Component({\n tag: 'af-grid',\n styleUrl: 'af-grid.css',\n shadow: true,\n})\nexport class AfGrid {\n /\n Number of columns at the default (largest) breakpoint.\n /\n @Prop() columns: Columns = 3;\n\n /\n Number of columns at the large breakpoint (1024px and below).\n /\n @Prop() columnsLg?: Columns;\n\n /\n Number of columns at the medium breakpoint (768px and below).\n /\n @Prop() columnsMd?: Columns;\n\n /\n Number of columns at the small breakpoint (375px and below).\n /\n @Prop() columnsSm?: Columns;\n\n /\n Gap between grid items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n /\n @Prop() gap: Gap = '4';\n\n /\n Align items within their grid cells.\n */\n @Prop() align: Align = 'stretch';\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'start',\n center: 'center',\n end: 'end',\n stretch: 'stretch',\n };\n\n return (\n <Host\n style={{\n '--grid-columns': String(this.columns),\n '--grid-columns-lg': String(this.columnsLg ?? this.columns),\n '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),\n '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),\n '--grid-gap': `var(--space-${this.gap})`,\n '--grid-align': alignMap[this.align],\n } as Record<string, string>}\n >\n <div class=\"grid\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/af-hero.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface AfHero extends Components.AfHero, HTMLElement {}
+export const AfHero: {
+    prototype: AfHero;
+    new (): AfHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+import { A as AfHero$1, d as defineCustomElement$1 } from './p-CRnEuh5f.js';
+const AfHero = AfHero$1;
+const defineCustomElement = defineCustomElement$1;
+export { AfHero, defineCustomElement };
+//# sourceMappingURL=af-hero.js.map
+//# sourceMappingURL=af-hero.js.map

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

	@@ -0,0 +1 @@
1	+ {"file":"af-hero.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1,4 +1,4 @@
-import { A as AfIconBox$1, d as defineCustomElement$1 } from './p-i_6TLQJ5.js';
+import { A as AfIconBox$1, d as defineCustomElement$1 } from './p-nA3Uvhwb.js';
 const AfIconBox = AfIconBox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 import { d as defineCustomElement$4 } from './p-B_OoX__z.js';
-import { d as defineCustomElement$3 } from './p-i_6TLQJ5.js';
-import { d as defineCustomElement$2 } from './p-DNeNJhuM.js';
+import { d as defineCustomElement$3 } from './p-nA3Uvhwb.js';
+import { d as defineCustomElement$2 } from './p-ClZAZSzR.js';
 const afIconTextCss = ".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";
@@ -31,7 +31,7 @@ const AfIconText$1 = /*@__PURE__*/ proxyCustomElement(class AfIconText extends H
             '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 style() { return afIconTextCss; }
 }, [262, "af-icon-text", {

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

@@ -1,4 +1,4 @@
-import { A as AfIllustratedCard$1, d as defineCustomElement$1 } from './p-C6-JATRR.js';
+import { A as AfIllustratedCard$1, d as defineCustomElement$1 } from './p-3Gzh4deR.js';
 const AfIllustratedCard = AfIllustratedCard$1;
 const defineCustomElement = defineCustomElement$1;