vira 32.1.1 → 32.2.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.
Files changed (21) hide show
  1. package/dist/elements/pop-up/vira-menu-item.element.d.ts +1 -1
  2. package/dist/elements/pop-up/vira-menu-item.element.js +2 -4
  3. package/dist/elements/pop-up/vira-menu.element.d.ts +1 -1
  4. package/dist/elements/pop-up/vira-menu.element.js +1 -5
  5. package/dist/elements/vira-card.element.js +1 -1
  6. package/dist/elements/vira-checkbox.element.js +3 -3
  7. package/dist/elements/vira-collapsible-card.element.js +4 -4
  8. package/dist/elements/vira-date-input.element.js +1 -1
  9. package/dist/elements/vira-drawer.element.js +3 -3
  10. package/dist/elements/vira-input.element.d.ts +2 -0
  11. package/dist/elements/vira-input.element.js +7 -2
  12. package/dist/elements/vira-modal.element.js +5 -5
  13. package/dist/elements/vira-select.element.js +7 -7
  14. package/dist/elements/vira-tabs.element.js +3 -3
  15. package/dist/elements/vira-tag.element.js +3 -3
  16. package/dist/elements/vira-text-area.element.js +2 -2
  17. package/dist/styles/form-styles.d.ts +2 -2
  18. package/dist/styles/form-styles.js +2 -2
  19. package/dist/styles/form-variants.d.ts +3 -3
  20. package/dist/styles/form-variants.js +6 -6
  21. package/package.json +1 -1
package/dist/elements/pop-up/vira-menu-item.element.d.ts CHANGED
@@ -35,4 +35,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
35
35
  * gated by `keepOpenAfterInteraction`.
36
36
  */
37
37
  activate: import("element-vir").DefineElementEvent<undefined>;
