@bagelink/vue 1.15.15 → 1.15.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.15",
+  "version": "1.15.26",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/AccordionItem.vue

@@ -100,69 +100,73 @@ function toggle() {
 </template>
 
 <style scoped>
+
 .accordion-item {
-	border-bottom: 1px solid var(--bgl-border-color);
-	transition: all 0.2s;
-	overflow: hidden;
+border-bottom: 1px solid var(--bgl-border-color);
+transition: all 0.2s;
+overflow: hidden;
 }
 
 .accordion-item button {
-	cursor: pointer;
+cursor: pointer;
 }
 
 .accordion-head {
-	height: var(--bgl-input-height);
-	background: transparent;
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
-	border: none;
-	color: inherit !important;
+height: var(--bgl-input-height);
+background: transparent;
+display: flex;
+width: 100%;
+align-items: center;
+justify-content: space-between;
+border: none;
+color: inherit !important;
 }
 
 .accordion-icon {
-	transition: all 0.2s ease;
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	width: calc(var(--bgl-btn-height) / 1.5);
-	height: calc(var(--bgl-btn-height) / 1.5);
-	padding-inline: calc(var(--bgl-btn-padding) / 3);
-	justify-content: center;
+transition: all 0.2s ease;
+display: flex;
+align-items: center;
+flex-shrink: 0;
+width: calc(var(--bgl-btn-height) / 1.5);
+height: calc(var(--bgl-btn-height) / 1.5);
+padding-inline: calc(var(--bgl-btn-padding) / 3);
+justify-content: center;
 }
 
 [aria-expanded="true"] .accordion-icon {
-	transform: rotate(180deg);
+transform: rotate(180deg);
 }
 
 .accordion-label {
-	font-weight: bold;
+font-weight: bold;
 }
 
 .flat.accordion-item {
-	border-bottom: none
+border-bottom: none
 }
 
 .accordion-head:hover .accordion-label {
-	text-decoration: underline;
+text-decoration: underline;
 }
+
 </style>
 
 <style>
+
 .expand-enter-active,
 .expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
+transition: all 0.2s;
+transition-delay: 0ms;
 }
 
 .expand-enter-from,
 .expand-leave-to {
-	max-height: 0;
+max-height: 0;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-	max-height: 300px;
+max-height: 300px;
 }
+
 </style>

package/src/components/Avatar.vue

