@bagelink/vue 1.15.102 → 1.15.106

package/package.json

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

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

@@ -51,12 +51,12 @@ watch(
 				}"
 			>
 				<input
-					:id="id" v-model="inputVal" class="border" type="color" :placeholder="resolveI18n(placeholder) || resolveI18n(label)"
+					:id="id" v-model="inputVal" type="color" :placeholder="resolveI18n(placeholder) || resolveI18n(label)"
 					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required"
 					v-bind="nativeInputAttrs"
 				>
 				<input
-					v-if="!small" v-model="inputVal" class="flex-grow-1 border colorInputPick" type="text"
+					v-if="!small" v-model="inputVal" class="flex-grow-1 colorInputPick" type="text"
 					:placeholder="$t('color.placeholder')"
 				>
 				<Btn
@@ -78,6 +78,17 @@ min-width: 50px !important;
 outline: none !important;
 }
 
+/* Frame/outline belongs to the wrap only — suppress the global variant rules
+   (e.g. `.bagel-input.bgl-outline input`) that would border the inner field. */
+.bagel-input .colorInputPick,
+.bagel-input.frame .colorInputPick,
+.bagel-input.bgl-outline .colorInputPick,
+.bagel-input.underlined .colorInputPick {
+border: none !important;
+outline: none !important;
+box-shadow: none !important;
+}
+
 .colorInputPick:focus,
 .colorInputPick:focus-visible {
 outline: none !important;
@@ -88,7 +99,6 @@ box-shadow: none !important;
 box-shadow: inset 0 0 10px #00000021;
 }
 
-/* ── frame: transparent bg, outline that highlights on focus ── */
 .bagel-input.frame .colorInputPickWrap {
 background: transparent !important;
 outline: 1.5px solid var(--bgl-border-color);
@@ -100,20 +110,16 @@ outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent);
 }
 
-/* ── bgl-outline: border only ── */
 .bagel-input.bgl-outline .colorInputPickWrap {
 outline: 1.5px solid var(--bgl-border-color);
 outline-offset: -1px;
 }
 
-/* ── underlined: suppress global border-bottom on inner inputs ── */
 .bagel-input.underlined .colorInputPickWrap input {
-border-bottom: none !important;
 border-radius: 0 !important;
 padding-inline: 0.25rem !important;
 }
 
-/* ── underlined: bottom border only on the wrap itself ── */
 .bagel-input.underlined .colorInputPickWrap {
 background: transparent !important;
 border-radius: 0 !important;
@@ -123,7 +129,6 @@ transition: border-color 0.25s ease;
 position: relative;
 }
 