38
- }, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;
38
+ }, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding", readonly [], readonly []>;
package/dist/elements/pop-up/vira-menu-item.element.js CHANGED
@@ -47,9 +47,8 @@ export const ViraMenuItem = defineViraElement()({
47
47
  },
48
48
  cssVars: {
49
49
  /** Horizontal gap between a menu item's icon and its label. */
50
- 'vira-menu-item-icon-gap': '8px',
51
- 'vira-menu-item-padding': '6px 8px',
52
- 'vira-menu-item-border-radius': '4px',
50
+ 'vira-menu-item-icon-gap': '0',
51
+ 'vira-menu-item-padding': '4px 8px 4px 1px',
53
52
  },
54
53
  styles({ hostClasses, cssVars }) {
55
54
  return css `
@@ -62,7 +61,6 @@ export const ViraMenuItem = defineViraElement()({
62
61
  gap: ${cssVars['vira-menu-item-icon-gap'].value};
63
62
  overflow: hidden;
64
63
  padding: ${cssVars['vira-menu-item-padding'].value};
65
- border-radius: ${cssVars['vira-menu-item-border-radius'].value};
66
64
  align-items: center;
67
65
  text-align: left;
68
66
  }
package/dist/elements/pop-up/vira-menu.element.d.ts CHANGED
@@ -33,4 +33,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
33
33
  direction: ViraMenuPopUpDirection;
34
34
  /** @default PopUpMenuCornerStyle.Directional */
35
35
  cornerStyle: ViraMenuCornerStyle;
36
- }>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;
36
+ }>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-", readonly [], readonly []>;
package/dist/elements/pop-up/vira-menu.element.js CHANGED
@@ -46,15 +46,11 @@ export const ViraMenu = defineViraElement()({
46
46
  return inputs.cornerStyle === ViraMenuCornerStyle.AllSquare;
47
47
  },
48
48
  },
49
- cssVars: {
50
- 'vira-menu-padding': '4px',
51
- },
52
- styles({ hostClasses, cssVars }) {
49
+ styles({ hostClasses }) {
53
50
  return css `
54
51
  :host {
55
52
  display: flex;
56
53
  flex-direction: column;
57
- padding: ${cssVars['vira-menu-padding'].value};
58
54
  max-width: 100%;
59
55
  max-height: 100%;
60
56
  overflow-y: auto;
package/dist/elements/vira-card.element.js CHANGED
@@ -29,7 +29,7 @@ export const ViraCard = defineViraElement()({
29
29
  },
30
30
  cssVars: {
31
31
  'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
32
- 'vira-card-padding': '24px',
32
+ 'vira-card-padding': '20px',
33
33
  },
34
34
  styles({ hostClasses, cssVars }) {
35
35
  return css `
package/dist/elements/vira-checkbox.element.js CHANGED
@@ -41,7 +41,7 @@ export const ViraCheckbox = defineViraElement()({
41
41
  }
42
42
 
43
43
  .custom-checkbox {
44
- height: 24px;
44
+ height: 20px;
45
45
  aspect-ratio: 1;
46
46
  box-sizing: border-box;
47
47
  }
@@ -50,7 +50,7 @@ export const ViraCheckbox = defineViraElement()({
50
50
  width: 100%;
51
51
  height: 100%;
52
52
  box-sizing: border-box;
53
- ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
53
+ ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
54
54
  opacity: 0;
55
55
  }
56
56
 
@@ -151,7 +151,7 @@ export const ViraCheckbox = defineViraElement()({
151
151
  gap: 8px;
152
152
 
153
153
  & .label-text {
154
- padding-block: calc((24px - 1em) / 2);
154
+ padding-block: calc((20px - 1em) / 2);
155
155
  }
156
156
  }
157
157
  `;
package/dist/elements/vira-collapsible-card.element.js CHANGED
@@ -63,11 +63,11 @@ export const ViraCollapsibleCard = defineViraElement()({
63
63
  }
64
64
 
65
65
  & .card-header {
66
- padding: 8px 16px;
66
+ padding: 6px 12px;
67
67
  }
68
68
 
69
69
  & .card-content {
70
- padding: 8px 16px 8px 16px;
70
+ padding: 6px 12px 6px 12px;
71
71
  }
72
72
  }
73
73
 
@@ -104,12 +104,12 @@ export const ViraCollapsibleCard = defineViraElement()({
104
104
  }
105
105
 
106
106
  .card-header {
107
- padding: 8px 0 !important;
107
+ padding: 6px 0 !important;
108
108
  }
109
109
 
110
110
  .card-content {
111
111
  overflow: visible !important;
112
- padding: 8px 0 16px 0 !important;
112
+ padding: 6px 0 12px 0 !important;
113
113
  }
114
114
 
115
115
  .open-caret {
package/dist/elements/vira-date-input.element.js CHANGED
@@ -57,7 +57,7 @@ export const ViraDateInput = defineViraElement()({
57
57
  input {
58
58
  box-sizing: border-box;
59
59
  width: 100%;
60
- padding: 4px 8px;
60
+ padding: 3px 6px;
61
61
  font-size: inherit;
62
62
  border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
63
63
  border-radius: ${viraFormCssVars['vira-form-radius'].value};
package/dist/elements/vira-drawer.element.js CHANGED
@@ -124,7 +124,7 @@ export const ViraDrawer = defineViraElement()({
124
124
  }
125
125
 
126
126
  & .header {
127
- padding: 8px 24px 16px;
127
+ padding: 6px 20px 12px;
128
128
  display: flex;
129
129
  gap: 16px;
130
130
  align-items: flex-start;
@@ -138,7 +138,7 @@ export const ViraDrawer = defineViraElement()({
138
138
  overflow: hidden;
139
139
 
140
140
  & h1 {
141
- font-size: 20px;
141
+ font-size: 18px;
142
142
  }
143
143
  }
144
144
 
@@ -160,7 +160,7 @@ export const ViraDrawer = defineViraElement()({
160
160
  }
161
161
 
162
162
  & .body {
163
- padding: 0 24px 24px;
163
+ padding: 0 20px 20px;
164
164
  overflow: auto;
165
165
  overscroll-behavior: contain;
166
166
  }
package/dist/elements/vira-input.element.d.ts CHANGED
@@ -61,4 +61,6 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
61
61
  * that was blocked out of programmatic "value" property assignments.
62
62
  */
63
63
  inputBlocked: import("element-vir").DefineElementEvent<string>;
64
+ /** Triggered if the clear button is activated. */
65
+ clear: import("element-vir").DefineElementEvent<void>;
64
66
  }, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;
package/dist/elements/vira-input.element.js CHANGED
@@ -37,8 +37,8 @@ export var ViraInputType;
37
37
  export const ViraInput = defineViraElement()({
38
38
  tagName: 'vira-input',
39
39
  cssVars: {
40
- 'vira-input-padding-horizontal': '12px',
41
- 'vira-input-padding-vertical': '4px',
40
+ 'vira-input-padding-horizontal': '10px',
41
+ 'vira-input-padding-vertical': '3px',
42
42
  },
43
43
  styles({ hostClasses, cssVars }) {
44
44
  return css `
@@ -276,6 +276,8 @@ export const ViraInput = defineViraElement()({
276
276
  * that was blocked out of programmatic "value" property assignments.
277
277
  */
278
278
  inputBlocked: defineElementEvent(),
279
+ /** Triggered if the clear button is activated. */
280
+ clear: defineElementEvent(),
279
281
  },
280
282
  state() {
281
283
  return {
@@ -417,6 +419,9 @@ export const ViraInput = defineViraElement()({
417
419
  dispatch(new events.valueChange({
418
420
  detail: '',
419
421
  }));
422
+ dispatch(new events.clear({
423
+ detail: undefined,
424
+ }));
420
425
  })}
421
426
  >
422
427
  <${ViraIcon.assign({
package/dist/elements/vira-modal.element.js CHANGED
@@ -91,7 +91,7 @@ export const ViraModal = defineViraElement()({
91
91
  flex-direction: column;
92
92
 
93
93
  & .header {
94
- padding: 16px 24px;
94
+ padding: 12px 20px;
95
95
  display: flex;
96
96
  gap: 16px;
97
97
  align-items: flex-start;
@@ -105,11 +105,11 @@ export const ViraModal = defineViraElement()({
105
105
  overflow: hidden;
106
106
 
107
107
  & h1 {
108
- font-size: 24px;
108
+ font-size: 20px;
109
109
  }
110
110
 
111
111
  & sub {
112
- font-size: 16px;
112
+ font-size: 14px;
113
113
  color: ${viraFormCssVars['vira-form-secondary-body-foreground']
114
114
  .value};
115
115
  }
@@ -132,7 +132,7 @@ export const ViraModal = defineViraElement()({
132
132
  }
133
133
  }
134
134
  & .body {
135
- padding: 16px 24px;
135
+ padding: 12px 20px;
136
136
  overflow: auto;
137
137
  overscroll-behavior: contain;
138
138
  }
@@ -150,7 +150,7 @@ export const ViraModal = defineViraElement()({
150
150
  & .modal-content-wrapper {
151
151
  & .header,
152
152
  & .body {
153
- padding: 12px 16px;
153
+ padding: 10px 12px;
154
154
  }
155
155
  }
156
156
  }
package/dist/elements/vira-select.element.js CHANGED
@@ -48,9 +48,9 @@ export const ViraSelect = defineViraElement()({
48
48
  valueChange: defineElementEvent(),
49
49
  },
50
50
  cssVars: {
51
- 'vira-select-padding-horizontal': '12px',
52
- 'vira-select-padding-vertical': '4px',
53
- 'vira-select-icon-padding': '44px',
51
+ 'vira-select-padding-horizontal': '10px',
52
+ 'vira-select-padding-vertical': '3px',
53
+ 'vira-select-icon-padding': '40px',
54
54
  },
55
55
  hostClasses: {
56
56
  'vira-select-disabled'({ inputs }) {
@@ -75,7 +75,7 @@ export const ViraSelect = defineViraElement()({
75
75
  position: relative;
76
76
  display: inline-flex;
77
77
  width: 223px;
78
- height: 32px;
78
+ height: 28px;
79
79
  box-sizing: border-box;
80
80
  color: ${viraFormCssVars['vira-form-foreground-color'].value};
81
81
  }
@@ -120,7 +120,7 @@ export const ViraSelect = defineViraElement()({
120
120
  box-sizing: border-box;
121
121
  /* Prevent the left pixel of text getting cut off. */
122
122
  padding-left: 0.5px;
123
- padding-right: 28px;
123
+ padding-right: 24px;
124
124
  overflow: hidden;
125
125
  text-overflow: ellipsis;
126
126
 
@@ -149,7 +149,7 @@ export const ViraSelect = defineViraElement()({
149
149
  }
150
150
 
151
151
  .trigger-icon {
152
- width: 24px;
152
+ width: 20px;
153
153
  aspect-ratio: 1;
154
154
  }
155
155
 
@@ -166,7 +166,7 @@ export const ViraSelect = defineViraElement()({
166
166
  cursor: pointer;
167
167
 
168
168
  & select {
169
- padding: ${cssVars['vira-select-padding-vertical'].value} 31px
169
+ padding: ${cssVars['vira-select-padding-vertical'].value} 27px
170
170
  ${cssVars['vira-select-padding-vertical'].value}
171
171
  ${cssVars['vira-select-padding-horizontal'].value};
172
172
 
package/dist/elements/vira-tabs.element.js CHANGED
@@ -410,7 +410,7 @@ export const ViraTabs = defineViraElement()({
410
410
 
411
411
  .tab-item ${ViraLink} {
412
412
  display: flex;
413
- padding: 8px 16px;
413
+ padding: 6px 12px;
414
414
  }
415
415
 
416
416
  .tab-more {
@@ -439,9 +439,9 @@ export const ViraTabs = defineViraElement()({
439
439
  }
440
440
 
441
441
  .tab-group-label {
442
- font-size: 11px;
442
+ font-size: 10px;
443
443
  font-weight: ${viraFontCssVars['vira-font-weight-medium'].value};
444
- padding: 8px 16px 4px;
444
+ padding: 6px 12px 4px;
445
445
  color: ${viraTheme.colors['vira-grey-foreground-header'].foreground.value};
446
446
  }
447
447
 
package/dist/elements/vira-tag.element.js CHANGED
@@ -153,7 +153,7 @@ export const ViraTag = defineViraElement()({
153
153
  'vira-tag-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
154
154
  'vira-tag-border-radius': '1000px',
155
155
  'vira-tag-gap': '6px',
156
- 'vira-tag-horizontal-padding': '12px',
156
+ 'vira-tag-horizontal-padding': '10px',
157
157
  'vira-tag-border-width': '1px',
158
158
  },
159
159
  events: {
@@ -427,11 +427,11 @@ export const ViraTag = defineViraElement()({
427
427
 
428
428
  ${hostClasses['vira-tag-size-small'].selector} {
429
429
  ${cssVars['vira-tag-gap'].name}: 4px;
430
- ${cssVars['vira-tag-horizontal-padding'].name}: 8px;
430
+ ${cssVars['vira-tag-horizontal-padding'].name}: 6px;
431
431
  }
432
432
 
433
433
  ${hostClasses['vira-tag-size-large'].selector} {
434
- ${cssVars['vira-tag-horizontal-padding'].name}: 16px;
434
+ ${cssVars['vira-tag-horizontal-padding'].name}: 12px;
435
435
  }
436
436
 
437
437
  ${hostClasses['vira-tag-disabled'].selector} {
package/dist/elements/vira-text-area.element.js CHANGED
@@ -17,8 +17,8 @@ import { filterTextInputValue, textInputListener, } from '../util/shared-text-in
17
17
  export const ViraTextArea = defineViraElement()({
18
18
  tagName: 'vira-text-area',
19
19
  cssVars: {
20
- 'vira-text-area-padding-horizontal': '12px',
21
- 'vira-text-area-padding-vertical': '8px',
20
+ 'vira-text-area-padding-horizontal': '10px',
21
+ 'vira-text-area-padding-vertical': '6px',
22
22
  },
23
23
  styles({ hostClasses, cssVars }) {
24
24
  return css `
package/dist/styles/form-styles.d.ts CHANGED
@@ -25,9 +25,9 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
25
25
  readonly 'vira-form-positive-active-color': import("element-vir").CSSResult;
26
26
  readonly 'vira-form-success-color': import("element-vir").CSSResult;
27
27
  readonly 'vira-form-label-font-weight': import("element-vir").CSSResult;
28
- readonly 'vira-form-small-text-size': "14px";
28
+ readonly 'vira-form-small-text-size': "12px";
29
29
  readonly 'vira-form-medium-text-size': "14px";
30
- readonly 'vira-form-large-text-size': "22px";
30
+ readonly 'vira-form-large-text-size': "16px";
31
31
  readonly 'vira-form-radius': "6px";
32
32
  readonly 'vira-form-wrapper-radius': "12px";
33
33
  readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;
package/dist/styles/form-styles.js CHANGED
@@ -32,9 +32,9 @@ export const viraFormCssVars = defineCssVars({
32
32
  'vira-form-positive-active-color': viraTheme.colors['vira-green-behind-bg-body'].background.value,
33
33
  'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
34
34
  'vira-form-label-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
35
- 'vira-form-small-text-size': '14px',
35
+ 'vira-form-small-text-size': '12px',
36
36
  'vira-form-medium-text-size': '14px',
37
- 'vira-form-large-text-size': '22px',
37
+ 'vira-form-large-text-size': '16px',
38
38
  'vira-form-radius': defaultViraFormRadius,
39
39
  'vira-form-wrapper-radius': '12px',
40
40
  'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,
package/dist/styles/form-variants.d.ts CHANGED
@@ -66,15 +66,15 @@ export declare const standaloneThemeColorNames: ("red" | "yellow" | "green" | "t
66
66
  * @category Internal
67
67
  */
68
68
  export declare enum ViraSize {
69
- /** @default 40px tall */
69
+ /** @default 36px tall */
70
70
  Large = "large",
71
71
  /**
72
72
  * This is the default.
73
73
  *
74
- * @default 32px tall
74
+ * @default 28px tall
75
75
  */
76
76
  Medium = "medium",
77
- /** @default 24px tall */
77
+ /** @default 20px tall */
78
78
  Small = "small",
79
79
  /**
80
80
  * No size styles will be applied at all. All related CSS vars are free to customize to your
package/dist/styles/form-variants.js CHANGED
@@ -80,15 +80,15 @@ export const standaloneThemeColorNames = getObjectTypedValues(ViraThemeColorName
80
80
  */
81
81
  export var ViraSize;
82
82
  (function (ViraSize) {
83
- /** @default 40px tall */
83
+ /** @default 36px tall */
84
84
  ViraSize["Large"] = "large";
85
85
  /**
86
86
  * This is the default.
87
87
  *
88
- * @default 32px tall
88
+ * @default 28px tall
89
89
  */
90
90
  ViraSize["Medium"] = "medium";
91
- /** @default 24px tall */
91
+ /** @default 20px tall */
92
92
  ViraSize["Small"] = "small";
93
93
  /**
94
94
  * No size styles will be applied at all. All related CSS vars are free to customize to your
@@ -137,7 +137,7 @@ export const viraEmphasisVariants = [
137
137
  * @category Internal
138
138
  */
139
139
  export const viraSizeHeights = {
140
- [ViraSize.Large]: 40,
141
- [ViraSize.Medium]: 32,
142
- [ViraSize.Small]: 24,
140
+ [ViraSize.Large]: 36,
141
+ [ViraSize.Medium]: 28,
142
+ [ViraSize.Small]: 20,
143
143
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "32.1.1",
3
+ "version": "32.2.0",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",