vira 31.31.0 → 31.31.2

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.
Files changed (30) hide show
  1. package/dist/elements/pop-up/vira-menu-item.element.js +57 -55
  2. package/dist/elements/pop-up/vira-menu.element.js +33 -31
  3. package/dist/elements/pop-up/vira-pop-up-trigger.element.js +57 -55
  4. package/dist/elements/vira-absolute-time.element.d.ts +3 -3
  5. package/dist/elements/vira-bold-text.element.js +35 -33
  6. package/dist/elements/vira-button.element.js +6 -2
  7. package/dist/elements/vira-card.element.js +16 -14
  8. package/dist/elements/vira-checkbox.element.js +95 -93
  9. package/dist/elements/vira-collapsible-card.element.js +63 -61
  10. package/dist/elements/vira-collapsible-wrapper.element.js +38 -36
  11. package/dist/elements/vira-date-input.element.d.ts +3 -3
  12. package/dist/elements/vira-date-input.element.js +37 -35
  13. package/dist/elements/vira-drawer.element.js +93 -91
  14. package/dist/elements/vira-error.element.js +8 -6
  15. package/dist/elements/vira-icon.element.js +23 -21
  16. package/dist/elements/vira-image.element.js +44 -42
  17. package/dist/elements/vira-json-form.element.js +7 -3
  18. package/dist/elements/vira-link.element.js +26 -24
  19. package/dist/elements/vira-modal.element.js +95 -80
  20. package/dist/elements/vira-progress.element.js +23 -21
  21. package/dist/elements/vira-relative-time.element.d.ts +2 -2
  22. package/dist/elements/vira-select.element.js +127 -122
  23. package/dist/elements/vira-tabs.element.js +17 -7
  24. package/dist/elements/vira-tag.element.js +3 -1
  25. package/dist/elements/vira-text-area.element.js +92 -90
  26. package/dist/icons/lucide-icons.js +7 -5
  27. package/dist/util/shared-text-input-logic.js +6 -4
  28. package/dist/util/vira-form-fields.d.ts +2 -2
  29. package/dist/util/vira-json-schema.js +24 -16
  30. package/package.json +11 -11
