@pequity/squirrel 8.1.0 → 8.2.1

package/dist/cjs/chunks/p-btn.js

@@ -37,6 +37,10 @@ const btnClasses = {
         loader: "text-p-purple-60"
       },
       error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
+      "error-outline": {
+        button: "bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30",
+        loader: "text-p-red-50"
+      },
       success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
       "primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
       "secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },

package/dist/cjs/chunks/p-icon.js

@@ -13,7 +13,7 @@ const pIcon = require("../p-icon.js");
 * Licensed under MIT.
 *
 * @license MIT
-* @version 2.3.0
+* @version 3.0.0
 */
 const defaultIconDimensions = Object.freeze(
   {
@@ -1565,15 +1565,7 @@ function exportFunctions() {
     listAPIProviders
   };
   return {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    enableCache: (storage2) => {
-    },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    disableCache: (storage2) => {
-    },
     iconLoaded: iconLoaded$1,
-    iconExists: iconLoaded$1,
-    // deprecated, kept to avoid breaking changes
     getIcon: getIcon$1,
     listIcons: listIcons$1,
     addIcon: addIcon$1,
@@ -2069,27 +2061,7 @@ function defineIconifyIcon(name = "iconify-icon") {
   return IconifyIcon;
 }
 const IconifyIconComponent = defineIconifyIcon() || exportFunctions();
-const {
-  enableCache,
-  disableCache,
-  iconLoaded,
-  iconExists,
-  // deprecated, kept to avoid breaking changes
-  getIcon,
-  listIcons,
-  addIcon,
-  addCollection,
-  calculateSize,
-  buildIcon,
-  iconToHTML,
-  svgToURL,
-  loadIcons,
-  loadIcon,
-  setCustomIconLoader,
-  setCustomIconsLoader,
-  addAPIProvider,
-  _api
-} = IconifyIconComponent;
+const { iconLoaded, getIcon, listIcons, addIcon, addCollection, calculateSize, buildIcon, iconToHTML, svgToURL, loadIcons, loadIcon, setCustomIconLoader, setCustomIconsLoader, addAPIProvider, _api } = IconifyIconComponent;
 const _hoisted_1 = ["icon"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{

package/dist/cjs/chunks/p-steps.js

@@ -8,6 +8,9 @@ const _hoisted_2 = {
   class: "flex items-center"
 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PSteps"
+  },
   __name: "p-steps",
   props: {
     steps: {},

package/dist/cjs/chunks/p-tabs.js

@@ -3,6 +3,9 @@ const vue = require("vue");
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PTabs"
+  },
   __name: "p-tabs",
   props: {
     tabs: {

package/dist/cjs/p-close-btn.js

@@ -2,6 +2,9 @@
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PCloseBtn"
+  },
   __name: "p-close-btn",
   props: {
     variant: {
@@ -32,5 +35,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PCloseBtn = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-f61993bb"]]);
+const PCloseBtn = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-2002dcc8"]]);
 module.exports = PCloseBtn;

package/dist/cjs/p-toggle.js

@@ -71,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return res;
     });
     const toggleLabelClasses = vue.computed(() => {
-      return `${labelClasses.value.replace("mb-1", "")} ml-2`;
+      return `${labelClasses.value.replace("mb-1", "")} ml-2 leading-none`;
     });
     const attrs = vue.computed(() => {
       const { style: style2, class: classes, "data-testid": dataTestId, ...rest } = allAttrs;
@@ -123,5 +123,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-be9ecb77"]]);
+const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c544a8a9"]]);
 module.exports = pToggle;

package/dist/es/chunks/p-btn.js

@@ -36,6 +36,10 @@ const btnClasses = {
         loader: "text-p-purple-60"
       },
       error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
+      "error-outline": {
+        button: "bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30",
+        loader: "text-p-red-50"
+      },
       success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
       "primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
       "secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },

package/dist/es/chunks/p-icon.js

@@ -12,7 +12,7 @@ import { P_ICON_ALIASES } from "../p-icon.js";
 * Licensed under MIT.
 *
 * @license MIT
-* @version 2.3.0
+* @version 3.0.0
 */
 const defaultIconDimensions = Object.freeze(
   {
@@ -1564,15 +1564,7 @@ function exportFunctions() {
     listAPIProviders
   };
   return {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    enableCache: (storage2) => {
-    },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    disableCache: (storage2) => {
-    },
     iconLoaded: iconLoaded$1,
-    iconExists: iconLoaded$1,
-    // deprecated, kept to avoid breaking changes
     getIcon: getIcon$1,
     listIcons: listIcons$1,
     addIcon: addIcon$1,
@@ -2068,27 +2060,7 @@ function defineIconifyIcon(name = "iconify-icon") {
   return IconifyIcon;
 }
 const IconifyIconComponent = defineIconifyIcon() || exportFunctions();
-const {
-  enableCache,
-  disableCache,
-  iconLoaded,
-  iconExists,
-  // deprecated, kept to avoid breaking changes
-  getIcon,
-  listIcons,
-  addIcon,
-  addCollection,
-  calculateSize,
-  buildIcon,
-  iconToHTML,
-  svgToURL,
-  loadIcons,
-  loadIcon,
-  setCustomIconLoader,
-  setCustomIconsLoader,
-  addAPIProvider,
-  _api
-} = IconifyIconComponent;
+const { iconLoaded, getIcon, listIcons, addIcon, addCollection, calculateSize, buildIcon, iconToHTML, svgToURL, loadIcons, loadIcon, setCustomIconLoader, setCustomIconsLoader, addAPIProvider, _api } = IconifyIconComponent;
 const _hoisted_1 = ["icon"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/es/chunks/p-steps.js

@@ -7,6 +7,9 @@ const _hoisted_2 = {
   class: "flex items-center"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PSteps"
+  },
   __name: "p-steps",
   props: {
     steps: {},

package/dist/es/chunks/p-tabs.js

@@ -2,6 +2,9 @@ import { defineComponent, createElementBlock, openBlock, normalizeStyle, Fragmen
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PTabs"
+  },
   __name: "p-tabs",
   props: {
     tabs: {

package/dist/es/p-close-btn.js

@@ -1,6 +1,9 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PCloseBtn"
+  },
   __name: "p-close-btn",
   props: {
     variant: {
@@ -31,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PCloseBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f61993bb"]]);
+const PCloseBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2002dcc8"]]);
 export {
   PCloseBtn as default
 };

package/dist/es/p-toggle.js

@@ -70,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return res;
     });
     const toggleLabelClasses = computed(() => {
-      return `${labelClasses.value.replace("mb-1", "")} ml-2`;
+      return `${labelClasses.value.replace("mb-1", "")} ml-2 leading-none`;
     });
     const attrs = computed(() => {
       const { style: style2, class: classes, "data-testid": dataTestId, ...rest } = allAttrs;
@@ -122,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be9ecb77"]]);
+const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c544a8a9"]]);
 export {
   pToggle as default
 };

package/dist/squirrel/components/p-btn/p-btn.vue.d.ts

@@ -30,6 +30,10 @@ declare const btn: import("tailwind-variants").TVReturnType<{
             readonly button: "bg-p-red-40 text-white hover:bg-p-red-50";
             readonly loader: "text-white";
         };
+        readonly 'error-outline': {
+            readonly button: "bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30";
+            readonly loader: "text-p-red-50";
+        };
         readonly success: {
             readonly button: "bg-p-green-40 text-white hover:bg-p-green-50";
             readonly loader: "text-white";
@@ -95,6 +99,10 @@ declare const btn: import("tailwind-variants").TVReturnType<{
             readonly button: "bg-p-red-40 text-white hover:bg-p-red-50";
             readonly loader: "text-white";
         };
+        readonly 'error-outline': {
+            readonly button: "bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30";
+            readonly loader: "text-p-red-50";
+        };
         readonly success: {
             readonly button: "bg-p-green-40 text-white hover:bg-p-green-50";
             readonly loader: "text-white";
@@ -160,6 +168,10 @@ declare const btn: import("tailwind-variants").TVReturnType<{
             readonly button: "bg-p-red-40 text-white hover:bg-p-red-50";
             readonly loader: "text-white";
         };
+        readonly 'error-outline': {
+            readonly button: "bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30";
+            readonly loader: "text-p-red-50";
+        };
         readonly success: {
             readonly button: "bg-p-green-40 text-white hover:bg-p-green-50";
             readonly loader: "text-white";

package/dist/squirrel.css

@@ -1,8 +1,8 @@
 
-.x-black-icon[data-v-f61993bb] {
+.x-black-icon[data-v-2002dcc8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Remove'%20clip-path='url(%23clip0_3453_5756)'%3e%3cpath%20id='Vector'%20d='M0.219996%2010.72C0.149851%2010.7893%200.0941591%2010.8718%200.0561487%2010.9628C0.0181382%2011.0537%20-0.00143433%2011.1514%20-0.00143433%2011.25C-0.00143433%2011.3486%200.0181382%2011.4462%200.0561487%2011.5372C0.0941591%2011.6281%200.149851%2011.7107%200.219996%2011.78C0.360622%2011.9204%200.551246%2011.9993%200.749996%2011.9993C0.948747%2011.9993%201.13937%2011.9204%201.28%2011.78L5.91%207.14997C5.92166%207.13787%205.93564%207.12825%205.9511%207.12168C5.96656%207.1151%205.98319%207.11172%206%207.11172C6.0168%207.11172%206.03343%207.1151%206.04889%207.12168C6.06436%207.12825%206.07834%207.13787%206.09%207.14997L10.72%2011.78C10.8606%2011.9204%2011.0512%2011.9993%2011.25%2011.9993C11.4487%2011.9993%2011.6394%2011.9204%2011.78%2011.78C11.8501%2011.7107%2011.9058%2011.6281%2011.9438%2011.5372C11.9819%2011.4462%2012.0014%2011.3486%2012.0014%2011.25C12.0014%2011.1514%2011.9819%2011.0537%2011.9438%2010.9628C11.9058%2010.8718%2011.8501%2010.7893%2011.78%2010.72L7.15%206.08997C7.1379%206.07831%207.12828%206.06433%207.1217%206.04886C7.11513%206.0334%207.11174%206.01677%207.11174%205.99997C7.11174%205.98317%207.11513%205.96654%207.1217%205.95107C7.12828%205.93561%207.1379%205.92163%207.15%205.90997L11.78%201.27997C11.9125%201.13779%2011.9846%200.949747%2011.9812%200.755446C11.9777%200.561145%2011.899%200.37576%2011.7616%200.238347C11.6242%200.100934%2011.4388%200.0222218%2011.2445%200.0187936C11.0502%200.0153654%2010.8622%200.0874886%2010.72%200.219969L6.09%204.84997C6.07834%204.86207%206.06436%204.87169%206.04889%204.87826C6.03343%204.88483%206.0168%204.88822%206%204.88822C5.98319%204.88822%205.96656%204.88483%205.9511%204.87826C5.93564%204.87169%205.92166%204.86207%205.91%204.84997L1.28%200.219969C1.13782%200.0874886%200.949775%200.0153654%200.755474%200.0187936C0.561173%200.0222218%200.375787%200.100934%200.238374%200.238347C0.100961%200.37576%200.0222494%200.561145%200.0188212%200.755446C0.015393%200.949747%200.0875162%201.13779%200.219996%201.27997L4.85%205.90997C4.86209%205.92163%204.87172%205.93561%204.87829%205.95107C4.88486%205.96654%204.88825%205.98317%204.88825%205.99997C4.88825%206.01677%204.88486%206.0334%204.87829%206.04886C4.87172%206.06433%204.86209%206.07831%204.85%206.08997L0.219996%2010.72Z'%20fill='%231A123B'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3453_5756'%3e%3crect%20width='12'%20height='12'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.x-white-icon[data-v-f61993bb] {
+.x-white-icon[data-v-2002dcc8] {
   background-image: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Remove'%20clip-path='url(%23clip0_3453_5756)'%3e%3cpath%20id='Vector'%20d='M0.219996%2010.72C0.149851%2010.7893%200.0941591%2010.8718%200.0561487%2010.9628C0.0181382%2011.0537%20-0.00143433%2011.1514%20-0.00143433%2011.25C-0.00143433%2011.3486%200.0181382%2011.4462%200.0561487%2011.5372C0.0941591%2011.6281%200.149851%2011.7107%200.219996%2011.78C0.360622%2011.9204%200.551246%2011.9993%200.749996%2011.9993C0.948747%2011.9993%201.13937%2011.9204%201.28%2011.78L5.91%207.14997C5.92166%207.13787%205.93564%207.12825%205.9511%207.12168C5.96656%207.1151%205.98319%207.11172%206%207.11172C6.0168%207.11172%206.03343%207.1151%206.04889%207.12168C6.06436%207.12825%206.07834%207.13787%206.09%207.14997L10.72%2011.78C10.8606%2011.9204%2011.0512%2011.9993%2011.25%2011.9993C11.4487%2011.9993%2011.6394%2011.9204%2011.78%2011.78C11.8501%2011.7107%2011.9058%2011.6281%2011.9438%2011.5372C11.9819%2011.4462%2012.0014%2011.3486%2012.0014%2011.25C12.0014%2011.1514%2011.9819%2011.0537%2011.9438%2010.9628C11.9058%2010.8718%2011.8501%2010.7893%2011.78%2010.72L7.15%206.08997C7.1379%206.07831%207.12828%206.06433%207.1217%206.04886C7.11513%206.0334%207.11174%206.01677%207.11174%205.99997C7.11174%205.98317%207.11513%205.96654%207.1217%205.95107C7.12828%205.93561%207.1379%205.92163%207.15%205.90997L11.78%201.27997C11.9125%201.13779%2011.9846%200.949747%2011.9812%200.755446C11.9777%200.561145%2011.899%200.37576%2011.7616%200.238347C11.6242%200.100934%2011.4388%200.0222218%2011.2445%200.0187936C11.0502%200.0153654%2010.8622%200.0874886%2010.72%200.219969L6.09%204.84997C6.07834%204.86207%206.06436%204.87169%206.04889%204.87826C6.03343%204.88483%206.0168%204.88822%206%204.88822C5.98319%204.88822%205.96656%204.88483%205.9511%204.87826C5.93564%204.87169%205.92166%204.86207%205.91%204.84997L1.28%200.219969C1.13782%200.0874886%200.949775%200.0153654%200.755474%200.0187936C0.561173%200.0222218%200.375787%200.100934%200.238374%200.238347C0.100961%200.37576%200.0222494%200.561145%200.0188212%200.755446C0.015393%200.949747%200.0875162%201.13779%200.219996%201.27997L4.85%205.90997C4.86209%205.92163%204.87172%205.93561%204.87829%205.95107C4.88486%205.96654%204.88825%205.98317%204.88825%205.99997C4.88825%206.01677%204.88486%206.0334%204.87829%206.04886C4.87172%206.06433%204.86209%206.07831%204.85%206.08997L0.219996%2010.72Z'%20fill='%23FFFFFF'%20/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3453_5756'%3e%3crect%20width='12'%20height='12'%20fill='white'%20/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
 div[id^=popper_].dropdown {
@@ -393,7 +393,7 @@ to {
   --tw-content: "";
   content: var(--tw-content);
 }
-.shadow-inner-toggle[data-v-be9ecb77]::after {
+.shadow-inner-toggle[data-v-c544a8a9]::after {
   box-shadow:
     rgba(0, 0, 0, 0.3) 0px 1px 2px 0px,
     rgba(0, 0, 0, 0.05) 0px 0px 1px 0px inset;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.1.0",
+  "version": "8.2.1",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -47,9 +47,9 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "@pequity/eslint-config": "^2.0.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@pequity/eslint-config": "^2.0.1",
     "@playwright/test": "^1.52.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -65,24 +65,24 @@
     "@storybook/theming": "^8.6.12",
     "@storybook/vue3": "^8.6.12",
     "@storybook/vue3-vite": "^8.6.12",
-    "@tanstack/vue-virtual": "3.13.6",
+    "@tanstack/vue-virtual": "3.13.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.2",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^3.1.2",
+    "@types/node": "^22.15.18",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^3.1.3",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.25.1",
+    "eslint": "^9.26.0",
     "eslint-plugin-storybook": "^0.12.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.2",
     "husky": "^9.1.7",
-    "iconify-icon": "^2.3.0",
+    "iconify-icon": "^3.0.0",
     "jsdom": "^26.1.0",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.3",
@@ -90,14 +90,14 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.87.0",
+    "sass": "^1.88.0",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
-    "vite": "^6.3.3",
-    "vitest": "^3.1.2",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
     "vue-router": "4.5.1",

package/squirrel/components/p-btn/p-btn.spec.js

@@ -67,6 +67,10 @@ describe('PBtn.vue', () => {
           ],
         ],
         ['error', ['text-white', 'bg-p-red-40', 'hover:bg-p-red-50']],
+        [
+          'error-outline',
+          ['text-p-red-50', 'bg-surface', 'ring-1', 'ring-inset', 'ring-p-red-20', 'hover:bg-p-red-10/30'],
+        ],
         ['success', ['text-white', 'bg-p-green-40', 'hover:bg-p-green-50']],
         ['primary-link', ['text-primary', 'bg-transparent', 'hover:text-accent', 'underline']],
         ['secondary-ghost', ['text-on-surface', 'hover:bg-p-gray-20']],

package/squirrel/components/p-btn/p-btn.stories.js

@@ -21,6 +21,7 @@ export default {
         'secondary-outline',
         'secondary-outline-blue',
         'error',
+        'error-outline',
         'success',
         'primary-link',
         'secondary-ghost',
@@ -166,6 +167,14 @@ export const Error = {
   },
 };
 
+export const ErrorOutline = {
+  args: {
+    ...Primary.args,
+    type: 'error-outline',
+    default: 'Error outline button',
+  },
+};
+
 export const Loading = {
   args: {
     ...Primary.args,

package/squirrel/components/p-btn/p-btn.vue

@@ -56,6 +56,10 @@ const btnClasses = {
         loader: 'text-p-purple-60',
       },
       error: { button: 'bg-p-red-40 text-white hover:bg-p-red-50', loader: 'text-white' },
+      'error-outline': {
+        button: 'bg-surface text-p-red-50 ring-1 ring-inset ring-p-red-20 hover:bg-p-red-10/30',
+        loader: 'text-p-red-50',
+      },
       success: { button: 'bg-p-green-40 text-white hover:bg-p-green-50', loader: 'text-white' },
       'primary-link': { button: 'bg-transparent text-primary underline hover:text-accent', loader: 'text-p-blue-60' },
       'secondary-ghost': { button: 'text-on-surface hover:bg-p-gray-20', loader: 'text-p-purple-60' },

package/squirrel/components/p-close-btn/p-close-btn.vue

@@ -11,6 +11,10 @@
 <script setup lang="ts">
 import { type PropType } from 'vue';
 
+defineOptions({
+  name: 'PCloseBtn',
+});
+
 type Variant = 'transparent' | 'gray' | 'dark';
 
 defineProps({

package/squirrel/components/p-steps/p-steps.vue

@@ -19,6 +19,10 @@ import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { startCase } from 'lodash-es';
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'PSteps',
+});
+
 type Props = {
   steps: T;
   currentStep: T[number];

package/squirrel/components/p-tabs/p-tabs.vue

@@ -30,7 +30,10 @@
 import { type ShallowRef } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
 
-// types
+defineOptions({
+  name: 'PTabs',
+});
+
 type Tab = {
   name: string;
   title: string;
@@ -38,7 +41,6 @@ type Tab = {
   to?: RouteLocationRaw;
 };
 
-// props
 defineProps({
   tabs: {
     type: Array as () => Tab[],
@@ -54,6 +56,5 @@ defineProps({
   },
 });
 
-// emits
 defineEmits(['click:tab']);
 </script>

package/squirrel/components/p-toggle/p-toggle.spec.js

@@ -1,4 +1,5 @@
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
+import { expect } from '@storybook/test';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PToggle.vue', () => {
@@ -55,7 +56,9 @@ describe('PToggle.vue', () => {
       },
     });
 
-    expect(wrapper.html()).toContain('Test label');
+    const label = wrapper.findByText('Test label', 'span');
+
+    expect(label.classes()).toEqual(['block', 'font-medium', 'text-sm', 'ml-2', 'leading-none']);
   });
 
   it(`renders a label slot`, async () => {

package/squirrel/components/p-toggle/p-toggle.vue

@@ -100,7 +100,7 @@ const toggleClasses = computed(() => {
 });
 
 const toggleLabelClasses = computed(() => {
-  return `${labelClasses.value.replace('mb-1', '')} ml-2`;
+  return `${labelClasses.value.replace('mb-1', '')} ml-2 leading-none`;
 });
 
 const attrs = computed(() => {