@indielayer/ui 1.3.0 → 1.5.0

package/src/components/select/Select.vue

@@ -1,21 +1,20 @@
 <script lang="ts">
 const selectProps = {
+  ...useColors.props('primary'),
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
   native: Boolean,
 }
 
 export type SelectOption = {
   value: number | string;
-  disabled: boolean;
   label: string;
+  disabled?: boolean;
 }
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
@@ -35,11 +34,12 @@ export default {
 <script setup lang="ts">
 import { computed, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, nextTick, unref } from 'vue'
 import { useEventListener } from '@vueuse/core'
+import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { checkIcon, chevronDownIcon } from '../../common/icons'
+import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -230,6 +230,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   inputListeners,
   reset,
   validate,
@@ -326,6 +327,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
     v-on="labelListeners"
   >
     <div class="relative">
@@ -335,7 +337,8 @@ defineExpose({ focus, blur, reset, validate, setError })
             <x-tag
               v-for="value in selected"
               :key="value"
-              size="sm"
+              size="xs"
+              outlined
               removable
               @remove="(e: Event) => { handleRemove(e, value) }"
             >{{ getLabel(value) }}</x-tag>
@@ -347,7 +350,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <template v-else>
           <div
             v-if="placeholder"
-            class="text-gray-400 dark:text-gray-500"
+            class="text-secondary-400 dark:text-secondary-500"
           >
             {{ placeholder }}
           </div>
@@ -357,10 +360,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        block
         :disabled="disabled || loading || readonly"
-        :dismiss-on-click="!multiple"
-        align="left"
       >
         <div
           :class="[classes.box]"
@@ -370,7 +370,8 @@ defineExpose({ focus, blur, reset, validate, setError })
               <x-tag
                 v-for="value in selected"
                 :key="value"
-                size="sm"
+                size="xs"
+                outlined
                 removable
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
@@ -383,7 +384,7 @@ defineExpose({ focus, blur, reset, validate, setError })
           <template v-else>
             <div
               v-if="placeholder"
-              class="text-gray-400 dark:text-gray-500"
+              class="text-secondary-400 dark:text-secondary-500"
             >
               {{ placeholder }}
             </div>
@@ -402,12 +403,12 @@ defineExpose({ focus, blur, reset, validate, setError })
                 :size="size"
                 :disabled="item.disabled"
                 :selected="index === selectedIndex"
-                color="primary"
+                :color="color"
                 filled
                 @click="() => !multiple && popoverRef?.hide()"
               />
             </template>
-            <div v-else class="px-2 text-center text-gray-400">
+            <div v-else class="px-2 text-center text-secondary-400">
               No options
             </div>
           </x-popover-container>
@@ -415,6 +416,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </x-popover>
 
       <select
+        :id="id"
         ref="elRef"
         v-model="selected"
         tabindex="-1"
@@ -439,7 +441,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <x-spinner v-if="loading" :size="size" />
         <slot v-else name="icon">
           <x-icon
-            :icon="chevronDownIcon"
+            :icon="selectIcon"
             :class="[classes.icon]"
           />
         </slot>
@@ -447,6 +449,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/select/theme/Select.base.theme.ts

@@ -5,9 +5,9 @@ const theme: SelectTheme = {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
+      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
       else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
@@ -15,11 +15,11 @@ const theme: SelectTheme = {
       else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
       else classes.push('px-3 py-2')
 
-      if (props.disabled) classes.push('bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed')
-      else classes.push('bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+      if (props.disabled) classes.push('bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed')
+      else classes.push('bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       if (data.errorInternal) {
-        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+        classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
       }
@@ -27,7 +27,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'p-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
@@ -39,8 +39,8 @@ const theme: SelectTheme = {
       else if (props.size === 'xl') classes.push('h-7 w-7')
       else classes.push('h-5 w-5')
 
-      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
-      else classes.push('text-gray-500 dark:text-gray-400')
+      if (props.disabled) classes.push('text-secondary-300 dark:text-secondary-500')
+      else classes.push('text-secondary-500 dark:text-secondary-400')
 
       return classes
     },

package/src/components/select/theme/Select.carbon.theme.ts

@@ -5,24 +5,24 @@ const theme: SelectTheme = {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out']
+      const classes = ['w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
       else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
       else classes.push('py-2.5')
 
       if (props.disabled) {
-        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+        classes.push('bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed')
       } else if (props.readonly) {
-        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+        classes.push('bg-white dark:bg-secondary-900 text-secondary-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
       }
 
       if (data.errorInternal) {
-        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+        classes.push('border-error-500 dark:border-error-400 group-focus:outline-error-500')
       } else if (!props.disabled) {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
       }
@@ -30,15 +30,15 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
     icon: ({ props }) => {
       const classes = ['h-5 w-5']
 
-      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
-      else classes.push('text-gray-500 dark:text-gray-400')
+      if (props.disabled) classes.push('text-secondary-300 dark:text-secondary-500')
+      else classes.push('text-secondary-500 dark:text-secondary-400')
 
       return classes
     },

package/src/components/skeleton/Skeleton.vue

@@ -1,9 +1,22 @@
 <script lang="ts">
+const shapes = ['line', 'circle'] as const
+
+export type SkeletonShape = typeof shapes[number]
+
+const validators = {
+  shape: shapes,
+}
+
 const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
   },
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: 'line',
+    validator: (val: SkeletonShape) => validators.shape.includes(val),
+  },
 }
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
@@ -11,11 +24,14 @@ export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 type InternalClasses = 'wrapper'
 export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
 
-export default { name: 'XSkeleton' }
+export default {
+  name: 'XSkeleton',
+  validators,
+}
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -2,7 +2,14 @@ import type { SkeletonTheme } from '../Skeleton.vue'
 
 const theme: SkeletonTheme = {
   classes: {
-    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+    wrapper: ({ props }) => {
+      const classes = ['animate-pulse bg-secondary-300 dark:bg-secondary-600']
+
+      if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
+      else classes.push('rounded-md')
+
+      return classes
+    },
   },
 }
 

package/src/components/slider/Slider.vue

@@ -4,7 +4,6 @@ const sliderProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
   min: Number,
   max: Number,
   step: {
@@ -183,7 +182,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       classes.wrapper,
     ]"
   >
-    <div class="flex items-center relative w-full" >
+    <div class="flex items-center relative w-full">
       <slot name="prefix" :value="value"></slot>
       <div
         ref="progressRef"
@@ -212,6 +211,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <slot name="suffix" :value="value"></slot>
     </div>
 
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
   </x-label>
 </template>

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -4,7 +4,7 @@ const theme: SliderTheme = {
   classes: {
     wrapper: '',
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100',
   },
 
   styles: ({ props, colors, css }) => {

package/src/components/spinner/Spinner.vue

@@ -3,7 +3,7 @@ const spinnerProps = {
   ...useCommon.props(),
   icon: {
     type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".8" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>',
   },
 }
 
@@ -27,5 +27,5 @@ defineProps(spinnerProps)
 </script>
 
 <template>
-  <x-icon :icon="icon" :size="size" view-box="0 0 38 38"/>
+  <x-icon :icon="icon" :size="size" />
 </template>

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,153 @@
+<script lang="ts">
+const validators = {
+  ...useCommon.validators(),
+  variant: ['line'] as const,
+}
+const stepperProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  modelValue: [String, Number],
+  steps: {
+    type: Array as PropType<StepperStep[]>,
+    default: () => [],
+  },
+  variant: {
+    type: String as PropType<StepperVariant>,
+    default: 'line',
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
+  interactive: {
+    type: Boolean,
+    default: true,
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String,
+}
+
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error'
+
+export type StepperStep = {
+  status: StepperStepStatus;
+  label: string;
+  description: string;
+  disabled?: boolean;
+}
+
+export type StepperVariant = typeof validators.variant[number]
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>
+
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon'
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {}
+
+export default {
+  name: 'XStepper',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { type PropType, ref, type ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+import XIcon from '../../components/icon/Icon.vue'
+import { stepperPristineIcon, stepperIncompleteIcon, errorIcon, successIcon } from '../../common/icons'
+
+const props = defineProps(stepperProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+const scrollRef = ref<InstanceType<typeof XScroll> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const stepperRef = ref<HTMLElement | null>(null)
+
+function activateStep(step: StepperStep, index: number) {
+  if (step.disabled || !props.interactive) return
+
+  emit('update:modelValue', index)
+}
+
+function calcIcon(step: StepperStep, index: number) {
+  if (step.status === 'incomplete') return props.iconIncomplete || stepperIncompleteIcon
+  if (step.status === 'error') return props.iconError || errorIcon
+  if (step.status === 'complete') return props.iconComplete || successIcon
+
+  return props.iconPristine || stepperPristineIcon
+}
+
+const { styles, classes, className } = useTheme('Stepper', {}, props)
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapperRef"
+      class="relative"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+      ]"
+    >
+      <x-scroll
+        ref="scrollRef"
+        :scrollbar="false"
+        horizontal
+        mousewheel
+        :class="classes.scroller"
+      >
+        <div
+          ref="stepperRef"
+          class="relative"
+          :class="classes.list"
+        >
+          <component
+            :is="interactive ? 'button' : 'div'"
+            v-for="(step, index) in steps"
+            :key="index"
+            :class="[classes.step, {
+              'cursor-pointer': interactive && !step.disabled,
+              'text-secondary-400 dark:text-secondary-600': step.disabled,
+              'flex-1': grow,
+            }]"
+            :disabled="step.disabled || !interactive"
+            @click="activateStep(step, index)"
+          >
+            <div class="overflow-hidden">
+              <div
+                class="h-0.5 w-full mb-2"
+                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-secondary-200 dark:bg-secondary-700']"
+              ></div>
+              <div class="flex items-start pr-4">
+                <x-icon
+                  :icon="calcIcon(step, index)"
+                  size="sm"
+                  :class="[classes.icon, {
+                    'text-primary-500': step.status === 'complete' || step.status === 'incomplete',
+                    'text-error-500': step.status === 'error',
+                  }]"
+                />
+                <div class="grid text-left">
+                  <div class="text-sm truncate">{{ step.label }}</div>
+                  <div v-if="step.description" class="text-xs text-secondary-500">{{ step.description }}</div>
+                </div>
+              </div>
+            </div>
+          </component>
+        </div>
+      </x-scroll>
+    </div>
+    <div :class="classes.content">
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/src/components/{collapse/__tests__/Collapse.spec.ts → stepper/__tests__/Stepper.spec.ts}

@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Collapse from '../Collapse.vue'
+import Stepper from '../Stepper.vue'
 
-describe('Collapse', () => {
+describe('Stepper', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Collapse)
+    const wrapper = mount(Stepper)
 
     expect(wrapper.vm).toBeTruthy()
   })

package/src/components/stepper/index.ts

@@ -0,0 +1,6 @@
+export { default as XStepper } from './Stepper.vue'
+export type {
+  StepperProps,
+  StepperVariant,
+  StepperTheme,
+} from './Stepper.vue'

package/src/components/stepper/theme/Stepper.base.theme.ts

@@ -0,0 +1,45 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+const theme: StepperTheme = {
+  classes: {
+    wrapper: '',
+
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit items-start']
+
+      return c
+    },
+
+    step: ({ props, data }) => {
+      const classes = ['']
+
+      if (!props.grow) classes.push('w-[8rem]')
+
+      return classes
+    },
+
+    label: ({ props, data }) => {
+      const classes = ['']
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['mr-2 mt-0.5']
+
+      return classes
+    },
+
+    content: 'mt-2 mb-4',
+  },
+}
+
+export default theme

package/src/components/stepper/theme/Stepper.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+import BaseTheme from './Stepper.base.theme'
+
+const theme: StepperTheme = BaseTheme
+
+export default theme

package/src/components/tab/Tab.vue

@@ -6,18 +6,19 @@ const tabProps = {
   },
   tag: {
     type: String,
-    default: 'div',
+    default: 'button',
   },
   to: [String, Object],
   label: String,
   icon: String,
   disabled: Boolean,
   exact: Boolean,
+  removable: Boolean,
 }
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
 
-type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon'
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel'
 type InternalExtraData = {
   selected: boolean;
 } & Pick<TabGroupInjection, 'state'>['state']
@@ -34,13 +35,15 @@ export default {
 <script setup lang="ts">
 import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { injectTabKey } from '../../composables/keys'
+import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
 
+import { closeIcon } from '../../common/icons'
+
 import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
@@ -50,7 +53,7 @@ const computedLabel = computed(() => props.label || props.value)
 const teleportTo = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | typeof XLink | null>(null)
 
-const tabs = inject(injectTabKey, {
+const tabs = inject(injectTabGroupKey, {
   tabsContentRef: ref(null),
   activateTab: () => {},
   state: reactive({
@@ -99,9 +102,11 @@ function onClickTab(e: MouseEvent) {
     return
   }
 
-  if (!props.to && computedValue.value) tabs.activateTab(computedValue.value)
+  if (!props.to && typeof computedValue.value !== 'undefined') tabs.activateTab(computedValue.value)
 }
 
+defineEmits(['remove'])
+
 const { styles, classes, className } = useTheme('Tab', {}, ref({
   ...props,
   size: computedSize.value,
@@ -134,7 +139,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
         'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
         'cursor-pointer': !disabled,
         'cursor-not-allowed': disabled,
-        'cursor-not-allowed text-gray-500': disabled && !selected,
+        'cursor-not-allowed text-secondary-500': disabled && !selected,
       },
     ]"
     :aria-disabled="disabled ? 'true' : undefined"
@@ -156,10 +161,19 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
           :class="classes.icon"
         />
         <div :class="classes.label">{{ computedLabel }}</div>
+        <x-icon
+          v-if="removable"
+          size="sm"
+          :icon="closeIcon"
+          class="ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150"
+          @click="(e: Event) => $emit('remove', e)"
+        />
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <slot></slot>
+      <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
+        <slot></slot>
+      </div>
     </teleport>
   </component>
 </template>