vira 31.30.0 → 31.31.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 (17) 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 +5 -3
  3. package/dist/elements/pop-up/vira-menu.element.d.ts +1 -1
  4. package/dist/elements/pop-up/vira-menu.element.js +5 -1
  5. package/dist/elements/vira-card.element.js +1 -1
  6. package/dist/elements/vira-input.element.js +2 -2
  7. package/dist/elements/vira-modal.element.d.ts +1 -1
  8. package/dist/elements/vira-modal.element.js +2 -1
  9. package/dist/elements/vira-progress.element.d.ts +1 -1
  10. package/dist/elements/vira-progress.element.js +2 -2
  11. package/dist/elements/vira-select.element.js +2 -2
  12. package/dist/elements/vira-text-area.element.js +2 -2
  13. package/dist/styles/font.d.ts +1 -1
  14. package/dist/styles/font.js +1 -1
  15. package/dist/styles/form-styles.d.ts +3 -3
  16. package/dist/styles/form-styles.js +3 -3
  17. 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").DefineEvent<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", 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" | "vira-menu-item-border-radius", readonly [], readonly []>;
package/dist/elements/pop-up/vira-menu-item.element.js CHANGED
@@ -37,7 +37,9 @@ export const ViraMenuItem = defineViraElement()({
37
37
  },
38
38
  cssVars: {
39
39
  /** Horizontal gap between a menu item's icon and its label. */
40
- 'vira-menu-item-icon-gap': '3px',
40
+ 'vira-menu-item-icon-gap': '8px',
41
+ 'vira-menu-item-padding': '6px 8px',
42
+ 'vira-menu-item-border-radius': '4px',
41
43
  },
42
44
  styles: ({ hostClasses, cssVars }) => css `
43
45
  :host {
@@ -48,8 +50,8 @@ export const ViraMenuItem = defineViraElement()({
48
50
  max-width: 100%;
49
51
  gap: ${cssVars['vira-menu-item-icon-gap'].value};
50
52
  overflow: hidden;
51
- padding: 8px 3px;
52
- padding-right: 16px;
53
+ padding: ${cssVars['vira-menu-item-padding'].value};
54
+ border-radius: ${cssVars['vira-menu-item-border-radius'].value};
53
55
  align-items: center;
54
56
  text-align: left;
55
57
  }
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-", readonly [], readonly []>;
36
+ }>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;
package/dist/elements/pop-up/vira-menu.element.js CHANGED
@@ -40,10 +40,14 @@ export const ViraMenu = defineViraElement()({
40
40
  'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
41
41
  'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
42
42
  },
43
- styles: ({ hostClasses }) => css `
43
+ cssVars: {
44
+ 'vira-menu-padding': '4px',
45
+ },
46
+ styles: ({ hostClasses, cssVars }) => css `
44
47
  :host {
45
48
  display: flex;
46
49
  flex-direction: column;
50
+ padding: ${cssVars['vira-menu-padding'].value};
47
51
  max-width: 100%;
48
52
  max-height: 100%;
49
53
  overflow-y: auto;
package/dist/elements/vira-card.element.js CHANGED
@@ -25,7 +25,7 @@ export const ViraCard = defineViraElement()({
25
25
  },
26
26
  cssVars: {
27
27
  'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
28
- 'vira-card-padding': viraFormCssVars['vira-form-wrapper-radius'].value,
28
+ 'vira-card-padding': '24px',
29
29
  },
30
30
  styles: ({ hostClasses, cssVars }) => css `
31
31
  :host {
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': '10px',
41
- 'vira-input-padding-vertical': '5px',
40
+ 'vira-input-padding-horizontal': '12px',
41
+ 'vira-input-padding-vertical': '4px',
42
42
  },
43
43
  styles: ({ hostClasses, cssVars }) => {
44
44
  return css `
package/dist/elements/vira-modal.element.d.ts CHANGED
@@ -37,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
37
37
  cleanupListeners: undefined | (() => void);
38
38
  }, {
39
39
  modalClose: import("element-vir").DefineEvent<void>;
40
- }, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["vira-modal-modal-title"], readonly []>;
40
+ }, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius", readonly ["vira-modal-modal-title"], readonly []>;
package/dist/elements/vira-modal.element.js CHANGED
@@ -45,12 +45,13 @@ export const ViraModal = defineViraElement()({
45
45
  slotNames: ['vira-modal-modal-title'],
46
46
  cssVars: {
47
47
  'vira-modal-backdrop-filter': 'blur(3px)',
48
+ 'vira-modal-border-radius': '8px',
48
49
  },
49
50
  styles: ({ hostClasses, cssVars }) => css `
50
51
  :host {
51
52
  display: contents;
52
53
  min-width: 280px;
53
- border-radius: 16px;
54
+ border-radius: ${cssVars['vira-modal-border-radius'].value};
54
55
  }
55
56
 
56
57
  h1 {
package/dist/elements/vira-progress.element.d.ts CHANGED
@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
15
15
  min: number;
16
16
  /** @default 100 */
17
17
  max: number;
18
- }>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;
18
+ }>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-height", readonly [], readonly []>;
package/dist/elements/vira-progress.element.js CHANGED
@@ -20,13 +20,13 @@ export const ViraProgress = defineViraElement()({
20
20
  * dimension which creates a perfect pill border radius.
21
21
  */
22
22
  'vira-progress-border-radius': '99999999px',
23
+ 'vira-progress-height': '8px',
23
24
  },
24
25
  styles: ({ cssVars }) => css `
25
26
  :host {
26
27
  /* Default width that can easily be overridden because it's applied on the host. */
27
28
  width: 100px;
28
- /* Default height that can easily be overridden because it's applied on the host. */
29
- height: 10px;
29
+ height: ${cssVars['vira-progress-height'].value};
30
30
  display: inline-flex;
31
31
  align-items: center;
32
32
  border-radius: ${cssVars['vira-progress-border-radius'].value};
package/dist/elements/vira-select.element.js CHANGED
@@ -48,8 +48,8 @@ export const ViraSelect = defineViraElement()({
48
48
  valueChange: defineElementEvent(),
49
49
  },
50
50
  cssVars: {
51
- 'vira-select-padding-horizontal': '10px',
52
- 'vira-select-padding-vertical': '6px',
51
+ 'vira-select-padding-horizontal': '12px',
52
+ 'vira-select-padding-vertical': '8px',
53
53
  'vira-select-icon-padding': '44px',
54
54
  },
55
55
  hostClasses: {
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': '10px',
21
- 'vira-text-area-padding-vertical': '6px',
20
+ 'vira-text-area-padding-horizontal': '12px',
21
+ 'vira-text-area-padding-vertical': '8px',
22
22
  },
23
23
  styles: ({ hostClasses, cssVars }) => css `
24
24
  :host {
package/dist/styles/font.d.ts CHANGED
@@ -8,5 +8,5 @@ export declare const viraFontCssVars: import("lit-css-vars").CssVarDefinitions<{
8
8
  readonly 'vira-monospace': "monospace";
9
9
  readonly 'vira-font-weight-normal': "normal";
10
10
  readonly 'vira-font-weight-medium': "500";
11
- readonly 'vira-font-weight-bold': "bold";
11
+ readonly 'vira-font-weight-bold': "600";
12
12
  }>;
package/dist/styles/font.js CHANGED
@@ -9,5 +9,5 @@ export const viraFontCssVars = defineCssVars({
9
9
  'vira-monospace': 'monospace',
10
10
  'vira-font-weight-normal': 'normal',
11
11
  'vira-font-weight-medium': '500',
12
- 'vira-font-weight-bold': 'bold',
12
+ 'vira-font-weight-bold': '600',
13
13
  });
package/dist/styles/form-styles.d.ts CHANGED
@@ -26,10 +26,10 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
26
26
  readonly 'vira-form-success-color': import("element-vir").CSSResult;
27
27
  readonly 'vira-form-label-font-weight': import("element-vir").CSSResult;
28
28
  readonly 'vira-form-small-text-size': "14px";
29
- readonly 'vira-form-medium-text-size': "16px";
29
+ readonly 'vira-form-medium-text-size': "14px";
30
30
  readonly 'vira-form-large-text-size': "22px";
31
- readonly 'vira-form-radius': "8px";
32
- readonly 'vira-form-wrapper-radius': "16px";
31
+ readonly 'vira-form-radius': "6px";
32
+ readonly 'vira-form-wrapper-radius': "12px";
33
33
  readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;
34
34
  readonly 'vira-form-focus-outline-border-radius': import("element-vir").CSSResult;
35
35
  readonly 'vira-form-plain-color': import("element-vir").CSSResult;
package/dist/styles/form-styles.js CHANGED
@@ -4,7 +4,7 @@ import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
4
4
  import { viraFontCssVars } from './font.js';
5
5
  import { viraColorPalette } from './vira-color-palette.js';
6
6
  import { viraTheme } from './vira-color-theme.js';
7
- const defaultViraFormRadius = '8px';
7
+ const defaultViraFormRadius = '6px';
8
8
  /**
9
9
  * CSS vars for vira form elements.
10
10
  *
@@ -33,10 +33,10 @@ export const viraFormCssVars = defineCssVars({
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
35
  'vira-form-small-text-size': '14px',
36
- 'vira-form-medium-text-size': '16px',
36
+ 'vira-form-medium-text-size': '14px',
37
37
  'vira-form-large-text-size': '22px',
38
38
  'vira-form-radius': defaultViraFormRadius,
39
- 'vira-form-wrapper-radius': '16px',
39
+ 'vira-form-wrapper-radius': '12px',
40
40
  'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,
41
41
  'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
42
42
  'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "31.30.0",
3
+ "version": "31.31.0",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",