@bagelink/vue 1.12.71 → 1.12.74

package/src/styles/inputs.css

@@ -41,8 +41,22 @@ select {
     color: var(--placeholder-color);
 }
 
-.bagel-input label {
-    color: var(--label-color);
+.bagel-input {
+    --bgl-input-label-color: var(--label-color);
+    --bgl-input-label-active-color: var(--bgl-primary);
+}
+
+.bagel-input label,
+.bagel-input .label-text,
+.bagel-input > .label {
+    color: var(--bgl-input-label-color);
+}
+
+.bagel-input:focus-within label,
+.bagel-input:focus-within .label-text,
+.bagel-input.open label,
+.bagel-input.open .label-text {
+    color: var(--bgl-input-label-active-color);
 }
 
 .bagel-input input,
@@ -65,9 +79,26 @@ select {
     width: 100%;
 }
 
+.bagel-input input[type="radio"],
+.bagel-input input[type="checkbox"] {
+    min-width: unset;
+    width: auto;
+    height: auto;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+}
+
+/* ─── RadioGroup: frame/outline — transparent item background ────────────── */
+
+.bagel-input.frame .active-list-item,
+.bagel-input.bgl-outline .active-list-item {
+    background-color: transparent !important;
+}
+
 /* ─── Variant: frame ──────────────────────────────────────────────────────── */
 
-.bagel-input.frame input,
+.bagel-input.frame input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
 .bagel-input.frame textarea,
 .bagel-input.frame select,
 .custom-select.frame .input {
@@ -79,11 +110,37 @@ select {
         box-shadow 0.2s ease;
 }
 
-.bagel-input.frame input:focus,
+.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 {
-    outline-color: var(--bgl-primary) !important;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgl-primary) 12%, transparent) !important;
+    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;
+}
+
+/* tel-input and colorInputPick: focus handled by wrapper — suppress inner focus ring */
+.bagel-input.frame .tel-input input:focus,
+.bagel-input.frame .colorInputPick:focus,
+.bagel-input.frame .colorInputPick:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+/* ─── Variant: underlined — transparent background ───────────────────────── */
+
+.bagel-input.underlined input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
+.bagel-input.underlined textarea,
+.bagel-input.underlined select {
+    background: transparent;
+}
+
+/* ─── Variant: bgl-outline ────────────────────────────────────────────────── */
+
+.bagel-input.bgl-outline input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
+.bagel-input.bgl-outline textarea,
+.bagel-input.bgl-outline select,
+.custom-select.bgl-outline .input {
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
 }
 
 .bagel-input input::-webkit-input-placeholder,
@@ -158,10 +215,6 @@ select {
     width: fit-content;
 }
 
-.bagel-input:focus-within label {
-    color: var(--bgl-primary);
-}
-
 .bagel-input select.no-edit,
 .bagel-input input.no-edit,
 .bagel-input textarea.no-edit,
@@ -172,9 +225,74 @@ select {
 }
 
 .bagel-input label.active {
-    color: var(--bgl-primary);
+    color: var(--bgl-input-label-active-color);
+}
+
+/* ─── Variant: frame (outline) — select, OTP, signature, etc. ─────────────── */
+
+.bagel-input.frame .selectinput-btn {
+    background: transparent;
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
+    transition:
+        outline-color 0.2s ease,
+        box-shadow 0.2s ease;
 }
 
