@affinda/wc 0.0.1

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

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

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

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

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

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

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

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

package/dist/components/af-input.js

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

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

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

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DOtgsZRB.js';
+export { A as AfButton } from './p-zIKPa48S.js';
+export { A as AfBadge } from './p-B7I93sz2.js';
+export { A as AfIconButton } from './p-D6PwARU0.js';
+export { A as AfCard } from './p-DZIXhvI0.js';
+export { A as AfInput } from './p-CZd1ieht.js';
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/components/p-B7I93sz2.js

@@ -0,0 +1,39 @@
+import { p as proxyCustomElement, H, h } from './p-DOtgsZRB.js';
+
+const afBadgeCss = ":host{display:inline-block}span{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--af-space-2);border-radius:var(--af-radius-pill);font:var(--af-font-weight-semibold) var(--af-size-font-sm) / 1 var(--af-font-family-sans);letter-spacing:0.02em;text-transform:uppercase}span.tone-brand{background:rgba(124, 58, 237, 0.12);color:var(--af-color-brand-primary-500)}span.tone-neutral{background:rgba(18, 15, 31, 0.1);color:var(--af-color-fg-default)}span.tone-success{background:rgba(16, 185, 129, 0.12);color:#0f766e}";
+
+const AfBadge = /*@__PURE__*/ proxyCustomElement(class AfBadge extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Color theme of the badge */
+        this.tone = 'brand';
+    }
+    render() {
+        return (h("span", { key: '1f9d4015b429e012eade75e331c991d5c785482d', class: `tone-${this.tone}`, part: "base" }, h("slot", { key: 'b69b37a3e996c43cb16d04d829232d9539f45e06' })));
+    }
+    static get style() { return afBadgeCss; }
+}, [257, "af-badge", {
+        "tone": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfBadge);
+            }
+            break;
+    } });
+}
+
+export { AfBadge as A, defineCustomElement as d };
+//# sourceMappingURL=p-B7I93sz2.js.map
+
+//# sourceMappingURL=p-B7I93sz2.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B7I93sz2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+hBAA+hB;;MCOriB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAoC,OAAO;AASxD;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-badge/af-badge.css?tag=af-badge&encapsulation=shadow","src/components/af-badge/af-badge.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\nspan {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px var(--af-space-2);\n  border-radius: var(--af-radius-pill);\n  font: var(--af-font-weight-semibold) var(--af-size-font-sm) / 1 var(--af-font-family-sans);\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n}\n\nspan.tone-brand {\n  background: rgba(124, 58, 237, 0.12);\n  color: var(--af-color-brand-primary-500);\n}\n\nspan.tone-neutral {\n  background: rgba(18, 15, 31, 0.1);\n  color: var(--af-color-fg-default);\n}\n\nspan.tone-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #0f766e;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-badge',\n  styleUrl: 'af-badge.css',\n  shadow: true\n})\nexport class AfBadge {\n  /** Color theme of the badge */\n  @Prop() tone: 'brand' | 'neutral' | 'success' = 'brand';\n\n  render() {\n    return (\n      <span class={`tone-${this.tone}`} part=\"base\">\n        <slot />\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CZd1ieht.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DOtgsZRB.js';
+
+const afInputCss = ":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)}";
+
+let inputIds = 0;
+const AfInput = /*@__PURE__*/ proxyCustomElement(class AfInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afInput = createEvent(this, "afInput");
+        this.afChange = createEvent(this, "afChange");
+        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 style() { return afInputCss; }
+}, [257, "af-input", {
+        "label": [1],
+        "description": [1],
+        "type": [1],
+        "placeholder": [1],
+        "value": [1025],
+        "disabled": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfInput);
+            }
+            break;
+    } });
+}
+
+export { AfInput as A, defineCustomElement as d };
+//# sourceMappingURL=p-CZd1ieht.js.map
+
+//# sourceMappingURL=p-CZd1ieht.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CZd1ieht.js","mappings":";;AAAA,MAAM,UAAU,GAAG,g6BAAg6B;;ACEn7B,IAAI,QAAQ,GAAG,CAAC;MAOH,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAG,YAAY,EAAE,QAAQ,EAAE;QAClC,IAAA,CAAA,aAAa,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,OAAO;;AAStC,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM;;AAMtC,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQjC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/B,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,SAAC;AAiCF;IA/BC,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS;AAErE,QAAA,QACE,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC1E,IAAI,CAAC,KAAK,IACT,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,YAAY,EAClC,EAAA,IAAI,CAAC,KAAK,CACN,IACL,IAAI,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,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,EACL,kBAAA,EAAA,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACE,EACL,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAC9D,EAAA,IAAI,CAAC,WAAW,CACf,IACF,IAAI,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--af-font-family-sans);\n}\n\nlabel {\n  display: grid;\n  gap: var(--af-space-2);\n  color: var(--af-color-fg-default);\n}\n\n.label {\n  font-size: 0.95rem;\n  font-weight: var(--af-font-weight-semibold);\n}\n\n.control {\n  position: relative;\n}\n\ninput {\n  width: 100%;\n  padding: calc(var(--af-space-2) + 2px) calc(var(--af-space-4) + 8px);\n  border-radius: var(--af-radius-md);\n  border: 1px solid rgba(18, 15, 31, 0.18);\n  background: rgba(255, 255, 255, 0.9);\n  color: inherit;\n  font: inherit;\n  transition: border-color 160ms ease, box-shadow 160ms ease;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);\n}\n\ninput::placeholder {\n  color: var(--af-color-fg-muted);\n  opacity: 0.8;\n}\n\ninput:focus-visible {\n  outline: none;\n  border-color: var(--af-color-brand-primary-500);\n  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);\n}\n\nlabel.disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\ninput:disabled {\n  background: rgba(241, 240, 247, 0.7);\n  cursor: not-allowed;\n}\n\n.description {\n  font-size: 0.825rem;\n  color: var(--af-color-fg-muted);\n}\n","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"],"version":3}

