@bagelink/vue 0.0.518 → 0.0.522

package/dist/style.css

@@ -637,54 +637,54 @@ a[data-v-d5201df6] {
 }
 }
 
-.list-arrows[data-v-fd12de23] {
+.list-arrows[data-v-8113163b] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-fd12de23] {
+.list-arrows .bgl_icon-font[data-v-8113163b] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-fd12de23] {
+.list-arrows.sorted[data-v-8113163b] {
 	opacity: 1;
 }
-.col img[data-v-fd12de23] {
+.col img[data-v-8113163b] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-fd12de23] {
+.list-arrows.sorted .desc[data-v-8113163b] {
 	transform: rotate(180deg);
 }
-table[data-v-fd12de23] {
+table[data-v-8113163b] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-fd12de23] {
+th[data-v-8113163b] {
 	font-weight: 400;
 }
-.embedded-field[data-v-fd12de23] {
+.embedded-field[data-v-8113163b] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-fd12de23] {
+.row[data-v-8113163b] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-fd12de23] {
+.row.first-row[data-v-8113163b] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	height: 50px;
+	/* height: 50px; */
 	vertical-align: bottom;
 }
-.row.first-row input[type=checkbox][data-v-fd12de23]{
+.row.first-row input[type=checkbox][data-v-8113163b]{
 	margin-bottom: 0.7rem;
 }
-.row.first-row[data-v-fd12de23]::after {
+.row.first-row[data-v-8113163b]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -692,30 +692,30 @@ th[data-v-fd12de23] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-fd12de23] {
+.first-row .col[data-v-8113163b] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-fd12de23] {
+.col[data-v-8113163b] {
 	white-space: nowrap;
-	padding: 0.75rem 0.5rem;
+	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-fd12de23]:has(.bagel-input) {
+.col[data-v-8113163b]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-fd12de23] {
+.col > div[data-v-8113163b] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-fd12de23] {
+.max-col-width[data-v-8113163b] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-fd12de23] {
+.col.check .bgl_icon-font[data-v-8113163b] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -726,31 +726,31 @@ th[data-v-fd12de23] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-fd12de23] {
+.rows[data-v-8113163b] {
 	font-size: 0.88em;
 }
-.table-list[data-v-fd12de23] {
+.table-list[data-v-8113163b] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-fd12de23] {
+.BagelTable .table-list[data-v-8113163b] {
 	overflow: unset;
 }
-.row-item[data-v-fd12de23] {
+.row-item[data-v-8113163b] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-fd12de23]:hover {
+.row-item[data-v-8113163b]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type=checkbox][data-v-fd12de23]{
+.row-item input[type=checkbox][data-v-8113163b]{
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
-.infinite-wrapper[data-v-fd12de23] {
+.infinite-wrapper[data-v-8113163b] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -801,7 +801,6 @@ th[data-v-fd12de23] {
 	background: var(--bgl-white);
 	padding: 2rem 2rem;
 	position: relative;
-	box-shadow:0 1px 5px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.05);
 }
 .bgl_card.gray {
 	background: var(--bgl-gray-20);
@@ -935,7 +934,7 @@ display: block;
 	border-radius: var(--input-border-radius);
 }
 
-.blocker[data-v-da91fb96] {
+.blocker[data-v-f21373a1] {
   position: fixed;
   top: 0;
   left: 0;
@@ -943,7 +942,7 @@ display: block;
   height: 100%;
   z-index: 100;
 }
-.bgl-slider[data-v-da91fb96] {
+.bgl-slider[data-v-f21373a1] {
   display: grid;
   position: relative;
   scroll-behavior: smooth;
@@ -952,65 +951,65 @@ display: block;
   scroll-snap-type: x mandatory;
   overflow-x: hidden;
 }
-.autoHeight[data-v-da91fb96] {
+.autoHeight[data-v-f21373a1] {
   transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-da91fb96] {
+.bgl-slider.allowScroll[data-v-f21373a1] {
   overflow-x: scroll;
 }
-.bgl-slider.slides-6[data-v-da91fb96] {
+.bgl-slider.slides-6[data-v-f21373a1] {
   grid-auto-columns: 15.9%;
   gap: 1%;
 }
-.bgl-slider.slides-5[data-v-da91fb96] {
+.bgl-slider.slides-5[data-v-f21373a1] {
   grid-auto-columns: 19.3%;
   gap: 1%;
 }
-.bgl-slider.slides-4[data-v-da91fb96] {
+.bgl-slider.slides-4[data-v-f21373a1] {
   grid-auto-columns: 25%;
   gap: 1%;
 }
-.bgl-slider.slides-3[data-v-da91fb96] {
+.bgl-slider.slides-3[data-v-f21373a1] {
   grid-auto-columns: 33%;
   gap: 1%;
 }
-.bgl-slider.slides-2[data-v-da91fb96] {
+.bgl-slider.slides-2[data-v-f21373a1] {
   grid-auto-columns: 50%;
   gap: 1%;
 }
-.bgl-slider.slides-1[data-v-da91fb96] {
+.bgl-slider.slides-1[data-v-f21373a1] {
   grid-auto-columns: 100%;
 }
-.bgl-slider[data-v-da91fb96]::-webkit-scrollbar {
+.bgl-slider[data-v-f21373a1]::-webkit-scrollbar {
   display: none;
 }
-.bgl-slider[data-v-da91fb96] * {
+.bgl-slider[data-v-f21373a1] * {
   scroll-snap-align: center;
 }
-.dragging.bgl-slider[data-v-da91fb96] {
+.dragging.bgl-slider[data-v-f21373a1] {
   cursor: grabbing;
   cursor: -webkit-grabbing;
   scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-da91fb96] {
+.clicking.bgl-slider[data-v-f21373a1] {
   scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-da91fb96] * {
+.dragging.bgl-slider[data-v-f21373a1] * {
   scroll-snap-align: unset;
   user-select: none;
 }
 @media screen and (max-width: 1280px) {
-.bgl-slider.slides-4[data-v-da91fb96] {
+.bgl-slider.slides-4[data-v-f21373a1] {
     grid-auto-columns: 33%;
 }
 }
 @media screen and (max-width: 991px) {
-.bgl-slider.slides-4[data-v-da91fb96] {
+.bgl-slider.slides-4[data-v-f21373a1] {
     grid-auto-columns: 50%;
 }
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-4[data-v-da91fb96] {
+.bgl-slider.slides-4[data-v-f21373a1] {
     grid-auto-columns: 100%;
 }
 }
@@ -6832,7 +6831,7 @@ select {
 ::-webkit-scrollbar-track {}
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
-    border-radius: 12px;
+    border-radius: 1rem;
 }
 ::-webkit-scrollbar-corner {
     background: transparent;
@@ -7270,6 +7269,30 @@ select {
 .shadow-light {
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
+.border-bottom {
+    border-bottom: 1px solid var(--border-color)
+}
+.border-top {
+    border-top: 1px solid var(--border-color)
+}
+.border-start {
+    border-inline-start: 1px solid var(--border-color)
+}
+.border-end {
+    border-inline-end: 1px solid var(--border-color)
+}
+.border-inner-bottom>* {
+    border-bottom: 1px solid var(--border-color)
+}
+.border-inner-top>* {
+    border-top: 1px solid var(--border-color)
+}
+.border-inner-start>* {
+    border-inline-start: 1px solid var(--border-color)
+}
+.border-inner-end>* {
+    border-inline-end: 1px solid var(--border-color)
+}
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
         opacity: 0;
@@ -7700,6 +7723,39 @@ select {
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }
 
+    .m_border-bottom {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-top {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-start {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-end {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-bottom>* {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-top>* {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-start>* {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-end>* {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+
 }
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/

package/dist/utils/BagelFormUtils.d.ts

@@ -12,6 +12,7 @@ interface InputOptions {
     disabled?: boolean;
     helptext?: string;
 }
+type DateOptions = InputOptions;
 interface TextInputOptions extends InputOptions {
     type?: 'text' | 'tel' | 'email';
     pattern?: string;
@@ -39,6 +40,7 @@ export declare function richText(id: string, label?: string, options?: RichTextO
 export declare function txtField(id: string, label?: string, options?: TextInputOptions): Field;
 export declare function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field;
 export declare function checkField(id: string, label?: string, options?: NumFieldOptions): Field;
+export declare function dateField(id: string, label?: string, options?: DateOptions): Field;
 export declare function numField(id: string, label?: string, options?: NumFieldOptions): Field;
 export declare function frmRow(...children: Field[]): {
     $el: string;

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

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAeP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAmBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/package.json

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

package/src/components/Card.vue

@@ -75,7 +75,6 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 	background: var(--bgl-white);
 	padding: 2rem 2rem;
 	position: relative;
-	box-shadow:0 1px 5px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.05);
 }
 
 .bgl_card.gray {

package/src/components/Carousel.vue

@@ -178,10 +178,10 @@ onUnmounted(() => {
 		</div>
 		<div class="Handlers">
 			<span @click="prev">
-				<slot name="prev" :index="activeSlideIndex" />
+				<slot name="prev" :index="activeSlideIndex" :prev />
 			</span>
 			<span @click="next">
-				<slot name="next" :index="activeSlideIndex" />
+				<slot name="next" :index="activeSlideIndex" :next />
 			</span>
 		</div>
 	</div>

package/src/components/ListItem.vue

@@ -14,7 +14,7 @@ defineProps<{
 	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex list-item gap-1">
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<div>
-			<p class="no-margin ellipsis line-height-14">
+			<p class="no-margin ellipsis line-height-14 pb-025">
 				{{ title }}
 				<slot />
 			</p>

package/src/components/ListView.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 p-0">
+	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 pt-0 pb-05 px-0">
 		<div class="p-1">
 			<slot name="header" />
 		</div>

package/src/components/TableSchema.vue

@@ -96,7 +96,7 @@ const computedData = $computed(() => {
 	return dta
 })
 
-function selectAll(event: PointerEvent) {
+function _unused_SelectAll(event: PointerEvent) {
 	const value = (event.target as HTMLInputElement).checked
 	if (!value) {
 		selected = []
@@ -229,7 +229,7 @@ th {
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	height: 50px;
+	/* height: 50px; */
 	vertical-align: bottom;
 }
 .row.first-row input[type=checkbox]{
@@ -252,7 +252,7 @@ th {
 
 .col {
 	white-space: nowrap;
-	padding: 0.75rem 0.5rem;
+	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;

package/src/styles/appearance.css

@@ -431,6 +431,39 @@
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
 
+.border-bottom {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-top {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-start {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-end {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+.border-inner-bottom>* {
+    border-bottom: 1px solid var(--border-color)
+}
+
+.border-inner-top>* {
+    border-top: 1px solid var(--border-color)
+}
+
+.border-inner-start>* {
+    border-inline-start: 1px solid var(--border-color)
+}
+
+.border-inner-end>* {
+    border-inline-end: 1px solid var(--border-color)
+}
+
+
 
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
@@ -862,4 +895,37 @@
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }
 
+    .m_border-bottom {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-top {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-start {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-end {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-bottom>* {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-top>* {
+        border-top: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-start>* {
+        border-inline-start: 1px solid var(--border-color)
+    }
+
+    .m_border-inner-end>* {
+        border-inline-end: 1px solid var(--border-color)
+    }
+
+
 }

package/src/styles/scrollbar.css

@@ -7,7 +7,7 @@
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
-    border-radius: 12px;
+    border-radius: 1rem;
 }
 
 ::-webkit-scrollbar-corner {

package/src/utils/BagelFormUtils.ts

@@ -15,6 +15,8 @@ interface InputOptions {
 	helptext?: string
 }
 
+type DateOptions = InputOptions
+
 interface TextInputOptions extends InputOptions {
 	type?: 'text' | 'tel' | 'email'
 	pattern?: string
@@ -61,6 +63,7 @@ export function txtField(
 		required: options?.required,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		defaultValue: options?.defaultValue,
 		attrs: {
@@ -108,6 +111,25 @@ export function checkField(
 	}
 }
 
+export function dateField(
+	id: string,
+	label?: string,
+	options?: DateOptions,
+): Field {
+	return {
+		$el: 'date',
+		class: options?.class,
+		required: options?.required,
+		id,
+		disabled: options?.disabled,
+		label,
+		defaultValue: options?.defaultValue,
+		attrs: {
+			disabled: options?.disabled,
+		},
+	}
+}
+
 export function numField(
 	id: string,
 	label?: string,
@@ -120,6 +142,7 @@ export function numField(
 		defaultValue: options?.defaultValue,
 		id,
 		label,
+		disabled: options?.disabled,
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
 		attrs: {