design-system-next 2.12.17 → 2.13.2

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.12.17",
+  "version": "2.13.2",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {
@@ -38,6 +38,7 @@ declare const _default: {
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "docs:preview": "vitepress preview docs",
+    "test:e2e": "npx playwright test --ui",
     "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
   },
   "dependencies": {
@@ -61,6 +62,8 @@ declare const _default: {
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
+    "@playwright/test": "^1.55.0",
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@types/node": "^22.10.5",
     "@vitejs/plugin-vue": "^5.2.1",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.12.17",
+  "version": "2.13.2",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {
@@ -38,6 +38,7 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "docs:preview": "vitepress preview docs",
+    "test:e2e": "npx playwright test --ui",
     "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
   },
   "dependencies": {
@@ -61,6 +62,8 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.2",
+    "@playwright/test": "^1.55.0",
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@types/node": "^22.10.5",
     "@vitejs/plugin-vue": "^5.2.1",

package/src/components/button/use-button.ts

@@ -162,16 +162,13 @@ export const useButton = (props: ButtonPropTypes, emit: SetupContext<ButtonEmitT
   // #endregion - Background Css Class
 
   const buttonBorderCssClass: ComputedRef<string> = computed(() => {
-    return classNames(
-      'spr-border spr-border-solid',
-      {
-        'spr-border-transparent': variant.value === 'primary' || variant.value === 'tertiary',
-        'spr-border-white-50': focused.value && variant.value === 'primary' || variant.value === 'tertiary',
-        'spr-border-color-base': variant.value === 'secondary' && tone.value === 'neutral',
-        'spr-border-color-brand-base': variant.value === 'secondary' && tone.value === 'success',
-        'spr-border-color-danger-base': variant.value === 'secondary' && tone.value === 'danger',
-      }
-    );
+    return classNames('spr-border spr-border-solid', {
+      'spr-border-transparent': variant.value === 'primary' || variant.value === 'tertiary',
+      'spr-border-white-50': (focused.value && variant.value === 'primary') || variant.value === 'tertiary',
+      'spr-border-color-base': variant.value === 'secondary' && tone.value === 'neutral',
+      'spr-border-color-brand-base': variant.value === 'secondary' && tone.value === 'success',
+      'spr-border-color-danger-base': variant.value === 'secondary' && tone.value === 'danger',
+    });
   });
 
   const buttonProps: ComputedRef<Record<string, unknown>> = computed(() => {

package/src/components/table/table.ts

@@ -16,6 +16,7 @@ export interface Header {
   badgeVariant?: string;
   avatarVariant?: string;
   customTailwindClasses?: string;
+  width?: string;
 }
 
 export interface TableData {

package/src/components/table/table.vue

@@ -38,6 +38,7 @@
               v-for="(header, keyHeader) in headers"
               :key="keyHeader"
               :class="[getTableClasses.headerClasses(header)]"
+              :style="{ width: header?.width }"
             >
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
@@ -87,12 +88,13 @@
             <td
               v-if="props.isMultiSelect"
               :class="[getTableClasses.multiselectClass, getTableClasses.multiselectRowClass]"
+              
             >
               <div class="spr-flex spr-items-center spr-justify-center">
                 <spr-checkbox label="" :checked="isRowSelected(item)" @update:model-value="handleSelect(item)" />
               </div>
             </td>
-            <td v-for="(column, headerKey) in headers" :key="headerKey" :class="getTableClasses.tableDataClasses">
+            <td v-for="(column, headerKey) in headers" :key="headerKey" :class="getTableClasses.tableDataClasses" :style="{ width: column?.width }">
               <slot v-if="$slots[column.field]" :name="column.field" :row="item" :row-index="keyIndex" />
               <template v-else>
                 <div v-if="sortedData[keyIndex][column.field]" class="spr-flex spr-flex-row spr-items-center spr-gap-2">