@xy-planning-network/trees 0.9.9 → 0.10.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.9.9",
+  "version": "0.10.0-rc1",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -21,7 +21,7 @@
     "*.vue"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite.docs.config.ts",
     "build": "npm run lint && vue-tsc -p src --emitDeclarationOnly && vite build && npm run copy:types && tsc-alias -p src/tsconfig.json",
     "build:docs": "vue-tsc -p dev --noEmit && vite build --config vite.docs.config.ts",
     "copy:types": "copyfiles -f ./src/*.d.ts ./types",
@@ -34,7 +34,6 @@
     "typecheck:docs": "vue-tsc -p dev --noEmit"
   },
   "devDependencies": {
-    "@point-hub/vue-highlight": "^0.1.4",
     "@rushstack/eslint-patch": "^1.2.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.7",
@@ -46,11 +45,14 @@
     "copyfiles": "^2.4.1",
     "eslint": "^8.42.0",
     "eslint-plugin-vue": "^9.14.1",
+    "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.21",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.3.3",
     "tsc-alias": "^1.8.5",
     "typescript": "~5.4.5",
+    "unplugin-vue-components": "^0.27.4",
+    "unplugin-vue-markdown": "^0.25.2",
     "vite": "^4.3.9",
     "vue-tsc": "^2.0.29"
   },

package/src/index.css