+.bagel-input.frame:focus-within .selectinput-btn,
+.bagel-input.frame.open .selectinput-btn {
+    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;
+}
+
+/* digit-box frame/outline styles live in OTP.vue */
+
+.bagel-input.frame.bgl_input.signature-pad .canvas,
+.bagel-input.frame .signature-pad-canvas-wrap .canvas {
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
+    border-radius: var(--input-border-radius);
+    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bagel-input.frame:focus-within.bgl_input.signature-pad .canvas,
+.bagel-input.frame:focus-within .signature-pad-canvas-wrap .canvas {
+    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);
+}
+
+.bagel-input.bgl-outline.bgl_input.signature-pad .canvas {
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
+    border-radius: var(--input-border-radius);
+}
+
+/* colorInputPickWrap variants handled in ColorInput.vue */
+
+.bagel-input.frame .code-editor-grandpa {
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
+    border-radius: var(--input-border-radius);
+}
+
+.bagel-input.frame:focus-within .code-editor-grandpa {
+    outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
+}
+
+.bagel-input.frame .rich-text-editor {
+    outline: 1.5px solid var(--border-color);
+    outline-offset: -1px;
+    border: none;
+    border-radius: var(--input-border-radius);
+    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bagel-input.frame:focus-within .rich-text-editor {
+    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);
+}
+
+
 .inline-80 {
     display: inline-block;
     width: 80%;
@@ -237,11 +355,11 @@ select {
 .bagel-input textarea:focus-visible,
 .bagel-input button:focus-visible,
 .bgl_btn:focus-visible {
-    outline-color: var(--bgl-primary-tint);
+    outline-color: var(--bgl-input-label-active-color, var(--bgl-primary-tint));
     box-shadow: inset 0 0 10px #00000012;
 }
 
-.bagel-input input:focus,
+.bagel-input input:not([type="radio"]):not([type="checkbox"]):focus,
 .bagel-input select:focus,
 .bagel-input textarea:focus {
     outline-color: rgba(0, 0, 0, 0.05);
@@ -249,6 +367,7 @@ select {
     outline-color: var(--input-bg);
 }
 
+
 .bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
     outline-color: rgba(0, 0, 0, 0.05);
@@ -278,8 +397,8 @@ select {
 .bagel-input.light-input textarea:focus-visible {
     box-shadow:
         0 2px 8px 0 rgba(0, 0, 0, 0.15),
-        0 0 0 3px color-mix(in srgb, var(--bgl-primary) 15%, transparent) !important;
-    outline-color: var(--bgl-primary) !important;
+        0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 15%, transparent) !important;
+    outline-color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
 }
 
 .bagel-input input[type='number']::-webkit-inner-spin-button,

package/src/styles/text.css

@@ -1484,23 +1484,23 @@
     text-wrap: pretty;
 }
 
-.white-space {
+.white-space, .white-space-nowrap, .whitespace, .whitespace-nowrap {
     white-space: nowrap;
 }
 
-.white-space-break-spaces {
+.white-space-break-spaces, .whitespace-break-spaces {
     white-space: break-spaces;
 }
 
-.white-space-pre {
+.white-space-pre, .whitespace-pre {
     white-space: pre;
 }
 
-.white-space-pre-line {
+.white-space-pre-line, .whitespace-pre-line {
     white-space: pre-line;
 }
 
-.white-space-pre-wrap {
+.white-space-pre-wrap, .whitespace-pre-wrap {
     white-space: pre-wrap;
 }
 
@@ -3025,23 +3025,23 @@
         text-transform: capitalize;
     }
 
-    .m_white-space {
+    .m_white-space, .m_white-space-nowrap, .m_whitespace, .m_whitespace-nowrap {
         white-space: nowrap;
     }
 
-    .m_white-space-break-spaces {
+    .m_white-space-break-spaces, .m_whitespace-break-spaces {
         white-space: break-spaces;
     }
 
-    .m_white-space-pre {
+    .m_white-space-pre, .m_whitespace-pre {
         white-space: pre;
     }
 
-    .m_white-space-pre-line {
+    .m_white-space-pre-line, .m_whitespace-pre-line {
         white-space: pre-line;
     }
 
-    .m_white-space-pre-wrap {
+    .m_white-space-pre-wrap, .m_whitespace-pre-wrap {
         white-space: pre-wrap;
     }
 }

package/src/types/BagelForm.ts

@@ -8,6 +8,10 @@ import type { VNode } from 'vue'
 type ArrayAttrs = any
 interface Option { label: string, value: any }
 
+// BagelInputShellProps is exported from components/form/inputs/bagelInputShell.ts
+// Do not re-export here to avoid duplicate export in src/index.ts
+import type { BagelInputShellProps } from '../components/form/inputs/bagelInputShell'
+
 export type AttributeValue
 	= | string
 		| number
@@ -280,7 +284,7 @@ export interface ValidateInputBaseT {
 	getFormData?: () => any
 }
 
-export interface UploadInputProps {
+export interface UploadInputProps extends BagelInputShellProps {
 	id?: string
 	name?: string
 	label?: string
@@ -298,7 +302,13 @@ export interface UploadInputProps {
 	disabled?: boolean
 	baseURL?: string
 	placeholder?: string
+	/** Alias for dropzone placeholder text (same as `placeholder` when theme is dropzone). */
+	dropPlaceholder?: string
 	noFilePlaceholder?: string
 	btnPlaceholder?: string
 	error?: string
+	showIcon?: boolean
+	icon?: string
+	iconSize?: number | string
+	iconMobileSize?: number | string
 }

package/src/utils/BagelFormUtils.ts

@@ -387,6 +387,7 @@ export function uploadField<
 		$el: 'upload',
 		id,
 		label,
+		placeholder: options?.placeholder ?? options?.dropPlaceholder,
 		class: options?.class,
 		required: options?.required,
 		helptext: options?.helptext,