@bagelink/vue 1.15.102 → 1.15.104

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.102",
+  "version": "1.15.104",
   "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/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) ---------------------------------------- */