@bagelink/vue 1.15.57 → 1.15.61

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 (60) hide show
  1. package/dist/components/Avatar.vue.d.ts +5 -1
  2. package/dist/components/Avatar.vue.d.ts.map +1 -1
  3. package/dist/components/Badge.vue.d.ts +6 -1
  4. package/dist/components/Badge.vue.d.ts.map +1 -1
  5. package/dist/components/Dropdown.vue.d.ts.map +1 -1
  6. package/dist/components/ListItem.vue.d.ts +12 -0
  7. package/dist/components/ListItem.vue.d.ts.map +1 -1
  8. package/dist/components/Progress.vue.d.ts +38 -0
  9. package/dist/components/Progress.vue.d.ts.map +1 -0
  10. package/dist/components/Swiper.vue.d.ts.map +1 -1
  11. package/dist/components/index.d.ts +1 -0
  12. package/dist/components/index.d.ts.map +1 -1
  13. package/dist/components/layout/AppSidebar.vue.d.ts +1 -0
  14. package/dist/components/layout/AppSidebar.vue.d.ts.map +1 -1
  15. package/dist/components/layout/Divider.vue.d.ts +31 -0
  16. package/dist/components/layout/Divider.vue.d.ts.map +1 -0
  17. package/dist/components/layout/Layout.vue.d.ts.map +1 -1
  18. package/dist/components/layout/SidebarNavItem.vue.d.ts +18 -0
  19. package/dist/components/layout/SidebarNavItem.vue.d.ts.map +1 -0
  20. package/dist/components/layout/index.d.ts +1 -0
  21. package/dist/components/layout/index.d.ts.map +1 -1
  22. package/dist/composables/index.d.ts +1 -1
  23. package/dist/composables/index.d.ts.map +1 -1
  24. package/dist/composables/useTheme.d.ts +9 -0
  25. package/dist/composables/useTheme.d.ts.map +1 -1
  26. package/dist/directives/index.d.ts +2 -0
  27. package/dist/directives/index.d.ts.map +1 -1
  28. package/dist/directives/reveal.d.ts +29 -0
  29. package/dist/directives/reveal.d.ts.map +1 -0
  30. package/dist/index.cjs +37 -37
  31. package/dist/index.mjs +8379 -8076
  32. package/dist/plugins/bagel.d.ts.map +1 -1
  33. package/dist/style.css +1 -1
  34. package/dist/utils/index.d.ts +1 -1
  35. package/dist/utils/index.d.ts.map +1 -1
  36. package/package.json +1 -1
  37. package/src/components/Avatar.vue +20 -4
  38. package/src/components/Badge.vue +32 -2
  39. package/src/components/Dropdown.vue +7 -1
  40. package/src/components/ListItem.vue +151 -76
  41. package/src/components/Progress.vue +80 -0
  42. package/src/components/Swiper.vue +19 -1
  43. package/src/components/index.ts +1 -0
  44. package/src/components/layout/AppSidebar.vue +11 -15
  45. package/src/components/layout/Divider.vue +64 -0
  46. package/src/components/layout/Layout.vue +17 -4
  47. package/src/components/layout/SidebarNavItem.vue +186 -0
  48. package/src/components/layout/index.ts +1 -0
  49. package/src/composables/index.ts +1 -1
  50. package/src/composables/useTheme.ts +31 -5
  51. package/src/directives/index.ts +2 -0
  52. package/src/directives/reveal.ts +78 -0
  53. package/src/plugins/bagel.ts +2 -1
  54. package/src/styles/appearance.css +11 -0
  55. package/src/styles/bagel.css +1 -0
  56. package/src/styles/buttons.css +74 -0
  57. package/src/styles/dark.css +94 -2
  58. package/src/styles/layout.css +65 -13
  59. package/src/styles/motion.css +91 -0
  60. package/src/utils/index.ts +1 -1
package/src/styles/dark.css CHANGED
@@ -26,6 +26,11 @@
26
26
  filter: invert(1);
27
27
  } */
28
28
 
