@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha13",
+    "version": "1.20.17-alpha15",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/css/arch-variables.css

@@ -0,0 +1,512 @@
+/* This file is generated by theme.js */
+
+:root {
+    --arch-color-architect-light-h: 198;
+    --arch-color-architect-light-s: 99%;
+    --arch-color-architect-light-l: 70%;
+    --arch-color-architect-light: hsl(
+        var(--arch-color-architect-light-h),
+        var(--arch-color-architect-light-s),
+        var(--arch-color-architect-light-l)
+    );
+    --arch-color-architect-dark-h: 179;
+    --arch-color-architect-dark-s: 95%;
+    --arch-color-architect-dark-l: 15%;
+    --arch-color-architect-dark: hsl(
+        var(--arch-color-architect-dark-h),
+        var(--arch-color-architect-dark-s),
+        var(--arch-color-architect-dark-l)
+    );
+    --arch-color-architect-bright-h: 14;
+    --arch-color-architect-bright-s: 100%;
+    --arch-color-architect-bright-l: 72%;
+    --arch-color-architect-bright: hsl(
+        var(--arch-color-architect-bright-h),
+        var(--arch-color-architect-bright-s),
+        var(--arch-color-architect-bright-l)
+    );
+    --arch-color-commerce-dark-h: 115;
+    --arch-color-commerce-dark-s: 27%;
+    --arch-color-commerce-dark-l: 32%;
+    --arch-color-commerce-dark: hsl(
+        var(--arch-color-commerce-dark-h),
+        var(--arch-color-commerce-dark-s),
+        var(--arch-color-commerce-dark-l)
+    );
+    --arch-color-commerce-light-h: 105;
+    --arch-color-commerce-light-s: 25%;
+    --arch-color-commerce-light-l: 97%;
+    --arch-color-commerce-light: hsl(
+        var(--arch-color-commerce-light-h),
+        var(--arch-color-commerce-light-s),
+        var(--arch-color-commerce-light-l)
+    );
+    --arch-color-developer-dark-h: 226;
+    --arch-color-developer-dark-s: 98%;
+    --arch-color-developer-dark-l: 21%;
+    --arch-color-developer-dark: hsl(
+        var(--arch-color-developer-dark-h),
+        var(--arch-color-developer-dark-s),
+        var(--arch-color-developer-dark-l)
+    );
+    --arch-color-developer-light-h: 210;
+    --arch-color-developer-light-s: 50%;
+    --arch-color-developer-light-l: 96%;
+    --arch-color-developer-light: hsl(
+        var(--arch-color-developer-light-h),
+        var(--arch-color-developer-light-s),
+        var(--arch-color-developer-light-l)
+    );
+    --arch-color-trailblazer-dark-h: 95;
+    --arch-color-trailblazer-dark-s: 40%;
+    --arch-color-trailblazer-dark-l: 15%;
+    --arch-color-trailblazer-dark: hsl(
+        var(--arch-color-trailblazer-dark-h),
+        var(--arch-color-trailblazer-dark-s),
+        var(--arch-color-trailblazer-dark-l)
+    );
+    --arch-color-trailblazer-light-h: 40;
+    --arch-color-trailblazer-light-s: 27%;
+    --arch-color-trailblazer-light-l: 98%;
+    --arch-color-trailblazer-light: hsl(
+        var(--arch-color-trailblazer-light-h),
+        var(--arch-color-trailblazer-light-s),
+        var(--arch-color-trailblazer-light-l)
+    );
+    --arch-color-admin-dark-h: 90;
+    --arch-color-admin-dark-s: 57%;
+    --arch-color-admin-dark-l: 32%;
+    --arch-color-admin-dark: hsl(
+        var(--arch-color-admin-dark-h),
+        var(--arch-color-admin-dark-s),
+        var(--arch-color-admin-dark-l)
+    );
+    --arch-color-admin-light-h: 185;
+    --arch-color-admin-light-s: 58%;
+    --arch-color-admin-light-l: 96%;
+    --arch-color-admin-light: hsl(
+        var(--arch-color-admin-light-h),
+        var(--arch-color-admin-light-s),
+        var(--arch-color-admin-light-l)
+    );
+    --arch-color-starter-dark-h: 196;
+    --arch-color-starter-dark-s: 72%;
+    --arch-color-starter-dark-l: 31%;
+    --arch-color-starter-dark: hsl(
+        var(--arch-color-starter-dark-h),
+        var(--arch-color-starter-dark-s),
+        var(--arch-color-starter-dark-l)
+    );
+    --arch-color-starter-light-h: 192;
+    --arch-color-starter-light-s: 56%;
+    --arch-color-starter-light-l: 96%;
+    --arch-color-starter-light: hsl(
+        var(--arch-color-starter-light-h),
+        var(--arch-color-starter-light-s),
+        var(--arch-color-starter-light-l)
+    );
+    --arch-color-careers-dark-h: 220;
+    --arch-color-careers-dark-s: 50%;
+    --arch-color-careers-dark-l: 34%;
+    --arch-color-careers-dark: hsl(
+        var(--arch-color-careers-dark-h),
+        var(--arch-color-careers-dark-s),
+        var(--arch-color-careers-dark-l)
+    );
+    --arch-color-careers-light-h: 225;
+    --arch-color-careers-light-s: 33%;
+    --arch-color-careers-light-l: 98%;
+    --arch-color-careers-light: hsl(
+        var(--arch-color-careers-light-h),
+        var(--arch-color-careers-light-s),
+        var(--arch-color-careers-light-l)
+    );
+    --arch-color-work-dark-h: 220;
+    --arch-color-work-dark-s: 50%;
+    --arch-color-work-dark-l: 34%;
+    --arch-color-work-dark: hsl(
+        var(--arch-color-work-dark-h),
+        var(--arch-color-work-dark-s),
+        var(--arch-color-work-dark-l)
+    );
+    --arch-color-work-light-h: 40;
+    --arch-color-work-light-s: 53%;
+    --arch-color-work-light-l: 97%;
+    --arch-color-work-light: hsl(
+        var(--arch-color-work-light-h),
+        var(--arch-color-work-light-s),
+        var(--arch-color-work-light-l)
+    );
+    --arch-color-salesforce-dark-h: 194;
+    --arch-color-salesforce-dark-s: 100%;
+    --arch-color-salesforce-dark-l: 15%;
+    --arch-color-salesforce-dark: hsl(
+        var(--arch-color-salesforce-dark-h),
+        var(--arch-color-salesforce-dark-s),
+        var(--arch-color-salesforce-dark-l)
+    );
+    --arch-color-salesforce-light-h: 196;
+    --arch-color-salesforce-light-s: 100%;
+    --arch-color-salesforce-light-l: 98%;
+    --arch-color-salesforce-light: hsl(
+        var(--arch-color-salesforce-light-h),
+        var(--arch-color-salesforce-light-s),
+        var(--arch-color-salesforce-light-l)
+    );
+    --arch-color-azure-h: 220;
+    --arch-color-azure-s: 53%;
+    --arch-color-azure-l: 45%;
+    --arch-color-azure: hsl(
+        var(--arch-color-azure-h),
+        var(--arch-color-azure-s),
+        var(--arch-color-azure-l)
+    );
+    --arch-color-black-h: 0;
+    --arch-color-black-s: 0%;
+    --arch-color-black-l: 12%;
+    --arch-color-black: hsl(
+        var(--arch-color-black-h),
+        var(--arch-color-black-s),
+        var(--arch-color-black-l)
+    );
+    --arch-color-calypso-h: 198;
+    --arch-color-calypso-s: 54%;
+    --arch-color-calypso-l: 36%;
+    --arch-color-calypso: hsl(
+        var(--arch-color-calypso-h),
+        var(--arch-color-calypso-s),
+        var(--arch-color-calypso-l)
+    );
+    --arch-color-evergreen-h: 153;
+    --arch-color-evergreen-s: 94%;
+    --arch-color-evergreen-l: 26%;
+    --arch-color-evergreen: hsl(
+        var(--arch-color-evergreen-h),
+        var(--arch-color-evergreen-s),
+        var(--arch-color-evergreen-l)
+    );
+    --arch-color-fire-h: 21;
+    --arch-color-fire-s: 97%;
+    --arch-color-fire-l: 52%;
+    --arch-color-fire: hsl(
+        var(--arch-color-fire-h),
+        var(--arch-color-fire-s),
+        var(--arch-color-fire-l)
+    );
+    --arch-color-fog-h: 0;
+    --arch-color-fog-s: 0%;
+    --arch-color-fog-l: 89%;
+    --arch-color-fog: hsl(
+        var(--arch-color-fog-h),
+        var(--arch-color-fog-s),
+        var(--arch-color-fog-l)
+    );
+    --arch-color-granite-h: 0;
+    --arch-color-granite-s: 0%;
+    --arch-color-granite-l: 68%;
+    --arch-color-granite: hsl(
+        var(--arch-color-granite-h),
+        var(--arch-color-granite-s),
+        var(--arch-color-granite-l)
+    );
+    --arch-color-ice-h: 216;
+    --arch-color-ice-s: 23%;
+    --arch-color-ice-l: 74%;
+    --arch-color-ice: hsl(
+        var(--arch-color-ice-h),
+        var(--arch-color-ice-s),
+        var(--arch-color-ice-l)
+    );
+    --arch-color-lochinvar-h: 176;
+    --arch-color-lochinvar-s: 54%;
+    --arch-color-lochinvar-l: 36%;
+    --arch-color-lochinvar: hsl(
+        var(--arch-color-lochinvar-h),
+        var(--arch-color-lochinvar-s),
+        var(--arch-color-lochinvar-l)
+    );
+    --arch-color-meteorite-h: 0;
+    --arch-color-meteorite-s: 0%;
+    --arch-color-meteorite-l: 35%;
+    --arch-color-meteorite: hsl(
+        var(--arch-color-meteorite-h),
+        var(--arch-color-meteorite-s),
+        var(--arch-color-meteorite-l)
+    );
+    --arch-color-midnight-h: 216;
+    --arch-color-midnight-s: 61%;
+    --arch-color-midnight-l: 22%;
+    --arch-color-midnight: hsl(
+        var(--arch-color-midnight-h),
+        var(--arch-color-midnight-s),
+        var(--arch-color-midnight-l)
+    );
+    --arch-color-ocean-h: 208;
+    --arch-color-ocean-s: 100%;
+    --arch-color-ocean-l: 41%;
+    --arch-color-ocean: hsl(
+        var(--arch-color-ocean-h),
+        var(--arch-color-ocean-s),
+        var(--arch-color-ocean-l)
+    );
+    --arch-color-ruby-h: 2;
+    --arch-color-ruby-s: 58%;
+    --arch-color-ruby-l: 48%;
+    --arch-color-ruby: hsl(
+        var(--arch-color-ruby-h),
+        var(--arch-color-ruby-s),
+        var(--arch-color-ruby-l)
+    );
+    --arch-color-sand-h: 0;
+    --arch-color-sand-s: 0%;
+    --arch-color-sand-l: 96%;
+    --arch-color-sand: hsl(
+        var(--arch-color-sand-h),
+        var(--arch-color-sand-s),
+        var(--arch-color-sand-l)
+    );
+    --arch-color-sunshine-h: 39;
+    --arch-color-sunshine-s: 98%;
+    --arch-color-sunshine-l: 58%;
+    --arch-color-sunshine: hsl(
+        var(--arch-color-sunshine-h),
+        var(--arch-color-sunshine-s),
+        var(--arch-color-sunshine-l)
+    );
+    --arch-color-white-h: 0;
+    --arch-color-white-s: 0%;
+    --arch-color-white-l: 100%;
+    --arch-color-white: hsl(
+        var(--arch-color-white-h),
+        var(--arch-color-white-s),
+        var(--arch-color-white-l)
+    );
+    --arch-color-hot-orange-sixty-h: 14;
+    --arch-color-hot-orange-sixty-s: 100%;
+    --arch-color-hot-orange-sixty-l: 59%;
+    --arch-color-hot-orange-sixty: hsl(
+        var(--arch-color-hot-orange-sixty-h),
+        var(--arch-color-hot-orange-sixty-s),
+        var(--arch-color-hot-orange-sixty-l)
+    );
+    --arch-color-hot-orange-eighty-h: 13;
+    --arch-color-hot-orange-eighty-s: 98%;
+    --arch-color-hot-orange-eighty-l: 82%;
+    --arch-color-hot-orange-eighty: hsl(
+        var(--arch-color-hot-orange-eighty-h),
+        var(--arch-color-hot-orange-eighty-s),
+        var(--arch-color-hot-orange-eighty-l)
+    );
+    --arch-color-hot-orange-ninety-h: 13;
+    --arch-color-hot-orange-ninety-s: 100%;
+    --arch-color-hot-orange-ninety-l: 92%;
+    --arch-color-hot-orange-ninety: hsl(
+        var(--arch-color-hot-orange-ninety-h),
+        var(--arch-color-hot-orange-ninety-s),
+        var(--arch-color-hot-orange-ninety-l)
+    );
+    --arch-color-teal-sixty-h: 176;
+    --arch-color-teal-sixty-s: 93%;
+    --arch-color-teal-sixty-l: 34%;
+    --arch-color-teal-sixty: hsl(
+        var(--arch-color-teal-sixty-h),
+        var(--arch-color-teal-sixty-s),
+        var(--arch-color-teal-sixty-l)
+    );
+    --arch-color-teal-eighty-h: 171;
+    --arch-color-teal-eighty-s: 59%;
+    --arch-color-teal-eighty-l: 65%;
+    --arch-color-teal-eighty: hsl(
+        var(--arch-color-teal-eighty-h),
+        var(--arch-color-teal-eighty-s),
+        var(--arch-color-teal-eighty-l)
+    );
+    --arch-color-teal-ninety-five-h: 167;
+    --arch-color-teal-ninety-five-s: 69%;
+    --arch-color-teal-ninety-five-l: 92%;
+    --arch-color-teal-ninety-five: hsl(
+        var(--arch-color-teal-ninety-five-h),
+        var(--arch-color-teal-ninety-five-s),
+        var(--arch-color-teal-ninety-five-l)
+    );
+    --arch-color-blue-sixty-h: 208;
+    --arch-color-blue-sixty-s: 100%;
+    --arch-color-blue-sixty-l: 55%;
+    --arch-color-blue-sixty: hsl(
+        var(--arch-color-blue-sixty-h),
+        var(--arch-color-blue-sixty-s),
+        var(--arch-color-blue-sixty-l)
+    );
+    --arch-color-blue-ninety-h: 207;
+    --arch-color-blue-ninety-s: 96%;
+    --arch-color-blue-ninety-l: 90%;
+    --arch-color-blue-ninety: hsl(
+        var(--arch-color-blue-ninety-h),
+        var(--arch-color-blue-ninety-s),
+        var(--arch-color-blue-ninety-l)
+    );
+    --arch-color-blue-ninety-five-h: 209;
+    --arch-color-blue-ninety-five-s: 100%;
+    --arch-color-blue-ninety-five-l: 96%;
+    --arch-color-blue-ninety-five: hsl(
+        var(--arch-color-blue-ninety-five-h),
+        var(--arch-color-blue-ninety-five-s),
+        var(--arch-color-blue-ninety-five-l)
+    );
+    --arch-color-theme-dark-h: 216;
+    --arch-color-theme-dark-s: 61%;
+    --arch-color-theme-dark-l: 22%;
+    --arch-color-theme-dark: hsl(
+        var(--arch-color-theme-dark-h),
+        var(--arch-color-theme-dark-s),
+        var(--arch-color-theme-dark-l)
+    );
+    --arch-color-theme-light-h: 0;
+    --arch-color-theme-light-s: 0%;
+    --arch-color-theme-light-l: 96%;
+    --arch-color-theme-light: hsl(
+        var(--arch-color-theme-light-h),
+        var(--arch-color-theme-light-s),
+        var(--arch-color-theme-light-l)
+    );
+    --arch-color-brand-h: 208;
+    --arch-color-brand-s: 100%;
+    --arch-color-brand-l: 41%;
+    --arch-color-brand: hsl(
+        var(--arch-color-brand-h),
+        var(--arch-color-brand-s),
+        var(--arch-color-brand-l)
+    );
+    --arch-color-success-h: 153;
+    --arch-color-success-s: 94%;
+    --arch-color-success-l: 26%;
+    --arch-color-success: hsl(
+        var(--arch-color-success-h),
+        var(--arch-color-success-s),
+        var(--arch-color-success-l)
+    );
+    --arch-color-destructive-h: 2;
+    --arch-color-destructive-s: 58%;
+    --arch-color-destructive-l: 48%;
+    --arch-color-destructive: hsl(
+        var(--arch-color-destructive-h),
+        var(--arch-color-destructive-s),
+        var(--arch-color-destructive-l)
+    );
+    --arch-color-important-h: 21;
+    --arch-color-important-s: 97%;
+    --arch-color-important-l: 52%;
+    --arch-color-important: hsl(
+        var(--arch-color-important-h),
+        var(--arch-color-important-s),
+        var(--arch-color-important-l)
+    );
+    --arch-font-size-xs: 12px;
+    --arch-font-size-sm: 14px;
+    --arch-font-size-md: 16px;
+    --arch-font-size-lg: 18px;
+    --arch-font-size-xl: 20px;
+    --arch-font-size-2xl: 24px;
+    --arch-font-size-3xl: 28px;
+    --arch-font-size-4xl: 32px;
+    --arch-font-size-5xl: 36px;
+    --arch-font-size-6xl: 40px;
+    --arch-font-size-7xl: 44px;
+    --arch-font-size-8xl: 48px;
+    --arch-radius-none: 0px;
+    --arch-radius-sm: 2px;
+    --arch-radius-md: 4px;
+    --arch-radius-lg: 8px;
+    --arch-radius-xl: 12px;
+    --arch-radius-full: 15984px;
+    --arch-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.04);
+    --arch-shadow-sm: 0 1px 3px 1px rgba(0, 0, 0, 0.06);
+    --arch-shadow-md: 0 3px 7px 1px rgba(0, 0, 0, 0.08);
+    --arch-shadow-lg: 0 4px 14px 1px rgba(0, 0, 0, 0.1);
+    --arch-duration-xshort: 75ms;
+    --arch-duration-short: 150ms;
+    --arch-duration-normal: 250ms;
+    --arch-duration-long: 400ms;
+    --arch-duration-xlong: 600ms;
+    --arch-spacing-0: 0px;
+    --arch-spacing-1: 4px;
+    --arch-spacing-2: 8px;
+    --arch-spacing-3: 12px;
+    --arch-spacing-4: 16px;
+    --arch-spacing-5: 20px;
+    --arch-spacing-6: 24px;
+    --arch-spacing-8: 32px;
+    --arch-spacing-10: 40px;
+    --arch-spacing-12: 48px;
+    --arch-spacing-16: 64px;
+    --arch-spacing-20: 80px;
+    --arch-spacing-24: 96px;
+    --arch-spacing-32: 128px;
+    --arch-spacing-40: 160px;
+    --arch-spacing-48: 192px;
+    --arch-spacing-px: 16px;
+    --arch-breakpoint-sm: 30rem;
+    --arch-breakpoint-md: 48rem;
+    --arch-breakpoint-lg: 64rem;
+    --arch-line-height-none: 16px;
+    --arch-line-height-tight: 18px;
+    --arch-line-height-snug: 20.4px;
+    --arch-line-height-normal: 24px;
+    --arch-line-height-relaxed: 26px;
+    --arch-line-height-loose: 32px;
+    --arch-container-sm: 480px;
+    --arch-container-md: 768px;
+    --arch-container-lg: 1024px;
+    --arch-container-xl: 1280px;
+}
+
+:root {
+    font-family: 'Salesforce Sans';
+    font-size: var(--arch-font-size-md);
+}
+
+.theme--architect {
+    --arch-color-theme-dark: var(--arch-color-architect-dark);
+    --arch-color-theme-light: var(--arch-color-architect-light);
+    --arch-color-theme-bright: var(--arch-color-architect-bright);
+}
+
+.theme--commerce {
+    --arch-color-theme-dark: var(--arch-color-commerce-dark);
+    --arch-color-theme-light: var(--arch-color-commerce-light);
+}
+
+.theme--developer {
+    --arch-color-theme-dark: var(--arch-color-developer-dark);
+    --arch-color-theme-light: var(--arch-color-developer-light);
+}
+
+.theme--trailblazer {
+    --arch-color-theme-dark: var(--arch-color-trailblazer-dark);
+    --arch-color-theme-light: var(--arch-color-trailblazer-light);
+}
+
+.theme--admin {
+    --arch-color-theme-dark: var(--arch-color-admin-dark);
+    --arch-color-theme-light: var(--arch-color-admin-light);
+}
+
+.theme--careers {
+    --arch-color-theme-dark: var(--arch-color-careers-dark);
+    --arch-color-theme-light: var(--arch-color-careers-light);
+}
+
+.theme--starter {
+    --arch-color-theme-dark: var(--arch-color-starter-dark);
+    --arch-color-theme-light: var(--arch-color-starter-light);
+}
+
+.theme--work {
+    --arch-color-theme-dark: var(--arch-color-work-dark);
+    --arch-color-theme-light: var(--arch-color-work-light);
+}
+
+.theme--salesforce {
+    --arch-color-theme-dark: var(--arch-color-salesforce-dark);
+    --arch-color-theme-light: var(--arch-color-salesforce-light);
+}

