@affinda/wc 0.0.1 → 0.0.2

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

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

package/dist/components/{af-badge.d.ts → af-nav-item.d.ts}

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

package/dist/components/af-nav-item.js

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

package/dist/components/af-nav-item.js.map

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

package/dist/components/{af-card.d.ts → af-text.d.ts}

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

package/dist/components/af-text.js

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

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

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

package/dist/components/index.js

@@ -1,9 +1,10 @@
-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';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-TaHgCKVa.js';
+export { A as AfHeading } from './p-CbKdmUDd.js';
+export { A as AfText } from './p-BZ5_l5Q-.js';
+export { A as AfColorSwatch } from './p-Ck_3oNdO.js';
+export { A as AfContainer } from './p-DbZX-luM.js';
+export { A as AfAspectRatio } from './p-CCPh8sLt.js';
+export { A as AfNavItem } from './p-Ntwn3krC.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/components/p-BZ5_l5Q-.js

@@ -0,0 +1,50 @@
+import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.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:#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-BZ5_l5Q-.js.map
+
+//# sourceMappingURL=p-BZ5_l5Q-.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BZ5_l5Q-.js","mappings":";;AAAA,MAAM,SAAS,GAAG,osBAAosB;;MCOzsB,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: #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-CCPh8sLt.js