29
+ /* `:root.bgl-dark-mode` (the class lives on <html>) raises specificity to
30
+ (0,2,0) so these tokens win over any project that redefines colors in its
31
+ own `:root {}` (e.g. udi sets --bgl-blue: #7ad3f7). The bare .bgl-dark-mode
32
+ is kept as a fallback in case the class is applied to a non-root element. */
33
+ :root.bgl-dark-mode,
29
34
  .bgl-dark-mode {
30
35
  /* ---- Dark palette (raw values) ---------------------------------------- */
31
36
  --bgl-dm-bg: #121317;
@@ -41,14 +46,31 @@
41
46
  /* primary text */
42
47
  --bgl-dm-text-muted: #9a9b9d;
43
48
  /* secondary text */
44
- --bgl-dm-border: #383a3f;
45
- /* borders / dividers */
49
+ --bgl-dm-border: rgba(255, 255, 255, 0.12);
50
+ /* borders / dividers — translucent light, mirroring the light-mode
51
+ #00000020 (translucent dark). Blends over any dark surface (bg, card,
52
+ input) instead of being a fixed opaque gray. */
46
53
 
47
54
  /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
48
55
  --bgl-primary: #4f7cff !important;
49
56
  --bgl-primary-tint: #4f7cff33;
50
57
  --bgl-primary-light: #1a2236;
51
58
 
59
+ /* ---- Status / accent colors (tuned for dark backgrounds) ------------- *
60
+ * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f,
61
+ * yellow #ffbb00) are either too dark/saturated or too pastel to read well
62
+ * on a dark surface. Shift them lighter and slightly desaturated so they
63
+ * pop against the dark UI without glowing. Tints follow the same hue at low
64
+ * opacity for soft fills/badges. */
65
+ --bgl-blue: #5b8cff;
66
+ --bgl-blue-tint: rgba(91, 140, 255, 0.18);
67
+ --bgl-green: #5dd49b;
68
+ --bgl-green-tint: rgba(93, 212, 155, 0.18);
69
+ --bgl-red: #f47174;
70
+ --bgl-red-tint: rgba(244, 113, 116, 0.18);
71
+ --bgl-yellow: #ffc94d;
72
+ --bgl-yellow-tint: rgba(255, 201, 77, 0.18);
73
+
52
74
  /* ---- Surfaces / backgrounds ------------------------------------------ */
53
75
  --bgl-bg: var(--bgl-dm-bg);
54
76
  --bgl-box-bg: var(--bgl-dm-surface);
@@ -121,6 +143,57 @@
121
143
  --bgl-gray-10: color-mix(in oklab, white 4%, var(--bgl-dm-surface));
122
144
  --bgl-gray-20: color-mix(in oklab, white 8%, var(--bgl-dm-surface));
123
145
  --bgl-gray-30: color-mix(in oklab, white 13%, var(--bgl-dm-surface));
146
+ /* Mid/high end of the scale: in light mode these go DARKER as the number
147
+ rises (gray-80 ≈ a strong gray used for lines/dividers). On dark they must
148
+ instead get LIGHTER so "higher number = more contrast vs the surface"
149
+ still holds — otherwise gray-80 lines vanish on the dark background.
150
+ Fixes calendar hour-lines and any other gray-40..90 separators at once. */
151
+ --bgl-gray-40: color-mix(in oklab, white 18%, var(--bgl-dm-surface));
152
+ --bgl-gray-50: color-mix(in oklab, white 24%, var(--bgl-dm-surface));
153
+ --bgl-gray-60: color-mix(in oklab, white 32%, var(--bgl-dm-surface));
154
+ --bgl-gray-70: color-mix(in oklab, white 42%, var(--bgl-dm-surface));
155
+ --bgl-gray-80: color-mix(in oklab, white 54%, var(--bgl-dm-surface));
156
+ --bgl-gray-90: color-mix(in oklab, white 70%, var(--bgl-dm-surface));
157
+
158
+ /* ---- Colored tint scale (10/20/30) ----------------------------------- *
159
+ * In light mode --bgl-{color}-10/20/30 are near-white pastel washes (e.g.
160
+ * green-30 = 70% white + green) used as soft fills — chat bubbles, badges,
161
+ * highlighted rows. On a dark UI those pale pastels glow and force dark text
162
+ * to be unreadable. Remap each to a low-opacity wash of its OWN base color
163
+ * OVER the dark surface, so the fill stays subtly colored but dark, and the
164
+ * light text token reads on top. Higher number = a touch more color.
165
+ * Because these sit in the high-specificity :root.bgl-dark-mode block, they
166
+ * also override any project that hard-sets e.g. --bgl-blue-30 in :root. */
167
+ --bgl-blue-10: color-mix(in oklab, var(--bgl-blue) 10%, var(--bgl-dm-surface));
168
+ --bgl-blue-20: color-mix(in oklab, var(--bgl-blue) 16%, var(--bgl-dm-surface));
169
+ --bgl-blue-30: color-mix(in oklab, var(--bgl-blue) 24%, var(--bgl-dm-surface));
170
+ --bgl-green-10: color-mix(in oklab, var(--bgl-green) 10%, var(--bgl-dm-surface));
171
+ --bgl-green-20: color-mix(in oklab, var(--bgl-green) 16%, var(--bgl-dm-surface));
172
+ --bgl-green-30: color-mix(in oklab, var(--bgl-green) 24%, var(--bgl-dm-surface));
173
+ --bgl-red-10: color-mix(in oklab, var(--bgl-red) 10%, var(--bgl-dm-surface));
174
+ --bgl-red-20: color-mix(in oklab, var(--bgl-red) 16%, var(--bgl-dm-surface));
175
+ --bgl-red-30: color-mix(in oklab, var(--bgl-red) 24%, var(--bgl-dm-surface));
176
+ --bgl-yellow-10: color-mix(in oklab, var(--bgl-yellow) 10%, var(--bgl-dm-surface));
177
+ --bgl-yellow-20: color-mix(in oklab, var(--bgl-yellow) 16%, var(--bgl-dm-surface));
178
+ --bgl-yellow-30: color-mix(in oklab, var(--bgl-yellow) 24%, var(--bgl-dm-surface));
179
+ --bgl-purple-10: color-mix(in oklab, var(--bgl-purple) 10%, var(--bgl-dm-surface));
180
+ --bgl-purple-20: color-mix(in oklab, var(--bgl-purple) 16%, var(--bgl-dm-surface));
181
+ --bgl-purple-30: color-mix(in oklab, var(--bgl-purple) 24%, var(--bgl-dm-surface));
182
+ --bgl-brown-10: color-mix(in oklab, var(--bgl-brown) 10%, var(--bgl-dm-surface));
183
+ --bgl-brown-20: color-mix(in oklab, var(--bgl-brown) 16%, var(--bgl-dm-surface));
184
+ --bgl-brown-30: color-mix(in oklab, var(--bgl-brown) 24%, var(--bgl-dm-surface));
185
+ --bgl-orange-10: color-mix(in oklab, var(--bgl-orange) 10%, var(--bgl-dm-surface));
186
+ --bgl-orange-20: color-mix(in oklab, var(--bgl-orange) 16%, var(--bgl-dm-surface));
187
+ --bgl-orange-30: color-mix(in oklab, var(--bgl-orange) 24%, var(--bgl-dm-surface));
188
+ --bgl-turquoise-10: color-mix(in oklab, var(--bgl-turquoise) 10%, var(--bgl-dm-surface));
189
+ --bgl-turquoise-20: color-mix(in oklab, var(--bgl-turquoise) 16%, var(--bgl-dm-surface));
190
+ --bgl-turquoise-30: color-mix(in oklab, var(--bgl-turquoise) 24%, var(--bgl-dm-surface));
191
+ --bgl-pink-10: color-mix(in oklab, var(--bgl-pink) 10%, var(--bgl-dm-surface));
192
+ --bgl-pink-20: color-mix(in oklab, var(--bgl-pink) 16%, var(--bgl-dm-surface));
193
+ --bgl-pink-30: color-mix(in oklab, var(--bgl-pink) 24%, var(--bgl-dm-surface));
194
+ --bgl-primary-10: color-mix(in oklab, var(--bgl-primary) 10%, var(--bgl-dm-surface));
195
+ --bgl-primary-20: color-mix(in oklab, var(--bgl-primary) 16%, var(--bgl-dm-surface));
196
+ --bgl-primary-30: color-mix(in oklab, var(--bgl-primary) 24%, var(--bgl-dm-surface));
124
197
  }
