@poveste/controls 0.2.1 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/controls",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Prebuilt controls components",
   "author": {
     "name": "Sorin Gitlan"
@@ -38,31 +38,31 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.35.0",
-    "@poveste/shared": "^0.2.1",
-    "@poveste/vendors": "^0.2.1"
+    "@poveste/shared": "^0.3.0",
+    "@poveste/vendors": "^0.3.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^22.10.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/runtime-dom": "^3.5.26",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.0.0",
-    "autoprefixer": "^10.4.20",
+    "@vueuse/core": "^14.4.0",
     "concurrently": "^9.1.0",
     "floating-vue": "5.2.2",
-    "jsdom": "^27.4.0",
+    "jsdom": "^30.0.1",
     "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",
-    "vite": "^7.3.0",
-    "vitest": "4.0.16",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10",
     "vue": "^3.5.26",
     "vue-tsc": "^2.1.10"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",
-    "build:css": "tailwindcss -i src/style/main.css -o ./dist/style-standalone.css -c tailwind.config.cjs --postcss postcss.config.cjs",
+    "build:css": "tailwindcss -i src/style/main.css -o ./dist/style-standalone.css",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly",
     "watch": "concurrently \"vite build --watch\" \"pnpm run build:types --watch\"",
     "watch:full": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"pnpm run build:types --watch\"",

package/postcss.config.cjs

@@ -1,8 +1,7 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss')('./tailwind.config.cjs'),
-    require('autoprefixer'),
+    // Processes Tailwind in both the CSS entry and Vue SFC <style> blocks
+    // (@apply/@reference). @tailwindcss/vite misses SFC styles in lib builds.
+    require('@tailwindcss/postcss'),
   ],
 }

package/src/components/HstCopyIcon.vue

@@ -32,7 +32,7 @@ async function action() {
       delay: 0,
     }"
     icon="carbon:copy-file"
-    class="ptw-w-4 ptw-h-4 ptw-opacity-50 hover:ptw-opacity-100 hover:ptw-text-primary-500 ptw-cursor-pointer"
+    class="w-4 h-4 opacity-50 hover:opacity-100 hover:text-primary-500 cursor-pointer"
     @click="action()"
   />
 </template>

package/src/components/HstWrapper.vue

