@bagelink/vue 1.12.71 → 1.12.74

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { resolveI18n } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
 
-export interface RangeInputProps {
+export interface RangeInputProps extends BagelInputShellProps {
 	modelValue: number | [number, number]
 	min?: number
 	max?: number
@@ -14,6 +15,10 @@ export interface RangeInputProps {
 	rtl?: boolean
 	multiRange?: boolean
 	formatValue?: (value: number) => string
+	/** צבע הרקע של הפס (track) */
+	trackColor?: string
+	/** צבע הפס הפעיל והעיגול — ברירת מחדל: labelActiveColor או primary */
+	activeColor?: string
 }
 
 const props = defineProps<RangeInputProps>()
@@ -72,7 +77,15 @@ const displayTo = computed(() => formatValue(validTo.value))
 </script>
 
 <template>
-	<div :dir="rtl ? 'rtl' : 'ltr'">
+	<div
+		:dir="rtl ? 'rtl' : 'ltr'"
+		:style="[
+			minWidth ? { minWidth } : {},
+			maxWidth ? { maxWidth } : {},
+			activeColor ? { '--bgl-range-thumb-color': activeColor } : {},
+			labelActiveColor ? { '--bgl-input-label-active-color': labelActiveColor } : {},
+		]"
+	>
 		<label v-if="props.label" class="label">{{ resolveI18n(props.label) }}</label>
 		<div class="range-slider relative w-100">
 			<input
@@ -101,10 +114,13 @@ const displayTo = computed(() => formatValue(validTo.value))
 				aria-label="Maximum value"
 				@input="(e) => handleInput(+(e.target as HTMLInputElement).value, false)"
 			>
-			<div class="track absolute pointer-events-none overflow-hidden round">
+			<div
+				class="track absolute pointer-events-none overflow-hidden round"
+				:style="trackColor ? { background: trackColor } : {}"
+			>
 				<div
-					class="active-range absolute h-100 pointer-events-none bg-primary"
-					:style="rangeStyle"
+					class="active-range absolute h-100 pointer-events-none"
+					:style="{ ...rangeStyle, background: activeColor || 'var(--bgl-input-label-active-color, var(--bgl-primary))' }"
 				/>
 			</div>
 			<p
@@ -190,13 +206,13 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
+	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 18%, transparent);
 	filter: brightness(90%);
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {
   outline: none;
-  box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
+  box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 18%, transparent);
 }
 
 input[type="range"]:active::-webkit-slider-thumb {

package/src/components/form/inputs/RichText/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '@bagelink/vue'
@@ -11,6 +12,8 @@ import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
+import type { BagelInputShellProps } from '../bagelInputShell'
+import { useBagelInputShell } from '../bagelInputShell'
 
 // Disable automatic inheritance of non-prop attributes
 defineOptions({
@@ -44,10 +47,13 @@ const props = defineProps<{
 	textColor?: string
 	// Font size
 	fontSize?: number | string
-}>()
+} & BagelInputShellProps>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+const hasEditorValue = computed(() => Boolean(props.modelValue?.trim()))
+
 const attrs = useAttrs()
 
 const iframe = ref<HTMLIFrameElement>()
@@ -415,20 +421,20 @@ function showInlineToolbarForSelection() {
 
 	const selection = doc.getSelection()
 	if (!selection || selection.rangeCount === 0) {
-		hideInlineToolbar()
+		closeInlineToolbar()
 		return
 	}
 
 	const range = selection.getRangeAt(0)
 	if (range.collapsed) {
-		hideInlineToolbar()
+		closeInlineToolbar()
 		return
 	}
 
 	// Get the selected text
 	const selectedText = selection.toString().trim()
 	if (!selectedText) {
-		hideInlineToolbar()
+		closeInlineToolbar()
 		return
 	}
 
@@ -461,7 +467,7 @@ function showInlineToolbarForSelection() {
 }
 
 // Function to hide inline toolbar
-function hideInlineToolbar() {
+function closeInlineToolbar() {
 	showInlineToolbar.value = false
 	inlineToolbarSelection.value = null
 }
@@ -495,7 +501,7 @@ function runInlineAction(actionName: string) {
 			if (!newRange.collapsed) {
 				; (inlineToolbarSelection.value as any)._storedRange = newRange.cloneRange()
 			} else {
-				hideInlineToolbar()
+				closeInlineToolbar()
 			}
 		}
 	}, 50)
@@ -2103,7 +2109,7 @@ onUnmounted(() => {
 function setupTableEditButtons(doc: Document) {
 	// Simple function to add edit buttons to all tables
 	function addEditButtonsToTables() {
-		const tables = doc.querySelectorAll('table:not([data-edit-button-added])') as NodeListOf<HTMLTableElement>
+		const tables = doc.querySelectorAll('table:not([data-edit-button-added])')
 
 		tables.forEach((table, index) => {
 			// Create edit button as a span element instead of button
@@ -2418,8 +2424,8 @@ function setupAutoWrapping(doc: Document) {
 			const textAfterCursor = range.startContainer.textContent?.substring(range.startOffset) || ''
 
 			// Debug logging to understand the issue
-			if (props.debug) {
-			}
+			 
+			if (props.debug) { /* reserved for future debug output */ }
 
 			// Create new paragraph with proper direction
 			const newParagraph = doc.createElement('p')
@@ -2937,7 +2943,7 @@ async function initEditor() {
 			setTimeout(() => {
 				const selection = doc.getSelection()
 				if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
-					hideInlineToolbar()
+					closeInlineToolbar()
 				}
 			}, 10)
 		})
@@ -2948,7 +2954,7 @@ async function initEditor() {
 				setTimeout(() => {
 					const selection = doc.getSelection()
 					if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
-						hideInlineToolbar()
+						closeInlineToolbar()
 					}
 				}, 10)
 			}
@@ -3190,7 +3196,10 @@ const imgTransform = computed({
 </script>
 
 <template>
-	<div class="bagel-input" v-bind="attrs">
+	<div
+		class="bagel-input" :class="[shellClass, { 'has-value': hasEditorValue }]" :style="shellStyle"
+		v-bind="attrs"
+	>
 		<label v-if="label">{{ label }}</label>
 
 		<div

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { Option } from '@bagelink/vue'
 import { Btn, Icon, resolveI18n } from '@bagelink/vue'
+import { computed } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionValue } from '../../../utils/options'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = withDefaults(
 	defineProps<{
@@ -10,12 +13,24 @@ const props = withDefaults(
 		required?: boolean
 		error?: string
 		thin?: boolean
-		outline?: boolean
 		multiselect?: boolean
-	}>(),
+	} & BagelInputShellProps>(),
 	{ multiselect: false },
 )
 
+const { shellClass, shellStyle } = useBagelInputShell(() => ({
+	frame: props.frame,
+	outline: props.outline,
+	minWidth: props.minWidth,
+	maxWidth: props.maxWidth,
+	labelColor: props.labelColor,
+	labelActiveColor: props.labelActiveColor,
+}))
+const hasValue = computed(() => {
+	const v = selected.value
+	return Array.isArray(v) ? v.length > 0 : v != null && v !== ''
+})
+
 const selected = defineModel<string | number | (string | number)[] | null>('modelValue', { default: null })
 
 function toggleOption(val: string | number) {
@@ -34,15 +49,28 @@ function isSelected(val: string | number) {
 </script>
 
 <template>
-	<div class="bagel-input SelectBtn">
+	<div
+		class="bagel-input SelectBtn" :class="[shellClass, { 'has-value': hasValue }]" :style="shellStyle"
+	>
 		<label v-if="label || required" class="pb-025">
 			{{ resolveI18n(label) }}<span v-if="required"> *</span>
 		</label>
 		<div class="flex flex-wrap gap-05">
 			<Btn
-				v-for="option in options" :key="String(getOptionValue(option))" :thin="thin" :outline="outline"
-				type="button" :class="isSelected(getOptionValue(option)!) ? 'primary color-white' : 'bg-transparent'"
-				:style="{ color: 'var(--bgl-border-color)' }" class="border px-075 radius-2"
+				v-for="option in options" :key="String(getOptionValue(option))" :thin="thin"
+				type="button"
+				:class="isSelected(getOptionValue(option)!) ? 'color-white' : 'bg-transparent'"
+				:style="isSelected(getOptionValue(option)!)
+					? {
+						backgroundColor: 'var(--bgl-input-label-active-color, var(--bgl-primary))',
+						borderColor: 'var(--bgl-input-label-active-color, var(--bgl-primary))',
+						color: 'white',
+					}
+					: {
+						color: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
+						borderColor: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
+					}"
+				class="border px-075 radius-2"
 				@click="toggleOption(getOptionValue(option)!)"
 			>
 				<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" weight="300" />

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

@@ -5,6 +5,8 @@ import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch, useI18n, res
 import { computed, onMounted, ref, watch } from 'vue'
 import { getOptionIcon, getOptionLabel, getOptionValue } from '../../../utils/options'
 import 'floating-vue/style.css'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = withDefaults(defineProps<PropTypes>(), {
 	placement: 'bottom-start',
@@ -14,12 +16,14 @@ const emit = defineEmits(['update:modelValue'])
 
 const { $t } = useI18n()
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
 const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => typeof src === 'function'
 
 type Primitive = string | number | boolean
 
-interface PropTypes {
+interface PropTypes extends BagelInputShellProps {
 	options: OptionsSource
 	placeholder?: string
 	disabled?: boolean
@@ -39,7 +43,6 @@ interface PropTypes {
 	error?: string
 	underlined?: boolean
 	size?: 'xs' | 's' | 'm' | 'l' | 'xl'
-	outline?: boolean
 	border?: boolean
 	thin?: boolean
 	round?: boolean
@@ -50,10 +53,9 @@ const triggerBtn = ref<HTMLButtonElement | undefined>()
 
 const selectedItems = ref<Option[]>([])
 
-const getLabel = (option: Option) => getOptionLabel(option)
 const getValue = (option?: Option): Primitive | undefined => getOptionValue(option) as Primitive | undefined
 
-const selectedItemCount = computed(() => selectedItems.value.length ?? 0)
+const selectedItemCount = computed(() => selectedItems.value.length)
 const searchTerm = ref<string>('')
 
 const dropdown = ref<InstanceType<typeof Dropdown> | undefined>()
@@ -77,11 +79,11 @@ const selectedLabel = computed((): string => {
 	if (selectedItemCount.value > 4) {
 		const str = selectedItems.value
 			.slice(0, 4)
-			.map(item => getLabel(item))
+			.map(item => getOptionLabel(item))
 			.join(', ')
 		return `${str}... +${selectedItemCount.value - 4}`
 	}
-	return selectedItems.value.map(item => getLabel(item)).join(', ')
+	return selectedItems.value.map(item => getOptionLabel(item)).join(', ')
 })
 
 const searchPlaceholder = computed(() => props.searchPlaceholder ?? selectedLabel.value ?? $t('select.search'))
@@ -172,7 +174,6 @@ function emitUpdate() {
 	if (props.multiselect) {
 		emit('update:modelValue', selectedItems.value.map(getValue).filter(v => v != null))
 	} else {
-		// selectedItems.value.splice(1, selectedItemCount.value - 1);
 		const [item] = selectedItems.value
 		emit('update:modelValue', getValue(item))
 	}
@@ -230,9 +231,6 @@ watch(
 			if (exists === undefined) { selectedItems.value.splice(i, 1) }
 			else { selectedItems.value.splice(i, 1, exists) }
 		})
-		// const original = JSON.stringify(props.options.map(getValue));
-		// const newSelection = JSON.stringify(selectedItems.value.map(getValue));
-		// if (original !== newSelection) emitUpdate();
 	},
 	{ deep: true, immediate: true },
 )
@@ -277,7 +275,8 @@ onMounted(() => {
 <template>
 	<Dropdown
 		ref="dropdown" v-model:shown="open" :placement="placement" class="bagel-input selectinput"
-		:class="{ 'has-error': !!error, underlined, open, 'has-value': selectedItemCount > 0 }" no-auto-focus
+		:class="[shellClass, { 'has-error': !!error, underlined, open, 'has-value': selectedItemCount > 0 }]"
+		:style="shellStyle" no-auto-focus
 		@click.stop
 	>
 		<template #trigger>
@@ -296,7 +295,7 @@ onMounted(() => {
 						@keydown.down.prevent="navigate('down')" @keydown.up.prevent="navigate('up')"
 					>
 						<Icon v-if="icon" :icon="icon" />
-						<p v-if="!hideLabel">
+						<p v-if="!hideLabel" :class="{ 'me-auto ms-05': icon }">
 							{{ selectedItemCount > 0 ? selectedLabel : (underlined ? '' : (resolveI18n(placeholder)
 								|| 'Select...')) }}
 						</p>
@@ -339,9 +338,9 @@ onMounted(() => {
 					</template>
 				<div class="flex gap-05">
 						<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" :size="1" />
-						<span class="block">
-							{{ getLabel(option) }}
-						</span>
+					<span class="block">
+						{{ getOptionLabel(option) }}
+					</span>
 				</div>
 				</div>
 				<p v-if="results.length === 0" class="selectinput-option opacity-3 pointer-events-none">
@@ -377,7 +376,6 @@ onMounted(() => {
 
 .selectinput-options.multiselect .selectinput-option {
 	grid-template-columns: 10px 1fr;
-
 }
 
 .selectinput-options {
@@ -410,7 +408,7 @@ onMounted(() => {
 }
 
 .selected {
-	color: var(--bgl-primary);
+	color: var(--bgl-input-label-active-color, var(--bgl-primary));
 	background: var(--bgl-selected);
 }
 </style>
@@ -448,10 +446,6 @@ onMounted(() => {
 .selectinput-btn.selectinput-btn--round { border-radius: 999px; }
 .selectinput-btn.selectinput-btn--thin  { height: calc(var(--input-height) * 0.75); padding: 0 0.5rem; }
 
-.selectinput .bagel-input.mb-0 input {
-	/* background: transparent !important; */
-}
-
 .selectinput-btn:disabled {
 	color: var(--input-disabled-color);
 	background-color: transparent;
@@ -464,11 +458,11 @@ onMounted(() => {
 
 .selectinput.has-error .selectinput-btn {
 	border-color: var(--bgl-red, #dc3545) !important;
-		outline: 1px solid var(--bgl-red, #dc3545) !important;
-	}
+	outline: 1px solid var(--bgl-red, #dc3545) !important;
+}
 
-	.selectinput.underlined.has-error .selectinput-btn {
-		border-color: var(--bgl-red, #dc3545) !important;
+.selectinput.underlined.has-error .selectinput-btn {
+	border-color: var(--bgl-red, #dc3545) !important;
 }
 
 /* Underlined mode styling */

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

@@ -4,6 +4,8 @@ import { Btn } from '@bagelink/vue'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import SignaturePad from 'signature_pad'
 import { computed, onMounted, ref, watch } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 export interface WaterMark {
 	text: string
@@ -33,10 +35,14 @@ const props = withDefaults(defineProps<{
 	required?: boolean
 	label?: string
 	helptext?: string
-}>(), {
+	penColor?: string
+	backgroundColor?: string
+} & BagelInputShellProps>(), {
 	clearable: true,
 })
 
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 const sigData = defineModel()
 const fileData = defineModel<File>('file')
 
@@ -108,10 +114,15 @@ function undo() {
 
 const defaultOptions = ref<SignaturePadOptions>({
 	penColor: 'rgb(0, 0, 0)',
-	backgroundColor: 'rgb(255, 255, 255)',
+	backgroundColor: 'rgba(0,0,0,0)',
 })
 
-const signatureOptions = computed(() => ({ ...defaultOptions.value, ...props.sigOption }))
+const signatureOptions = computed(() => ({
+	...defaultOptions.value,
+	...(props.penColor ? { penColor: props.penColor } : {}),
+	...(props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}),
+	...props.sigOption,
+}))
 
 watch(
 	() => props.disabled,
@@ -121,6 +132,14 @@ watch(
 	},
 )
 
+watch(signatureOptions, (opts) => {
+	if (!sig.value) { return }
+	sig.value.penColor = opts.penColor ?? 'rgb(0,0,0)'
+	if (opts.backgroundColor) {
+		sig.value.backgroundColor = opts.backgroundColor
+	}
+})
+
 function addWaterMark(data: WaterMark) {
 	if (!(Object.prototype.toString.call(data) === '[object Object]')) {
 		throw new Error(`Expected Object, got ${typeof data}.`)
@@ -216,11 +235,11 @@ defineExpose({
 
 <template>
 	<div
-		class="bgl_input signature-pad relative"
-		:class="{ 'bg-transparent': disabled }"
-		@touchmove.prevent
+		class="bagel-input bgl_input signature-pad relative"
+		:class="[shellClass, { 'has-value': !_isEmpty }]" :style="shellStyle"
+		tabindex="-1" @touchmove.prevent
 	>
-		<label v-if="label" class="label">{{ label }}</label>
+		<label v-if="label" class="label-text">{{ label }}</label>
 		<p v-if="helptext" class="helptext">{{ helptext }}</p>
 		<Btn
 			v-if="clearable && !disabled"
@@ -234,6 +253,7 @@ defineExpose({
 			ref="vCanvas"
 			class="canvas"
 			:disabled
+			:style="backgroundColor ? { background: backgroundColor } : {}"
 		/>
 		<input
 			placeholder="required"
@@ -257,22 +277,27 @@ defineExpose({
 }
 
 .bgl_input.signature-pad {
-	background: var(--input-bg);
+	background: transparent;
 	border: none;
 	border-radius: var(--input-border-radius);
 }
 
-.bgl_input.signature-pad > .label {
+.bgl_input.signature-pad .canvas {
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
+}
+
+.bgl_input.signature-pad > .label-text {
 	display: block;
-	font-size: 0.8rem;
-	padding: 0.25rem 0.5rem 0;
+	font-size: var(--label-font-size);
+	margin-bottom: 0.25rem;
 }
 
 .bgl_input.signature-pad > .helptext {
-	font-size: 0.75rem;
-	padding: 0.15rem 0.5rem 0.25rem;
-	margin: 0;
+	font-size: var(--label-font-size);
+	margin: 0 0 0.25rem 0;
 	line-height: 1.4;
+	opacity: 0.7;
 }
 
 .bgl_input.signature-pad .canvas[disabled] {

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

@@ -2,6 +2,8 @@
 import { Btn, Icon, formatString } from '@bagelink/vue'
 import { onMounted, ref } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = withDefaults(
 	defineProps<{
@@ -10,7 +12,7 @@ const props = withDefaults(
 		fieldname: string
 		bagelApp?: any
 		modelValue: any
-	}>(),
+	} & BagelInputShellProps>(),
 	{
 		description: '',
 		bagelApp: undefined,
@@ -63,6 +65,8 @@ function ended() {
 	})
 	emits('update:modelValue', listRef.value)
 }
+const { shellClass, shellStyle } = useBagelInputShell(props)
+
 onMounted(() => {
 	bagel = props.bagelApp || api
 })
@@ -73,7 +77,7 @@ onMounted(() => {
 		class="table-field-wrap"
 		:title="description"
 	>
-		<div class="bagel-input">
+		<div class="bagel-input" :class="shellClass" :style="shellStyle">
 			<label>
 				{{ fieldMeta?.label }}
 			</label>

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

@@ -4,6 +4,8 @@ import type { CountryCode } from 'libphonenumber-js'
 import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi, useI18n, resolveI18n } from '@bagelink/vue'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { computed, onMounted, ref, watch } from 'vue'
+import type { BagelInputShellProps } from './bagelInputShell'
+import { useBagelInputShell } from './bagelInputShell'
 
 const props = defineProps<{
 	id?: string
@@ -16,7 +18,9 @@ const props = defineProps<{
 	disabled?: boolean
 	underlined?: boolean
 	error?: string
-}>()
+} & BagelInputShellProps>()
+
+const { shellClass, shellStyle } = useBagelInputShell(props)
 
 const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'keydown', 'input', 'paste'])
 
@@ -230,7 +234,10 @@ onMounted(initializeCountry)
 </script>
 
 <template>
-	<div class="bagel-input text-input" :class="{ 'invalid': !isValid, 'has-error': !!error, underlined, 'has-value': hasValue }">
+	<div
+		class="bagel-input text-input" :class="[shellClass, { 'invalid': !isValid, 'has-error': !!error, underlined, 'has-value': hasValue }]"
+		:style="shellStyle"
+	>
 		<label>
 			<span v-if="label || (underlined && placeholder)" class="label-text">{{ resolveI18n(label) || resolveI18n(placeholder) }}<span v-if="required"> *</span></span>
 			<div
@@ -302,14 +309,49 @@ onMounted(initializeCountry)
 	box-shadow: inset 0 0 10px #00000012;
 }
 
+/* In frame mode, remove the solid background from .tel-input wrapper */
+.bagel-input.frame .tel-input {
+	background: transparent !important;
+}
+
+/* frame variant: outline on the tel-input wrapper */
+.bagel-input.frame .tel-input {
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
+	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.bagel-input.frame .tel-input:focus-within {
+	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;
+}
+
+/* bgl-outline variant: outline on the tel-input wrapper */
+.bagel-input.bgl-outline .tel-input {
+	outline: 1.5px solid var(--border-color);
+	outline-offset: -1px;
+}
+
+/* Prevent the global frame/outline rules from hitting the inner inputs */
+.bagel-input.frame .tel-input input,
+.bagel-input.bgl-outline .tel-input input,
+.bagel-input.frame .tel-input input:focus,
+.bagel-input.frame .tel-input input:focus-visible {
+	outline: none !important;
+	box-shadow: none !important;
+	background: transparent;
+}
+
 .tel-input input {
 	background: transparent;
 	text-align: left;
 	flex: 1;
 }
 
+.tel-input input:focus,
 .tel-input input:focus-visible {
-	box-shadow: none;
+	outline: none !important;
+	box-shadow: none !important;
 }
 
 .country-code-display {
@@ -342,6 +384,12 @@ onMounted(initializeCountry)
 	margin-left: 4px;
 }
 
+.national-number-input:focus,
+.national-number-input:focus-visible {
+	outline: none !important;
+	box-shadow: none !important;
+}
+
 .country-changed {
 	animation: highlight-country 1.5s ease-in-out;
 }
@@ -391,7 +439,7 @@ onMounted(initializeCountry)
 
 /* When focused in underlined mode, make label primary color */
 .bagel-input.underlined:focus-within .label-text {
-	color: var(--bgl-primary);
+	color: var(--bgl-input-label-active-color, var(--bgl-primary));
 	opacity: 1;
 }