@dcrackel/hematournamentui 1.0.712 → 1.0.713

package/.prettierignore

@@ -1,7 +1,7 @@
-node_modules/
-dist/
-storybook-static/
-coverage/
-tailwind/output.css
-package-lock.json
-*.log
+node_modules/
+dist/
+storybook-static/
+coverage/
+tailwind/output.css
+package-lock.json
+*.log

package/.storybook/main.js

@@ -4,7 +4,9 @@ const config = {
   addons: ['@storybook/addon-links', '@chromatic-com/storybook', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
-    options: {}
+    options: {
+      docgen: 'vue-component-meta'
+    }
   },
   docs: {}
 };

package/README.md

@@ -26,6 +26,36 @@ import '@dcrackel/hematournamentui/tailwind.css';
 
 Use `npm run build:tailwind` for Storybook's local `tailwind/output.css` workflow. Use `npm run build:package-css` when preparing CSS for the parent app or package publish.
 
+## Single bracket bout director assignment
+
+Hover over a bracket pairing for a compact action dropdown; clicking the pairing still opens the bout directly. The dropdown offers Open bout, Resume bout, or Edit bout according to status. Assign director is enabled by default for scheduled bouts except the final and grand final; a parent can explicitly disable `showBoutDirectorAssignment` when needed. When a director is assigned, the hover menu shows their name as static text in the assigned ring/connector color above Assign Director, with bright blue as a fallback when no color is supplied. Active and completed bouts show their saved director above Resume bout or Edit bout. Unassigned bouts omit the name. No permanent icon is rendered.
+
+```vue
+<Bracket
+  v-bind="bracketProps"
+  :showBoutDirectorAssignment="canManageAssignments"
+  @request:bout-director="openStaffDirectorPicker"
+/>
+```
+
+`request:bout-director` carries a detached copy of the current bout, including `BoutId` and `DEBoutId` when supplied. The app opens its Staff-based picker, saves the choice, and passes updated planned coverage through `plannedDirectingStations` and `plannedBoutAssignments`. This action does not start the bout or change referee, score, sequence, or completion fields. Active, completed, and unidentified bouts have no assignment action. Planning is independent of directing eligibility, so future slots represented as BYE placeholders can also be assigned. Scheduled future bouts can be assigned before both competitors are known.
+
+The dropdown opens after a short hover delay and stays open while moving into it. Keyboard focus reveals it immediately; Arrow Down enters its actions, arrows move between actions, and Escape dismisses it and restores focus. It closes on outside clicks or scrolling. The `HoverBoutActions` Storybook example includes a mock parent picker. Production distribution and section assignment remain app-owned. For standalone `TableauBoutCard` usage, pass `plannedDirectorName` and `plannedDirectorColor` to display planned assignment context without changing the bout's saved referee fields. `TableauColumn` accepts the `plannedStationByBout` lookup used by `Tableau` and forwards each planned director name and color. Each complete connector uses the receiving bout's planned director/ring color, including both feeders and the joining line. A receiving bout with no planned director has a neutral connector.
+
+## Storybook planned coverage
+
+All bracket stories enable director assignment. The default examples start with two directors. The story parent splits scheduled main-bracket bouts into contiguous halves for two directors and quarters for four, through the semifinals, inclusive. Finals, placement, and consolation rounds receive no automatic assignments; eligible bouts there remain available for anyone to claim, including a fresh director.
+
+Three, five, and six directors use near-equal contiguous groups within each round. Known opening BYEs add no work; future empty slots remain plannable. With two or four directors, section boundaries stay aligned with bracket halves or quarters even when BYEs make workloads uneven. With other counts, boundaries can shift as rounds narrow. Adding a director redistributes scheduled coverage and preserves existing plans for active and completed bouts. Manual bout assignment remains available through the semifinals. Finals cannot be preassigned and remain available to claim when both competitors are known.
+
+The ThreeDirectors, FourDirectors, FiveDirectors, and SixDirectors stories demonstrate the counts. Distribution lives in the story parent simulation; reusable components still receive explicit `plannedDirectingStations` and `plannedBoutAssignments` from the consuming app.
+
+## Phone directing view
+
+Below 768px, the bracket shows the bout list with connection status and planned ring suggestions. The organising panel and assignment actions are unavailable on phones, even when their props are enabled. Completed bouts sit in a collapsed section for score corrections. Returning to desktop restores the selected List View or Tableau.
+
+Phone event navigation keeps Pools, Pool Results, Bracket, Final Results, and Penalties accessible in a scrolling row. Edit, Staff, Displays, and Checkin remain in the desktop organiser menu. Selecting List View on desktop does not change the navigation. The PhoneDirector bracket story demonstrates this responsive layout; use a viewport narrower than 768px.
+
 ## Event waitlist setting
 
 The event wizard exposes an Enable Waitlist toggle beneath Max Fencers on Basic Info. The boolean event field `WaitlistEnabled` defaults to `true` when absent and preserves an explicit `false`. Both `update:submit` and `save:step` include the field on the event payload, separately from `rules`. The consuming app persists it and returns the saved value through the `event` prop; registration availability and capacity enforcement remain app-owned.

