@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-text-image/af-text-image.css

@@ -0,0 +1,228 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Container Layout
+   ========================================================================== */
+
+.text-image {
+  display: flex;
+  width: 100%;
+}
+
+/* Side-by-side layout (default for 1/3 and 1/4 proportions) */
+.text-image--side-by-side {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-8, 32px);
+}
+
+.text-image--image-left {
+  flex-direction: row-reverse;
+}
+
+.text-image--image-right {
+  flex-direction: row;
+}
+
+/* Full-width layout (100% proportion) */
+.text-image--full-width {
+  flex-direction: column;
+  gap: var(--space-8, 32px);
+}
+
+/* ==========================================================================
+   Content Area (Typography Lockups Container)
+   ========================================================================== */
+
+.text-image__content {
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Proportion-based content sizing for side-by-side */
+.text-image--proportion-1-3 .text-image__content {
+  flex: 2;
+}
+
+.text-image--proportion-1-4 .text-image__content {
+  flex: 3;
+}
+
+.text-image--proportion-100 .text-image__content {
+  flex: none;
+  width: 100%;
+}
+
+/* Padding for content when image is on opposite side */
+.text-image--image-right .text-image__content {
+  padding-right: var(--space-8, 32px);
+}
+
+.text-image--image-left .text-image__content {
+  padding-left: var(--space-8, 32px);
+}
+
+.text-image--full-width .text-image__content {
+  padding: 0;
+}
+
+/* ==========================================================================
+   Typography Lockup
+   ========================================================================== */
+
+.text-image__lockup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+  width: 100%;
+}
+
+.text-image__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+  max-width: 840px;
+  width: 100%;
+}
+
+/* Heading styles - inherits color from theme context */
+.text-image__heading {
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: var(--font-size-heading-3-desktop, 34px);
+  line-height: var(--line-height-heading-tight, 1);
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
+  color: var(--af-typography-heading-primary, #14343B);
+  white-space: pre-wrap;
+}
+
+.text-image__heading:empty {
+  display: none;
+}
+
+/* Description/body text - inherits color from theme context */
+.text-image__description {
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: var(--font-size-body-large, 18px);
+  line-height: var(--line-height-body-large, 26px);
+  color: var(--af-typography-body-default, #2B484F);
+  white-space: pre-wrap;
+}
+
+.text-image__description:empty {
+  display: none;
+}
+
+/* Buttons section - wrapper for slotted ButtonGroup */
+.text-image__buttons {
+  display: block;
+}
+
+.text-image__buttons:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Image Area
+   ========================================================================== */
+
+.text-image__image-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--radius-md, 12px);
+}
+
+/* Proportion-based image sizing for side-by-side */
+.text-image--proportion-1-3 .text-image__image-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.text-image--proportion-1-4 .text-image__image-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.text-image--proportion-100 .text-image__image-wrapper {
+  width: 100%;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  /* Stack everything vertically on mobile */
+  .text-image--side-by-side {
+    flex-direction: column;
+    gap: var(--space-6, 24px);
+  }
+
+  /* Reset order - text always first on mobile */
+  .text-image--image-left,
+  .text-image--image-right {
+    flex-direction: column;
+  }
+
+  /* Remove side padding on mobile */
+  .text-image--image-right .text-image__content,
+  .text-image--image-left .text-image__content {
+    padding: 0;
+  }
+
+  /* Full width for all proportions on mobile */
+  .text-image__content,
+  .text-image__image-wrapper {
+    flex: none !important;
+    width: 100%;
+  }
+
+  /* Smaller heading on mobile */
+  .text-image__heading {
+    font-size: var(--font-size-heading-3-mobile, 25px);
+  }
+
+  /* Smaller body text for full-width on mobile */
+  .text-image--proportion-100 .text-image__description {
+    font-size: var(--font-size-body-medium, 16px);
+    line-height: var(--line-height-body-medium, 24px);
+  }
+
+  /* On mobile, ButtonGroup handles its own responsive behavior */
+
+  /* Smaller lockup gap on mobile for full-width */
+  .text-image--proportion-100 .text-image__lockup {
+    gap: var(--space-3, 12px);
+  }
+
+  .text-image--proportion-100 .text-image__copy {
+    gap: var(--space-3, 12px);
+  }
+
+  /* Smaller border radius on mobile */
+  .text-image__image-wrapper {
+    border-radius: var(--radius-sm, 8px);
+  }
+}
+
+/* ==========================================================================
+   Slot Content Styling
+   ========================================================================== */
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted(p) {
+  margin: 0;
+}
+
+
+