package/src/modules/arch/badge/badge.css

@@ -0,0 +1,22 @@
+@import 'arch/reset';
+
+:host {
+    display: inline-flex;
+}
+
+.badge {
+    border-radius: var(--arch-radius-xl);
+    font-size: var(--arch-font-size-xs);
+    font-weight: bold;
+    padding: var(--arch-spacing-1) var(--arch-spacing-2);
+}
+
+.fog {
+    background-color: var(--arch-color-fog);
+    color: var(--arch-color-meteorite);
+}
+
+.blue {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}

package/src/modules/arch/badge/badge.html

@@ -0,0 +1,5 @@
+<template>
+    <span class={className}>
+        <slot></slot>
+    </span>
+</template>

package/src/modules/arch/badge/badge.ts

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api color: string = 'fog';
+
+    get className() {
+        return `badge ${this.color}`;
+    }
+}

package/src/modules/arch/button/button.css

@@ -0,0 +1 @@
+@import 'arch/buttonStyles';

package/src/modules/arch/button/button.html

@@ -0,0 +1,20 @@
+<template>
+    <button
+        name="arch-button"
+        onclick={handleInteraction}
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        aria-pressed={ariaPressed}
+        class={className}
+        disabled={disabled}
+        type={type}
+    >
+        <arch-icon
+            if:true={hasSpinner}
+            symbol="spinner"
+            class="spinner"
+            size="small"
+        ></arch-icon>
+        <slot></slot>
+    </button>
+</template>