package/package.json

@@ -1,96 +1,96 @@
-{
-  "name": "@dcrackel/hematournamentui",
-  "private": false,
-  "version": "1.0.712",
-  "type": "module",
-  "main": "dist/HemaTournamentUI-lib.umd.js",
-  "module": "dist/HemaTournamentUI-lib.es.js",
-  "style": "dist/hematournamentui.css",
-  "exports": {
-    ".": {
-      "import": "./dist/HemaTournamentUI-lib.es.js",
-      "require": "./dist/HemaTournamentUI-lib.umd.js"
-    },
-    "./styles.css": "./dist/hematournamentui.css",
-    "./tailwind.css": "./dist/hematournamentui-tailwind.css"
-  },
-  "scripts": {
-    "dev-donotuse": "vite",
-    "build": "npm run format:check && npm version patch && vite build && npm run build:package-css",
-    "build:check": "npm run format:check && npm run lint && vite build && npm run build:package-css",
-    "build:package-css": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./dist/hematournamentui-tailwind.css",
-    "publish:package": "npm publish",
-    "preview": "vite preview",
-    "build-storybook": "npm run build:tailwind && storybook build",
-    "build:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css",
-    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
-    "watch:storybook": "storybook dev -p 6006",
-    "watch:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint": "eslint --ext .ts,.vue .",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "postinstall": "patch-package"
-  },
-  "dependencies": {
-    "@fontsource/fira-code": "^5.2.7",
-    "@fontsource/inter": "^5.2.8",
-    "@fontsource/roboto-mono": "^5.2.9",
-    "@storybook/icons": "^2.0.2",
-    "@tiptap/extension-bold": "^2.1.13",
-    "@tiptap/extension-highlight": "^2.1.13",
-    "@tiptap/extension-text-align": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/vue-3": "^2.1.13",
-    "cropperjs": "^2.1.1",
-    "font-awesome": "^4.7.0",
-    "glob": "^13.0.6",
-    "lru-cache": "^11.3.6",
-    "node-fetch": "^3.3.2",
-    "postcss-nesting": "^14.0.0",
-    "rimraf": "^6.1.3",
-    "vue": "^3.5.34",
-    "vue-avatar-cropper": "^6.1.1",
-    "vue-google-autocomplete": "^1.1.4",
-    "vue3-draggable": "^2.0.9",
-    "vuedraggable": "^4.1.0"
-  },
-  "devDependencies": {
-    "@babel/eslint-parser": "^7.28.6",
-    "@chromatic-com/storybook": "^5.5.1",
-    "@eslint/eslintrc": "^3.3.5",
-    "@storybook/addon-docs": "^10.6.2",
-    "@storybook/addon-links": "^10.6.2",
-    "@storybook/react": "^10.6.2",
-    "@storybook/vue3-vite": "^10.6.2",
-    "@tailwindcss/cli": "^4.3.0",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.3",
-    "@typescript-eslint/parser": "^8.59.3",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vitest/coverage-v8": "^4.1.11",
-    "@vue/test-utils": "^2.4.10",
-    "@vuepic/vue-datepicker": "^12.1.0",
-    "autoprefixer": "^10.5.0",
-    "concurrently": "^9.2.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-jest": "^29.15.2",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^10.6.2",
-    "eslint-plugin-vue": "^10.9.1",
-    "happy-dom": "^20.9.0",
-    "patch-package": "^8.0.1",
-    "postcss": "^8.5.14",
-    "prettier": "^3.9.6",
-    "storybook": "^10.6.2",
-    "storybook-vue3-router": "^7.0.0",
-    "tailwindcss": "^4.3.0",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.11",
-    "vue-eslint-parser": "^10.4.0"
-  },
-  "overrides": {
-    "@storybook/preview-api": "^9.1.5"
-  }
-}
+{
+  "name": "@dcrackel/hematournamentui",
+  "private": false,
+  "version": "1.0.713",
+  "type": "module",
+  "main": "dist/HemaTournamentUI-lib.umd.js",
+  "module": "dist/HemaTournamentUI-lib.es.js",
+  "style": "dist/hematournamentui.css",
+  "exports": {
+    ".": {
+      "import": "./dist/HemaTournamentUI-lib.es.js",
+      "require": "./dist/HemaTournamentUI-lib.umd.js"
+    },
+    "./styles.css": "./dist/hematournamentui.css",
+    "./tailwind.css": "./dist/hematournamentui-tailwind.css"
+  },
+  "scripts": {
+    "dev-donotuse": "vite",
+    "build": "npm run format:check && npm version patch && vite build && npm run build:package-css",
+    "build:check": "npm run format:check && npm run lint && vite build && npm run build:package-css",
+    "build:package-css": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./dist/hematournamentui-tailwind.css",
+    "publish:package": "npm publish",
+    "preview": "vite preview",
+    "build-storybook": "npm run build:tailwind && storybook build",
+    "build:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css",
+    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
+    "watch:storybook": "storybook dev -p 6006",
+    "watch:tailwind": "npx @tailwindcss/cli -i ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint --ext .ts,.vue .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@fontsource/fira-code": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/roboto-mono": "^5.2.9",
+    "@storybook/icons": "^2.0.2",
+    "@tiptap/extension-bold": "^2.1.13",
+    "@tiptap/extension-highlight": "^2.1.13",
+    "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
+    "@tiptap/vue-3": "^2.1.13",
+    "cropperjs": "^2.1.1",
+    "font-awesome": "^4.7.0",
+    "glob": "^13.0.6",
+    "lru-cache": "^11.3.6",
+    "node-fetch": "^3.3.2",
+    "postcss-nesting": "^14.0.0",
+    "rimraf": "^6.1.3",
+    "vue": "^3.5.34",
+    "vue-avatar-cropper": "^6.1.1",
+    "vue-google-autocomplete": "^1.1.4",
+    "vue3-draggable": "^2.0.9",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.28.6",
+    "@chromatic-com/storybook": "^5.5.1",
+    "@eslint/eslintrc": "^3.3.5",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/react": "^10.6.2",
+    "@storybook/vue3-vite": "^10.6.2",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vue/test-utils": "^2.4.10",
+    "@vuepic/vue-datepicker": "^12.1.0",
+    "autoprefixer": "^10.5.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-jest": "^29.15.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-storybook": "^10.6.2",
+    "eslint-plugin-vue": "^10.9.1",
+    "happy-dom": "^20.9.0",
+    "patch-package": "^8.0.1",
+    "postcss": "^8.5.14",
+    "prettier": "^3.9.6",
+    "storybook": "^10.6.2",
+    "storybook-vue3-router": "^7.0.0",
+    "tailwindcss": "^4.3.0",
+    "vite": "^8.0.13",
+    "vitest": "^4.1.11",
+    "vue-eslint-parser": "^10.4.0"
+  },
+  "overrides": {
+    "@storybook/preview-api": "^9.1.5"
+  }
+}

