@affinda/wc 0.0.2 → 0.0.4

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

@@ -0,0 +1,169 @@
+import { h, Host } from "@stencil/core";
+export class AfIconButton {
+    constructor() {
+        /**
+         * The visual variant of the button
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
+    }
+    render() {
+        const classes = {
+            'icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
+        };
+        const content = (h("span", { class: "icon" }, h("slot", null)));
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
+    }
+    static get is() { return "af-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    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": "'primary' | 'secondary' | 'outline' | 'ghost'",
+                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium' | 'small'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href to render as a link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type (when not using href)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-icon-button.js.map

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

@@ -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,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAiC,QAAQ,CAAC;QAEtD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAuCxD;IAhCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,YAAM,KAAK,EAAC,MAAM;YAChB,eAAa,CACR,CACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,SAAS,IAC3D,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = (\n      <span class=\"icon\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-logo.js","sourceRoot":"","sources":["../../../src/components/af-logo/af-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,UAAU;gBAEhB,6DACE,CAAC,EAAC,ikBAAikB,EACnkB,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,mcAAmc,EACrc,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,+cAA+c,EACjd,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,4SAA4S,EAC9S,IAAI,EAAC,cAAc,GACnB;gBACF,uEAAa,aAAa;oBACxB,6DACE,CAAC,EAAC,8PAA8P,EAChQ,IAAI,EAAC,cAAc,GACnB,CACA;gBACJ;oBACE,iEAAU,EAAE,EAAC,OAAO;wBAClB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kBAAkB,GAAG,CAChC,CACN,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg\n          width=\"141\"\n          height=\"22\"\n          viewBox=\"0 0 141 22\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"logo-svg\"\n        >\n          <path\n            d=\"M20.8 9.6c0-1.5-.4-2.7-1.1-3.7-.8-1-1.8-1.5-3.2-1.5-1.3 0-2.4.5-3.2 1.5-.7 1-1.1 2.2-1.1 3.7 0 1.5.4 2.7 1.1 3.7.8 1 1.9 1.5 3.2 1.5 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zm4.2 0c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-2.2 0-4-.8-5.4-2.3-1.4-1.5-2.1-3.5-2.1-5.9 0-2.4.7-4.4 2.1-5.9C13.5 2.2 15.3 1.4 17.5 1.4c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.9zM29.1 17.5h-4.2V4.7h4.2v12.8zm0-14.9h-4.2V.2h4.2v2.4zM43.3 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M56.9 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4zM68.3 5.9c-.7-.4-1.5-.6-2.4-.6-1.2 0-2.2.4-2.9 1.2-.8.8-1.1 1.9-1.1 3.3 0 1.4.4 2.5 1.1 3.3.8.8 1.7 1.2 2.9 1.2.9 0 1.7-.2 2.4-.6v3.5c-.9.3-1.9.5-2.9.5-2.3 0-4.2-.7-5.6-2.2-1.4-1.5-2.1-3.4-2.1-5.8 0-1.5.3-2.9.9-4.1.6-1.2 1.5-2.2 2.6-2.8 1.1-.7 2.4-1 3.8-1 1.1 0 2.1.2 3.1.6l.2 3.5z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M80 4.7h4.2v1.6c.7-1.2 1.9-1.9 3.6-1.9 1.3 0 2.3.4 3.1 1.2.8.8 1.2 2 1.2 3.5v8.4h-4.2V9.4c0-1.7-.7-2.5-2-2.5-.7 0-1.2.2-1.6.7-.4.4-.6 1.1-.6 1.9v8h-4.2V4.7h.5zM105.3 17.5h-4.2v-1.1c-.8 1-2 1.5-3.6 1.5-1.4 0-2.6-.5-3.5-1.4-.9-.9-1.4-2.1-1.4-3.6V9.6c0-1.5.5-2.7 1.4-3.6.9-.9 2.1-1.4 3.5-1.4 1.6 0 2.8.5 3.6 1.5V.2h4.2v17.3zm-4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M115.8 17.5h-4.2V4.7h4.2v1.1c.8-1 2-1.5 3.6-1.5 1.4 0 2.6.5 3.5 1.4.9.9 1.4 2.1 1.4 3.6v3.3c0 1.5-.5 2.7-1.4 3.6-.9.9-2.1 1.4-3.5 1.4-1.6 0-2.8-.5-3.6-1.5v1.4zm4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z\"\n            fill=\"currentColor\"\n          />\n          <g clip-path=\"url(#clip0)\">\n            <path\n              d=\"M4.9 9.6c0-1.5-.4-2.7-1.1-3.7C3 4.9 2 4.4.6 4.4c-.3 0-.6 0-.9.1v10.2c.3.1.6.1.9.1 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zM9.1 9.6c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-.7 0-1.4-.1-2.1-.2V.2C.2.1.9 0 1.6 0c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.3z\"\n              fill=\"currentColor\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0\">\n              <path fill=\"#fff\" d=\"M0 0h9.1v17.8H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-nav-item/af-nav-item.css

@@ -39,25 +39,36 @@
   color: #14343b;
 }
 
-/* Primary variant 02 - lighter */
+/* Primary variant 02 - lighter for light backgrounds */
 .hierarchy-primary.variant-02 {
   font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
   font-size: 16px;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 20px;
-  color: #2b484f;
+  color: #14343b;
 }
 
-/* Hover state for primary - underline */
-.hierarchy-primary:hover .label-container {
+/* Hover state for primary variant-01 (dark backgrounds) - underline */
+.hierarchy-primary.variant-01:hover .label-container {
   border-bottom: 1px solid currentColor;
 }
 
-/* Active state for primary - thicker border */
-.hierarchy-primary.active .label-container {
+/* Active state for primary variant-01 - thicker border */
+.hierarchy-primary.variant-01.active .label-container {
   border-bottom: 2px solid #8a7049;
 }
 
+/* Hover and active states for variant-02 (light backgrounds) - no border */
+.hierarchy-primary.variant-02:hover {
+  background-color: rgba(20, 52, 59, 0.04);
+  border-radius: 8px;
+}
+
+.hierarchy-primary.variant-02.active {
+  background-color: rgba(20, 52, 59, 0.08);
+  border-radius: 8px;
+}
+
 /* Secondary hierarchy - smaller sub-navigation */
 .hierarchy-secondary {
   padding: 4px 0;

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

@@ -0,0 +1,119 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.navbar-container {
+  padding: 32px 80px 0;
+  box-sizing: border-box;
+}
+
+.navbar {
+  background: #E8F1EF;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 8px 8px 40px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* Left section */
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Right section */
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.nav-button {
+  display: flex;
+  align-items: center;
+}
+
+/* Tablet adjustments */
+@media (max-width: 1024px) {
+  .navbar-container {
+    padding: 24px 40px 0;
+  }
+
+  .navbar-left {
+    gap: 24px;
+  }
+
+  .nav-links {
+    gap: 4px;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .navbar-container {
+    padding: 16px 16px 0;
+  }
+
+  .navbar {
+    padding: 8px 16px;
+    flex-direction: column;
+    border-radius: 16px;
+    gap: 16px;
+  }
+
+  .navbar-left {
+    width: 100%;
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .nav-links {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .navbar-right {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .nav-actions {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .nav-button {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A full-width navigation bar component that provides the main site navigation.
+ * Features a pill-shaped container with logo, navigation links, and action buttons.
+ */
+export class AfNavbar {
+    render() {
+        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "links" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: 'cbfecec0a3b95935f707a4bbded5ce8aae0e9270', name: "actions" })), h("div", { key: 'e8cd7adf6f5a537b9a2552b467f6671f312ab0c1', class: "nav-button" }, h("slot", { key: '9dd578f3d67b32642cc6fbd49a5f3736e55c04f1', name: "button" })))))));
+    }
+    static get is() { return "af-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-navbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-navbar.css"]
+        };
+    }
+}
+//# sourceMappingURL=af-navbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBACN,4DAAK,KAAK,EAAC,WAAW;4BACpB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              <div class=\"nav-links\">\n                <slot name=\"links\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class=\"navbar-right\">\n              <div class=\"nav-actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -0,0 +1,168 @@
+:host {
+  display: block;
+}
+
+.lockup {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+/* Text alignment */
+.text-left {
+  align-items: flex-start;
+}
+
+.text-center {
+  align-items: center;
+}
+
+.text-left .copy,
+.text-left .heading,
+.text-left .description {
+  text-align: left;
+}
+
+.text-center .copy,
+.text-center .heading,
+.text-center .description {
+  text-align: center;
+}
+
+/* Copy section */
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+/* Heading styles */
+.heading {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  color: var(--typography-heading-primary, #14343B);
+  line-height: 1;
+  white-space: pre-wrap;
+}
+
+/* Desktop heading sizes */
+.breakpoint-desktop.heading-1 .heading {
+  font-size: 56px;
+  letter-spacing: -1.12px;
+}
+
+.breakpoint-desktop.heading-2 .heading {
+  font-size: 44px;
+  letter-spacing: -0.88px;
+}
+
+.breakpoint-desktop.heading-3 .heading {
+  font-size: 34px;
+  letter-spacing: -0.68px;
+}
+
+.breakpoint-desktop.heading-4 .heading {
+  font-size: 24px;
+  letter-spacing: -0.48px;
+  line-height: 1.2;
+}
+
+.breakpoint-desktop.heading-5 .heading {
+  font-size: 20px;
+  letter-spacing: -0.4px;
+  line-height: 1.2;
+}
+
+/* Mobile heading sizes */
+.breakpoint-mobile.heading-1 .heading {
+  font-size: 38px;
+  letter-spacing: -0.76px;
+}
+
+.breakpoint-mobile.heading-2 .heading {
+  font-size: 32px;
+  letter-spacing: -0.64px;
+}
+
+.breakpoint-mobile.heading-3 .heading {
+  font-size: 25px;
+  letter-spacing: -0.5px;
+}
+
+.breakpoint-mobile.heading-4 .heading {
+  font-size: 20px;
+  letter-spacing: -0.4px;
+  line-height: 1.1;
+}
+
+.breakpoint-mobile.heading-5 .heading {
+  font-size: 18px;
+  letter-spacing: -0.36px;
+  line-height: 1.1;
+}
+
+/* Description/body text */
+.description {
+  font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--typography-body-default, #2B484F);
+  white-space: pre-wrap;
+}
+
+.description:empty {
+  display: none;
+}
+
+/* Buttons section */
+.buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.buttons:empty {
+  display: none;
+}
+
+/* Button alignment - horizontal */
+.button-horizontal .buttons {
+  flex-direction: row;
+  align-items: center;
+}
+
+.text-left.button-horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
+
+.text-left.button-horizontal .copy {
+  flex: 1 0 0;
+  max-width: 950px;
+}
+
+.text-left.button-horizontal .buttons {
+  flex-shrink: 0;
+}
+
+/* Button alignment - vertical */
+.button-vertical .buttons {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.text-center.button-vertical .buttons {
+  align-items: center;
+}
+
+/* Max width constraints for centered layouts */
+.text-center .copy {
+  max-width: 840px;
+}
+
+/* Slot content styling */
+::slotted(*) {
+  margin: 0;
+}