@affinda/wc 0.0.16 → 0.0.18

package/dist/collection/components/af-theme-override/af-theme-override.js

@@ -0,0 +1,60 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Theme Override utility component.
+ * Wraps content and applies an explicit theme, overriding any inherited theme
+ * from parent containers like AfSection or AfCard.
+ *
+ * Unlike AfSection, this component does NOT apply a background color -
+ * it only sets the CSS custom properties that child components consume.
+ *
+ * @slot - Content to be themed
+ */
+export class AfThemeOverride {
+    constructor() {
+        /**
+         * The theme to apply to child components.
+         * Overrides any inherited theme from parent containers.
+         */
+        this.theme = 'white';
+    }
+    render() {
+        return (h(Host, { key: '303d518d6047bb01db2b315a93169014c849a78e' }, h("div", { key: '6d208731e221d7514d384543fe79e68c0830a3fb', class: `theme-override theme-${this.theme}` }, h("slot", { key: '75de070f92a698b39286eacc5981b3d7d642b49a' }))));
+    }
+    static get is() { return "af-theme-override"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-theme-override.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-theme-override.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme to apply to child components.\nOverrides any inherited theme from parent containers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-theme-override.js.map

package/dist/collection/components/af-theme-override/af-theme-override.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-theme-override.js","sourceRoot":"","sources":["../../../src/components/af-theme-override/af-theme-override.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,eAAe;IAN5B;QAOE;;;WAGG;QACK,UAAK,GAAqE,OAAO,CAAC;KAW3F;IATC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,KAAK,EAAE;gBAC9C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Theme Override utility component.\n * Wraps content and applies an explicit theme, overriding any inherited theme\n * from parent containers like AfSection or AfCard.\n * \n * Unlike AfSection, this component does NOT apply a background color - \n * it only sets the CSS custom properties that child components consume.\n * \n * @slot - Content to be themed\n */\n@Component({\n  tag: 'af-theme-override',\n  styleUrl: 'af-theme-override.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfThemeOverride {\n  /** \n   * The theme to apply to child components.\n   * Overrides any inherited theme from parent containers.\n   */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n\n  render() {\n    return (\n      <Host>\n        <div class={`theme-override theme-${this.theme}`}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -42,7 +42,7 @@
   gap: var(--space-2, 8px);
 }
 
-/* Text alignment */
+/* Container alignment (affects flexbox positioning) */
 .text-left {
   align-items: flex-start;
 }
@@ -51,16 +51,33 @@
   align-items: center;
 }
 
-.text-left .copy,
-.text-left .heading,
-.text-left .description {
+.text-right {
+  align-items: flex-end;
+}
+
+.text-justify {
+  align-items: stretch;
+}
+
+/* Individual text alignment classes */
+.align-left {
   text-align: left;
+  --af-text-align: left;
 }
 
-.text-center .copy,
-.text-center .heading,
-.text-center .description {
+.align-center {
   text-align: center;
+  --af-text-align: center;
+}
+
+.align-right {
+  text-align: right;
+  --af-text-align: right;
+}
+
+.align-justify {
+  text-align: justify;
+  --af-text-align: justify;
 }
 
 /* Copy section - base styles */
@@ -189,6 +206,7 @@
 /* Buttons section */
 .buttons {
   display: flex;
+  flex-direction: row;
   gap: var(--space-3, 12px);
 }
 
@@ -196,53 +214,72 @@
   display: none;
 }
 
-/* Button alignment - horizontal (desktop only) */
-.button-horizontal .buttons {
-  flex-direction: row;
+/* Button layout - horizontal (inline with copy) */
+.layout-horizontal .buttons {
   align-items: center;
 }
 
-.text-left.button-horizontal {
+.text-left.layout-horizontal {
   flex-direction: row;
   align-items: center;
   gap: var(--space-4, 16px);
 }
 
-.text-left.button-horizontal .copy {
+.text-left.layout-horizontal .copy {
   flex: 1 0 0;
   max-width: 950px;
 }
 
 /* Heading 3, 4 horizontal: different max-width */
-.text-left.button-horizontal.heading-3 .copy,
-.text-left.button-horizontal.heading-4 .copy {
+.text-left.layout-horizontal.heading-3 .copy,
+.text-left.layout-horizontal.heading-4 .copy {
   max-width: 840px;
 }
 
-.text-left.button-horizontal .buttons {
+.text-left.layout-horizontal .buttons {
   flex-shrink: 0;
 }
 
-/* Button alignment - vertical */
-.button-vertical .buttons {
-  flex-direction: row;
+/* Button layout - vertical (stacked below copy) */
+.layout-vertical .buttons {
   align-items: flex-start;
 }
 
-.text-center.button-vertical .buttons {
+/* Button position alignment */
+.buttons.align-left {
+  justify-content: flex-start;
+}
+
+.buttons.align-center {
   justify-content: center;
 }
 
+.buttons.align-right {
+  justify-content: flex-end;
+}
+
+.buttons.align-justify {
+  justify-content: space-between;
+}
+
 /* Mobile button stacking - buttons stack vertically on mobile */
 .breakpoint-mobile .buttons {
   flex-direction: column;
   align-items: stretch;
 }
 
-.breakpoint-mobile.text-center .buttons {
+.breakpoint-mobile .buttons.align-center {
   align-items: center;
 }
 
+.breakpoint-mobile .buttons.align-right {
+  align-items: flex-end;
+}
+
+.breakpoint-mobile .buttons.align-left {
+  align-items: flex-start;
+}
+
 /* Max width constraints for centered layouts */
 .text-center .copy {
   max-width: 840px;

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -10,27 +10,40 @@ export class AfTypographyLockup {
          */
         this.breakpoint = 'desktop';
         /**
-         * Text alignment
+         * Text alignment for the entire lockup (heading and description).
+         * Can be overridden individually with headingAlignment and descriptionAlignment.
          */
         this.textAlignment = 'left';
         /**
-         * Button alignment (horizontal or vertical stacking)
+         * Button layout direction (horizontal or vertical stacking)
          */
-        this.buttonAlignment = 'vertical';
+        this.buttonLayout = 'vertical';
     }
     render() {
+        const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
+        const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;
+        const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;
         const containerClasses = {
             'lockup': true,
             [`text-${this.textAlignment}`]: true,
-            [`button-${this.buttonAlignment}`]: true,
+            [`layout-${this.buttonLayout}`]: true,
             [`heading-${this.headingSize}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        const copyClasses = {
-            'copy': true
+        const headingClasses = {
+            'heading': true,
+            [`align-${effectiveHeadingAlignment}`]: true
+        };
+        const descriptionClasses = {
+            'description': true,
+            [`align-${effectiveDescriptionAlignment}`]: true
+        };
+        const buttonsClasses = {
+            'buttons': true,
+            [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '62d24f768270ca80fea5f47bbb98fcd51d1ce19f' }, h("div", { key: '7e4ce0a3702cd933d4c2cf902a9de7aa608d7f45', class: containerClasses }, h("div", { key: '2139a714f4c654343246ea9acc3a4158633fbea5', class: copyClasses, style: copyStyle }, h("div", { key: 'c912d098ef8ff24579a1798a04e636f3127b4142', class: "heading", part: "heading" }, h("slot", { key: '836fdd1778b706d239387845daa52fec6b38c8b8' })), h("div", { key: '4d1c9207a166aa4e717b655f8471de25bfb67c7a', class: "description", part: "body" }, h("slot", { key: 'f3d2f3fb15547ce230f868d92e14f0156d8a86b4', name: "description" }))), h("div", { key: '4567953f1da984155af2dce9f8eeda69201fd80a', class: "buttons", part: "buttons" }, h("slot", { key: 'ba914f51d04808f52deb6eb9dcecb40f9516057c', name: "buttons" })))));
+        return (h(Host, { key: '8cb507e162ef7a2bca263b7fecb7ef480382e615' }, h("div", { key: '94106d59d250a47ca21c15f2e8cb5c1bef7a3936', class: containerClasses }, h("div", { key: 'f465704d4f7b1bf77611e32958674a6093813abc', class: "copy", style: copyStyle }, h("div", { key: 'd4bcad644d1194c2ecfa593bf9b6a6f185e4a7c2', class: headingClasses, part: "heading" }, h("slot", { key: '97558da091bfc3b63cf57ec0816eb3b952cb201a' })), h("div", { key: 'c0839f719f0165ecaa296bb0be321a2d8c482e87', class: descriptionClasses, part: "body" }, h("slot", { key: '946a5ff890fb09144fee49687fb9de83f45c7aac', name: "description" }))), h("div", { key: '6f06d69183d006be1031eb1f73164f10811df9b1', class: buttonsClasses, part: "buttons" }, h("slot", { key: '253ba8fada86b55b5516d4dd8732aa19dfeda620', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }
@@ -90,15 +103,20 @@ export class AfTypographyLockup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'left' | 'center'",
-                    "resolved": "\"center\" | \"left\"",
-                    "references": {}
+                    "original": "TextAlign",
+                    "resolved": "\"center\" | \"justify\" | \"left\" | \"right\"",
+                    "references": {
+                        "TextAlign": {
+                            "location": "global",
+                            "id": "global::TextAlign"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Text alignment"
+                    "text": "Text alignment for the entire lockup (heading and description).\nCan be overridden individually with headingAlignment and descriptionAlignment."
                 },
                 "getter": false,
                 "setter": false,
@@ -106,7 +124,55 @@ export class AfTypographyLockup {
                 "attribute": "text-alignment",
                 "defaultValue": "'left'"
             },
-            "buttonAlignment": {
+            "headingAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextAlign",
+                    "resolved": "\"center\" | \"justify\" | \"left\" | \"right\" | undefined",
+                    "references": {
+                        "TextAlign": {
+                            "location": "global",
+                            "id": "global::TextAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text alignment. Falls back to textAlignment if not specified."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-alignment"
+            },
+            "descriptionAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextAlign",
+                    "resolved": "\"center\" | \"justify\" | \"left\" | \"right\" | undefined",
+                    "references": {
+                        "TextAlign": {
+                            "location": "global",
+                            "id": "global::TextAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text alignment. Falls back to textAlignment if not specified."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-alignment"
+            },
+            "buttonLayout": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -118,14 +184,38 @@ export class AfTypographyLockup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button alignment (horizontal or vertical stacking)"
+                    "text": "Button layout direction (horizontal or vertical stacking)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "button-alignment",
+                "attribute": "button-layout",
                 "defaultValue": "'vertical'"
             },
+            "buttonsAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextAlign",
+                    "resolved": "\"center\" | \"justify\" | \"left\" | \"right\" | undefined",
+                    "references": {
+                        "TextAlign": {
+                            "location": "global",
+                            "id": "global::TextAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Buttons position alignment. Falls back to textAlignment if not specified."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "buttons-alignment"
+            },
             "maxWidth": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,kBAAa,GAAsB,MAAM,CAAC;QAElD;;WAEG;QACK,oBAAe,GAA8B,UAAU,CAAC;KAwCjE;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;YACxC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;SACb,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS;oBACvC,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;wBACjC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;wBAClC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;WAGG;QACK,kBAAa,GAAc,MAAM,CAAC;QAY1C;;WAEG;QACK,iBAAY,GAA8B,UAAU,CAAC;KA4D9D;IAhDC,MAAM;QACJ,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAC9E,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC;QACtF,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAE9E,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,kBAAkB,GAAG;YACzB,aAAa,EAAE,IAAI;YACnB,CAAC,SAAS,6BAA6B,EAAE,CAAC,EAAE,IAAI;SACjD,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS;oBAChC,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;wBACxC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM;wBACzC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;oBACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 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  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    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: 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\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,7 +42,7 @@ export class AfVideoContainer {
         };
     }
     render() {
-        return (h(Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+        return (h(Host, { key: '8ea21d7dbe736b27b79c0fc7890796f1b1b282aa' }, h("div", { key: '92bb0cbf3d58a3304f891109433f965e7fd23816', class: "video-container" }, h("div", { key: 'ecec6d6ca2a76e5dd06d3b2e9bc370ac3e41ba00', class: "video-container__top" }, h("slot", { key: '2d8243cc440b70409910953186ae6ba36e36d4ca', name: "top" })), h("div", { key: '3bbafe7f6cbaa57da83c576f7fa5a17f2d8244a1', class: "video-container__video" }, h("af-aspect-ratio", { key: '7f1504a644c406c7f61b5a01707778c104746789', ratio: "16:9" }, h("div", { key: 'fe18441bf7e4b46e123d1d18a394336a416cf373', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'd624e7c7299f465d8ffde109e5215512126fc60c', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'bef98e5cb47e9a9f9849547edd3c8f56baff778e', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'e3c6cbb6236d1a60a39e5081ad4285896791cd9d', name: "play", size: 24 }))))), h("div", { key: '60ef6d0a51d15b03af7b3ab09d2d8214daedbcab', class: "video-container__bottom" }, h("slot", { key: 'fec2c7b7101caf72142fda6a0c1fa281785b08e3', name: "bottom" })))));
     }
     static get is() { return "af-video-container"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-visually-hidden/af-visually-hidden.css

@@ -0,0 +1,23 @@
+:host {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+:host(.focusable:focus-within) {
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+  padding: inherit !important;
+  margin: inherit !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+}
+

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

@@ -0,0 +1,57 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Visually Hidden component for accessible content.
+ * Hides content visually while keeping it accessible to screen readers.
+ * Essential for accessibility - use for skip links, form labels, etc.
+ *
+ * @slot - Content to hide visually
+ */
+export class AfVisuallyHidden {
+    constructor() {
+        /**
+         * When true, the content becomes visible when focused.
+         * Useful for skip links and other focusable elements.
+         */
+        this.focusable = false;
+    }
+    render() {
+        return (h(Host, { key: '7c6e072e0ef0882ba20138c59d76a7c3db2851c4', class: { 'focusable': this.focusable } }, h("slot", { key: '759af7ecc05e1a715a0be376c350adcf55ce3a04' })));
+    }
+    static get is() { return "af-visually-hidden"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-visually-hidden.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-visually-hidden.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "focusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the content becomes visible when focused.\nUseful for skip links and other focusable elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focusable",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-visually-hidden.js.map

package/dist/collection/components/af-visually-hidden/af-visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-visually-hidden.js","sourceRoot":"","sources":["../../../src/components/af-visually-hidden/af-visually-hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;GAMG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME;;;WAGG;QACK,cAAS,GAAY,KAAK,CAAC;KASpC;IAPC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE;YAC1C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Visually Hidden component for accessible content.\n * Hides content visually while keeping it accessible to screen readers.\n * Essential for accessibility - use for skip links, form labels, etc.\n *\n * @slot - Content to hide visually\n */\n@Component({\n  tag: 'af-visually-hidden',\n  styleUrl: 'af-visually-hidden.css',\n  shadow: true,\n})\nexport class AfVisuallyHidden {\n  /**\n   * When true, the content becomes visible when focused.\n   * Useful for skip links and other focusable elements.\n   */\n  @Prop() focusable: boolean = false;\n\n  render() {\n    return (\n      <Host class={{ 'focusable': this.focusable }}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/components/af-accordion-item.d.ts

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

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

@@ -0,0 +1,133 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afAccordionItemCss = ":host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color 0.2s ease}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform 0.3s ease}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height 0.3s ease}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}";
+
+const AfAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordionItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.accordionToggle = createEvent(this, "af-accordion-toggle");
+        /**
+         * Whether this item is currently expanded
+         */
+        this.open = false;
+        /**
+         * Whether this item is disabled (cannot be toggled)
+         */
+        this.disabled = false;
+        this.contentHeight = 0;
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.toggle();
+            }
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.measureContent();
+        }
+    }
+    componentDidLoad() {
+        // #region agent log
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad', message: 'Component loaded', data: { itemId: this.itemId, hasShadowRoot: !!this.el.shadowRoot }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'E' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const shadowRoot = this.el.shadowRoot;
+        const triggerSlot = shadowRoot?.querySelector('slot[name="trigger"]');
+        const assignedNodes = triggerSlot?.assignedNodes() || [];
+        const assignedElements = triggerSlot?.assignedElements() || [];
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:slotCheck', message: 'Checking trigger slot content', data: { hasTriggerSlot: !!triggerSlot, assignedNodesCount: assignedNodes.length, assignedElementsCount: assignedElements.length, assignedContent: assignedElements.map(el => ({ tagName: el.tagName, textContent: el.textContent })) }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'A' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const triggerContent = shadowRoot?.querySelector('.trigger-content');
+        const triggerContentStyles = triggerContent ? getComputedStyle(triggerContent) : null;
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:styleCheck', message: 'Checking trigger-content styles', data: { hasTriggerContent: !!triggerContent, width: triggerContent?.offsetWidth, height: triggerContent?.offsetHeight, color: triggerContentStyles?.color, display: triggerContentStyles?.display, visibility: triggerContentStyles?.visibility }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'B,C' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const lightDomChildren = Array.from(this.el.children);
+        const slottedTrigger = this.el.querySelector('[slot="trigger"]');
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:lightDomCheck', message: 'Checking light DOM for slotted content', data: { lightDomChildCount: lightDomChildren.length, lightDomTags: lightDomChildren.map(c => c.tagName), hasSlottedTrigger: !!slottedTrigger, slottedTriggerText: slottedTrigger?.textContent }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'D' }) }).catch(() => { });
+        // #endregion
+        if (this.open) {
+            this.measureContent();
+        }
+        // Set up ResizeObserver to handle dynamic content changes
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.open && this.contentRef) {
+                this.contentHeight = this.contentRef.scrollHeight;
+            }
+        });
+        if (this.contentRef) {
+            this.resizeObserver.observe(this.contentRef);
+        }
+    }
+    disconnectedCallback() {
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    /**
+     * Programmatically toggle the accordion item
+     */
+    async toggle() {
+        if (!this.disabled) {
+            this.open = !this.open;
+            this.accordionToggle.emit({ itemId: this.itemId, open: this.open });
+        }
+    }
+    measureContent() {
+        // Use requestAnimationFrame to ensure DOM has updated before measuring
+        requestAnimationFrame(() => {
+            if (this.contentRef) {
+                this.contentHeight = this.contentRef.scrollHeight;
+            }
+        });
+    }
+    render() {
+        // #region agent log
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:render', message: 'Render called', data: { itemId: this.itemId, open: this.open }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'E' }) }).catch(() => { });
+        // #endregion
+        const contentStyle = {
+            maxHeight: this.open ? `${this.contentHeight}px` : '0px'
+        };
+        return (h(Host, { key: '3fe538b657584129ecdce848caf5a9425287a354', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '6d1766d97738f60f1d21a7f623ef732a15a9e911', class: "accordion-item" }, h("button", { key: '8782c20a4d74f655786586d7d7fd4255a6fc2806', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: '54aff551c3547148f92c26bc51a42417a36ff4d3', class: "trigger-content" }, h("slot", { key: '5692b3c1b11ff38b3bde8c7dd30a2c2a2e1b5c67', name: "trigger" })), h("div", { key: '88d0a967e3ed518d8355c824f226ad21abf96c0f', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: 'd879b4f0a2b6b4de5782c783d2202fb6c9cb73f8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '590eaf035dc51886a303dee77152c64c227e9ccb', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '02c882442a9cbe57b4888b07c95f2b6f252f1cc7', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '6975a215a16bcfb27cc76aba7daed2a19d0f143d', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '9b7d50813485ff195d0105bf2d97d1c032ab5aff' }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return afAccordionItemCss; }
+}, [257, "af-accordion-item", {
+        "itemId": [513, "item-id"],
+        "open": [1540],
+        "disabled": [516],
+        "contentHeight": [32],
+        "toggle": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-accordion-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfAccordionItem$1);
+            }
+            break;
+    } });
+}
+
+const AfAccordionItem = AfAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfAccordionItem, defineCustomElement };
+//# sourceMappingURL=af-accordion-item.js.map
+
+//# sourceMappingURL=af-accordion-item.js.map