package/prettier.config.js

@@ -1,16 +1,16 @@
-export default {
-  arrowParens: 'avoid',
-  bracketSameLine: false,
-  bracketSpacing: true,
-  endOfLine: 'auto',
-  htmlWhitespaceSensitivity: 'css',
-  printWidth: 120,
-  proseWrap: 'preserve',
-  semi: true,
-  singleAttributePerLine: false,
-  singleQuote: true,
-  tabWidth: 2,
-  trailingComma: 'none',
-  useTabs: false,
-  vueIndentScriptAndStyle: false
-};
+export default {
+  arrowParens: 'avoid',
+  bracketSameLine: false,
+  bracketSpacing: true,
+  endOfLine: 'auto',
+  htmlWhitespaceSensitivity: 'css',
+  printWidth: 120,
+  proseWrap: 'preserve',
+  semi: true,
+  singleAttributePerLine: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'none',
+  useTabs: false,
+  vueIndentScriptAndStyle: false
+};

package/src/main.js

@@ -1 +1 @@
-import '../tailwind/output.css';
+import '../tailwind/output.css';

package/src/mocks/getDEBouts-TableOf128.js

@@ -1,37 +1,37 @@
-import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
-
-const roundLabelRules = [
-  { matches: boutId => boutId >= 1 && boutId <= 64, label: 'Table of 128' },
-  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
-  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
-  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
-  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
-  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
-  { matches: boutId => boutId === 127, label: 'Final' }
-];
-
-const getCurrentRoundLabel = bout => {
-  const boutId = Number(bout.DEBoutId);
-  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
-};
-
-const normalizeTableOf128Bout = bout => ({
-  ...bout,
-  RoundLabel: getCurrentRoundLabel(bout)
-});
-
-const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
-
-const getDEBoutsTableOf128 = {
-  ...historicalSixtySevenFencerBracket,
-  message: 'Current Table of 128 fixture retrieved',
-  pools: [
-    {
-      ...historicalPool,
-      Bouts: historicalPool.Bouts.map(normalizeTableOf128Bout)
-    },
-    ...otherPools
-  ]
-};
-
-export default getDEBoutsTableOf128;
+import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
+
+const roundLabelRules = [
+  { matches: boutId => boutId >= 1 && boutId <= 64, label: 'Table of 128' },
+  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
+  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
+  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
+  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
+  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
+  { matches: boutId => boutId === 127, label: 'Final' }
+];
+
+const getCurrentRoundLabel = bout => {
+  const boutId = Number(bout.DEBoutId);
+  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
+};
+
+const normalizeTableOf128Bout = bout => ({
+  ...bout,
+  RoundLabel: getCurrentRoundLabel(bout)
+});
+
+const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
+
+const getDEBoutsTableOf128 = {
+  ...historicalSixtySevenFencerBracket,
+  message: 'Current Table of 128 fixture retrieved',
+  pools: [
+    {
+      ...historicalPool,
+      Bouts: historicalPool.Bouts.map(normalizeTableOf128Bout)
+    },
+    ...otherPools
+  ]
+};
+
+export default getDEBoutsTableOf128;

