vira 31.2.0 → 31.3.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 (132) 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 +6 -6
  3. package/dist/elements/vira-icon.element.d.ts +1 -1
  4. package/dist/elements/vira-icon.element.js +11 -2
  5. package/dist/elements/vira-input.element.js +1 -1
  6. package/dist/elements/vira-link.element.d.ts +1 -1
  7. package/dist/elements/vira-link.element.js +5 -5
  8. package/dist/elements/vira-modal.element.d.ts +1 -1
  9. package/dist/elements/vira-modal.element.js +6 -6
  10. package/dist/elements/vira-overflow-switch.element.d.ts +1 -1
  11. package/dist/elements/vira-overflow-switch.element.js +5 -5
  12. package/dist/elements/vira-select.element.d.ts +1 -1
  13. package/dist/elements/vira-select.element.js +5 -5
  14. package/dist/elements/vira-tag.element.js +2 -2
  15. package/dist/icons/icon-svg.d.ts +2 -0
  16. package/dist/icons/icon-svgs/{check-16.icon.d.ts → 16/check-16.icon.d.ts} +1 -1
  17. package/dist/icons/icon-svgs/{check-16.icon.js → 16/check-16.icon.js} +2 -2
  18. package/dist/icons/icon-svgs/{chevron-down-16.icon.d.ts → 16/chevron-down-16.icon.d.ts} +1 -1
  19. package/dist/icons/icon-svgs/{chevron-down-16.icon.js → 16/chevron-down-16.icon.js} +2 -2
  20. package/dist/icons/icon-svgs/{chevron-up-16.icon.d.ts → 16/chevron-up-16.icon.d.ts} +1 -1
  21. package/dist/icons/icon-svgs/{chevron-up-16.icon.js → 16/chevron-up-16.icon.js} +2 -2
  22. package/dist/icons/icon-svgs/{dash-16.icon.d.ts → 16/dash-16.icon.d.ts} +1 -1
  23. package/dist/icons/icon-svgs/{dash-16.icon.js → 16/dash-16.icon.js} +2 -2
  24. package/dist/icons/icon-svgs/{element-16.icon.d.ts → 16/element-16.icon.d.ts} +1 -1
  25. package/dist/icons/icon-svgs/{element-16.icon.js → 16/element-16.icon.js} +2 -2
  26. package/dist/icons/icon-svgs/{upload-16.icon.d.ts → 16/upload-16.icon.d.ts} +1 -1
  27. package/dist/icons/icon-svgs/{upload-16.icon.js → 16/upload-16.icon.js} +2 -2
  28. package/dist/icons/icon-svgs/{x-16.icon.d.ts → 16/x-16.icon.d.ts} +1 -1
  29. package/dist/icons/icon-svgs/{x-16.icon.js → 16/x-16.icon.js} +2 -2
  30. package/dist/icons/icon-svgs/{arrow-down-24.icon.d.ts → 24/arrow-down-24.icon.d.ts} +1 -1
  31. package/dist/icons/icon-svgs/{arrow-down-24.icon.js → 24/arrow-down-24.icon.js} +2 -2
  32. package/dist/icons/icon-svgs/{arrow-left-24.icon.d.ts → 24/arrow-left-24.icon.d.ts} +1 -1
  33. package/dist/icons/icon-svgs/{arrow-left-24.icon.js → 24/arrow-left-24.icon.js} +2 -2
  34. package/dist/icons/icon-svgs/{arrow-right-24.icon.d.ts → 24/arrow-right-24.icon.d.ts} +1 -1
  35. package/dist/icons/icon-svgs/{arrow-right-24.icon.js → 24/arrow-right-24.icon.js} +2 -2
  36. package/dist/icons/icon-svgs/{arrow-up-24.icon.d.ts → 24/arrow-up-24.icon.d.ts} +1 -1
  37. package/dist/icons/icon-svgs/{arrow-up-24.icon.js → 24/arrow-up-24.icon.js} +2 -2
  38. package/dist/icons/icon-svgs/{auto-theme-24.icon.d.ts → 24/auto-theme-24.icon.d.ts} +1 -1
  39. package/dist/icons/icon-svgs/{auto-theme-24.icon.js → 24/auto-theme-24.icon.js} +2 -2
  40. package/dist/icons/icon-svgs/{bell-24.icon.d.ts → 24/bell-24.icon.d.ts} +1 -1
  41. package/dist/icons/icon-svgs/{bell-24.icon.js → 24/bell-24.icon.js} +2 -2
  42. package/dist/icons/icon-svgs/{chat-24.icon.d.ts → 24/chat-24.icon.d.ts} +1 -1
  43. package/dist/icons/icon-svgs/{chat-24.icon.js → 24/chat-24.icon.js} +2 -2
  44. package/dist/icons/icon-svgs/{check-24.icon.d.ts → 24/check-24.icon.d.ts} +1 -1
  45. package/dist/icons/icon-svgs/{check-24.icon.js → 24/check-24.icon.js} +2 -2
  46. package/dist/icons/icon-svgs/{chevron-down-24.icon.d.ts → 24/chevron-down-24.icon.d.ts} +1 -1
  47. package/dist/icons/icon-svgs/{chevron-down-24.icon.js → 24/chevron-down-24.icon.js} +2 -2
  48. package/dist/icons/icon-svgs/{chevron-up-24.icon.d.ts → 24/chevron-up-24.icon.d.ts} +1 -1
  49. package/dist/icons/icon-svgs/{chevron-up-24.icon.js → 24/chevron-up-24.icon.js} +2 -2
  50. package/dist/icons/icon-svgs/{close-x-24.icon.d.ts → 24/close-x-24.icon.d.ts} +1 -1
  51. package/dist/icons/icon-svgs/{close-x-24.icon.js → 24/close-x-24.icon.js} +2 -2
  52. package/dist/icons/icon-svgs/{commit-24.icon.d.ts → 24/commit-24.icon.d.ts} +1 -1
  53. package/dist/icons/icon-svgs/{commit-24.icon.js → 24/commit-24.icon.js} +2 -2
  54. package/dist/icons/icon-svgs/{copy-24.icon.d.ts → 24/copy-24.icon.d.ts} +1 -1
  55. package/dist/icons/icon-svgs/{copy-24.icon.js → 24/copy-24.icon.js} +2 -2
  56. package/dist/icons/icon-svgs/{document-24.icon.d.ts → 24/document-24.icon.d.ts} +1 -1
  57. package/dist/icons/icon-svgs/{document-24.icon.js → 24/document-24.icon.js} +2 -2
  58. package/dist/icons/icon-svgs/{document-search-24.icon.d.ts → 24/document-search-24.icon.d.ts} +1 -1
  59. package/dist/icons/icon-svgs/{document-search-24.icon.js → 24/document-search-24.icon.js} +2 -2
  60. package/dist/icons/icon-svgs/{double-chevron-24.icon.d.ts → 24/double-chevron-24.icon.d.ts} +1 -1
  61. package/dist/icons/icon-svgs/{double-chevron-24.icon.js → 24/double-chevron-24.icon.js} +2 -2
  62. package/dist/icons/icon-svgs/{element-24.icon.d.ts → 24/element-24.icon.d.ts} +1 -1
  63. package/dist/icons/icon-svgs/{element-24.icon.js → 24/element-24.icon.js} +2 -2
  64. package/dist/icons/icon-svgs/{external-link-24.icon.d.ts → 24/external-link-24.icon.d.ts} +1 -1
  65. package/dist/icons/icon-svgs/{external-link-24.icon.js → 24/external-link-24.icon.js} +2 -2
  66. package/dist/icons/icon-svgs/{eye-closed-24.icon.d.ts → 24/eye-closed-24.icon.d.ts} +1 -1
  67. package/dist/icons/icon-svgs/{eye-closed-24.icon.js → 24/eye-closed-24.icon.js} +2 -2
  68. package/dist/icons/icon-svgs/{eye-open-24.icon.d.ts → 24/eye-open-24.icon.d.ts} +1 -1
  69. package/dist/icons/icon-svgs/{eye-open-24.icon.js → 24/eye-open-24.icon.js} +2 -2
  70. package/dist/icons/icon-svgs/{filter-24.icon.d.ts → 24/filter-24.icon.d.ts} +1 -1
  71. package/dist/icons/icon-svgs/{filter-24.icon.js → 24/filter-24.icon.js} +2 -2
  72. package/dist/icons/icon-svgs/{globe-24.icon.d.ts → 24/globe-24.icon.d.ts} +1 -1
  73. package/dist/icons/icon-svgs/{globe-24.icon.js → 24/globe-24.icon.js} +2 -2
  74. package/dist/icons/icon-svgs/{link-24.icon.d.ts → 24/link-24.icon.d.ts} +1 -1
  75. package/dist/icons/icon-svgs/{link-24.icon.js → 24/link-24.icon.js} +2 -2
  76. package/dist/icons/icon-svgs/{loader-24.icon.d.ts → 24/loader-24.icon.d.ts} +1 -1
  77. package/dist/icons/icon-svgs/{loader-24.icon.js → 24/loader-24.icon.js} +2 -2
  78. package/dist/icons/icon-svgs/{loader-animated-24.icon.d.ts → 24/loader-animated-24.icon.d.ts} +1 -1
  79. package/dist/icons/icon-svgs/{loader-animated-24.icon.js → 24/loader-animated-24.icon.js} +2 -2
  80. package/dist/icons/icon-svgs/{lock-24.icon.d.ts → 24/lock-24.icon.d.ts} +1 -1
  81. package/dist/icons/icon-svgs/{lock-24.icon.js → 24/lock-24.icon.js} +2 -2
  82. package/dist/icons/icon-svgs/{magnifying-glass-24.icon.d.ts → 24/magnifying-glass-24.icon.d.ts} +1 -1
  83. package/dist/icons/icon-svgs/{magnifying-glass-24.icon.js → 24/magnifying-glass-24.icon.js} +2 -2
  84. package/dist/icons/icon-svgs/{moon-24.icon.d.ts → 24/moon-24.icon.d.ts} +1 -1
  85. package/dist/icons/icon-svgs/{moon-24.icon.js → 24/moon-24.icon.js} +2 -2
  86. package/dist/icons/icon-svgs/{options-24.icon.d.ts → 24/options-24.icon.d.ts} +1 -1
  87. package/dist/icons/icon-svgs/{options-24.icon.js → 24/options-24.icon.js} +2 -2
  88. package/dist/icons/icon-svgs/{pencil-24.icon.d.ts → 24/pencil-24.icon.d.ts} +1 -1
  89. package/dist/icons/icon-svgs/{pencil-24.icon.js → 24/pencil-24.icon.js} +2 -2
  90. package/dist/icons/icon-svgs/24/plus-24.icon.d.ts +8 -0
  91. package/dist/icons/icon-svgs/24/plus-24.icon.js +23 -0
  92. package/dist/icons/icon-svgs/{printer-24.icon.d.ts → 24/printer-24.icon.d.ts} +1 -1
  93. package/dist/icons/icon-svgs/{printer-24.icon.js → 24/printer-24.icon.js} +2 -2
  94. package/dist/icons/icon-svgs/{shield-24.icon.d.ts → 24/shield-24.icon.d.ts} +1 -1
  95. package/dist/icons/icon-svgs/{shield-24.icon.js → 24/shield-24.icon.js} +2 -2
  96. package/dist/icons/icon-svgs/{sort-ascending-24.icon.d.ts → 24/sort-ascending-24.icon.d.ts} +1 -1
  97. package/dist/icons/icon-svgs/{sort-ascending-24.icon.js → 24/sort-ascending-24.icon.js} +2 -2
  98. package/dist/icons/icon-svgs/{sort-descending-24.icon.d.ts → 24/sort-descending-24.icon.d.ts} +1 -1
  99. package/dist/icons/icon-svgs/{sort-descending-24.icon.js → 24/sort-descending-24.icon.js} +2 -2
  100. package/dist/icons/icon-svgs/{sparkle-24.icon.d.ts → 24/sparkle-24.icon.d.ts} +1 -1
  101. package/dist/icons/icon-svgs/{sparkle-24.icon.js → 24/sparkle-24.icon.js} +2 -2
  102. package/dist/icons/icon-svgs/{speaker-loud-24.icon.d.ts → 24/speaker-loud-24.icon.d.ts} +1 -1
  103. package/dist/icons/icon-svgs/{speaker-loud-24.icon.js → 24/speaker-loud-24.icon.js} +2 -2
  104. package/dist/icons/icon-svgs/{speaker-medium-24.icon.d.ts → 24/speaker-medium-24.icon.d.ts} +1 -1
  105. package/dist/icons/icon-svgs/{speaker-medium-24.icon.js → 24/speaker-medium-24.icon.js} +2 -2
  106. package/dist/icons/icon-svgs/{speaker-muted-24.icon.d.ts → 24/speaker-muted-24.icon.d.ts} +1 -1
  107. package/dist/icons/icon-svgs/{speaker-muted-24.icon.js → 24/speaker-muted-24.icon.js} +2 -2
  108. package/dist/icons/icon-svgs/{speaker-quiet-24.icon.d.ts → 24/speaker-quiet-24.icon.d.ts} +1 -1
  109. package/dist/icons/icon-svgs/{speaker-quiet-24.icon.js → 24/speaker-quiet-24.icon.js} +2 -2
  110. package/dist/icons/icon-svgs/{star-24.icon.d.ts → 24/star-24.icon.d.ts} +1 -1
  111. package/dist/icons/icon-svgs/{star-24.icon.js → 24/star-24.icon.js} +2 -2
  112. package/dist/icons/icon-svgs/{status-failure-24.icon.d.ts → 24/status-failure-24.icon.d.ts} +1 -1
  113. package/dist/icons/icon-svgs/{status-failure-24.icon.js → 24/status-failure-24.icon.js} +2 -2
  114. package/dist/icons/icon-svgs/{status-in-progress-24.icon.d.ts → 24/status-in-progress-24.icon.d.ts} +1 -1
  115. package/dist/icons/icon-svgs/{status-in-progress-24.icon.js → 24/status-in-progress-24.icon.js} +2 -2
  116. package/dist/icons/icon-svgs/{status-success-24.icon.d.ts → 24/status-success-24.icon.d.ts} +1 -1
  117. package/dist/icons/icon-svgs/{status-success-24.icon.js → 24/status-success-24.icon.js} +2 -2
  118. package/dist/icons/icon-svgs/{status-unknown-24.icon.d.ts → 24/status-unknown-24.icon.d.ts} +1 -1
  119. package/dist/icons/icon-svgs/{status-unknown-24.icon.js → 24/status-unknown-24.icon.js} +2 -2
  120. package/dist/icons/icon-svgs/{status-warning-24.icon.d.ts → 24/status-warning-24.icon.d.ts} +1 -1
  121. package/dist/icons/icon-svgs/{status-warning-24.icon.js → 24/status-warning-24.icon.js} +2 -2
  122. package/dist/icons/icon-svgs/{sun-24.icon.d.ts → 24/sun-24.icon.d.ts} +1 -1
  123. package/dist/icons/icon-svgs/{sun-24.icon.js → 24/sun-24.icon.js} +2 -2
  124. package/dist/icons/icon-svgs/{upload-24.icon.d.ts → 24/upload-24.icon.d.ts} +1 -1
  125. package/dist/icons/icon-svgs/{upload-24.icon.js → 24/upload-24.icon.js} +2 -2
  126. package/dist/icons/icon-svgs/{x-24.icon.d.ts → 24/x-24.icon.d.ts} +1 -1
  127. package/dist/icons/icon-svgs/{x-24.icon.js → 24/x-24.icon.js} +2 -2
  128. package/dist/icons/index.d.ts +57 -56
  129. package/dist/icons/index.js +113 -112
  130. package/dist/icons/sized-icon.d.ts +8 -0
  131. package/dist/icons/sized-icon.js +12 -0
  132. package/package.json +1 -1
