@genesislcap/foundation-ui 14.215.1 → 14.217.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"categorized-multiselect.template.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/categorized-multiselect.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,eAAO,MAAM,iCAAiC,YACpC,MAAM,gFAgEf,CAAC;AAEF,eAAO,MAAM,8BAA8B,6EAE1C,CAAC"}
1
+ {"version":3,"file":"categorized-multiselect.template.d.ts","sourceRoot":"","sources":["../../../src/categorized-multiselect/categorized-multiselect.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,eAAO,MAAM,iCAAiC,YACpC,MAAM,gFAoEf,CAAC;AAEF,eAAO,MAAM,8BAA8B,6EAE1C,CAAC"}
@@ -1 +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"}
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,aA2FrC,CAAC"}
@@ -1 +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"}
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,aA8GF,CAAC"}
@@ -1 +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"}
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,oEAwDnD,CAAC;AAEF,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}
@@ -17,7 +17,11 @@ export const getPrefixedCategorizedMultiselect = (prefix = 'foundation') => html
17
17
  })}
18
18
  ></slot>
19
19
  </label>
20
- <${prefix}-button class="control-button" part="control-button"><${prefix}-icon name="plus" variant="solid" size="lg"></${prefix}-icon></${prefix}-button>
20
+ <${prefix}-button class="control-button" part="control-button">
21
+ <slot name="button-content">
22
+ <${prefix}-icon name="plus" variant="solid" size="lg"></${prefix}-icon>
23
+ </slot>
24
+ </${prefix}-button>
21
25
  </div>
22
26
  <div ${ref('optionsElement')} class="options" part="options">
23
27
  ${when((x) => x.search, html `
@@ -75,14 +75,19 @@ export const foundationStepperStyles = css `
75
75
 
76
76
  :host([orientation='horizontal']) .stepper-tab-menu {
77
77
  height: 100%;
78
+ width: 100%;
79
+ display: flex;
78
80
  flex-direction: row;
79
81
  margin-bottom: 0;
80
82
  align-items: center;
81
83
  justify-content: center;
84
+ gap: calc(var(--design-unit) * 4px);
85
+ padding: 0 calc(var(--design-unit) * 4px);
82
86
  }
83
87
 
84
88
  :host([orientation='horizontal']) .stepper-tab {
85
89
  max-width: 100%;
86
90
  max-height: 70px;
91
+ height: 70px;
87
92
  }
88
93
  `;
@@ -35,49 +35,78 @@ export const foundationStepperTabStyles = (context, definition) => css `
35
35
  margin: 0 5px 0 0;
36
36
  width: 24px;
37
37
  height: 24px;
38
- font-size: 12px;
38
+ font-size: var(--type-ramp-minus-1-font-size);
39
+ font-weight: 500;
39
40
  color: var(--focus-stroke-outer);
40
41
  background-color: var(--neutral-fill-input-rest);
41
42
  border-radius: 50%;
42
- border: 1px solid var(--neutral-fill-input-rest);
43
+ border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-input-rest);
43
44
  }
44
45
 
45
46
  .step-number-container {
46
47
  display: flex;
47
48
  flex-direction: row;
48
49
  align-items: center;
50
+ justify-content: center;
51
+ width: 75%;
49
52
  }
50
53
 
51
54
  .angle-icon {
52
55
  color: var(--neutral-fill-input-rest);
53
- margin: 0 15px;
56
+ margin: 0 calc(var(--design-unit) * 4px);
54
57
  }
55
58
 
56
59
  .step-title {
57
- font-size: 14px;
60
+ font-size: var(--type-ramp-base-font-size);
58
61
  color: var(--focus-stroke-outer);
62
+ font-weight: 600;
59
63
  }
60
64
 
61
65
  :host([completed]) .step-number {
62
66
  border-color: #69cd70;
63
- color: #69cd70;
67
+ color: white;
68
+ background-color: #69cd70;
64
69
  }
65
70
 
