@bagelink/vue 0.0.791 → 0.0.793

package/dist/style.css

@@ -1,14 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
-.accordion-item[data-v-f87b579d] {
+.accordion-item[data-v-a1dc5cce] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-item button[data-v-f87b579d]{
+.accordion-item button[data-v-a1dc5cce]{
 	cursor: pointer;
 }
-.accordion-head[data-v-f87b579d] {
+.accordion-head[data-v-a1dc5cce] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -17,19 +17,19 @@
 	justify-content: space-between;
 	border: none;
 }
-.accordion-icon[data-v-f87b579d] {
+.accordion-icon[data-v-a1dc5cce] {
 	transition: all 0.2s ease;
 }
-.accordion-icon.open[data-v-f87b579d] {
+.accordion-icon.open[data-v-a1dc5cce] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-f87b579d] {
+.accordion-label[data-v-a1dc5cce] {
 	font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-f87b579d] {
+.accordion-head:hover .accordion-label[data-v-a1dc5cce] {
 	text-decoration: underline;
 }
-.accordion-body[data-v-f87b579d] {
+.accordion-body[data-v-a1dc5cce] {
 }
 
 .expand-enter-active,
@@ -46,19 +46,19 @@
 	max-height: 300px;
 }
 
-a[data-v-047c9778] {
+a[data-v-f06feeb9] {
   text-decoration: none;
 }
-.loading[data-v-047c9778] {
+.loading[data-v-f06feeb9] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-047c9778 1s linear infinite;
+  animation: spin-f06feeb9 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-@keyframes spin-047c9778 {
+@keyframes spin-f06feeb9 {
 0% {
     transform: rotate(0deg);
 }
@@ -66,7 +66,7 @@ a[data-v-047c9778] {
     transform: rotate(360deg);
 }
 }
-.bgl_btn-icon[data-v-047c9778] {
+.bgl_btn-icon[data-v-f06feeb9] {
   height: var(--btn-height);
   width: var(--btn-height);
   border-radius: 100%;
@@ -76,108 +76,108 @@ a[data-v-047c9778] {
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
-.bgl_btn[data-v-047c9778] {
+.bgl_btn[data-v-f06feeb9] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
   text-decoration: none;
 }
-.bgl_btn[disabled="true"][data-v-047c9778] {
+.bgl_btn[disabled="true"][data-v-f06feeb9] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_btn-flex[data-v-047c9778] {
+.bgl_btn-flex[data-v-f06feeb9] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_btn .bgl_btn-icon[data-v-047c9778]{
+.bgl_btn .bgl_btn-icon[data-v-f06feeb9]{
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-047c9778],
-.bgl_btn-icon[data-v-047c9778] {
-  background-color: var(--29a2743a);
-  color: var(--415112fe);
+.bgl_btn[data-v-f06feeb9],
+.bgl_btn-icon[data-v-f06feeb9] {
+  background-color: var(--59d3d581);
+  color: var(--d32c9dc8);
 }
-.bgl_btn[data-v-047c9778]:hover,
-.bgl_btn-icon[data-v-047c9778]:hover {
+.bgl_btn[data-v-f06feeb9]:hover,
+.bgl_btn-icon[data-v-f06feeb9]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-047c9778]:active,
-.bgl_btn-icon[data-v-047c9778]:active {
+.bgl_btn[data-v-f06feeb9]:active,
+.bgl_btn-icon[data-v-f06feeb9]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn[data-v-f06feeb9] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   background: transparent;
 }
-.bgl_btn-icon.bgl_flatBtn[data-v-047c9778] {
+.bgl_btn-icon.bgl_flatBtn[data-v-f06feeb9] {
   background: transparent;
 }
-.bgl_btn.bgl_flatBtn[data-v-047c9778]:hover,
-.bgl_btn-icon.bgl_flatBtn[data-v-047c9778]:hover {
+.bgl_btn.bgl_flatBtn[data-v-f06feeb9]:hover,
+.bgl_btn-icon.bgl_flatBtn[data-v-f06feeb9]:hover {
   filter: var(--bgl-hover-filter);
   background: var(--bgl-gray-20);
   color: var(--bgl-primary);
 }
-.bgl_btn.bgl_flatBtn[data-v-047c9778]:active,
-.bgl_btn-icon.bgl_flatBtn[data-v-047c9778]:active {
+.bgl_btn.bgl_flatBtn[data-v-f06feeb9]:active,
+.bgl_btn-icon.bgl_flatBtn[data-v-f06feeb9]:active {
   background: var(--bgl-gray-40);
   filter: var(--bgl-active-filter);
   color: var(--bgl-primary);
 }
-.bgl_btn.bgl_flatBtn.red[data-v-047c9778],
-.bgl_btn-icon.bgl_flatBtn.red[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn.red[data-v-f06feeb9],
+.bgl_btn-icon.bgl_flatBtn.red[data-v-f06feeb9] {
   color: var(--bgl-red);
 }
-.bgl_btn.bgl_flatBtn.white[data-v-047c9778],
-.bgl_btn-icon.bgl_flatBtn.white[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn.white[data-v-f06feeb9],
+.bgl_btn-icon.bgl_flatBtn.white[data-v-f06feeb9] {
   color: var(--bgl-light-text);
 }
-.bgl_btn.bgl_flatBtn.light[data-v-047c9778],
-.bgl_btn-icon.bgl_flatBtn.light[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn.light[data-v-f06feeb9],
+.bgl_btn-icon.bgl_flatBtn.light[data-v-f06feeb9] {
   color: var(--bgl-primary-tint);
 }
-.bgl_btn.bgl_flatBtn.black[data-v-047c9778],
-.bgl_btn-icon.bgl_flatBtn.black[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn.black[data-v-f06feeb9],
+.bgl_btn-icon.bgl_flatBtn.black[data-v-f06feeb9] {
   color: var(--bgl-text-color);
 }
-.bgl_btn.bgl_flatBtn.gray[data-v-047c9778],
-.bgl_btn-icon.bgl_flatBtn.gray[data-v-047c9778] {
+.bgl_btn.bgl_flatBtn.gray[data-v-f06feeb9],
+.bgl_btn-icon.bgl_flatBtn.gray[data-v-f06feeb9] {
   color: var(--bgl-gray);
 }
-.bgl_btn.thin[data-v-047c9778] {
+.bgl_btn.thin[data-v-f06feeb9] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-047c9778] {
+.bgl_btn.round[data-v-f06feeb9] {
   border-radius: 1000px;
 }
-.bgl_btn-icon.thin[data-v-047c9778] {
+.bgl_btn-icon.thin[data-v-f06feeb9] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: normal;
 }
-.bgl_btn-icon.thin .bgl_btn-flex[data-v-047c9778] {
+.bgl_btn-icon.thin .bgl_btn-flex[data-v-f06feeb9] {
 	height: 100%;
 }
-[dir="rtl"] .bgl_btn-icon[data-v-047c9778]{
+[dir="rtl"] .bgl_btn-icon[data-v-f06feeb9]{
   transform: rotateY(180deg);
 }
-.bgl_btn-border[data-v-047c9778] {
-  outline: 1px solid var(--29a2743a);
-  color: var(--29a2743a);
+.bgl_btn-border[data-v-f06feeb9] {
+  outline: 1px solid var(--59d3d581);
+  color: var(--59d3d581);
   background: transparent;
 }
-.bgl_btn-border[data-v-047c9778]:hover {
+.bgl_btn-border[data-v-f06feeb9]:hover {
   color: var(--bgl-light-text);
-  background: var(--29a2743a);
+  background: var(--59d3d581);
   filter: brightness(100%);
 }
-.bgl_btn-border[data-v-047c9778]:active {
+.bgl_btn-border[data-v-f06feeb9]:active {
   filter: brightness(80%);
 }
 
@@ -233,7 +233,7 @@ display: block;
   object-fit: cover;
 }
 
-.inline[data-v-40a0b03a] {
+.inline[data-v-8204b6ed] {
 	display: inline;
 }
 
@@ -266,7 +266,8 @@ display: block;
 	color: var(--bgl-black);
 }
 .pill.yellow {
-	background-color: var(--bgl-yellow);
+	background-color: var(--bgl-yellow-light);
+	color: var(--bgl-yellow);
 }
 .pill.Paid,
 .pill.Active {
@@ -1189,10 +1190,10 @@ p {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-841bf0ec] {
+.selectinput[data-v-ee6f94cb] {
 	width: 100%;
 }
-.selectinput-option[data-v-841bf0ec] {
+.selectinput-option[data-v-ee6f94cb] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1204,25 +1205,25 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-841bf0ec]{
+.selectinput-option .bgl_icon-font[data-v-ee6f94cb]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-841bf0ec] {
+.selectinput-options.multiselect .selectinput-option[data-v-ee6f94cb] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-841bf0ec] {
+.selectinput-options[data-v-ee6f94cb] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-841bf0ec]:hover {
+.selectinput-option[data-v-ee6f94cb]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-841bf0ec] {
+.isEmpty p[data-v-ee6f94cb] {
 	opacity: 0.3;
 }
-.selected[data-v-841bf0ec]{
+.selected[data-v-ee6f94cb]{
 	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-gray-light);
+	background: var(--bgl-selected);
 }
 
 .bagel-input label {
@@ -1280,36 +1281,36 @@ p {
     1 #75975d, /* comments */
     2 yellow, /* literals */
     3 #a3c19a, /* numbers */
-    4 blue, /* functions, [] */
+    4 lightblue, /* functions, [] */
     5 orange, /* js others */
     6 black, /* not in use */
     7 #bc8abd, /* inside quotes, css properties, few chars */
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-a39fc092]{
+.preview-area[data-v-21b4933c]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 	background: var(--bgl-code-bg);
 	color: var(--bgl-code-color)
 }
-.rich-text-editor[data-v-a39fc092] {
+.rich-text-editor[data-v-21b4933c] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-a39fc092]{
+.editableContent[data-v-21b4933c]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-a39fc092]{
+.content-area[data-v-21b4933c]{
 	background: var(--bgl-richtext-color);
 }
-.content-area[data-v-a39fc092], .preview-area[data-v-a39fc092]{
+.content-area[data-v-21b4933c], .preview-area[data-v-21b4933c]{
 	min-height: 200px;
 }
-.fullscreen-mode[data-v-a39fc092] {
+.fullscreen-mode[data-v-21b4933c] {
     position: fixed;
     top: 0;
     left: 0;
@@ -1321,14 +1322,14 @@ p {
     overflow: auto;
 	border-radius: 0;
 }
-.fullscreen-mode .content-area[data-v-a39fc092]{
+.fullscreen-mode .content-area[data-v-21b4933c]{
 	height: calc(100vh - 5rem);
 	padding: 4rem !important;
 	max-width: 900px;
 	margin-inline: auto ;
 	overflow-y: auto;
 }
-.fullscreen-mode .toolbar[data-v-a39fc092]{
+.fullscreen-mode .toolbar[data-v-21b4933c]{
 	max-width: 900px;
 	margin-inline: auto ;
 	/* border-bottom: 1px solid var(--border-color); */
@@ -3154,25 +3155,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 }
 
-.bgl_pill-btn[data-v-95cf3171]{
+.bgl_pill-btn[data-v-fe69af52]{
 	color: var(--pill-btn-color);
 	background: var(--pill-btn-bg);
 	width: calc(var(--pill-height) / 1.25)!important;
 	height: calc(var(--pill-height) / 1.25)!important;
 }
-.loading[data-v-95cf3171] {
+.loading[data-v-fe69af52] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-95cf3171 1s linear infinite;
+  animation: spin-fe69af52 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-95cf3171] {
+.bgl_flatPill .loading[data-v-fe69af52] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-95cf3171 {
+@keyframes spin-fe69af52 {
 0% {
     transform: rotate(0deg);
 }
@@ -3180,11 +3181,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-95cf3171] {
+.bgl_pill[data-v-fe69af52] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--4d2f98bb);
-  color: var(--1dbee7d6);
+  background-color: var(--24e1b08e);
+  color: var(--4b8819e9);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3192,26 +3193,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-95cf3171] {
+.bgl_pill[disabled="true"][data-v-fe69af52] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-95cf3171] {
+.bgl_pill-flex[data-v-fe69af52] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-95cf3171] {
+.bgl_pill.bgl_flatPill[data-v-fe69af52] {
   background: transparent;
 }
-.bgl_pill.round[data-v-95cf3171] {
+.bgl_pill.round[data-v-fe69af52] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-95cf3171] {
-  outline: 1px solid var(--4d2f98bb);
-  color: var(--4d2f98bb);
+.bgl_pill-border[data-v-fe69af52] {
+  outline: 1px solid var(--24e1b08e);
+  color: var(--24e1b08e);
   background: transparent;
 }
 
@@ -3456,19 +3457,19 @@ tbody tr[data-v-c4b111dc]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-993af46d]{
+.lightbox-image[data-v-9d1a08fe]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-993af46d] {
+.bgl-lightbox-overlay[data-v-9d1a08fe] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-993af46d] {
+.bgl-lightbox[data-v-9d1a08fe] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-993af46d]{
-	animation: 500ms ease bgl-lightbox-load-993af46d;
+.bgl-lightbox-item[data-v-9d1a08fe]{
+	animation: 500ms ease bgl-lightbox-load-9d1a08fe;
 }
-@keyframes bgl-lightbox-load-993af46d {
+@keyframes bgl-lightbox-load-9d1a08fe {
 from {
     scale:0.7;
 }
@@ -3476,32 +3477,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-993af46d] * {
+.bgl-lightbox-item[data-v-9d1a08fe] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-993af46d;
+	animation: 200ms ease bgl-lightbox-load-9d1a08fe;
 }
-.navigation[data-v-993af46d] {
+.navigation[data-v-9d1a08fe] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-993af46d] {
+.navigation-btn[data-v-9d1a08fe] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-993af46d] {
+.thumbnail[data-v-9d1a08fe] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-993af46d]:hover {
+.thumbnail[data-v-9d1a08fe]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-993af46d]:active {
+.thumbnail[data-v-9d1a08fe]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-993af46d] {
+.thumbnail.active[data-v-9d1a08fe] {
 	opacity: 1;
 	outline: 2px solid white;
 }
@@ -4861,6 +4862,30 @@ to {
     top: 4rem;
     align-self: start;
 }
+.sticky-5,
+.position-sticky-5 {
+    position: sticky !important;
+    top: 5rem;
+    align-self: start;
+}
+.sticky-6,
+.position-sticky-6 {
+    position: sticky !important;
+    top: 6rem;
+    align-self: start;
+}
+.sticky-7,
+.position-sticky-7 {
+    position: sticky !important;
+    top: 7rem;
+    align-self: start;
+}
+.sticky-8,
+.position-sticky-8 {
+    position: sticky !important;
+    top: 8rem;
+    align-self: start;
+}
 .flex {
     display: flex;
     align-items: center;
@@ -6706,6 +6731,34 @@ to {
         align-self: start;
     }
 
+    .m_sticky-5,
+    .m_position-sticky-5 {
+        position: sticky !important;
+        top: 5rem;
+        align-self: start;
+    }
+
+    .m_sticky-6,
+    .m_position-sticky-6 {
+        position: sticky !important;
+        top: 6rem;
+        align-self: start;
+    }
+
+    .m_sticky-7,
+    .m_position-sticky-7 {
+        position: sticky !important;
+        top: 7rem;
+        align-self: start;
+    }
+
+    .m_sticky-8,
+    .m_position-sticky-8 {
+        position: sticky !important;
+        top: 8rem;
+        align-self: start;
+    }
+
     .m_flex-stretch {
         display: flex;
         align-items: stretch;
@@ -9720,7 +9773,8 @@ select {
     --bgl-selection-color: var(--bgl-white);
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
-    --pill-btn-bg: var(--placeholder-color)
+    --pill-btn-bg: var(--placeholder-color);
+    --bgl-selected: var(--bgl-gray-light)
 }
 /* TYPE */
 :root {

package/dist/types/index.d.ts

@@ -11,7 +11,7 @@ export type Tab = {
     id: string;
     icon?: MaterialIcons;
 } | string;
-export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';
+export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'yellow' | 'primary' | 'blue';
 export type Option = string | number | Record<string, any> | {
     label: string;
     value: string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,IAAI,uBAAuB,EAC9C,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,aAAa,CAAA;CACpB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA;AAET,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,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,IAAI,uBAAuB,EAC9C,mBAAmB,EACnB,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,aAAa,CAAA;CACpB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,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,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}

package/dist/utils/BagelFormUtils.d.ts

@@ -67,19 +67,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: Record<string, any>;
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: Record<string, any>;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
@@ -180,19 +168,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
-        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
-            label?: string;
-            id?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: Record<string, any>;
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
+        }, import('vue').PublicProps, {
             modelValue: Record<string, any>;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};

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

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/dist/utils/objects.d.ts

@@ -1,4 +1,5 @@
 import { BagelField } from '..';
+
 export declare function getPropByPath(obj: Record<string, any>, propPath?: string, bagelField?: BagelField): {};
 export declare function setPropByPath(obj: Record<string, any>, path?: string, value?: any): void;
 //# sourceMappingURL=objects.d.ts.map