@poveste/controls 0.2.0 → 0.3.0

package/src/components/radio/HstRadio.vue

@@ -16,6 +16,10 @@ const props = defineProps<{
   options: HstControlOption[]
 }>()
 
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
 const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   if (Array.isArray(props.options)) {
     return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
@@ -30,10 +34,6 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   return props.options
 })
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
 function selectOption(value: string) {
   emit('update:modelValue', value)
   animationEnabled.value = true
@@ -47,11 +47,11 @@ const animationEnabled = ref(false)
   <HstWrapper
     role="group"
     :title="title"
-    class="poveste-radio ptw-cursor-text"
+    class="poveste-radio 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"
@@ -62,13 +62,13 @@ const animationEnabled = ref(false)
           :name="`${value}-radio_${title}`"
           :value="value"
           :checked="value === modelValue"
-          class="!ptw-hidden"
+          class="hidden!"
           @change="selectOption(value)"
         >
         <label
           tabindex="0"
           :for="`${value}-radio_${title}`"
-          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="selectOption(value)"
           @keydown.space.prevent="selectOption(value)"
         >
@@ -76,24 +76,24 @@ const animationEnabled = ref(false)
             width="16"
             height="16"
             viewBox="-12 -12 24 24"
-            class="ptw-relative ptw-z-10 ptw-border ptw-border-solid  ptw-text-inherit ptw-rounded-full ptw-box-border ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out ptw-mr-2 group-hover:ptw-border-primary-500"
+            class="relative z-10 border border-solid  text-inherit rounded-full box-border inset-0 transition-border duration-150 ease-out mr-2 group-hover:border-primary-500"
             :class="[
               modelValue === value
-                ? 'ptw-border-primary-500'
-                : 'ptw-border-black/25 dark:ptw-border-white/25',
+                ? 'border-primary-500'
+                : 'border-black/25 dark:border-white/25',
             ]"
           >
             <circle
               r="7"
-              class="ptw-will-change-transform"
+              class="will-change-transform"
               :class="[
-                animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
+                animationEnabled ? 'transition-all' : 'transition-none',
                 {
-                  'ptw-delay-150': modelValue === value,
+                  'delay-150': modelValue === value,
                 },
                 modelValue === value
-                  ? 'ptw-fill-primary-500'
-                  : 'ptw-fill-transparent ptw-scale-0',
+                  ? 'fill-primary-500'
+                  : 'fill-transparent scale-0',
               ]"
             />
           </svg>

package/src/components/select/CustomSelect.vue

@@ -50,27 +50,27 @@ function selectValue(value: any, hide: () => void) {
     auto-boundary-max-size
   >
     <div
-      class="ptw-cursor-pointer ptw-w-full ptw-outline-none ptw-px-2 ptw-h-[27px] -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 hover:ptw-border-primary-500 dark:hover:ptw-border-primary-500 ptw-rounded-sm ptw-flex ptw-gap-2 ptw-items-center ptw-leading-normal"
+      class="cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal"
     >
-      <div class="ptw-flex-1 ptw-truncate">
+      <div class="flex-1 truncate">
         <slot :label="selectedLabel">
           {{ selectedLabel }}
         </slot>
       </div>
       <Icon
         icon="carbon:chevron-sort"
-        class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-ml-auto"
+        class="w-4 h-4 flex-none ml-auto"
       />
     </div>
     <template #popper="{ hide }">
-      <div class="ptw-flex ptw-flex-col ptw-bg-gray-50 dark:ptw-bg-gray-700">
+      <div class="flex flex-col bg-gray-50 dark:bg-gray-700">
         <div
           v-for="[value, label] of formattedOptions"
           v-bind="{ ...$attrs, class: null, style: null }"
           :key="label"
-          class="ptw-px-2 ptw-py-1 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
+          class="px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
           :class="{
-            'ptw-bg-primary-200 dark:ptw-bg-primary-800': props.modelValue === value,
+            'bg-primary-200 dark:bg-primary-800': props.modelValue === value,
           }"
           @click="selectValue(value, hide)"
         >
