@affinda/wc 0.0.6 → 0.0.8

package/dist/components/p-BHNNF4PT.js

@@ -1,35 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-zwrcq-N2.js';
-
-const afNavbarCss = ":host{display:block;width:100%;position:absolute;top:32px;left:0;right:0;z-index:10}.navbar-container{padding:0 80px;box-sizing:border-box;position:relative}.navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box}.navbar-left{display:flex;align-items:center;gap:32px}.logo{display:flex;align-items:center;flex-shrink:0}.nav-links{display:flex;align-items:center;gap:8px}.navbar-right{display:flex;align-items:center;gap:20px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center}@media (max-width: 1024px){.navbar-container{padding:24px 40px 0}.navbar-left{gap:24px}.nav-links{gap:4px}}@media (max-width: 767px){.navbar-container{padding:16px 16px 0}.navbar{padding:8px 16px;flex-direction:column;border-radius:16px;gap:16px}.navbar-left{width:100%;flex-direction:column;gap:16px;align-items:flex-start}.nav-links{width:100%;flex-direction:column;align-items:stretch;gap:0}.navbar-right{width:100%;flex-direction:column;gap:12px;align-items:stretch}.nav-actions{width:100%;flex-direction:column;align-items:stretch;gap:0}.nav-button{width:100%}}";
-
-const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "start" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: '9d144675950a723d9ff004f5e1d0bad83f372d7e', name: "end" })), h("div", { key: 'bd10fc8edaef5f85382e53abf12b0686ec4c6acd', class: "nav-button" }, h("slot", { key: 'c3c01e44c37a1d51f20a29ce059a02a94094f377', name: "button" })))))));
-    }
-    static get style() { return afNavbarCss; }
-}, [257, "af-navbar"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-navbar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-navbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfNavbar);
-            }
-            break;
-    } });
-}
-
-export { AfNavbar as A, defineCustomElement as d };
-//# sourceMappingURL=p-BHNNF4PT.js.map
-
-//# sourceMappingURL=p-BHNNF4PT.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BHNNF4PT.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wsCAAwsC;;MCW/sC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IACnB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAEjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAQ,CACpB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB,CACF,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=shadow","src/components/af-navbar/af-navbar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  position: absolute;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n\n.navbar-container {\n  padding: 0 80px;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-container {\n    padding: 24px 40px 0;\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .navbar-container {\n    padding: 16px 16px 0;\n  }\n\n  .navbar {\n    padding: 8px 16px;\n    flex-direction: column;\n    border-radius: 16px;\n    gap: 16px;\n  }\n\n  .navbar-left {\n    width: 100%;\n    flex-direction: column;\n    gap: 16px;\n    align-items: flex-start;\n  }\n\n  .nav-links {\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n\n  .navbar-right {\n    width: 100%;\n    flex-direction: column;\n    gap: 12px;\n    align-items: stretch;\n  }\n\n  .nav-actions {\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n\n  .nav-button {\n    width: 100%;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              <div class=\"nav-links\">\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class=\"navbar-right\">\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BpGDzCRf.js

@@ -1,50 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-zwrcq-N2.js';
-
-const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:var(--colour-typography-body-default, #14343b);letter-spacing:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:22px;line-height:28px}.variant-large{font-size:18px;line-height:26px}.variant-medium{font-size:16px;line-height:24px}.variant-small{font-size:14px;line-height:20px}.variant-label-button{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:17px;line-height:20px}.variant-label-tag{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:14px;line-height:1}";
-
-const AfText = /*@__PURE__*/ proxyCustomElement(class AfText extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Text variant */
-        this.variant = 'medium';
-        /** Visual alignment */
-        this.align = 'left';
-        /** Semantic element to render */
-        this.as = 'p';
-    }
-    render() {
-        const Tag = this.as;
-        return (h(Tag, { key: '778a86a185f2416dec867ca2457acb2fe1ad4bcb', class: {
-                'text': true,
-                [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: '2b3ee364c989ca8d233583946e24665df0192fb9' })));
-    }
-    static get style() { return afTextCss; }
-}, [257, "af-text", {
-        "variant": [1],
-        "align": [1],
-        "as": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfText);
-            }
-            break;
-    } });
-}
-
-export { AfText as A, defineCustomElement as d };
-//# sourceMappingURL=p-BpGDzCRf.js.map
-
-//# sourceMappingURL=p-BpGDzCRf.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BpGDzCRf.js","mappings":";;AAAA,MAAM,SAAS,GAAG,2uBAA2uB;;MCOhvB,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA2E,QAAQ;;AAG1F,QAAA,IAAK,CAAA,KAAA,GAAgC,MAAM;;AAG3C,QAAA,IAAE,CAAA,EAAA,GAAmC,GAAG;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS;QAE1B,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 400;\n  color: var(--colour-typography-body-default, #14343b);\n  letter-spacing: 0;\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.variant-large {\n  font-size: 18px;\n  line-height: 26px;\n}\n\n.variant-medium {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.variant-small {\n  font-size: 14px;\n  line-height: 20px;\n}\n\n/* Label variants - use NeuSans Book */\n.variant-label-button {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.variant-label-tag {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 1;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DIyOg-i_.js.map

