@affinda/wc 0.0.1

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

@@ -0,0 +1,70 @@
+import { h } from "@stencil/core";
+export class AfCard {
+    constructor() {
+        /** Visual style of the card */
+        this.variant = 'surface';
+    }
+    render() {
+        const classes = {
+            [`variant-${this.variant}`]: true,
+            [`accent-${this.accent}`]: Boolean(this.accent)
+        };
+        return (h("article", { key: '6341b7150eb902027923228343dd017fee6aef32', class: classes, part: "base" }, this.accent ? h("span", { class: "accent", part: "accent", "aria-hidden": "true" }) : null, h("div", { key: '06256637c0e9e3a150b59fbc6f73d5b2867729ad', class: "content", part: "content" }, h("header", { key: '8f8c893d528cece13d1e9de7115b490a5ed84c88', class: "header", part: "header" }, h("slot", { key: 'b404fcc38918bb952678d78c035e9e7ad6e797ef', name: "header" })), h("div", { key: '2028736e547446fe12469cf74aec97daf6e3f10a', class: "body", part: "body" }, h("slot", { key: 'a2110bc4cfa174e4514d572d7a9cd28652c7da9a' })), h("footer", { key: '221a8202625e2794846ff7d68af45f9046fcfe58', class: "footer", part: "footer" }, h("slot", { key: 'b20d0e41962dbe766116845e2ef20c68003be7a7', name: "footer" })))));
+    }
+    static get is() { return "af-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'surface' | 'elevated'",
+                    "resolved": "\"elevated\" | \"surface\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style of the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'surface'"
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'brand' | 'success' | 'neutral'",
+                    "resolved": "\"brand\" | \"neutral\" | \"success\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accent colour strip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-card.js","sourceRoot":"","sources":["../../../src/components/af-card/af-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,+BAA+B;QACvB,YAAO,GAA2B,SAAS,CAAC;KA4BrD;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;SAChD,CAAC;QAEF,OAAO,CACL,gEAAS,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM;YACjC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,GAAQ,CAAC,CAAC,CAAC,IAAI;YACnF,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,+DAAQ,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB;gBACT,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;oBAC3B,8DAAa,CACT;gBACN,+DAAQ,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACL,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: true\n})\nexport class AfCard {\n  /** Visual style of the card */\n  @Prop() variant: 'surface' | 'elevated' = 'surface';\n\n  /** Optional accent colour strip */\n  @Prop() accent?: 'brand' | 'success' | 'neutral';\n\n  render() {\n    const classes = {\n      [`variant-${this.variant}`]: true,\n      [`accent-${this.accent}`]: Boolean(this.accent)\n    };\n\n    return (\n      <article class={classes} part=\"base\">\n        {this.accent ? <span class=\"accent\" part=\"accent\" aria-hidden=\"true\"></span> : null}\n        <div class=\"content\" part=\"content\">\n          <header class=\"header\" part=\"header\">\n            <slot name=\"header\"></slot>\n          </header>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <footer class=\"footer\" part=\"footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </article>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,70 @@
+:host {
+  display: inline-flex;
+}
+
+button {
+  --button-size-sm: 36px;
+  --button-size-md: 44px;
+  width: var(--button-size-md);
+  height: var(--button-size-md);
+  border-radius: 50%;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--af-color-brand-primary-500);
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
+  box-shadow: none;
+}
+
+button.size-sm {
+  width: var(--button-size-sm);
+  height: var(--button-size-sm);
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  box-shadow: none;
+}
+
+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);
+}
+
+button.variant-soft {
+  background: rgba(124, 58, 237, 0.14);
+  color: var(--af-color-brand-primary-500);
+}
+
+button.variant-ghost {
+  border: 1px solid rgba(124, 58, 237, 0.4);
+  background: transparent;
+}
+
+button:is(:hover, :focus-visible) {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);
+}
+
+button:active {
+  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;
+}
+
+:host([disabled]) button {
+  transform: none;
+  box-shadow: none;
+}

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