@@ -0,0 +1,102 @@
+import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.js';
+
+const afAspectRatioCss = ":host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){width:100%;height:100%;object-fit:cover}";
+
+const AfAspectRatio = /*@__PURE__*/ proxyCustomElement(class AfAspectRatio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The aspect ratio to maintain. Can be:
+         * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.
+         * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+         *
+         * @example
+         * <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio>
+         * <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+         */
+        this.ratio = '1:1';
+    }
+    getRatioValue() {
+        // Map common ratio shortcuts to actual CSS aspect-ratio values
+        const ratioMap = {
+            // Common ratios
+            '1:1': '1 / 1',
+            '1:2': '1 / 2',
+            '2:1': '2 / 1',
+            '2:3': '2 / 3',
+            '3:1': '3 / 1',
+            '3:2': '3 / 2',
+            '3:4': '3 / 4',
+            '4:1': '4 / 1',
+            '4:3': '4 / 3',
+            '4:5': '4 / 5',
+            '5:2': '5 / 2',
+            '5:4': '5 / 4',
+            '8:3': '8 / 3',
+            '8:5': '8 / 5',
+            // Screen ratios
+            '9:8': '9 / 8',
+            '9:16': '9 / 16',
+            '9:21': '9 / 21',
+            '10:16': '10 / 16',
+            '14:3': '14 / 3',
+            '16:5': '16 / 5',
+            '16:9': '16 / 9',
+            '16:10': '16 / 10',
+            '21:9': '21 / 9',
+            '32:9': '32 / 9',
+            // Golden ratio variants
+            'golden-portrait': '1 / 1.618',
+            'golden-landscape': '1.618 / 1',
+            'golden-portrait-half': '1 / 0.809',
+            'golden-landscape-half': '0.809 / 1',
+            // Paper sizes - A4
+            'a4-portrait': '1 / 1.414',
+            'a4-landscape': '1.414 / 1',
+            'a4-portrait-half': '1 / 0.707',
+            'a4-landscape-half': '0.707 / 1',
+            // Paper sizes - Letter
+            'letter-portrait': '1 / 1.294',
+            'letter-landscape': '1.294 / 1',
+            'letter-portrait-half': '1 / 0.647',
+            'letter-landscape-half': '0.647 / 1',
+            // Special
+            '6:7': '6 / 7'
+        };
+        // If it's a predefined ratio, return the mapped value
+        if (ratioMap[this.ratio]) {
+            return ratioMap[this.ratio];
+        }
+        // Otherwise, assume it's a custom ratio already in the correct format
+        return this.ratio;
+    }
+    render() {
+        const ratioValue = this.getRatioValue();
+        return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
+    }
+    static get style() { return afAspectRatioCss; }
+}, [257, "af-aspect-ratio", {
+        "ratio": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-aspect-ratio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-aspect-ratio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfAspectRatio);
+            }
+            break;
+    } });
+}
+
+export { AfAspectRatio as A, defineCustomElement as d };
+//# sourceMappingURL=p-CCPh8sLt.js.map
+
+//# sourceMappingURL=p-CCPh8sLt.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CCPh8sLt.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mLAAmL;;MCW/L,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAuE9B;IArES,aAAa,GAAA;;AAEnB,QAAA,MAAM,QAAQ,GAA8B;;AAE1C,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;;AAEd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;;AAEhB,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,cAAc,EAAE,WAAW;AAC3B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,mBAAmB,EAAE,WAAW;;AAEhC,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,KAAK,EAAE;SACR;;AAGD,QAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;;;QAI7B,OAAO,IAAI,CAAC,KAAK;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAAA,EAElC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-aspect-ratio/af-aspect-ratio.css?tag=af-aspect-ratio&encapsulation=shadow","src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.aspect-ratio-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Ensure slotted content fills the container */\n.aspect-ratio-container ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A container component that maintains a fixed aspect ratio for its content.\n * Useful for images, videos, or any content that needs to maintain specific proportions.\n */\n@Component({\n  tag: 'af-aspect-ratio',\n  styleUrl: 'af-aspect-ratio.css',\n  shadow: true\n})\nexport class AfAspectRatio {\n  /**\n   * The aspect ratio to maintain. Can be:\n   * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n   * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.\n   *\n   * @example\n   * <af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n   * <af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>\n   */\n  @Prop() ratio: string = '1:1';\n\n  private getRatioValue(): string {\n    // Map common ratio shortcuts to actual CSS aspect-ratio values\n    const ratioMap: { [key: string]: string } = {\n      // Common ratios\n      '1:1': '1 / 1',\n      '1:2': '1 / 2',\n      '2:1': '2 / 1',\n      '2:3': '2 / 3',\n      '3:1': '3 / 1',\n      '3:2': '3 / 2',\n      '3:4': '3 / 4',\n      '4:1': '4 / 1',\n      '4:3': '4 / 3',\n      '4:5': '4 / 5',\n      '5:2': '5 / 2',\n      '5:4': '5 / 4',\n      '8:3': '8 / 3',\n      '8:5': '8 / 5',\n      // Screen ratios\n      '9:8': '9 / 8',\n      '9:16': '9 / 16',\n      '9:21': '9 / 21',\n      '10:16': '10 / 16',\n      '14:3': '14 / 3',\n      '16:5': '16 / 5',\n      '16:9': '16 / 9',\n      '16:10': '16 / 10',\n      '21:9': '21 / 9',\n      '32:9': '32 / 9',\n      // Golden ratio variants\n      'golden-portrait': '1 / 1.618',\n      'golden-landscape': '1.618 / 1',\n      'golden-portrait-half': '1 / 0.809',\n      'golden-landscape-half': '0.809 / 1',\n      // Paper sizes - A4\n      'a4-portrait': '1 / 1.414',\n      'a4-landscape': '1.414 / 1',\n      'a4-portrait-half': '1 / 0.707',\n      'a4-landscape-half': '0.707 / 1',\n      // Paper sizes - Letter\n      'letter-portrait': '1 / 1.294',\n      'letter-landscape': '1.294 / 1',\n      'letter-portrait-half': '1 / 0.647',\n      'letter-landscape-half': '0.647 / 1',\n      // Special\n      '6:7': '6 / 7'\n    };\n\n    // If it's a predefined ratio, return the mapped value\n    if (ratioMap[this.ratio]) {\n      return ratioMap[this.ratio];\n    }\n\n    // Otherwise, assume it's a custom ratio already in the correct format\n    return this.ratio;\n  }\n\n  render() {\n    const ratioValue = this.getRatioValue();\n\n    return (\n      <div\n        class=\"aspect-ratio-container\"\n        style={{ aspectRatio: ratioValue }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CbKdmUDd.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.js';
+
+const afHeadingCss = ":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}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:50px;line-height:1}@media (min-width: 768px){.level-xl{font-size:80px}}.level-1{font-size:38px;line-height:1}@media (min-width: 768px){.level-1{font-size:56px}}.level-2{font-size:32px;line-height:1}@media (min-width: 768px){.level-2{font-size:44px}}.level-3{font-size:25px;line-height:1}@media (min-width: 768px){.level-3{font-size:34px}}.level-4{font-size:20px;line-height:1.1}@media (min-width: 768px){.level-4{font-size:24px;line-height:1.2}}.level-5{font-size:18px;line-height:1.1}@media (min-width: 768px){.level-5{font-size:20px;line-height:1.2}}";
+
+const AfHeading = /*@__PURE__*/ proxyCustomElement(class AfHeading extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** 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 style() { return afHeadingCss; }
+}, [257, "af-heading", {
+        "level": [1],
+        "align": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfHeading);
+            }
+            break;
+    } });
+}
+
+export { AfHeading as A, defineCustomElement as d };
+//# sourceMappingURL=p-CbKdmUDd.js.map
+
+//# sourceMappingURL=p-CbKdmUDd.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CbKdmUDd.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+zBAA+zB;;MCOv0B,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: #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-Ck_3oNdO.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.js';
+
+const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
+
+const AfColorSwatch = /*@__PURE__*/ proxyCustomElement(class AfColorSwatch extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Size variant */
+        this.size = 'default';
+    }
+    render() {
+        return (h("div", { key: '57a141b5af5c538c5cf842a61173dd391a91d59b', class: {
+                'swatch': true,
+                [`size-${this.size}`]: true
+            }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
+    }
+    static get style() { return afColorSwatchCss; }
+}, [257, "af-color-swatch", {
+        "color": [1],
+        "name": [1],
+        "size": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-color-swatch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-color-swatch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfColorSwatch);
+            }
+            break;
+    } });
+}
+
+export { AfColorSwatch as A, defineCustomElement as d };
+//# sourceMappingURL=p-Ck_3oNdO.js.map
+
+//# sourceMappingURL=p-Ck_3oNdO.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Ck_3oNdO.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DbZX-luM.js