package/src/mocks/getDEBouts-TableOf64.js

@@ -1,35 +1,35 @@
-import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
-
-const FIRST_TABLE_OF_64_BOUT_ID = 65;
-
-const roundLabelRules = [
-  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
-  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
-  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
-  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
-  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
-  { matches: boutId => boutId === 127, label: 'Final' }
-];
-
-const isTableOf64Bout = bout => Number(bout.DEBoutId) >= FIRST_TABLE_OF_64_BOUT_ID;
-
-const getCurrentRoundLabel = bout => {
-  const boutId = Number(bout.DEBoutId);
-  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
-};
-
-const normalizeTableOf64Bout = bout => ({
-  ...bout,
-  RoundLabel: getCurrentRoundLabel(bout)
-});
-
-const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
-const tableOf64Bouts = historicalPool.Bouts.filter(isTableOf64Bout).map(normalizeTableOf64Bout);
-
-const getDEBoutsTableOf64 = {
-  ...historicalSixtySevenFencerBracket,
-  message: 'Current Table of 64 fixture retrieved',
-  pools: [{ ...historicalPool, Bouts: tableOf64Bouts }, ...otherPools]
-};
-
-export default getDEBoutsTableOf64;
+import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
+
+const FIRST_TABLE_OF_64_BOUT_ID = 65;
+
+const roundLabelRules = [
+  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
+  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
+  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
+  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
+  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
+  { matches: boutId => boutId === 127, label: 'Final' }
+];
+
+const isTableOf64Bout = bout => Number(bout.DEBoutId) >= FIRST_TABLE_OF_64_BOUT_ID;
+
+const getCurrentRoundLabel = bout => {
+  const boutId = Number(bout.DEBoutId);
+  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
+};
+
+const normalizeTableOf64Bout = bout => ({
+  ...bout,
+  RoundLabel: getCurrentRoundLabel(bout)
+});
+
+const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
+const tableOf64Bouts = historicalPool.Bouts.filter(isTableOf64Bout).map(normalizeTableOf64Bout);
+
+const getDEBoutsTableOf64 = {
+  ...historicalSixtySevenFencerBracket,
+  message: 'Current Table of 64 fixture retrieved',
+  pools: [{ ...historicalPool, Bouts: tableOf64Bouts }, ...otherPools]
+};
+
+export default getDEBoutsTableOf64;

package/src/stories/Atoms/Input/BaseInput.test.js

