@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/components/StepWizard.vue

@@ -113,32 +113,32 @@ defineExpose({ setStepValid })
 
 <template>
   <div
-    :class="['mld-wizard', `mld-wizard--${props.size}`]"
+    :class="['mint-wizard', `mint-wizard--${props.size}`]"
     tabindex="0"
     @keydown="handleKeydown"
   >
     <!-- Progress indicator -->
-    <div v-if="props.showProgress" class="mld-wizard__progress">
+    <div v-if="props.showProgress" class="mint-wizard__progress">
       <slot name="progress" :steps="props.steps" :current="props.modelValue" :states="stepStates">
-        <div class="mld-wizard__steps-indicator">
+        <div class="mint-wizard__steps-indicator">
           <template v-for="(step, index) in props.steps" :key="step.id">
             <!-- Connector line (before each step except first) -->
             <div
               v-if="index > 0"
               :class="[
-                'mld-wizard__step-connector',
-                stepStates[index - 1] === 'completed' ? 'mld-wizard__step-connector--completed' : '',
+                'mint-wizard__step-connector',
+                stepStates[index - 1] === 'completed' ? 'mint-wizard__step-connector--completed' : '',
               ]"
             />
             <!-- Step indicator -->
             <div
               :class="[
-                'mld-wizard__step-indicator',
-                `mld-wizard__step-indicator--${stepStates[index]}`,
+                'mint-wizard__step-indicator',
+                `mint-wizard__step-indicator--${stepStates[index]}`,
               ]"
               @click="goToStep(index)"
             >
-              <div class="mld-wizard__step-dot">
+              <div class="mint-wizard__step-dot">
                 <template v-if="stepStates[index] === 'completed'">
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M20 6 9 17l-5-5" />
@@ -148,7 +148,7 @@ defineExpose({ setStepValid })
                   {{ index + 1 }}
                 </template>
               </div>
-              <div class="mld-wizard__step-label">{{ step.label }}</div>
+              <div class="mint-wizard__step-label">{{ step.label }}</div>
             </div>
           </template>
         </div>
@@ -156,19 +156,19 @@ defineExpose({ setStepValid })
     </div>
 
     <!-- Step content -->
-    <div class="mld-wizard__body">
+    <div class="mint-wizard__body">
       <div
         v-for="(step, index) in props.steps"
         :key="step.id"
         v-show="index === props.modelValue"
-        class="mld-wizard__step-content"
+        class="mint-wizard__step-content"
       >
         <slot :name="`step-${step.id}`" :step="step" :index="index" />
       </div>
     </div>
 
     <!-- Navigation -->
-    <div class="mld-wizard__navigation">
+    <div class="mint-wizard__navigation">
       <slot
         name="navigation"
         :go-back="goBack"
@@ -181,7 +181,7 @@ defineExpose({ setStepValid })
       >
         <button
           type="button"
-          class="mld-wizard__nav-btn mld-wizard__nav-btn--cancel"
+          class="mint-wizard__nav-btn mint-wizard__nav-btn--cancel"
           @click="cancel"
         >
           Cancel
@@ -189,7 +189,7 @@ defineExpose({ setStepValid })
         <div style="flex: 1" />
         <button
           type="button"
-          class="mld-wizard__nav-btn mld-wizard__nav-btn--back"
+          class="mint-wizard__nav-btn mint-wizard__nav-btn--back"
           :disabled="props.modelValue === 0"
           @click="goBack"
         >
@@ -198,7 +198,7 @@ defineExpose({ setStepValid })
         <button
           v-if="props.modelValue < props.steps.length - 1"
           type="button"
-          class="mld-wizard__nav-btn mld-wizard__nav-btn--next"
+          class="mint-wizard__nav-btn mint-wizard__nav-btn--next"
           :disabled="stepValidity[props.modelValue] === false"
           @click="goNext"
         >
@@ -207,7 +207,7 @@ defineExpose({ setStepValid })
         <button
           v-else
           type="button"