@@ -3,9 +3,14 @@
 @tailwind utilities;
 
 @layer base {
+  html {
+    @apply antialiased;
+    font-optical-sizing: auto;
+  }
+
   /* general body copy */
   body {
-    @apply text-base leading-normal text-gray-900;
+    @apply text-base leading-normal text-gray-800; /* NOTE(spk): expecting this to eventually hold the xy-black value */
   }
 
   /* Headers */
@@ -37,32 +42,122 @@
 @layer components {
   /* Badge classes - TODO: handle anchor tag class cases and generic wrapper cases */
   .xy-badge {
-    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-800;
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-800;
   }
 
   .xy-badge-blue {
-    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800;
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800;
+  }
+
+  .xy-badge-green {
+    /* NOTE(spk): currently does not meet contrast ratio requirements */
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-xy-green-50/40 text-xy-green-900;
   }
 
   .xy-badge-yellow {
-    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-yellow-100 text-yellow-800;
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800;
+  }
+
+  /*
+    Button classes
+
+    NOTE(spk): prefer rounded-3xl to rounded-full to support line wrapping in buttons.
+    NOTE(spk): prefer a consistent focus ring color for tracking - best practice.
+    NOTE(spk): using opacity in disabled states fails contrast accessibility standards (revisit).
+  */
+  .xy-btn-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-sm text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-xy-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
-  /* Button classes */
   .xy-btn {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md shadow-md text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-sm text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-xy-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
-  .xy-btn-secondary {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md shadow-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+  .xy-btn-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-white bg-xy-blue-600 hover:bg-xy-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-xy-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
   }
 
+  /* NOTE(spk): including .xy-btn-red alias for backwards compatibility */
+  .xy-btn-danger-sm,
+  .xy-btn-red-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-sm text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-500;
+  }
+
+  .xy-btn-danger,
   .xy-btn-red {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-xs md:text-sm font-semibold rounded-md shadow-md text-red-700 bg-red-100 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-300 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-sm text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-500;
+  }
+
+  .xy-btn-danger-lg,
+  .xy-btn-red-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-sm text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ease-linear duration-500;
+  }
+
+  .xy-btn-neutral-sm {
+    @apply inline-flex justify-center items-center px-2.5 py-1.5 border border-transparent text-xs font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-neutral-50 disabled:text-neutral-500 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-neutral-50 disabled:text-neutral-500 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  .xy-btn-neutral-lg {
+    @apply inline-flex justify-center items-center px-5 py-2.5 border border-transparent text-base font-display font-semibold rounded-3xl shadow-none text-neutral-800 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:bg-neutral-50 disabled:text-neutral-500 disabled:cursor-not-allowed transition-colors ease-linear duration-300;
+  }
+
+  /* NOTE(spk): always consider the relative box-sizing between buttons with solid backgrounds and full borders vs secondary styles as they will commonly be laid out next to each other */
+  /* NOTE(spk): there's no way to round a ring or outline in a focus state without rounding the entire button.  Avoid this as it causes odd shapes on the bottom border and using content hacks aren't worth the trouble */
+  .xy-btn-secondary-sm {
+    @apply inline-flex justify-center items-center py-1.5 border-b-2 border-b-xy-blue-600 text-xs font-display font-semibold shadow-none text-neutral-800 hover:text-xy-blue-600 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-blue-600 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-secondary {
+    @apply inline-flex justify-center items-center py-2 border-b-2 border-b-xy-blue-600 text-sm font-display font-semibold shadow-none text-neutral-800 hover:text-xy-blue-600 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-blue-600 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-secondary-lg {
+    @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-xy-blue-600 text-base font-display font-semibold shadow-none text-neutral-800 hover:text-xy-blue-600 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-blue-600 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent-sm {
+    @apply inline-flex justify-center items-center py-1.5 border-b-2 border-b-xy-green text-xs font-display font-semibold shadow-none text-neutral-800 hover:text-xy-green-900 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-green disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent {
+    @apply inline-flex justify-center items-center py-2 border-b-2 border-b-xy-green text-sm font-display font-semibold shadow-none text-neutral-800 hover:text-xy-green-900 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-green disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent-lg {
+    @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-xy-green text-base font-display font-semibold shadow-none text-neutral-800 hover:text-xy-green-900 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-xy-green disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent-inverse-sm {
+    @apply inline-flex justify-center items-center py-1.5 border-b-2 border-b-xy-green text-xs font-display font-semibold shadow-none text-white hover:text-xy-green hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-white disabled:border-b-xy-green disabled:opacity-75 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent-inverse {
+    @apply inline-flex justify-center items-center py-2 border-b-2 border-b-xy-green text-sm font-display font-semibold shadow-none text-white hover:text-xy-green hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-white disabled:border-b-xy-green disabled:opacity-75 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-accent-inverse-lg {
+    @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-xy-green text-base font-display font-semibold shadow-none text-white hover:text-xy-green hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-white disabled:border-b-xy-green disabled:opacity-75 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-secondary-danger-sm {
+    @apply inline-flex justify-center items-center py-1.5 border-b-2 border-b-red-700 text-xs font-display font-semibold shadow-none text-neutral-800 hover:text-red-700 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-red-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-secondary-danger {
+    @apply inline-flex justify-center items-center py-2 border-b-2 border-b-red-700 text-sm font-display font-semibold shadow-none text-neutral-800 hover:text-red-700 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-red-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
+  }
+
+  .xy-btn-secondary-danger-lg {
+    @apply inline-flex justify-center items-center py-2.5 border-b-2 border-b-red-700 text-base font-display font-semibold shadow-none text-neutral-800 hover:text-red-700 hover:border-b-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:text-neutral-800 disabled:border-b-red-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors ease-linear duration-150;
   }
 
+  /* Deprecated */
   .xy-btn-white {
-    @apply inline-flex justify-center items-center px-4 py-2 border border-xy-blue shadow-md text-sm font-semibold rounded-md text-xy-blue bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply inline-flex justify-center items-center px-4 py-2 border border-xy-blue shadow-sm text-sm font-semibold rounded-3xl text-xy-blue bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   /* Header classes */
@@ -108,7 +203,7 @@
 
   /* Link classes */
   .xy-link {
-    @apply font-semibold underline text-xy-blue-600 hover:text-xy-blue-500;
+    @apply font-medium border-b-2 border-b-xy-blue hover:border-b-transparent hover:text-xy-blue;
   }
 }
 

package/src/lib-components/forms/FieldsetLegend.vue

@@ -34,7 +34,7 @@ const labelDisplay = computed((): string => {
   <component
     :is="tag"
     v-if="label"
-    class="block text-base leading-snug font-medium text-gray-800"
+    class="block text-sm leading-6 font-semibold text-gray-800"
     v-bind="$attrs"
   >
     {{ labelDisplay }}

package/src/lib-components/forms/InputHelp.vue

@@ -14,7 +14,7 @@ withDefaults(
   <component
     :is="tag"
     v-if="text"
-    class="text-sm leading-snug font-normal text-gray-600"
+    class="text-sm leading-6 font-normal text-gray-600"
     v-bind="$attrs"
   >
     {{ text }}

package/src/lib-components/forms/MultiCheckboxes.vue

@@ -85,7 +85,7 @@ const setValidationError = () => {
 
 <template>
   <fieldset
-    class="relative space-y-4"
+    class="relative space-y-6"
     :aria-labelledby="aria.labelledby"
     :aria-describedby="aria.describedby"
     :aria-errormessage="aria.errormessage"
@@ -96,11 +96,16 @@ const setValidationError = () => {
         :label="label"
         :required="minCount > 0"
       />
-      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
+      <InputHelp
+        v-if="help"
+        :id="aria.describedby"
+        class="mt-1"
+        tag="p"
+        :text="help"
+      />
+      <InputError :id="aria.errormessage" class="mt-1" :text="errorState" />
     </div>
 
-    <InputError :id="aria.errormessage" :text="errorState" />
-
     <!--Hidden input for custom validation-->
     <input
       v-if="countError"
@@ -114,9 +119,9 @@ const setValidationError = () => {
 
     <div class="flex">
       <div
-        class="grid gap-y-6"
+        class="grid gap-y-5"
         :class="{
-          'sm:grid sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid sm:gap-x-10': columns !== undefined,
           'sm:grid-cols-2': columns === 2,
           'sm:grid-cols-3': columns === 3,
         }"

package/src/lib-components/forms/Radio.vue

@@ -36,7 +36,7 @@ const onChange = (e: Event, val: string | number) => {
 
 <template>
   <fieldset
-    class="space-y-4"
+    class="space-y-6"
     :aria-labelledby="aria.labelledby"
     :aria-describedby="aria.describedby"
     :aria-errormessage="aria.errormessage"
@@ -47,16 +47,21 @@ const onChange = (e: Event, val: string | number) => {
         :label="label"
         :required="isRequired"
       />
-      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
+      <InputHelp
+        v-if="help"
+        :id="aria.describedby"
+        class="mt-1"
+        tag="p"
+        :text="help"
+      />
+      <InputError :id="aria.errormessage" class="mt-1" :text="errorState" />
     </div>
 
-    <InputError :id="aria.errormessage" :text="errorState" />
-
     <div class="flex">
       <div
-        class="grid gap-y-6"
+        class="grid gap-y-5"
         :class="{
-          'sm:grid sm:gap-x-5 sm:space-y-0': columns !== undefined,
+          'sm:grid sm:gap-x-10': columns !== undefined,
           'sm:grid-cols-2': columns === 2,
           'sm:grid-cols-3': columns === 3,
         }"

package/src/lib-components/forms/RadioCards.vue

@@ -66,14 +66,14 @@ const onUpdate = (val: unknown) => {
       <FieldsetLegend tag="div" :label="label" :required="isRequired" />
     </RadioGroupLabel>
 
-    <RadioGroupDescription v-if="help">
+    <RadioGroupDescription v-if="help" class="mt-1">
       <InputHelp :text="help" />
     </RadioGroupDescription>
 
-    <InputError :id="aria.errormessage" :text="errorState" />
+    <InputError :id="aria.errormessage" class="mt-1" :text="errorState" />
 
     <div
-      class="mt-4 grid grid-cols-1 gap-y-5 gap-x-4 relative"
+      class="mt-6 grid grid-cols-1 gap-y-5 gap-x-4 relative"
       :class="{
         'sm:grid-cols-2': columns === 2,
         'sm:grid-cols-3': columns === 3,
@@ -87,9 +87,9 @@ const onUpdate = (val: unknown) => {
           checked,
           disabled,
         }: {
-          active: boolean,
-          checked: boolean,
-          disabled: boolean,
+          active: boolean
+          checked: boolean
+          disabled: boolean
         }"
         as="template"
         :disabled="isDisabled || option.disabled"

package/src/lib-components/forms/YesOrNoRadio.vue

@@ -32,7 +32,7 @@ const onChange = (e: Event, val: boolean) => {
 
 <template>
   <fieldset
-    class="space-y-4"
+    class="space-y-6"
     :aria-labelledby="aria.labelledby"
     :aria-describedby="aria.describedby"
     :aria-errormessage="aria.errormessage"
@@ -45,11 +45,16 @@ const onChange = (e: Event, val: boolean) => {
         :required="isRequired"
         tag="legend"
       />
-      <InputHelp v-if="help" :id="aria.describedby" tag="p" :text="help" />
+      <InputHelp
+        v-if="help"
+        :id="aria.describedby"
+        class="mt-1"
+        tag="p"
+        :text="help"
+      />
+      <InputError :id="aria.errormessage" class="mt-1" :text="errorState" />
     </div>
 
-    <InputError :id="aria.errormessage" :text="errorState" />
-
     <div>
       <label
         class="inline-flex items-center group"

package/src/lib-components/indicators/InlineAlert.vue

@@ -116,7 +116,7 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <div v-if="visible" class="rounded-lg p-4" :class="display.bgColor">
+  <div v-if="visible" class="rounded-xy p-4" :class="display.bgColor">
     <div class="flex">
       <div class="flex-shrink-0">
         <component
@@ -152,7 +152,7 @@ const icon = computed(() => {
           >
             <div v-if="btnText">
               <a
-                class="inline-flex rounded-md px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                class="inline-flex rounded-3xl px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
                 :class="display.btnAction"
                 :href="btnLink"
                 :role="btnLink ? 'link' : 'button'"
@@ -163,7 +163,7 @@ const icon = computed(() => {
             </div>
             <div v-if="secondaryBtnText">
               <a
-                class="inline-flex rounded-md px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                class="inline-flex rounded-3xl px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
                 :class="display.btnAction"
                 :href="secondaryBtnLink"
                 :role="secondaryBtnLink ? 'link' : 'button'"

package/src/lib-components/indicators/ProgressCircles.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { CheckIcon } from "@heroicons/vue/solid"
+import { computed } from "vue"
+
+type StepStatus = "complete" | "current" | "incomplete"
+
+interface Step {
+  name: string
+  description?: string
+}
+
+const props = defineProps<{
+  /**
+   * current sets the "current" step using an index of the steps prop
+   * to show all steps in an "incomplete" state set step to -1
+   * to show all steps in an "complete" state set step to a value >= steps.length
+   */
+  current: number
+  steps: Step[]
+}>()
+
+const layoutSteps = computed(() => {
+  return props.steps.map((step, stepIndex) => {
+    let status: StepStatus
+
+    if (props.current > stepIndex) {
+      status = "complete"
+    } else if (props.current === stepIndex) {
+      status = "current"
+    } else {
+      status = "incomplete"
+    }
+
+    return {
+      name: step.name,
+      description: step?.description || "",
+      status: status,
+    }
+  })
+})
+</script>
+
+<template>
+  <nav aria-label="Progress">
+    <ol role="list" class="flex items-center">
+      <li
+        v-for="(step, index) in layoutSteps"
+        :key="step.name"
+        :class="[index !== layoutSteps.length - 1 ? 'pr-8' : '', 'relative']"
+      >
+        <!--NOTE: horizontal connecting bar-->
+        <div class="absolute inset-0 flex items-center" aria-hidden="true">
+          <div
+            :class="[
+              'h-0.5 w-full',
+              step.status === 'complete' ? 'bg-xy-blue' : 'bg-gray-300',
+            ]"
+          />
+        </div>
+        <div
+          :class="{
+            'relative flex h-5 w-5 items-center justify-center rounded-full': true,
+            'bg-xy-blue': step.status === 'complete',
+            'border-2 border-indigo-600 bg-white': step.status === 'current',
+            'border-2 border-gray-300 bg-white': step.status === 'incomplete',
+          }"
+          :aria-current="step.status === 'current' ? true : undefined"
+        >
+          <CheckIcon
+            v-if="step.status === 'complete'"
+            class="h-3 w-3 text-white"
+            aria-hidden="true"
+          />
+          <span
+            v-else-if="step.status === 'current'"
+            class="h-3 w-3 rounded-full bg-xy-blue"
+            aria-hidden="true"
+          />
+          <span class="sr-only">{{ step.name }}</span>
+          <span v-if="step.description" class="sr-only">{{
+            step.description
+          }}</span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/lib-components/indicators/ProgressCirclesLabeled.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { CheckIcon } from "@heroicons/vue/solid"
+import { computed } from "vue"
+
+type StepStatus = "complete" | "current" | "incomplete"
+
+interface Step {
+  name: string
+  description?: string
+}
+
+const props = defineProps<{
+  /**
+   * current sets the "current" step using an index of the steps prop
+   * to show all steps in an "incomplete" state set step to -1
+   * to show all steps in an "complete" state set step to a value >= steps.length
+   */
+  current: number
+  steps: Step[]
+}>()
+
+const layoutSteps = computed(() => {
+  return props.steps.map((step, stepIndex) => {
+    let status: StepStatus
+
+    if (props.current > stepIndex) {
+      status = "complete"
+    } else if (props.current === stepIndex) {
+      status = "current"
+    } else {
+      status = "incomplete"
+    }
+
+    return {
+      name: step.name,
+      description: step?.description || "",
+      status: status,
+    }
+  })
+})
+</script>
+
+<template>
+  <div aria-label="Progress">
+    <ol role="list" class="overflow-hidden">
+      <li
+        v-for="(step, index) in layoutSteps"
+        :key="index"
+        :class="[index !== layoutSteps.length - 1 ? 'pb-6' : '', 'relative']"
+      >
+        <!--NOTE: vertical connecting bar-->
+        <div
+          v-if="index !== layoutSteps.length - 1"
+          :class="[
+            'absolute left-4 top-4 -ml-px mt-0.5 h-full w-0.5',
+            step.status === 'complete' ? 'bg-xy-blue' : 'bg-gray-300',
+          ]"
+          aria-hidden="true"
+        />
+        <div
+          class="group relative flex items-start"
+          :aria-current="step.status === 'current' ? true : undefined"
+        >
+          <span class="flex h-9 items-center">
+            <span
+              :class="{
+                'relative z-10 flex h-8 w-8 items-center justify-center rounded-full': true,
+                'bg-xy-blue ': step.status === 'complete',
+                'border-2 border-xy-blue bg-white': step.status === 'current',
+                'border-2 border-gray-300 bg-white':
+                  step.status === 'incomplete',
+              }"
+            >
+              <CheckIcon
+                v-if="step.status === 'complete'"
+                class="h-5 w-5 text-white"
+                aria-hidden="true"
+              />
+              <span
+                v-else-if="step.status === 'current'"
+                class="h-2.5 w-2.5 rounded-full bg-xy-blue"
+              />
+            </span>
+          </span>
+          <span class="ml-4 flex min-w-0 flex-col">
+            <span
+              :class="{
+                'text-sm font-bold': true,
+                'text-gray-800': step.status === 'complete',
+                'text-xy-blue': step.status === 'current',
+                'text-gray-600': step.status === 'incomplete',
+                'mt-2': !step.description,
+              }"
+              >{{ step.name }}</span
+            >
+            <span v-if="step.description" class="text-sm text-gray-600">{{
+              step.description
+            }}</span>
+          </span>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>