@bagelink/vue 1.4.155 → 1.4.161

package/dist/types/BtnOptions.d.ts

@@ -13,4 +13,7 @@ export interface BtnOptions {
     value?: string;
     border?: boolean;
 }
+export type UnitSize = 'px' | 'rem' | 'vh' | 'vw';
+export type SizeType = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+export type SizeUnit = `${number}` | number | `${number}${UnitSize}`;
 //# sourceMappingURL=BtnOptions.d.ts.map

package/dist/types/BtnOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,CAAA;AAE5C,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB"}
+{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,CAAA;AAE5C,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;AACjD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACzE,MAAM,MAAM,QAAQ,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,QAAQ,EAAE,CAAA"}

package/dist/utils/sizeParsing.d.ts

@@ -0,0 +1,3 @@
+import { UnitSize } from '../types';
+export declare function standardSize(value: number | string | undefined, unit?: UnitSize): string;
+//# sourceMappingURL=sizeParsing.d.ts.map

package/dist/utils/sizeParsing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizeParsing.d.ts","sourceRoot":"","sources":["../../src/utils/sizeParsing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGlD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,IAAI,GAAE,QAAe,UAsBrF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.155",
+  "version": "1.4.161",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/ListItem.vue

@@ -56,41 +56,40 @@ const bind = $computed(() => {
 </script>
 
 <template>
-	<component
-		:is="isComponent"
-		v-bind="bind"
-		v-ripple="ripple && isClickable"
-		class="flex gap-05 list-item"
-		:class="{ 'py-1': !props.thin,
-			'py-05': props.thin,
-			'px-1': !props.fullWidth,
-			'px-0': props.fullWidth,
-		}"
-		@click="onClick"
-	>
-		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
-		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
-
-		<div class="txt-start">
-			<p v-if="lead" class="txt10 m-0 p-0 txt-gray" :class="{ 'ellipsis': ellipsis }">
-				{{ lead }}
-				<slot name="lead" />
-			</p>
-			<p class="m-0 p-0 line-height-14 pb-025" :class="{ 'ellipsis-1': ellipsis }">
-				{{ title }}
-				<slot />
-			</p>
-			<p v-if="subtitle" class="txt12 m-0 p-0 opacity-7" :class="{ 'ellipsis-1': ellipsis }">
-				{{ subtitle }}
-				<slot name="subtitle" />
-			</p>
-		</div>
-		<div class="flex-grow-1" />
+	<div class="flex space-between">
+		<component
+			:is="isComponent" v-bind="bind" v-ripple="ripple && isClickable"
+			class="flex flex-grow-1 gap-05 list-item" :class="{
+				'py-1': !props.thin,
+				'py-05': props.thin,
+				'px-1': !props.fullWidth,
+				'px-0': props.fullWidth,
+			}" @click="onClick"
+		>
+			<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
+			<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
+
+			<div class="txt-start">
+				<p v-if="lead" class="txt10 m-0 p-0 txt-gray" :class="{ ellipsis }">
+					{{ lead }}
+					<slot name="lead" />
+				</p>
+				<p class="m-0 p-0 line-height-14 pb-025" :class="{ 'ellipsis-1': ellipsis }">
+					{{ title }}
+					<slot />
+				</p>
+				<p v-if="subtitle" class="txt12 m-0 p-0 opacity-7" :class="{ 'ellipsis-1': ellipsis }">
+					{{ subtitle }}
+					<slot name="subtitle" />
+				</p>
+			</div>
+			<div class="flex-grow-1" />
+		</component>
 		<slot name="end">
 			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
 			<p v-if="end" class="txt12 m-0 p-0 opacity-7" :class="{ 'ellipsis-1': ellipsis }" v-text="end" />
 		</slot>
-	</component>
+	</div>
 </template>
 
 <style>
@@ -103,10 +102,12 @@ button.list-item {
 	width: 100%;
 
 }
+
 .list-item:disabled {
 	opacity: 0.5;
 	pointer-events: none;
 }
+
 .list-item {
 	min-height: -webkit-fit-content;
 	min-height: -moz-fit-content;
@@ -118,7 +119,8 @@ button.list-item {
 	text-decoration: none;
 	position: relative;
 }
-.list-item > *{
+
+.list-item>* {
 	margin-bottom: 0;
 }
 
@@ -130,6 +132,7 @@ button.list-item {
 	bottom: 0;
 	border-bottom: 1px solid var(--border-color);
 }
+
 .list-item:last-child::after {
 	content: '';
 	position: absolute;
@@ -143,17 +146,21 @@ button.list-item {
 .list-item.router-link-exact-active {
 	background-color: var(--bgl-primary-tint);
 }
-.notClickable:hover{
-	background-color:unset;
+
+.notClickable:hover {
+	background-color: unset;
 	cursor: default;
 }
+
 .list-item:active {
 	-webkit-filter: var(--bgl-hover-filter);
 	filter: var(--bgl-hover-filter);
 }
-.no-border-list.list-item::after{
+
+.no-border-list.list-item::after {
 	border-bottom: none;
 }
+
 @media screen and (max-width: 910px) {
 	.list-item {
 		padding: 0.5rem;

package/src/components/Loading.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
+import type { SizeUnit, SizeType } from '../types/BtnOptions'
+import { standardSize } from '../utils/sizeParsing'
+
 type LoadingType = 'ring' | 'ellipsis' | 'bar'
 
 const { type: theme = 'ring', size = 50, thickness, duration = 1.2, color, progress } = defineProps<{
-	size?: number | string
-	thickness?: number | string
+	size?: SizeUnit | SizeType
+	thickness?: SizeUnit
 	duration?: number | string
 	type?: LoadingType
 	color?: string
 	progress?: number
 }>()
 
-// Ensure size and units are correctly formatted
-function standardSize(value: number | string | undefined, unit = 'px') {
-	if (!value) return `${size}${unit}`
-	return typeof value === 'number' ? `${value}${unit}` : value.endsWith(unit) ? value : `${value}${unit}`
-}
-
 // Computed Values
 const computedSize = $computed(() => standardSize(size))
 const animationDuration = $computed(() => `${duration}s`)
 const computedBorder = $computed(() => {
-	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize) / 9, 2)
+	const borderValue = thickness ?? Math.max(Number.parseInt(computedSize, 10) / 9, 2)
 	return standardSize(borderValue)
 })
 
@@ -95,15 +92,25 @@ const svgCircumference = $computed(() => Math.PI * 2 * svgRadius)
 }
 
 @keyframes bar-animation {
-  0% { background-position: -150% 0, -150% 0 }
-  66% { background-position: 250% 0, -150% 0 }
-  100% { background-position: 250% 0, 250% 0 }
+  0% {
+    background-position: -150% 0, -150% 0
+  }
+
+  66% {
+    background-position: 250% 0, -150% 0
+  }
+
+  100% {
+    background-position: 250% 0, 250% 0
+  }
 }
 
 /* Ring Theme */
-.lds-ring, .lds-ring div {
+.lds-ring,
+.lds-ring div {
   box-sizing: border-box;
 }
+
 .lds-ring {
   position: relative;
   width: var(--size);
@@ -111,11 +118,13 @@ const svgCircumference = $computed(() => Math.PI * 2 * svgRadius)
   transform: translate(calc(var(--thickness) * -1), calc(var(--thickness) * -1));
   direction: ltr;
 }
+
 .progress .lds-ring svg {
   position: absolute;
   top: var(--thickness);
   left: var(--thickness);
 }
+
 .lds-ring div {
   display: block;
   position: absolute;
@@ -127,25 +136,42 @@ const svgCircumference = $computed(() => Math.PI * 2 * svgRadius)
   animation: lds-ring var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: currentColor transparent transparent transparent;
 }
-.lds-ring div:nth-child(1) { animation-delay: calc(var(--animation-duration) * -0.38); }
-.lds-ring div:nth-child(2) { animation-delay: calc(var(--animation-duration) / -4); }
-.lds-ring div:nth-child(3) { animation-delay: calc(var(--animation-duration) / -8); }
+
+.lds-ring div:nth-child(1) {
+  animation-delay: calc(var(--animation-duration) * -0.38);
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: calc(var(--animation-duration) / -4);
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: calc(var(--animation-duration) / -8);
+}
 
 @keyframes lds-ring {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Ellipsis Theme */
-.lds-ellipsis, .lds-ellipsis div {
+.lds-ellipsis,
+.lds-ellipsis div {
   box-sizing: border-box;
 }
+
 .lds-ellipsis {
   display: inline-block;
   position: relative;
   width: var(--size);
   height: var(--size);
 }
+
 .lds-ellipsis div {
   position: absolute;
   top: calc(var(--size) / 2 - calc(var(--size) / 10));
@@ -155,32 +181,54 @@ const svgCircumference = $computed(() => Math.PI * 2 * svgRadius)
   background: currentColor;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
+
 .lds-ellipsis div:nth-child(1) {
   left: calc(var(--size) / 10);
   animation: lds-ellipsis1 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(2) {
   left: calc(var(--size) / 10);
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(3) {
   left: calc(var(--size) / 2.5);
   animation: lds-ellipsis2 0.6s infinite;
 }
+
 .lds-ellipsis div:nth-child(4) {
   left: calc(var(--size) / 1.42);
   animation: lds-ellipsis3 0.6s infinite;
 }
+
 @keyframes lds-ellipsis1 {
-  0% { transform: scale(0); }
-  100% { transform: scale(1); }
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
 }
+
 @keyframes lds-ellipsis3 {
-  0% { transform: scale(1); }
-  100% { transform: scale(0); }
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
 }
+
 @keyframes lds-ellipsis2 {
-  0% { transform: translate(0, 0); }
-  100% { transform: translate(calc(var(--size) / 3.33), 0); }
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(calc(var(--size) / 3.33), 0);
+  }
 }
 </style>

package/src/components/Modal.vue

@@ -97,7 +97,8 @@ onUnmounted(() => {
 	<!-- Overlay close button -->
 	<Btn v-if="dismissable && isOverlay" icon="close" icon-mobile-size="1.4" class="fixed" :class="overlayCloseClass" @click="closeModal" />
 
-	<Card class="modal m_pt-0" :style="{ ...maxWidth }" :thin="thin" @click.stop :class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }">
+	<Card class="modal m_pt-0" :style="{ ...maxWidth, '--bgl-box-bg': 'var(--bgl-popup-bg)' }" :thin="thin" @click.stop
+		:class="{ 'pt-0': thin, 'pt-1': !thin, 'm_mt-5': isOverlay, 'display-flex column': side }">
 		<header v-if="slots.toolbar || title" class="tool-bar w-100p flex space-between sticky z-3 py-1">
 			<!-- Header close button -->
 			<Btn v-if="dismissable && isHeader && closePlacement === 'header'" :style="{ float: side ? '' : '' }" flat icon="close" thin icon-mobile-size="1.4" @click="closeModal" />
@@ -131,6 +132,9 @@ onUnmounted(() => {
 .modal {
 	color: var(--bgl-popup-text);
 }
+.modal .bgl_btn.bgl_btn_flat {
+	color: var(--bgl-popup-text) !important;
+}
 
 .modal-footer>div {
 	gap: 1rem;

package/src/components/calendar/CalendarPopover.vue

@@ -61,42 +61,38 @@ function closePopover() {
 
 <template>
 	<Card
-		v-if="show && event"
-		ref="popoverRef"
-		v-click-outside="closePopover"
-		thin
-		class="custom-popover"
-		:style="{
+		v-if="show && event" ref="popoverRef" v-click-outside="closePopover" thin class="custom-popover" :style="{
 			top: `${popoverPosition.top}px`,
 			left: `${popoverPosition.left}px`,
 			maxWidth: `${popoverPosition.width}px`,
 		}"
 	>
-		<slot name="eventContent" :event="event" />
+		<slot name="eventContent" :event="event" :close="closePopover" />
 	</Card>
 </template>
 
 <style scoped>
 .custom-popover {
-  position: fixed;
-  z-index: 1000;
-  min-width: 250px;
-  max-width: 350px;
-  background-color: white;
-  border-radius: var(--btn-border-radius);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn 0.2s ease;
-  transform-origin: center left;
+	position: fixed;
+	z-index: 1000;
+	min-width: 250px;
+	max-width: 350px;
+	background-color: white;
+	border-radius: var(--btn-border-radius);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	animation: fadeIn 0.2s ease;
+	transform-origin: center left;
 }
 
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 </style>

package/src/components/calendar/CalendarTypes.ts

@@ -2,11 +2,13 @@ export interface CalendarEvent {
 	id: string
 	title: string
 	description?: string
+	reference?: string
 	start_time: Date
 	end_time: Date
 	color?: string
 	category?: string
 	allDay?: boolean
+	meta?: Record<string, any>
 }
 export type CalendarView = 'Week' | 'Month' | 'Day' | 'Agenda'
 

package/src/components/calendar/Index.vue

@@ -123,7 +123,7 @@ onMounted(() => { emit('ready', state.value) })
 <template>
 	<div class="calendar">
 		<div class="flex m_block m_pb-1">
-			<h3 class="txt-light my-0">
+			<h3 class="txt-light my-0 m_pb-1">
 				<b>{{ formatDate(currentDate, 'MMMM') }}</b>
 				{{ formatDate(currentDate, 'YYYY') }}
 			</h3>

package/src/components/calendar/views/WeekView.vue

@@ -421,7 +421,7 @@ onUnmounted(() => {
 	<div class="w-100p overflow-hidden m_overflow h-100p grid">
 		<div ref="calendarGrid" class="weekGrid border-bottom me-1">
 			<div />
-			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center">
+			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center m_txt12">
 				{{ formatDate(day, { fmt: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025" :class="{
@@ -576,4 +576,10 @@ onUnmounted(() => {
 	flex-direction: column;
 	justify-content: center; */
 }
+@media (max-width: 910px) {
+	.weekGrid {
+		display: grid;
+		grid-template-columns: 3rem repeat(7, 100px);
+	}
+}
 </style>

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

@@ -27,16 +27,16 @@ watch(
 </script>
 
 <template>
-	<div class="bagel-input  " :class="{ small }" :title="label">
+	<div class="bagel-input testMe1 " :class="{ small }" :title="label">
 		<label>
 			{{ label }}
-			<div class="flex bg-input rounded px-025 colorInputPickWrap">
+			<div class="flex rounded colorInputPickWrap" :class="{ 'px-025 bg-input': !small }">
 				<input
 					:id="id"
 					v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
 					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required" v-bind="nativeInputAttrs"
 				>
-				<input
+				<input v-if="!small"
 					v-model="inputVal"
 					class="flex-grow-1 border colorInputPick"
 					type="text"
@@ -50,9 +50,9 @@ watch(
 
 <style>
 .colorInputPick{
-    --input-font-size: 12px;
-	height: calc(var(--input-height) - 9px) !important;
+	--input-font-size: 12px;
 	background: transparent !important;
+	height: var(--input-height) !important;
 	min-width: 50px !important;
 }
 .colorInputPick:focus{

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

@@ -173,8 +173,8 @@ watch(() => modelValue, (newVal) => {
 				<p v-if="helptext" class="opacity-7 light">
 					{{ helptext }}
 				</p>
-				<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
-				<Icon v-if="icon" :icon />
+				<Icon v-if="iconStart" class="iconStart" size="0.9" :icon="iconStart" />
+				<Icon v-if="icon" :icon size="0.9" />
 				<Btn
 					v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius"
 					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement"

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

@@ -27,6 +27,12 @@ const props = withDefaults(
 		flat?: boolean
 		invertedActive?: boolean
 		align?: 'start' | 'center' | 'end' | 'top' | 'bottom'
+		hideRadio?: boolean
+		bgColor?: string
+		activeBgColor?: string
+		borderColor?: string
+		textColor?: string
+		textAlign?: 'left' | 'center' | 'right'
 	}>(),
 	{
 		align: 'center'
@@ -89,7 +95,8 @@ function handleChange() {
 			v-for="(opt, index) in visibleOptions" :key="opt.id || `${name}-${index}`"
 			class="border rounded flex active-list-item hover"
 			:for="opt.id || `${name}-${index}`"
-			:class="{ 'p-05 gap-025': thin, 'ps-05 py-1 gap-075': !thin, 'bg-gray-light': !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
+			:class="{ 'p-05 gap-025': thin, 'py-1 gap-075': !thin, 'ps-05': !hideRadio, 'bg-gray-light': !bgColor && !flat, 'align-items-start': align === 'start' || align === 'top', 'align-items-center': align === 'center', 'align-items-end': align === 'end' || align === 'bottom', invertedActive }"
+			:style="{ backgroundColor: bgColor, borderColor: borderColor }"
 		>
 			<input
 				:id="opt.id || `${name}-${index}`" v-model="selectedOption" :disabled class="radio-input-list"
@@ -97,16 +104,19 @@ function handleChange() {
 				@change="handleChange"
 				:class="{
 	'mt-025': align === 'start' || align === 'top',
-	'mb-025': align === 'end' || align === 'bottom'
+	'mb-025': align === 'end' || align === 'bottom',
+	'hideRadio': hideRadio
 				}"
 			>
-			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
+			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025"
+				:class="{ 'txt-center justify-content-center': textAlign === 'center', 'txt-end justify-content-end': textAlign === 'right', 'txt-start justify-content-start': textAlign === 'left' }"
+				:style="{ color: textColor }">
 				<img
 					v-if="opt.imgSrc" class="bg-popup shadow-light py-025 radius-05 m_w40" height="40" :src="opt.imgSrc"
 					:alt="opt.imgAlt"
 				>
 				<div class="">
-					<p v-if="opt.label" class="m-0 m_txt-14 line-height-14">{{ opt.label }}</p>
+					<div v-if="opt.label" class="m-0 m_txt-14 line-height-14" v-html="opt.label"></div>
 					<p v-if="opt.subLabel" class="txt-gray txt-12 m-0 pt-025">{{ opt.subLabel }}</p>
 				</div>
 				<slot name="radioItem" v-bind="opt" />
@@ -117,24 +127,30 @@ function handleChange() {
 </template>
 
 <style scoped>
+.hideRadio.radio-input-list {
+	display: none !important;
+}
 .radio-input-list {
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
+}
 
+.radio-input-list.hidden {
+	display: none;
 }
 
 .active-list-item:has(:checked) {
-	background: var(--bgl-primary-light) !important;
+	background: v-bind('activeBgColor || "var(--bgl-primary-light)"') !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
 }
+
 .invertedActive:has(:checked) {
 	background: var(--bgl-primary) !important;
 	border-color: var(--bgl-primary) !important;
 	color: var(--bgl-white);
 	accent-color: var(--bgl-white);
-
 }
 
 .has-error .active-list-item {

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

@@ -39,6 +39,8 @@ const props = defineProps<{
 	hide?: string[]
 	// Control autofocus behavior
 	autofocus?: boolean
+	// Text color
+	textColor?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -2521,7 +2523,7 @@ async function initEditor() {
 				min-height: 200px;
 				font-family: sans-serif !important;
 				line-height: 1.5;
-				color: inherit;
+				color: ${props.textColor || 'inherit'};
 				background: transparent;
 				max-width: 1060px;
 				margin: 0 auto;
@@ -3509,7 +3511,7 @@ defineExpose({
 }
 
 .inline-toolbar-content {
-	background: var(--bgl-surface, white);
+	background: var(--bgl-box-bg, white);
 	border: 1px solid var(--border-color, #dddddd);
 	border-radius: 8px;
 	padding: 0.25rem;

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

@@ -273,7 +273,7 @@ onMounted(() => {
 			</label>
 		</template>
 		<Skeleton v-if="isLoading" :count="6" width="200px" height="25px" class="mx-1 my-1" />
-		<Card class="p-05" :style="{ width: fullWidth ? '100%' : 'auto' }" @click.stop>
+		<Card class="p-05" frame :style="{ width: fullWidth ? '100%' : 'auto' }" @click.stop>
 			<div ref="selectOptions" class="selectinput-options" :class="{ multiselect }">
 				<div
 					v-for="(option, i) in results" :key="`${String(getValue(option))}-${i}`"
@@ -387,6 +387,6 @@ onMounted(() => {
 	border: none;
 	/* background: transparent; if anyone is changing this please talk to me first*/
 	border-radius: var(--card-border-radius);
-	/* color: var(--input-color); */
+	color: var(--dropdown-color);
 }
 </style>

package/src/components/layout/AppSidebar.vue

@@ -112,7 +112,7 @@ function logout() {
 				to="/"
 				class="decoration-none flex px-05"
 				:class="{
-					'gap-025': menuState.isOpen.value,
+	'gap-05': menuState.isOpen.value,
 					'gap-0': !menuState.isOpen.value,
 				}"
 			>