@@ -0,0 +1,145 @@
+import { h } from "@stencil/core";
+export class AfIconButton {
+    constructor() {
+        /** Visual style of the icon button */
+        this.variant = 'solid';
+        /** Size preset */
+        this.size = 'md';
+        /** Disabled state */
+        this.disabled = false;
+        this.onClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            this.afClick.emit(event);
+        };
+    }
+    render() {
+        const classes = {
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true
+        };
+        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' }))));
+    }
+    static get is() { return "af-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-icon-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'soft' | 'ghost'",
+                    "resolved": "\"ghost\" | \"soft\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style of the icon button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size preset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afClick",
+                "name": "afClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Raised when the button is activated"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-icon-button.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,57 @@
+:host {
+  display: block;
+  font-family: var(--af-font-family-sans);
+}
+
+label {
+  display: grid;
+  gap: var(--af-space-2);
+  color: var(--af-color-fg-default);
+}
+
+.label {
+  font-size: 0.95rem;
+  font-weight: var(--af-font-weight-semibold);
+}
+
+.control {
+  position: relative;
+}
+
+input {
+  width: 100%;
+  padding: calc(var(--af-space-2) + 2px) calc(var(--af-space-4) + 8px);
+  border-radius: var(--af-radius-md);
+  border: 1px solid rgba(18, 15, 31, 0.18);
+  background: rgba(255, 255, 255, 0.9);
+  color: inherit;
+  font: inherit;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+input::placeholder {
+  color: var(--af-color-fg-muted);
+  opacity: 0.8;
+}
+
+input:focus-visible {
+  outline: none;
+  border-color: var(--af-color-brand-primary-500);
+  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
+}
+
+label.disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+input:disabled {
+  background: rgba(241, 240, 247, 0.7);
+  cursor: not-allowed;
+}
+
+.description {
+  font-size: 0.825rem;
+  color: var(--af-color-fg-muted);
+}

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

@@ -0,0 +1,193 @@
+import { h } from "@stencil/core";
+let inputIds = 0;
+export class AfInput {
+    constructor() {
+        this.inputId = `af-input-${++inputIds}`;
+        this.descriptionId = `${this.inputId}-desc`;
+        /** Input type attribute */
+        this.type = 'text';
+        /** Current value (mutable so the component stays in sync) */
+        this.value = '';
+        /** Disabled state */
+        this.disabled = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.afInput.emit(this.value);
+        };
+        this.handleChange = () => {
+            this.afChange.emit(this.value);
+        };
+    }
+    render() {
+        const describedBy = this.description ? this.descriptionId : undefined;
+        return (h("label", { key: 'd14267dee125c07311c07bc31f0151448095dba6', part: "label", class: { disabled: this.disabled }, htmlFor: this.inputId }, this.label ? (h("span", { class: "label", part: "label-text" }, this.label)) : null, h("div", { key: 'd3b6428100e25c981650f5faa23df549d587ac10', class: "control" }, h("input", { key: '9e26981c32775b79ce9c3458a4890968fab04ef6', part: "field", id: this.inputId, type: this.type, placeholder: this.placeholder, value: this.value, disabled: this.disabled, "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleChange })), this.description ? (h("p", { id: this.descriptionId, class: "description", part: "description" }, this.description)) : null));
+    }
+    static get is() { return "af-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Assistive description shown below the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'search'",
+                    "resolved": "\"email\" | \"password\" | \"search\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (mutable so the component stays in sync)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afInput",
+                "name": "afInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired as the user types"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "afChange",
+                "name": "afChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the field loses focus after a change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-input.js","sourceRoot":"","sources":["../../../src/components/af-input/af-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExE,IAAI,QAAQ,GAAG,CAAC,CAAC;AAOjB,MAAM,OAAO,OAAO;IALpB;QAMU,YAAO,GAAG,YAAY,EAAE,QAAQ,EAAE,CAAC;QACnC,kBAAa,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,CAAC;QAQ/C,2BAA2B;QACnB,SAAI,GAA6C,MAAM,CAAC;QAKhE,6DAA6D;QACpC,UAAK,GAAG,EAAE,CAAC;QAEpC,qBAAqB;QACI,aAAQ,GAAG,KAAK,CAAC;QAQlC,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;KAiCH;IA/BC,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QAEtE,OAAO,CACL,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YAC1E,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,YAAY,IAClC,IAAI,CAAC,KAAK,CACN,CACR,CAAC,CAAC,CAAC,IAAI;YACR,4DAAK,KAAK,EAAC,SAAS;gBAClB,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACE;YACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,SAAG,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,IAC9D,IAAI,CAAC,WAAW,CACf,CACL,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet inputIds = 0;\n\n@Component({\n  tag: 'af-input',\n  styleUrl: 'af-input.css',\n  shadow: true\n})\nexport class AfInput {\n  private inputId = `af-input-${++inputIds}`;\n  private descriptionId = `${this.inputId}-desc`;\n\n  /** Optional label text */\n  @Prop() label?: string;\n\n  /** Assistive description shown below the field */\n  @Prop() description?: string;\n\n  /** Input type attribute */\n  @Prop() type: 'text' | 'email' | 'password' | 'search' = 'text';\n\n  /** Placeholder text */\n  @Prop() placeholder?: string;\n\n  /** Current value (mutable so the component stays in sync) */\n  @Prop({ mutable: true }) value = '';\n\n  /** Disabled state */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fired as the user types */\n  @Event() afInput!: EventEmitter<string>;\n\n  /** Fired when the field loses focus after a change */\n  @Event() afChange!: EventEmitter<string>;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.afInput.emit(this.value);\n  };\n\n  private handleChange = () => {\n    this.afChange.emit(this.value);\n  };\n\n  render() {\n    const describedBy = this.description ? this.descriptionId : undefined;\n\n    return (\n      <label part=\"label\" class={{ disabled: this.disabled }} htmlFor={this.inputId}>\n        {this.label ? (\n          <span class=\"label\" part=\"label-text\">\n            {this.label}\n          </span>\n        ) : null}\n        <div class=\"control\">\n          <input\n            part=\"field\"\n            id={this.inputId}\n            type={this.type}\n            placeholder={this.placeholder}\n            value={this.value}\n            disabled={this.disabled}\n            aria-describedby={describedBy}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n          />\n        </div>\n        {this.description ? (\n          <p id={this.descriptionId} class=\"description\" part=\"description\">\n            {this.description}\n          </p>\n        ) : null}\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components.js

@@ -0,0 +1,6 @@
+export { AfButton } from './components/af-button/af-button';
+export { AfBadge } from './components/af-badge/af-badge';
+export { AfIconButton } from './components/af-icon-button/af-icon-button';
+export { AfCard } from './components/af-card/af-card';
+export { AfInput } from './components/af-input/af-input';
+//# sourceMappingURL=components.js.map

package/dist/collection/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC","sourcesContent":["export { AfButton } from './components/af-button/af-button';\nexport { AfBadge } from './components/af-badge/af-badge';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfCard } from './components/af-card/af-card';\nexport { AfInput } from './components/af-input/af-input';\n"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/components/af-badge.d.ts

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

package/dist/components/af-badge.js

@@ -0,0 +1,9 @@
+import { A as AfBadge$1, d as defineCustomElement$1 } from './p-B7I93sz2.js';
+
+const AfBadge = AfBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfBadge, defineCustomElement };
+//# sourceMappingURL=af-badge.js.map
+
+//# sourceMappingURL=af-badge.js.map

package/dist/components/af-badge.js.map

@@ -0,0 +1 @@
+{"file":"af-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-button.d.ts

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

package/dist/components/af-button.js

@@ -0,0 +1,9 @@
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-zIKPa48S.js';
+
+const AfButton = AfButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfButton, defineCustomElement };
+//# sourceMappingURL=af-button.js.map
+
+//# sourceMappingURL=af-button.js.map

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

@@ -0,0 +1 @@
+{"file":"af-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-card.d.ts

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

package/dist/components/af-card.js

@@ -0,0 +1,9 @@
+import { A as AfCard$1, d as defineCustomElement$1 } from './p-DZIXhvI0.js';
+
+const AfCard = AfCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfCard, defineCustomElement };
+//# sourceMappingURL=af-card.js.map
+
+//# sourceMappingURL=af-card.js.map

package/dist/components/af-card.js.map

@@ -0,0 +1 @@
+{"file":"af-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}