125
198
 
126
199
  /* Native form controls (date/time pickers) render dark glyphs that are
@@ -156,6 +229,25 @@
156
229
  border-color: var(--bgl-dm-border);
157
230
  }
158
231
 
232
+ /* .pair-white (e.g. <Btn color="white">) and .pair-gray are neutral/secondary
233
+ fills on light UIs (literal white / a light #b7b7b7 gray). On dark they stay
234
+ glaring light blocks, so for the FILLED variant turn them into a raised dark
235
+ surface with light text and a hairline border (a proper secondary button).
236
+ Flat pills and border pills keep their own treatment (they only tint text /
237
+ outline, not the fill), so we exclude them. */
238
+ .bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border),
239
+ .bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border) {
240
+ background-color: var(--bgl-dm-surface-2);
241
+ color: var(--bgl-dm-text);
242
+ border-color: var(--bgl-dm-border);
243
+ }
244
+ /* Hover/active on the dark secondary button: lift one step instead of the
245
+ default lighten-filter which would wash the light original out. */
246
+ .bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover,
247
+ .bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border):hover {
248
+ background-color: color-mix(in oklab, white 8%, var(--bgl-dm-surface-2));
249
+ }
250
+
159
251
  /* ----------------------------------------------------------------------------
160
252
  * Absolute color utilities (bg-white / bg-black …)
161
253
  * ----------------------------------------------------------------------------
package/src/styles/layout.css CHANGED
@@ -15,6 +15,58 @@
15
15
  border-radius: 1000px;
16
16
  }
17
17
 
18
+ /* SQUARE — equal width+height in one class. Collapses the extremely common
19
+ * `width:N; height:N` (often + place-items:center + radius) chip/control/avatar
20
+ * pattern. Pair with `.grid.place-items-center` (or `.flex-center`) + `.round`
21
+ * / `.radius-*` as needed. Values in px to match icon/control sizing. */
22
+ .square-8 { width: 8px; height: 8px; }
23
+ .square-10 { width: 10px; height: 10px; }
24
+ .square-12 { width: 12px; height: 12px; }
25
+ .square-16 { width: 16px; height: 16px; }
26
+ .square-20 { width: 20px; height: 20px; }
27
+ .square-24 { width: 24px; height: 24px; }
28
+ .square-28 { width: 28px; height: 28px; }
29
+ .square-30 { width: 30px; height: 30px; }
30
+ .square-32 { width: 32px; height: 32px; }
31
+ .square-34 { width: 34px; height: 34px; }
32
+ .square-36 { width: 36px; height: 36px; }
33
+ .square-38 { width: 38px; height: 38px; }
34
+ .square-40 { width: 40px; height: 40px; }
35
+ .square-44 { width: 44px; height: 44px; }
36
+ .square-48 { width: 48px; height: 48px; }
37
+ .square-56 { width: 56px; height: 56px; }
38
+ .square-64 { width: 64px; height: 64px; }
39
+ .square-80 { width: 80px; height: 80px; }
40
+ .square-96 { width: 96px; height: 96px; }
41
+
42
+ /* FLEX-CENTER — flex + center both axes. The other half of the chip pattern. */
43
+ .flex-center {
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ }
48
+
49
+ /* ABSOLUTE CENTERING — for an absolutely-positioned child, center on one or
50
+ * both axes. Replaces the repeated `left:50%; transform:translateX(-50%)`. */
51
+ .center-x { inset-inline-start: 50%; transform: translateX(-50%); }
52
+ .center-y { top: 50%; transform: translateY(-50%); }
53
+ .center-xy { inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); }
54
+
55
+ /* DIVIDERS — hairline separators in the border color. `.divider` is a full-width
56
+ * horizontal rule; `.divider-v` is a short vertical rule for inline groups
57
+ * (toolbars, pill search bars, breadcrumbs). Height of the vertical one tracks
58
+ * the line via --divider-size (default 1.25rem). */
59
+ .divider { height: 1px; width: 100%; background: var(--bgl-border-color); border: none; }
60
+ .divider-v { width: 1px; height: var(--divider-size, 1.25rem); background: var(--bgl-border-color); flex-shrink: 0; }
61
+
62
+ /* ABSOLUTE-FILL — position:absolute pinned to all edges. Collapses the very
63
+ * common `position:absolute; inset:0` overlay/background pattern. */
64
+ .absolute-fill { position: absolute; inset: 0; }
65
+
66
+ /* TABULAR-NUMS — fixed-width figures so numbers line up in columns and don't
67
+ * jitter when animating counters/stats. */
68
+ .tabular-nums { font-variant-numeric: tabular-nums; }
69
+
18
70
  .rounded,