66
- :host([completed]) .step-title,
67
- :host([completed]) .angle-icon {
71
+ :host([completed]) .step-title {
68
72
  color: #69cd70;
69
73
  }
70
74
 
71
75
  :host([error]) .step-number {
72
76
  border-color: #f14376;
73
- color: #f14376;
77
+ color: white;
78
+ background-color: #f14376;
74
79
  }
75
80
 
76
81
  :host([error]) .step-title {
77
82
  color: #f14376;
78
83
  }
79
84
 
85
+ :host([orientation='horizontal']) {
86
+ flex: 1 1 0;
87
+ height: 100%;
88
+ }
89
+
80
90
  .cursor-pointer {
81
91
  cursor: pointer;
82
92
  }
93
+
94
+ .step-container {
95
+ position: relative;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
99
+ height: 100%;
100
+ }
101
+
102
+ .step-container.selected::after {
103
+ content: '';
104
+ position: absolute;
105
+ bottom: 0;
106
+ left: calc(var(--design-unit) * -3px); /* This matches the left padding */
107
+ right: 28px; /* This matches the icon width + right margin */
108
+ height: 2px;
109
+ width: calc(100% - 28px);
110
+ background-color: var(--accent-fill-rest); /* Choose a color */
111
+ }
83
112
  `;
@@ -27,12 +27,14 @@ export const getPrefixedStepperTab = (prefix) => html `
27
27
  <slot></slot>
28
28
  </${prefix}-tree-item>
29
29
  `, html `
30
- <div
31
- class=${(x) => classNames('step-number-container', ['cursor-pointer', x.showCursorPointer])}
32
- @click="${(x) => x.$emit('tab-clicked', x.tabPosition - 1)}"
33
- >
34
- <span class="step-number">${(x) => x.tabPosition}</span>
35
- <slot class="step-title"></slot>
30
+ <div class=${(x) => classNames('step-container', ['selected', x.selected])}>
31
+ <div
32
+ class=${(x) => classNames('step-number-container', ['cursor-pointer', x.showCursorPointer])}
33
+ @click="${(x) => x.$emit('tab-clicked', x.tabPosition - 1)}"
34
+ >
35
+ <span class="step-number">${(x) => x.tabPosition}</span>
36
+ <slot class="step-title"></slot>
37
+ </div>
36
38
  ${when((x) => !x.isLast, html `
37
39
  <${prefix}-icon
38
40
  class="stepper-icon angle-icon"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-ui",
3
3
  "description": "Genesis Foundation UI",
4
- "version": "14.215.1",
4
+ "version": "14.217.0",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
83
83
  }
84
84
  },
85
85
  "devDependencies": {
86
- "@genesislcap/foundation-testing": "14.215.1",
87
- "@genesislcap/genx": "14.215.1",
88
- "@genesislcap/rollup-builder": "14.215.1",
89
- "@genesislcap/ts-builder": "14.215.1",
90
- "@genesislcap/uvu-playwright-builder": "14.215.1",
91
- "@genesislcap/vite-builder": "14.215.1",
92
- "@genesislcap/webpack-builder": "14.215.1",
86
+ "@genesislcap/foundation-testing": "14.217.0",
87
+ "@genesislcap/genx": "14.217.0",
88
+ "@genesislcap/rollup-builder": "14.217.0",
89
+ "@genesislcap/ts-builder": "14.217.0",
90
+ "@genesislcap/uvu-playwright-builder": "14.217.0",
91
+ "@genesislcap/vite-builder": "14.217.0",
92
+ "@genesislcap/webpack-builder": "14.217.0",
93
93
  "copyfiles": "^2.4.1",
94
94
  "rimraf": "^5.0.0",
95
95
  "rxjs": "^7.5.4"
@@ -100,13 +100,13 @@
100
100
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
101
101
  "@fortawesome/free-solid-svg-icons": "^6.2.1",
102
102
  "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
103
- "@genesislcap/foundation-comms": "14.215.1",
104
- "@genesislcap/foundation-criteria": "14.215.1",
105
- "@genesislcap/foundation-errors": "14.215.1",
106
- "@genesislcap/foundation-logger": "14.215.1",
107
- "@genesislcap/foundation-notifications": "14.215.1",
108
- "@genesislcap/foundation-user": "14.215.1",
109
- "@genesislcap/foundation-utils": "14.215.1",
103
+ "@genesislcap/foundation-comms": "14.217.0",
104
+ "@genesislcap/foundation-criteria": "14.217.0",
105
+ "@genesislcap/foundation-errors": "14.217.0",
106
+ "@genesislcap/foundation-logger": "14.217.0",
107
+ "@genesislcap/foundation-notifications": "14.217.0",
108
+ "@genesislcap/foundation-user": "14.217.0",
109
+ "@genesislcap/foundation-utils": "14.217.0",
110
110
  "@microsoft/fast-colors": "^5.3.1",
111
111
  "@microsoft/fast-components": "^2.30.6",
112
112
  "@microsoft/fast-element": "^1.12.0",
@@ -128,5 +128,5 @@
128
128
  "access": "public"
129
129
  },
130
130
  "customElements": "dist/custom-elements.json",
131
- "gitHead": "f7a58325bc859e6ce441c7df636009d16baca008"
131
+ "gitHead": "3d119baa8d1ec42f681d17de1f605a98b1a9a464"
132
132
  }