@@ -21,5 +21,5 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
21
21
  iconOverride: ViraIconSvg;
22
22
  }>, {
23
23
  /** Removes event listeners registered during init. */
24
- cleanup: undefined | (() => void);
24
+ cleanupListeners: undefined | (() => void);
25
25
  }, {}, "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-", readonly [], readonly []>;
@@ -1,7 +1,7 @@
1
1
  import { assertWrap } from '@augment-vir/assert';
2
2
  import { css, html } from 'element-vir';
3
3
  import { listenTo } from 'typed-event-target';
4
- import { Check24Icon } from '../../icons/icon-svgs/check-24.icon.js';
4
+ import { Check24Icon } from '../../icons/icon-svgs/24/check-24.icon.js';
5
5
  import { viraFormCssVars } from '../../styles/form-styles.js';
6
6
  import { noUserSelect } from '../../styles/index.js';
7
7
  import { defineViraElement } from '../../util/define-vira-element.js';
@@ -17,7 +17,7 @@ export const ViraMenuItem = defineViraElement()({
17
17
  state() {
18
18
  return {
19
19
  /** Removes event listeners registered during init. */
20
- cleanup: undefined,
20
+ cleanupListeners: undefined,
21
21
  };
22
22
  },
23
23
  hostClasses: {
@@ -94,7 +94,7 @@ export const ViraMenuItem = defineViraElement()({
94
94
  host.setAttribute('tabindex', inputs.disabled ? '-1' : '0');
95
95
  host.setAttribute('aria-selected', String(!!inputs.selected));
96
96
  host.setAttribute('aria-disabled', String(!!inputs.disabled));
97
- state.cleanup?.();
97
+ state.cleanupListeners?.();
98
98
  const propagating = {};
99
99
  function propagateMouseEvent(event) {
100
100
  if (propagating[event.type]) {
@@ -135,15 +135,15 @@ export const ViraMenuItem = defineViraElement()({
135
135
  }),
136
136
  ];
137
137
  updateState({
138
- cleanup: () => {
138
+ cleanupListeners: () => {
139
139
  listenerRemovers.forEach((remover) => remover());
140
140
  },
141
141
  });
142
142
  },
143
143
  cleanup({ state, updateState }) {
144
- state.cleanup?.();
144
+ state.cleanupListeners?.();
145
145
  updateState({
146
- cleanup: undefined,
146
+ cleanupListeners: undefined,
147
147
  });
148
148
  },
149
149
  render({ inputs }) {
@@ -7,7 +7,7 @@ import { type ViraIconSvg } from '../icons/icon-svg.js';
7
7
  * @see https://electrovir.github.io/vira/book/elements/vira-icon
8
8
  */
9
9
  export declare const ViraIcon: import("element-vir").DeclarativeElementDefinition<"vira-icon", {
10
- icon: Pick<ViraIconSvg, "svgTemplate"> | undefined;
10
+ icon: Pick<ViraIconSvg, "svgTemplate" | "size"> | undefined;
11
11
  /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
12
12
  fitContainer?: boolean | undefined;
13
13
  }, {}, {}, "vira-icon-fit-container", "vira-icon-", readonly [], readonly []>;
@@ -1,3 +1,4 @@
1
+ import { addPx } from '@augment-vir/common';
1
2
  import { css } from 'element-vir';
2
3
  import { defineViraElement } from '../util/define-vira-element.js';
3
4
  /**
@@ -11,7 +12,7 @@ export const ViraIcon = defineViraElement()({
11
12
  tagName: 'vira-icon',
12
13
  hostClasses: {
13
14
  /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
14
- 'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer,
15
+ 'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer || !!inputs.icon?.size,
15
16
  },
16
17
  styles: ({ hostClasses }) => css `
17
18
  :host {
@@ -28,15 +29,23 @@ export const ViraIcon = defineViraElement()({
28
29
  display: block;
29
30
  }
30
31
 
32
+ svg * {
33
+ vector-effect: non-scaling-stroke;
34
+ }
35
+
31
36
  ${hostClasses['vira-icon-fit-container'].selector} svg {
32
37
  height: 100%;
33
38
  width: 100%;
34
39
  }
35
40
  `,
36
- render({ inputs }) {
41
+ render({ inputs, host }) {
37
42
  if (!inputs.icon) {
38
43
  return '';
39
44
  }
45
+ else if (inputs.icon.size) {
46
+ host.style.width = addPx(inputs.icon.size);
47
+ host.style.height = addPx(inputs.icon.size);
48
+ }
40
49
  return inputs.icon.svgTemplate;
41
50
  },
42
51
  });
@@ -2,7 +2,7 @@ import { assertWrap } from '@augment-vir/assert';
2
2
  import { randomString } from '@augment-vir/common';
3
3
  import { extractEventTarget } from '@augment-vir/web';
4
4
  import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
5
- import { CloseX24Icon } from '../icons/icon-svgs/close-x-24.icon.js';
5
+ import { CloseX24Icon } from '../icons/icon-svgs/24/close-x-24.icon.js';
6
6
  import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
7
7
  import { createFocusStyles } from '../styles/focus.js';
8
8
  import { viraFormCssVars } from '../styles/form-styles.js';
@@ -74,5 +74,5 @@ export declare const ViraLink: import("element-vir").DeclarativeElementDefinitio
74
74
  disableLinkStyles: boolean;
75
75
  }>, {
76
76
  /** Removes event listeners registered during init. */
77
- cleanup: undefined | (() => void);
77
+ cleanupListeners: undefined | (() => void);
78
78
  }, {}, "vira-link-link-styles", "vira-link-", readonly [], readonly []>;
@@ -16,7 +16,7 @@ export const ViraLink = defineViraElement()({
16
16
  state() {
17
17
  return {
18
18
  /** Removes event listeners registered during init. */
19
- cleanup: undefined,
19
+ cleanupListeners: undefined,
20
20
  };
21
21
  },
22
22
  hostClasses: {
@@ -51,7 +51,7 @@ export const ViraLink = defineViraElement()({
51
51
  }
52
52
  `,
53
53
  init({ state, updateState, host }) {
54
- state.cleanup?.();
54
+ state.cleanupListeners?.();
55
55
  let propagating = false;
56
56
  const listenerRemovers = [
57
57
  listenTo(host, 'click', (event) => {
@@ -70,15 +70,15 @@ export const ViraLink = defineViraElement()({
70
70
  }),
71
71
  ];
72
72
  updateState({
73
- cleanup: () => {
73
+ cleanupListeners: () => {
74
74
  listenerRemovers.forEach((remover) => remover());
75
75
  },
76
76
  });
77
77
  },
78
78
  cleanup({ state, updateState }) {
79
- state.cleanup?.();
79
+ state.cleanupListeners?.();
80
80
  updateState({
81
- cleanup: undefined,
81
+ cleanupListeners: undefined,
82
82
  });
83
83
  },
84
84
  render({ inputs }) {
@@ -33,7 +33,7 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
33
33
  contentElement: HTMLDivElement | undefined;
34
34
  previousOpenValue: undefined | boolean;
35
35
  /** Remove listeners. */
36
- cleanup: undefined | (() => void);
36
+ cleanupListeners: undefined | (() => void);
37
37
  }, {
38
38
  modalClose: import("element-vir").DefineEvent<void>;
39
39
  }, "vira-modal-phone-size", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
@@ -1,7 +1,7 @@
1
1
  import { assertWrap } from '@augment-vir/assert';
2
2
  import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
3
3
  import { listenToGlobal } from 'typed-event-target';
4
- import { X24Icon } from '../icons/icon-svgs/x-24.icon.js';
4
+ import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
5
5
  import { viraFormCssVars } from '../styles/form-styles.js';
6
6
  import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
7
7
  import { viraShadows } from '../styles/shadows.js';
@@ -29,11 +29,11 @@ export const ViraModal = defineViraElement()({
29
29
  contentElement: undefined,
30
30
  previousOpenValue: undefined,
31
31
  /** Remove listeners. */
32
- cleanup: undefined,
32
+ cleanupListeners: undefined,
33
33
  };
34
34
  },
35
35
  cleanup({ state }) {
36
- state.cleanup?.();
36
+ state.cleanupListeners?.();
37
37
  },
38
38
  hostClasses: {
39
39
  'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
@@ -142,7 +142,7 @@ export const ViraModal = defineViraElement()({
142
142
  }
143
143
  }
144
144
  if (state.previousOpenValue !== inputs.open) {
145
- state.cleanup?.();
145
+ state.cleanupListeners?.();
146
146
  updateState({
147
147
  previousOpenValue: inputs.open,
148
148
  });
@@ -151,7 +151,7 @@ export const ViraModal = defineViraElement()({
151
151
  dispatch(new events.modalClose());
152
152
  }));
153
153
  updateState({
154
- cleanup: () => {
154
+ cleanupListeners: () => {
155
155
  removers.forEach((remover) => remover());
156
156
  },
157
157
  });
@@ -159,7 +159,7 @@ export const ViraModal = defineViraElement()({
159
159
  }
160
160
  function close() {
161
161
  if (inputs.open) {
162
- state.cleanup?.();
162
+ state.cleanupListeners?.();
163
163
  dispatch(new events.modalClose());
164
164
  }
165
165
  }
@@ -17,5 +17,5 @@ export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElemen
17
17
  isOverflowing: boolean;
18
18
  resizeObserver: undefined | ResizeObserver;
19
19
  /** Called on cleanup to clear all listeners. */
20
- cleanup: undefined | (() => void);
20
+ cleanupListeners: undefined | (() => void);
21
21
  }, {}, "vira-overflow-switch-show-small", "vira-overflow-switch-", readonly ["large", "small"], readonly []>;
@@ -20,7 +20,7 @@ export const ViraOverflowSwitch = defineViraElement()({
20
20
  isOverflowing: false,
21
21
  resizeObserver: undefined,
22
22
  /** Called on cleanup to clear all listeners. */
23
- cleanup: undefined,
23
+ cleanupListeners: undefined,
24
24
  };
25
25
  },
26
26
  hostClasses: {
@@ -57,9 +57,9 @@ export const ViraOverflowSwitch = defineViraElement()({
57
57
  }
58
58
  `,
59
59
  cleanup({ state, updateState }) {
60
- state.cleanup?.();
60
+ state.cleanupListeners?.();
61
61
  updateState({
62
- cleanup: undefined,
62
+ cleanupListeners: undefined,
63
63
  });
64
64
  },
65
65
  render({ slotNames, updateState, inputs, host, state }) {
@@ -89,9 +89,9 @@ export const ViraOverflowSwitch = defineViraElement()({
89
89
  });
90
90
  /** Initial measurement: defer until after first layout. */
91
91
  updateOverflowing(overflowParams);
92
- state.cleanup?.();
92
+ state.cleanupListeners?.();
93
93
  updateState({
94
- cleanup() {
94
+ cleanupListeners() {
95
95
  resizeObserver.disconnect();
96
96
  removeSlotChangeListener();
97
97
  },
@@ -33,7 +33,7 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
33
33
  */
34
34
  randomId: string;
35
35
  /** Removes event listeners registered during init. */
36
- cleanup: undefined | (() => void);
36
+ cleanupListeners: undefined | (() => void);
37
37
  }, {
38
38
  valueChange: import("element-vir").DefineEvent<string>;
39
39
  }, "vira-select-disabled" | "vira-select-error" | "vira-select-not-raw", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;
@@ -28,7 +28,7 @@ export const ViraSelect = defineViraElement()({
28
28
  */
29
29
  randomId: randomString(32),
30
30
  /** Removes event listeners registered during init. */
31
- cleanup: undefined,
31
+ cleanupListeners: undefined,
32
32
  };
33
33
  },
34
34
  events: {
@@ -192,7 +192,7 @@ export const ViraSelect = defineViraElement()({
192
192
  }
193
193
  `,
194
194
  init({ state, updateState, host }) {
195
- state.cleanup?.();
195
+ state.cleanupListeners?.();
196
196
  const listenerRemovers = [
197
197
  listenTo(host, 'mousedown', (event) => {
198
198
  const selectElement = assertWrap.instanceOf(host.shadowRoot.querySelector('select'), HTMLSelectElement);
@@ -209,15 +209,15 @@ export const ViraSelect = defineViraElement()({
209
209
  }),
210
210
  ];
211
211
  updateState({
212
- cleanup: () => {
212
+ cleanupListeners: () => {
213
213
  listenerRemovers.forEach((remover) => remover());
214
214
  },
215
215
  });
216
216
  },
217
217
  cleanup({ state, updateState }) {
218
- state.cleanup?.();
218
+ state.cleanupListeners?.();
219
219
  updateState({
220
- cleanup: undefined,
220
+ cleanupListeners: undefined,
221
221
  });
222
222
  },
223
223
  render({ inputs, state, dispatch, events }) {
@@ -2,8 +2,8 @@ import { check } from '@augment-vir/assert';
2
2
  import { colorCss, ContrastLevelName } from '@electrovir/color';
3
3
  import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
4
4
  import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
5
- import { Check16Icon } from '../icons/icon-svgs/check-16.icon.js';
6
- import { X16Icon } from '../icons/icon-svgs/x-16.icon.js';
5
+ import { Check16Icon } from '../icons/icon-svgs/16/check-16.icon.js';
6
+ import { X16Icon } from '../icons/icon-svgs/16/x-16.icon.js';
7
7
  import { viraFormCssVars } from '../styles/form-styles.js';
8
8
  import { ViraColorVariant, viraColorVariantToColorName, ViraEmphasis, ViraSize, viraSizeHeights, } from '../styles/form-variants.js';
9
9
  import { noNativeFormStyles } from '../styles/native-styles.js';
@@ -6,6 +6,8 @@ import { type TemplateResult } from 'element-vir';
6
6
  */
7
7
  export type ViraIconSvg = {
8
8
  name: string;
9
+ /** An optionally forced icon size. */
10
+ size?: number;
9
11
  svgTemplate: TemplateResult;
10
12
  };
11
13
  /**
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/check16icon
7
7
  */
8
- export declare const Check16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Check16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A checkmark (16px).
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/chevrondown16icon
7
7
  */
8
- export declare const ChevronDown16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ChevronDown16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A chevron that points downwards (16px). See ChevronDown24Icon for the 24px version.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/chevronup16icon
7
7
  */
8
- export declare const ChevronUp16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ChevronUp16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A chevron that points upwards (16px). See ChevronUp24Icon for the 24px version.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/dash16icon
7
7
  */
8
- export declare const Dash16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Dash16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A dash (horizontal line) icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/element16icon
7
7
  */
8
- export declare const Element16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Element16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An icon symbol that represents an HTML element.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/upload16icon
7
7
  */
8
- export declare const Upload16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Upload16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An upload icon (16×16).
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/x16icon
7
7
  */
8
- export declare const X16Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const X16Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An x icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/arrowdown24icon
7
7
  */
8
- export declare const ArrowDown24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ArrowDown24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An arrow down icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/arrowleft24icon
7
7
  */
8
- export declare const ArrowLeft24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ArrowLeft24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An arrow left icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/arrowright24icon
7
7
  */
8
- export declare const ArrowRight24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ArrowRight24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An arrow right icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/arrowup24icon
7
7
  */
8
- export declare const ArrowUp24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ArrowUp24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An arrow up icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/autotheme24icon
7
7
  */
8
- export declare const AutoTheme24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const AutoTheme24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * An auto theme icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/bell24icon
7
7
  */
8
- export declare const Bell24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Bell24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A bell icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/chat24icon
7
7
  */
8
- export declare const Chat24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Chat24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A chat bubble icon.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/check24icon
7
7
  */
8
- export declare const Check24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const Check24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A checkmark.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/chevrondown24icon
7
7
  */
8
- export declare const ChevronDown24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ChevronDown24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
6
6
  *
@@ -5,4 +5,4 @@
5
5
  * @category SVG
6
6
  * @see https://electrovir.github.io/vira/book/icons/chevronup24icon
7
7
  */
8
- export declare const ChevronUp24Icon: import("../icon-svg.js").ViraIconSvg;
8
+ export declare const ChevronUp24Icon: import("../../icon-svg.js").ViraIconSvg;
@@ -1,6 +1,6 @@
1
1
  import { html } from 'element-vir';
2
- import { viraIconCssVars } from '../icon-css-vars.js';
3
- import { defineIcon } from '../icon-svg.js';
2
+ import { viraIconCssVars } from '../../icon-css-vars.js';
3
+ import { defineIcon } from '../../icon-svg.js';
4
4
  /**
5
5
  * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
6
6
  *