19
71
  .radius,
20
72
  .radius-1 {
@@ -272,7 +324,7 @@
272
324
  }
273
325
 
274
326
  .grid-2-col {
275
- grid-template-columns: 1fr 1fr;
327
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
276
328
  }
277
329
 
278
330
  .justify-content-between {
@@ -6998,62 +7050,62 @@
6998
7050
  }
6999
7051
 
7000
7052
  .grid-wrap-1 {
7001
- grid-template-columns: repeat(1, 1fr);
7053
+ grid-template-columns: repeat(1, minmax(0, 1fr));
7002
7054
  height: max-content;
7003
7055
  }
7004
7056
 
7005
7057
  .grid-wrap-2 {
7006
- grid-template-columns: repeat(2, 1fr);
7058
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7007
7059
  height: max-content;
7008
7060
  }
7009
7061
 
7010
7062
  .grid-wrap-3 {
7011
- grid-template-columns: repeat(3, 1fr);
7063
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7012
7064
  height: max-content;
7013
7065
  }
7014
7066
 
7015
7067
  .grid-wrap-4 {
7016
- grid-template-columns: repeat(4, 1fr);
7068
+ grid-template-columns: repeat(4, minmax(0, 1fr));
7017
7069
  height: max-content;
7018
7070
  }
7019
7071
 