@@ -0,0 +1,45 @@
+import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.js';
+
+const afContainerCss = ":host{display:block;width:100%}.container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;padding-left:16px;padding-right:16px}@media (min-width: 375px){.container{padding-left:20px;padding-right:20px}}@media (min-width: 768px){.container{padding-left:32px;padding-right:32px}.max-width-medium{max-width:768px}}@media (min-width: 1024px){.container{padding-left:64px;padding-right:64px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}@media (min-width: 1440px){.container{padding-left:80px;padding-right:80px}.max-width-xlarge{max-width:1440px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}.max-width-fluid{max-width:none}";
+
+const AfContainer = /*@__PURE__*/ proxyCustomElement(class AfContainer extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Maximum width constraint for the container
+         * - 'xlarge': 1440px container (default)
+         * - 'large': 1024px container
+         * - 'medium': 768px container
+         * - 'fluid': No max-width constraint, full width with margins
+         */
+        this.maxWidth = 'xlarge';
+    }
+    render() {
+        return (h("div", { key: '4a40fad6df79915adeb7273a7c71ed26b327ff8f', class: `container max-width-${this.maxWidth}` }, h("slot", { key: 'a1759c05860511cdb6b916e44925df7f7a80bcf1' })));
+    }
+    static get style() { return afContainerCss; }
+}, [257, "af-container", {
+        "maxWidth": [1, "max-width"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfContainer);
+            }
+            break;
+    } });
+}
+
+export { AfContainer as A, defineCustomElement as d };
+//# sourceMappingURL=p-DbZX-luM.js.map
+
+//# sourceMappingURL=p-DbZX-luM.js.map

package/dist/components/p-DbZX-luM.js.map