@@ -82,6 +82,9 @@ function selectValue(value: any, hide: () => void) {
 </template>
 
 <style lang="postcss">
+/* v4: @apply in a component <style> needs the theme referenced explicitly. */
+@reference "../../style/main.css";
+
 /* @TODO custom themes */
 
 .v-popper {
@@ -89,18 +92,22 @@ function selectValue(value: any, hide: () => void) {
 }
 
 .v-popper--theme-dropdown {
-  .ptw-dark & {
-    .v-popper__inner {
-      @apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
-    }
-
-    .v-popper__arrow-inner {
-      @apply ptw-border-gray-700;
-    }
-
-    .v-popper__arrow-outer {
-      @apply ptw-border-gray-850;
-    }
+  /*
+   * `dark:` rather than `.ptw-dark &` — the chrome CSS is wrapped in `@scope`
+   * and `.ptw-dark` lives on `<html>`, above the scope root, so a descendant
+   * rule keyed on it never matches and the select's options fall back to
+   * floating-vue's stock light theme (black text on the dark UI). See #101.
+   */
+  .v-popper__inner {
+    @apply dark:bg-gray-700 dark:border-gray-850 dark:text-gray-100;
+  }
+
+  .v-popper__arrow-inner {
+    @apply dark:border-gray-700;
+  }
+
+  .v-popper__arrow-outer {
+    @apply dark:border-gray-850;
   }
 
   &.v-popper__popper--show-from .v-popper__wrapper {

package/src/components/select/HstSelect.story.vue

@@ -79,7 +79,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ options }}</pre>
+        <pre class="text-xs bg-gray-50 dark:bg-gray-600 rounded p-4">{{ options }}</pre>
         <HstSelect
           v-model="state.select"
           title="Games"
@@ -100,7 +100,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ objectOptions }}</pre>
+        <pre class="text-xs bg-gray-50 dark:bg-gray-600 rounded p-4">{{ objectOptions }}</pre>
         <HstSelect
           v-model="state.select"
           title="Games"
@@ -121,7 +121,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ flatOptions }}</pre>
+        <pre class="text-xs bg-gray-50 dark:bg-gray-600 rounded p-4">{{ flatOptions }}</pre>
         <HstSelect
           v-model="state.select"
           title="Select"
