@bagelink/vue 1.15.59 → 1.15.61

package/src/styles/layout.css

@@ -15,6 +15,58 @@
     border-radius: 1000px;
 }
 
+/* SQUARE — equal width+height in one class. Collapses the extremely common
+ * `width:N; height:N` (often + place-items:center + radius) chip/control/avatar
+ * pattern. Pair with `.grid.place-items-center` (or `.flex-center`) + `.round`
+ * / `.radius-*` as needed. Values in px to match icon/control sizing. */
+.square-8 { width: 8px; height: 8px; }
+.square-10 { width: 10px; height: 10px; }
+.square-12 { width: 12px; height: 12px; }
+.square-16 { width: 16px; height: 16px; }
+.square-20 { width: 20px; height: 20px; }
+.square-24 { width: 24px; height: 24px; }
+.square-28 { width: 28px; height: 28px; }
+.square-30 { width: 30px; height: 30px; }
+.square-32 { width: 32px; height: 32px; }
+.square-34 { width: 34px; height: 34px; }
+.square-36 { width: 36px; height: 36px; }
+.square-38 { width: 38px; height: 38px; }
+.square-40 { width: 40px; height: 40px; }
+.square-44 { width: 44px; height: 44px; }
+.square-48 { width: 48px; height: 48px; }
+.square-56 { width: 56px; height: 56px; }
+.square-64 { width: 64px; height: 64px; }
+.square-80 { width: 80px; height: 80px; }
+.square-96 { width: 96px; height: 96px; }
+
+/* FLEX-CENTER — flex + center both axes. The other half of the chip pattern. */
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ABSOLUTE CENTERING — for an absolutely-positioned child, center on one or
+ * both axes. Replaces the repeated `left:50%; transform:translateX(-50%)`. */
+.center-x { inset-inline-start: 50%; transform: translateX(-50%); }
+.center-y { top: 50%; transform: translateY(-50%); }
+.center-xy { inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); }
+
+/* DIVIDERS — hairline separators in the border color. `.divider` is a full-width
+ * horizontal rule; `.divider-v` is a short vertical rule for inline groups
+ * (toolbars, pill search bars, breadcrumbs). Height of the vertical one tracks
+ * the line via --divider-size (default 1.25rem). */
+.divider { height: 1px; width: 100%; background: var(--bgl-border-color); border: none; }
+.divider-v { width: 1px; height: var(--divider-size, 1.25rem); background: var(--bgl-border-color); flex-shrink: 0; }
+
+/* ABSOLUTE-FILL — position:absolute pinned to all edges. Collapses the very
+ * common `position:absolute; inset:0` overlay/background pattern. */
+.absolute-fill { position: absolute; inset: 0; }
+
+/* TABULAR-NUMS — fixed-width figures so numbers line up in columns and don't
+ * jitter when animating counters/stats. */
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
 .rounded,
 .radius,
 .radius-1 {
@@ -272,7 +324,7 @@
 }
 
 .grid-2-col {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 
 .justify-content-between {
@@ -6998,62 +7050,62 @@
 }
 
 .grid-wrap-1 {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-4 {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-5 {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-6 {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-7 {
-    grid-template-columns: repeat(7, 1fr);
+    grid-template-columns: repeat(7, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-8 {
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: repeat(8, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-9 {
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-columns: repeat(9, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-10 {
-    grid-template-columns: repeat(10, 1fr);
+    grid-template-columns: repeat(10, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-11 {
-    grid-template-columns: repeat(11, 1fr);
+    grid-template-columns: repeat(11, minmax(0, 1fr));
     height: max-content;
 }
 
 .grid-wrap-12 {
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(12, minmax(0, 1fr));
     height: max-content;
 }
 

package/src/styles/motion.css

@@ -0,0 +1,91 @@
+/* ============================================================================
+ * MOTION — scroll reveals + hover/entrance utilities.
+ *
+ * Pairs with the `v-reveal` directive (directives/reveal.ts). The directive
+ * adds `.bgl-reveal` (hidden + pre-transformed) and toggles `.bgl-reveal-in`
+ * when the element scrolls into view. Direction comes from [data-reveal-dir],
+ * stagger from --bgl-reveal-delay. Everything is opt-in and respects
+ * prefers-reduced-motion.
+ * ========================================================================== */
+
+:root {
+    --bgl-reveal-distance: 24px;
+    --bgl-reveal-duration: 0.6s;
+    --bgl-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* gentle "out-expo" */
+}
+
+/* Hidden initial state — set by v-reveal on mount. We animate the entrance with
+ * a keyframe (not a `transition`) so it can't be clobbered when the element ALSO
+ * carries a `transition`-based utility like `.hover-lift` (both would otherwise
+ * declare `transition` and the later one wins, silently dropping the opacity
+ * fade — which looked "abrupt"). Keyframes are independent of `transition`. */
+.bgl-reveal {
+    opacity: 0;
+    /* per-direction starting offset, consumed by the keyframes via custom prop */
+    --bgl-reveal-x: 0px;
+    --bgl-reveal-y: var(--bgl-reveal-distance);
+    transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0);
+    will-change: opacity, transform;
+}
+
+.bgl-reveal[data-reveal-dir="down"]  { --bgl-reveal-y: calc(-1 * var(--bgl-reveal-distance)); }
+.bgl-reveal[data-reveal-dir="left"]  { --bgl-reveal-x: var(--bgl-reveal-distance); --bgl-reveal-y: 0px; }
+.bgl-reveal[data-reveal-dir="right"] { --bgl-reveal-x: calc(-1 * var(--bgl-reveal-distance)); --bgl-reveal-y: 0px; }
+
+/* Revealed: run a fade+move keyframe, then settle at the resting state (the
+   declared opacity/transform below) so a `transition` utility like .hover-lift
+   can still drive :hover transforms afterwards. NOTE: no `both`/`forwards`
+   fill-mode on purpose — a persisted fill would lock `transform` and defeat
+   hover-lift. `backwards` only holds the FROM frame during the start delay. */
+.bgl-reveal-in {
+    opacity: 1;
+    transform: none;
+    animation: bgl-reveal-enter var(--bgl-reveal-duration) var(--bgl-reveal-ease) var(--bgl-reveal-delay, 0ms) backwards;
+}
+
+@keyframes bgl-reveal-enter {
+    from { opacity: 0; transform: translate3d(var(--bgl-reveal-x), var(--bgl-reveal-y), 0); }
+    to   { opacity: 1; transform: none; }
+}
+
+/* ---- Hover lift: standardize the "card floats up on hover" pattern. -------- */
+.hover-lift {
+    transition: transform 0.2s var(--bgl-reveal-ease), box-shadow 0.2s var(--bgl-reveal-ease);
+}
+.hover-lift:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
+}
+
+/* Hover grow — for thumbnails/media inside an overflow-hidden frame. */
+.hover-grow { transition: transform 0.4s var(--bgl-reveal-ease); }
+.hover-grow:hover { transform: scale(1.04); }
+
+/* ---- One-shot entrance animations (no scroll trigger needed). ------------- */
+@keyframes bgl-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes bgl-rise-in { from { opacity: 0; transform: translateY(var(--bgl-reveal-distance)); } to { opacity: 1; transform: none; } }
+@keyframes bgl-pop-in  { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
+@keyframes bgl-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+
+.animate-fade-in { animation: bgl-fade-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
+.animate-rise-in { animation: bgl-rise-in var(--bgl-reveal-duration) var(--bgl-reveal-ease) both; }
+.animate-pop-in  { animation: bgl-pop-in 0.4s var(--bgl-reveal-ease) both; }
+.animate-float   { animation: bgl-float 4s ease-in-out infinite; }
+
+/* Respect user motion preferences — kill all of the above. */
+@media (prefers-reduced-motion: reduce) {
+    .bgl-reveal,
+    .bgl-reveal-in,
+    .bgl-reveal[data-reveal-dir],
+    .hover-lift,
+    .hover-grow,
+    .animate-fade-in,
+    .animate-rise-in,
+    .animate-pop-in,
+    .animate-float {
+        opacity: 1 !important;
+        transform: none !important;
+        animation: none !important;
+        transition: none !important;
+    }
+}

package/src/utils/index.ts

@@ -254,7 +254,7 @@ export type { NormalizedOption } from './options'
 export { getOptionIcon, getOptionLabel, getOptionValue, normalizeOption } from './options'
 
 export type { ComparisonOperator, FilterCondition, LogicalOperator, QueryConditions, QueryFilter } from './queryFilter'
-export { anyOf, parseQuery, queryFilter, range, search } from './queryFilter'
+export { anyOf, buildQuery, evaluateQuery, parseQuery, queryFilter, range, search } from './queryFilter'
 export type { ShowdownConverter, ShowdownOptions } from './showdown'
 
 const URL_REGEX = /^https?:\/\/|^\/\//