@affinda/wc 0.0.14 → 0.0.16

package/dist/components/p-C0f6y_zg.js

@@ -0,0 +1,94 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-Dvi1lz3x.js';
+import { d as defineCustomElement$1 } from './p-BMp8QbY-.js';
+
+const afFeatureCardCss = ".sc-af-feature-card-h{display:block;--af-card-padding:0;--af-card-gap:0}[card-size=\"default\"].sc-af-feature-card-h{width:544px}[card-size=\"large\"].sc-af-feature-card-h{width:777px}[card-size=\"flexible\"].sc-af-feature-card-h{display:flex;width:100%;height:100%}.feature-card.sc-af-feature-card{overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--border-radius-card-level-1, 32px);width:100%;height:100%}.feature-card--layout-full-bleed.sc-af-feature-card{background:var(--background-base, var(--colour-brand-inkwell, #14343b))}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:660px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:480px}.feature-card__background.sc-af-feature-card{position:absolute;inset:0;pointer-events:none;z-index:0}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right:0;backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1;padding:124px 32px 32px 32px;--af-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--af-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--af-typography-body-default:var(--typography-body-dark, #ffffff);--colour-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--colour-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--colour-typography-body-default:var(--typography-body-dark, #ffffff)}.feature-card--layout-standard.sc-af-feature-card{background:var(--background-level-1, var(--colour-mistgreen-200, #e8eeed))}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:400px}.feature-card__content.sc-af-feature-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1;padding:40px 32px 12px 32px;flex:1 1 auto}[card-size=\"large\"].sc-af-feature-card-h .feature-card__content.sc-af-feature-card{padding:40px 40px 0 40px}.feature-card__image-area.sc-af-feature-card{position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top}.feature-card.sc-af-feature-card af-typography-lockup.sc-af-feature-card{--colour-typography-heading-primary:var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));--colour-typography-body-default:var(--af-typography-body-default, var(--typography-body-default, #2b484f))}@media (max-width: 768px){.feature-card.sc-af-feature-card{border-radius:var(--border-radius-card-level-1, 24px)}[card-size=\"default\"].sc-af-feature-card-h,[card-size=\"large\"].sc-af-feature-card-h{width:335px}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:442px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:340px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:380px}.feature-card__overlay.sc-af-feature-card{padding:80px 24px 28px 24px}.feature-card__content.sc-af-feature-card{padding:32px 24px 12px 24px}.feature-card__image-area.sc-af-feature-card{height:192px}}";
+
+const AfFeatureCard = /*@__PURE__*/ proxyCustomElement(class AfFeatureCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Theme variant - sets background color and provides theme context.
+         * Only applies to 'standard' layout mode. Defaults to 'mist-green'.
+         */
+        this.theme = 'mist-green';
+        /**
+         * Layout mode for the card.
+         * - 'standard': Theme background with text at top and image at bottom
+         * - 'full-bleed': Image covers entire card with text overlay at bottom
+         */
+        this.layout = 'standard';
+        /**
+         * Card size variant.
+         * - 'default': Fixed 544px × 420px
+         * - 'large': Fixed 777px × 480px
+         * - 'flexible': Fills container (for grid layouts)
+         */
+        this.cardSize = 'default';
+        /**
+         * Heading size for typography lockup (1-5, where 1 is largest).
+         */
+        this.headingSize = 3;
+        /**
+         * Image alt text for accessibility.
+         * Provide meaningful alt text for feature images.
+         * Only use empty string for purely decorative images.
+         */
+        this.imageAlt = '';
+    }
+    render() {
+        const hasImage = !!this.imageSrc;
+        const isFullBleed = this.layout === 'full-bleed';
+        const wrapperClasses = {
+            'feature-card': true,
+            [`feature-card--layout-${this.layout}`]: true,
+            [`feature-card--size-${this.cardSize}`]: true,
+        };
+        // Full-bleed mode: image background with overlay
+        if (isFullBleed) {
+            return (h(Host, null, h("div", { class: wrapperClasses }, hasImage && (h("div", { class: "feature-card__background" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__background-image" }))), h("div", { class: "feature-card__overlay" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "body" })))))));
+        }
+        // Standard mode: theme card with image at bottom
+        const isFlexible = this.cardSize === 'flexible';
+        return (h(Host, null, h("div", { class: wrapperClasses }, h("af-card", { theme: this.theme, stretch: isFlexible }, h("div", { class: "feature-card__content" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "body" })))), hasImage && (h("div", { class: "feature-card__image-area" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__image" })))))));
+    }
+    static get style() { return afFeatureCardCss; }
+}, [262, "af-feature-card", {
+        "theme": [1],
+        "layout": [1],
+        "cardSize": [513, "card-size"],
+        "headingSize": [2, "heading-size"],
+        "imageSrc": [1, "image-src"],
+        "imageAlt": [1, "image-alt"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-feature-card", "af-card", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-feature-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfFeatureCard);
+            }
+            break;
+        case "af-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfFeatureCard as A, defineCustomElement as d };
+//# sourceMappingURL=p-C0f6y_zg.js.map
+
+//# sourceMappingURL=p-C0f6y_zg.js.map

package/dist/components/p-C0f6y_zg.js.map

@@ -0,0 +1 @@
+{"file":"p-C0f6y_zg.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,knHAAknH;;MCsB9nH,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAA8B,UAAU;AAEtD;;;;;AAKG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAqC,SAAS;AAE/E;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAO1C;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAkF9B;IAhFC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,YAAY;AAEhD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,wBAAwB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;AAC7C,YAAA,CAAC,sBAAsB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAC9C;;QAGD,IAAI,WAAW,EAAE;YACf,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,gCAAgC,EAAA,CACtC,CACE,CACP,EAGD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,CACF,CACD;;;AAKX,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,UAAU;AAE/C,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAA,EAE7C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,EAGL,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,CACE,CACP,CACO,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n   Feature Card - Figma Specs\n   \n   Desktop Full-bleed: 544px × 660px, radius 32px\n   Desktop Standard default: 544px width, radius 32px\n   Desktop Standard large: 777px width, radius 32px\n   Mobile Full-bleed: 335px × 442px, radius 24px\n   Mobile Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* ==========================================================================\n   Host Element - Controls outer dimensions\n   ========================================================================== */\n\n:host {\n  display: block;\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n  width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n  width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Card Styles\n   ========================================================================== */\n\n.feature-card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-card-level-1, 32px);\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Full Bleed Layout Mode\n   Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n   ========================================================================== */\n\n.feature-card--layout-full-bleed {\n  background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n  height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n  min-height: 480px;\n}\n\n.feature-card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.feature-card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  z-index: 1;\n  /* Desktop: pt-124px px-32px pb-32px */\n  padding: 124px 32px 32px 32px;\n\n  /* White text on dark overlay */\n  --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-body-default: var(--typography-body-dark, #ffffff);\n  --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n   Standard Layout Mode\n   \n   Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n   \n   When cardSize=\"flexible\", af-card receives stretch prop which enables\n   the flex chain. Content grows to fill space, image stays at bottom.\n   ========================================================================== */\n\n.feature-card--layout-standard {\n  background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n  min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n  /* Desktop default: pt-40px px-32px pb-12px */\n  padding: 40px 32px 12px 32px;\n  flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n   Image Area (Standard Layout)\n   Figma: 160px height (desktop), 192px height (mobile)\n   ========================================================================== */\n\n.feature-card__image-area {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.feature-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n.feature-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n  --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   \n   Figma:\n   - Full-bleed: 335px × 442px, radius 24px\n   - Standard: 335px width, radius 24px\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .feature-card {\n    border-radius: var(--border-radius-card-level-1, 24px);\n  }\n\n  /* Mobile fixed widths on host */\n  :host([card-size=\"default\"]),\n  :host([card-size=\"large\"]) {\n    width: 335px;\n  }\n\n  /* Mobile full-bleed height: 442px */\n  :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n  :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n    height: 442px;\n  }\n\n  /* Mobile flexible minimum heights */\n  :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n    min-height: 340px;\n  }\n\n  :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n    min-height: 380px;\n  }\n\n  /* Mobile overlay padding: pt-80px px-24px pb-28px */\n  .feature-card__overlay {\n    padding: 80px 24px 28px 24px;\n  }\n\n  /* Mobile content padding: pt-32px px-24px pb-12px */\n  .feature-card__content {\n    padding: 32px 24px 12px 24px;\n  }\n\n  /* Mobile image area: 192px height */\n  .feature-card__image-area {\n    height: 192px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CCAq3Zj6.js

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-Dvi1lz3x.js';
+import { d as defineCustomElement$1 } from './p-BMp8QbY-.js';
+
+const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
+
+const AfIllustratedCard = /*@__PURE__*/ proxyCustomElement(class AfIllustratedCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Theme variant - sets background color and provides theme context.
+         * Defaults to 'mist-green'.
+         */
+        this.theme = 'mist-green';
+        /**
+         * Responsive breakpoint for typography sizing.
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Card size variant (applies to desktop only).
+         */
+        this.cardSize = 'default';
+    }
+    render() {
+        const wrapperClasses = {
+            'illustrated-card': true,
+            [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
+            [`illustrated-card--size-${this.cardSize}`]: true,
+        };
+        return (h(Host, { key: '60f265c32638f31318bcb0292b108cc1989af937' }, h("div", { key: '25d4c1f7652930f7e6948fef7ff33c21448dcb0f', class: wrapperClasses }, h("af-card", { key: '3b6dcf78a697a100273447de8ac6c19cc774bf1c', theme: this.theme }, h("div", { key: '4f1268ae1c60812414414423ec4af94ab3ee8b72', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '346399ff84a4c2d22b201e0296f47a9b3fd5ab0a', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", { key: '6e164be82cc05eb6debffc4ec24af5653f6a1306' }), h("span", { key: 'd0266f34ec02d44b76eba1e0ccf9c4856c08f33c', slot: "description" }, h("slot", { key: '6b6d659c54e83419f3b5e452b64fada7ba33e257', name: "body" })))), h("div", { key: '1319568917cdce5d2d37294af416dcfe58b1c4b5', class: "illustrated-card__illustration-area" }, h("slot", { key: 'bdea39d0db9615de5a1a6535f845d0c392604e74', name: "illustration" }))))));
+    }
+    static get style() { return afIllustratedCardCss; }
+}, [262, "af-illustrated-card", {
+        "theme": [1],
+        "breakpoint": [1],
+        "cardSize": [1, "card-size"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-illustrated-card", "af-card", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-illustrated-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIllustratedCard);
+            }
+            break;
+        case "af-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfIllustratedCard as A, defineCustomElement as d };
+//# sourceMappingURL=p-CCAq3Zj6.js.map
+
+//# sourceMappingURL=p-CCAq3Zj6.js.map

package/dist/components/p-CCAq3Zj6.js.map

@@ -0,0 +1 @@
+{"file":"p-CCAq3Zj6.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCoBn5D,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAqClD;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n * \n * Uses a theme background with text at top and an illustration from\n * @affinda/illustrations at the bottom.\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CZyCImor.js

@@ -0,0 +1,127 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));cursor:default}.required{color:var(--forms-fields-error, #be292a);margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--buttons-secondary-stroke, #14343b);outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));margin:0}.textarea-container{display:flex;background:var(--forms-fields-bg-default, #ffffff);border:1px solid var(--forms-fields-stroke-default, #d0d6d8);border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--forms-fields-bg-hover, #f3f5f5)}.textarea-container.focused{background:var(--forms-fields-bg-default, #ffffff);border-color:var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));box-shadow:0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b)}.textarea-container.error{border-color:var(--forms-fields-stroke-error, #be292a)}.textarea-container.disabled{background:var(--forms-fields-bg-disabled, #e8ebeb);border-color:var(--forms-fields-stroke-default, #d0d6d8);cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--forms-fields-placeholder, #60767b);opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--forms-fields-placeholder, #60767b);resize:none}.textarea:disabled::placeholder{color:var(--forms-fields-placeholder, #60767b)}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--forms-fields-error, #be292a)}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-error, #be292a)}";
+
+const AfTextarea = /*@__PURE__*/ proxyCustomElement(class AfTextarea extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afInput = createEvent(this, "afInput");
+        this.afBlur = createEvent(this, "afBlur");
+        this.afFocus = createEvent(this, "afFocus");
+        this.afInfoClick = createEvent(this, "afInfoClick");
+        /**
+         * The current value of the textarea
+         */
+        this.value = '';
+        /**
+         * Whether the textarea is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the textarea is required
+         */
+        this.required = false;
+        /**
+         * Whether the textarea is read-only
+         */
+        this.readonly = false;
+        /**
+         * Whether to show the info icon next to the label
+         */
+        this.showInfoIcon = false;
+        /**
+         * Number of visible rows (height)
+         */
+        this.rows = 4;
+        /**
+         * Whether the textarea is resizable
+         */
+        this.resize = 'vertical';
+        this.isFocused = false;
+        this.isHovered = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.afInput.emit({ value: this.value });
+        };
+        this.handleFocus = () => {
+            this.isFocused = true;
+            this.afFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.isFocused = false;
+            this.afBlur.emit();
+        };
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+        };
+        this.handleInfoClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.afInfoClick.emit();
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        const hasValue = !!(this.value && this.value.length > 0);
+        const wrapperClasses = {
+            'textarea-wrapper': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused,
+            'populated': hasValue
+        };
+        const textareaContainerClasses = {
+            'textarea-container': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused
+        };
+        return (h(Host, { key: '84f322a374d364669942e9153c6ba42221af1059' }, h("div", { key: '4b5a62e919a479bcf741f2d1d9e39a7b0e1e49ac', class: wrapperClasses }, this.label && (h("div", { key: 'e73b88c28588b8f3e5b9823467e8c972fd671391', class: "label-row" }, h("label", { key: '01c16777469e037495997efc2cacc51778fcd9c7', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '6da50443dadd3a6eec5655b4ff2fa19affa38006', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'c731c726f54946273a330c0173f09faeb9fe583b', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '24a1ee4fb10ebd9a84a897cefef09ad7e7b63565', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3523e8495fc5ffa06d793318f55ba79043174931', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd2caa0b33fccc6289f00fc22fc329df52d86a6ed', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db8d8ee03abe2638265d192be6efb992a6041199', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '8325f2fc490d8261a596398da7cc68d74ccfce11', name: "label-end" }))), this.description && (h("p", { key: '7db9b0e06615f5a13b7759cd81c23ee6ab124769', class: "description" }, this.description)), h("div", { key: '939c306f7a56735956e2ef4badeb4cfa39abf759', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '0dffd719ed83955990ae1935fb8d39ab92fd9b94', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '1f7f83da7518216eb63ff9cb685ffb92b3b37fb1', class: "error-row", id: "error-message" }, h("span", { key: 'a1af53a449805506ac0abddae3a236232a538bd9', class: "error-icon" }, h("svg", { key: 'b52e5c14a8986c502e1e0dce8a95c7d381c7a8e3', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af8c97b747c960065f7461e84c893e644b66d9c5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '145226126e4ba52c6234b3c454e43d87b495789c', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '7b94917ac5c96c6abbfc93826b07fa967b49506a', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '9f097e0c43b1a6b19d0275fed8a216e901ce2d86', class: "error-text" }, this.error))))));
+    }
+    static get style() { return afTextareaCss; }
+}, [257, "af-textarea", {
+        "label": [1],
+        "description": [1],
+        "placeholder": [1],
+        "value": [1025],
+        "name": [1],
+        "disabled": [516],
+        "required": [4],
+        "readonly": [4],
+        "error": [1],
+        "showInfoIcon": [4, "show-info-icon"],
+        "rows": [2],
+        "maxlength": [2],
+        "minlength": [2],
+        "resize": [1],
+        "isFocused": [32],
+        "isHovered": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-textarea"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-textarea":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTextarea);
+            }
+            break;
+    } });
+}
+
+export { AfTextarea as A, defineCustomElement as d };
+//# sourceMappingURL=p-CZyCImor.js.map
+
+//# sourceMappingURL=p-CZyCImor.js.map

package/dist/components/p-CZyCImor.js.map

@@ -0,0 +1 @@
+{"file":"p-CZyCImor.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.textarea-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sds-size-space-200, 8px);\n  width: 100%;\n}\n\n/* Label row */\n.label-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.label {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--forms-fields-error, #be292a);\n  margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n.info-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.info-icon:hover {\n  opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n  outline: 2px solid var(--buttons-secondary-stroke, #14343b);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Description */\n.description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n  display: flex;\n  background: var(--forms-fields-bg-default, #ffffff);\n  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\n  border-radius: var(--radii-input, 8px);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Hover state */\n.textarea-container.hovered {\n  background: var(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/* Focus state */\n.textarea-container.focused {\n  background: var(--forms-fields-bg-default, #ffffff);\n  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n  box-shadow: \n    0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/* Error state */\n.textarea-container.error {\n  border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n  background: var(--forms-fields-bg-disabled, #e8ebeb);\n  border-color: var(--forms-fields-stroke-default, #d0d6d8);\n  cursor: not-allowed;\n}\n\n/* Native textarea */\n.textarea {\n  flex: 1;\n  min-width: 0;\n  min-height: 108px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n  resize: vertical;\n}\n\n.textarea::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n  opacity: 1;\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--forms-fields-placeholder, #60767b);\n  resize: none;\n}\n\n.textarea:disabled::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n}\n\n/* Error row */\n.error-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.error-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--forms-fields-error, #be292a);\n}\n\n.error-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.error-text {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--forms-fields-error, #be292a);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-textarea',\n  styleUrl: 'af-textarea.css',\n  shadow: true\n})\nexport class AfTextarea {\n  /**\n   * The label text for the textarea\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the textarea\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The name of the textarea for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the textarea is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the textarea is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the textarea is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Number of visible rows (height)\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Whether the textarea is resizable\n   */\n  @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /**\n   * Emitted when the textarea value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the textarea loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private textareaEl?: HTMLTextAreaElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n\n    const wrapperClasses = {\n      'textarea-wrapper': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const textareaContainerClasses = {\n      'textarea-container': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"textarea\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button \n                  type=\"button\" \n                  class=\"info-icon\" \n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Textarea container */}\n          <div \n            class={textareaContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Native textarea */}\n            <textarea\n              ref={(el) => this.textareaEl = el ?? undefined}\n              id=\"textarea\"\n              class=\"textarea\"\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              readonly={this.readonly}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              style={{ resize: this.resize }}\n              aria-invalid={hasError ? 'true' : undefined}\n              aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-C_M8AOaj.js

@@ -0,0 +1,65 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afRadioCss = ":host{display:inline-block}.radio{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));user-select:none}.radio.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.control{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-radio, 9999px);border:1px solid var(--forms-control-stroke, #d0d6d8);background:var(--forms-control-bg-default, #ffffff);transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));border-color:var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b))}.control.disabled{background:var(--forms-control-bg-default-disabled, #e8ebeb);border-color:var(--forms-control-stroke-disabled, #d0d6d8)}.control.checked.disabled{background:var(--forms-control-bg-active-disabled, #708380);border-color:var(--forms-control-bg-active-disabled, #708380)}.radio:not(.disabled):hover .control{border-color:var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{box-shadow:0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);outline:none}.dot{width:8px;height:8px;border-radius:50%;background:#ffffff}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+
+const AfRadio = /*@__PURE__*/ proxyCustomElement(class AfRadio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afChange = createEvent(this, "afChange");
+        /**
+         * Whether the radio is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the radio is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled || this.checked)
+                return;
+            this.checked = true;
+            this.afChange.emit({ checked: this.checked, value: this.value });
+        };
+    }
+    render() {
+        const radioClasses = {
+            'radio': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '6adcdfda7127638527a30f9289f9cd240ec1e11d' }, h("label", { key: '9366569dd10eeeca7f3c3a616b0f523efd3208ec', class: radioClasses }, h("input", { key: '4b63b4285d65e42fc04c9f1f2e02e82abcf71018', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '2e9fa65ff49c95948e6ac3e791f31a8f51f4b0ba', class: controlClasses }, this.checked && (h("span", { key: 'efda09c196af4b1a33bba4da56d3036ee8545905', class: "dot" }))), h("span", { key: 'faf8a3d424418f987d9561d9d903068ce865a494', class: "label" }, h("slot", { key: '9b7d84b6eab1f908708bca461cd49eda3737435b' })))));
+    }
+    static get style() { return afRadioCss; }
+}, [257, "af-radio", {
+        "checked": [1540],
+        "disabled": [516],
+        "name": [1],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfRadio);
+            }
+            break;
+    } });
+}
+
+export { AfRadio as A, defineCustomElement as d };
+//# sourceMappingURL=p-C_M8AOaj.js.map
+
+//# sourceMappingURL=p-C_M8AOaj.js.map

package/dist/components/p-C_M8AOaj.js.map

@@ -0,0 +1 @@
+{"file":"p-C_M8AOaj.js","mappings":";;AAAA,MAAM,UAAU,GAAG,umDAAumD;;MCY7mD,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;AACnC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClE,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACxB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,cAAc,EAAA,EACxB,IAAI,CAAC,OAAO,KACX,6DAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CAC1B,CACI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.radio.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom radio control */\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-radio, 9999px);\n  border: 1px solid var(--forms-control-stroke, #d0d6d8);\n  background: var(--forms-control-bg-default, #ffffff);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  border-color: var(--forms-control-stroke-disabled, #d0d6d8);\n}\n\n.control.checked.disabled {\n  background: var(--forms-control-bg-active-disabled, #708380);\n  border-color: var(--forms-control-bg-active-disabled, #708380);\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control {\n  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Inner dot */\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && (\n              <span class=\"dot\"></span>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-Cqp0DdgH.js

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-sand{background-color:var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-sand:hover{background-color:var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d))}.tag.variant-light{background-color:var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));color:var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-light:hover{background-color:var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3))}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
+
+const AfTag = /*@__PURE__*/ proxyCustomElement(class AfTag extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The size of the tag
+         * - `x-small` - Compact tag with minimal padding
+         * - `small` - Small tag with moderate padding
+         * - `large` - Large tag with generous padding
+         */
+        this.size = 'small';
+        /**
+         * The visual variant of the tag
+         * - `sand` - Soft-clay/tan colored background (default)
+         * - `light` - Mist-green/light colored background
+         */
+        this.variant = 'sand';
+    }
+    render() {
+        const TagElement = this.href ? 'a' : 'span';
+        const linkProps = this.href ? { href: this.href } : {};
+        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+                'tag': true,
+                [`size-${this.size}`]: true,
+                [`variant-${this.variant}`]: true,
+            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+    }
+    static get style() { return afTagCss; }
+}, [257, "af-tag", {
+        "size": [1],
+        "variant": [1],
+        "href": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTag);
+            }
+            break;
+    } });
+}
+
+export { AfTag as A, defineCustomElement as d };
+//# sourceMappingURL=p-Cqp0DdgH.js.map
+
+//# sourceMappingURL=p-Cqp0DdgH.js.map

package/dist/components/p-Cqp0DdgH.js.map

@@ -0,0 +1 @@
+{"file":"p-Cqp0DdgH.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n/* Focus state */\n.tag:focus {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus visible for keyboard navigation */\n.tag:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}