@bagelink/vue 1.14.13 → 1.15.0

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

@@ -1,7 +1,7 @@
 <!-- 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'
+import { CodeEditor, copyText, Btn, Dialog, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '@bagelink/vue'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs } from 'vue'
 import CheckInput from '../CheckInput.vue'
 import NumberInput from '../NumberInput.vue'
@@ -70,7 +70,7 @@ const currentInputColor = computed(() => {
 
 	if (typeof document !== 'undefined') {
 		const computedStyle = getComputedStyle(document.documentElement)
-		const color = computedStyle.getPropertyValue('--input-color').trim()
+		const color = computedStyle.getPropertyValue('--bgl-input-color').trim()
 		return color || '#000'
 	}
 	return '#000'
@@ -2693,7 +2693,7 @@ async function initEditor() {
 		const editorStylesContent = `
 			${fontFaceRules}
 			:root {
-				--input-color: ${currentInputColor.value || '#000'};
+				--bgl-input-color: ${currentInputColor.value || '#000'};
 			}
 			/* Scrollbar styles */
 			::-webkit-scrollbar {
@@ -3131,7 +3131,7 @@ function updateIframeColors() {
 
 	const css = `
 		:root {
-			--input-color: ${currentInputColor.value || '#000'};
+			--bgl-input-color: ${currentInputColor.value || '#000'};
 			--richtext-font-size: ${fontSize};
 		}
 		body {
@@ -3414,7 +3414,7 @@ const imgTransform = computed({
 		</div>
 	</div>
 	<!-- Link Modal -->
-	<Modal v-model:visible="showLinkModal" title="Add Link" width="400">
+	<Dialog :open="showLinkModal" title="Add Link" width="s" @update:open="showLinkModal = $event">
 		<div class="flex gap-05 align-items-end">
 			<TextInput
 				v-model="linkForm.url" label="URL" type="url" placeholder="https://example.com"
@@ -3430,7 +3430,7 @@ const imgTransform = computed({
 			<Btn value="Cancel" flat thin @click="showLinkModal = false" />
 			<Btn value="Add Link" :disabled="!isValidUrl(linkForm.url)" @click="submitLink" />
 		</template>
-	</Modal>
+	</Dialog>
 
 	<!-- Tooltip -->
 	<div v-if="showTooltip" class="editor-tooltip" :style="{ left: `${tooltipData.x}px`, top: `${tooltipData.y}px` }">
@@ -3438,9 +3438,9 @@ const imgTransform = computed({
 	</div>
 
 	<!-- Image Modal -->
-	<Modal
-		v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
-		width="500"
+	<Dialog
+		:open="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
+		width="m" @update:open="showImageModal = $event"
 	>
 		<UploadInput v-model="imgTransform" label="Image" type="image" @keydown.enter="submitImage" />
 		<TextInput
@@ -3476,12 +3476,12 @@ const imgTransform = computed({
 				/>
 			</div>
 		</template>
-	</Modal>
+	</Dialog>
 
 	<!-- Embed Modal -->
-	<Modal
-		v-model:visible="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'"
-		width="500"
+	<Dialog
+		:open="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'"
+		width="m" @update:open="showEmbedModal = $event"
 	>
 		<TextInput
 			v-model="embedForm.src" label="Embed URL or Code" type="url"
@@ -3505,11 +3505,11 @@ const imgTransform = computed({
 				/>
 			</div>
 		</template>
-	</Modal>
+	</Dialog>
 	<!-- Video Modal -->
-	<Modal
-		v-model:visible="showVideoModal" :title="pendingVideoData?.existingVideo ? 'Edit Video' : 'Insert Video'"
-		width="500"
+	<Dialog
+		:open="showVideoModal" :title="pendingVideoData?.existingVideo ? 'Edit Video' : 'Insert Video'"
+		width="m" @update:open="showVideoModal = $event"
 	>
 		<div class="grid gap-0">
 			<TextInput
@@ -3586,12 +3586,12 @@ const imgTransform = computed({
 				/>
 			</div>
 		</template>
-	</Modal>
+	</Dialog>
 
 	<!-- Table Editor Modal -->
-	<Modal
-		v-model:visible="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
-		width="700"
+	<Dialog
+		:open="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
+		width="l" @update:open="showTableEditor = $event"
 	>
 		<template #default>
 			<div class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 table-editor testMe1">
@@ -3610,7 +3610,7 @@ const imgTransform = computed({
 					<label class="label">Cell Text Alignment</label>
 					<div
 						class="flex gap-025 mt-025 radius-1 p-05 w-fit"
-						style="height: var(--input-height); background: var(--input-bg);"
+						style="height: var(--bgl-input-height); background: var(--bgl-input-bg);"
 					>
 						<Btn
 							:class="{ activeBtn: tableForm.alignment === 'left' }" flat thin icon="format_align_left"
@@ -3632,7 +3632,7 @@ const imgTransform = computed({
 					<label class="label">Text Direction</label>
 					<div
 						class="flex gap-025 mt-025 radius-1 p-025 w-fit"
-						style="height: var(--input-height); background: var(--input-bg);"
+						style="height: var(--bgl-input-height); background: var(--bgl-input-bg);"
 					>
 						<Btn
 							:class="{ activeBtn: tableForm.direction === 'ltr' }" flat thin value="LTR"
@@ -3737,28 +3737,28 @@ const imgTransform = computed({
 				@click="submitTable"
 			/>
 		</template>
-	</Modal>
+	</Dialog>
 </template>
 
 <style>
 .table-editor .colorInputPickWrap {
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 }
 
 .rich-text-editor--basic .content-area {
-	background: var(--input-bg) !important;
+	background: var(--bgl-input-bg) !important;
 	border: none;
 	/* padding: 0 0.7rem; */
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
+	border-radius: var(--bgl-input-border-radius);
+	color: var(--bgl-input-color);
+	min-width: calc(var(--bgl-input-height) * 3);
 	width: 100%;
 }
 
 .rich-text-editor--basic .content-area:hover {
 	outline-color: rgba(0, 0, 0, 0.05);
 	box-shadow: inset 0 0 8px #00000018;
-	outline-color: var(--input-bg);
+	outline-color: var(--bgl-input-bg);
 }
 
 .content-area p,
@@ -3781,8 +3781,8 @@ const imgTransform = computed({
 }
 
 .rich-text-editor {
-	background: var(--input-bg);
-	border: 1px solid var(--border-color);
+	background: var(--bgl-input-bg);
+	border: 1px solid var(--bgl-border-color);
 	transition: all 0.3s ease;
 }
 
@@ -3869,7 +3869,7 @@ const imgTransform = computed({
 
 .inline-toolbar-content {
 	background: var(--bgl-box-bg, white);
-	border: 1px solid var(--border-color, #dddddd);
+	border: 1px solid var(--bgl-border-color, #dddddd);
 	border-radius: 8px;
 	padding: 0.25rem;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -3896,7 +3896,7 @@ const imgTransform = computed({
 }
 
 .inline-toolbar-content .separator {
-	color: var(--border-color, #dddddd);
+	color: var(--bgl-border-color, #dddddd);
 	margin: 0 0.25rem;
 	opacity: 0.5;
 }
@@ -3908,14 +3908,14 @@ const imgTransform = computed({
 
 .context-menu-content {
 	background: white;
-	border: 1px solid var(--border-color, #dddddd);
-	border-radius: var(--btn-border-radius) !important;
+	border: 1px solid var(--bgl-border-color, #dddddd);
+	border-radius: var(--bgl-btn-border-radius) !important;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	padding: 0;
 	min-width: 140px;
 	max-width: 180px;
 	overflow: hidden;
-	--input-font-size: 12px;
+	--bgl-input-font-size: 12px;
 }
 
 .menu-header {
@@ -3924,7 +3924,7 @@ const imgTransform = computed({
 	align-items: center;
 	padding: 8px 12px;
 	background-color: var(--bg-light, #f8f9fa);
-	border-bottom: 1px solid var(--border-color, #dddddd);
+	border-bottom: 1px solid var(--bgl-border-color, #dddddd);
 	font-size: 12px;
 	font-weight: 500;
 	color: var(--text-secondary, #666);
@@ -3969,7 +3969,7 @@ const imgTransform = computed({
 
 .context-menu-separator {
 	height: 1px;
-	background-color: var(--border-color, #dddddd);
+	background-color: var(--bgl-border-color, #dddddd);
 	margin: 4px 0;
 }
 

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,57 +1,6 @@
-import type { ModalApi } from '../../../../../plugins/useModal'
 import type { EditorState } from '../richTextTypes'
-import { bagelFormUtils as frm } from '../../../../../utils'
-
-export function insertImage(modal: ModalApi, state: EditorState) {
-	const { range, doc } = state
-	if (!range || !doc) { return }
-
-	modal.showModalForm<{
-		src: string
-		alt: string
-		width: number
-		height: number
-		figcaption: boolean
-	}>({
-		title: 'Upload Image',
-		schema: [
-			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
-			{ id: 'alt', $el: 'text', label: 'Alt Text' },
-			frm.frmRow(
-				frm.numField('width', 'Width', { min: 1 }),
-				frm.numField('height', 'Height', { min: 1 }),
-			),
-			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
-		],
-		onSubmit: (data: { [key: string]: any }) => {
-			if (data.src) {
-				const img = doc.createElement('img')
-				Object.assign(img, {
-					src: data.src,
-					alt: data.alt || '',
-					width: data.width || undefined,
-					height: data.height || undefined
-				})
-
-				const node = data.figcaption
-					? (() => {
-						const figcaption = doc.createElement('figcaption')
-						figcaption.textContent = data.alt
-						const figure = doc.createElement('figure')
-						figure.append(img, figcaption)
-						return figure
-					})()
-					: img
-
-				range.collapse(false)
-				range.insertNode(node)
-				state.content = doc.body.innerHTML
-			}
-		}
-	})
-}
 
-export function insertLink(modal: ModalApi, state: EditorState) {
+export function insertLink(_openLinkModal: unknown, state: EditorState) {
 	const { doc } = state
 	if (!doc) {
 		console.log('No doc found')
@@ -163,43 +112,3 @@ function selectWordAtCursor(doc: Document, range: Range): boolean {
 
 	return false
 }
-
-export interface InsertImbedModalData {
-	src: string
-	width: number
-	height: number
-	allowfullscreen: boolean
-}
-
-export function insertEmbed(modal: ModalApi, state: EditorState) {
-	const { range, doc } = state
-	if (!range || !doc) { return }
-
-	modal.showModalForm<InsertImbedModalData>({
-		title: 'Embed iframe',
-		schema: [
-			{ id: 'src', $el: 'text', label: 'Source URL' },
-			frm.frmRow(
-				frm.numField('width', 'Width', { min: 1 }),
-				frm.numField('height', 'Height', { min: 1 }),
-			),
-			{ id: 'allowfullscreen', $el: 'check', label: 'Allow Fullscreen' },
-		],
-		onSubmit: (data: InsertImbedModalData) => {
-			if (data.src) {
-				const iframe = doc.createElement('iframe')
-				Object.assign(iframe, {
-					src: data.src,
-					width: data.width || 560,
-					height: data.height || 315,
-					allowfullscreen: data.allowfullscreen || false,
-					frameborder: '0'
-				})
-
-				range.collapse(false)
-				range.insertNode(iframe)
-				state.content = doc.body.innerHTML
-			}
-		}
-	})
-}

package/src/components/form/inputs/RichText/utils/table.ts

@@ -14,7 +14,7 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 		const th = state.doc.createElement('th')
 		th.innerHTML = `Header ${j + 1}`
 		th.style.padding = '8px'
-		th.style.border = '1px solid var(--border-color, #ddd)'
+		th.style.border = '1px solid var(--bgl-border-color, #ddd)'
 		th.style.backgroundColor = 'var(--bgl-gray-light, #f4f4f4)'
 		headerRow.appendChild(th)
 	}
@@ -28,7 +28,7 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 			const cell = row.insertCell()
 			cell.innerHTML = ' '
 			cell.style.padding = '8px'
-			cell.style.border = '1px solid var(--border-color, #ddd)'
+			cell.style.border = '1px solid var(--bgl-border-color, #ddd)'
 		}
 	}
 	table.appendChild(tbody)
@@ -85,7 +85,7 @@ export function splitCell(range: Range, doc: Document) {
 
 	const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
 		const newCell = doc.createElement('td')
-		newCell.style.border = '1px solid var(--border-color)'
+		newCell.style.border = '1px solid var(--bgl-border-color)'
 		newCell.style.padding = '8px'
 		newCell.innerHTML = ' '
 		return newCell
@@ -171,7 +171,7 @@ export function insertColumn(position: 'before' | 'after', range: Range) {
 	for (let i = 0; i < rows.length; i++) {
 		const newCell = rows[i].insertCell(position === 'after' ? columnIndex + 1 : columnIndex)
 		newCell.innerHTML = '&nbsp;'
-		newCell.style.border = '1px solid var(--border-color)'
+		newCell.style.border = '1px solid var(--bgl-border-color)'
 		newCell.style.padding = '8px'
 	}
 

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

@@ -85,6 +85,6 @@ function isSelected(val: string | number) {
 
 <style scoped>
 .SelectBtn {
-	--btn-height: 30px;
+	--bgl-btn-height: 30px;
 }
 </style>

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

@@ -366,7 +366,7 @@ onMounted(() => {
 	grid-template-columns: 1fr;
 	justify-content: space-between;
 	width: 100%;
-	font-size: var(--input-font-size);
+	font-size: var(--bgl-input-font-size);
 	margin-block: 0.15rem;
 }
 
@@ -415,22 +415,22 @@ onMounted(() => {
 
 <style>
 .bagel-input label {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 }
 
 .selectinput-btn {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	height: var(--input-height);
-	border-radius: var(--input-border-radius);
+	height: var(--bgl-input-height);
+	border-radius: var(--bgl-input-border-radius);
 	border: none;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	padding: 0.7rem;
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	width: 100%;
 	font-family: inherit;
-	font-size: var(--input-font-size);
+	font-size: var(--bgl-input-font-size);
 }
 
 .selectinput-btn p {
@@ -439,12 +439,12 @@ onMounted(() => {
 	text-overflow: ellipsis;
 }
 
-.selectinput-btn.selectinput-btn--xs { height: calc(var(--input-height) * 0.6); padding: 0 0.4rem; font-size: 0.75em; }
-.selectinput-btn.selectinput-btn--s  { height: calc(var(--input-height) * 0.75); padding: 0 0.5rem; font-size: 0.875em; }
-.selectinput-btn.selectinput-btn--l  { height: calc(var(--input-height) * 1.2); padding: 0 1rem; font-size: 1.1em; }
-.selectinput-btn.selectinput-btn--xl { height: calc(var(--input-height) * 1.5); padding: 0 1.25rem; font-size: 1.2em; }
+.selectinput-btn.selectinput-btn--xs { height: calc(var(--bgl-input-height) * 0.6); padding: 0 0.4rem; font-size: 0.75em; }
+.selectinput-btn.selectinput-btn--s  { height: calc(var(--bgl-input-height) * 0.75); padding: 0 0.5rem; font-size: 0.875em; }
+.selectinput-btn.selectinput-btn--l  { height: calc(var(--bgl-input-height) * 1.2); padding: 0 1rem; font-size: 1.1em; }
+.selectinput-btn.selectinput-btn--xl { height: calc(var(--bgl-input-height) * 1.5); padding: 0 1.25rem; font-size: 1.2em; }
 .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-btn.selectinput-btn--thin  { height: calc(var(--bgl-input-height) * 0.75); padding: 0 0.5rem; }
 
 .selectinput-btn:disabled {
 	color: var(--input-disabled-color);
@@ -457,12 +457,12 @@ onMounted(() => {
 }
 
 .selectinput.has-error .selectinput-btn {
-	border-color: var(--bgl-red, #dc3545) !important;
-	outline: 1px solid var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
+	outline: 1px solid var(--bgl-red) !important;
 }
 
 .selectinput.underlined.has-error .selectinput-btn {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 
 /* Underlined mode styling */
@@ -476,7 +476,7 @@ onMounted(() => {
 	background: transparent !important;
 	border-radius: 0 !important;
 	border: none !important;
-	border-bottom: 1.5px solid var(--border-color) !important;
+	border-bottom: 1.5px solid var(--bgl-border-color) !important;
 	padding-inline: 0.25rem !important;
 }
 

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

@@ -279,22 +279,22 @@ defineExpose({
 .bgl_input.signature-pad {
 	background: transparent;
 	border: none;
-	border-radius: var(--input-border-radius);
+	border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_input.signature-pad .canvas {
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
+	background: var(--bgl-input-bg);
+	border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_input.signature-pad > .label-text {
 	display: block;
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 	margin-bottom: 0.25rem;
 }
 
 .bgl_input.signature-pad > .helptext {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 	margin: 0 0 0.25rem 0;
 	line-height: 1.4;
 	opacity: 0.7;
@@ -303,6 +303,6 @@ defineExpose({
 .bgl_input.signature-pad .canvas[disabled] {
 	background: var(--input-disabled-bg);
 	border: 1px solid var(--bgl-gray);
-	border-radius: var(--input-border-radius);
+	border-radius: var(--bgl-input-border-radius);
 }
 </style>

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

@@ -161,8 +161,8 @@ onMounted(() => {
 }
 
 .table-cell {
-	border-inline-end: 1px solid var(--border-color);
-	border-bottom: 1px solid var(--border-color);
+	border-inline-end: 1px solid var(--bgl-border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .table-row {
@@ -204,11 +204,11 @@ onMounted(() => {
 }
 
 .header-col {
-	min-width: calc(var(--input-height) * 3);
+	min-width: calc(var(--bgl-input-height) * 3);
 	font-size: 13px;
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	padding: 10px 0;
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 }
 
 .table-cell,
@@ -253,7 +253,7 @@ onMounted(() => {
 	inset-inline-end: 0;
 	height: 100%;
 	margin-top: -1px;
-	background: var(--border-color);
+	background: var(--bgl-border-color);
 }
 
 .table-action>.bgl_icon-font {
@@ -300,7 +300,7 @@ onMounted(() => {
 .table-row .bagel-input input:focus-visible,
 .table-row .bagel-input textarea:focus-visible,
 .table-row .bagel-input .input:focus-visible {
-	background: var(--border-color);
+	background: var(--bgl-border-color);
 }
 
 .ghost {

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

@@ -293,12 +293,12 @@ onMounted(initializeCountry)
 .tel-input {
 	direction: ltr;
 	text-align: left;
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 	border: none;
 	padding-inline-start: 0.7rem;
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
+	border-radius: var(--bgl-input-border-radius);
+	color: var(--bgl-input-color);
+	min-width: calc(var(--bgl-input-height) * 3);
 	width: 100%;
 	display: flex;
 	align-items: center;
@@ -316,7 +316,7 @@ onMounted(initializeCountry)
 
 /* frame variant: outline on the tel-input wrapper */
 .bagel-input.frame .tel-input {
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -328,7 +328,7 @@ onMounted(initializeCountry)
 
 /* bgl-outline variant: outline on the tel-input wrapper */
 .bagel-input.bgl-outline .tel-input {
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 }
 
@@ -360,13 +360,13 @@ onMounted(initializeCountry)
 }
 
 .dial-code {
-	font-size: var(--input-font-size);
-	color: var(--input-color);
+	font-size: var(--bgl-input-font-size);
+	color: var(--bgl-input-color);
 	opacity: 0.6;
 }
 
 .tel-country {
-	font-size: var(--input-font-size);
+	font-size: var(--bgl-input-font-size);
 	max-width: 200px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -399,10 +399,10 @@ onMounted(initializeCountry)
 }
 
 .bagel-input.has-error .tel-input {
-	border: 1px solid var(--bgl-red, #dc3545) !important;
+	border: 1px solid var(--bgl-red) !important;
 }
 .bagel-input.has-error .tel-input {
-	--border-color: var(--bgl-red, #dc3545) !important;
+	--bgl-border-color: var(--bgl-red) !important;
 }
 
 @keyframes highlight-country {
@@ -449,7 +449,7 @@ onMounted(initializeCountry)
 	background: transparent !important;
 	border-radius: 0 !important;
 	border: none !important;
-	border-bottom: 1.5px solid var(--border-color) !important;
+	border-bottom: 1.5px solid var(--bgl-border-color) !important;
 	padding-inline: 0.25rem !important;
 }
 

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

@@ -193,7 +193,7 @@ onMounted(async () => {
 }
 
 .bagel-input label {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 }
 
 /* multiline textarea: reset gradient, use full border */
@@ -207,7 +207,7 @@ onMounted(async () => {
 <style scoped>
 .bagel-input textarea {
 	min-height: unset;
-	font-size: var(--input-font-size);
+	font-size: var(--bgl-input-font-size);
 }
 
 .bagel-input.text-input textarea {
@@ -241,29 +241,29 @@ onMounted(async () => {
 }
 
 .textInputIconWrap .bgl_icon-font {
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	position: absolute;
-	inset-inline-end: calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 + 0.1rem);
+	inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
 
 .textInputIconWrap input,
 .textInputIconWrap textarea {
-	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
+	padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	position: absolute;
-	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2);
+	inset-inline-start: calc(var(--bgl-input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--bgl-input-height) / 2);
 	line-height: 0;
 }
 
 .txtInputIconStart input,
 .txtInputIconStart textarea {
-	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
+	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .bagel-input.small textarea {
@@ -272,6 +272,6 @@ onMounted(async () => {
 
 .bagel-input.has-error input,
 .bagel-input.has-error textarea {
-	border-color: var(--bgl-red, #dc3545) !important;
+	border-color: var(--bgl-red) !important;
 }
 </style>