design-system-next 2.19.4 → 2.20.0

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.19.4",
+  "version": "2.20.0",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {
@@ -38,54 +38,57 @@ declare const _default: {
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "docs:preview": "vitepress preview docs",
-    "test:e2e": "npx playwright test --ui",
+    "test:ui": "npx playwright test --ui",
+    "test:components": "npx playwright test --config=playwright-ct.config.ts --reporter=line",
     "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
   },
   "dependencies": {
-    "@cloudinary/url-gen": "^1.21.0",
-    "@eslint/js": "^9.17.0",
+    "@cloudinary/url-gen": "^1.22.0",
+    "@eslint/js": "^9.37.0",
     "@iconify-icons/ph": "^1.2.5",
-    "@iconify/vue": "^4.3.0",
+    "@iconify/vue": "^5.0.0",
     "classnames": "^2.5.1",
     "countries-list": "^3.1.1",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.18",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "^1.12.5",
+    "libphonenumber-js": "^1.12.24",
     "lodash": "^4.17.21",
-    "pinia": "^2.3.1",
+    "pinia": "^3.0.3",
     "sortablejs": "^1.15.6",
-    "stylelint": "^16.12.0",
-    "stylelint-config-recess-order": "^5.1.1",
-    "stylelint-config-recommended": "^14.0.1",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "typescript-eslint": "^8.19.1",
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.3.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "typescript-eslint": "^8.46.1",
     "vite-plugin-sass": "^0.1.0",
-    "vue": "^3.0.0"
+    "vue": "^3.5.22"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@playwright/test": "^1.55.0",
-    "@stylistic/stylelint-plugin": "^3.1.1",
-    "@types/node": "^22.10.5",
+    "@playwright/experimental-ct-vue": "^1.56.0",
+    "@playwright/test": "^1.56.0",
+    "@stylistic/stylelint-plugin": "^4.0.0",
+    "@types/node": "^24.7.2",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "rollup-plugin-gzip": "^4.0.1",
-    "sass-embedded": "^1.83.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.0",
+    "rollup-plugin-gzip": "^4.1.1",
+    "sass-embedded": "^1.93.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.7.2",
-    "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.4.0",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "~5.9.3",
+    "unplugin-vue-components": "^29.1.0",
+    "vite": "^7.1.10",
+    "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitepress": "^1.5.0",
-    "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.2.0"
+    "vitepress": "^1.6.4",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.1.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.19.4",
+  "version": "2.20.0",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {
@@ -38,54 +38,57 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "docs:preview": "vitepress preview docs",
-    "test:e2e": "npx playwright test --ui",
+    "test:ui": "npx playwright test --ui",
+    "test:components": "npx playwright test --config=playwright-ct.config.ts --reporter=line",
     "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
   },
   "dependencies": {
-    "@cloudinary/url-gen": "^1.21.0",
-    "@eslint/js": "^9.17.0",
+    "@cloudinary/url-gen": "^1.22.0",
+    "@eslint/js": "^9.37.0",
     "@iconify-icons/ph": "^1.2.5",
-    "@iconify/vue": "^4.3.0",
+    "@iconify/vue": "^5.0.0",
     "classnames": "^2.5.1",
     "countries-list": "^3.1.1",
-    "dayjs": "^1.11.13",
+    "dayjs": "^1.11.18",
     "floating-vue": "^5.2.2",
-    "libphonenumber-js": "^1.12.5",
+    "libphonenumber-js": "^1.12.24",
     "lodash": "^4.17.21",
-    "pinia": "^2.3.1",
+    "pinia": "^3.0.3",
     "sortablejs": "^1.15.6",
-    "stylelint": "^16.12.0",
-    "stylelint-config-recess-order": "^5.1.1",
-    "stylelint-config-recommended": "^14.0.1",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "typescript-eslint": "^8.19.1",
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.3.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "typescript-eslint": "^8.46.1",
     "vite-plugin-sass": "^0.1.0",
-    "vue": "^3.0.0"
+    "vue": "^3.5.22"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@playwright/test": "^1.55.0",
-    "@stylistic/stylelint-plugin": "^3.1.1",
-    "@types/node": "^22.10.5",
+    "@playwright/experimental-ct-vue": "^1.56.0",
+    "@playwright/test": "^1.56.0",
+    "@stylistic/stylelint-plugin": "^4.0.0",
+    "@types/node": "^24.7.2",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "rollup-plugin-gzip": "^4.0.1",
-    "sass-embedded": "^1.83.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.0",
+    "rollup-plugin-gzip": "^4.1.1",
+    "sass-embedded": "^1.93.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.7.2",
-    "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.4.0",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "~5.9.3",
+    "unplugin-vue-components": "^29.1.0",
+    "vite": "^7.1.10",
+    "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitepress": "^1.5.0",
-    "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.2.0"
+    "vitepress": "^1.6.4",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.1.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/src/App.vue

@@ -1,53 +1,3 @@
 <template>
-  <spr-dropdown
-    id="sample-dropdownCustomPopper"
-    width="150px"
-    :triggers="['click']"
-    :popper-triggers="['click']"
-    popper-width="500px"
-    :auto-hide="false"
-  >
-    <spr-button class="spr-w-full" tone="success" has-icon>
-      <span>Custom Popper</span>
-      <Icon icon="ph:caret-down" />
-    </spr-button>
-
-    <template #popper>
-      <spr-select-multiple
-        id="sample-select"
-        v-model="selectModel"
-        label="Select Label"
-        placeholder="Select an option"
-        :options="options"
-        popper-container="body"
-        wrapper-position="relative"
-        popper-strategy="fixed"
-        placement="bottom"
-      />
-    </template>
-  </spr-dropdown>
+  <div>Test Component Here</div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-import SprDropdown from './components/dropdown/dropdown.vue';
-import SprButton from './components/button/button.vue';
-import SprSelectMultiple from './components/select/select-multiple/select-multiple.vue';
-
-const selectModel = ref('');
-
-const options = ref([
-  { text: 'Apple', value: 'apple' },
-  { text: 'Banana', value: 'banana' },
-  { text: 'Cherry', value: 'cherry' },
-  { text: 'Date', value: 'date' },
-  { text: 'Elderberry', value: 'elderberry' },
-  { text: 'Fig', value: 'fig' },
-  { text: 'Grape', value: 'grape' },
-  { text: 'Nectarine', value: 'nectarine' },
-  { text: 'Orange', value: 'orange' },
-  { text: 'Papaya', value: 'papaya' },
-  { text: '89 Quince', value: '50' },
-]);
-</script>

package/src/assets/scripts/border-radius.ts

@@ -1,15 +1,15 @@
-type BorderRadius = {
-  [key: string]: string;
-};
-
-const borderRadius: BorderRadius = {
-  'border-radius-2xs': 'var(--size-50)',
-  'border-radius-xs': 'var(--size-100)',
-  'border-radius-sm': 'var(--size-150)',
-  'border-radius-md': 'var(--size-200)',
-  'border-radius-lg': 'var(--size-250)',
-  'border-radius-xl': 'var(--size-300)',
-  'border-radius-full': '999px',
-};
-
-export default borderRadius;
+type BorderRadius = {
+  [key: string]: string;
+};
+
+const borderRadius: BorderRadius = {
+  'border-radius-2xs': 'var(--size-50)',
+  'border-radius-xs': 'var(--size-100)',
+  'border-radius-sm': 'var(--size-150)',
+  'border-radius-md': 'var(--size-200)',
+  'border-radius-lg': 'var(--size-250)',
+  'border-radius-xl': 'var(--size-300)',
+  'border-radius-full': '999px',
+};
+
+export default borderRadius;

package/src/assets/scripts/colors.ts

@@ -1,134 +1,134 @@
-/*
-  Toge Design System v3.0 - Color Scheme
-  (https://www.figma.com/design/tlGkN8uKvxVIHB1FgYRIaF/%F0%9F%8C%B1-Toge-Styles-3.0?node-id=2281-4697&node-type=section&m=dev)
-*/
-
-type ColorShadesTypes = {
-  [key: number]: string;
-};
-
-type ColorPaletteTypes = {
-  [colorName: string]: ColorShadesTypes;
-};
-
-const colorScheme: ColorPaletteTypes = {
-  white: {
-    50: '#FFFFFF',
-    100: '#F1F2F3',
-    200: '#DBDBDD',
-    300: '#BABCC0',
-    400: '#989898',
-    500: '#7C7C7C',
-    600: '#656565',
-    700: '#525252',
-    800: '#464646',
-    900: '#3D3D3D',
-    950: '#292929',
-  },
-  mushroom: {
-    50: '#EFF1F1',
-    100: '#E6EAEA',
-    200: '#D9DEDE',
-    300: '#B8C1C0',
-    400: '#919F9D',
-    500: '#738482',
-    600: '#5D6C6B',
-    700: '#4C5857',
-    800: '#414B4B',
-    900: '#394141',
-    950: '#262B2B',
-  },
-  tomato: {
-    50: '#FEF2F3',
-    100: '#FEE2E3',
-    200: '#FDCBCE',
-    300: '#FBA6AA',
-    400: '#F6737A',
-    500: '#EC4750',
-    600: '#DA2F38',
-    700: '#B61F27',
-    800: '#971D23',
-    900: '#7D1F24',
-    950: '#440B0E',
-  },
-  carrot: {
-    50: '#FFFAEC',
-    100: '#FFF4D3',
-    200: '#FFE5A5',
-    300: '#FFD16D',
-    400: '#FFB132',
-    500: '#FF970A',
-    600: '#FF7F00',
-    700: '#CC5C02',
-    800: '#A1470B',
-    900: '#823C0C',
-    950: '#461C04',
-  },
-  mango: {
-    50: '#FFFFEA',
-    100: '#FFFBC5',
-    200: '#FFF885',
-    300: '#FFED46',
-    400: '#FFDF1B',
-    500: '#FFBF00',
-    600: '#E29300',
-    700: '#BB6802',
-    800: '#985008',
-    900: '#7C420B',
-    950: '#482200',
-  },
-  kangkong: {
-    50: '#F0FDF4',
-    100: '#DCFCE6',
-    200: '#BBF7CE',
-    300: '#86EFA8',
-    400: '#4ADE7B',
-    500: '#22C558',
-    600: '#17AD49',
-    700: '#158039',
-    800: '#166531',
-    900: '#14532B',
-    950: '#052E15',
-  },
-  wintermelon: {
-    50: '#ECFEFF',
-    100: '#CEFBFF',
-    200: '#A3F3FE',
-    300: '#64E9FC',
-    400: '#1ED5F2',
-    500: '#02AFCE',
-    600: '#0592B5',
-    700: '#0C7492',
-    800: '#135E77',
-    900: '#154E64',
-    950: '#073345',
-  },
-  blueberry: {
-    50: '#EEF7FF',
-    100: '#D8EBFF',
-    200: '#BADCFF',
-    300: '#8BBDFF',
-    400: '#549EFF',
-    500: '#2D88FF',
-    600: '#1679FA',
-    700: '#0F6EEB',
-    800: '#1356BA',
-    900: '#164B92',
-    950: '#122E59',
-  },
-  ubas: {
-    50: '#F5F3FF',
-    100: '#EEE9FE',
-    200: '#DED6FE',
-    300: '#C6B5FD',
-    400: '#AA8BFA',
-    500: '#8952F6',
-    600: '#8139EE',
-    700: '#7227DA',
-    800: '#5F21B6',
-    900: '#501D95',
-    950: '#311065',
-  },
-};
-export type { ColorShadesTypes, ColorPaletteTypes };
-export default colorScheme;
+/*
+  Toge Design System v3.0 - Color Scheme
+  (https://www.figma.com/design/tlGkN8uKvxVIHB1FgYRIaF/%F0%9F%8C%B1-Toge-Styles-3.0?node-id=2281-4697&node-type=section&m=dev)
+*/
+
+type ColorShadesTypes = {
+  [key: number]: string;
+};
+
+type ColorPaletteTypes = {
+  [colorName: string]: ColorShadesTypes;
+};
+
+const colorScheme: ColorPaletteTypes = {
+  white: {
+    50: '#FFFFFF',
+    100: '#F1F2F3',
+    200: '#DBDBDD',
+    300: '#BABCC0',
+    400: '#989898',
+    500: '#7C7C7C',
+    600: '#656565',
+    700: '#525252',
+    800: '#464646',
+    900: '#3D3D3D',
+    950: '#292929',
+  },
+  mushroom: {
+    50: '#EFF1F1',
+    100: '#E6EAEA',
+    200: '#D9DEDE',
+    300: '#B8C1C0',
+    400: '#919F9D',
+    500: '#738482',
+    600: '#5D6C6B',
+    700: '#4C5857',
+    800: '#414B4B',
+    900: '#394141',
+    950: '#262B2B',
+  },
+  tomato: {
+    50: '#FEF2F3',
+    100: '#FEE2E3',
+    200: '#FDCBCE',
+    300: '#FBA6AA',
+    400: '#F6737A',
+    500: '#EC4750',
+    600: '#DA2F38',
+    700: '#B61F27',
+    800: '#971D23',
+    900: '#7D1F24',
+    950: '#440B0E',
+  },
+  carrot: {
+    50: '#FFFAEC',
+    100: '#FFF4D3',
+    200: '#FFE5A5',
+    300: '#FFD16D',
+    400: '#FFB132',
+    500: '#FF970A',
+    600: '#FF7F00',
+    700: '#CC5C02',
+    800: '#A1470B',
+    900: '#823C0C',
+    950: '#461C04',
+  },
+  mango: {
+    50: '#FFFFEA',
+    100: '#FFFBC5',
+    200: '#FFF885',
+    300: '#FFED46',
+    400: '#FFDF1B',
+    500: '#FFBF00',
+    600: '#E29300',
+    700: '#BB6802',
+    800: '#985008',
+    900: '#7C420B',
+    950: '#482200',
+  },
+  kangkong: {
+    50: '#F0FDF4',
+    100: '#DCFCE6',
+    200: '#BBF7CE',
+    300: '#86EFA8',
+    400: '#4ADE7B',
+    500: '#22C558',
+    600: '#17AD49',
+    700: '#158039',
+    800: '#166531',
+    900: '#14532B',
+    950: '#052E15',
+  },
+  wintermelon: {
+    50: '#ECFEFF',
+    100: '#CEFBFF',
+    200: '#A3F3FE',
+    300: '#64E9FC',
+    400: '#1ED5F2',
+    500: '#02AFCE',
+    600: '#0592B5',
+    700: '#0C7492',
+    800: '#135E77',
+    900: '#154E64',
+    950: '#073345',
+  },
+  blueberry: {
+    50: '#EEF7FF',
+    100: '#D8EBFF',
+    200: '#BADCFF',
+    300: '#8BBDFF',
+    400: '#549EFF',
+    500: '#2D88FF',
+    600: '#1679FA',
+    700: '#0F6EEB',
+    800: '#1356BA',
+    900: '#164B92',
+    950: '#122E59',
+  },
+  ubas: {
+    50: '#F5F3FF',
+    100: '#EEE9FE',
+    200: '#DED6FE',
+    300: '#C6B5FD',
+    400: '#AA8BFA',
+    500: '#8952F6',
+    600: '#8139EE',
+    700: '#7227DA',
+    800: '#5F21B6',
+    900: '#501D95',
+    950: '#311065',
+  },
+};
+export type { ColorShadesTypes, ColorPaletteTypes };
+export default colorScheme;

package/src/assets/scripts/max-width.ts

@@ -1,11 +1,11 @@
-type MaxWidthTypes = {
-  [key: string]: string;
-};
-
-const maxWidth: MaxWidthTypes = {
-  'sm': '640px',
-  'md': '1000px',
-  'lg': '1320px',
-};
-
-export default maxWidth;
+type MaxWidthTypes = {
+  [key: string]: string;
+};
+
+const maxWidth: MaxWidthTypes = {
+  'sm': '640px',
+  'md': '1000px',
+  'lg': '1320px',
+};
+
+export default maxWidth;

package/src/assets/scripts/spacing.ts

@@ -1,23 +1,23 @@
-type spacingTypes = {
-  [key: string]: string;
-};
-
-const spacing: spacingTypes = {
-  'size-spacing-6xs': 'var(--size-50)',
-  'size-spacing-5xs': 'var(--size-100)',
-  'size-spacing-4xs': 'var(--size-150)',
-  'size-spacing-3xs': 'var(--size-200)',
-  'size-spacing-2xs': 'var(--size-250)',
-  'size-spacing-xs': 'var(--size-300)',
-  'size-spacing-sm': 'var(--size-400)',
-  'size-spacing-md': 'var(--size-500)',
-  'size-spacing-lg': 'var(--size-600)',
-  'size-spacing-xl': 'var(--size-700)',
-  'size-spacing-2xl': 'var(--size-800)',
-  'size-spacing-3xl': 'var(--size-900)',
-  'size-spacing-4xl': 'var(--size-1000)',
-  'size-spacing-5xl': 'var(--size-1100)',
-  'size-spacing-6xl': 'var(--size-1200)',
-};
-
-export default spacing;
+type spacingTypes = {
+  [key: string]: string;
+};
+
+const spacing: spacingTypes = {
+  'size-spacing-6xs': 'var(--size-50)',
+  'size-spacing-5xs': 'var(--size-100)',
+  'size-spacing-4xs': 'var(--size-150)',
+  'size-spacing-3xs': 'var(--size-200)',
+  'size-spacing-2xs': 'var(--size-250)',
+  'size-spacing-xs': 'var(--size-300)',
+  'size-spacing-sm': 'var(--size-400)',
+  'size-spacing-md': 'var(--size-500)',
+  'size-spacing-lg': 'var(--size-600)',
+  'size-spacing-xl': 'var(--size-700)',
+  'size-spacing-2xl': 'var(--size-800)',
+  'size-spacing-3xl': 'var(--size-900)',
+  'size-spacing-4xl': 'var(--size-1000)',
+  'size-spacing-5xl': 'var(--size-1100)',
+  'size-spacing-6xl': 'var(--size-1200)',
+};
+
+export default spacing;

package/src/assets/scripts/utilities.ts

@@ -1,15 +1,15 @@
-type utilitiesTypes = {
-  [key: string]: {
-    backgroundColor?: string;
-    opacity?: string;
-  };
-};
-
-const utilities: utilitiesTypes = {
-  'bg-overlay': {
-    backgroundColor: '#4C5857',
-    opacity: '0.6',
-  },
-};
-
-export default utilities;
+type utilitiesTypes = {
+  [key: string]: {
+    backgroundColor?: string;
+    opacity?: string;
+  };
+};
+
+const utilities: utilitiesTypes = {
+  'bg-overlay': {
+    backgroundColor: '#4C5857',
+    opacity: '0.6',
+  },
+};
+
+export default utilities;