@@ -1 +0,0 @@
-{"file":"p-DIyOg-i_.js","mappings":";;AAAA,MAAM,YAAY,GAAG,y2BAAy2B;;MCOj3B,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAuC,GAAG;;AAG/C,QAAA,IAAK,CAAA,KAAA,GAAgC,MAAM;AA+BpD;IA7BS,aAAa,GAAA;;AAEnB,QAAA,MAAM,MAAM,GAA2B;AACrC,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE;SACN;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS;QAEvC,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  color: var(--colour-typography-heading-primary, #14343b);\n  letter-spacing: -0.02em;\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n  font-size: 50px;\n  line-height: 1;\n}\n\n@media (min-width: 768px) {\n  .level-xl {\n    font-size: 80px;\n  }\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: 38px;\n  line-height: 1;\n}\n\n@media (min-width: 768px) {\n  .level-1 {\n    font-size: 56px;\n  }\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: 32px;\n  line-height: 1;\n}\n\n@media (min-width: 768px) {\n  .level-2 {\n    font-size: 44px;\n  }\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: 25px;\n  line-height: 1;\n}\n\n@media (min-width: 768px) {\n  .level-3 {\n    font-size: 34px;\n  }\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: 20px;\n  line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    font-size: 24px;\n    line-height: 1.2;\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: 18px;\n  line-height: 1.1;\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    font-size: 20px;\n    line-height: 1.2;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-cKSy1B8M.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ixFAAixF;;MCOxxF,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkD,SAAS;AAE1E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAwCvD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CACzB;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ;SAElC;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-small {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots */\n.icon-left:empty,\n.icon-right:empty {\n  display: none;\n}\n\n.icon-left,\n.icon-right {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Label has additional padding on each side */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n}\n\n.size-default .label {\n  padding: 0 12px;\n  height: 24px;\n}\n\n.size-small .label {\n  padding: 0 8px;\n  height: 20px;\n}\n\n/* Primary variant (ice) */\n.variant-primary {\n  background: var(--colour-brand-ice, #A6FFFB);\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: #8FEBE3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-primary:active:not(.disabled) {\n  background: #7FE2D4;\n  transform: translateY(0);\n}\n\n/* Secondary variant (white) */\n.variant-secondary {\n  background: var(--colour-brand-white, #FFFFFF);\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: #F6FAF9;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: #E8F1EF;\n  transform: translateY(0);\n}\n\n/* Outline variant */\n.variant-outline {\n  background: transparent;\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-outline:hover:not(.disabled) {\n  background: rgba(20, 52, 59, 0.04);\n  transform: translateY(-1px);\n}\n\n.variant-outline:active:not(.disabled) {\n  background: rgba(20, 52, 59, 0.08);\n  transform: translateY(0);\n}\n\n/* Ghost variant (text only) */\n.variant-ghost {\n  background: transparent;\n  border-color: transparent;\n  color: var(--colour-brand-inkwell, #14343B);\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-ghost:hover:not(.disabled) {\n  text-decoration: underline;\n}\n\n.variant-ghost:active:not(.disabled) {\n  opacity: 0.7;\n}\n\n/* Disabled state */\n.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.button {\n  background: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--colour-brand-ice, #A6FFFB);\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-secondary {\n  background: var(--colour-brand-white, #FFFFFF);\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-outline {\n  background: transparent;\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.button.variant-ghost {\n  background: transparent;\n  border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}