@@ -19,7 +19,7 @@ withDefaults(defineProps<{
 <template>
   <component
     :is="tag"
-    class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap"
+    class="poveste-wrapper histoire-wrapper p-2 hover:bg-primary-100 dark:hover:bg-primary-800 flex gap-2 flex-wrap"
   >
     <span
       v-tooltip="{
@@ -27,12 +27,12 @@ withDefaults(defineProps<{
         placement: 'left',
         distance: 12,
       }"
-      class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0"
+      class="w-28 whitespace-nowrap text-ellipsis overflow-hidden shrink-0"
     >
       {{ title }}
     </span>
-    <span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1">
-      <span class="ptw-block ptw-grow ptw-max-w-full">
+    <span class="grow max-w-full flex items-center gap-1">
+      <span class="block grow max-w-full">
         <slot />
       </span>
       <slot name="actions" />

package/src/components/button/HstButton.story.vue

@@ -21,7 +21,7 @@ const variants: Array<{ name: string, bind?: unknown }> = [
     >
       <HstButton
         v-bind="variant.bind as {}"
-        class="ptw-p-2"
+        class="p-2"
       >
         Click me!
       </HstButton>

package/src/components/button/HstButton.vue

@@ -5,20 +5,20 @@ export default {
 </script>
 
 <script setup lang="ts">
-const colors = {
-  default: 'ptw-bg-gray-200 dark:ptw-bg-gray-750 ptw-text-gray-900 dark:ptw-text-gray-100 hover:ptw-bg-primary-200 dark:hover:ptw-bg-primary-900',
-  primary: 'ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black',
-  flat: 'ptw-bg-transparent hover:ptw-bg-gray-500/20 ptw-text-gray-900 dark:ptw-text-gray-100',
-}
-
 defineProps<{
   color?: keyof typeof colors
 }>()
+
+const colors = {
+  default: 'bg-gray-200 dark:bg-gray-750 text-gray-900 dark:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900',
+  primary: 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black',
+  flat: 'bg-transparent hover:bg-gray-500/20 text-gray-900 dark:text-gray-100',
+}
 </script>
 
 <template>
   <button
-    class="poveste-button ptw-cursor-pointer ptw-rounded-sm ptw-border-none"
+    class="poveste-button cursor-pointer rounded-sm border-none"
     :class="colors[color ?? 'default']"
   >
     <slot />

package/src/components/button/HstButtonGroup.vue

@@ -17,6 +17,10 @@ const props = defineProps<{
   options: string[] | number[] | HstControlOption[] | Record<string, string | number>
 }>()
 
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
 const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
   if (Array.isArray(props.options)) {
     return props.options.map((value: string | number | HstControlOption) => {
@@ -36,10 +40,6 @@ const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
   }
 })
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
 function selectOption(value: string) {
   emit('update:modelValue', value)
 }
@@ -50,13 +50,13 @@ function selectOption(value: string) {
     tag="div"
     role="group"
     :title="title"
-    class="poveste-button-group ptw-flex-nowrap ptw-items-center"
+    class="poveste-button-group flex-nowrap items-center"
   >
-    <div class="ptw-flex ptw-gap-px ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-sm ptw-p-px">
+    <div class="flex gap-px border border-solid border-black/25 dark:border-white/25 rounded-sm p-px">
       <HstButton
         v-for="{ label, value } of formattedOptions"
         :key="value"
-        class="ptw-px-1 ptw-h-[22px] ptw-flex-1 !ptw-rounded-[3px]"
+        class="px-1 h-[22px] flex-1 rounded-[3px]!"
         :color="value === modelValue ? 'primary' : 'flat'"
         :rounded="false"
         @click="selectOption(value)"

package/src/components/checkbox/HstCheckbox.vue

@@ -42,7 +42,7 @@ const isTrue = computed(() => {
   <HstWrapper
     role="checkbox"
     tabindex="0"
-    class="poveste-checkbox ptw-cursor-pointer ptw-items-center"
+    class="poveste-checkbox cursor-pointer items-center"
     :title="title"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"

package/src/components/checkbox/HstCheckboxList.vue

@@ -17,6 +17,10 @@ const props = defineProps<{
   options: string[] | HstControlOption[]
 }>()
 
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Array<string>): void
+}>()
+
 const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   if (Array.isArray(props.options)) {
     return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
@@ -31,10 +35,6 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Array<string>): void
-}>()
-
 function toggleOption(value: string) {
   if (props.modelValue.includes(value)) {
     emit('update:modelValue', props.modelValue.filter(element => element !== value))
@@ -49,11 +49,11 @@ function toggleOption(value: string) {
   <HstWrapper
     role="group"
     :title="title"
-    class="poveste-checkbox-list ptw-cursor-text"
+    class="poveste-checkbox-list cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >
-    <div class="-ptw-my-1">
+    <div class="-my-1">
       <template
         v-for="(label, value) in formattedOptions"
         :key="value"
@@ -61,14 +61,14 @@ function toggleOption(value: string) {
         <label
           tabindex="0"
           :for="`${value}-radio`"
-          class="ptw-cursor-pointer ptw-flex ptw-items-center ptw-relative ptw-py-1 ptw-group"
+          class="cursor-pointer flex items-center relative py-1 group"
           @keydown.enter.prevent="toggleOption(value)"
           @keydown.space.prevent="toggleOption(value)"
           @click="toggleOption(value)"
         >
           <HstSimpleCheckbox
             :model-value="modelValue.includes(value)"
-            class="ptw-mr-2"
+            class="mr-2"
           />
           {{ label }}
         </label>

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -45,33 +45,33 @@ watch(path, () => {
 
 <template>
   <div
-    class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"
-    :class="{ 'ptw-cursor-pointer': withToggle }"
+    class="poveste-simple-checkbox group text-white w-[16px] h-[16px] relative"
+    :class="{ 'cursor-pointer': withToggle }"
     @click="toggle"
   >
     <div
-      class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500"
+      class="border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500"
       :class="[
         modelValue
-          ? 'ptw-border-primary-500 ptw-border-8'
-          : 'ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150',
+          ? 'border-primary-500 border-8'
+          : 'border-black/25 dark:border-white/25 delay-150',
       ]"
     />
     <svg
       width="16"
       height="16"
       viewBox="0 0 24 24"
-      class="ptw-relative ptw-z-10"
+      class="relative z-10"
     >
       <path
         ref="path"
         d="m 4 12 l 5 5 l 10 -10"
         fill="none"
-        class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out"
+        class="stroke-white stroke-2 duration-200 ease-in-out"
         :class="[
-          animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
+          animationEnabled ? 'transition-all' : 'transition-none',
           {
-            'ptw-delay-150': modelValue,
+            'delay-150': modelValue,
           },
         ]"
         :stroke-dasharray="dasharray"

package/src/components/checkbox/__snapshots__/HstCheckbox.spec.ts.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`hstCheckbox > toggle to checked 1`] = `"<label class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap poveste-checkbox ptw-cursor-pointer ptw-items-center" role="checkbox" tabindex="0"><span class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0 v-popper--has-tooltip">Label</span><span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1"><span class="ptw-block ptw-grow ptw-max-w-full"><div class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"><div class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500 ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150"></div><svg width="16" height="16" viewBox="0 0 24 24" class="ptw-relative ptw-z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out ptw-transition-none" stroke-dasharray="21.21" stroke-dashoffset="21.21"></path></svg></div></span></span></label>"`;
+exports[`hstCheckbox > toggle to checked 1`] = `"<label class="poveste-wrapper histoire-wrapper p-2 hover:bg-primary-100 dark:hover:bg-primary-800 flex gap-2 flex-wrap poveste-checkbox cursor-pointer items-center" role="checkbox" tabindex="0"><span class="w-28 whitespace-nowrap text-ellipsis overflow-hidden shrink-0 v-popper--has-tooltip">Label</span><span class="grow max-w-full flex items-center gap-1"><span class="block grow max-w-full"><div class="poveste-simple-checkbox group text-white w-[16px] h-[16px] relative"><div class="border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500 border-black/25 dark:border-white/25 delay-150"></div><svg width="16" height="16" viewBox="0 0 24 24" class="relative z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="stroke-white stroke-2 duration-200 ease-in-out transition-none" stroke-dasharray="21.21" stroke-dashoffset="21.21"></path></svg></div></span></span></label>"`;
 
-exports[`hstCheckbox > toggle to unchecked 1`] = `"<label class="poveste-wrapper histoire-wrapper ptw-p-2 hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-800 ptw-flex ptw-gap-2 ptw-flex-wrap poveste-checkbox ptw-cursor-pointer ptw-items-center" role="checkbox" tabindex="0"><span class="ptw-w-28 ptw-whitespace-nowrap ptw-text-ellipsis ptw-overflow-hidden ptw-shrink-0 v-popper--has-tooltip">Label</span><span class="ptw-grow ptw-max-w-full ptw-flex ptw-items-center ptw-gap-1"><span class="ptw-block ptw-grow ptw-max-w-full"><div class="poveste-simple-checkbox ptw-group ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative"><div class="ptw-border ptw-border-solid group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out group-hover:ptw-border-primary-500 group-hover:dark:ptw-border-primary-500 ptw-border-primary-500 ptw-border-8"></div><svg width="16" height="16" viewBox="0 0 24 24" class="ptw-relative ptw-z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out ptw-transition-none ptw-delay-150" stroke-dasharray="21.21" stroke-dashoffset="0"></path></svg></div></span></span></label>"`;
+exports[`hstCheckbox > toggle to unchecked 1`] = `"<label class="poveste-wrapper histoire-wrapper p-2 hover:bg-primary-100 dark:hover:bg-primary-800 flex gap-2 flex-wrap poveste-checkbox cursor-pointer items-center" role="checkbox" tabindex="0"><span class="w-28 whitespace-nowrap text-ellipsis overflow-hidden shrink-0 v-popper--has-tooltip">Label</span><span class="grow max-w-full flex items-center gap-1"><span class="block grow max-w-full"><div class="poveste-simple-checkbox group text-white w-[16px] h-[16px] relative"><div class="border border-solid group-active:bg-gray-500/20 rounded-sm box-border absolute inset-0 transition-border duration-150 ease-out group-hover:border-primary-500 group-hover:dark:border-primary-500 border-primary-500 border-8"></div><svg width="16" height="16" viewBox="0 0 24 24" class="relative z-10"><path d="m 4 12 l 5 5 l 10 -10" fill="none" class="stroke-white stroke-2 duration-200 ease-in-out transition-none delay-150" stroke-dasharray="21.21" stroke-dashoffset="0"></path></svg></div></span></span></label>"`;

package/src/components/colorselect/HstColorSelect.vue

@@ -64,16 +64,16 @@ function processChange(inp) {
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-select ptw-cursor-text ptw-items-center"
+    class="poveste-select cursor-text items-center"
     :class="$attrs.class"
     :style="$attrs.style"
   >
-    <div class="ptw-flex ptw-flex-row ptw-gap-1">
+    <div class="flex flex-row gap-1">
       <input
         v-bind="{ ...$attrs, class: null, style: null }"
         v-model="stringModel"
         type="text"
-        class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-px-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm"
+        class="text-inherit bg-transparent w-full outline-none px-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm"
       >
       <input
         type="color"

package/src/components/design-tokens/HstColorShades.story.vue

@@ -309,7 +309,7 @@ const colors = {
       >
         <template #default="{ color }">
           <div
-            class="ptw-rounded ptw-h-[100px]"
+            class="rounded h-[100px]"
             :style="{
               backgroundColor: color,
             } as CSSProperties"
@@ -327,7 +327,7 @@ const colors = {
       >
         <template #default="{ color }">
           <div
-            class="ptw-rounded ptw-h-[100px] ptw-text-5xl ptw-flex ptw-items-end"
+            class="rounded h-[100px] text-5xl flex items-end"
             :style="{
               color,
             } as CSSProperties"
@@ -347,7 +347,7 @@ const colors = {
       >
         <template #default="{ color }">
           <div
-            class="ptw-rounded ptw-h-[100px] ptw-border-solid ptw-border-2"
+            class="rounded h-[100px] border-solid border-2"
             :style="{
               borderColor: color,
             } as CSSProperties"

package/src/components/design-tokens/HstColorShades.vue

@@ -53,12 +53,12 @@ const hover = ref<string>(null)
 <template>
   <div
     v-if="displayedShades.length"
-    class="poveste-color-shades ptw-grid ptw-gap-4 ptw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] ptw-m-4"
+    class="poveste-color-shades grid gap-4 grid-cols-[repeat(auto-fill,minmax(200px,1fr))] m-4"
   >
     <div
       v-for="shade of displayedShades"
       :key="shade.key"
-      class="ptw-flex ptw-flex-col ptw-gap-2"
+      class="flex flex-col gap-2"
       @mouseenter="hover = shade.key"
       @mouseleave="hover = null"
     >
@@ -66,33 +66,33 @@ const hover = ref<string>(null)
         :color="shade.color"
       >
         <div
-          class="ptw-rounded-full ptw-w-16 ptw-h-16"
+          class="rounded-full w-16 h-16"
           :style="{
             backgroundColor: shade.color,
           } as CSSProperties"
         />
       </slot>
       <div>
-        <div class="ptw-flex ptw-gap-1">
+        <div class="flex gap-1">
           <pre
             v-tooltip="shade.name.length > 23 ? shade.name : ''"
-            class="ptw-my-0 ptw-truncate ptw-shrink"
+            class="my-0 truncate shrink"
           >{{ shade.name }}</pre>
           <HstCopyIcon
             v-if="hover === shade.key"
             :content="shade.name"
-            class="ptw-flex-none"
+            class="flex-none"
           />
         </div>
-        <div class="ptw-flex ptw-gap-1">
+        <div class="flex gap-1">
           <pre
             v-tooltip="shade.color.length > 23 ? shade.color : ''"
-            class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink"
+            class="my-0 opacity-50 truncate shrink"
           >{{ shade.color }}</pre>
           <HstCopyIcon
             v-if="hover === shade.key"
             :content="shade.color"
-            class="ptw-flex-none"
+            class="flex-none"
           />
         </div>
       </div>

package/src/components/design-tokens/HstTokenGrid.story.vue

@@ -26,7 +26,7 @@ const tokens = {
       >
         <template #default="{ token }">
           <div
-            class="ptw-w-32 ptw-h-32 ptw-bg-white dark:ptw-bg-black ptw-rounded ptw-mb-2"
+            class="w-32 h-32 bg-white dark:bg-black rounded mb-2"
             :style="token.value"
           />
         </template>

package/src/components/design-tokens/HstTokenGrid.vue

@@ -38,7 +38,7 @@ const hover = ref<string>(null)
 
 <template>
   <div
-    class="poveste-token-grid ptw-bind-col-size ptw-grid ptw-gap-4 ptw-m-4"
+    class="poveste-token-grid bind-col-size grid gap-4 m-4"
     :style="{
       '--poveste-col-size': colSizePx,
     }"
@@ -46,7 +46,7 @@ const hover = ref<string>(null)
     <div
       v-for="token of processedTokens"
       :key="token.key"
-      class="ptw-flex ptw-flex-col ptw-gap-2"
+      class="flex flex-col gap-2"
       @mouseenter="hover = token.key"
       @mouseleave="hover = null"
     >
@@ -54,26 +54,26 @@ const hover = ref<string>(null)
         :token="token"
       />
       <div>
-        <div class="ptw-flex ptw-gap-1">
+        <div class="flex gap-1">
           <pre
             v-tooltip="token.name.length > colSize / 8 ? token.name : ''"
-            class="ptw-my-0 ptw-truncate ptw-shrink"
+            class="my-0 truncate shrink"
           >{{ token.name }}</pre>
           <HstCopyIcon
             v-if="hover === token.key"
             :content="token.name"
-            class="ptw-flex-none"
+            class="flex-none"
           />
         </div>
-        <div class="ptw-flex ptw-gap-1">
+        <div class="flex gap-1">
           <pre
             v-tooltip="token.value.length > colSize / 8 ? token.value : ''"
-            class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink"
+            class="my-0 opacity-50 truncate shrink"
           >{{ token.value }}</pre>
           <HstCopyIcon
             v-if="hover === token.key"
             :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
-            class="ptw-flex-none"
+            class="flex-none"
           />
         </div>
       </div>
@@ -82,7 +82,7 @@ const hover = ref<string>(null)
 </template>
 
 <style>
-.ptw-bind-col-size {
+.bind-col-size {
   grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
 }
 </style>

package/src/components/design-tokens/HstTokenList.story.vue

@@ -66,9 +66,9 @@ const tokens = {
         :get-name="key => `w-${key}`"
       >
         <template #default="{ token }">
-          <div class="ptw-bg-gray-500/10">
+          <div class="bg-gray-500/10">
             <div
-              class="ptw-h-20 ptw-bg-gray-500/50"
+              class="h-20 bg-gray-500/50"
               :style="{
                 width: token.value as string,
               } as CSSProperties"

package/src/components/design-tokens/HstTokenList.vue

@@ -33,28 +33,28 @@ const hover = ref<string>(null)
   <div
     v-for="token of processedTokens"
     :key="token.key"
-    class="poveste-token-list ptw-flex ptw-flex-col ptw-gap-2 ptw-my-8"
+    class="poveste-token-list flex flex-col gap-2 my-8"
     @mouseenter="hover = token.key"
     @mouseleave="hover = null"
   >
     <slot
       :token="token"
     />
-    <div class="ptw-mx-4">
-      <div class="ptw-flex ptw-gap-1">
-        <pre class="ptw-my-0 ptw-truncate ptw-shrink">{{ token.name }}</pre>
+    <div class="mx-4">
+      <div class="flex gap-1">
+        <pre class="my-0 truncate shrink">{{ token.name }}</pre>
         <HstCopyIcon
           v-if="hover === token.key"
           :content="token.name"
-          class="ptw-flex-none"
+          class="flex-none"
         />
       </div>
-      <div class="ptw-flex ptw-gap-1">
-        <pre class="ptw-my-0 ptw-opacity-50 ptw-truncate ptw-shrink">{{ token.value }}</pre>
+      <div class="flex gap-1">
+        <pre class="my-0 opacity-50 truncate shrink">{{ token.value }}</pre>
         <HstCopyIcon
           v-if="hover === token.key"
           :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
-          class="ptw-flex-none"
+          class="flex-none"
         />
       </div>
     </div>

package/src/components/json/HstJson.vue

@@ -120,13 +120,13 @@ watch(() => internalValue.value, () => {
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-json ptw-cursor-text"
+    class="poveste-json cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >
     <div
       ref="editorElement"
-      class="__poveste-json-code ptw-w-full ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus-within:ptw-border-primary-500 dark:focus-within:ptw-border-primary-500 ptw-rounded-sm ptw-box-border ptw-overflow-auto ptw-resize-y ptw-min-h-32 ptw-h-48 ptw-relative"
+      class="__poveste-json-code w-full border border-solid border-black/25 dark:border-white/25 focus-within:border-primary-500 dark:focus-within:border-primary-500 rounded-sm box-border overflow-auto resize-y min-h-32 h-48 relative"
       v-bind="{ ...$attrs, class: null, style: null }"
     />
 
@@ -135,7 +135,7 @@ watch(() => internalValue.value, () => {
         v-if="invalidValue"
         v-tooltip="'JSON error'"
         icon="carbon:warning-alt"
-        class="ptw-text-orange-500"
+        class="text-orange-500"
       />
 
       <slot name="actions" />

package/src/components/number/HstNumber.vue

@@ -67,11 +67,11 @@ onUnmounted(() => {
 
 <template>
   <HstWrapper
-    class="poveste-number ptw-cursor-ew-resize ptw-items-center"
+    class="poveste-number cursor-ew-resize items-center"
     :title="title"
     :class="[
       $attrs.class,
-      { 'ptw-select-none': isDragging },
+      { 'select-none': isDragging },
     ]"
     :style="$attrs.style"
     @click="focusAndSelect"
@@ -83,9 +83,9 @@ onUnmounted(() => {
       v-model.number="numberModel"
       type="number"
       :class="{
-        'ptw-select-none': isDragging,
+        'select-none': isDragging,
       }"
-      class="ptw-text-inherit ptw-bg-transparent ptw-w-full ptw-outline-none ptw-pl-2 ptw-py-1 -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 focus:ptw-border-primary-500 dark:focus:ptw-border-primary-500 ptw-rounded-sm ptw-cursor-ew-resize ptw-box-border"
+      class="text-inherit bg-transparent w-full outline-none pl-2 py-1 -my-1 border border-solid border-black/25 dark:border-white/25 focus:border-primary-500 dark:focus:border-primary-500 rounded-sm cursor-ew-resize box-border"
     >
 
     <template #actions>