@@ -1,97 +1,97 @@
-import BaseInput from './BaseInput.vue';
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, it } from 'vitest';
-
-describe('BaseInput.vue', () => {
-  it('renders with default props', () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    expect(inputElement.attributes('placeholder')).toBe('');
-    expect(wrapper.vm.internalValue).toBe('');
-  });
-
-  it('initializes with the correct value prop', () => {
-    const initialValue = 'Hello, World!';
-    const wrapper = mount(BaseInput, {
-      props: {
-        value: initialValue
-      }
-    });
-
-    expect(wrapper.vm.internalValue).toBe(initialValue);
-  });
-
-  it('updates internalValue when value prop changes', async () => {
-    const wrapper = mount(BaseInput);
-    await wrapper.setProps({ value: 'New Value' });
-
-    expect(wrapper.vm.internalValue).toBe('New Value');
-  });
-
-  it('emits the latest value synchronously before the next action', () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    inputElement.element.value = 'Test Input';
-    inputElement.element.dispatchEvent(new Event('input', { bubbles: true }));
-    expect(wrapper.emitted('update:value')).toEqual([['Test Input']]);
-  });
-
-  it('applies input border styles when addBorder is enabled', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        addBorder: true,
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border');
-    expect(inputElement.classes()).toContain('rounded-lg');
-    expect(inputElement.classes()).toContain('text-quinary');
-    expect(inputElement.classes()).toContain('text-sm');
-    expect(inputElement.classes()).toContain('p-2');
-    expect(inputElement.classes()).toContain('w-full');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-
-  it('applies border-alarm class when invalid is true', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        addBorder: true,
-        invalid: true
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border-alarm');
-  });
-
-  it('does not apply border-alarm class when invalid is false', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        addBorder: true,
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).not.toContain('border-alarm');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-
-  it('delivers a cleared value before the input is unmounted', () => {
-    const wrapper = mount(BaseInput, { props: { value: '123', inputType: 'number' } });
-    const input = wrapper.find('input');
-    input.element.value = '';
-    input.element.dispatchEvent(new Event('input', { bubbles: true }));
-    expect(wrapper.emitted('update:value')).toEqual([['']]);
-    wrapper.unmount();
-  });
-
-  it('does not emit edits while disabled', () => {
-    const wrapper = mount(BaseInput, { props: { disabled: true, value: 'original' } });
-    const input = wrapper.find('input');
-    input.element.value = 'changed';
-    input.element.dispatchEvent(new Event('input', { bubbles: true }));
-    expect(wrapper.emitted('update:value')).toBeUndefined();
-  });
-});
+import BaseInput from './BaseInput.vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, it } from 'vitest';
+
+describe('BaseInput.vue', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    expect(inputElement.attributes('placeholder')).toBe('');
+    expect(wrapper.vm.internalValue).toBe('');
+  });
+
+  it('initializes with the correct value prop', () => {
+    const initialValue = 'Hello, World!';
+    const wrapper = mount(BaseInput, {
+      props: {
+        value: initialValue
+      }
+    });
+
+    expect(wrapper.vm.internalValue).toBe(initialValue);
+  });
+
+  it('updates internalValue when value prop changes', async () => {
+    const wrapper = mount(BaseInput);
+    await wrapper.setProps({ value: 'New Value' });
+
+    expect(wrapper.vm.internalValue).toBe('New Value');
+  });
+
+  it('emits the latest value synchronously before the next action', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    inputElement.element.value = 'Test Input';
+    inputElement.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['Test Input']]);
+  });
+
+  it('applies input border styles when addBorder is enabled', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border');
+    expect(inputElement.classes()).toContain('rounded-lg');
+    expect(inputElement.classes()).toContain('text-quinary');
+    expect(inputElement.classes()).toContain('text-sm');
+    expect(inputElement.classes()).toContain('p-2');
+    expect(inputElement.classes()).toContain('w-full');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('applies border-alarm class when invalid is true', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: true
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border-alarm');
+  });
+
+  it('does not apply border-alarm class when invalid is false', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).not.toContain('border-alarm');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('delivers a cleared value before the input is unmounted', () => {
+    const wrapper = mount(BaseInput, { props: { value: '123', inputType: 'number' } });
+    const input = wrapper.find('input');
+    input.element.value = '';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['']]);
+    wrapper.unmount();
+  });
+
+  it('does not emit edits while disabled', () => {
+    const wrapper = mount(BaseInput, { props: { disabled: true, value: 'original' } });
+    const input = wrapper.find('input');
+    input.element.value = 'changed';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toBeUndefined();
+  });
+});