package/dist/collection/components/af-text-image/af-text-image.js

@@ -0,0 +1,173 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TextImage composite component that combines typography content with an image.
+ * Supports various layout configurations with image position and proportion options.
+ */
+export class AfTextImage {
+    constructor() {
+        /**
+         * Position of the image relative to the text content
+         */
+        this.imagePosition = 'right';
+        /**
+         * Proportion of the image in the layout
+         * - '1/3': Image takes 1/3 of the width (text takes 2/3)
+         * - '1/4': Image takes 1/4 of the width (text takes 3/4)
+         * - '100%': Image takes full width below text
+         */
+        this.imageProportion = '1/3';
+        /**
+         * Image alt text for accessibility
+         */
+        this.alt = '';
+        /**
+         * Whether to show a second typography lockup section
+         */
+        this.showSecondLockup = false;
+    }
+    render() {
+        const isFullWidth = this.imageProportion === '100%';
+        const isImageLeft = this.imagePosition === 'left';
+        const containerClasses = {
+            'text-image': true,
+            'text-image--full-width': isFullWidth,
+            'text-image--side-by-side': !isFullWidth,
+            'text-image--image-left': isImageLeft && !isFullWidth,
+            'text-image--image-right': !isImageLeft && !isFullWidth,
+            [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,
+        };
+        const renderTypographyLockup = (isSecond = false) => {
+            const prefix = isSecond ? 'second-' : '';
+            return (h("div", { class: `text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}` }, h("div", { class: "text-image__copy" }, h("div", { class: "text-image__heading" }, h("slot", { name: isSecond ? 'second-heading' : undefined })), h("div", { class: "text-image__description" }, h("slot", { name: `${prefix}description` }))), h("div", { class: "text-image__buttons" }, h("slot", { name: `${prefix}buttons` }))));
+        };
+        const renderImage = () => {
+            if (!this.src)
+                return null;
+            return (h("div", { class: "text-image__image-wrapper" }, h("af-image", { src: this.src, alt: this.alt })));
+        };
+        // For full-width layout, text is always above image
+        if (isFullWidth) {
+            return (h(Host, null, h("div", { class: containerClasses }, h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)), renderImage())));
+        }
+        // For side-by-side layouts
+        const textContent = (h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)));
+        const imageContent = renderImage();
+        return (h(Host, null, h("div", { class: containerClasses }, isImageLeft ? ([imageContent, textContent]) : ([textContent, imageContent]))));
+    }
+    static get is() { return "af-text-image"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-text-image.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-text-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imagePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the image relative to the text content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-position",
+                "defaultValue": "'right'"
+            },
+            "imageProportion": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'1/3' | '1/4' | '100%'",
+                    "resolved": "\"1/3\" | \"1/4\" | \"100%\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Proportion of the image in the layout\n- '1/3': Image takes 1/3 of the width (text takes 2/3)\n- '1/4': Image takes 1/4 of the width (text takes 3/4)\n- '100%': Image takes full width below text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-proportion",
+                "defaultValue": "'1/3'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image alt text for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "showSecondLockup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a second typography lockup section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-second-lockup",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-text-image.js.map

