@bagelink/vue 1.15.88 → 1.15.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.88",
+  "version": "1.15.92",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Card.vue

@@ -129,6 +129,8 @@ padding: var(--bgl-card-pad);
 /* When padding is stripped via the p-0 utility, the header supplies its own. */
 .bgl_card.p-0 { --bgl-card-pad: 0rem; }
 .bgl_card.p-0 .card_header { padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0; }
+/* Likewise the label hangs off the card edge on a p-0 card, so give it its own. */
+.bgl_card.p-0 .card_label { padding-inline: 1rem; padding-top: 0.75rem; }
 
 .bgl_card.BagelTable {
 height: 100%;

package/src/components/ListItem.vue

@@ -99,7 +99,7 @@ const bind = computed(() => {
 <template>
 	<div
 		v-bind="rootAttrs"
-		class="flex space-between list-item-row"
+		class="flex space-between list-item-row bg"
 		:class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
 	>
@@ -177,13 +177,14 @@ gap: 0.5rem;
 --bgl-list-item-end-inset: 1rem;
 }
 .list-item-fullrow .list-item-end {
-position: absolute;
+/* position: absolute; */
 inset-inline-end: var(--bgl-list-item-end-inset);
-top: 50%;
-transform: translateY(-50%);
+/* top: 50%; */
+/* transform: translateY(-50%); */
 z-index: 1;
 /* non-interactive meta lets clicks fall through to the row button… */
 pointer-events: none;
+padding-inline-end: 1rem;
 }
 /* …interactive trailing controls stay clickable on top of the row button. */
 .list-item-fullrow .list-item-end :where(button, a, input, select, label, [role="button"], [tabindex]) {

package/src/components/charts/Funnel.vue

@@ -306,8 +306,8 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 					v-for="(s, i) in segments" :key="i" class="bgl-funnel__tick"
 					:style="horizontal ? { flex: '1 1 0' } : { height: `${bandHeight}px` }"
 				>
-					<span class="bgl-funnel__name ellipsis-1" :title="s.label">{{ s.label }}</span>
-					<span class="bgl-funnel__val">{{ s.display }}</span>
+					<span class="bgl-funnel__name ellipsis-1 txt14" :title="s.label">{{ s.label }}</span>
+					<span class="bgl-funnel__val txt13">{{ s.display }}</span>
 				</div>
 			</div>
 		</div>
@@ -354,7 +354,7 @@ const tooltipStyle = computed(() => ({ left: `${tipX.value}px`, top: `${tipY.val
 .bgl-funnel--vertical .bgl-funnel__svg { flex: 1 1 auto; width: auto; min-width: 0; }
 .bgl-funnel--vertical .bgl-funnel__axis { flex: 0 0 auto; display: flex; flex-direction: column; }
 .bgl-funnel--vertical .bgl-funnel__tick {
-	display: flex; flex-direction: column; justify-content: center; line-height: 1.15; overflow: hidden; max-width: 12rem;
+	display: flex; flex-direction: column; justify-content: center; line-height: 1.3; max-width: 12rem;
 }
 
 /* Horizontal flow: silhouette on top, labels below each stage */

package/src/styles/colors.css

@@ -742,6 +742,29 @@
     color: var(--bgl-bg) !important;
 }
 
+.bg-box {
+    background: var(--bgl-box-bg) !important;
+    --alpha-color: var(--bgl-box-bg);
+}
+
+.color-box {
+    color: var(--bgl-box-bg) !important;
+}
+
+.bg-input-box input,
+.bg-input-box textarea,
+.bg-input-box .selectinput-btn {
+    background: var(--bgl-box-bg) !important;
+}
+
+.border-box {
+    border-color: var(--bgl-box-bg) !important;
+}
+
+.color-input-box input {
+    color: var(--bgl-box-bg) !important;
+}
+
 .bg-popup {
     background: var(--bgl-popup-bg) !important;
     --alpha-color: var(--bgl-popup-bg);

package/src/styles/layout.css

@@ -19,25 +19,100 @@
  * `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; }
+.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 {
@@ -48,24 +123,52 @@
 
 /* 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%); }
+.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; }
+.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; }
+.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; }
+.tabular-nums {
+    font-variant-numeric: tabular-nums;
+}
 
 .rounded,
 .radius,
@@ -1256,6 +1359,101 @@
     min-width: 0 !important;
 }
 
+.w-5p,
+.w5p {
+    width: 5%;
+}
+
+.w-10p,
+.w10p {
+    width: 10%;
+}
+
+.w-15p,
+.w15p {
+    width: 15%;
+}
+
+.w-20p,
+.w20p {
+    width: 20%;
+}
+
+.w-25p,
+.w25p {
+    width: 25%;
+}
+
+.w-30p,
+.w30p {
+    width: 30%;
+}
+
+.w-35p,
+.w35p {
+    width: 35%;
+}
+
+.w-40p,
+.w40p {
+    width: 40%;
+}
+
+.w-45p,
+.w45p {
+    width: 45%;
+}
+
+.w-50p,
+.w50p {
+    width: 50%;
+}
+
+.w-55p,
+.w55p {
+    width: 55%;
+}
+
+.w-60p,
+.w60p {
+    width: 60%;
+}
+
+.w-65p,
+.w65p {
+    width: 65%;
+}
+
+.w-70p,
+.w70p {
+    width: 70%;
+}
+
+.w-75p,
+.w75p {
+    width: 75%;
+}
+
+.w-80p,
+.w80p {
+    width: 80%;
+}
+
+.w-85p,
+.w85p {
+    width: 85%;
+}
+
+.w-90p,
+.w90p {
+    width: 90%;
+}
+
+.w-95p,
+.w95p {
+    width: 95%;
+}
+
 .w-100,
 .w-100p,
 .w100p {
@@ -6838,6 +7036,46 @@
     grid-template-rows: 1fr;
 }
 
+.grid-template-columns-1 {
+    grid-template-columns: 1fr;
+}
+
+.grid-template-columns-2 {
+    grid-template-columns: 2fr;
+}
+
+.grid-template-columns-3 {
+    grid-template-columns: 3fr;
+}
+
+.grid-template-columns-4 {
+    grid-template-columns: 4fr;
+}
+
+.grid-template-columns-5 {
+    grid-template-columns: 5fr;
+}
+
+.grid-template-columns-6 {
+    grid-template-columns: 6fr;
+}
+
+.grid-template-columns-7 {
+    grid-template-columns: 7fr;
+}
+
+.grid-template-columns-8 {
+    grid-template-columns: 8fr;
+}
+
+.grid-template-columns-9 {
+    grid-template-columns: 9fr;
+}
+
+.grid-template-columns-10 {
+    grid-template-columns: 10fr;
+}
+
 .grid-wrap-50,
 .grid-wrap-50-fit {
     grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));

package/src/styles/mobilLayout.css

@@ -449,6 +449,100 @@
         min-width: 0 !important;
     }
 
+    .m_w-5p,
+    .m_w5p {
+        width: 5%;
+    }
+
+    .m_w-10p,
+    .m_w10p {
+        width: 10%;
+    }
+
+    .m_w-15p,
+    .m_w15p {
+        width: 15%;
+    }
+
+    .m_w-20p,
+    .m_w20p {
+        width: 20%;
+    }
+
+    .m_w-25p,
+    .m_w25p {
+        width: 25%;
+    }
+
+    .m_w-30p,
+    .m_w30p {
+        width: 30%;
+    }
+
+    .m_w-35p,
+    .m_w35p {
+        width: 35%;
+    }
+
+    .m_w-40p,
+    .m_w40p {
+        width: 40%;
+    }
+
+    .m_w-45p,
+    .m_w45p {
+        width: 45%;
+    }
+
+    .m_w-50p,
+    .m_w50p {
+        width: 50%;
+    }
+
+    .m_w-55p,
+    .m_w55p {
+        width: 55%;
+    }
+
+    .m_w-60p,
+    .m_w60p {
+        width: 60%;
+    }
+
+    .m_w-65p,
+    .m_w65p {
+        width: 65%;
+    }
+
+    .m_w-70p,
+    .m_w70p {
+        width: 70%;
+    }
+
+    .m_w-75p,
+    .m_w75p {
+        width: 75%;
+    }
+
+    .m_w-80p,
+    .m_w80p {
+        width: 80%;
+    }
+
+    .m_w-85p,
+    .m_w85p {
+        width: 85%;
+    }
+
+    .m_w-90p,
+    .m_w90p {
+        width: 90%;
+    }
+
+    .m_w-95p,
+    .m_w95p {
+        width: 95%;
+    }
 
     .m_w-100,
     .m_w-100p,
@@ -6898,6 +6992,45 @@
         overflow-y: hidden;
     }
 
+    .m_grid-template-columns-1 {
+        grid-template-columns: 1fr !important;
+    }
+
+    .m_grid-template-columns-2 {
+        grid-template-columns: 2fr !important;
+    }
+
+    .m_grid-template-columns-3 {
+        grid-template-columns: 3fr !important;
+    }
+
+    .m_grid-template-columns-4 {
+        grid-template-columns: 4fr !important;
+    }
+
+    .m_grid-template-columns-5 {
+        grid-template-columns: 5fr !important;
+    }
+
+    .m_grid-template-columns-6 {
+        grid-template-columns: 6fr !important;
+    }
+
+    .m_grid-template-columns-7 {
+        grid-template-columns: 7fr !important;
+    }
+
+    .m_grid-template-columns-8 {
+        grid-template-columns: 8fr !important;
+    }
+
+    .m_grid-template-columns-9 {
+        grid-template-columns: 9fr !important;
+    }
+
+    .m_grid-template-columns-10 {
+        grid-template-columns: 10fr !important;
+    }
 
 
     .m_grid-wrap-50,