@@ -142,7 +142,7 @@ function initState() {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <pre class="ptw-text-xs ptw-bg-gray-50 dark:ptw-bg-gray-600 ptw-rounded ptw-p-4">{{ numberOptions }}</pre>
+        <pre class="text-xs bg-gray-50 dark:bg-gray-600 rounded p-4">{{ numberOptions }}</pre>
         <HstSelect
           v-model="state.count"
           title="Select"

package/src/components/select/HstSelect.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
 <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"
   >

package/src/components/slider/HstSlider.vue

@@ -50,19 +50,19 @@ const tooltipStyle = computed<CSSProperties>(() => {
 
 <template>
   <HstWrapper
-    class="poveste-slider ptw-items-center"
+    class="poveste-slider items-center"
     :title="title"
     :class="$attrs.class"
     :style="$attrs.style"
   >
-    <div class="ptw-relative ptw-w-full ptw-flex ptw-items-center">
-      <div class="ptw-absolute ptw-inset-0 ptw-flex ptw-items-center">
-        <div class="ptw-border ptw-border-black/25 dark:ptw-border-white/25 ptw-h-1 ptw-w-full ptw-rounded-full" />
+    <div class="relative w-full flex items-center">
+      <div class="absolute inset-0 flex items-center">
+        <div class="border border-black/25 dark:border-white/25 h-1 w-full rounded-full" />
       </div>
       <input
         ref="input"
         v-model.number="numberModel"
-        class="ptw-range-input ptw-appearance-none ptw-border-0 ptw-bg-transparent ptw-cursor-pointer ptw-relative ptw-w-full ptw-m-0 ptw-text-gray-700"
+        class="range-input appearance-none border-0 bg-transparent cursor-pointer relative w-full m-0 text-gray-700"
         type="range"
         v-bind="{ ...$attrs, class: null, style: null, min, max }"
         @mouseover="showTooltip = true"
@@ -71,7 +71,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
       <div
         v-if="showTooltip"
         v-tooltip="{ content: modelValue.toString(), shown: true, distance: 16, delay: 0 }"
-        class="ptw-absolute"
+        class="absolute"
         :style="tooltipStyle"
       />
     </div>
@@ -79,25 +79,28 @@ const tooltipStyle = computed<CSSProperties>(() => {
 </template>
 
 <style lang="pcss">
-.ptw-range-input {
+/* v4: @apply in a component <style> needs the theme referenced explicitly. */
+@reference "../../style/main.css";
+
+.range-input {
   &::-webkit-slider-thumb {
-    @apply ptw-appearance-none ptw-h-3 ptw-w-3 ptw-bg-white dark:ptw-bg-gray-700 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-full;
+    @apply appearance-none h-3 w-3 bg-white dark:bg-gray-700 border border-solid border-black/25 dark:border-white/25 rounded-full;
   }
 
   &:hover::-webkit-slider-thumb {
-    @apply !ptw-bg-primary-500  !ptw-border-primary-500;
+    @apply bg-primary-500!  border-primary-500!;
   }
 }
 
 /* Separate rules for -moz-range-thumb to prevent a bug with Safari that causes it to ignore custom style */
 
-.ptw-range-input {
+.range-input {
   &::-moz-range-thumb {
-    @apply ptw-appearance-none ptw-h-3 ptw-w-3 ptw-bg-white dark:ptw-bg-gray-700 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 ptw-rounded-full;
+    @apply appearance-none h-3 w-3 bg-white dark:bg-gray-700 border border-solid border-black/25 dark:border-white/25 rounded-full;
   }
 
   &:hover::-moz-range-thumb {
-    @apply !ptw-bg-primary-500  !ptw-border-primary-500;
+    @apply bg-primary-500!  border-primary-500!;
   }
 }
 </style>

package/src/components/text/HstText.vue

@@ -23,7 +23,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-text ptw-cursor-text ptw-items-center"
+    class="poveste-text cursor-text items-center"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       v-bind="{ ...$attrs, class: null, style: null }"
       type="text"
       :value="modelValue"
-      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="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
 

package/src/components/textarea/HstTextarea.vue

@@ -24,7 +24,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="poveste-textarea ptw-cursor-text"
+    class="poveste-textarea cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"
@@ -33,7 +33,7 @@ const input = ref<HTMLInputElement>()
       ref="input"
       v-bind="{ ...$attrs, class: null, style: null }"
       :value="modelValue"
-      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 ptw-box-border ptw-resize-y ptw-min-h-[26px]"
+      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 box-border resize-y min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
 

package/src/style/main.css

@@ -1,13 +1,61 @@
 @import 'floating-vue/dist/style.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+ * Tailwind v4. Preflight is intentionally omitted (was `corePlugins.preflight:
+ * false` in v3) by importing the theme + utilities layers individually. The
+ * `ptw-` utility prefix is gone — chrome/story isolation is handled by @scope (#27).
+ */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
 
+/* Chrome dark mode. Deliberately a distinct class from the story-side
+   `theme.darkClass` default (`dark`) so chrome and story themes stay independent —
+   in v3 the `ptw-` prefix applied to the dark class and kept them separate. */
+@custom-variant dark (&:where(.ptw-dark, .ptw-dark *));
+
+@theme {
+  /* primary = emerald (ported from the root v3 config) */
+  --color-primary-50: var(--color-emerald-50);
+  --color-primary-100: var(--color-emerald-100);
+  --color-primary-200: var(--color-emerald-200);
+  --color-primary-300: var(--color-emerald-300);
+  --color-primary-400: var(--color-emerald-400);
+  --color-primary-500: var(--color-emerald-500);
+  --color-primary-600: var(--color-emerald-600);
+  --color-primary-700: var(--color-emerald-700);
+  --color-primary-800: var(--color-emerald-800);
+  --color-primary-900: var(--color-emerald-900);
+  --color-primary-950: var(--color-emerald-950);
+
+  /* gray = zinc, plus the custom 750/850/950 shades from the root v3 config */
+  --color-gray-50: var(--color-zinc-50);
+  --color-gray-100: var(--color-zinc-100);
+  --color-gray-200: var(--color-zinc-200);
+  --color-gray-300: var(--color-zinc-300);
+  --color-gray-400: var(--color-zinc-400);
+  --color-gray-500: var(--color-zinc-500);
+  --color-gray-600: var(--color-zinc-600);
+  --color-gray-700: var(--color-zinc-700);
+  --color-gray-750: #323238;
+  --color-gray-800: var(--color-zinc-800);
+  --color-gray-850: #1f1f21;
+  --color-gray-900: var(--color-zinc-900);
+  --color-gray-950: #101012;
+
+  /* border radius (ported from the root v3 config) */
+  --radius-sm: 0.25rem;
+  --radius: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
+}
 
 body {
   font-size: 1.125rem;
-  @apply dark:ptw-text-gray-100;
+  @apply dark:text-gray-100;
 }
 
 @media (min-width: 640px) {

package/tsconfig.json

@@ -10,7 +10,7 @@
     "baseUrl": ".",
     "rootDir": "src",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     // Alias
     "paths": {
       "floating-vue": ["./node_modules/@poveste/vendors/floating-vue"],

package/tailwind.config.cjs

@@ -1,13 +0,0 @@
-const path = require('node:path')
-const inheritedConfig = require('../../tailwind.config.cjs')
-
-module.exports = {
-  ...inheritedConfig,
-  prefix: 'ptw-',
-  content: [
-    path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
-  ],
-  corePlugins: {
-    preflight: false,
-  },
-}