@vialiq/flux-ui 0.3.0 → 0.4.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 (4) hide show
  1. package/components/_index.scss +1 -0
  2. package/components/_tooltip.scss +135 -0
  3. package/package.json +1 -1
  4. package/styles/_variables.scss +1 -1
package/components/_index.scss CHANGED
@@ -4,4 +4,5 @@
4
4
  @forward 'input';
5
5
  @forward 'radio';
6
6
  @forward 'checkbox';
7
+ @forward 'tooltip';
7
8
 
package/components/_tooltip.scss ADDED
@@ -0,0 +1,135 @@
1
+ @use '../styles/variables' as tokens;
2
+
3
+ $vi-tooltip-background: var(--vi-tooltip-background, tokens.$layer-inverse);
4
+ $vi-tooltip-color: var(--vi-tooltip-color, tokens.$text-inverse);
5
+ $vi-tooltip-font-size: var(--vi-tooltip-font-size, 12px);
6
+ $vi-tooltip-border-radius: var(--vi-tooltip-border-radius, 4px);
7
+ $vi-tooltip-padding: var(--vi-tooltip-padding, 6px 10px);
8
+ $vi-tooltip-max-width: var(--vi-tooltip-max-width, 240px);
9
+ $vi-tooltip-arrow-size: var(--vi-tooltip-arrow-size, 6px);
10
+ $vi-tooltip-z-index: var(--vi-tooltip-z-index, 9999);
11
+ $vi-tooltip-shadow: var(--vi-tooltip-shadow, tokens.$shadow-md);
12
+
13
+ .tooltip-panel {
14
+ position: fixed;
15
+ z-index: $vi-tooltip-z-index;
16
+ pointer-events: none;
17
+ opacity: 0;
18
+ transform: scale(0.95);
19
+ transition: opacity 0.15s ease-out, transform 0.15s ease-out;
20
+ margin: 0;
21
+ border: none;
22
+ background: transparent;
23
+ padding: 0;
24
+ overflow: visible;
25
+ font-family: tokens.$font-family-base;
26
+
27
+ &[popover]:popover-open {
28
+ display: block;
29
+ pointer-events: auto;
30
+ opacity: 1;
31
+ transform: scale(1);
32
+ }
33
+
34
+ // Handle discrete visibility animations
35
+ transition-property: opacity, transform, display, overlay;
36
+ transition-behavior: allow-discrete;
37
+
38
+ @media (prefers-reduced-motion: reduce) {
39
+ transition: none;
40
+ transform: none;
41
+ }
42
+ }
43
+
44
+ .tooltip-content {
45
+ background-color: $vi-tooltip-background;
46
+ color: $vi-tooltip-color;
47
+ font-size: $vi-tooltip-font-size;
48
+ line-height: 1.4;
49
+ padding: $vi-tooltip-padding;
50
+ border-radius: $vi-tooltip-border-radius;
51
+ box-shadow: $vi-tooltip-shadow;
52
+ max-width: $vi-tooltip-max-width;
53
+ word-wrap: break-word;
54
+ white-space: normal;
55
+ position: relative;
56
+ }
57
+
58
+ .tooltip-arrow {
59
+ position: absolute;
60
+ width: 0;
61
+ height: 0;
62
+ border-style: solid;
63
+ border-color: transparent;
64
+ pointer-events: none;
65
+ }
66
+
67
+ // ----------------------------------------------------------------------------
68
+ // Placement and Arrow Positioning (CSS Anchor Positioning & Fallbacks)
69
+ // ----------------------------------------------------------------------------
70
+
71
+ // 1. Default placements (used both as initial state and JS fallback)
72
+ .tooltip-panel[placement^="top"],
73
+ .tooltip-panel[data-placement^="top"] {
74
+ .tooltip-arrow {
75
+ bottom: calc(-1 * $vi-tooltip-arrow-size);
76
+ left: 50%;
77
+ transform: translateX(-50%);
78
+ border-width: $vi-tooltip-arrow-size $vi-tooltip-arrow-size 0;
79
+ border-top-color: $vi-tooltip-background;
80
+ }
81
+ }
82
+
83
+ .tooltip-panel[placement^="bottom"],
84
+ .tooltip-panel[data-placement^="bottom"] {
85
+ .tooltip-arrow {
86
+ top: calc(-1 * $vi-tooltip-arrow-size);
87
+ left: 50%;
88
+ transform: translateX(-50%);
89
+ border-width: 0 $vi-tooltip-arrow-size $vi-tooltip-arrow-size;
90
+ border-bottom-color: $vi-tooltip-background;
91
+ }
92
+ }
93
+
94
+ .tooltip-panel[placement="left"],
95
+ .tooltip-panel[data-placement="left"] {
96
+ .tooltip-arrow {
97
+ right: calc(-1 * $vi-tooltip-arrow-size);
98
+ top: 50%;
99
+ transform: translateY(-50%);
100
+ border-width: $vi-tooltip-arrow-size 0 $vi-tooltip-arrow-size $vi-tooltip-arrow-size;
101
+ border-left-color: $vi-tooltip-background;
102
+ }
103
+ }
104
+
105
+ .tooltip-panel[placement="right"],
106
+ .tooltip-panel[data-placement="right"] {
107
+ .tooltip-arrow {
108
+ left: calc(-1 * $vi-tooltip-arrow-size);
109
+ top: 50%;
110
+ transform: translateY(-50%);
111
+ border-width: $vi-tooltip-arrow-size $vi-tooltip-arrow-size $vi-tooltip-arrow-size 0;
112
+ border-right-color: $vi-tooltip-background;
113
+ }
114
+ }
115
+
116
+ // Start variations
117
+ .tooltip-panel[placement$="-start"],
118
+ .tooltip-panel[data-placement$="-start"] {
119
+ .tooltip-arrow {
120
+ left: 12px;
121
+ transform: none;
122
+ }
123
+ }
124
+
125
+ // End variations
126
+ .tooltip-panel[placement$="-end"],
127
+ .tooltip-panel[data-placement$="-end"] {
128
+ .tooltip-arrow {
129
+ left: auto;
130
+ right: 12px;
131
+ transform: none;
132
+ }
133
+ }
134
+
135
+ // 2. CSS Anchor positioning block deleted to run Floating UI uniformly.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vialiq/flux-ui",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
package/styles/_variables.scss CHANGED
@@ -152,7 +152,7 @@ $border-inverse-03: var(--vi-border-inverse-03, #757575); // grey-600
152
152
  $border-inverse-04: var(--vi-border-inverse-04, #9e9e9e); // grey-500
153
153
 
154
154
  $focus-ring-error-glow: var(--vi-color-red-100, #ffccce); // alias for $color-red-100
155
-
155
+ $focus-ring-success-glow: var(--vi-color-green-100, #e6f0eb); // alias for $color-green-100
156
156
  // -- Primitive: Spacing ------------------------------------------------------
157
157
 
158
158
  $spacing-unit: var(--vi-spacing-unit, 8px);