@affinda/wc 0.0.1 → 0.0.3

package/dist/cjs/index.cjs.js

@@ -1,139 +1,27 @@
 'use strict';
 
-var index = require('./index-5BGpYleS.js');
-
-const afButtonCss = ":host{display:inline-block}button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--af-space-2);font:var(--af-font-weight-semibold) var(--af-size-font-md) / 1 var(--af-font-family-sans);border-radius:var(--af-radius-md);padding:var(--af-space-2) var(--af-space-4);border:none;cursor:pointer;transition:transform 120ms ease, box-shadow 160ms ease;box-shadow:0 8px 20px rgba(124, 58, 237, 0.18)}button:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:0 12px 24px rgba(124, 58, 237, 0.24)}button:active{transform:translateY(0);box-shadow:0 6px 16px rgba(124, 58, 237, 0.16)}button:disabled{cursor:not-allowed;opacity:0.6;transform:none;box-shadow:none}button.variant-primary{background:linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));color:var(--af-color-fg-inverse)}button.variant-secondary{background:var(--af-color-bg-subtle);color:var(--af-color-fg-default);box-shadow:inset 0 0 0 1px rgba(18, 15, 31, 0.08)}button.variant-ghost{background:transparent;color:var(--af-color-brand-primary-500);box-shadow:inset 0 0 0 1px rgba(124, 58, 237, 0.3)}button.size-lg{padding:calc(var(--af-space-3)) calc(var(--af-space-4) + 4px);font-size:var(--af-size-font-lg)}button .spinner{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 55%);opacity:0;transition:opacity 120ms ease}button.is-loading .spinner{opacity:1}button.is-loading .content{opacity:0.6}";
-
-const AfButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afClick = index.createEvent(this, "afClick");
-        /** Visual style of the button */
-        this.variant = 'primary';
-        /** Size of the button */
-        this.size = 'md';
-        /** Disabled state */
-        this.disabled = false;
-        /** Loading state */
-        this.loading = false;
-        this.handleClick = (event) => {
-            if (this.disabled || this.loading) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            this.afClick.emit(event);
-        };
-    }
-    render() {
-        const classes = {
-            [`variant-${this.variant}`]: true,
-            [`size-${this.size}`]: true,
-            'is-loading': this.loading
-        };
-        return (index.h("button", { key: '11e06f0158591b7aaf60633fa12e91a2904d2f57', class: classes, part: "base", disabled: this.disabled || this.loading, onClick: this.handleClick }, index.h("span", { key: 'bdea09a13233b2e9c682e3c0a3d02fc8fe791668', class: "spinner", part: "spinner", "aria-hidden": !this.loading }), index.h("span", { key: '24a80ba696aecacda181203379345b28e741583c', class: "content", part: "label" }, index.h("slot", { key: 'bdd3731c9c98091503e1c87a7fe940bb72579d27' }))));
-    }
-};
-AfButton.style = afButtonCss;
-
-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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /** Color theme of the badge */
-        this.tone = 'brand';
-    }
-    render() {
-        return (index.h("span", { key: '1f9d4015b429e012eade75e331c991d5c785482d', class: `tone-${this.tone}`, part: "base" }, index.h("slot", { key: 'b69b37a3e996c43cb16d04d829232d9539f45e06' })));
-    }
-};
-AfBadge.style = afBadgeCss;
-
-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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afClick = index.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 (index.h("button", { key: '0f63eddac5f4dab95835506b896e437218aa50e1', type: "button", class: classes, part: "base", disabled: this.disabled, "aria-label": this.label, onClick: this.onClick }, index.h("span", { key: '6400064df3b666cbcc0a4a51523f1cd08dcbe81a', part: "icon", class: "icon" }, index.h("slot", { key: 'a74fff21c0a3af05da37b12e45db8ca8913bbdea' }))));
-    }
-};
-AfIconButton.style = afIconButtonCss;
-
-const afCardCss = ":host{display:block}article{position:relative;border-radius:var(--af-radius-md);background:var(--af-color-bg-surface);color:var(--af-color-fg-default);padding:calc(var(--af-space-4) * 1.5);box-shadow:none;border:1px solid rgba(18, 15, 31, 0.06);transition:box-shadow 160ms ease, transform 160ms ease;display:block;overflow:hidden}article.variant-elevated{box-shadow:0 18px 36px rgba(47, 22, 94, 0.18);border:none}article:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(47, 22, 94, 0.24)}.accent{position:absolute;inset:0;width:6px;left:0;right:auto;background:linear-gradient(180deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600))}article.accent-brand .accent{background:linear-gradient(180deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600))}article.accent-success .accent{background:linear-gradient(180deg, #22c55e, #16a34a)}article.accent-neutral .accent{background:rgba(18, 15, 31, 0.18)}.content{margin-left:12px;display:grid;gap:var(--af-space-3)}.header:empty,.footer:empty{display:none}.header ::slotted(*){font-size:1.125rem;font-weight:var(--af-font-weight-semibold)}.footer ::slotted(*){display:inline-flex;gap:var(--af-space-2);align-items:center}";
-
-const AfCard = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /** Visual style of the card */
-        this.variant = 'surface';
-    }
-    render() {
-        const classes = {
-            [`variant-${this.variant}`]: true,
-            [`accent-${this.accent}`]: Boolean(this.accent)
-        };
-        return (index.h("article", { key: '6341b7150eb902027923228343dd017fee6aef32', class: classes, part: "base" }, this.accent ? index.h("span", { class: "accent", part: "accent", "aria-hidden": "true" }) : null, index.h("div", { key: '06256637c0e9e3a150b59fbc6f73d5b2867729ad', class: "content", part: "content" }, index.h("header", { key: '8f8c893d528cece13d1e9de7115b490a5ed84c88', class: "header", part: "header" }, index.h("slot", { key: 'b404fcc38918bb952678d78c035e9e7ad6e797ef', name: "header" })), index.h("div", { key: '2028736e547446fe12469cf74aec97daf6e3f10a', class: "body", part: "body" }, index.h("slot", { key: 'a2110bc4cfa174e4514d572d7a9cd28652c7da9a' })), index.h("footer", { key: '221a8202625e2794846ff7d68af45f9046fcfe58', class: "footer", part: "footer" }, index.h("slot", { key: 'b20d0e41962dbe766116845e2ef20c68003be7a7', name: "footer" })))));
-    }
-};
-AfCard.style = afCardCss;
-
-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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.afInput = index.createEvent(this, "afInput");
-        this.afChange = index.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 (index.h("label", { key: 'd14267dee125c07311c07bc31f0151448095dba6', part: "label", class: { disabled: this.disabled }, htmlFor: this.inputId }, this.label ? (index.h("span", { class: "label", part: "label-text" }, this.label)) : null, index.h("div", { key: 'd3b6428100e25c981650f5faa23df549d587ac10', class: "control" }, index.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 ? (index.h("p", { id: this.descriptionId, class: "description", part: "description" }, this.description)) : null));
-    }
-};
-AfInput.style = afInputCss;
-
-exports.AfBadge = AfBadge;
-exports.AfButton = AfButton;
-exports.AfCard = AfCard;
-exports.AfIconButton = AfIconButton;
-exports.AfInput = AfInput;
+var afHeading_afLogo_afNavItem_afNavbar_afText_entry = require('./af-heading_5.cjs.entry.js');
+var afColorSwatch_entry = require('./af-color-swatch.cjs.entry.js');
+var afContainer_entry = require('./af-container.cjs.entry.js');
+var afAspectRatio_entry = require('./af-aspect-ratio.cjs.entry.js');
+var afButton_entry = require('./af-button.cjs.entry.js');
+var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
+var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
+var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
+require('./index-E2jkaTPt.js');
+
+
+
+exports.AfHeading = afHeading_afLogo_afNavItem_afNavbar_afText_entry.af_heading;
+exports.AfLogo = afHeading_afLogo_afNavItem_afNavbar_afText_entry.af_logo;
+exports.AfNavItem = afHeading_afLogo_afNavItem_afNavbar_afText_entry.af_nav_item;
+exports.AfNavbar = afHeading_afLogo_afNavItem_afNavbar_afText_entry.af_navbar;
+exports.AfText = afHeading_afLogo_afNavItem_afNavbar_afText_entry.af_text;
+exports.AfColorSwatch = afColorSwatch_entry.af_color_swatch;
+exports.AfContainer = afContainer_entry.af_container;
+exports.AfAspectRatio = afAspectRatio_entry.af_aspect_ratio;
+exports.AfButton = afButton_entry.af_button;
+exports.AfIconButton = afIconButton_entry.af_icon_button;
+exports.AfButtonGroup = afButtonGroup_entry.af_button_group;
+exports.AfTypographyLockup = afTypographyLockup_entry.af_typography_lockup;
 //# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx","src/components/af-badge/af-badge.css?tag=af-badge&encapsulation=shadow","src/components/af-badge/af-badge.tsx","src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx","src/components/af-card/af-card.css?tag=af-card&encapsulation=shadow","src/components/af-card/af-card.tsx","src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\nbutton {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--af-space-2);\n  font: var(--af-font-weight-semibold) var(--af-size-font-md) / 1 var(--af-font-family-sans);\n  border-radius: var(--af-radius-md);\n  padding: var(--af-space-2) var(--af-space-4);\n  border: none;\n  cursor: pointer;\n  transition: transform 120ms ease, box-shadow 160ms ease;\n  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.18);\n}\n\nbutton:is(:hover, :focus-visible) {\n  transform: translateY(-1px);\n  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24);\n}\n\nbutton:active {\n  transform: translateY(0);\n  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.16);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  transform: none;\n  box-shadow: none;\n}\n\nbutton.variant-primary {\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}\n\nbutton.variant-secondary {\n  background: var(--af-color-bg-subtle);\n  color: var(--af-color-fg-default);\n  box-shadow: inset 0 0 0 1px rgba(18, 15, 31, 0.08);\n}\n\nbutton.variant-ghost {\n  background: transparent;\n  color: var(--af-color-brand-primary-500);\n  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3);\n}\n\nbutton.size-lg {\n  padding: calc(var(--af-space-3)) calc(var(--af-space-4) + 4px);\n  font-size: var(--af-size-font-lg);\n}\n\nbutton .spinner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 55%);\n  opacity: 0;\n  transition: opacity 120ms ease;\n}\n\nbutton.is-loading .spinner {\n  opacity: 1;\n}\n\nbutton.is-loading .content {\n  opacity: 0.6;\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /** Visual style of the button */\n  @Prop() variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n  /** Size of the button */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /** Disabled state */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Loading state */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Fired when the button is clicked while enabled */\n  @Event() afClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\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      'is-loading': this.loading\n    };\n\n    return (\n      <button\n        class={classes}\n        part=\"base\"\n        disabled={this.disabled || this.loading}\n        onClick={this.handleClick}\n      >\n        <span class=\"spinner\" part=\"spinner\" aria-hidden={!this.loading}></span>\n        <span class=\"content\" part=\"label\">\n          <slot />\n        </span>\n      </button>\n    );\n  }\n}\n",":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",":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",":host {\n  display: block;\n}\n\narticle {\n  position: relative;\n  border-radius: var(--af-radius-md);\n  background: var(--af-color-bg-surface);\n  color: var(--af-color-fg-default);\n  padding: calc(var(--af-space-4) * 1.5);\n  box-shadow: none;\n  border: 1px solid rgba(18, 15, 31, 0.06);\n  transition: box-shadow 160ms ease, transform 160ms ease;\n  display: block;\n  overflow: hidden;\n}\n\narticle.variant-elevated {\n  box-shadow: 0 18px 36px rgba(47, 22, 94, 0.18);\n  border: none;\n}\n\narticle:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 24px 44px rgba(47, 22, 94, 0.24);\n}\n\n.accent {\n  position: absolute;\n  inset: 0;\n  width: 6px;\n  left: 0;\n  right: auto;\n  background: linear-gradient(180deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));\n}\n\narticle.accent-brand .accent {\n  background: linear-gradient(180deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));\n}\n\narticle.accent-success .accent {\n  background: linear-gradient(180deg, #22c55e, #16a34a);\n}\n\narticle.accent-neutral .accent {\n  background: rgba(18, 15, 31, 0.18);\n}\n\n.content {\n  margin-left: 12px;\n  display: grid;\n  gap: var(--af-space-3);\n}\n\n.header:empty,\n.footer:empty {\n  display: none;\n}\n\n.header ::slotted(*) {\n  font-size: 1.125rem;\n  font-weight: var(--af-font-weight-semibold);\n}\n\n.footer ::slotted(*) {\n  display: inline-flex;\n  gap: var(--af-space-2);\n  align-items: center;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: true\n})\nexport class AfCard {\n  /** Visual style of the card */\n  @Prop() variant: 'surface' | 'elevated' = 'surface';\n\n  /** Optional accent colour strip */\n  @Prop() accent?: 'brand' | 'success' | 'neutral';\n\n  render() {\n    const classes = {\n      [`variant-${this.variant}`]: true,\n      [`accent-${this.accent}`]: Boolean(this.accent)\n    };\n\n    return (\n      <article class={classes} part=\"base\">\n        {this.accent ? <span class=\"accent\" part=\"accent\" aria-hidden=\"true\"></span> : null}\n        <div class=\"content\" part=\"content\">\n          <header class=\"header\" part=\"header\">\n            <slot name=\"header\"></slot>\n          </header>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <footer class=\"footer\" part=\"footer\">\n            <slot name=\"footer\"></slot>\n          </footer>\n        </div>\n      </article>\n    );\n  }\n}\n",":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"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-5BGpYleS.js');