-/* animated fill line — matches the global underlined ::after pattern */
 .bagel-input.underlined .colorInputPickWrap::after {
 content: '';
 position: absolute;

package/src/composables/useTheme.ts

@@ -45,6 +45,14 @@ const isDark = ref(false)
  */
 const allowDark = ref(false)
 
+/**
+ * Whether this project lets the user manually pick a theme. When false (the
+ * default), the app always follows the OS ("system") and ignores any saved
+ * manual choice — so it updates live with the OS and never gets stuck on a
+ * stale dark/light value. When true, a saved manual choice is honored.
+ */
+const manualSelection = ref(false)
+
 const isBrowser = typeof window !== 'undefined'
 
 function getSystemPrefersDark() {
@@ -104,14 +112,38 @@ function toggleTheme() {
 /**
  * Configure theme behavior for the current app. Call once at startup.
  *
- * @param options.allowDark  Enable dark mode for this project (default: false).
- *                           When false, dark / system-dark falls back to light.
+ * @param options.allowDark         Enable dark mode for this project (default: false).
+ *                                  When false, dark / system-dark falls back to light.
+ * @param options.manualSelection   Whether this project exposes a UI for the user to
+ *                                  manually pick a theme (default: false).
+ *                                  - false → always follow the OS ("system"); any
+ *                                    previously-saved manual choice is ignored, so the
+ *                                    app updates live when the OS color scheme changes.
+ *                                  - true  → honor the user's saved manual choice, and
+ *                                    fall back to "system" when they haven't picked one.
  */
-export function configureTheme(options: { allowDark?: boolean } = {}) {
+export function configureTheme(options: { allowDark?: boolean, manualSelection?: boolean } = {}) {
 	if (options.allowDark !== undefined) {
 		allowDark.value = options.allowDark
 	}
-	// Re-apply with the new policy so a previously-saved dark choice is corrected.
+	if (options.manualSelection !== undefined) {
+		manualSelection.value = options.manualSelection
+	}
+
+	// Register the matchMedia listener + colorMode watcher now, so OS color-scheme
+	// changes are picked up live — even if no component ever calls useTheme()
+	// (e.g. projects with no manual theme switcher). Without this, "system" mode
+	// wouldn't react until something mounted, forcing a refresh.
+	initTheme()
+
+	// When the project has no manual switcher, force "system" — even if initTheme()
+	// already ran earlier (via useTheme) and restored a stale saved value before
+	// this config was known.
+	if (!manualSelection.value) {
+		colorMode.value = 'system'
+	}
+
+	// Re-apply with the new policy so a previously-saved choice is corrected.
 	applyTheme(colorMode.value)
 }
 
@@ -152,9 +184,15 @@ function initTheme() {
 	if (initialized || !isBrowser) { return }
 	initialized = true
 
-	const saved = window.localStorage.getItem(STORAGE_KEY)
-	if (themeOptions.value.some(t => t.value === saved)) {
-		colorMode.value = saved!
+	// Only restore a saved manual choice when the project allows manual selection.
+	// Otherwise always follow the OS, so the app can't get stuck on a stale value.
+	if (manualSelection.value) {
+		const saved = window.localStorage.getItem(STORAGE_KEY)
+		if (themeOptions.value.some(t => t.value === saved)) {
+			colorMode.value = saved!
+		}
+	} else {
+		colorMode.value = 'system'
 	}
 
 	applyTheme(colorMode.value)
@@ -166,9 +204,11 @@ function initTheme() {
 		}
 	})
 
-	// Persist + apply on mode changes
+	// Persist + apply on mode changes (persist only matters for manual selection)
 	watch(colorMode, (newMode) => {
-		localStorage.setItem(STORAGE_KEY, newMode)
+		if (manualSelection.value) {
+			localStorage.setItem(STORAGE_KEY, newMode)
+		}
 		applyTheme(newMode)
 	})
 }

package/src/dialog/Dialog.vue

@@ -117,10 +117,10 @@ defineExpose({ close })
 <template>
 	<dialog
 		ref="dialogRef" :class="[positionClass, { 'is-closing': isClosing }]"
-		:style="{ '--dialog-width': widthStyle }" class="border-none shadow-30 p-0 testMe1" @click="onBackdropClick"
+		:style="{ '--dialog-width': widthStyle }" class="border-none shadow-30 p-0 testMe1 dialog-no-focus-outline" @click="onBackdropClick"
 		@cancel="onCancel" @animationend="onAnimationEnd"
 	>
-		<div class="grid grid-dialog max-height-100-2" @click.stop>
+		<div class="grid grid-dialog max-height-100-2" tabindex="-1" autofocus @click.stop>
 			<!-- Bottom-sheet grip handle -->
 			<div v-if="showGrip" class="dialog-grip" aria-hidden="true" />
 			<!-- Header -->
@@ -199,6 +199,15 @@ max-height: calc(100vh - 2rem);
 margin-top: 0.125rem;
 }
 
+/* The dialog body gets the initial focus (via autofocus, so the close button
+   isn't auto-focused). It shouldn't show a focus ring itself. */
+.dialog-no-focus-outline:focus,
+.dialog-no-focus-outline:focus-visible,
+.dialog-no-focus-outline .grid-dialog:focus,
+.dialog-no-focus-outline .grid-dialog:focus-visible {
+outline: none;
+}
+
 .overlay-btn {
 opacity: 0;
 animation: fade-in 0.3s ease-out 0.1s forwards;

package/src/styles/dark.css

@@ -1,35 +1,9 @@
-/* ============================================================================
- * Dark Mode Theme  —  .bgl-dark-mode
- * ----------------------------------------------------------------------------
- * Activated by useTheme() which toggles the `.bgl-dark-mode` class on <html>.
- *
- * ARCHITECTURE (semantic, NOT inversion):
- *   - We do NOT swap --bgl-black / --bgl-white. They keep their real meaning
- *     (black = dark, white = light) so colored buttons (.pair-*) that use
- *     `color: var(--bgl-white)` stay correct (light text on a colored fill).
- *   - Instead we override only the SEMANTIC tokens (surfaces, text, borders)
- *     with explicit dark values. Components that consume these tokens
- *     (--bgl-bg, --bgl-box-bg, --bgl-text-color, …) become dark automatically.
- *
- * Single source of truth: the dark palette below (--bgl-dm-* raw values), which
- * the semantic tokens reference. If you ever need explicit opt-in dark classes
- * for components that use physical colors, build them on these same tokens.
- * ============================================================================ */
-/* .bgl-dark-mode {
-  filter: invert(1);
-}
+/* Dark Mode Theme — .bgl-dark-mode (toggled on <html> by useTheme()).
+   Semantic, not inversion: override only the semantic tokens (surfaces, text,
+   borders) with dark values; --bgl-black/--bgl-white keep their real meaning. */
 
-.bgl-dark-mode img,
-.bgl-dark-mode video,
-.bgl-dark-mode svg,
-.bgl-dark-mode iframe {
-  filter: invert(1);
-} */
-
-/* `:root.bgl-dark-mode` (the class lives on <html>) raises specificity to
-   (0,2,0) so these tokens win over any project that redefines colors in its
-   own `:root {}` (e.g. udi sets --bgl-blue: #7ad3f7). The bare .bgl-dark-mode
-   is kept as a fallback in case the class is applied to a non-root element. */
+/* `:root.bgl-dark-mode` raises specificity to (0,2,0) so these tokens win over a
+   project's own `:root {}`; bare `.bgl-dark-mode` is a non-root fallback. */
 :root.bgl-dark-mode,
 .bgl-dark-mode {
   /* ---- Dark palette (raw values) ---------------------------------------- */