@bagelink/vue 1.12.67 → 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,