package/dist/components/p-D6PwARU0.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DOtgsZRB.js';
+
+const afIconButtonCss = ":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}";
+
+const AfIconButton = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afClick = createEvent(this, "afClick");
+        /** 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 style() { return afIconButtonCss; }
+}, [257, "af-icon-button", {
+        "variant": [1],
+        "size": [1],
+        "label": [1],
+        "disabled": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconButton);
+            }
+            break;
+    } });
+}
+
+export { AfIconButton as A, defineCustomElement as d };
+//# sourceMappingURL=p-D6PwARU0.js.map
+
+//# sourceMappingURL=p-D6PwARU0.js.map

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

@@ -0,0 +1 @@
+{"file":"p-D6PwARU0.js","mappings":";;AAAA,MAAM,eAAe,GAAG,svCAAsvC;;MCOjwC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA+B,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAgB,IAAI;;AAMP,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAKjC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB;;AAGF,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,SAAC;AAuBF;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;SACxB;AAED,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACA;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\nbutton {\n  --button-size-sm: 36px;\n  --button-size-md: 44px;\n  width: var(--button-size-md);\n  height: var(--button-size-md);\n  border-radius: 50%;\n  border: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: var(--af-color-brand-primary-500);\n  cursor: pointer;\n  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;\n  box-shadow: none;\n}\n\nbutton.size-sm {\n  width: var(--button-size-sm);\n  height: var(--button-size-sm);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  box-shadow: none;\n}\n\nbutton.variant-solid {\n  background: linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));\n  color: var(--af-color-fg-inverse);\n  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);\n}\n\nbutton.variant-soft {\n  background: rgba(124, 58, 237, 0.14);\n  color: var(--af-color-brand-primary-500);\n}\n\nbutton.variant-ghost {\n  border: 1px solid rgba(124, 58, 237, 0.4);\n  background: transparent;\n}\n\nbutton:is(:hover, :focus-visible) {\n  transform: translateY(-1px);\n  box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);\n}\n\nbutton:active {\n  transform: translateY(0);\n  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.2);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host([disabled]) button {\n  transform: none;\n  box-shadow: none;\n}\n","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}