@@ -0,0 +1 @@
+{"file":"p-DbZX-luM.js","mappings":";;AAAA,MAAM,cAAc,GAAG,grBAAgrB;;MCW1rB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;AAMG;AACK,QAAA,IAAQ,CAAA,QAAA,GAA4C,QAAQ;AASrE;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-container/af-container.css?tag=af-container&encapsulation=shadow","src/components/af-container/af-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.container {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n\n  /* Mobile first: xsmall breakpoint (320px) */\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* Small breakpoint (375px) */\n@media (min-width: 375px) {\n  .container {\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n}\n\n/* Medium breakpoint (768px) */\n@media (min-width: 768px) {\n  .container {\n    padding-left: 32px;\n    padding-right: 32px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* Large breakpoint (1024px) */\n@media (min-width: 1024px) {\n  .container {\n    padding-left: 64px;\n    padding-right: 64px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* XLarge breakpoint (1440px) */\n@media (min-width: 1440px) {\n  .container {\n    padding-left: 80px;\n    padding-right: 80px;\n  }\n\n  .max-width-xlarge {\n    max-width: 1440px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* Fluid has no max-width */\n.max-width-fluid {\n  max-width: none;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A responsive container component that provides consistent margins and max-width\n * constraints based on the Affinda grid system.\n */\n@Component({\n  tag: 'af-container',\n  styleUrl: 'af-container.css',\n  shadow: true\n})\nexport class AfContainer {\n  /**\n   * Maximum width constraint for the container\n   * - 'xlarge': 1440px container (default)\n   * - 'large': 1024px container\n   * - 'medium': 768px container\n   * - 'fluid': No max-width constraint, full width with margins\n   */\n  @Prop() maxWidth: 'xlarge' | 'large' | 'medium' | 'fluid' = 'xlarge';\n\n  render() {\n    return (\n      <div class={`container max-width-${this.maxWidth}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-Ntwn3krC.js

@@ -0,0 +1,66 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-TaHgCKVa.js';
+
+const afNavItemCss = ":host{display:inline-block}.nav-link{text-decoration:none;color:inherit;display:block}.nav-item{display:flex;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}.hierarchy-primary{padding:12px;justify-content:center}.hierarchy-primary .label-container{display:flex;align-items:center;justify-content:center;height:24px;gap:10px}.hierarchy-primary.variant-01{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;line-height:20px;color:#14343b}.hierarchy-primary.variant-02{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:400;line-height:20px;color:#2b484f}.hierarchy-primary:hover .label-container{border-bottom:1px solid currentColor}.hierarchy-primary.active .label-container{border-bottom:2px solid #8a7049}.hierarchy-secondary{padding:4px 0}.hierarchy-secondary .label-container{display:flex;align-items:center;flex:1;min-height:24px;gap:8px}.hierarchy-secondary.variant-01{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#14343b}.hierarchy-secondary.variant-02{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#2b484f}.hierarchy-secondary:hover ::slotted(*){text-decoration:underline}@media (max-width: 767px){.hierarchy-primary{padding:20px 12px;border-bottom:1px solid #e8eeed;width:100%}.hierarchy-primary .label-container{flex:1;justify-content:flex-start}.hierarchy-primary.variant-01{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.hierarchy-primary.variant-02{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:#60767b}}::slotted([slot=\"icon-left\"]),::slotted([slot=\"icon-right\"]){width:24px;height:24px;flex-shrink:0}.hierarchy-secondary ::slotted([slot=\"icon-right\"]){width:20px;height:20px}";
+
+const AfNavItem = /*@__PURE__*/ proxyCustomElement(class AfNavItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Visual hierarchy level of the navigation item
+         * - 'primary': Bold, main navigation (larger text, prominent styling)
+         * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+         */
+        this.hierarchy = 'primary';
+        /**
+         * Visual variant within the hierarchy level
+         * - '01': Darker/more prominent styling
+         * - '02': Lighter/more subtle styling
+         */
+        this.variant = '01';
+        /**
+         * Whether this nav item is currently active/selected
+         */
+        this.active = false;
+    }
+    render() {
+        const classes = {
+            'nav-item': true,
+            [`hierarchy-${this.hierarchy}`]: true,
+            [`variant-${this.variant}`]: true,
+            'active': this.active
+        };
+        const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
+        if (this.href) {
+            return (h(Host, null, h("a", { href: this.href, class: "nav-link" }, content)));
+        }
+        return h(Host, null, content);
+    }
+    static get style() { return afNavItemCss; }
+}, [257, "af-nav-item", {
+        "hierarchy": [1],
+        "variant": [1],
+        "href": [1],
+        "active": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavItem);
+            }
+            break;
+    } });
+}
+
+export { AfNavItem as A, defineCustomElement as d };
+//# sourceMappingURL=p-Ntwn3krC.js.map
+
+//# sourceMappingURL=p-Ntwn3krC.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Ntwn3krC.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8xDAA8xD;;MCWtyD,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAA4B,SAAS;AAEtD;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,IAAI;AAOnC;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAgChC;IA9BC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACjC,QAAQ,EAAE,IAAI,CAAC;SAChB;QAED,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,EACN,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAQ,CAAA,CAC3B,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EACjC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=shadow","src/components/af-nav-item/af-nav-item.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 20px;\n  color: #14343b;\n}\n\n/* Primary variant 02 - lighter */\n.hierarchy-primary.variant-02 {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #2b484f;\n}\n\n/* Hover state for primary - underline */\n.hierarchy-primary:hover .label-container {\n  border-bottom: 1px solid currentColor;\n}\n\n/* Active state for primary - thicker border */\n.hierarchy-primary.active .label-container {\n  border-bottom: 2px solid #8a7049;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 8px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: #14343b;\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #2b484f;\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover ::slotted(*) {\n  text-decoration: underline;\n}\n\n/* Mobile styles */\n@media (max-width: 767px) {\n  .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid #e8eeed;\n    width: 100%;\n  }\n\n  .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: #60767b;\n  }\n}\n\n/* Icon sizing */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"],"version":3}