+var index = require('./index-E2jkaTPt.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-badge_5.cjs",[[257,"af-badge",{"tone":[1]}],[257,"af-button",{"variant":[1],"size":[1],"disabled":[516],"loading":[516]}],[257,"af-card",{"variant":[1],"accent":[1]}],[257,"af-icon-button",{"variant":[1],"size":[1],"label":[1],"disabled":[516]}],[257,"af-input",{"label":[1],"description":[1],"type":[1],"placeholder":[1],"value":[1025],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,10 +1,17 @@
 {
   "entries": [
+    "components/af-heading/af-heading.js",
+    "components/af-text/af-text.js",
+    "components/af-color-swatch/af-color-swatch.js",
+    "components/af-container/af-container.js",
+    "components/af-aspect-ratio/af-aspect-ratio.js",
+    "components/af-nav-item/af-nav-item.js",
+    "components/af-navbar/af-navbar.js",
+    "components/af-logo/af-logo.js",
     "components/af-button/af-button.js",
-    "components/af-badge/af-badge.js",
     "components/af-icon-button/af-icon-button.js",
-    "components/af-card/af-card.js",
-    "components/af-input/af-input.js"
+    "components/af-button-group/af-button-group.js",
+    "components/af-typography-lockup/af-typography-lockup.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.css

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.aspect-ratio-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Ensure slotted content fills the container */
+.aspect-ratio-container ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js

@@ -0,0 +1,117 @@
+import { h } from "@stencil/core";
+/**
+ * A container component that maintains a fixed aspect ratio for its content.
+ * Useful for images, videos, or any content that needs to maintain specific proportions.
+ */
+export class AfAspectRatio {
+    constructor() {
+        /**
+         * 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 is() { return "af-aspect-ratio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-aspect-ratio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-aspect-ratio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ratio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n<af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>"
+                        }],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ratio",
+                "defaultValue": "'1:1'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-aspect-ratio.js.map

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-aspect-ratio.js","sourceRoot":"","sources":["../../../src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;;;;;;;WAQG;QACK,UAAK,GAAW,KAAK,CAAC;KAuE/B;IArES,aAAa;QACnB,+DAA+D;QAC/D,MAAM,QAAQ,GAA8B;YAC1C,gBAAgB;YAChB,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,gBAAgB;YAChB,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE,QAAQ;YAChB,wBAAwB;YACxB,iBAAiB,EAAE,WAAW;YAC9B,kBAAkB,EAAE,WAAW;YAC/B,sBAAsB,EAAE,WAAW;YACnC,uBAAuB,EAAE,WAAW;YACpC,mBAAmB;YACnB,aAAa,EAAE,WAAW;YAC1B,cAAc,EAAE,WAAW;YAC3B,kBAAkB,EAAE,WAAW;YAC/B,mBAAmB,EAAE,WAAW;YAChC,uBAAuB;YACvB,iBAAiB,EAAE,WAAW;YAC9B,kBAAkB,EAAE,WAAW;YAC/B,sBAAsB,EAAE,WAAW;YACnC,uBAAuB,EAAE,WAAW;YACpC,UAAU;YACV,KAAK,EAAE,OAAO;SACf,CAAC;QAEF,sDAAsD;QACtD,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,sEAAsE;QACtE,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAExC,OAAO,CACL,4DACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;YAElC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -2,73 +2,182 @@
   display: inline-block;
 }
 
-button {
-  position: relative;
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--af-space-2);
-  font: var(--af-font-weight-semibold) var(--af-size-font-md) / 1 var(--af-font-family-sans);
-  border-radius: var(--af-radius-md);
-  padding: var(--af-space-2) var(--af-space-4);
-  border: none;
+  gap: 0;
+  border-radius: 9999px;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  text-decoration: none;
   cursor: pointer;
-  transition: transform 120ms ease, box-shadow 160ms ease;
-  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.18);
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+/* Size variants */
+.size-default {
+  padding: 12px 24px;
+  font-size: 17px;
+  line-height: 20px;
+}
+
+.size-small {
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+/* Icon slots */
+.icon-left:empty,
+.icon-right:empty {
+  display: none;
+}
+
+.icon-left,
+.icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.size-default .icon-left,
+.size-default .icon-right {
+  width: 24px;
+  height: 24px;
+}
+
+.size-small .icon-left,
+.size-small .icon-right {
+  width: 20px;
+  height: 20px;
+}
+
+/* Label has additional padding on each side */
+.label {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+
+.size-default .label {
+  padding: 0 12px;
+  height: 24px;
+}
+
+.size-small .label {
+  padding: 0 8px;
+  height: 20px;
+}
+
+/* Primary variant (ice) */
+.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
 }
 
-button:is(:hover, :focus-visible) {
+.variant-primary:hover:not(.disabled) {
+  background: #8FEBE3;
   transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
 }
 
-button:active {
+.variant-primary:active:not(.disabled) {
+  background: #7FE2D4;
   transform: translateY(0);
-  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.16);
 }
 
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  transform: none;
-  box-shadow: none;
+/* Secondary variant (white) */
+.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
 }
 
-button.variant-primary {
-  background: linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));
-  color: var(--af-color-fg-inverse);
+.variant-secondary:hover:not(.disabled) {
+  background: #F6FAF9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
 }
 
-button.variant-secondary {
-  background: var(--af-color-bg-subtle);
-  color: var(--af-color-fg-default);
-  box-shadow: inset 0 0 0 1px rgba(18, 15, 31, 0.08);
+.variant-secondary:active:not(.disabled) {
+  background: #E8F1EF;
+  transform: translateY(0);
 }
 
-button.variant-ghost {
+/* Outline variant */
+.variant-outline {
   background: transparent;
-  color: var(--af-color-brand-primary-500);
-  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.3);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
 }
 
-button.size-lg {
-  padding: calc(var(--af-space-3)) calc(var(--af-space-4) + 4px);
-  font-size: var(--af-size-font-lg);
+.variant-outline:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
+  transform: translateY(-1px);
 }
 
-button .spinner {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 55%);
-  opacity: 0;
-  transition: opacity 120ms ease;
+.variant-outline:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
+  transform: translateY(0);
 }
 
-button.is-loading .spinner {
-  opacity: 1;
+/* Ghost variant (text only) */
+.variant-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--colour-brand-inkwell, #14343B);
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.variant-ghost:hover:not(.disabled) {
+  text-decoration: underline;
+}
+
+.variant-ghost:active:not(.disabled) {
+  opacity: 0.7;
+}
+
+/* Disabled state */
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-button.is-loading .content {
-  opacity: 0.6;
+/* Remove default button styles */
+button.button {
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+button.button.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.button.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.button.variant-outline {
+  background: transparent;
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.button.variant-ghost {
+  background: transparent;
+  border: 1px solid transparent;
 }