Move installer to inertia

composer.json

@@ -45,6 +45,7 @@
     "elvanto/litemoji": "~4.3.0",
     "enshrined/svg-sanitize": "~0.22.0",
     "guzzlehttp/guzzle": "^7.2.0",
+    "inertiajs/inertia-laravel": "^2.0",
     "laravel/framework": "^12.21.0",
     "league/uri": "^7.0",
     "moneyphp/money": "^4.0",

package.json

@@ -27,7 +27,7 @@
     "@craftcms/playwright": "file:packages/craftcms-playwright",
     "@craftcms/webpack": "file:packages/craftcms-webpack",
     "@playwright/test": "^1.52.0",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.16",
     "@total-typescript/tsconfig": "^1.0.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -50,9 +50,11 @@
   "dependencies": {
     "@craftcms/cp": "file:packages/craftcms-cp",
     "@inertiajs/vue3": "^2.2.7",
+    "@vueuse/core": "^14.0.0",
+    "axios": "^1.13.2",
     "laravel-vite-plugin": "^2.0.1",
     "lit": "^3.3.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "vue": "^3.5.22"
   }
 }

packages/craftcms-cp/src/components/input-password/input-password.ts

@@ -1,4 +1,4 @@
-import {css, html, LitElement} from 'lit';
+import {css, html} from 'lit';
 import {state} from 'lit/decorators.js';
 import {LionInput} from '@lion/ui/input.js';
 import {inputStyles} from '../../styles/form.styles.js';
@@ -41,6 +41,7 @@ export default class CraftInputPassword extends LionInput {
   renderSuffix = () => {
     return html`
       <craft-button
+        type="button"
         icon
         size="small"
         variant="plain"

packages/craftcms-cp/src/components/select/select.styles.ts

@@ -22,5 +22,7 @@ export default css`
     padding: var(--c-spacing-sm);
     border: 1px solid var(--c-color-neutral-border-subtle);
     border-radius: var(--c-radius-md);
+    max-height: 300px;
+    overflow: auto;
   }
 `;

packages/craftcms-cp/src/components/select/select.ts

@@ -27,6 +27,7 @@ export class CraftSelectInvoker extends LionSelectInvoker {
       css`
         :host {
           ${baseInputStyles}
+          width: 100% !important;
           box-shadow: var(--c-select-shadow);
         }
       `,

packages/craftcms-cp/src/styles/cp.css

@@ -33,3 +33,10 @@
     inset-inline-start: 0;
   }
 }
+
+.error-list {
+  color: var(--c-color-danger-on-normal);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

packages/craftcms-cp/src/styles/form.styles.ts

@@ -7,6 +7,9 @@ export const baseInputStyles = css`
   min-height: var(--c-input-height, var(--c-size-control-md));
   border: var(--c-input-border, 1px solid var(--c-form-control-border));
   border-radius: var(--c-input-radius, var(--c-radius-sm));
+  padding-block: 0;
+  width: 100%;
+  flex: 1 1 auto;
   padding-inline: var(--c-input-spacing-inline, var(--c-spacing-md));
   background-color: var(--c-input-bg, var(--c-form-control-bg));
   box-shadow: var(--c-input-shadow);
@@ -17,6 +20,14 @@ export const inputStyles = css`
     margin-bottom: var(--c-spacing-sm);
   }
 
+  :host([has-feedback-for='error']) {
+    color: var(--c-color-danger-on-normal);
+
+    ::slotted([slot='input']) {
+      border-color: var(--c-color-danger-border-emphasis);
+    }
+  }
+
   ::slotted(label) {
     line-height: 1;
     font-weight: bold;

packages/craftcms-cp/src/styles/shared/preflight.css

@@ -216,3 +216,11 @@ ul,
 menu {
   list-style: none;
 }
+
+/*
+Make images more responsive
+ */
+img {
+  max-width: 100%;
+  height: auto;
+}

packages/craftcms-cp/src/styles/shared/tokens.css

@@ -68,6 +68,14 @@
   --c-color-warning-on-emphasis: var(--color-yellow-50);
   --c-color-warning-on-subtle: var(--color-yellow-800);
 
+  --c-color-danger-bg-emphasis: var(--color-red-600);
+  --c-color-danger-bg-subtle: var(--color-red-100);
+  --c-color-danger-border-emphasis: var(--color-red-600);
+  --c-color-danger-border-subtle: var(--color-red-600);
+  --c-color-danger-on-emphasis: var(--color-red-50);
+  --c-color-danger-on-normal: var(--color-red-700);
+  --c-color-danger-on-subtle: var(--color-red-800);
+
   --c-font-body:
     system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto',
     'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
@@ -87,6 +95,7 @@
   --c-radius-sm: 3px;
   --c-radius-md: 4px;
   --c-radius-lg: 6px;
+  --c-radius-xl: 12px;
   --c-radius-full: calc(Infinity * 1px);
 
   --c-spacing: 0.25rem;
@@ -223,6 +232,21 @@
   --c-button-danger-fg-hover: var(--c-button-danger-fg);
 
   /** Appearances **/
+  /* Generic Panes */
+  --c-pane-bg: var(--c-bg-overlay);
+  --c-pane-fg: var(--c-fg-text);
+  --c-pane-border: 1px solid var(--c-border-subtle);
+  --c-pane-radius: var(--c-radius-md);
+
+  /* Modals */
+  --c-modal-bg: var(--c-pane-bg);
+  --c-modal-fg: var(--c-pane-fg);
+  --c-modal-radius: var(--c-radius-lg);
+  --c-modal-border: var(--c-pane-border);
+  --c-modal-shadow:
+    0 0 0 1px hsl(from var(--gray-400) h s l / 25%),
+    0 25px 100px hsl(from var(--gray-900) h s l / 50%);
+
   /* Plain */
 
   /* Chip */

packages/craftcms-cp/src/utilities/translate.ts

@@ -205,10 +205,11 @@ export function formatMessage(pattern: string, params: object): string {
 export function t(
   category: string,
   message: string,
-  params: Record<any, any>,
-  store: Record<string, any> = {}
+  params?: Record<any, any>,
+  store?: Record<string, any>
 ): string {
   if (
+    store &&
     typeof store[category] !== 'undefined' &&
     typeof store[category][message] !== 'undefined'
   ) {