vira 23.2.0 → 23.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 (12) hide show
  1. package/dist/elements/dropdown/vira-dropdown.element.js +3 -2
  2. package/dist/icons/icon-svgs/speaker-loud-24.icon.d.ts +8 -0
  3. package/dist/icons/icon-svgs/speaker-loud-24.icon.js +29 -0
  4. package/dist/icons/icon-svgs/speaker-medium-24.icon.d.ts +8 -0
  5. package/dist/icons/icon-svgs/speaker-medium-24.icon.js +29 -0
  6. package/dist/icons/icon-svgs/speaker-muted-24.icon.d.ts +8 -0
  7. package/dist/icons/icon-svgs/speaker-muted-24.icon.js +29 -0
  8. package/dist/icons/icon-svgs/speaker-quiet-24.icon.d.ts +8 -0
  9. package/dist/icons/icon-svgs/speaker-quiet-24.icon.js +23 -0
  10. package/dist/icons/index.d.ts +8 -0
  11. package/dist/icons/index.js +12 -0
  12. package/package.json +5 -5
package/dist/elements/dropdown/vira-dropdown.element.js CHANGED
@@ -69,7 +69,7 @@ export const ViraDropdown = defineViraElement()({
69
69
  }
70
70
 
71
71
  .trigger-icon {
72
- transform: rotate(0);
72
+ transform: rotate(180deg);
73
73
  transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value}
74
74
  linear transform;
75
75
  align-self: flex-start;
@@ -82,7 +82,7 @@ export const ViraDropdown = defineViraElement()({
82
82
  }
83
83
 
84
84
  .dropdown-wrapper.open .trigger-icon {
85
- transform: rotate(180deg);
85
+ transform: rotate(0);
86
86
  }
87
87
 
88
88
  .dropdown-wrapper.open:not(.open-upwards) {
@@ -138,6 +138,7 @@ export const ViraDropdown = defineViraElement()({
138
138
  right: 28px;
139
139
  /* minus the border width */
140
140
  top: calc(100% - 1px);
141
+ left: 0;
141
142
  }
142
143
 
143
144
  .using-placeholder {
package/dist/icons/icon-svgs/speaker-loud-24.icon.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A speaker icon at maximum volume.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakerloud24icon
7
+ */
8
+ export declare const SpeakerLoud24Icon: import("../icon-svg.js").ViraIconSvg;
package/dist/icons/icon-svgs/speaker-loud-24.icon.js ADDED
@@ -0,0 +1,29 @@
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
4
+ /**
5
+ * A speaker icon at maximum volume.
6
+ *
7
+ * @category Icon
8
+ * @category SVG
9
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakerloud24icon
10
+ */
11
+ export const SpeakerLoud24Icon = defineIcon({
12
+ name: 'SpeakerLoud24Icon',
13
+ svgTemplate: html `
14
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path
16
+ d="M18.2 8.67c.91.7 1.5 1.83 1.5 3.33s-.59 2.63-1.5 3.33M19.7 5c1.94 1.48 3.2 3.85 3.2 7s-1.26 5.53-3.2 7"
17
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
18
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
+ fill="none"
20
+ />
21
+ <path
22
+ d="M10 16l6 5V3l-6 5H5v8h5Z"
23
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
24
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
25
+ fill=${viraIconCssVars['vira-icon-fill-color'].value}
26
+ />
27
+ </svg>
28
+ `,
29
+ });
package/dist/icons/icon-svgs/speaker-medium-24.icon.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A speaker icon at medium volume.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakermedium24icon
7
+ */
8
+ export declare const SpeakerMedium24Icon: import("../icon-svg.js").ViraIconSvg;
package/dist/icons/icon-svgs/speaker-medium-24.icon.js ADDED
@@ -0,0 +1,29 @@
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
4
+ /**
5
+ * A speaker icon at medium volume.
6
+ *
7
+ * @category Icon
8
+ * @category SVG
9
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakermedium24icon
10
+ */
11
+ export const SpeakerMedium24Icon = defineIcon({
12
+ name: 'SpeakerMedium24Icon',
13
+ svgTemplate: html `
14
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path
16
+ d="M18.2 8.67c.91.7 1.5 1.83 1.5 3.33s-.59 2.63-1.5 3.33"
17
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
18
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
+ fill="none"
20
+ />
21
+ <path
22
+ d="M10 16l6 5V3l-6 5H5v8h5Z"
23
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
24
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
25
+ fill=${viraIconCssVars['vira-icon-fill-color'].value}
26
+ />
27
+ </svg>
28
+ `,
29
+ });
package/dist/icons/icon-svgs/speaker-muted-24.icon.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A speaker icon that is muted.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakermuted24icon
7
+ */
8
+ export declare const SpeakerMuted24Icon: import("../icon-svg.js").ViraIconSvg;
package/dist/icons/icon-svgs/speaker-muted-24.icon.js ADDED
@@ -0,0 +1,29 @@
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
4
+ /**
5
+ * A speaker icon that is muted.
6
+ *
7
+ * @category Icon
8
+ * @category SVG
9
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakermuted24icon
10
+ */
11
+ export const SpeakerMuted24Icon = defineIcon({
12
+ name: 'SpeakerMuted24Icon',
13
+ svgTemplate: html `
14
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path
16
+ d="M5 16V8h5l6-5v2.2m0 5.6V21l-5.6-4.7"
17
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
18
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
+ fill=${viraIconCssVars['vira-icon-fill-color'].value}
20
+ />
21
+ <path
22
+ d="M4 20 20 4"
23
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
24
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
25
+ fill=${viraIconCssVars['vira-icon-fill-color'].value}
26
+ />
27
+ </svg>
28
+ `,
29
+ });
package/dist/icons/icon-svgs/speaker-quiet-24.icon.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * A speaker icon that is at minimum volume.
3
+ *
4
+ * @category Icon
5
+ * @category SVG
6
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakerquiet24icon
7
+ */
8
+ export declare const SpeakerQuiet24Icon: import("../icon-svg.js").ViraIconSvg;
package/dist/icons/icon-svgs/speaker-quiet-24.icon.js ADDED
@@ -0,0 +1,23 @@
1
+ import { html } from 'element-vir';
2
+ import { viraIconCssVars } from '../icon-css-vars.js';
3
+ import { defineIcon } from '../icon-svg.js';
4
+ /**
5
+ * A speaker icon that is at minimum volume.
6
+ *
7
+ * @category Icon
8
+ * @category SVG
9
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/speakerquiet24icon
10
+ */
11
+ export const SpeakerQuiet24Icon = defineIcon({
12
+ name: 'SpeakerQuiet24Icon',
13
+ svgTemplate: html `
14
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
15
+ <path
16
+ d="m10 16 6 5V3l-6 5H5v8h5Z"
17
+ stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
18
+ stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
19
+ fill=${viraIconCssVars['vira-icon-fill-color'].value}
20
+ />
21
+ </svg>
22
+ `,
23
+ });
package/dist/icons/index.d.ts CHANGED
@@ -15,6 +15,10 @@ export * from './icon-svgs/loader-animated-24.icon.js';
15
15
  export * from './icon-svgs/options-24.icon.js';
16
16
  export * from './icon-svgs/pencil-24.icon.js';
17
17
  export * from './icon-svgs/shield-24.icon.js';
18
+ export * from './icon-svgs/speaker-loud-24.icon.js';
19
+ export * from './icon-svgs/speaker-medium-24.icon.js';
20
+ export * from './icon-svgs/speaker-muted-24.icon.js';
21
+ export * from './icon-svgs/speaker-quiet-24.icon.js';
18
22
  export * from './icon-svgs/star-24.icon.js';
19
23
  export * from './icon-svgs/status-failure-24.icon.js';
20
24
  export * from './icon-svgs/status-in-progress-24.icon.js';
@@ -40,6 +44,10 @@ export declare const allIconsByName: {
40
44
  readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
41
45
  readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
42
46
  readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
47
+ readonly SpeakerLoud24Icon: import("./icon-svg.js").ViraIconSvg;
48
+ readonly SpeakerMedium24Icon: import("./icon-svg.js").ViraIconSvg;
49
+ readonly SpeakerMuted24Icon: import("./icon-svg.js").ViraIconSvg;
50
+ readonly SpeakerQuiet24Icon: import("./icon-svg.js").ViraIconSvg;
43
51
  readonly Star24Icon: import("./icon-svg.js").ViraIconSvg;
44
52
  readonly StatusFailure24Icon: import("./icon-svg.js").ViraIconSvg;
45
53
  readonly StatusInProgress24Icon: import("./icon-svg.js").ViraIconSvg;
package/dist/icons/index.js CHANGED
@@ -13,6 +13,10 @@ import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon.js';
13
13
  import { Options24Icon } from './icon-svgs/options-24.icon.js';
14
14
  import { Pencil24Icon } from './icon-svgs/pencil-24.icon.js';
15
15
  import { Shield24Icon } from './icon-svgs/shield-24.icon.js';
16
+ import { SpeakerLoud24Icon } from './icon-svgs/speaker-loud-24.icon.js';
17
+ import { SpeakerMedium24Icon } from './icon-svgs/speaker-medium-24.icon.js';
18
+ import { SpeakerMuted24Icon } from './icon-svgs/speaker-muted-24.icon.js';
19
+ import { SpeakerQuiet24Icon } from './icon-svgs/speaker-quiet-24.icon.js';
16
20
  import { Star24Icon } from './icon-svgs/star-24.icon.js';
17
21
  import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon.js';
18
22
  import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon.js';
@@ -34,6 +38,10 @@ export * from './icon-svgs/loader-animated-24.icon.js';
34
38
  export * from './icon-svgs/options-24.icon.js';
35
39
  export * from './icon-svgs/pencil-24.icon.js';
36
40
  export * from './icon-svgs/shield-24.icon.js';
41
+ export * from './icon-svgs/speaker-loud-24.icon.js';
42
+ export * from './icon-svgs/speaker-medium-24.icon.js';
43
+ export * from './icon-svgs/speaker-muted-24.icon.js';
44
+ export * from './icon-svgs/speaker-quiet-24.icon.js';
37
45
  export * from './icon-svgs/star-24.icon.js';
38
46
  export * from './icon-svgs/status-failure-24.icon.js';
39
47
  export * from './icon-svgs/status-in-progress-24.icon.js';
@@ -59,6 +67,10 @@ export const allIconsByName = {
59
67
  Options24Icon,
60
68
  Pencil24Icon,
61
69
  Shield24Icon,
70
+ SpeakerLoud24Icon,
71
+ SpeakerMedium24Icon,
72
+ SpeakerMuted24Icon,
73
+ SpeakerQuiet24Icon,
62
74
  Star24Icon,
63
75
  StatusFailure24Icon,
64
76
  StatusInProgress24Icon,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "23.2.0",
3
+ "version": "23.3.0",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -46,7 +46,7 @@
46
46
  "lit-css-vars": "^3.0.11",
47
47
  "observavir": "^2.0.4",
48
48
  "page-active": "^1.0.1",
49
- "spa-router-vir": "^4.0.5",
49
+ "spa-router-vir": "^4.0.6",
50
50
  "type-fest": "^4.33.0",
51
51
  "typed-event-target": "^4.0.2"
52
52
  },
@@ -57,16 +57,16 @@
57
57
  "@web/test-runner-commands": "^0.9.0",
58
58
  "@web/test-runner-playwright": "^0.11.0",
59
59
  "@web/test-runner-visual-regression": "^0.10.0",
60
- "esbuild": "^0.24.2",
60
+ "esbuild": "^0.25.0",
61
61
  "istanbul-smart-text-reporter": "^1.1.5",
62
62
  "markdown-code-example-inserter": "^3.0.3",
63
63
  "typedoc": "^0.27.6",
64
64
  "typescript": "5.7.3",
65
- "vite": "^6.0.11",
65
+ "vite": "^6.1.0",
66
66
  "vite-tsconfig-paths": "^5.1.4"
67
67
  },
68
68
  "peerDependencies": {
69
- "element-vir": "^23.2.0"
69
+ "element-vir": "^23.3.0"
70
70
  },
71
71
  "engines": {
72
72
  "node": ">=22"