-          class="mld-wizard__nav-btn mld-wizard__nav-btn--finish"
+          class="mint-wizard__nav-btn mint-wizard__nav-btn--finish"
           :disabled="stepValidity[props.modelValue] === false"
           @click="finish"
         >

package/src/components/TagsInput.vue

@@ -172,23 +172,23 @@ function onInputEvent() {
 <template>
   <div
     :class="[
-      'mld-tags-input',
-      `mld-tags-input--${size}`,
-      error ? 'mld-tags-input--error' : '',
-      disabled ? 'mld-tags-input--disabled' : '',
-      categories.length ? 'mld-tags-input--categorized' : '',
+      'mint-tags-input',
+      `mint-tags-input--${size}`,
+      error ? 'mint-tags-input--error' : '',
+      disabled ? 'mint-tags-input--disabled' : '',
+      categories.length ? 'mint-tags-input--categorized' : '',
     ]"
   >
     <!-- Category switcher (only if categories defined) -->
-    <div v-if="categories.length" class="mld-tags-input__categories">
+    <div v-if="categories.length" class="mint-tags-input__categories">
       <button
         v-for="cat in categories"
         :key="cat.prefix"
         type="button"
         :class="[
-          'mld-tags-input__category',
-          `mld-tags-input__category--${cat.color ?? 'neutral'}`,
-          activeCategory === cat.prefix ? 'mld-tags-input__category--active' : '',
+          'mint-tags-input__category',
+          `mint-tags-input__category--${cat.color ?? 'neutral'}`,
+          activeCategory === cat.prefix ? 'mint-tags-input__category--active' : '',
         ]"
         :disabled="disabled"
         @click="setCategory(cat.prefix)"
@@ -197,14 +197,14 @@ function onInputEvent() {
       </button>
     </div>
 
-    <div class="mld-tags-input__field" @click="focusInput">
+    <div class="mint-tags-input__field" @click="focusInput">
       <span
         v-for="(tag, index) in modelValue"
         :key="`${tag}-${index}`"
         :class="[
-          'mld-tags-input__tag',
-          `mld-tags-input__tag--${size}`,
-          categoryFor(tag) ? `mld-tags-input__tag--${categoryFor(tag)?.color ?? 'neutral'}` : '',
+          'mint-tags-input__tag',
+          `mint-tags-input__tag--${size}`,
+          categoryFor(tag) ? `mint-tags-input__tag--${categoryFor(tag)?.color ?? 'neutral'}` : '',
         ]"
       >
         {{ tag }}
