@affinda/wc 0.0.1 → 0.0.3

package/dist/collection/components/af-heading/af-heading.css

@@ -0,0 +1,99 @@
+:host {
+  display: block;
+}
+
+.heading {
+  margin: 0;
+  padding: 0;
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-weight: 500;
+  color: #14343b;
+  letter-spacing: -0.02em;
+}
+
+/* Alignment */
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+/* Heading XL */
+.level-xl {
+  font-size: 50px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-xl {
+    font-size: 80px;
+  }
+}
+
+/* Heading 1 */
+.level-1 {
+  font-size: 38px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-1 {
+    font-size: 56px;
+  }
+}
+
+/* Heading 2 */
+.level-2 {
+  font-size: 32px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-2 {
+    font-size: 44px;
+  }
+}
+
+/* Heading 3 */
+.level-3 {
+  font-size: 25px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .level-3 {
+    font-size: 34px;
+  }
+}
+
+/* Heading 4 */
+.level-4 {
+  font-size: 20px;
+  line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+  .level-4 {
+    font-size: 24px;
+    line-height: 1.2;
+  }
+}
+
+/* Heading 5 */
+.level-5 {
+  font-size: 18px;
+  line-height: 1.1;
+}
+
+@media (min-width: 768px) {
+  .level-5 {
+    font-size: 20px;
+    line-height: 1.2;
+  }
+}

package/dist/collection/components/af-heading/af-heading.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+export class AfHeading {
+    constructor() {
+        /** Heading level */
+        this.level = '1';
+        /** Visual alignment */
+        this.align = 'left';
+    }
+    getHeadingTag() {
+        // Map display levels to semantic HTML tags
+        const tagMap = {
+            'xl': 'h1',
+            '1': 'h1',
+            '2': 'h2',
+            '3': 'h3',
+            '4': 'h4',
+            '5': 'h5'
+        };
+        return tagMap[this.level] || 'h1';
+    }
+    render() {
+        const Tag = this.getHeadingTag();
+        return (h(Tag, { key: '1d3f37c8d067c3c9d0ec7f10422478ab41c990b2', class: {
+                'heading': true,
+                [`level-${this.level}`]: true,
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: 'dcba9d00393f818cfceeb5eba5cc2bd874927dfd' })));
+    }
+    static get is() { return "af-heading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-heading.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-heading.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xl' | '1' | '2' | '3' | '4' | '5'",
+                    "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "'1'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-heading.js.map

package/dist/collection/components/af-heading/af-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;KA+BrD;IA7BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/af-icon-button/af-icon-button.css

@@ -1,70 +1,169 @@
 :host {
-  display: inline-flex;
+  display: inline-block;
 }
 
-button {
-  --button-size-sm: 36px;
-  --button-size-md: 44px;
-  width: var(--button-size-md);
-  height: var(--button-size-md);
-  border-radius: 50%;
-  border: none;
+.icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
-  color: var(--af-color-brand-primary-500);
+  border-radius: 50%;
   cursor: pointer;
-  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
-  box-shadow: none;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  text-decoration: none;
+  padding: 0;
 }
 
-button.size-sm {
-  width: var(--button-size-sm);
-  height: var(--button-size-sm);
+/* Size variants */
+.size-large {
+  width: 72px;
+  height: 72px;
+  padding: 24px;
 }
 
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  box-shadow: none;
+.size-large .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.size-medium {
+  width: 48px;
+  height: 48px;
+  padding: 12px;
 }
 
-button.variant-solid {
-  background: linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));
-  color: var(--af-color-fg-inverse);
-  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);
+.size-medium .icon {
+  width: 24px;
+  height: 24px;
 }
 
-button.variant-soft {
-  background: rgba(124, 58, 237, 0.14);
-  color: var(--af-color-brand-primary-500);
+.size-small {
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+}
+
+.size-small .icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* Icon slot */
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-button.variant-ghost {
-  border: 1px solid rgba(124, 58, 237, 0.4);
+.icon ::slotted(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+/* Primary variant (ice) */
+.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-primary:hover:not(.disabled) {
+  background: #8FEBE3;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-primary:active:not(.disabled) {
+  background: #7FE2D4;
+  transform: translateY(0);
+}
+
+/* Secondary variant (white) */
+.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-secondary:hover:not(.disabled) {
+  background: #F6FAF9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-secondary:active:not(.disabled) {
+  background: #E8F1EF;
+  transform: translateY(0);
+}
+
+/* Outline variant */
+.variant-outline {
   background: transparent;
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
 }
 
-button:is(:hover, :focus-visible) {
+.variant-outline:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
   transform: translateY(-1px);
-  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
 }
 
-button:active {
+.variant-outline:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
   transform: translateY(0);
-  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.2);
 }
 
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5em;
-  height: 1.5em;
+/* Ghost variant */
+.variant-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-ghost:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
+}
+
+.variant-ghost:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
+}
+
+/* Disabled state */
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Remove default button styles */
+button.icon-button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+button.icon-button.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.icon-button.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
 }
 