package/src/modules/arch/button/button.ts

@@ -0,0 +1,67 @@
+import { api, LightningElement } from "lwc";
+import {
+    attrToBool,
+    sendInteractionEvent,
+    InteractionEventTypes
+} from "arch/helpers";
+
+export type Size = "small" | "medium" | "large";
+export type Variant =
+    | "neutral"
+    | "brand"
+    | "success"
+    | "destructive"
+    | "destructive-inverse"
+    | "bare"
+    | "border-filled";
+
+export default class extends LightningElement {
+    @api ariaLabel: string | null = null;
+    @api ariaLive: string | null = null;
+    @api ariaPressed: string | null = null;
+    @api disabled: boolean | null = null;
+    @api type: "submit" | null = null;
+    @api variant: Variant = "neutral";
+    @api size: Size = "medium";
+    @api spinner: boolean = false;
+
+    private get hasSpinner() {
+        return attrToBool(this.spinner);
+    }
+
+    get sizeClassName() {
+        return (["small", "large"] as Size[]).includes(this.size)
+            ? `button-${this.size}`
+            : "";
+    }
+
+    private get className() {
+        return [
+            "button",
+            createVariantClassName(this.variant),
+            this.sizeClassName,
+            attrToBool(this.disabled) ? "button-disabled" : false
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    handleInteraction(event) {
+        sendInteractionEvent(
+            "Button Click",
+            InteractionEventTypes.CLICK,
+            event
+        );
+    }
+}
+
+export function createVariantClassName(variant: Variant) {
+    const DENY_LIST = [
+        "neutral",
+        "destructive-inverse",
+        "bare",
+        "border-filled"
+    ];
+    return `button-${variant} ${
+        !DENY_LIST.includes(variant) ? "button-variant" : ""
+    }`;
+}

package/src/modules/arch/buttonLink/buttonLink.css

@@ -0,0 +1 @@
+@import 'arch/buttonStyles';

package/src/modules/arch/buttonLink/buttonLink.html

@@ -0,0 +1,19 @@
+<template>
+    <a
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        class={className}
+        disabled={disabled}
+        href={href}
+        rel={rel}
+        target={target}
+    >
+        <arch-icon
+            if:true={hasSpinner}
+            symbol="spinner"
+            class="spinner"
+            size="small"
+        ></arch-icon>
+        <slot></slot>
+    </a>
+</template>

package/src/modules/arch/buttonLink/buttonLink.stories.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'arch/arch-button-link',
+    parameters: {
+        modules: ['/modules/arch-button-link.js']
+    }
+};
+
+export const Base = () => html`
+    <arch-button-link href="/">Link</arch-button-link>
+`;
+
+export const Small = () => html`
+    <arch-button-link size="small" href="/">Link</arch-button-link>
+`;
+
+export const Large = () => html`
+    <arch-button-link size="large" href="/">Link</arch-button-link>
+`;
+
+export const Disabled = () => html`
+    <arch-button-link href="/" disabled>Link</arch-button-link>
+`;