vira 28.12.2 → 28.14.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.
- package/dist/elements/index.d.ts +1 -0
- package/dist/elements/index.js +1 -0
- package/dist/elements/vira-overflow-switch.element.d.ts +21 -0
- package/dist/elements/vira-overflow-switch.element.js +110 -0
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.js +1 -0
- package/dist/styles/vira-color-palette.d.ts +86 -0
- package/dist/styles/vira-color-palette.js +87 -0
- package/package.json +9 -8
package/dist/elements/index.d.ts
CHANGED
|
@@ -20,5 +20,6 @@ export * from './vira-image.element.js';
|
|
|
20
20
|
export * from './vira-input.element.js';
|
|
21
21
|
export * from './vira-link.element.js';
|
|
22
22
|
export * from './vira-modal.element.js';
|
|
23
|
+
export * from './vira-overflow-switch.element.js';
|
|
23
24
|
export * from './vira-progress.element.js';
|
|
24
25
|
export * from './vira-select.element.js';
|
package/dist/elements/index.js
CHANGED
|
@@ -20,5 +20,6 @@ export * from './vira-image.element.js';
|
|
|
20
20
|
export * from './vira-input.element.js';
|
|
21
21
|
export * from './vira-link.element.js';
|
|
22
22
|
export * from './vira-modal.element.js';
|
|
23
|
+
export * from './vira-overflow-switch.element.js';
|
|
23
24
|
export * from './vira-progress.element.js';
|
|
24
25
|
export * from './vira-select.element.js';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* An element switches between two slots based on their overflow.
|
|
3
|
+
*
|
|
4
|
+
* @category Elements
|
|
5
|
+
* @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
|
|
6
|
+
*/
|
|
7
|
+
export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", Readonly<((Required<Pick<{
|
|
8
|
+
automaticallySwitch: boolean;
|
|
9
|
+
useSmall: boolean;
|
|
10
|
+
}, "automaticallySwitch">> & Partial<Record<"useSmall", never>>) | (Required<Pick<{
|
|
11
|
+
automaticallySwitch: boolean;
|
|
12
|
+
useSmall: boolean;
|
|
13
|
+
}, "useSmall">> & Partial<Record<"automaticallySwitch", never>>)) & Omit<{
|
|
14
|
+
automaticallySwitch: boolean;
|
|
15
|
+
useSmall: boolean;
|
|
16
|
+
}, "automaticallySwitch" | "useSmall">>, {
|
|
17
|
+
isOverflowing: boolean;
|
|
18
|
+
resizeObserver: undefined | ResizeObserver;
|
|
19
|
+
/** Called on cleanup to clear all listeners. */
|
|
20
|
+
cleanup: undefined | (() => void);
|
|
21
|
+
}, {}, "vira-overflow-switch-show-small", "vira-overflow-switch-", readonly ["large", "small"], readonly []>;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { css, html, onDomCreated } from 'element-vir';
|
|
2
|
+
import { listenTo } from 'typed-event-target';
|
|
3
|
+
import { defineViraElement } from './define-vira-element.js';
|
|
4
|
+
/**
|
|
5
|
+
* An element switches between two slots based on their overflow.
|
|
6
|
+
*
|
|
7
|
+
* @category Elements
|
|
8
|
+
* @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
|
|
9
|
+
*/
|
|
10
|
+
export const ViraOverflowSwitch = defineViraElement()({
|
|
11
|
+
tagName: 'vira-overflow-switch',
|
|
12
|
+
slotNames: [
|
|
13
|
+
/** The child to render, if it fits. */
|
|
14
|
+
'large',
|
|
15
|
+
/** The child to render if the large one does not fit. */
|
|
16
|
+
'small',
|
|
17
|
+
],
|
|
18
|
+
state() {
|
|
19
|
+
return {
|
|
20
|
+
isOverflowing: false,
|
|
21
|
+
resizeObserver: undefined,
|
|
22
|
+
/** Called on cleanup to clear all listeners. */
|
|
23
|
+
cleanup: undefined,
|
|
24
|
+
};
|
|
25
|
+
},
|
|
26
|
+
hostClasses: {
|
|
27
|
+
'vira-overflow-switch-show-small': ({ state, inputs }) => state.isOverflowing || !!inputs.useSmall,
|
|
28
|
+
},
|
|
29
|
+
styles: ({ hostClasses }) => css `
|
|
30
|
+
:host {
|
|
31
|
+
display: inline-block;
|
|
32
|
+
max-width: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.large,
|
|
36
|
+
.small {
|
|
37
|
+
display: inline-block;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.small {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* When the large content overflows, hide it but keep it in layout so we can measure it.
|
|
46
|
+
* The small content is then shown instead.
|
|
47
|
+
*/
|
|
48
|
+
${hostClasses['vira-overflow-switch-show-small'].selector} .large {
|
|
49
|
+
visibility: hidden;
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
${hostClasses['vira-overflow-switch-show-small'].selector} .small {
|
|
56
|
+
display: inline-block;
|
|
57
|
+
}
|
|
58
|
+
`,
|
|
59
|
+
cleanup({ state, updateState }) {
|
|
60
|
+
state.cleanup?.();
|
|
61
|
+
updateState({
|
|
62
|
+
cleanup: undefined,
|
|
63
|
+
});
|
|
64
|
+
},
|
|
65
|
+
render({ slotNames, updateState, inputs, host, state }) {
|
|
66
|
+
return html `
|
|
67
|
+
<div
|
|
68
|
+
class="large"
|
|
69
|
+
${onDomCreated((largeElement) => {
|
|
70
|
+
if (!inputs.automaticallySwitch) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const overflowParams = {
|
|
74
|
+
elementToTest: largeElement,
|
|
75
|
+
host,
|
|
76
|
+
updateState,
|
|
77
|
+
};
|
|
78
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
79
|
+
updateOverflowing(overflowParams);
|
|
80
|
+
});
|
|
81
|
+
resizeObserver.observe(host);
|
|
82
|
+
/**
|
|
83
|
+
* Also observe the large slot wrapper itself in case its own layout changes
|
|
84
|
+
* without host resizing.
|
|
85
|
+
*/
|
|
86
|
+
resizeObserver.observe(largeElement);
|
|
87
|
+
const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
|
|
88
|
+
updateOverflowing(overflowParams);
|
|
89
|
+
});
|
|
90
|
+
/** Initial measurement: defer until after first layout. */
|
|
91
|
+
updateOverflowing(overflowParams);
|
|
92
|
+
state.cleanup?.();
|
|
93
|
+
updateState({
|
|
94
|
+
cleanup() {
|
|
95
|
+
resizeObserver.disconnect();
|
|
96
|
+
removeSlotChangeListener();
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
})}
|
|
100
|
+
>
|
|
101
|
+
<slot name=${slotNames.large}></slot>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="small"><slot name=${slotNames.small}></slot></div>
|
|
104
|
+
`;
|
|
105
|
+
},
|
|
106
|
+
});
|
|
107
|
+
function updateOverflowing({ elementToTest, host, updateState, }) {
|
|
108
|
+
const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
|
|
109
|
+
updateState({ isOverflowing });
|
|
110
|
+
}
|
package/dist/styles/index.d.ts
CHANGED
package/dist/styles/index.js
CHANGED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/** Generously contributed by Trent Hazy, modified to more uniform contrast levels. */
|
|
2
|
+
export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<{
|
|
3
|
+
readonly 'vira-white': "#ffffff";
|
|
4
|
+
readonly 'vira-black': "#000000";
|
|
5
|
+
readonly 'vira-teal-10': "#c9f6ee";
|
|
6
|
+
readonly 'vira-teal-20': "#89ebda";
|
|
7
|
+
readonly 'vira-teal-30': "#3fddc3";
|
|
8
|
+
readonly 'vira-teal-40': "#23c9ad";
|
|
9
|
+
readonly 'vira-teal-50': "#1fb59b";
|
|
10
|
+
readonly 'vira-teal-60': "#1a9681";
|
|
11
|
+
readonly 'vira-teal-70': "#147464";
|
|
12
|
+
readonly 'vira-teal-80': "#0d4c42";
|
|
13
|
+
readonly 'vira-teal-90': "#09362f";
|
|
14
|
+
readonly 'vira-blue-10': "#ddf0f9";
|
|
15
|
+
readonly 'vira-blue-20': "#b9e0f3";
|
|
16
|
+
readonly 'vira-blue-30': "#95d0ec";
|
|
17
|
+
readonly 'vira-blue-40': "#6dbee5";
|
|
18
|
+
readonly 'vira-blue-50': "#44acde";
|
|
19
|
+
readonly 'vira-blue-60': "#228ec4";
|
|
20
|
+
readonly 'vira-blue-70': "#1a6e98";
|
|
21
|
+
readonly 'vira-blue-80': "#114864";
|
|
22
|
+
readonly 'vira-blue-90': "#092736";
|
|
23
|
+
readonly 'vira-purple-10': "#f0eafb";
|
|
24
|
+
readonly 'vira-purple-20': "#e0d4f8";
|
|
25
|
+
readonly 'vira-purple-30': "#d1bff4";
|
|
26
|
+
readonly 'vira-purple-40': "#c0a9f0";
|
|
27
|
+
readonly 'vira-purple-50': "#b093ec";
|
|
28
|
+
readonly 'vira-purple-60': "#9770e6";
|
|
29
|
+
readonly 'vira-purple-70': "#7745de";
|
|
30
|
+
readonly 'vira-purple-80': "#4c1ea9";
|
|
31
|
+
readonly 'vira-purple-90': "#31136d";
|
|
32
|
+
readonly 'vira-pink-10': "#fbe7f9";
|
|
33
|
+
readonly 'vira-pink-20': "#f6cdf3";
|
|
34
|
+
readonly 'vira-pink-30': "#f2b3ed";
|
|
35
|
+
readonly 'vira-pink-40': "#ed96e6";
|
|
36
|
+
readonly 'vira-pink-50': "#e778df";
|
|
37
|
+
readonly 'vira-pink-60': "#dd3bd0";
|
|
38
|
+
readonly 'vira-pink-70': "#b01fa4";
|
|
39
|
+
readonly 'vira-pink-80': "#74146c";
|
|
40
|
+
readonly 'vira-pink-90': "#360933";
|
|
41
|
+
readonly 'vira-red-10': "#fbe8ec";
|
|
42
|
+
readonly 'vira-red-20': "#f7d0d7";
|
|
43
|
+
readonly 'vira-red-30': "#f3b8c2";
|
|
44
|
+
readonly 'vira-red-40': "#ee9eac";
|
|
45
|
+
readonly 'vira-red-50': "#e98495";
|
|
46
|
+
readonly 'vira-red-60': "#e1546b";
|
|
47
|
+
readonly 'vira-red-70': "#c1223c";
|
|
48
|
+
readonly 'vira-red-80': "#7f1628";
|
|
49
|
+
readonly 'vira-red-90': "#6d1322";
|
|
50
|
+
readonly 'vira-orange-10': "#f8ebd9";
|
|
51
|
+
readonly 'vira-orange-20': "#f1d6af";
|
|
52
|
+
readonly 'vira-orange-30': "#eac186";
|
|
53
|
+
readonly 'vira-orange-40': "#e2aa5c";
|
|
54
|
+
readonly 'vira-orange-50': "#da932d";
|
|
55
|
+
readonly 'vira-orange-60': "#b77920";
|
|
56
|
+
readonly 'vira-orange-70': "#8e5e19";
|
|
57
|
+
readonly 'vira-orange-80': "#5e3d10";
|
|
58
|
+
readonly 'vira-orange-90': "#362409";
|
|
59
|
+
readonly 'vira-green-10': "#e2f4bd";
|
|
60
|
+
readonly 'vira-green-20': "#c1e776";
|
|
61
|
+
readonly 'vira-green-30': "#9fd927";
|
|
62
|
+
readonly 'vira-green-40': "#8fc422";
|
|
63
|
+
readonly 'vira-green-50': "#80b11f";
|
|
64
|
+
readonly 'vira-green-60': "#6a931a";
|
|
65
|
+
readonly 'vira-green-70': "#527214";
|
|
66
|
+
readonly 'vira-green-80': "#364b0d";
|
|
67
|
+
readonly 'vira-green-90': "#273609";
|
|
68
|
+
readonly 'vira-yellow-10': "#f3f199";
|
|
69
|
+
readonly 'vira-yellow-20': "#e4e01a";
|
|
70
|
+
readonly 'vira-yellow-30': "#d0cd18";
|
|
71
|
+
readonly 'vira-yellow-40': "#bdb915";
|
|
72
|
+
readonly 'vira-yellow-50': "#aaa613";
|
|
73
|
+
readonly 'vira-yellow-60': "#8d8a10";
|
|
74
|
+
readonly 'vira-yellow-70': "#6d6b0c";
|
|
75
|
+
readonly 'vira-yellow-80': "#484608";
|
|
76
|
+
readonly 'vira-yellow-90': "#393807";
|
|
77
|
+
readonly 'vira-grey-10': "#ededed";
|
|
78
|
+
readonly 'vira-grey-20': "#dadada";
|
|
79
|
+
readonly 'vira-grey-30': "#c7c7c7";
|
|
80
|
+
readonly 'vira-grey-40': "#b4b4b4";
|
|
81
|
+
readonly 'vira-grey-50': "#a2a2a2";
|
|
82
|
+
readonly 'vira-grey-60': "#878787";
|
|
83
|
+
readonly 'vira-grey-70': "#686868";
|
|
84
|
+
readonly 'vira-grey-80': "#444444";
|
|
85
|
+
readonly 'vira-grey-90': "#202020";
|
|
86
|
+
}>;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { defineCssVars } from 'lit-css-vars';
|
|
2
|
+
/** Generously contributed by Trent Hazy, modified to more uniform contrast levels. */
|
|
3
|
+
export const viraColorPalette = defineCssVars({
|
|
4
|
+
'vira-white': '#ffffff',
|
|
5
|
+
'vira-black': '#000000',
|
|
6
|
+
'vira-teal-10': '#c9f6ee',
|
|
7
|
+
'vira-teal-20': '#89ebda',
|
|
8
|
+
'vira-teal-30': '#3fddc3',
|
|
9
|
+
'vira-teal-40': '#23c9ad',
|
|
10
|
+
'vira-teal-50': '#1fb59b',
|
|
11
|
+
'vira-teal-60': '#1a9681',
|
|
12
|
+
'vira-teal-70': '#147464',
|
|
13
|
+
'vira-teal-80': '#0d4c42',
|
|
14
|
+
'vira-teal-90': '#09362f',
|
|
15
|
+
'vira-blue-10': '#ddf0f9',
|
|
16
|
+
'vira-blue-20': '#b9e0f3',
|
|
17
|
+
'vira-blue-30': '#95d0ec',
|
|
18
|
+
'vira-blue-40': '#6dbee5',
|
|
19
|
+
'vira-blue-50': '#44acde',
|
|
20
|
+
'vira-blue-60': '#228ec4',
|
|
21
|
+
'vira-blue-70': '#1a6e98',
|
|
22
|
+
'vira-blue-80': '#114864',
|
|
23
|
+
'vira-blue-90': '#092736',
|
|
24
|
+
'vira-purple-10': '#f0eafb',
|
|
25
|
+
'vira-purple-20': '#e0d4f8',
|
|
26
|
+
'vira-purple-30': '#d1bff4',
|
|
27
|
+
'vira-purple-40': '#c0a9f0',
|
|
28
|
+
'vira-purple-50': '#b093ec',
|
|
29
|
+
'vira-purple-60': '#9770e6',
|
|
30
|
+
'vira-purple-70': '#7745de',
|
|
31
|
+
'vira-purple-80': '#4c1ea9',
|
|
32
|
+
'vira-purple-90': '#31136d',
|
|
33
|
+
'vira-pink-10': '#fbe7f9',
|
|
34
|
+
'vira-pink-20': '#f6cdf3',
|
|
35
|
+
'vira-pink-30': '#f2b3ed',
|
|
36
|
+
'vira-pink-40': '#ed96e6',
|
|
37
|
+
'vira-pink-50': '#e778df',
|
|
38
|
+
'vira-pink-60': '#dd3bd0',
|
|
39
|
+
'vira-pink-70': '#b01fa4',
|
|
40
|
+
'vira-pink-80': '#74146c',
|
|
41
|
+
'vira-pink-90': '#360933',
|
|
42
|
+
'vira-red-10': '#fbe8ec',
|
|
43
|
+
'vira-red-20': '#f7d0d7',
|
|
44
|
+
'vira-red-30': '#f3b8c2',
|
|
45
|
+
'vira-red-40': '#ee9eac',
|
|
46
|
+
'vira-red-50': '#e98495',
|
|
47
|
+
'vira-red-60': '#e1546b',
|
|
48
|
+
'vira-red-70': '#c1223c',
|
|
49
|
+
'vira-red-80': '#7f1628',
|
|
50
|
+
'vira-red-90': '#6d1322',
|
|
51
|
+
'vira-orange-10': '#f8ebd9',
|
|
52
|
+
'vira-orange-20': '#f1d6af',
|
|
53
|
+
'vira-orange-30': '#eac186',
|
|
54
|
+
'vira-orange-40': '#e2aa5c',
|
|
55
|
+
'vira-orange-50': '#da932d',
|
|
56
|
+
'vira-orange-60': '#b77920',
|
|
57
|
+
'vira-orange-70': '#8e5e19',
|
|
58
|
+
'vira-orange-80': '#5e3d10',
|
|
59
|
+
'vira-orange-90': '#362409',
|
|
60
|
+
'vira-green-10': '#e2f4bd',
|
|
61
|
+
'vira-green-20': '#c1e776',
|
|
62
|
+
'vira-green-30': '#9fd927',
|
|
63
|
+
'vira-green-40': '#8fc422',
|
|
64
|
+
'vira-green-50': '#80b11f',
|
|
65
|
+
'vira-green-60': '#6a931a',
|
|
66
|
+
'vira-green-70': '#527214',
|
|
67
|
+
'vira-green-80': '#364b0d',
|
|
68
|
+
'vira-green-90': '#273609',
|
|
69
|
+
'vira-yellow-10': '#f3f199',
|
|
70
|
+
'vira-yellow-20': '#e4e01a',
|
|
71
|
+
'vira-yellow-30': '#d0cd18',
|
|
72
|
+
'vira-yellow-40': '#bdb915',
|
|
73
|
+
'vira-yellow-50': '#aaa613',
|
|
74
|
+
'vira-yellow-60': '#8d8a10',
|
|
75
|
+
'vira-yellow-70': '#6d6b0c',
|
|
76
|
+
'vira-yellow-80': '#484608',
|
|
77
|
+
'vira-yellow-90': '#393807',
|
|
78
|
+
'vira-grey-10': '#ededed',
|
|
79
|
+
'vira-grey-20': '#dadada',
|
|
80
|
+
'vira-grey-30': '#c7c7c7',
|
|
81
|
+
'vira-grey-40': '#b4b4b4',
|
|
82
|
+
'vira-grey-50': '#a2a2a2',
|
|
83
|
+
'vira-grey-60': '#878787',
|
|
84
|
+
'vira-grey-70': '#686868',
|
|
85
|
+
'vira-grey-80': '#444444',
|
|
86
|
+
'vira-grey-90': '#202020',
|
|
87
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vira",
|
|
3
|
-
"version": "28.
|
|
3
|
+
"version": "28.14.0",
|
|
4
4
|
"description": "A simple and highly versatile design system using element-vir.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -38,33 +38,34 @@
|
|
|
38
38
|
"test:docs": "virmator docs check"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@augment-vir/assert": "^31.
|
|
42
|
-
"@augment-vir/common": "^31.
|
|
43
|
-
"@augment-vir/web": "^31.
|
|
44
|
-
"colorjs.io": "
|
|
41
|
+
"@augment-vir/assert": "^31.57.3",
|
|
42
|
+
"@augment-vir/common": "^31.57.3",
|
|
43
|
+
"@augment-vir/web": "^31.57.3",
|
|
44
|
+
"colorjs.io": "0.5.2",
|
|
45
45
|
"date-vir": "^8.1.0",
|
|
46
46
|
"device-navigation": "^4.5.5",
|
|
47
47
|
"lit-css-vars": "^3.0.11",
|
|
48
48
|
"observavir": "^2.3.0",
|
|
49
49
|
"page-active": "^1.0.3",
|
|
50
50
|
"spa-router-vir": "^6.4.1",
|
|
51
|
+
"theme-vir": "^28.14.0",
|
|
51
52
|
"type-fest": "^5.3.1",
|
|
52
53
|
"typed-event-target": "^4.1.0"
|
|
53
54
|
},
|
|
54
55
|
"devDependencies": {
|
|
55
|
-
"@augment-vir/test": "^31.
|
|
56
|
+
"@augment-vir/test": "^31.57.3",
|
|
56
57
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
57
58
|
"@web/test-runner": "^0.20.2",
|
|
58
59
|
"@web/test-runner-commands": "^0.9.0",
|
|
59
60
|
"@web/test-runner-playwright": "^0.11.1",
|
|
60
61
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
61
|
-
"esbuild": "^0.27.
|
|
62
|
+
"esbuild": "^0.27.2",
|
|
62
63
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
63
64
|
"markdown-code-example-inserter": "^3.0.3",
|
|
64
65
|
"typedoc": "^0.28.15",
|
|
65
66
|
"typescript": "5.9.3",
|
|
66
67
|
"vite": "^7.3.0",
|
|
67
|
-
"vite-tsconfig-paths": "^
|
|
68
|
+
"vite-tsconfig-paths": "^6.0.3"
|
|
68
69
|
},
|
|
69
70
|
"peerDependencies": {
|
|
70
71
|
"element-vir": "^26.9.1"
|