@@ -28,22 +28,24 @@ withDefaults(defineProps<{
 </template>
 
 <style scoped>
+
 .avatar {
-	background-color: var(--bgl-gray-tint);
-	border: 0.5px solid var(--bgl-border-color);
-	flex-shrink: 0;
+background-color: var(--bgl-gray-tint);
+border: 0.5px solid var(--bgl-border-color);
+flex-shrink: 0;
 }
 
 .avatar p {
-	font-size: 1.5rem;
-	line-height: 50px;
-	margin: 0;
-	font-weight: 200;
+font-size: 1.5rem;
+line-height: 50px;
+margin: 0;
+font-weight: 200;
 }
 
 .avatar img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+width: 100%;
+height: 100%;
+object-fit: cover;
 }
+
 </style>

package/src/components/Badge.vue

@@ -107,22 +107,23 @@ const computedClasses = computed(() => {
 </template>
 
 <style scoped>
+
 .pillLarge{
-	--bgl-pill-font-size: var(--bgl-font-size);
-	--bgl-pill-height:auto;
+--bgl-pill-font-size: var(--bgl-font-size);
+--bgl-pill-height:auto;
 }
 .pillSmall{
-	--bgl-pill-font-size: 9px;
-	--bgl-pill-height:15px;
+--bgl-pill-font-size: 9px;
+--bgl-pill-height:15px;
 }
 .pillText{
-	font-size: var(--bgl-pill-font-size);
+font-size: var(--bgl-pill-font-size);
 }
 .bgl_pill-btn{
-	color: var(--bgl-pill-btn-color);
-	background: var(--bgl-pill-btn-bg);
-	width: calc(var(--bgl-pill-height) / 1.25)!important;
-	height: calc(var(--bgl-pill-height) / 1.25)!important;
+color: var(--bgl-pill-btn-color);
+background: var(--bgl-pill-btn-bg);
+width: calc(var(--bgl-pill-height) / 1.25)!important;
+height: calc(var(--bgl-pill-height) / 1.25)!important;
 }
 .loading {
   border: 1px solid var(--bgl-light-text);
@@ -134,15 +135,15 @@ const computedClasses = computed(() => {
   margin: auto;
 }
 .bgl_flatPill .loading {
-	border-bottom: 2px solid var(--bgl-text-color);
+border-bottom: 2px solid var(--bgl-text-color);
 }
 
 @keyframes spin {
   0% {
-    transform: rotate(0deg);
+transform: rotate(0deg);
   }
   100% {
-    transform: rotate(360deg);
+transform: rotate(360deg);
   }
 }
 
@@ -162,6 +163,7 @@ vertical-align: middle;
   cursor: not-allowed;
 }
 .bgl_pill.round {
-	border-radius: 1000px;
+border-radius: 1000px;
 }
+
 </style>

package/src/components/BglVideo.vue

@@ -122,24 +122,26 @@ const videoUrl = computed(() => {
 </template>
 
 <style scoped>
+
 .bgl_vid iframe,
 .bgl_vid video {
-	width: 100%;
-	height: auto;
-	display: block;
-	margin: auto;
-	border-radius: var(--bgl-input-border-radius);
+width: 100%;
+height: auto;
+display: block;
+margin: auto;
+border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_empty {
-	padding-top: 56.25%;
-	background: var(--bgl-input-bg);
-	border-radius: var(--bgl-input-border-radius);
+padding-top: 56.25%;
+background: var(--bgl-input-bg);
+border-radius: var(--bgl-input-border-radius);
 }
 
 .bgl_vid.vid_short {
-	max-width: 56.25vh;
-	/* Limit width for shorts to maintain aspect ratio */
-	margin: 0 auto;
+max-width: 56.25vh;
+/* Limit width for shorts to maintain aspect ratio */
+margin: 0 auto;
 }
+
 </style>

package/src/components/Btn.vue

@@ -202,214 +202,215 @@ const slots: SetupContext['slots'] = useSlots()
 </template>
 
 <style scoped>
+
 /* @import '../styles/base-colors.css'; */
 
 .bgl_btn {
-	padding-left: var(--bgl-btn-padding);
-	padding-right: var(--bgl-btn-padding);
-	transition: var(--bgl-transition);
-	text-decoration: none;
-	/* Colors now handled by pair-* classes */
+padding-left: var(--bgl-btn-padding);
+padding-right: var(--bgl-btn-padding);
+transition: var(--bgl-transition);
+text-decoration: none;
+/* Colors now handled by pair-* classes */
 }
 
 /* Touch targets: keep visuals, but extend the hit area to >=44px on touch devices */
 @media (pointer: coarse) {
-	.bgl_btn {
-		position: relative;
-	}
+.bgl_btn {
+	position: relative;
+}
 
-	.bgl_btn::after {
-		content: '';
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		width: max(100%, 44px);
-		height: max(100%, 44px);
-	}
+.bgl_btn::after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: max(100%, 44px);
+	height: max(100%, 44px);
+}
 }
 
 .bgl_btn.bgl_btn-icon {
-	padding-left: 0;
-	padding-right: 0;
-	height: var(--bgl-btn-height);
-	width: var(--bgl-btn-height);
-	border-radius: 100%;
-	font-size: 1rem;
-	flex-shrink: 0;
+padding-left: 0;
+padding-right: 0;
+height: var(--bgl-btn-height);
+width: var(--bgl-btn-height);
+border-radius: 100%;
+font-size: 1rem;
+flex-shrink: 0;
 }
 
 a {
-	text-decoration: none;
+text-decoration: none;
 }
 
 .bgl_btn-flex {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	justify-content: center;
-	height: 100%;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+justify-content: center;
+height: 100%;
 }
 
 .bgl_btn .bgl_btn-icon {
-	font-size: calc(var(--bgl-input-font-size) * 1.3);
+font-size: calc(var(--bgl-input-font-size) * 1.3);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-	filter: var(--bgl-hover-filter);
+filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active:not(:disabled),
 .bgl_btn-icon:active:not(:disabled) {
-	filter: var(--bgl-active-filter);
+filter: var(--bgl-active-filter);
 }
 
 /* Flat hover/active styles now handled by base-colors.css */
 
 .bgl_btn.round {
-	border-radius: 1000px !important;
+border-radius: 1000px !important;
 }
 
 [dir="rtl"] .bgl_btn-icon {
-	transform: rotateY(180deg);
+transform: rotateY(180deg);
 }
 
 [dir="rtl"] .ltr .bgl_btn-icon {
-	transform: rotateY(0deg);
+transform: rotateY(0deg);
 }
 
 /* Border active styles now handled by base-colors.css */
 
 .bgl_btn:disabled,
 .bgl_btn[disabled=true] {
-	opacity: 0.7;
-	filter: grayscale(0.3);
-	cursor: not-allowed;
+opacity: 0.7;
+filter: grayscale(0.3);
+cursor: not-allowed;
 }
 
 .bgl_btn-icon .bgl_btn-flex {
-	height: 100%;
+height: 100%;
 }
 
 /* xs size */
 .bgl_btn_xsSize {
-	padding-inline: calc(var(--bgl-btn-padding) / 6);
-	border-radius: calc(var(--bgl-btn-border-radius) / 2);
-	font-size: calc(var(--bgl-input-font-size) * 0.6);
+padding-inline: calc(var(--bgl-btn-padding) / 6);
+border-radius: calc(var(--bgl-btn-border-radius) / 2);
+font-size: calc(var(--bgl-input-font-size) * 0.6);
 }
 
 .bgl_btn-icon.bgl_btn_xsSize {
-	height: calc(var(--bgl-btn-height) / 2);
-	width: calc(var(--bgl-btn-height) / 2);
-	line-height: normal;
+height: calc(var(--bgl-btn-height) / 2);
+width: calc(var(--bgl-btn-height) / 2);
+line-height: normal;
 }
 
 .bgl_btn_xsSize {
-	height: calc(var(--bgl-btn-height) / 2);
-	line-height: calc(var(--bgl-btn-height) / 2);
+height: calc(var(--bgl-btn-height) / 2);
+line-height: calc(var(--bgl-btn-height) / 2);
 }
 
 .bgl_btn_xsSize .bgl_btn-flex {
-	gap: 0.2rem;
+gap: 0.2rem;
 }
 
 /* s size */
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	padding-inline: calc(var(--bgl-btn-padding) / 3);
-	border-radius: calc(var(--bgl-btn-border-radius) / 1.5);
+padding-inline: calc(var(--bgl-btn-padding) / 3);
+border-radius: calc(var(--bgl-btn-border-radius) / 1.5);
 }
 
 .bgl_btn-icon.thin,
 .bgl_btn-icon.bgl_btn_sSize {
-	height: calc(var(--bgl-btn-height) / 1.5);
-	width: calc(var(--bgl-btn-height) / 1.5);
-	line-height: normal;
+height: calc(var(--bgl-btn-height) / 1.5);
+width: calc(var(--bgl-btn-height) / 1.5);
+line-height: normal;
 }
 
 .bgl_btn.thin,
 .bgl_btn_sSize {
-	height: calc(var(--bgl-btn-height) * 0.7);
-	line-height: calc(var(--bgl-btn-height) * 0.7);
+height: calc(var(--bgl-btn-height) * 0.7);
+line-height: calc(var(--bgl-btn-height) * 0.7);
 }
 
 /* m size */
 .bgl_btn_mSize {
-	padding-inline: var(--bgl-btn-padding);
-	font-size: var(--bgl-input-font-size);
-	height: var(--bgl-btn-height);
-	line-height: var(--bgl-btn-height);
+padding-inline: var(--bgl-btn-padding);
+font-size: var(--bgl-input-font-size);
+height: var(--bgl-btn-height);
+line-height: var(--bgl-btn-height);
 }
 
 .bgl_btn-icon.bgl_btn_mSize {
-	height: var(--bgl-btn-height);
-	width: var(--bgl-btn-height);
+height: var(--bgl-btn-height);
+width: var(--bgl-btn-height);
 }
 
 /* l size */
 .bgl_btn_lSize {
-	padding-inline: calc(var(--bgl-btn-padding) * 1.3);
-	font-size: calc(var(--bgl-input-font-size) * 1.1);
-	height: calc(var(--bgl-btn-height) * 1.2);
-	line-height: calc(var(--bgl-btn-height) * 1.2);
+padding-inline: calc(var(--bgl-btn-padding) * 1.3);
+font-size: calc(var(--bgl-input-font-size) * 1.1);
+height: calc(var(--bgl-btn-height) * 1.2);
+line-height: calc(var(--bgl-btn-height) * 1.2);
 }
 
 .bgl_btn-icon.bgl_btn_lSize {
-	height: calc(var(--bgl-btn-height) * 1.2);
-	width: calc(var(--bgl-btn-height) * 1.2);
+height: calc(var(--bgl-btn-height) * 1.2);
+width: calc(var(--bgl-btn-height) * 1.2);
 }
 
 /* xl size */
 .bgl_btn_xlSize {
-	padding-inline: calc(var(--bgl-btn-padding) * 1.6);
-	font-size: calc(var(--bgl-input-font-size) * 1.3);
-	height: calc(var(--bgl-btn-height) * 1.5);
-	line-height: calc(var(--bgl-btn-height) * 1.5);
+padding-inline: calc(var(--bgl-btn-padding) * 1.6);
+font-size: calc(var(--bgl-input-font-size) * 1.3);
+height: calc(var(--bgl-btn-height) * 1.5);
+line-height: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn-icon.bgl_btn_xlSize {
-	height: calc(var(--bgl-btn-height) * 1.5);
-	width: calc(var(--bgl-btn-height) * 1.5);
+height: calc(var(--bgl-btn-height) * 1.5);
+width: calc(var(--bgl-btn-height) * 1.5);
 }
 
 .bgl_btn_fullWidth {
-	width: 100%;
+width: 100%;
 }
 
 .bgl_btn_fullWidthMobile {
-	width: auto;
+width: auto;
 }
 
 /* Content alignment styles */
 .bgl_btn_alignStart .bgl_btn-flex {
-	justify-content: flex-start;
+justify-content: flex-start;
 }
 
 .bgl_btn_alignEnd .bgl_btn-flex {
-	justify-content: flex-end;
+justify-content: flex-end;
 }
 
 .bgl_btn_alignStartMobile .bgl_btn-flex {
-	justify-content: center;
+justify-content: center;
 }
 
 .bgl_btn_alignEndMobile .bgl_btn-flex {
-	justify-content: center;
+justify-content: center;
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn_fullWidthMobile {
-		width: 100%;
-	}
+.bgl_btn_fullWidthMobile {
+	width: 100%;
+}
 
-	.bgl_btn_alignStartMobile .bgl_btn-flex {
-		justify-content: flex-start;
-	}
+.bgl_btn_alignStartMobile .bgl_btn-flex {
+	justify-content: flex-start;
+}
 
-	.bgl_btn_alignEndMobile .bgl_btn-flex {
-		justify-content: flex-end;
-	}
+.bgl_btn_alignEndMobile .bgl_btn-flex {
+	justify-content: flex-end;
+}
 }
 
 </style>

package/src/components/Card.vue

@@ -60,64 +60,66 @@ const is = computed(() => {
 </template>
 
 <style>
+
 .card_frame {
-	border: 1px solid var(--bgl-border-color);
+border: 1px solid var(--bgl-border-color);
 }
 .card_label {
-	font-size: 1rem;
-	position: relative;
-	top: -0.5rem;
-	padding: 0.75rem 0;
-	display: block;
-	border-bottom: 1px solid var(--bgl-border-color);
-	margin-bottom: 1rem;
+font-size: 1rem;
+position: relative;
+top: -0.5rem;
+padding: 0.75rem 0;
+display: block;
+border-bottom: 1px solid var(--bgl-border-color);
+margin-bottom: 1rem;
 }
 
 .border .card_label {
-	font-size: 0.7rem;
-	font-weight: 300;
-	background: var(--bgl-box-bg);
-	padding: 0 0.75rem;
-	position: absolute;
-	top: -0.5rem;
-	inset-inline-start: 1rem;
-	border-left: 1px solid var(--bgl-border-color);
-	border-right: 1px solid var(--bgl-border-color);
-	border-bottom: unset;
+font-size: 0.7rem;
+font-weight: 300;
+background: var(--bgl-box-bg);
+padding: 0 0.75rem;
+position: absolute;
+top: -0.5rem;
+inset-inline-start: 1rem;
+border-left: 1px solid var(--bgl-border-color);
+border-right: 1px solid var(--bgl-border-color);
+border-bottom: unset;
 
 }
 
 .bgl_card {
-	border-radius: var(--bgl-card-border-radius);
-	background: var(--bgl-box-bg);
-	padding: 2rem 2rem;
-	position: relative;
+border-radius: var(--bgl-card-border-radius);
+background: var(--bgl-box-bg);
+padding: 2rem 2rem;
+position: relative;
 }
 
 .bgl_card.gray {
-	background: var(--bgl-gray-tint);
+background: var(--bgl-gray-tint);
 }
 
 .bgl_card.border {
-	border: 1px solid var(--bgl-border-color);
-	background-color: transparent;
+border: 1px solid var(--bgl-border-color);
+background-color: transparent;
 }
 
 .bgl_card.thin {
-	padding: 1rem 1rem;
+padding: 1rem 1rem;
 }
 
 .bgl_card.BagelTable {
-	height: 100%;
-	overflow: auto;
-	padding-top: 0;
+height: 100%;
+overflow: auto;
+padding-top: 0;
 }
 
 .bgl_card.thin .tabs {
-	margin-bottom: 1rem;
+margin-bottom: 1rem;
 }
 
 .bgl_card .bgl_card.tabs-top {
-	padding: 0;
+padding: 0;
 }
+
 </style>