@bagelink/vue 1.15.285 → 1.15.287

package/package.json

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

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

@@ -26,6 +26,8 @@ export interface TextInputProps extends ValidateInputBaseT, BagelInputShellProps
 	defaultValue?: string | number
 	shrink?: boolean
 	underlined?: boolean
+	/** Disables visual focus styles while preserving focus behavior. */
+	flat?: boolean
 	disabled?: boolean
 	type?: string
 	nativeInputAttrs?: { [key: string]: any }
@@ -165,6 +167,7 @@ onMounted(async () => {
 				shrink,
 				code,
 				underlined,
+				flat,
 				'textInputIconWrap': icon,
 				'txtInputIconStart': iconStart,
 				'multiline-field': autoheight || inputRows >= 2,
@@ -294,7 +297,7 @@ transform: translateY(50%);
 /* In a textarea, align icons with the first line instead of the field's bottom. */
 .bagel-input.multiline-field:not(.underlined).textInputIconWrap .bgl_icon-font,
 .bagel-input.multiline-field:not(.underlined).txtInputIconStart .iconStart {
-top: calc(0.7rem + var(--bgl-input-font-size) / 2);
+top: calc(0.9rem + var(--bgl-input-font-size) / 2);
 bottom: auto;
 transform: translateY(-50%);
 }

package/src/styles/input-variants.css

@@ -33,7 +33,7 @@
 }
 
 /* float up: focused (text inputs) or open (select) */
-.bagel-input.underlined:focus-within .label-text,
+.bagel-input.underlined:not(.flat):focus-within .label-text,
 .bagel-input.underlined.open .label-text {
 	top: -0.65rem;
 	font-size: 0.65rem;
@@ -72,7 +72,7 @@
 }
 
 /* focused: color the label */
-.bagel-input.underlined:focus-within .label-text,
+.bagel-input.underlined:not(.flat):focus-within .label-text,
 .bagel-input.underlined.open .label-text {
 	color: var(--bgl-input-label-active-color);
 	opacity: 1;
@@ -110,7 +110,7 @@
 	pointer-events: none;
 }
 
-.bagel-input.underlined:focus-within > label:not(:has(textarea))::after,
+.bagel-input.underlined:not(.flat):focus-within > label:not(:has(textarea))::after,
 .bagel-input.underlined.open > label:not(:has(textarea))::after {
 	width: 100%;
 }
@@ -126,7 +126,7 @@
 	transition: border-color 0.25s ease !important;
 }
 
-.bagel-input.underlined textarea:focus {
+.bagel-input.underlined:not(.flat) textarea:focus {
 	outline: none !important;
 	box-shadow: none !important;
 	border-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
@@ -139,7 +139,7 @@
 }
 
 /* label floated: moves to top padding area, stays inside border */
-.bagel-input.underlined:focus-within label:has(textarea) .label-text {
+.bagel-input.underlined:not(.flat):focus-within label:has(textarea) .label-text {
 	top: 0.45rem;
 	font-size: 0.65rem;
 	color: var(--bgl-input-label-active-color);
@@ -155,7 +155,7 @@
 	opacity: 1;
 }
 
-.bagel-input.underlined:focus-within
+.bagel-input.underlined:not(.flat):focus-within
 	label:has(textarea:not(:placeholder-shown))
 	.label-text {
 	top: 0.45rem;

package/src/styles/inputs.css

@@ -52,8 +52,8 @@ select {
     color: var(--bgl-input-label-color);
 }
 
-.bagel-input:focus-within label,
-.bagel-input:focus-within .label-text,
+.bagel-input:not(.flat):focus-within label,
+.bagel-input:not(.flat):focus-within .label-text,
 .bagel-input.open label,
 .bagel-input.open .label-text {
     color: var(--bgl-input-label-active-color);
@@ -140,9 +140,9 @@ select {
         box-shadow 0.2s ease;
 }
 
-.bagel-input.frame input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not(.colorInputPick):focus,
-.bagel-input.frame textarea:focus,
-.bagel-input.frame select:focus {
+.bagel-input.frame:not(.flat) input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not(.colorInputPick):focus,
+.bagel-input.frame:not(.flat) textarea:focus,
+.bagel-input.frame:not(.flat) select:focus {
     outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 12%, transparent) !important;
 }
@@ -367,18 +367,18 @@ select {
     text-align: right;
 } */
 
-.input.active .bagel-input input:focus-visible,
-.bagel-input select:focus-visible,
-.bagel-input textarea:focus-visible,
+.input.active .bagel-input:not(.flat) input:focus-visible,
+.bagel-input:not(.flat) select:focus-visible,
+.bagel-input:not(.flat) textarea:focus-visible,
 .bagel-input button:focus-visible,
 .bgl_btn:focus-visible {
     outline-color: var(--bgl-input-label-active-color, var(--bgl-primary-tint));
     box-shadow: inset 0 0 10px #00000012;
 }
 
-.bagel-input input:not([type="radio"]):not([type="checkbox"]):focus,
-.bagel-input select:focus,
-.bagel-input textarea:focus {
+.bagel-input:not(.flat) input:not([type="radio"]):not([type="checkbox"]):focus,
+.bagel-input:not(.flat) select:focus,
+.bagel-input:not(.flat) textarea:focus {
     outline-color: rgba(0, 0, 0, 0.05);
     box-shadow: inset 0 0 8px #00000018;
     outline-color: var(--bgl-input-bg);
@@ -423,9 +423,9 @@ select {
 }
 
 .input.active.light-input,
-.bagel-input.light-input input:focus-visible,
-.bagel-input.light-input select:focus-visible,
-.bagel-input.light-input textarea:focus-visible,
+.bagel-input.light-input:not(.flat) input:focus-visible,
+.bagel-input.light-input:not(.flat) select:focus-visible,
+.bagel-input.light-input:not(.flat) textarea:focus-visible,
 .bagel-input.num-input.light-input .input-icon-wrap:focus-within {
     box-shadow:
         0 2px 8px 0 rgba(0, 0, 0, 0.15),