@bagelink/vue 1.15.96 → 1.15.100

package/package.json

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

package/src/components/Swiper.vue

@@ -74,6 +74,10 @@ const props = withDefaults(
 		// Pagination
 		pagination?: boolean | PaginationOptions
 
+		// Pill-style pagination: the active bullet stretches into a pill
+		// (animated width) instead of staying a circle. Pairs with `pagination`.
+		pillDots?: boolean
+
 		// Autoplay
 		autoplay?: boolean | AutoplayOptions
 
@@ -105,6 +109,7 @@ const props = withDefaults(
 		autoHeight: false,
 		navigation: undefined,
 		pagination: undefined,
+		pillDots: false,
 		autoplay: undefined,
 		coverflowEffect: undefined,
 		breakpoints: undefined,
@@ -416,7 +421,7 @@ defineExpose({
 </script>
 
 <template>
-	<div class="swi-wrap">
+	<div class="swi-wrap" :class="{ 'pill-dots': pillDots }">
 		<Swiper
 			v-bind="swiperVueProps" class="swiper" @swiper="onSwiper" @slide-change="updateNavigationState"
 			@reach-beginning="updateNavigationState" @reach-end="updateNavigationState"
@@ -459,11 +464,6 @@ defineExpose({
 width: 100%;
 }
 
-:root {
---swiper-navigation-color: white;
---swiper-pagination-color: white;
-}
-
 /* Pagination: keep Swiper's own horizontal centering (left:50% + translateX),
    just give the wrapper a sane bottom offset and consistent bullet sizing so
    consumers don't need :deep() overrides to fix position. Override the bullet
@@ -471,15 +471,28 @@ width: 100%;
 .swi-wrap .swiper-pagination-bullets {
 bottom: 8px;
 }
+.artSwiper .swiper { padding-bottom: 3rem; }
+
 .swi-wrap .swiper-pagination-bullet {
-width: var(--swiper-pagination-bullet-width, 7px);
-height: var(--swiper-pagination-bullet-height, 7px);
-background: var(--swiper-pagination-bullet-inactive-color, #fff);
+width: var(--swiper-pagination-bullet-width, 10px);
+height: var(--swiper-pagination-bullet-height, 10px);
+background: var(--swiper-pagination-bullet-inactive-color, var(--bgl-gray));
 opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.6);
 }
 .swi-wrap .swiper-pagination-bullet-active {
 opacity: 1;
-background: var(--swiper-pagination-color, #fff);
+background: var(--swiper-pagination-color, var(--bgl-primary));
+}
+
+/* Pill dots: the active bullet stretches into a pill (animated width). The
+   width it grows to is configurable via --swiper-pagination-bullet-active-width
+   (defaults to ~2.6x the bullet width). */
+.swi-wrap.pill-dots .swiper-pagination-bullet {
+border-radius: 50px;
+transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, background 0.3s ease-in-out;
+}
+.swi-wrap.pill-dots .swiper-pagination-bullet-active {
+width: var(--swiper-pagination-bullet-active-width, 26px);
 }
 
 .swi-ctrl {

package/src/components/form/inputs/TextInput.vue

@@ -239,8 +239,9 @@ align-items: center;
 gap: 0.5rem;
 }
 
-.bagel-input input:disabled {
-background: #f5f5f5;
+.bagel-input input:disabled,
+.bagel-input textarea:disabled {
+background: var(--input-disabled-bg);
 }
 
 .textInputIconWrap .bgl_icon-font {

package/src/components/layout/AppSidebar.vue

@@ -17,6 +17,13 @@ interface Props {
 	navLinks: LinkWithAction[]
 	footerLinks?: LinkWithAction[]
 	logo?: string
+	/** Optional dedicated logo for dark mode. When set, it replaces `logo`
+	 *  while `.bgl-dark-mode` is active. */
+	logoDark?: string
+	/** When no `logoDark` is provided, apply a filter that turns the logo white
+	 *  in dark mode. Set to `false` to keep the logo's original colors (e.g. a
+	 *  full-color logo that already reads on dark). Defaults to `true`. */
+	logoWhitenInDark?: boolean
 	logoAlt?: string
 	card?: boolean
 	bgColor?: string
@@ -39,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 	activeColor: 'var(--bgl-primary)',
 	logoAlt: 'Logo',
 	logoHeight: '2rem',
+	logoWhitenInDark: true,
 	name: 'App Name',
 	footerLinks: () => [],
 })
@@ -160,8 +168,18 @@ const sidebarStyles = computed(() => {
 				:class="{ 'mx-1': isVisuallyOpen, 'mx-05': !isVisuallyOpen
 				}"
 			>
+				<!-- Light/base logo. Hidden in dark mode only when a dedicated dark
+				     logo exists; otherwise it stays and (optionally) gets whitened. -->
 				<img
-					v-if="props.logo" :src="props.logo" :alt="props.logoAlt" class="contain"
+					v-if="props.logo" :src="props.logo" :alt="props.logoAlt"
+					class="contain sidebar-logo sidebar-logo-light"
+					:class="{ 'sidebar-logo-whiten': props.logoWhitenInDark && !props.logoDark }"
+					:style="{ height: props.logoHeight }"
+				>
+				<!-- Dedicated dark-mode logo (shown only in dark mode). -->
+				<img
+					v-if="props.logoDark" :src="props.logoDark" :alt="props.logoAlt"
+					class="contain sidebar-logo sidebar-logo-dark"
 					:style="{ height: props.logoHeight }"
 				>
 				<slot name="brand" v-bind="{ isOpen: isVisuallyOpen }">
@@ -220,6 +238,29 @@ outline: 1px solid var(--bgl-border-color);
 outline-offset: -1px;
 }
 
+/* ---- Logo theming (CSS-only, no JS) ---------------------------------------
+   The dark logo is hidden by default (light mode) and the light logo shown.
+   In dark mode we flip them. When there's no dedicated dark logo, the light
+   logo carries `.sidebar-logo-whiten` and gets turned white instead of hidden. */
+.sidebar-logo-dark {
+display: none;
+}
+
+.bgl-dark-mode .sidebar-logo-light:not(.sidebar-logo-whiten) {
+display: none;
+}
+
+.bgl-dark-mode .sidebar-logo-dark {
+display: block;
+}
+
+/* Whiten the light logo in dark mode when no dedicated dark logo is supplied.
+   `brightness(0)` flattens it to solid black (regardless of original colors),
+   then `invert(1)` flips that to solid white. Opt out via `logoWhitenInDark`. */
+.bgl-dark-mode .sidebar-logo-whiten {
+filter: brightness(0) invert(1);
+}
+
 .app-sidebar {
 transition: width 0.4s ease;
 --bgl-input-font-size: 0.875rem;

package/src/styles/dark.css

@@ -76,6 +76,11 @@
   --bgl-box-bg: var(--bgl-dm-surface);
   --bgl-popup-bg: var(--bgl-dm-surface);
   --bgl-input-bg: var(--bgl-dm-input);
+  /* disabled inputs: a flat, slightly grayed surface so the field clearly reads
+     as inert (washed-out, not a usable recessed field) without becoming a bright
+     patch. Mixing in a touch of gray lifts it off the deep input bg and gives the
+     "greyed-out / not active" look. */
+  --input-disabled-bg: color-mix(in oklab, var(--bgl-gray) 14%, var(--bgl-dm-surface));
   --bgl-selected: var(--bgl-dm-surface-2);
   --bgl-skeleton-bg: var(--bgl-dm-surface-2);
   --bgl-skeleton-pulse: var(--bgl-dm-surface);
@@ -99,7 +104,8 @@
 	 * secondary labels, flat pills) and as faint fills/borders. On a dark
 	 * surface translucent black is invisible, so flip them to translucent
 	 * LIGHT. One remap fixes every `var(--bgl-black-tint)` usage at once. */
-  --bgl-black-tint: rgba(219, 220, 220, 0.5);    /* muted light text */
+  --bgl-black-tint: rgba(219, 220, 220, 0.5);
+  /* muted light text */
   --bgl-gray-tint: rgba(219, 220, 220, 0.16);
   --bgl-gray-tint-dark: rgba(219, 220, 220, 0.32);
 
@@ -206,6 +212,10 @@
   filter: invert(0.8);
 }
 
+.bgl-dark-mode .logoLight {
+  filter: invert(1);
+}
+
 /* Text selection */
 .bgl-dark-mode ::selection {
   color: var(--bgl-dm-text);
@@ -245,6 +255,7 @@
   color: var(--bgl-dm-text);
   border-color: var(--bgl-dm-border);
 }
+
 /* Hover/active on the dark secondary button: lift one step instead of the
    default lighten-filter which would wash the light original out. */
 .bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover,
@@ -326,9 +337,11 @@
   background: var(--bgl-bg);
   color: var(--bgl-text-color);
 }
+
 .bgl-dark-mode #bgl-app-sidebar .cardWrapSide {
   background-color: var(--bgl-box-bg) !important;
 }
+
 /* Nav buttons get their bg injected inline from props.bgColor; if a project
    still passes a physical color (e.g. "white"), force non-active buttons back
    to the card surface so they don't stay bright in dark mode. The active one
@@ -371,4 +384,23 @@
    come only from .code-editor-grandpa, not from the generic input ring. */
 .bgl-dark-mode .bagel-input .code-input {
   box-shadow: none;
+}
+
+/* Disabled inputs read as inert: greyed-out (washed) fill + muted text so it's
+   visually clear the field is not active. The --input-disabled-bg fill is set in
+   the dark palette above. */
+.bgl-dark-mode .bagel-input input:disabled,
+.bgl-dark-mode .bagel-input textarea:disabled,
+.bgl-dark-mode .bagel-input select:disabled {
+  color: var(--bgl-dm-text-muted);
+  -webkit-text-fill-color: var(--bgl-dm-text-muted);
+  cursor: not-allowed;
+}
+
+.bgl-dark-mode .darkmodeHide {
+  display: none !important;
+}
+
+.bgl-dark-mode .darkmodeShow {
+  display: initial !important;
 }

package/src/styles/theme.css

@@ -50,6 +50,7 @@
     --bgl-label-color: #00000080;
     --bgl-input-bg: #f5f8fa;
     --bgl-input-color: #000000;
+    --input-disabled-bg: #f5f5f5;
     --bgl-dropdown-color: var(--bgl-black);
     --bgl-box-bg: var(--bgl-white);
     --bgl-popup-bg: var(--bgl-white);