package/dist/collection/components/af-text-image/af-text-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-text-image.js","sourceRoot":"","sources":["../../../src/components/af-text-image/af-text-image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImage composite component that combines typography content with an image.\n * Supports various layout configurations with image position and proportion options.\n */\n@Component({\n  tag: 'af-text-image',\n  styleUrl: 'af-text-image.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTextImage {\n  /**\n   * Position of the image relative to the text content\n   */\n  @Prop() imagePosition: 'left' | 'right' = 'right';\n\n  /**\n   * Proportion of the image in the layout\n   * - '1/3': Image takes 1/3 of the width (text takes 2/3)\n   * - '1/4': Image takes 1/4 of the width (text takes 3/4)\n   * - '100%': Image takes full width below text\n   */\n  @Prop() imageProportion: '1/3' | '1/4' | '100%' = '1/3';\n\n  /**\n   * Image source URL\n   */\n  @Prop() src?: string;\n\n  /**\n   * Image alt text for accessibility\n   */\n  @Prop() alt: string = '';\n\n  /**\n   * Whether to show a second typography lockup section\n   */\n  @Prop() showSecondLockup: boolean = false;\n\n  render() {\n    const isFullWidth = this.imageProportion === '100%';\n    const isImageLeft = this.imagePosition === 'left';\n\n    const containerClasses = {\n      'text-image': true,\n      'text-image--full-width': isFullWidth,\n      'text-image--side-by-side': !isFullWidth,\n      'text-image--image-left': isImageLeft && !isFullWidth,\n      'text-image--image-right': !isImageLeft && !isFullWidth,\n      [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,\n    };\n\n    const renderTypographyLockup = (isSecond: boolean = false) => {\n      const prefix = isSecond ? 'second-' : '';\n      return (\n        <div class={`text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}`}>\n          <div class=\"text-image__copy\">\n            <div class=\"text-image__heading\">\n              <slot name={isSecond ? 'second-heading' : undefined}></slot>\n            </div>\n            <div class=\"text-image__description\">\n              <slot name={`${prefix}description`}></slot>\n            </div>\n          </div>\n          <div class=\"text-image__buttons\">\n            <slot name={`${prefix}buttons`}></slot>\n          </div>\n        </div>\n      );\n    };\n\n    const renderImage = () => {\n      if (!this.src) return null;\n      return (\n        <div class=\"text-image__image-wrapper\">\n          <af-image src={this.src} alt={this.alt}></af-image>\n        </div>\n      );\n    };\n\n    // For full-width layout, text is always above image\n    if (isFullWidth) {\n      return (\n        <Host>\n          <div class={containerClasses}>\n            <div class=\"text-image__content\">\n              {renderTypographyLockup()}\n              {this.showSecondLockup && renderTypographyLockup(true)}\n            </div>\n            {renderImage()}\n          </div>\n        </Host>\n      );\n    }\n\n    // For side-by-side layouts\n    const textContent = (\n      <div class=\"text-image__content\">\n        {renderTypographyLockup()}\n        {this.showSecondLockup && renderTypographyLockup(true)}\n      </div>\n    );\n\n    const imageContent = renderImage();\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {isImageLeft ? (\n            [imageContent, textContent]\n          ) : (\n            [textContent, imageContent]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n\n"]}

package/dist/collection/components/af-text-image-nest/af-text-image-nest.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Base Container
+   ========================================================================== */
+
+.text-image-nest {
+  width: 100%;
+  position: relative;
+}
+
+/* ==========================================================================
+   Content Layout
+   ========================================================================== */
+
+.nest__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+/* ==========================================================================
+   Content Grid
+   ========================================================================== */
+
+.nest__grid {
+  display: grid;
+  gap: 40px;
+  width: 100%;
+}
+
+/* Single layout - full width */
+.grid-single {
+  grid-template-columns: 1fr;
+}
+
+/* 2-column grid */
+.grid-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* 3-column grid */
+.grid-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 4-column grid */
+.grid-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* Stacked layout - full width with larger gap for alternating rows */
+.grid-stacked {
+  grid-template-columns: 1fr;
+  gap: 48px;
+}
+
+/* ==========================================================================
+   Footer Buttons
+   ========================================================================== */
+
+.nest__footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.nest__footer:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  /* Content gap */
+  .nest__content {
+    gap: 32px;
+  }
+
+  /* All grids collapse to single column on mobile */
+  .nest__grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  /* Stacked layout gap on mobile */
+  .grid-stacked {
+    gap: 40px;
+  }
+
+  /* Footer buttons stack vertically on mobile */
+  .nest__footer {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+/* ==========================================================================
+   Slot Content Styling
+   ========================================================================== */
+
+::slotted(*) {
+  margin: 0;
+}

package/dist/collection/components/af-text-image-nest/af-text-image-nest.js

@@ -0,0 +1,71 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TextImageNest is a layout component that arranges multiple text-image content pieces
+ * in various grid layouts with optional footer buttons.
+ *
+ * This component inherits theming from a parent Section or theme-providing container.
+ * Wrap it in an af-section to apply themes.
+ *
+ * Supports multiple layout variants:
+ * - `single`: Full-width single item (side-by-side image + text)
+ * - `grid-2`: 2-column grid with stacked items
+ * - `grid-3`: 3-column grid with stacked items
+ * - `grid-4`: 4-column grid with stacked items
+ * - `stacked`: Alternating rows of side-by-side content
+ */
+export class AfTextImageNest {
+    constructor() {
+        /**
+         * Layout variant for the content grid
+         */
+        this.layout = 'grid-3';
+    }
+    render() {
+        const containerClasses = {
+            'text-image-nest': true,
+            [`layout-${this.layout}`]: true,
+        };
+        const gridClasses = {
+            'nest__grid': true,
+            [`grid-${this.layout}`]: true,
+        };
+        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+    }
+    static get is() { return "af-text-image-nest"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-text-image-nest.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-text-image-nest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked'",
+                    "resolved": "\"grid-2\" | \"grid-3\" | \"grid-4\" | \"single\" | \"stacked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout variant for the content grid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'grid-3'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-text-image-nest.js.map

package/dist/collection/components/af-text-image-nest/af-text-image-nest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-text-image-nest.js","sourceRoot":"","sources":["../../../src/components/af-text-image-nest/af-text-image-nest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,eAAe;IAN5B;QAOE;;WAEG;QACK,WAAM,GAA0D,QAAQ,CAAC;KA+BlF;IA7BC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,iBAAiB,EAAE,IAAI;YACvB,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAChC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,YAAY,EAAE,IAAI;YAClB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,eAAe;oBAExB,4DAAK,KAAK,EAAE,WAAW;wBACrB,8DAAa,CACT;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImageNest is a layout component that arranges multiple text-image content pieces\n * in various grid layouts with optional footer buttons.\n * \n * This component inherits theming from a parent Section or theme-providing container.\n * Wrap it in an af-section to apply themes.\n * \n * Supports multiple layout variants:\n * - `single`: Full-width single item (side-by-side image + text)\n * - `grid-2`: 2-column grid with stacked items\n * - `grid-3`: 3-column grid with stacked items\n * - `grid-4`: 4-column grid with stacked items\n * - `stacked`: Alternating rows of side-by-side content\n */\n@Component({\n  tag: 'af-text-image-nest',\n  styleUrl: 'af-text-image-nest.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTextImageNest {\n  /**\n   * Layout variant for the content grid\n   */\n  @Prop() layout: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked' = 'grid-3';\n\n  render() {\n    const containerClasses = {\n      'text-image-nest': true,\n      [`layout-${this.layout}`]: true,\n    };\n\n    const gridClasses = {\n      'nest__grid': true,\n      [`grid-${this.layout}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"nest__content\">\n            {/* Content Grid */}\n            <div class={gridClasses}>\n              <slot></slot>\n            </div>\n\n            {/* Footer Buttons */}\n            <div class=\"nest__footer\">\n              <slot name=\"buttons\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}