@bagelink/vue 0.0.1004 → 0.0.1006

package/dist/style.css

@@ -293,15 +293,15 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-732c510b],
-.bgl_vid video[data-v-732c510b] {
+.bgl_vid iframe[data-v-006552f6],
+.bgl_vid video[data-v-006552f6] {
 	width: 100%;
 	height: auto;
 	display: block;
 	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-732c510b] {
+.bgl_vid.vid_empty[data-v-006552f6] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
@@ -831,10 +831,10 @@ pre code.hljs{
 }
 }
 
-.img-web-kit[data-v-3f8cf457] {
+.img-web-kit[data-v-a96b25a8] {
 	max-width: 100%;
-    vertical-align: middle;
-    border: 0;
+	vertical-align: middle;
+	border: 0;
 	width: 100%;
 }
 
@@ -1249,10 +1249,10 @@ pre code.hljs{
 }
 .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-982f5078] {
+.selectinput[data-v-9574c8a2] {
 	width: 100%;
 }
-.selectinput-option[data-v-982f5078] {
+.selectinput-option[data-v-9574c8a2] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1264,23 +1264,23 @@ pre code.hljs{
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-982f5078]{
+.selectinput-option .bgl_icon-font[data-v-9574c8a2]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-982f5078] {
+.selectinput-options.multiselect .selectinput-option[data-v-9574c8a2] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-982f5078] {
+.selectinput-options[data-v-9574c8a2] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-982f5078]:hover, .highlight[data-v-982f5078] {
+.selectinput-option[data-v-9574c8a2]:hover, .highlight[data-v-9574c8a2] {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-982f5078] {
+.isEmpty p[data-v-9574c8a2] {
 	opacity: 0.3;
 }
-.selected[data-v-982f5078]{
+.selected[data-v-9574c8a2]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -1712,33 +1712,33 @@ pre code.hljs{
 	justify-content: flex-start !important;
 }
 
-.bgl_sidebar[data-v-51cedd11] {
+.bgl_sidebar[data-v-0cd6a0fb] {
 }
-.toggleNav[data-v-51cedd11] {
+.toggleNav[data-v-0cd6a0fb] {
 	height: 22px !important;
 	width: 22px !important;
 	transition: var(--bgl-transition);
 	top: 2rem;
 	inset-inline-end: -3px;
 }
-.toggleNav[data-v-51cedd11]:hover {
+.toggleNav[data-v-0cd6a0fb]:hover {
 	opacity: 1;
 }
-.wideNav .toggleNav[data-v-51cedd11] {
+.wideNav .toggleNav[data-v-0cd6a0fb] {
 	transform: rotate(180deg);
 }
-[dir='rtl'] .toggleNav[data-v-51cedd11] {
+[dir='rtl'] .toggleNav[data-v-0cd6a0fb] {
 	transform: rotate(180deg);
 }
-[dir='rtl'] .wideNav .toggleNav[data-v-51cedd11] {
+[dir='rtl'] .wideNav .toggleNav[data-v-0cd6a0fb] {
 	transform: rotate(0deg);
 }
-.showP-enter-active[data-v-51cedd11],
-.showP-leave-active[data-v-51cedd11] {
+.showP-enter-active[data-v-0cd6a0fb],
+.showP-leave-active[data-v-0cd6a0fb] {
   transition: all 0.5s ease;
 }
-.showP-enter-from[data-v-51cedd11],
-.showP-leave-to[data-v-51cedd11] {
+.showP-enter-from[data-v-0cd6a0fb],
+.showP-leave-to[data-v-0cd6a0fb] {
   opacity: 0;
   transform: translateX(-20px);
 }
@@ -3138,25 +3138,25 @@ body:has(.bg-dark.is-active) {
 }
 }
 
-.bgl_pill-btn[data-v-5476be6c]{
+.bgl_pill-btn[data-v-4249cc3e]{
 	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-5476be6c] {
+.loading[data-v-4249cc3e] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-5476be6c 1s linear infinite;
+  animation: spin-4249cc3e 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-.bgl_flatPill .loading[data-v-5476be6c] {
+.bgl_flatPill .loading[data-v-4249cc3e] {
 	border-bottom: 2px solid var(--bgl-text-color);
 }
-@keyframes spin-5476be6c {
+@keyframes spin-4249cc3e {
 0% {
     transform: rotate(0deg);
 }
@@ -3164,11 +3164,11 @@ body:has(.bg-dark.is-active) {
     transform: rotate(360deg);
 }
 }
-.bgl_pill[data-v-5476be6c] {
+.bgl_pill[data-v-4249cc3e] {
   padding-inline: 0.25rem;
   transition: var(--bgl-transition);
-  background-color: var(--5217b464);
-  color: var(--0b2b363f);
+  background-color: var(--33699ebd);
+  color: var(--bd23d150);
   display: inline-block;
   margin-inline-end: 0.25rem;
   border-radius: var(--pill-border-radius);
@@ -3176,45 +3176,45 @@ body:has(.bg-dark.is-active) {
   vertical-align: middle;
   margin-bottom: 0.25rem;
 }
-.bgl_pill[disabled="true"][data-v-5476be6c] {
+.bgl_pill[disabled="true"][data-v-4249cc3e] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_pill-flex[data-v-5476be6c] {
+.bgl_pill-flex[data-v-4249cc3e] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_pill.bgl_flatPill[data-v-5476be6c] {
+.bgl_pill.bgl_flatPill[data-v-4249cc3e] {
   background: transparent;
 }
-.bgl_pill.round[data-v-5476be6c] {
+.bgl_pill.round[data-v-4249cc3e] {
   border-radius: 1000px;
 }
-.bgl_pill-border[data-v-5476be6c] {
-  outline: 1px solid var(--5217b464);
-  color: var(--5217b464);
+.bgl_pill-border[data-v-4249cc3e] {
+  outline: 1px solid var(--33699ebd);
+  color: var(--33699ebd);
   background: transparent;
 }
 
-.table-list-wrap[data-v-fae54756] {
+.table-list-wrap[data-v-4a5861ed] {
 	min-height: 150px;
 }
-.selected[data-v-fae54756] {
+.selected[data-v-4a5861ed] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-fae54756]:hover {
+tbody tr.selected[data-v-4a5861ed]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-fae54756] {
+.loading-table[data-v-4a5861ed] {
 	position: relative;
 }
-.inset[data-v-fae54756] {
+.inset[data-v-4a5861ed] {
 	inset: 0;
 }
-.loading-table-animation[data-v-fae54756] {
+.loading-table-animation[data-v-4a5861ed] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -3222,9 +3222,9 @@ tbody tr.selected[data-v-fae54756]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-fae54756 1s linear infinite;
+	animation: loading-table-4a5861ed 1s linear infinite;
 }
-@keyframes loading-table-fae54756 {
+@keyframes loading-table-4a5861ed {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -3232,51 +3232,51 @@ tbody tr.selected[data-v-fae54756]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-fae54756] {
+.list-arrows[data-v-4a5861ed] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-fae54756] {
+.list-arrows .bgl_icon-font[data-v-4a5861ed] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-fae54756] {
+.list-arrows.sorted[data-v-4a5861ed] {
 	opacity: 1;
 }
-.col img[data-v-fae54756] {
+.col img[data-v-4a5861ed] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-fae54756] {
+.list-arrows.sorted .desc[data-v-4a5861ed] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-fae54756] {
+table[data-v-4a5861ed] {
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-fae54756] {
+th[data-v-4a5861ed] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--c3b285e8);
+	height: var(--0469f9a7);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-fae54756] {
+.embedded-field[data-v-4a5861ed] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-fae54756] {
+.row[data-v-4a5861ed] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-fae54756] {
+.row.first-row[data-v-4a5861ed] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -3285,7 +3285,7 @@ th[data-v-fae54756] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-fae54756]::after {
+.row.first-row[data-v-4a5861ed]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3293,30 +3293,30 @@ th[data-v-fae54756] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-fae54756] {
+.first-row .col[data-v-4a5861ed] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-fae54756] {
+.col[data-v-4a5861ed] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-fae54756]:has(.bagel-input) {
+.col[data-v-4a5861ed]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-fae54756] {
+.col > div[data-v-4a5861ed] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-fae54756] {
+.max-col-width[data-v-4a5861ed] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-fae54756] {
+.col.check .bgl_icon-font[data-v-4a5861ed] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -3327,35 +3327,35 @@ th[data-v-fae54756] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-fae54756] {
+.rows[data-v-4a5861ed] {
 	font-size: 0.88em;
 }
-.table-list[data-v-fae54756] {
+.table-list[data-v-4a5861ed] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-fae54756] {
+.BagelTable .table-list[data-v-4a5861ed] {
 	overflow: unset;
 }
-.row-item[data-v-fae54756] {
-	height: var(--c3b285e8);
+.row-item[data-v-4a5861ed] {
+	height: var(--0469f9a7);
 	transition: all 200ms ease;
 }
-.row-item[data-v-fae54756]:hover {
+.row-item[data-v-4a5861ed]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-fae54756] {
+.row-item input[type='checkbox'][data-v-4a5861ed] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-fae54756] {
+.infinite-wrapper[data-v-4a5861ed] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-fae54756] {
+input[type='checkbox'][data-v-4a5861ed] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -3367,7 +3367,7 @@ input[type='checkbox'][data-v-fae54756] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-fae54756]::before {
+input[type='checkbox'][data-v-4a5861ed]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -3380,18 +3380,18 @@ input[type='checkbox'][data-v-fae54756]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-fae54756]:hover::before {
+input[type='checkbox'][data-v-4a5861ed]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-fae54756] {
+[lang='he'] [dir='ltr'][data-v-4a5861ed] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-fae54756] {
+th input[type='checkbox'][data-v-4a5861ed] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-fae54756]::after {
+th[data-v-4a5861ed]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3399,24 +3399,24 @@ th[data-v-fae54756]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-fae54756] {
+tr[data-v-4a5861ed] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-fae54756],
-th[data-v-fae54756] {
+td[data-v-4a5861ed],
+th[data-v-4a5861ed] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-fae54756] {
+tbody tr[data-v-4a5861ed] {
 	font-size: 0.88em;
-	height: var(--c3b285e8);
+	height: var(--0469f9a7);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-fae54756]:hover {
+tbody tr[data-v-4a5861ed]:hover {
 	background: var(--bgl-gray-light);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1004",
+  "version": "0.0.1006",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -80,7 +80,6 @@
     "access": "public"
   },
   "dependencies": {
-    "heic2any": "^0.0.4",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",
     "floating-vue": "^5.2.2",

package/src/components/BglVideo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { watch } from 'vue'
+
 interface Props {
 	src?: string
 	autoplay?: boolean
@@ -6,14 +8,35 @@ interface Props {
 	aspectRatio?: string
 	controls?: boolean
 	loop?: boolean
+	status?: string
+	playsinline?: boolean
 }
 
 const props = defineProps<Props>()
 
+const videoFormat = $computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() || 'mp4')
+
 const aspectRatio = $computed(
 	() => props.aspectRatio?.replace(':', '/') || '16/9',
 )
 
+const video = $ref<HTMLVideoElement | null>()
+
+function play() {
+	video?.play()
+}
+
+function pause() {
+	video?.pause()
+}
+
+watch(() => props.status, (status) => {
+	if (status === 'play') play()
+	if (status === 'pause') pause()
+})
+
+defineExpose({ play, pause })
+
 const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
@@ -58,14 +81,16 @@ const videoUrl = $computed(() => {
 		/>
 		<video
 			v-else-if="src"
-			:src="src"
+			ref="video"
 			:autoplay="autoplay"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"
 			:controls="controls"
-			playsinline
-		/>
+			:playsinline="playsinline"
+		>
+			<source :src="src" :type="`video/${videoFormat}`">
+		</video>
 	</div>
 </template>
 

package/src/components/Image.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
+import { Skeleton, normalizeURL, normalizeDimension, appendScript } from '@bagelink/vue'
 import { watch } from 'vue'
 
+declare global {
+	interface Window {
+		heic2any: any
+	}
+}
+
 const { height, width, alt = '', src } = defineProps<{
 	src: string
 	alt?: string
@@ -35,10 +41,10 @@ async function loadImage(src: string) {
 			}
 		}
 		try {
+			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
 			const response = await fetch(src)
 			const blob = await response.blob()
-			const { default: heic2any } = await import('heic2any')
-			const convertedBlob = await heic2any({ blob }) as Blob
+			const convertedBlob = await window.heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
 			// Only attempt to cache if the cache API is available
 			if ('caches' in window) {
@@ -72,9 +78,8 @@ watch(() => src, loadImage, { immediate: true })
 <style scoped>
 .img-web-kit {
 	max-width: 100%;
-    vertical-align: middle;
-    border: 0;
+	vertical-align: middle;
+	border: 0;
 	width: 100%;
-
 }
 </style>

package/src/components/Pill.vue

@@ -86,7 +86,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btn" class="flex h-100">
-					<Btn class="bgl_pill-btn" thin v-bind="btn" />
+					<Btn class="bgl_pill-btn" round thin v-bind="btn" />
 				</div>
 			</div>
 			<MaterialIcon v-if="icon" :icon="icon" />
@@ -98,7 +98,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">
-					<Btn class="bgl_pill-btn" thin v-bind="btnEnd" />
+					<Btn class="bgl_pill-btn" round thin v-bind="btnEnd" />
 				</div>
 			</div>
 		</div>