package/dist/elements/vira-modal.element.js CHANGED
@@ -47,105 +47,118 @@ export const ViraModal = defineViraElement()({
47
47
  'vira-modal-backdrop-filter': 'blur(3px)',
48
48
  'vira-modal-border-radius': '8px',
49
49
  },
50
- styles: ({ hostClasses, cssVars }) => css `
51
- :host {
52
- display: contents;
53
- min-width: 280px;
54
- border-radius: ${cssVars['vira-modal-border-radius'].value};
55
- }
56
-
57
- h1 {
58
- ${noNativeSpacing};
59
- }
60
-
61
- dialog {
62
- ${colorCss(viraTheme.colors[themeDefaultKey])}
63
- border: none;
64
- flex-direction: column;
65
- border-radius: inherit;
66
- padding: 0;
67
- overflow: hidden;
68
- min-width: inherit;
69
- min-height: inherit;
70
- max-width: calc(100dvw - 100px);
71
- max-height: calc(100dvh - 100px);
72
- ${viraShadows.modal}
73
-
74
- &[open] {
75
- display: flex;
50
+ styles: ({ hostClasses, cssVars }) => {
51
+ return css `
52
+ :host {
53
+ display: contents;
54
+ min-width: 280px;
55
+ border-radius: ${cssVars['vira-modal-border-radius'].value};
76
56
  }
77
- &::backdrop {
78
- background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
79
- backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
57
+
58
+ h1 {
59
+ ${noNativeSpacing};
80
60
  }
81
61
 
82
- & .modal-content-wrapper {
83
- overflow: hidden;
84
- display: flex;
62
+ dialog {
63
+ ${colorCss(viraTheme.colors[themeDefaultKey])}
64
+ border: none;
85
65
  flex-direction: column;
66
+ border-radius: inherit;
67
+ padding: 0;
68
+ overflow: hidden;
69
+ min-width: inherit;
70
+ min-height: inherit;
71
+ max-width: calc(100dvw - 100px);
72
+ max-height: calc(100dvh - 100px);
73
+ ${viraShadows.modal}
86
74
 
87
- & .header {
88
- padding: 16px 24px;
75
+ &[open] {
89
76
  display: flex;
90
- gap: 16px;
91
- align-items: flex-start;
77
+ }
78
+ &::backdrop {
79
+ background: ${viraFormCssVars['vira-form-modal-backdrop-color'].value};
80
+ backdrop-filter: ${cssVars['vira-modal-backdrop-filter'].value};
81
+ }
82
+
83
+ & .modal-content-wrapper {
84
+ overflow: hidden;
85
+ display: flex;
86
+ flex-direction: column;
92
87
 
93
- & .header-text-wrapper {
88
+ & .header {
89
+ padding: 16px 24px;
94
90
  display: flex;
95
- flex-direction: column;
96
- gap: 4px;
97
- align-self: center;
98
- margin-right: auto;
99
- overflow: hidden;
91
+ gap: 16px;
92
+ align-items: flex-start;
100
93
 
101
- & h1 {
102
- font-size: 24px;
103
- }
94
+ & .header-text-wrapper {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 4px;
98
+ align-self: center;
99
+ margin-right: auto;
100
+ overflow: hidden;
104
101
 
105
- & sub {
106
- font-size: 16px;
107
- color: ${viraFormCssVars['vira-form-secondary-body-foreground'].value};
102
+ & h1 {
103
+ font-size: 24px;
104
+ }
105
+
106
+ & sub {
107
+ font-size: 16px;
108
+ color: ${viraFormCssVars['vira-form-secondary-body-foreground']
109
+ .value};
110
+ }
108
111
  }
109
- }
110
112
 
111
- & button.close {
112
- ${noNativeFormStyles};
113
- flex-shrink: 0;
114
- cursor: pointer;
115
- padding: 4px;
116
- border-radius: ${viraFormCssVars['vira-form-radius'].value};
113
+ & button.close {
114
+ ${noNativeFormStyles};
115
+ flex-shrink: 0;
116
+ cursor: pointer;
117
+ padding: 4px;
118
+ border-radius: ${viraFormCssVars['vira-form-radius'].value};
117
119
 
118
- &:hover {
119
- background-color: ${viraFormCssVars['vira-form-selection-hover-color']
120
- .value};
121
- }
120
+ &:hover {
121
+ background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
122
+ }
122
123
 
123
- & ${ViraIcon} {
124
- display: flex;
124
+ & ${ViraIcon} {
125
+ display: flex;
126
+ }
125
127
  }
126
128
  }
127
- }
128
- & .body {
129
- padding: 16px 24px;
130
- overflow: auto;
131
- overscroll-behavior: contain;
129
+ & .body {
130
+ padding: 16px 24px;
131
+ overflow: auto;
132
+ overscroll-behavior: contain;
133
+ }
132
134
  }
133
135
  }
134
- }
135
136
 
136
- ${hostClasses['vira-modal-no-content-padding'].selector} {
137
- & dialog .modal-content-wrapper .body {
138
- padding: 0;
137
+ ${hostClasses['vira-modal-phone-size'].selector} {
138
+ & dialog {
139
+ width: 100dvw;
140
+ max-width: 100dvw;
141
+ /* Phones have little vertical space to spare, so nearly all of it goes to the
142
+ modal instead of the desktop-sized gap above and below it. */
143
+ max-height: calc(100dvh - 24px);
144
+
145
+ & .modal-content-wrapper {
146
+ & .header,
147
+ & .body {
148
+ padding: 12px 16px;
149
+ }
150
+ }
151
+ }
139
152
  }
140
- }
141
153
 
142
- ${hostClasses['vira-modal-phone-size'].selector} {
143
- & dialog {
144
- width: 100dvw;
145
- max-width: 100dvw;
154
+ /* Placed last so it also overrides the phone-size body padding above. */
155
+ ${hostClasses['vira-modal-no-content-padding'].selector} {
156
+ & dialog .modal-content-wrapper .body {
157
+ padding: 0;
158
+ }
146
159
  }
147
- }
148
- `,
160
+ `;
161
+ },
149
162
  render({ inputs, state, updateState, events, dispatch, slotNames }) {
150
163
  if (state.dialogElement && inputs.open !== state.dialogElement.open) {
151
164
  if (inputs.open) {
@@ -161,9 +174,11 @@ export const ViraModal = defineViraElement()({
161
174
  previousOpenValue: inputs.open,
162
175
  });
163
176
  if (inputs.open) {
164
- const removers = globalEventsToCloseModalOn.map((eventName) => listenToGlobal(eventName, () => {
165
- dispatch(new events.modalClose());
166
- }));
177
+ const removers = globalEventsToCloseModalOn.map((eventName) => {
178
+ return listenToGlobal(eventName, () => {
179
+ dispatch(new events.modalClose());
180
+ });
181
+ });
167
182
  updateState({
168
183
  cleanupListeners: () => {
169
184
  removers.forEach((remover) => remover());
package/dist/elements/vira-progress.element.js CHANGED
@@ -22,29 +22,31 @@ export const ViraProgress = defineViraElement()({
22
22
  'vira-progress-border-radius': '99999999px',
23
23
  'vira-progress-height': '8px',
24
24
  },
25
- styles: ({ cssVars }) => css `
26
- :host {
27
- /* Default width that can easily be overridden because it's applied on the host. */
28
- width: 100px;
29
- height: ${cssVars['vira-progress-height'].value};
30
- display: inline-flex;
31
- align-items: center;
32
- border-radius: ${cssVars['vira-progress-border-radius'].value};
33
- color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
34
- overflow: hidden;
35
- }
25
+ styles: ({ cssVars }) => {
26
+ return css `
27
+ :host {
28
+ /* Default width that can easily be overridden because it's applied on the host. */
29
+ width: 100px;
30
+ height: ${cssVars['vira-progress-height'].value};
31
+ display: inline-flex;
32
+ align-items: center;
33
+ border-radius: ${cssVars['vira-progress-border-radius'].value};
34
+ color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
35
+ overflow: hidden;
36
+ }
36
37
 
37
- .progress-bar {
38
- background-color: currentColor;
39
- height: 100%;
40
- }
38
+ .progress-bar {
39
+ background-color: currentColor;
40
+ height: 100%;
41
+ }
41
42
 
42
- .background-bar {
43
- background-color: ${viraFormCssVars['vira-form-filled-background-color'].value};
44
- height: 100%;
45
- flex-grow: 1;
46
- }
47
- `,
43
+ .background-bar {
44
+ background-color: ${viraFormCssVars['vira-form-filled-background-color'].value};
45
+ height: 100%;
46
+ flex-grow: 1;
47
+ }
48
+ `;
49
+ },
48
50
  render({ inputs, host }) {
49
51
  const min = inputs.min || 0;
50
52
  const max = inputs.max || 100;
package/dist/elements/vira-relative-time.element.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type PartialWithUndefined } from '@augment-vir/common';
2
- import { type AtLeastOneDuration, type FullDate } from 'date-vir';
2
+ import { type AtLeastOneDuration, type FullDate, type Timezone } from 'date-vir';
3
3
  /**
4
4
  * Displays a date/time as a live, relative timestamp (for example `5 minutes ago`). The relative
5
5
  * string automatically updates over time. Optionally renders the absolute timestamp beneath the
@@ -26,7 +26,7 @@ export declare const ViraRelativeTime: import("element-vir").DeclarativeElementD
26
26
  * stored at midnight UTC), where converting to the user's timezone would shift the
27
27
  * displayed date/time.
28
28
  */
29
- timezone: string;
29
+ timezone: Timezone;
30
30
  }>, {
31
31
  now: {
32
32
  hour: import("date-vir").Hour;
package/dist/elements/vira-select.element.js CHANGED
@@ -57,158 +57,163 @@ export const ViraSelect = defineViraElement()({
57
57
  'vira-select-error': ({ inputs }) => !!inputs.hasError,
58
58
  'vira-select-not-raw': ({ inputs }) => !inputs.rawSelect,
59
59
  },
60
- styles: ({ hostClasses, cssVars }) => css `
61
- :host {
62
- position: relative;
63
- display: inline-flex;
64
- width: 223px;
65
- box-sizing: border-box;
66
- color: ${viraFormCssVars['vira-form-foreground-color'].value};
67
- }
68
-
69
- .select-wrapper {
70
- ${noNativeFormStyles};
71
- max-width: 100%;
72
- flex-grow: 1;
73
- display: inline-flex;
74
- box-sizing: border-box;
75
- align-items: center;
76
- position: relative;
77
- cursor: pointer;
60
+ styles: ({ hostClasses, cssVars }) => {
61
+ return css `
62
+ :host {
63
+ position: relative;
64
+ display: inline-flex;
65
+ width: 223px;
66
+ box-sizing: border-box;
67
+ color: ${viraFormCssVars['vira-form-foreground-color'].value};
68
+ }
78
69
 
79
- & select {
80
- appearance: none;
81
- -webkit-appearance: none;
82
- -moz-appearance: none;
83
- color: inherit;
84
- font: inherit;
85
- outline: none;
86
- width: 100%;
87
- border: none;
88
- background: none;
89
- border-radius: inherit;
70
+ .select-wrapper {
71
+ ${noNativeFormStyles};
72
+ max-width: 100%;
73
+ flex-grow: 1;
74
+ display: inline-flex;
75
+ box-sizing: border-box;
76
+ align-items: center;
77
+ position: relative;
90
78
  cursor: pointer;
91
- /* Prevent the left pixel of text getting cut off. */
92
- padding-left: 0.5px;
93
- padding-right: 28px;
94
- overflow: hidden;
95
- text-overflow: ellipsis;
96
79
 
97
- &.placeholder {
98
- color: ${viraFormCssVars['vira-form-placeholder-color'].value};
99
- }
80
+ & select {
81
+ appearance: none;
82
+ -webkit-appearance: none;
83
+ -moz-appearance: none;
84
+ color: inherit;
85
+ font: inherit;
86
+ outline: none;
87
+ width: 100%;
88
+ border: none;
89
+ background: none;
90
+ border-radius: inherit;
91
+ cursor: pointer;
92
+ /* Prevent the left pixel of text getting cut off. */
93
+ padding-left: 0.5px;
94
+ padding-right: 28px;
95
+ overflow: hidden;
96
+ text-overflow: ellipsis;
97
+
98
+ &.placeholder {
99
+ color: ${viraFormCssVars['vira-form-placeholder-color'].value};
100
+ }
100
101
 
101
- &.with-icon {
102
- padding-left: ${cssVars['vira-select-icon-padding'].value};
102
+ &.with-icon {
103
+ padding-left: ${cssVars['vira-select-icon-padding'].value};
104
+ }
103
105
  }
104
- }
105
106
 
106
- & ${ViraIcon} {
107
- position: absolute;
108
- pointer-events: none;
107
+ & ${ViraIcon} {
108
+ position: absolute;
109
+ pointer-events: none;
109
110
 
110
- &.trigger-icon {
111
- transform: rotate(180deg);
112
- right: 3px;
113
- }
111
+ &.trigger-icon {
112
+ transform: rotate(180deg);
113
+ right: 3px;
114
+ }
114
115
 
115
- &.input-icon {
116
- left: 10px;
116
+ &.input-icon {
117
+ left: 10px;
118
+ }
117
119
  }
118
120
  }
119
- }
120
121
 
121
- .trigger-icon {
122
- width: 24px;
123
- aspect-ratio: 1;
124
- }
122
+ .trigger-icon {
123
+ width: 24px;
124
+ aspect-ratio: 1;
125
+ }
125
126
 
126
- ${hostClasses['vira-select-not-raw'].selector} {
127
- .select-wrapper {
128
- border-radius: ${viraFormCssVars['vira-form-radius'].value};
129
- color: ${viraFormCssVars['vira-form-foreground-color'].value};
130
- background-color: ${viraFormCssVars['vira-form-background-color'].value};
131
- /*
127
+ ${hostClasses['vira-select-not-raw'].selector} {
128
+ .select-wrapper {
129
+ border-radius: ${viraFormCssVars['vira-form-radius'].value};
130
+ color: ${viraFormCssVars['vira-form-foreground-color'].value};
131
+ background-color: ${viraFormCssVars['vira-form-background-color'].value};
132
+ /*
132
133
  Border colors are actually applied via the .wrapper-border class. However, we must
133
134
  apply a border here still so that it takes up space.
134
135
  */
135
- border: 1px solid transparent;
136
- cursor: pointer;
136
+ border: 1px solid transparent;
137
+ cursor: pointer;
137
138
 
138
- & select {
139
- padding: ${cssVars['vira-select-padding-vertical'].value} 31px
140
- ${cssVars['vira-select-padding-vertical'].value}
141
- ${cssVars['vira-select-padding-horizontal'].value};
139
+ & select {
140
+ padding: ${cssVars['vira-select-padding-vertical'].value} 31px
141
+ ${cssVars['vira-select-padding-vertical'].value}
142
+ ${cssVars['vira-select-padding-horizontal'].value};
142
143
 
143
- &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
144
- ${createFocusStyles({
145
- elementBorderSize: '1px',
146
- noNesting: true,
147
- })}
144
+ &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
145
+ ${createFocusStyles({
146
+ elementBorderSize: '1px',
147
+ noNesting: true,
148
+ })}
149
+ }
148
150
  }
149
- }
150
151
 
151
- & .border-style {
152
- position: absolute;
153
- top: 0;
154
- left: 0;
155
- width: 100%;
156
- height: 100%;
157
- border-radius: ${viraFormCssVars['vira-form-radius'].value};
158
- z-index: 0;
159
- pointer-events: none;
160
- }
152
+ & .border-style {
153
+ position: absolute;
154
+ top: 0;
155
+ left: 0;
156
+ width: 100%;
157
+ height: 100%;
158
+ border-radius: ${viraFormCssVars['vira-form-radius'].value};
159
+ z-index: 0;
160
+ pointer-events: none;
161
+ }
161
162
 
162
- & .wrapper-border {
163
- top: -1px;
164
- left: -1px;
165
- border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
166
- transition: border
167
- ${viraAnimationDurations['vira-interaction-animation-duration'].value};
163
+ & .wrapper-border {
164
+ top: -1px;
165
+ left: -1px;
166
+ border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
167
+ transition: border
168
+ ${viraAnimationDurations['vira-interaction-animation-duration'].value};
169
+ }
168
170
  }
169
171
  }
170
- }
171
172
 
172
- label {
173
- display: flex;
174
- flex-direction: column;
175
- justify-content: flex-start;
176
- gap: 2px;
177
- width: 100%;
178
- max-width: 100%;
173
+ label {
174
+ display: flex;
175
+ flex-direction: column;
176
+ justify-content: flex-start;
177
+ gap: 2px;
178
+ width: 100%;
179
+ max-width: 100%;
179
180
 
180
- & .select-label {
181
- font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
182
- text-align: left;
183
- flex-shrink: 0;
184
- flex-wrap: wrap;
181
+ & .select-label {
182
+ font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
183
+ text-align: left;
184
+ flex-shrink: 0;
185
+ flex-wrap: wrap;
186
+ }
185
187
  }
186
- }
187
-
188
- .readonly-value {
189
- overflow-wrap: anywhere;
190
- }
191
188
 
192
- ${hostClasses['vira-select-disabled'].selector} {
193
- cursor: not-allowed;
194
-
195
- & select,
196
- & .wrapper-border {
197
- ${viraDisabledStyles}
198
- }
199
- ${ViraIcon} {
200
- ${viraDisabledStyles}
189
+ .readonly-value {
190
+ overflow-wrap: anywhere;
201
191
  }
202
- & * {
192
+
193
+ ${hostClasses['vira-select-disabled'].selector} {
203
194
  cursor: not-allowed;
195
+
196
+ & select,
197
+ & .wrapper-border {
198
+ ${viraDisabledStyles}
199
+ }
200
+ ${ViraIcon} {
201
+ ${viraDisabledStyles}
202
+ }
203
+ & * {
204
+ cursor: not-allowed;
205
+ }
204
206
  }
205
- }
206
207
 
207
- :host(.${hostClasses['vira-select-not-raw'].name}.${hostClasses['vira-select-error'].name})
208
- .wrapper-border {
209
- border-color: ${viraFormCssVars['vira-form-error-color'].value};
210
- }
211
- `,
208
+ :host(
209
+ .${hostClasses['vira-select-not-raw'].name}.${hostClasses['vira-select-error']
210
+ .name}
211
+ )
212
+ .wrapper-border {
213
+ border-color: ${viraFormCssVars['vira-form-error-color'].value};
214
+ }
215
+ `;
216
+ },
212
217
  init({ state, updateState, host }) {
213
218
  state.cleanupListeners?.();
214
219
  function getSelectElement() {
package/dist/elements/vira-tabs.element.js CHANGED
@@ -127,7 +127,9 @@ export const ViraTabs = defineViraElement()({
127
127
  },
128
128
  hostClasses: {
129
129
  'vira-tabs-bar-top': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Top,
130
- 'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
130
+ 'vira-tabs-bar-bottom': ({ inputs }) => {
131
+ return !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom;
132
+ },
131
133
  'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
132
134
  'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
133
135
  ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
@@ -153,8 +155,12 @@ export const ViraTabs = defineViraElement()({
153
155
  }, {
154
156
  useRequired: true,
155
157
  }),
156
- 'vira-tabs-icon-layout-vertical': ({ inputs }) => !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical,
157
- 'vira-tabs-icon-layout-horizontal': ({ inputs }) => inputs.iconLayout === ViraTabsIconLayout.Horizontal,
158
+ 'vira-tabs-icon-layout-vertical': ({ inputs }) => {
159
+ return !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical;
160
+ },
161
+ 'vira-tabs-icon-layout-horizontal': ({ inputs }) => {
162
+ return inputs.iconLayout === ViraTabsIconLayout.Horizontal;
163
+ },
158
164
  'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
159
165
  },
160
166
  cssVars: {
@@ -638,7 +644,9 @@ export const ViraTabs = defineViraElement()({
638
644
  */
639
645
  function maxInlineForReserve(reservePx) {
640
646
  const limit = availableWidth - reservePx;
641
- return tabElements.reduce((fittingCount, _tabElement, index) => inlineWidthForCount(index + 1) <= limit ? index + 1 : fittingCount, 0);
647
+ return tabElements.reduce((fittingCount, _tabElement, index) => {
648
+ return inlineWidthForCount(index + 1) <= limit ? index + 1 : fittingCount;
649
+ }, 0);
642
650
  }
643
651
  /** When every tab fits on its own, there is no overflow and no "more" button. */
644
652
  if (totalWidth <= availableWidth) {
@@ -717,9 +725,11 @@ export const ViraTabs = defineViraElement()({
717
725
  const inlineCount = visibleTabs.length - overflowCount;
718
726
  const inlineTabs = visibleTabs.slice(0, inlineCount);
719
727
  const overflowTabs = visibleTabs.slice(inlineCount);
720
- const selectedIndex = visibleTabs.findIndex((tab) => routeHasPaths(inputs.currentRoute, tab.paths, {
721
- exactMatch: tab.exactMatch,
722
- }));
728
+ const selectedIndex = visibleTabs.findIndex((tab) => {
729
+ return routeHasPaths(inputs.currentRoute, tab.paths, {
730
+ exactMatch: tab.exactMatch,
731
+ });
732
+ });
723
733
  const selectedTab = selectedIndex >= 0 ? visibleTabs[selectedIndex] : undefined;
724
734
  /** Whether the selected tab is currently collapsed into the overflow menu. */
725
735
  const selectedIsCollapsed = selectedIndex >= 0 && selectedIndex >= inlineCount;
package/dist/elements/vira-tag.element.js CHANGED
@@ -170,7 +170,9 @@ export const ViraTag = defineViraElement()({
170
170
  'vira-tag-size-large': ({ inputs }) => inputs.size === ViraSize.Large,
171
171
  'vira-tag-size-medium': ({ inputs }) => !inputs.size || inputs.size === ViraSize.Medium,
172
172
  'vira-tag-size-small': ({ inputs }) => inputs.size === ViraSize.Small,
173
- 'vira-tag-emphasis-standard': ({ inputs }) => !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard,
173
+ 'vira-tag-emphasis-standard': ({ inputs }) => {
174
+ return !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard;
175
+ },
174
176
  'vira-tag-emphasis-subtle': ({ inputs }) => inputs.emphasis === ViraEmphasis.Subtle,
175
177
  ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
176
178
  const colorKey = viraColorVariantToHostClassKey[colorVariant];