@genesislcap/foundation-ui 14.215.1 → 14.216.0

package/dist/custom-elements.json

@@ -862,188 +862,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionStyles",
-          "declaration": {
-            "name": "foundationAccordionStyles",
-            "module": "src/accordion/accordion.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Accordion>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionTemplate",
-          "declaration": {
-            "name": "foundationAccordionTemplate",
-            "module": "src/accordion/accordion.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Accordion",
-          "superclass": {
-            "name": "FASTAccordion",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-accordion",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordionShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultAccordionConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordion",
-          "description": "The Foundation Accordion",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Accordion",
-          "declaration": {
-            "name": "Accordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordionShadowOptions",
-          "declaration": {
-            "name": "foundationAccordionShadowOptions",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultAccordionConfig",
-          "declaration": {
-            "name": "defaultAccordionConfig",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordion",
-          "declaration": {
-            "name": "foundationAccordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.template"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/_config/index.ts",
@@ -1469,6 +1287,188 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionStyles",
+          "declaration": {
+            "name": "foundationAccordionStyles",
+            "module": "src/accordion/accordion.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Accordion>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionTemplate",
+          "declaration": {
+            "name": "foundationAccordionTemplate",
+            "module": "src/accordion/accordion.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Accordion",
+          "superclass": {
+            "name": "FASTAccordion",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-accordion",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordionShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultAccordionConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordion",
+          "description": "The Foundation Accordion",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Accordion",
+          "declaration": {
+            "name": "Accordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordionShadowOptions",
+          "declaration": {
+            "name": "foundationAccordionShadowOptions",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultAccordionConfig",
+          "declaration": {
+            "name": "defaultAccordionConfig",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordion",
+          "declaration": {
+            "name": "foundationAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/actions-menu/actions-menu.styles.ts",
@@ -34876,7 +34876,7 @@
           "type": {
             "text": "ElementStyles"
           },
-          "default": "css`\n  :host {\n    display: flex;\n    height: 100%;\n    width: 100%;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: column;\n  }\n\n  .stepper-tab {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 280px;\n    border-radius: 0;\n  }\n\n  .action-buttons-container {\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .stepper-panel-container {\n    height: 100%;\n    overflow: hidden;\n    padding: 15px;\n  }\n\n  .stepper-tab-menu {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-bottom: 30px;\n  }\n\n  .stepper-tab-progress {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: start;\n    flex: 1;\n  }\n\n  .stepper-tab-progress .progress-ring {\n    --design-unit: 10;\n\n    margin: 0;\n  }\n\n  .stepper-tab-panel {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 100%;\n    min-width: 370px;\n    border-radius: 0;\n  }\n\n  label {\n    padding: 0 10px;\n    color: rgb(135 155 166);\n    display: block;\n    cursor: pointer;\n    text-align: center;\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n    font-style: normal;\n    margin: calc(var(--design-unit) * 2px) 0;\n  }\n\n  :host([orientation='horizontal']) .stepper-tab-menu {\n    height: 100%;\n    flex-direction: row;\n    margin-bottom: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([orientation='horizontal']) .stepper-tab {\n    max-width: 100%;\n    max-height: 70px;\n  }\n`"
+          "default": "css`\n  :host {\n    display: flex;\n    height: 100%;\n    width: 100%;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: column;\n  }\n\n  .stepper-tab {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    max-width: 280px;\n    border-radius: 0;\n  }\n\n  .action-buttons-container {\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .stepper-panel-container {\n    height: 100%;\n    overflow: hidden;\n    padding: 15px;\n  }\n\n  .stepper-tab-menu {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-bottom: 30px;\n  }\n\n  .stepper-tab-progress {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: start;\n    flex: 1;\n  }\n\n  .stepper-tab-progress .progress-ring {\n    --design-unit: 10;\n\n    margin: 0;\n  }\n\n  .stepper-tab-panel {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 100%;\n    min-width: 370px;\n    border-radius: 0;\n  }\n\n  label {\n    padding: 0 10px;\n    color: rgb(135 155 166);\n    display: block;\n    cursor: pointer;\n    text-align: center;\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n    font-style: normal;\n    margin: calc(var(--design-unit) * 2px) 0;\n  }\n\n  :host([orientation='horizontal']) .stepper-tab-menu {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    margin-bottom: 0;\n    align-items: center;\n    justify-content: center;\n    gap: calc(var(--design-unit) * 4px);\n    padding: 0 calc(var(--design-unit) * 4px);\n  }\n\n  :host([orientation='horizontal']) .stepper-tab {\n    max-width: 100%;\n    max-height: 70px;\n    height: 70px;\n  }\n`"
         }
       ],
       "exports": [

package/dist/dts/stepper/stepper.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/stepper/stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,EAAE,aAsFrC,CAAC"}
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../src/stepper/stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,EAAE,aA2FrC,CAAC"}

package/dist/dts/stepper-tab/stepper-tab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-tab.styles.d.ts","sourceRoot":"","sources":["../../../src/stepper-tab/stepper-tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,0BAA0B,YAC5B,wBAAwB,cACrB,2BAA2B,KACtC,aAiFF,CAAC"}
+{"version":3,"file":"stepper-tab.styles.d.ts","sourceRoot":"","sources":["../../../src/stepper-tab/stepper-tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC5B,MAAM,4BAA4B,CAAC;AAEpC,eAAO,MAAM,0BAA0B,YAC5B,wBAAwB,cACrB,2BAA2B,KACtC,aA8GF,CAAC"}

package/dist/dts/stepper-tab/stepper-tab.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper-tab.template.d.ts","sourceRoot":"","sources":["../../../src/stepper-tab/stepper-tab.template.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,qBAAqB,WAAY,MAAM,oEAqDnD,CAAC;AAEF,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}
+{"version":3,"file":"stepper-tab.template.d.ts","sourceRoot":"","sources":["../../../src/stepper-tab/stepper-tab.template.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,qBAAqB,WAAY,MAAM,oEAwDnD,CAAC;AAEF,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}

package/dist/esm/stepper/stepper.styles.js

@@ -75,14 +75,19 @@ export const foundationStepperStyles = css `
 
   :host([orientation='horizontal']) .stepper-tab-menu {
     height: 100%;
+    width: 100%;
+    display: flex;
     flex-direction: row;
     margin-bottom: 0;
     align-items: center;
     justify-content: center;
+    gap: calc(var(--design-unit) * 4px);
+    padding: 0 calc(var(--design-unit) * 4px);
   }
 
   :host([orientation='horizontal']) .stepper-tab {
     max-width: 100%;
     max-height: 70px;
+    height: 70px;
   }
 `;

package/dist/esm/stepper-tab/stepper-tab.styles.js

@@ -35,49 +35,78 @@ export const foundationStepperTabStyles = (context, definition) => css `
     margin: 0 5px 0 0;
     width: 24px;
     height: 24px;
-    font-size: 12px;
+    font-size: var(--type-ramp-minus-1-font-size);
+    font-weight: 500;
     color: var(--focus-stroke-outer);
     background-color: var(--neutral-fill-input-rest);
     border-radius: 50%;
-    border: 1px solid var(--neutral-fill-input-rest);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-input-rest);
   }
 
   .step-number-container {
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
+    width: 75%;
   }
 
   .angle-icon {
     color: var(--neutral-fill-input-rest);
-    margin: 0 15px;
+    margin: 0 calc(var(--design-unit) * 4px);
   }
 
   .step-title {
-    font-size: 14px;
+    font-size: var(--type-ramp-base-font-size);
     color: var(--focus-stroke-outer);
+    font-weight: 600;
   }
 
   :host([completed]) .step-number {
     border-color: #69cd70;
-    color: #69cd70;
+    color: white;
+    background-color: #69cd70;
   }
 
-  :host([completed]) .step-title,
-  :host([completed]) .angle-icon {
+  :host([completed]) .step-title {
     color: #69cd70;
   }
 
   :host([error]) .step-number {
     border-color: #f14376;
-    color: #f14376;
+    color: white;
+    background-color: #f14376;
   }
 
   :host([error]) .step-title {
     color: #f14376;
   }
 
+  :host([orientation='horizontal']) {
+    flex: 1 1 0;
+    height: 100%;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
+
+  .step-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+  }
+
+  .step-container.selected::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: calc(var(--design-unit) * -3px); /* This matches the left padding */
+    right: 28px; /* This matches the icon width + right margin */
+    height: 2px;
+    width: calc(100% - 28px);
+    background-color: var(--accent-fill-rest); /* Choose a color */
+  }
 `;

package/dist/esm/stepper-tab/stepper-tab.template.js

@@ -27,12 +27,14 @@ export const getPrefixedStepperTab = (prefix) => html `
           <slot></slot>
         </${prefix}-tree-item>
       `, html `
-      <div
-        class=${(x) => classNames('step-number-container', ['cursor-pointer', x.showCursorPointer])}
-        @click="${(x) => x.$emit('tab-clicked', x.tabPosition - 1)}"
-      >
-        <span class="step-number">${(x) => x.tabPosition}</span>
-        <slot class="step-title"></slot>
+      <div class=${(x) => classNames('step-container', ['selected', x.selected])}>
+        <div
+          class=${(x) => classNames('step-number-container', ['cursor-pointer', x.showCursorPointer])}
+          @click="${(x) => x.$emit('tab-clicked', x.tabPosition - 1)}"
+        >
+          <span class="step-number">${(x) => x.tabPosition}</span>
+          <slot class="step-title"></slot>
+        </div>
         ${when((x) => !x.isLast, html `
                 <${prefix}-icon
                   class="stepper-icon angle-icon"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.215.1",
+  "version": "14.216.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.215.1",
-    "@genesislcap/genx": "14.215.1",
-    "@genesislcap/rollup-builder": "14.215.1",
-    "@genesislcap/ts-builder": "14.215.1",
-    "@genesislcap/uvu-playwright-builder": "14.215.1",
-    "@genesislcap/vite-builder": "14.215.1",
-    "@genesislcap/webpack-builder": "14.215.1",
+    "@genesislcap/foundation-testing": "14.216.0",
+    "@genesislcap/genx": "14.216.0",
+    "@genesislcap/rollup-builder": "14.216.0",
+    "@genesislcap/ts-builder": "14.216.0",
+    "@genesislcap/uvu-playwright-builder": "14.216.0",
+    "@genesislcap/vite-builder": "14.216.0",
+    "@genesislcap/webpack-builder": "14.216.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.0",
     "rxjs": "^7.5.4"
@@ -100,13 +100,13 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/foundation-comms": "14.215.1",
-    "@genesislcap/foundation-criteria": "14.215.1",
-    "@genesislcap/foundation-errors": "14.215.1",
-    "@genesislcap/foundation-logger": "14.215.1",
-    "@genesislcap/foundation-notifications": "14.215.1",
-    "@genesislcap/foundation-user": "14.215.1",
-    "@genesislcap/foundation-utils": "14.215.1",
+    "@genesislcap/foundation-comms": "14.216.0",
+    "@genesislcap/foundation-criteria": "14.216.0",
+    "@genesislcap/foundation-errors": "14.216.0",
+    "@genesislcap/foundation-logger": "14.216.0",
+    "@genesislcap/foundation-notifications": "14.216.0",
+    "@genesislcap/foundation-user": "14.216.0",
+    "@genesislcap/foundation-utils": "14.216.0",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "f7a58325bc859e6ce441c7df636009d16baca008"
+  "gitHead": "b376558560c01c275ea32ac90429521839776d02"
 }