7020
7072
  .grid-wrap-5 {
7021
- grid-template-columns: repeat(5, 1fr);
7073
+ grid-template-columns: repeat(5, minmax(0, 1fr));
7022
7074
  height: max-content;
7023
7075
  }
7024
7076
 
7025
7077
  .grid-wrap-6 {
7026
- grid-template-columns: repeat(6, 1fr);
7078
+ grid-template-columns: repeat(6, minmax(0, 1fr));
7027
7079
  height: max-content;
7028
7080
  }
7029
7081
 
7030
7082
  .grid-wrap-7 {
7031
- grid-template-columns: repeat(7, 1fr);
7083
+ grid-template-columns: repeat(7, minmax(0, 1fr));
7032
7084
  height: max-content;
7033
7085
  }
7034
7086
 
7035
7087
  .grid-wrap-8 {
7036
- grid-template-columns: repeat(8, 1fr);
7088
+ grid-template-columns: repeat(8, minmax(0, 1fr));
7037
7089
  height: max-content;
7038
7090
  }
7039
7091
 
7040
7092
  .grid-wrap-9 {
7041
- grid-template-columns: repeat(9, 1fr);
7093
+ grid-template-columns: repeat(9, minmax(0, 1fr));
7042
7094
  height: max-content;
7043
7095
  }
7044
7096
 
7045
7097
  .grid-wrap-10 {
7046
- grid-template-columns: repeat(10, 1fr);
7098
+ grid-template-columns: repeat(10, minmax(0, 1fr));
7047
7099
  height: max-content;
7048
7100
  }
7049
7101
 
7050
7102
  .grid-wrap-11 {
7051
- grid-template-columns: repeat(11, 1fr);
7103
+ grid-template-columns: repeat(11, minmax(0, 1fr));
7052
7104
  height: max-content;
7053
7105
  }
7054
7106
 
7055
7107
  .grid-wrap-12 {
7056
- grid-template-columns: repeat(12, 1fr);
7108
+ grid-template-columns: repeat(12, minmax(0, 1fr));
7057
7109
  height: max-content;
7058
7110
  }
7059
7111
 