-:host([disabled]) button {
-  transform: none;
-  box-shadow: none;
+button.icon-button.variant-outline {
+  background: transparent;
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.icon-button.variant-ghost {
+  background: transparent;
+  border: 1px solid transparent;
 }

package/dist/collection/components/af-icon-button/af-icon-button.js

@@ -1,27 +1,35 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class AfIconButton {
     constructor() {
-        /** Visual style of the icon button */
-        this.variant = 'solid';
-        /** Size preset */
-        this.size = 'md';
-        /** Disabled state */
+        /**
+         * The visual variant of the button
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
         this.disabled = false;
-        this.onClick = (event) => {
-            if (this.disabled) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            this.afClick.emit(event);
-        };
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
     }
     render() {
         const classes = {
+            'icon-button': true,
             [`variant-${this.variant}`]: true,
-            [`size-${this.size}`]: true
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
         };
-        return (h("button", { key: '0f63eddac5f4dab95835506b896e437218aa50e1', type: "button", class: classes, part: "base", disabled: this.disabled, "aria-label": this.label, onClick: this.onClick }, h("span", { key: '6400064df3b666cbcc0a4a51523f1cd08dcbe81a', part: "icon", class: "icon" }, h("slot", { key: 'a74fff21c0a3af05da37b12e45db8ca8913bbdea' }))));
+        const content = (h("span", { class: "icon" }, h("slot", null)));
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
     }
     static get is() { return "af-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -41,43 +49,63 @@ export class AfIconButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'solid' | 'soft' | 'ghost'",
-                    "resolved": "\"ghost\" | \"soft\" | \"solid\"",
+                    "original": "'primary' | 'secondary' | 'outline' | 'ghost'",
+                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style of the icon button"
+                    "text": "The visual variant of the button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'solid'"
+                "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md'",
-                    "resolved": "\"md\" | \"sm\"",
+                    "original": "'large' | 'medium' | 'small'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size preset"
+                    "text": "The size of the button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "size",
-                "defaultValue": "'md'"
+                "defaultValue": "'medium'"
             },
-            "label": {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "href": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -89,57 +117,53 @@ export class AfIconButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible label text"
+                    "text": "Optional href to render as a link"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "href"
             },
-            "disabled": {
-                "type": "boolean",
+            "type": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Button type (when not using href)"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "afClick",
-                "name": "afClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Raised when the button is activated"
+                    "text": "Accessible label for screen readers"
                 },
-                "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
     }
 }
 //# sourceMappingURL=af-icon-button.js.map

package/dist/collection/components/af-icon-button/af-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-icon-button.js","sourceRoot":"","sources":["../../../src/components/af-icon-button/af-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,YAAY;IALzB;QAME,sCAAsC;QAC9B,YAAO,GAA+B,OAAO,CAAC;QAEtD,kBAAkB;QACV,SAAI,GAAgB,IAAI,CAAC;QAKjC,qBAAqB;QACI,aAAQ,GAAG,KAAK,CAAC;QAKlC,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;KAuBH;IArBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC5B,CAAC;QAEF,OAAO,CACL,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,6DAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM;gBAC5B,8DAAQ,CACH,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /** Visual style of the icon button */\n  @Prop() variant: 'solid' | 'soft' | 'ghost' = 'solid';\n\n  /** Size preset */\n  @Prop() size: 'sm' | 'md' = 'md';\n\n  /** Accessible label text */\n  @Prop() label?: string;\n\n  /** Disabled state */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Raised when the button is activated */\n  @Event() afClick!: EventEmitter<MouseEvent>;\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.afClick.emit(event);\n  };\n\n  render() {\n    const classes = {\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true\n    };\n\n    return (\n      <button\n        type=\"button\"\n        class={classes}\n        part=\"base\"\n        disabled={this.disabled}\n        aria-label={this.label}\n        onClick={this.onClick}\n      >\n        <span part=\"icon\" class=\"icon\">\n          <slot />\n        </span>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-icon-button.js","sourceRoot":"","sources":["../../../src/components/af-icon-button/af-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAiC,QAAQ,CAAC;QAEtD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAuCxD;IAhCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,YAAM,KAAK,EAAC,MAAM;YAChB,eAAa,CACR,CACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,SAAS,IAC3D,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\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: 'large' | 'medium' | 'small' = 'medium';\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  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-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\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-logo/af-logo.css

@@ -0,0 +1,10 @@
+:host {
+  display: inline-block;
+  color: #14343b;
+}
+
+.logo-svg {
+  display: block;
+  height: 22px;
+  width: auto;
+}

package/dist/collection/components/af-logo/af-logo.js

@@ -0,0 +1,22 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Affinda logo component
+ */
+export class AfLogo {
+    render() {
+        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("svg", { key: '7195b06d8ab5a335e70a1e7310fd753cb3887599', width: "141", height: "22", viewBox: "0 0 141 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "logo-svg" }, h("path", { key: '5bb4bb2f7f6063928c3cfc7938b85291e70bec27', d: "M20.8 9.6c0-1.5-.4-2.7-1.1-3.7-.8-1-1.8-1.5-3.2-1.5-1.3 0-2.4.5-3.2 1.5-.7 1-1.1 2.2-1.1 3.7 0 1.5.4 2.7 1.1 3.7.8 1 1.9 1.5 3.2 1.5 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zm4.2 0c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-2.2 0-4-.8-5.4-2.3-1.4-1.5-2.1-3.5-2.1-5.9 0-2.4.7-4.4 2.1-5.9C13.5 2.2 15.3 1.4 17.5 1.4c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.9zM29.1 17.5h-4.2V4.7h4.2v12.8zm0-14.9h-4.2V.2h4.2v2.4zM43.3 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4z", fill: "currentColor" }), h("path", { key: '7a5a7e54b69475ad6f9d1ddf240e668708a06ff2', d: "M56.9 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4zM68.3 5.9c-.7-.4-1.5-.6-2.4-.6-1.2 0-2.2.4-2.9 1.2-.8.8-1.1 1.9-1.1 3.3 0 1.4.4 2.5 1.1 3.3.8.8 1.7 1.2 2.9 1.2.9 0 1.7-.2 2.4-.6v3.5c-.9.3-1.9.5-2.9.5-2.3 0-4.2-.7-5.6-2.2-1.4-1.5-2.1-3.4-2.1-5.8 0-1.5.3-2.9.9-4.1.6-1.2 1.5-2.2 2.6-2.8 1.1-.7 2.4-1 3.8-1 1.1 0 2.1.2 3.1.6l.2 3.5z", fill: "currentColor" }), h("path", { key: '29ba5bc9bc4fc8068d77dd092f6fbf2dccc2caa2', d: "M80 4.7h4.2v1.6c.7-1.2 1.9-1.9 3.6-1.9 1.3 0 2.3.4 3.1 1.2.8.8 1.2 2 1.2 3.5v8.4h-4.2V9.4c0-1.7-.7-2.5-2-2.5-.7 0-1.2.2-1.6.7-.4.4-.6 1.1-.6 1.9v8h-4.2V4.7h.5zM105.3 17.5h-4.2v-1.1c-.8 1-2 1.5-3.6 1.5-1.4 0-2.6-.5-3.5-1.4-.9-.9-1.4-2.1-1.4-3.6V9.6c0-1.5.5-2.7 1.4-3.6.9-.9 2.1-1.4 3.5-1.4 1.6 0 2.8.5 3.6 1.5V.2h4.2v17.3zm-4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("path", { key: 'd528008c06633218db38e63f0605874f703d3165', d: "M115.8 17.5h-4.2V4.7h4.2v1.1c.8-1 2-1.5 3.6-1.5 1.4 0 2.6.5 3.5 1.4.9.9 1.4 2.1 1.4 3.6v3.3c0 1.5-.5 2.7-1.4 3.6-.9.9-2.1 1.4-3.5 1.4-1.6 0-2.8-.5-3.6-1.5v1.4zm4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("g", { key: 'e3c341f6286afc34b918924fe1ce7d147adcb09a', "clip-path": "url(#clip0)" }, h("path", { key: '1d8c3fbc8995e2017357ceaab53ffd66970fe017', d: "M4.9 9.6c0-1.5-.4-2.7-1.1-3.7C3 4.9 2 4.4.6 4.4c-.3 0-.6 0-.9.1v10.2c.3.1.6.1.9.1 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zM9.1 9.6c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-.7 0-1.4-.1-2.1-.2V.2C.2.1.9 0 1.6 0c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.3z", fill: "currentColor" })), h("defs", { key: 'b10859520274b6db85b3192b314f2a2bc6b41da7' }, h("clipPath", { key: '8834e78ed619077f26809a22f7130f6941f2ef5f', id: "clip0" }, h("path", { key: '5a01632b2fb3c6a6d630afaefc6489cb879f5116', fill: "#fff", d: "M0 0h9.1v17.8H0z" }))))));
+    }
+    static get is() { return "af-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-logo.css"]
+        };
+    }
+}
+//# sourceMappingURL=af-logo.js.map