vira 2.0.0 → 2.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 (13) hide show
  1. package/dist/elements/vira-input/vira-input.element.d.ts +1 -1
  2. package/dist/elements/vira-input/vira-input.element.js +14 -2
  3. package/dist/icons/icon-svgs/close-x-24.icon.js +2 -8
  4. package/dist/icons/icon-svgs/element-16.icon.js +1 -7
  5. package/dist/icons/icon-svgs/element-24.icon.js +2 -8
  6. package/dist/icons/icon-svgs/loader-24.icon.js +1 -2
  7. package/dist/icons/icon-svgs/options-24.icon.js +2 -2
  8. package/dist/icons/icon-svgs/status-failure-24.icon.js +2 -8
  9. package/dist/styles/index.d.ts +1 -0
  10. package/dist/styles/index.js +1 -0
  11. package/dist/styles/scrollbar.d.ts +1 -0
  12. package/dist/styles/scrollbar.js +14 -0
  13. package/package.json +7 -8
package/dist/elements/vira-input/vira-input.element.d.ts CHANGED
@@ -19,4 +19,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
19
19
  * that was blocked out of programmatic "value" property assignments.
20
20
  */
21
21
  inputBlocked: import("element-vir").DefinedTypedEventNameDefinition<string>;
22
- }, "vira-input-disabled" | "vira-input-fit-text", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", import("lit-html").HTMLTemplateResult>;
22
+ }, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown", "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-focus-border-color" | "vira-input-text-selection-color" | "vira-input-clear-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", import("lit-html").HTMLTemplateResult>;
package/dist/elements/vira-input/vira-input.element.js CHANGED
@@ -12,6 +12,7 @@ export const ViraInput = defineViraElement()({
12
12
  hostClasses: {
13
13
  'vira-input-disabled': ({ inputs }) => !!inputs.disabled,
14
14
  'vira-input-fit-text': ({ inputs }) => !!inputs.fitText,
15
+ 'vira-input-clear-button-shown': ({ inputs }) => !!inputs.showClearButton,
15
16
  },
16
17
  cssVars: {
17
18
  'vira-input-placeholder-color': '#cccccc',
@@ -19,6 +20,9 @@ export const ViraInput = defineViraElement()({
19
20
  'vira-input-border-color': '#cccccc',
20
21
  'vira-input-focus-border-color': '#59b1ff',
21
22
  'vira-input-text-selection-color': '#cfe9ff',
23
+ 'vira-input-clear-button-color': '#aaaaaa',
24
+ 'vira-input-clear-button-hover-color': '#ff0000',
25
+ 'vira-input-clear-button-active-color': '#b30000',
22
26
  'vira-input-padding-horizontal': '10px',
23
27
  'vira-input-padding-vertical': '6px',
24
28
  },
@@ -84,6 +88,10 @@ export const ViraInput = defineViraElement()({
84
88
  max-height: 100%;
85
89
  }
86
90
 
91
+ ${hostClasses['vira-input-clear-button-shown'].selector} label {
92
+ padding-right: 4px;
93
+ }
94
+
87
95
  pre {
88
96
  ${noNativeFormStyles};
89
97
  font: inherit;
@@ -185,15 +193,19 @@ export const ViraInput = defineViraElement()({
185
193
  }
186
194
 
187
195
  .close-x-button {
188
- color: ${cssVars['vira-input-text-color'].value};
189
196
  ${noNativeFormStyles};
197
+ color: ${cssVars['vira-input-clear-button-color'].value};
190
198
  cursor: pointer;
191
199
  display: flex;
192
200
  transition: ${viraAnimationDurations['vira-interaction-animation-duration'].value};
193
201
  }
194
202
 
195
203
  .close-x-button:hover {
196
- color: red;
204
+ color: ${cssVars['vira-input-clear-button-hover-color'].value};
205
+ }
206
+
207
+ .close-x-button:active {
208
+ color: ${cssVars['vira-input-clear-button-active-color'].value};
197
209
  }
198
210
  `;
199
211
  },
package/dist/icons/icon-svgs/close-x-24.icon.js CHANGED
@@ -4,13 +4,7 @@ import { defineIcon } from '../icon-svg';
4
4
  export const CloseX24Icon = defineIcon({
5
5
  name: 'CloseX24Icon',
6
6
  svgTemplate: html `
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- xml:space="preserve"
10
- width="24"
11
- height="24"
12
- viewBox="0 0 24 24"
13
- >
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
14
8
  <circle
15
9
  cx="12"
16
10
  cy="12"
@@ -20,10 +14,10 @@ export const CloseX24Icon = defineIcon({
20
14
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
21
15
  />
22
16
  <path
17
+ d="M9 8.5l6 7m0 -7l-6 7"
23
18
  fill="none"
24
19
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
25
20
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
26
- d="M9 8.5l6 7m0 -7l-6 7"
27
21
  />
28
22
  </svg>
29
23
  `,
package/dist/icons/icon-svgs/element-16.icon.js CHANGED
@@ -4,13 +4,7 @@ import { defineIcon } from '../icon-svg';
4
4
  export const Element16Icon = defineIcon({
5
5
  name: 'Element16Icon',
6
6
  svgTemplate: html `
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- fill="none"
10
- width="16"
11
- height="16"
12
- viewBox="0 0 16 16"
13
- >
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
14
8
  <path
15
9
  d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6"
16
10
  fill="none"
package/dist/icons/icon-svgs/element-24.icon.js CHANGED
@@ -4,18 +4,12 @@ import { defineIcon } from '../icon-svg';
4
4
  export const Element24Icon = defineIcon({
5
5
  name: 'Element24Icon',
6
6
  svgTemplate: html `
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- fill="none"
10
- height="24"
11
- viewBox="0 0 24 24"
12
- width="24"
13
- >
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
14
8
  <path
9
+ d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10"
15
10
  fill="none"
16
11
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
17
12
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
18
- d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10"
19
13
  />
20
14
  </svg>
21
15
  `,
package/dist/icons/icon-svgs/loader-24.icon.js CHANGED
@@ -6,10 +6,9 @@ export const Loader24Icon = defineIcon({
6
6
  svgTemplate: html `
7
7
  <svg
8
8
  xmlns="http://www.w3.org/2000/svg"
9
- fill="none"
9
+ width="24"
10
10
  height="24"
11
11
  viewBox="0 0 24 24"
12
- width="24"
13
12
  class="loader-animated-24-icon"
14
13
  >
15
14
  <path
package/dist/icons/icon-svgs/options-24.icon.js CHANGED
@@ -4,7 +4,7 @@ import { defineIcon } from '../icon-svg';
4
4
  export const Options24Icon = defineIcon({
5
5
  name: 'Options24Icon',
6
6
  svgTemplate: html `
7
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
8
8
  <g
9
9
  fill=${viraIconCssVars['vira-icon-fill-color'].value}
10
10
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
@@ -15,10 +15,10 @@ export const Options24Icon = defineIcon({
15
15
  <circle cx="8.5" cy="18.5" r="2.5" />
16
16
  </g>
17
17
  <path
18
+ d="M3 5.5h3.5m5 0h8.5M3 12.5h11m5 0h2M3 18.5h3m5 0h10"
18
19
  fill="none"
19
20
  stroke="${viraIconCssVars['vira-icon-stroke-color'].value}"
20
21
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
21
- d="M3 5.5h3.5m5 0h8.5M3 12.5h11m5 0h2M3 18.5h3m5 0h10"
22
22
  />
23
23
  </svg>
24
24
  `,
package/dist/icons/icon-svgs/status-failure-24.icon.js CHANGED
@@ -4,13 +4,7 @@ import { defineIcon } from '../icon-svg';
4
4
  export const StatusFailure24Icon = defineIcon({
5
5
  name: 'StatusFailure24Icon',
6
6
  svgTemplate: html `
7
- <svg
8
- xmlns="http://www.w3.org/2000/svg"
9
- xml:space="preserve"
10
- width="24"
11
- height="24"
12
- viewBox="0 0 24 24"
13
- >
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
14
8
  <circle
15
9
  cx="12"
16
10
  cy="12"
@@ -20,10 +14,10 @@ export const StatusFailure24Icon = defineIcon({
20
14
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
21
15
  />
22
16
  <path
17
+ d="M8 16.5 L16 7.5 M8 7.5 L16 16.5"
23
18
  fill="none"
24
19
  stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
25
20
  stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
26
- d="M8 16.5 L16 7.5 M8 7.5 L16 16.5"
27
21
  />
28
22
  </svg>
29
23
  `,
package/dist/styles/index.d.ts CHANGED
@@ -2,4 +2,5 @@ export * from './disabled';
2
2
  export * from './durations';
3
3
  export * from './focus';
4
4
  export * from './native-styles';
5
+ export * from './scrollbar';
5
6
  export * from './user-select';
package/dist/styles/index.js CHANGED
@@ -2,4 +2,5 @@ export * from './disabled';
2
2
  export * from './durations';
3
3
  export * from './focus';
4
4
  export * from './native-styles';
5
+ export * from './scrollbar';
5
6
  export * from './user-select';
package/dist/styles/scrollbar.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function hideScrollbars(selector: string): import("element-vir").CSSResult;
package/dist/styles/scrollbar.js ADDED
@@ -0,0 +1,14 @@
1
+ import { css, unsafeCSS } from 'element-vir';
2
+ export function hideScrollbars(selector) {
3
+ return css `
4
+ scrollbar-width: none; /* hide scrollbars in Firefox */
5
+ -ms-overflow-style: none; /* hide scrollbars in IE 10+ */
6
+
7
+ /* hide scrollbars in Chrome/Safari/Webkit */
8
+ .${unsafeCSS(selector)}::-webkit-scrollbar {
9
+ background: transparent;
10
+ width: 0;
11
+ height: 0;
12
+ }
13
+ `;
14
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -40,27 +40,26 @@
40
40
  "test:docs": "virmator code-in-markdown check"
41
41
  },
42
42
  "dependencies": {
43
- "@augment-vir/common": "^16.4.0",
43
+ "@augment-vir/common": "^16.4.1",
44
44
  "element-vir": "^16.3.1",
45
45
  "lit-css-vars": "^3.0.0",
46
46
  "spa-router-vir": "^2.1.1",
47
- "type-fest": "^4.2.0"
47
+ "type-fest": "^4.3.1"
48
48
  },
49
49
  "devDependencies": {
50
- "@augment-vir/browser-testing": "^16.4.0",
51
- "@augment-vir/node-js": "^16.4.0",
50
+ "@augment-vir/browser-testing": "^16.4.1",
51
+ "@augment-vir/node-js": "^16.4.1",
52
52
  "@open-wc/testing": "^3.2.0",
53
53
  "@types/chai": "^4.3.5",
54
54
  "@types/mocha": "^10.0.1",
55
55
  "@web/dev-server-esbuild": "^0.4.1",
56
- "@web/test-runner": "^0.17.0",
56
+ "@web/test-runner": "^0.17.1",
57
57
  "@web/test-runner-commands": "^0.8.0",
58
58
  "@web/test-runner-playwright": "^0.10.1",
59
59
  "@web/test-runner-visual-regression": "^0.8.2",
60
60
  "esbuild": "^0.19.2",
61
61
  "istanbul-smart-text-reporter": "^1.1.2",
62
- "npm-check-updates": "^16.11.1",
63
- "typescript": "^5.1.6",
62
+ "typescript": "^5.2.2",
64
63
  "vite": "^4.4.9",
65
64
  "vite-tsconfig-paths": "^4.2.0"
66
65
  }