@histoire/controls 0.17.4 → 0.17.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.17.4",
+  "version": "0.17.6",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,34 +31,34 @@
     "*.vue"
   ],
   "dependencies": {
-    "@codemirror/commands": "^6.2.4",
+    "@codemirror/commands": "^6.3.0",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/language": "^6.8.0",
-    "@codemirror/lint": "^6.4.0",
-    "@codemirror/state": "^6.2.1",
+    "@codemirror/language": "^6.9.2",
+    "@codemirror/lint": "^6.4.2",
+    "@codemirror/state": "^6.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.16.0",
-    "@histoire/shared": "^0.17.4",
-    "@histoire/vendors": "^0.17.4"
+    "@codemirror/view": "^6.22.0",
+    "@histoire/shared": "^0.17.6",
+    "@histoire/vendors": "^0.17.6"
   },
   "devDependencies": {
     "@types/node": "^17.0.45",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/runtime-dom": "^3.3.4",
-    "@vue/test-utils": "^2.4.1",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vue/runtime-dom": "^3.3.8",
+    "@vue/test-utils": "^2.4.2",
     "@vueuse/core": "^9.13.0",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "concurrently": "^7.6.0",
     "floating-vue": "2.0.0-beta.19",
     "jsdom": "^22.1.0",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "typescript": "^4.9.5",
     "vite": "^4.5.0",
-    "vitest": "^0.34.1",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.8"
+    "vitest": "^0.34.6",
+    "vue": "^3.3.8",
+    "vue-tsc": "^1.8.22"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",

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

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

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstColorShades from './HstColorShades.vue'
+import type { CSSProperties } from 'vue'
 
 const colors = {
   slate: {
@@ -311,7 +312,7 @@ const colors = {
             class="htw-rounded htw-h-[100px]"
             :style="{
               backgroundColor: color,
-            }"
+            } as CSSProperties"
           />
         </template>
       </HstColorShades>
@@ -329,7 +330,7 @@ const colors = {
             class="htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end"
             :style="{
               color: color,
-            }"
+            } as CSSProperties"
           >
             Aa
           </div>
@@ -349,7 +350,7 @@ const colors = {
             class="htw-rounded htw-h-[100px] htw-border-solid htw-border-2"
             :style="{
               borderColor: color,
-            }"
+            } as CSSProperties"
           />
         </template>
       </HstColorShades>

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

@@ -8,6 +8,7 @@ export default {
 import { computed, ref } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
+import type { CSSProperties } from 'vue'
 
 const props = defineProps<{
   shades: Record<string, any>
@@ -68,7 +69,7 @@ const hover = ref<string>(null)
           class="htw-rounded-full htw-w-16 htw-h-16"
           :style="{
             backgroundColor: shade.color,
-          }"
+          } as CSSProperties"
         />
       </slot>
       <div>

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstTokenList from './HstTokenList.vue'
+import type { CSSProperties } from 'vue'
 
 const tokens = {
   0: 0,
@@ -70,7 +71,7 @@ const tokens = {
               class="htw-h-20 htw-bg-gray-500/50"
               :style="{
                 width: token.value as string,
-              }"
+              } as CSSProperties"
             />
           </div>
         </template>