@affinda/wc 0.0.2 → 0.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"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-DHjsui2n.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-heading_3.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[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"]}]]]], 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

@@ -5,7 +5,13 @@
     "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-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-icon-button/af-icon-button.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-button/af-button.css

@@ -0,0 +1,183 @@
+:host {
+  display: inline-block;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border-radius: 9999px;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  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);
+}
+
+.variant-primary:hover:not(.disabled) {
+  background: #8FEBE3;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-primary:active:not(.disabled) {
+  background: #7FE2D4;
+  transform: translateY(0);
+}
+
+/* Secondary variant (white) */
+.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-secondary:hover:not(.disabled) {
+  background: #F6FAF9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-secondary:active:not(.disabled) {
+  background: #E8F1EF;
+  transform: translateY(0);
+}
+
+/* Outline variant */
+.variant-outline {
+  background: transparent;
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-outline:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
+  transform: translateY(-1px);
+}
+
+.variant-outline:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
+  transform: translateY(0);
+}
+
+/* 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;
+}
+
+/* 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;
+}

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

@@ -0,0 +1,154 @@
+import { h, Host } from "@stencil/core";
+export class AfButton {
+    constructor() {
+        /**
+         * The visual variant of the button
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'default';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
+    }
+    render() {
+        const classes = {
+            'button': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
+        };
+        const content = [
+            h("span", { class: "icon-left" }, h("slot", { name: "icon-left" })),
+            h("span", { class: "label" }, h("slot", null)),
+            h("span", { class: "icon-right" }, h("slot", { name: "icon-right" }))
+        ];
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes }, content)));
+    }
+    static get is() { return "af-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-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": "'default' | 'small'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "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'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAwCxD;IAtCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,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;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,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,IAC/B,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,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\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: 'default' | 'small' = 'default';\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  render() {\n    const classes = {\n      '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-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+:host {
+  display: inline-block;
+}
+
+.button-group {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.direction-vertical {
+  flex-direction: column;
+}
+
+/* Ensure slotted buttons align properly */
+::slotted(*) {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,77 @@
+import { h, Host } from "@stencil/core";
+export class AfButtonGroup {
+    constructor() {
+        /**
+         * Layout direction of the button group
+         */
+        this.direction = 'horizontal';
+        /**
+         * Gap between buttons
+         */
+        this.gap = '8px';
+    }
+    render() {
+        const classes = {
+            'button-group': true,
+            [`direction-${this.direction}`]: true
+        };
+        return (h(Host, { key: '9ef4ea3e4429646edb2d14a780763807d35ca438' }, h("div", { key: '8f61ec426b1f01cfd0ed91b6045e01cc1ecb1637', class: classes, style: { gap: this.gap } }, h("slot", { key: '06acb0d36cc96b311c228ba19039899a99d6a35d' }))));
+    }
+    static get is() { return "af-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the button group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'8px'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-button-group.js","sourceRoot":"","sources":["../../../src/components/af-button-group/af-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,aAAa;IAL1B;QAME;;WAEG;QACK,cAAS,GAA8B,YAAY,CAAC;QAE5D;;WAEG;QACK,QAAG,GAAW,KAAK,CAAC;KAgB7B;IAdC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;SACtC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;gBAC3C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button-group',\n  styleUrl: 'af-button-group.css',\n  shadow: true\n})\nexport class AfButtonGroup {\n  /**\n   * Layout direction of the button group\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between buttons\n   */\n  @Prop() gap: string = '8px';\n\n  render() {\n    const classes = {\n      'button-group': true,\n      [`direction-${this.direction}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes} style={{ gap: this.gap }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,169 @@
+:host {
+  display: inline-block;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  text-decoration: none;
+  padding: 0;
+}
+
+/* Size variants */
+.size-large {
+  width: 72px;
+  height: 72px;
+  padding: 24px;
+}
+
+.size-large .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.size-medium {
+  width: 48px;
+  height: 48px;
+  padding: 12px;
+}
+
+.size-medium .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.size-small {
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+}
+
+.size-small .icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* Icon slot */
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon ::slotted(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+/* Primary variant (ice) */
+.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-primary:hover:not(.disabled) {
+  background: #8FEBE3;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-primary:active:not(.disabled) {
+  background: #7FE2D4;
+  transform: translateY(0);
+}
+
+/* Secondary variant (white) */
+.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-secondary:hover:not(.disabled) {
+  background: #F6FAF9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+}
+
+.variant-secondary:active:not(.disabled) {
+  background: #E8F1EF;
+  transform: translateY(0);
+}
+
+/* Outline variant */
+.variant-outline {
+  background: transparent;
+  border-color: var(--colour-brand-inkwell, #14343B);
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-outline:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
+  transform: translateY(-1px);
+}
+
+.variant-outline:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
+  transform: translateY(0);
+}
+
+/* Ghost variant */
+.variant-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--colour-brand-inkwell, #14343B);
+}
+
+.variant-ghost:hover:not(.disabled) {
+  background: rgba(20, 52, 59, 0.04);
+}
+
+.variant-ghost:active:not(.disabled) {
+  background: rgba(20, 52, 59, 0.08);
+}
+
+/* Disabled state */
+.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Remove default button styles */
+button.icon-button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+button.icon-button.variant-primary {
+  background: var(--colour-brand-ice, #A6FFFB);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.icon-button.variant-secondary {
+  background: var(--colour-brand-white, #FFFFFF);
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.icon-button.variant-outline {
+  background: transparent;
+  border: 1px solid var(--colour-brand-inkwell, #14343B);
+}
+
+button.icon-button.variant-ghost {
+  background: transparent;
+  border: 1px solid transparent;
+}