@@ -212,10 +212,10 @@ function onInputEvent() {
           v-if="!disabled"
           type="button"
           :aria-label="`Remove ${tag}`"
-          class="mld-tags-input__tag-remove"
+          class="mint-tags-input__tag-remove"
           @click.stop="removeTag(index)"
         >
-          <svg class="mld-tags-input__tag-remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+          <svg class="mint-tags-input__tag-remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
             <path d="M18 6 6 18" /><path d="m6 6 12 12" />
           </svg>
         </button>
@@ -227,7 +227,7 @@ function onInputEvent() {
         type="text"
         :placeholder="modelValue.length === 0 ? placeholder : ''"
         :disabled="disabled || !canAddMore"
-        :class="['mld-tags-input__input', `mld-tags-input__input--${size}`]"
+        :class="['mint-tags-input__input', `mint-tags-input__input--${size}`]"
         @keydown="handleKeydown"
         @paste="handlePaste"
         @focus="handleFocus"
@@ -238,20 +238,20 @@ function onInputEvent() {
       <!-- Autocomplete dropdown -->
       <div
         v-if="dropdownOpen && filteredSuggestions.length"
-        class="mld-tags-input__dropdown"
+        class="mint-tags-input__dropdown"
       >
         <button
           v-for="(sug, i) in filteredSuggestions"
           :key="sug.value"
           type="button"
           :class="[
-            'mld-tags-input__dropdown-item',
-            i === highlightedIndex ? 'mld-tags-input__dropdown-item--highlighted' : '',
+            'mint-tags-input__dropdown-item',
+            i === highlightedIndex ? 'mint-tags-input__dropdown-item--highlighted' : '',
           ]"
           @mousedown.prevent="addTag(sug.value)"
         >
           <span>{{ sug.value }}</span>
-          <span v-if="sug.count !== undefined" class="mld-tags-input__dropdown-count">
+          <span v-if="sug.count !== undefined" class="mint-tags-input__dropdown-count">
             {{ sug.count }}
           </span>
         </button>

package/src/components/ThemeToggle.vue

@@ -16,14 +16,14 @@ const { isDark, toggleTheme } = useTheme()
 <template>
   <button
     type="button"
-    :class="['mld-theme-toggle', `mld-theme-toggle--${size}`]"
+    :class="['mint-theme-toggle', `mint-theme-toggle--${size}`]"
     :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
     @click="toggleTheme"
   >
     <!-- Lucide sun -->
     <svg
       v-if="isDark"
-      :class="`mld-theme-toggle__icon--${size}`"
+      :class="`mint-theme-toggle__icon--${size}`"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -36,7 +36,7 @@ const { isDark, toggleTheme } = useTheme()
     <!-- Lucide moon -->
     <svg
       v-else
-      :class="`mld-theme-toggle__icon--${size}`"
+      :class="`mint-theme-toggle__icon--${size}`"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"

package/src/components/TimePicker.vue

@@ -78,7 +78,7 @@ function handleClickOutside(event: MouseEvent) {
 function scrollToActiveSlot() {
   nextTick(() => {
     if (!listRef.value) return
-    const activeEl = listRef.value.querySelector('.mld-time-picker__slot--active') as HTMLElement | null
+    const activeEl = listRef.value.querySelector('.mint-time-picker__slot--active') as HTMLElement | null
     if (activeEl) {
       activeEl.scrollIntoView({ block: 'center' })
     } else if (props.modelValue) {
@@ -191,8 +191,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="mld-time-picker" @keydown="handleKeydown">
-    <div class="mld-time-picker__input-wrapper">
+  <div ref="containerRef" class="mint-time-picker" @keydown="handleKeydown">
+    <div class="mint-time-picker__input-wrapper">
       <input
         type="text"
         readonly
@@ -200,10 +200,10 @@ onUnmounted(() => {
         :placeholder="placeholder"
         :disabled="disabled"
         :class="[
-          'mld-time-picker__input',
-          `mld-time-picker__input--${size}`,
-          error ? 'mld-time-picker__input--error' : '',
-          disabled ? 'mld-time-picker__input--disabled' : '',
+          'mint-time-picker__input',
+          `mint-time-picker__input--${size}`,
+          error ? 'mint-time-picker__input--error' : '',
+          disabled ? 'mint-time-picker__input--disabled' : '',
         ]"
         role="combobox"
         aria-haspopup="listbox"
@@ -213,7 +213,7 @@ onUnmounted(() => {
       <button
         v-if="clearable && modelValue"
         type="button"
-        class="mld-time-picker__clear-btn"
+        class="mint-time-picker__clear-btn"
         aria-label="Clear time"
         @click.stop="clear"
       >
@@ -221,7 +221,7 @@ onUnmounted(() => {
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
-      <div class="mld-time-picker__icon">
+      <div class="mint-time-picker__icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
         </svg>
@@ -229,20 +229,20 @@ onUnmounted(() => {
     </div>
 
     <Transition
-      enter-active-class="mld-time-picker__dropdown-enter-active"
-      enter-from-class="mld-time-picker__dropdown-enter-from"
-      enter-to-class="mld-time-picker__dropdown-enter-to"
-      leave-active-class="mld-time-picker__dropdown-leave-active"
-      leave-from-class="mld-time-picker__dropdown-leave-from"
-      leave-to-class="mld-time-picker__dropdown-leave-to"
+      enter-active-class="mint-time-picker__dropdown-enter-active"
+      enter-from-class="mint-time-picker__dropdown-enter-from"
+      enter-to-class="mint-time-picker__dropdown-enter-to"
+      leave-active-class="mint-time-picker__dropdown-leave-active"
+      leave-from-class="mint-time-picker__dropdown-leave-from"
+      leave-to-class="mint-time-picker__dropdown-leave-to"
     >
       <div
         v-if="isOpen"
-        class="mld-time-picker__dropdown"
+        class="mint-time-picker__dropdown"
       >
         <ul
           ref="listRef"
-          class="mld-time-picker__list"
+          class="mint-time-picker__list"
           role="listbox"
           aria-label="Available times"
         >
@@ -253,10 +253,10 @@ onUnmounted(() => {
             :aria-selected="slot === modelValue"
             :aria-disabled="isSlotDisabled(slot)"
             :class="[
-              'mld-time-picker__slot',
-              slot === modelValue ? 'mld-time-picker__slot--active' : '',
-              isSlotDisabled(slot) ? 'mld-time-picker__slot--disabled' : '',
-              index === highlightedIndex && !isSlotDisabled(slot) ? 'mld-time-picker__slot--highlighted' : '',
+              'mint-time-picker__slot',
+              slot === modelValue ? 'mint-time-picker__slot--active' : '',
+              isSlotDisabled(slot) ? 'mint-time-picker__slot--disabled' : '',
+              index === highlightedIndex && !isSlotDisabled(slot) ? 'mint-time-picker__slot--highlighted' : '',
             ]"
             @click="selectSlot(slot)"
           >

package/src/components/TimeRangeInput.vue

@@ -75,8 +75,8 @@ function onEndChange(value: string | undefined) {
 </script>
 
 <template>
-  <div class="mld-time-range">
-    <div class="mld-time-range__start">
+  <div class="mint-time-range">
+    <div class="mint-time-range__start">
       <TimePicker
         :model-value="startValue"
         :disabled="disabled"
@@ -91,16 +91,16 @@ function onEndChange(value: string | undefined) {
       />
     </div>
 
-    <div class="mld-time-range__separator">
+    <div class="mint-time-range__separator">
       <span
         v-if="showDuration && duration !== null"
-        :class="['mld-time-range__duration', isInvalid ? 'mld-time-range__duration--error' : '']"
+        :class="['mint-time-range__duration', isInvalid ? 'mint-time-range__duration--error' : '']"
       >
         {{ durationLabel }}
       </span>
     </div>
 
-    <div class="mld-time-range__end">
+    <div class="mint-time-range__end">
       <TimePicker
         :model-value="endValue"
         :disabled="disabled"

package/src/components/ToastNotification.vue

@@ -15,12 +15,12 @@ const accentColors: Record<Toast['type'], string> = {
 
 <template>
   <Teleport to="body">
-    <div class="mld-toast__container">
+    <div class="mint-toast__container">
       <TransitionGroup name="toast">
         <div
           v-for="toast in toasts"
           :key="toast.id"
-          :class="['mld-toast__item', `mld-toast__item--${toast.type}`]"
+          :class="['mint-toast__item', `mint-toast__item--${toast.type}`]"
           :style="{
             borderLeftColor: accentColors[toast.type],
           }"
@@ -28,24 +28,24 @@ const accentColors: Record<Toast['type'], string> = {
           @click="dismiss(toast.id)"
         >
           <!-- Lucide circle-check -->
-          <svg v-if="toast.type === 'success'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
             <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
           </svg>
           <!-- Lucide circle-x -->
-          <svg v-else-if="toast.type === 'error'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
             <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
           </svg>
           <!-- Lucide triangle-alert -->
-          <svg v-else-if="toast.type === 'warning'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
             <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
           </svg>
           <!-- Lucide info -->
-          <svg v-else class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
             <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
           </svg>
-          <span class="mld-toast__message">{{ toast.message }}</span>
+          <span class="mint-toast__message">{{ toast.message }}</span>
           <span
-            class="mld-toast__progress"
+            class="mint-toast__progress"
             :style="{
               backgroundColor: accentColors[toast.type],
               animationDuration: `${toast.duration ?? 3500}ms`,

package/src/components/Tooltip.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: undefined,
 })
 
-const tooltipId = `mld-tooltip-${Math.random().toString(36).slice(2, 9)}`
+const tooltipId = `mint-tooltip-${Math.random().toString(36).slice(2, 9)}`
 const visible = ref(false)
 const actualPlacement = ref<Placement>(props.position)
 const triggerRef = ref<HTMLElement | null>(null)
@@ -82,7 +82,7 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
 <template>
   <span
     ref="triggerRef"
-    class="mld-tooltip"
+    class="mint-tooltip"
     :aria-describedby="visible ? tooltipId : undefined"
     @mouseenter="show"
     @mouseleave="hide"
@@ -96,9 +96,9 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
         :id="tooltipId"
         ref="contentRef"
         :class="[
-          'mld-tooltip__content',
-          `mld-tooltip__content--${actualPlacement}`,
-          maxWidth ? 'mld-tooltip__content--multiline' : '',
+          'mint-tooltip__content',
+          `mint-tooltip__content--${actualPlacement}`,
+          maxWidth ? 'mint-tooltip__content--multiline' : '',
         ]"
         :style="{
           top: coords.top,
@@ -107,8 +107,8 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
         }"
         role="tooltip"
       >
-        <span class="mld-tooltip__body">{{ text }}</span>
-        <kbd v-if="shortcut" class="mld-tooltip__shortcut">{{ shortcut }}</kbd>
+        <span class="mint-tooltip__body">{{ text }}</span>
+        <kbd v-if="shortcut" class="mint-tooltip__shortcut">{{ shortcut }}</kbd>
       </span>
     </Teleport>
   </span>

package/src/components/UnitInput.vue

@@ -127,12 +127,12 @@ watch(conversionHint, (hint) => {
 <template>
   <div
     :class="[
-      'mld-unit-input',
-      error ? 'mld-unit-input--error' : '',
-      disabled ? 'mld-unit-input--disabled' : '',
+      'mint-unit-input',
+      error ? 'mint-unit-input--error' : '',
+      disabled ? 'mint-unit-input--disabled' : '',
     ]"
   >
-    <div :class="['mld-unit-input__controls', `mld-unit-input__controls--${size}`]">
+    <div :class="['mint-unit-input__controls', `mint-unit-input__controls--${size}`]">
       <input
         type="number"
         :value="modelValue"
@@ -142,21 +142,21 @@ watch(conversionHint, (hint) => {
         :disabled="disabled"
         :placeholder="placeholder"
         :class="[
-          'mld-unit-input__value',
-          `mld-unit-input__value--${size}`,
-          disabled ? 'mld-unit-input__value--disabled' : '',
+          'mint-unit-input__value',
+          `mint-unit-input__value--${size}`,
+          disabled ? 'mint-unit-input__value--disabled' : '',
         ]"
         aria-label="Value"
         @input="handleValueInput"
       />
 
-      <div class="mld-unit-input__unit">
+      <div class="mint-unit-input__unit">
         <select
           :value="currentUnit"
           :disabled="disabled"
           :class="[
-            'mld-unit-input__unit-select',
-            `mld-unit-input__unit-select--${size}`,
+            'mint-unit-input__unit-select',
+            `mint-unit-input__unit-select--${size}`,
           ]"
           aria-label="Unit"
           @change="handleUnitChange"
@@ -175,7 +175,7 @@ watch(conversionHint, (hint) => {
               v-for="[groupLabel, groupUnits] in groupedUnits.groups"
               :key="groupLabel"
               :label="groupLabel"
-              class="mld-unit-input__unit-group"
+              class="mint-unit-input__unit-group"
             >
               <option
                 v-for="u in groupUnits"
@@ -201,7 +201,7 @@ watch(conversionHint, (hint) => {
 
     <div
       v-if="conversionHint"
-      class="mld-unit-input__conversion-hint"
+      class="mint-unit-input__conversion-hint"
     >
       {{ conversionHint }}
     </div>