package/src/styles/motion.css ADDED
@@ -0,0 +1,91 @@
1
+ /* ============================================================================
2
+ * MOTION — scroll reveals + hover/entrance utilities.
3
+ *
4
+ * Pairs with the `v-reveal` directive (directives/reveal.ts). The directive
5
+ * adds `.bgl-reveal` (hidden + pre-transformed) and toggles `.bgl-reveal-in`
6
+ * when the element scrolls into view. Direction comes from [data-reveal-dir],
7
+ * stagger from --bgl-reveal-delay. Everything is opt-in and respects
8
+ * prefers-reduced-motion.
9
+ * ========================================================================== */
10
+
11
+ :root {
12
+ --bgl-reveal-distance: 24px;
13
+ --bgl-reveal-duration: 0.6s;
14
+ --bgl-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* gentle "out-expo" */
15
+ }
16
+
17
+ /* Hidden initial state — set by v-reveal on mount. We animate the entrance with
18
+ * a keyframe (not a `transition`) so it can't be clobbered when the element ALSO
19
+ * carries a `transition`-based utility like `.hover-lift` (both would otherwise
20
+ * declare `transition` and the later one wins, silently dropping the opacity
21
+ * fade — which looked "abrupt"). Keyframes are independent of `transition`. */
22
+ .bgl-reveal {
23
+ opacity: 0;
24
+ /* per-direction starting offset, consumed by the keyframes via custom prop */
25
+ --bgl-reveal-x: 0px;
26
+ --bgl-reveal-y: var(--bgl-reveal-distance);
27
+ transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0);
28
+ will-change: opacity, transform;
29
+ }
30
+
31
+ .bgl-reveal[data-reveal-dir="down"] { --bgl-reveal-y: calc(-1 * var(--bgl-reveal-distance)); }
32
+ .bgl-reveal[data-reveal-dir="left"] { --bgl-reveal-x: var(--bgl-reveal-distance); --bgl-reveal-y: 0px; }
33
+ .bgl-reveal[data-reveal-dir="right"] { --bgl-reveal-x: calc(-1 * var(--bgl-reveal-distance)); --bgl-reveal-y: 0px; }
34
+
35
+ /* Revealed: run a fade+move keyframe, then settle at the resting state (the
36
+ declared opacity/transform below) so a `transition` utility like .hover-lift
37
+ can still drive :hover transforms afterwards. NOTE: no `both`/`forwards`
38
+ fill-mode on purpose — a persisted fill would lock `transform` and defeat
39
+ hover-lift. `backwards` only holds the FROM frame during the start delay. */
40
+ .bgl-reveal-in {
41
+ opacity: 1;
42
+ transform: none;
43
+ animation: bgl-reveal-enter var(--bgl-reveal-duration) var(--bgl-reveal-ease) var(--bgl-reveal-delay, 0ms) backwards;
44
+ }
45
+
46
+ @keyframes bgl-reveal-enter {
47
+ from { opacity: 0; transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0); }
48
+ to { opacity: 1; transform: none; }
49
+ }
50
+
51
+ /* ---- Hover lift: standardize the "card floats up on hover" pattern. -------- */
52
+ .hover-lift {
53
+ transition: transform 0.2s var(--bgl-reveal-ease), box-shadow 0.2s var(--bgl-reveal-ease);
54
+ }
55
+ .hover-lift:hover {
56
+ transform: translateY(-4px);
57
+ box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
58
+ }
59
+
60
+ /* Hover grow — for thumbnails/media inside an overflow-hidden frame. */
61
+ .hover-grow { transition: transform 0.4s var(--bgl-reveal-ease); }
62
+ .hover-grow:hover { transform: scale(1.04); }
63
+
64
+ /* ---- One-shot entrance animations (no scroll trigger needed). ------------- */
65
+ @keyframes bgl-fade-in { from { opacity: 0; } to { opacity: 1; } }
66
+ @keyframes bgl-rise-in { from { opacity: 0; transform: translateY(var(--bgl-reveal-distance)); } to { opacity: 1; transform: none; } }
67
+ @keyframes bgl-pop-in { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
68
+ @keyframes bgl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
69
+
70
+ .animate-fade-in { animation: bgl-fade-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
71
+ .animate-rise-in { animation: bgl-rise-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
72
+ .animate-pop-in { animation: bgl-pop-in 0.4s var(--bgl-reveal-ease) both; }
73
+ .animate-float { animation: bgl-float 4s ease-in-out infinite; }
74
+
75
+ /* Respect user motion preferences — kill all of the above. */
76
+ @media (prefers-reduced-motion: reduce) {
77
+ .bgl-reveal,
78
+ .bgl-reveal-in,
79
+ .bgl-reveal[data-reveal-dir],
80
+ .hover-lift,
81
+ .hover-grow,
82
+ .animate-fade-in,
83
+ .animate-rise-in,
84
+ .animate-pop-in,
85
+ .animate-float {
86
+ opacity: 1 !important;
87
+ transform: none !important;
88
+ animation: none !important;
89
+ transition: none !important;
90
+ }
91
+ }
package/src/utils/index.ts CHANGED
@@ -254,7 +254,7 @@ export type { NormalizedOption } from './options'
254
254
  export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from './options'
255
255
 
256
256
  export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter'
257
- export { anyOf, parseQuery, queryFilter, range, search } from './queryFilter'
257
+ export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter'
258
258
  export type { ShowdownConverter, ShowdownOptions } from './showdown'
259
259
 
260
260
  const URL_REGEX = /^https?:\/\/|^\/\//