@tailor-platform/app-shell 1.17.0 → 1.18.0

package/dist/{appshell-CahhZy7v.js → appshell-Y1AYCuVJ.js}

@@ -139,11 +139,11 @@ var Se = {
 	Row: ye,
 	Group: be,
 	Separator: xe
-}, Ce = O("astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&_svg]:pointer-events-none astw:[&_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive", {
+}, Ce = O("astw:inline-flex astw:cursor-pointer astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&_svg]:pointer-events-none astw:[&_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-danger-solid/20 astw:dark:aria-invalid:ring-danger-solid/40 astw:aria-invalid:border-danger-solid", {
 	variants: {
 		variant: {
 			default: "astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90",
-			destructive: "astw:bg-destructive astw:text-white astw:shadow-xs astw:hover:bg-destructive/90 astw:focus-visible:ring-destructive/20 astw:dark:focus-visible:ring-destructive/40 astw:dark:bg-destructive/60",
+			destructive: "astw:bg-danger-solid astw:text-danger-contrast astw:shadow-xs astw:hover:bg-danger-solid-hover astw:focus-visible:ring-danger-solid/20 astw:dark:focus-visible:ring-danger-solid/40",
 			outline: "astw:border astw:border-border astw:bg-transparent astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50",
 			secondary: "astw:bg-secondary astw:text-secondary-foreground astw:hover:bg-secondary/80",
 			ghost: "astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:hover:bg-accent/50",
@@ -367,7 +367,7 @@ var we = Symbol("localized-label"), Te = () => {
 		className: "astw:p-6",
 		children: /* @__PURE__ */ P("div", {
 			className: "astw:flex astw:items-start astw:gap-4",
-			children: [/* @__PURE__ */ N(ee, { className: "astw:h-5 astw:w-5 astw:text-destructive astw:flex-shrink-0 astw:mt-0.5" }), /* @__PURE__ */ P("div", { children: [
+			children: [/* @__PURE__ */ N(ee, { className: "astw:h-5 astw:w-5 astw:text-danger-text astw:flex-shrink-0 astw:mt-0.5" }), /* @__PURE__ */ P("div", { children: [
 				/* @__PURE__ */ N("h1", {
 					className: "astw:font-semibold astw:text-lg",
 					children: t("error404Title")
@@ -392,7 +392,7 @@ var we = Symbol("localized-label"), Te = () => {
 		className: "astw:p-6",
 		children: /* @__PURE__ */ P("div", {
 			className: "astw:flex astw:items-start astw:gap-4",
-			children: [/* @__PURE__ */ N(ee, { className: "astw:h-5 astw:w-5 astw:text-destructive astw:flex-shrink-0 astw:mt-0.5" }), /* @__PURE__ */ P("div", { children: [
+			children: [/* @__PURE__ */ N(ee, { className: "astw:h-5 astw:w-5 astw:text-danger-text astw:flex-shrink-0 astw:mt-0.5" }), /* @__PURE__ */ P("div", { children: [
 				/* @__PURE__ */ N("h1", {
 					className: "astw:font-semibold astw:text-lg",
 					children: t("errorTitle")
@@ -487,7 +487,7 @@ function Ke(t) {
 }
 var qe = {
 	name: "@tailor-platform/app-shell",
-	version: "1.17.0",
+	version: "1.18.0",
 	description: "An opinionated React application framework for building ERP applications on Tailor Platform",
 	keywords: [
 		"app-shell",
@@ -566,7 +566,7 @@ var qe = {
 		"@vitejs/plugin-react": "catalog:",
 		"@vitest/coverage-v8": "4.1.11",
 		"happy-dom": "20.14.5",
-		postcss: "8.5.28",
+		postcss: "8.5.30",
 		react: "catalog:",
 		"react-dom": "catalog:",
 		"react-hook-form": "7.71.2",
@@ -1387,7 +1387,7 @@ yn.displayName = "Dialog.Close";
 function bn({ className: e, ...t }) {
 	return /* @__PURE__ */ N(F.Backdrop, {
 		"data-slot": "dialog-overlay",
-		className: I("astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:fill-mode-forwards astw:fixed astw:inset-0 astw:z-(--z-overlay) astw:bg-black/50", e),
+		className: I("astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:fill-mode-forwards astw:fixed astw:inset-0 astw:z-(--z-overlay) astw:bg-backdrop", e),
 		...t
 	});
 }
@@ -1467,7 +1467,7 @@ function kn({ className: e, type: t, ref: n, ...r }) {
 		ref: L(i, n),
 		type: t,
 		"data-slot": "input",
-		className: I(Dn, "astw:file:text-foreground astw:file:inline-flex astw:file:h-7 astw:file:border-0 astw:file:bg-transparent astw:file:text-sm astw:file:font-medium", "astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive", e),
+		className: I(Dn, "astw:file:text-foreground astw:file:inline-flex astw:file:h-7 astw:file:border-0 astw:file:bg-transparent astw:file:text-sm astw:file:font-medium", "astw:aria-invalid:ring-danger-solid/20 astw:dark:aria-invalid:ring-danger-solid/40 astw:aria-invalid:border-danger-solid", e),
 		...r
 	});
 }
@@ -2097,9 +2097,9 @@ var $ = (e) => {
 		return console.error(e), /* @__PURE__ */ N("div", {
 			className: "astw:flex astw:min-h-screen astw:items-center astw:justify-center astw:bg-background astw:p-4",
 			children: /* @__PURE__ */ P("div", {
-				className: "astw:max-w-md astw:rounded-lg astw:border astw:border-destructive/50 astw:bg-destructive/10 astw:p-6 astw:text-center",
+				className: "astw:max-w-md astw:rounded-lg astw:border astw:border-danger-border astw:bg-danger-surface astw:p-6 astw:text-center",
 				children: [/* @__PURE__ */ N("h1", {
-					className: "astw:mb-2 astw:text-lg astw:font-semibold astw:text-destructive",
+					className: "astw:mb-2 astw:text-lg astw:font-semibold astw:text-danger-text",
 					children: "Configuration Error"
 				}), /* @__PURE__ */ N("p", {
 					className: "astw:text-sm astw:text-muted-foreground",

package/dist/semantic-contrast.test.ts

@@ -88,6 +88,8 @@ function contrast(a: Rgba, b: Rgba): number {
 }
 
 const MIN_TEXT = 4.5;
+/** WCAG 1.4.11 non-text contrast, for the invalid-input border. */
+const MIN_NON_TEXT = 3;
 /** Known and accepted: subtle hover text is below AA for some roles. A floor, not a pass. */
 const MIN_HOVER_TEXT = 4.2;
 const modes: Mode[] = ["light", "dark"];
@@ -151,4 +153,75 @@ describe.each(modes)("semantic colour contrast (%s)", (mode) => {
       ).toBeGreaterThanOrEqual(MIN_TEXT);
     });
   });
+
+  describe("destructive aliases", () => {
+    it.each([
+      ["--destructive", "--danger-solid"],
+      ["--destructive-foreground", "--danger-contrast"],
+    ])("%s resolves to %s", (alias, role) => {
+      expect(vars.get(alias)).toBe(`var(${role})`);
+      expect(color(alias)).toEqual(color(role));
+    });
+
+    it.each(pages)("danger solid meets 3:1 against %s (invalid-input border)", (page) => {
+      expect(contrast(color("--danger-solid"), color(page))).toBeGreaterThanOrEqual(MIN_NON_TEXT);
+    });
+  });
+});
+
+describe("default palette neutral tokens", () => {
+  // Pinned when the BRAND and SYSTEM tokens moved from literals onto the gray,
+  // white and alpha scales. That move was meant to keep every value, so a step
+  // change that alters one of these colours fails here.
+  const expected: Record<Mode, Record<string, string>> = {
+    light: {
+      "--foreground": "#0a0a0a",
+      "--muted-foreground": "#737373",
+      "--primary": "#171717",
+      "--primary-foreground": "#fafafa",
+      "--secondary": "#f5f5f5",
+      "--secondary-foreground": "#171717",
+      "--accent-foreground": "#0a0a0a",
+      "--background": "#fafafa",
+      "--card": "#ffffff",
+      "--card-foreground": "#0a0a0a",
+      "--popover": "#ffffff",
+      "--popover-foreground": "#0a0a0a",
+      "--muted": "#f5f5f5",
+      "--border": "#e5e5e5",
+      "--input": "#e5e5e5",
+      "--sidebar": "#fafafa",
+      "--sidebar-foreground": "#0a0a0a",
+      "--sidebar-border": "#e5e5e5",
+      "--backdrop": "rgba(0, 0, 0, 0.5)",
+    },
+    dark: {
+      "--foreground": "#fafafa",
+      "--muted-foreground": "#a3a3a3",
+      "--primary": "#e5e5e5",
+      "--primary-foreground": "#171717",
+      "--secondary": "#262626",
+      "--secondary-foreground": "#fafafa",
+      "--accent-foreground": "#fafafa",
+      "--background": "#0a0a0a",
+      "--card": "#171717",
+      "--card-foreground": "#fafafa",
+      "--popover": "#262626",
+      "--popover-foreground": "#fafafa",
+      "--muted": "#262626",
+      "--border": "rgba(255, 255, 255, 0.1)",
+      "--input": "rgba(255, 255, 255, 0.15)",
+      "--sidebar": "#0a0a0a",
+      "--sidebar-foreground": "#fafafa",
+      "--sidebar-border": "rgba(255, 255, 255, 0.1)",
+      "--backdrop": "rgba(0, 0, 0, 0.5)",
+    },
+  };
+
+  describe.each(["light", "dark"] as const)("%s mode", (mode) => {
+    const vars = variablesFor(mode);
+    it.each(Object.entries(expected[mode]))("%s resolves to %s", (token, value) => {
+      expect(parseColor(`var(${token})`, vars)).toEqual(parseColor(value, vars));
+    });
+  });
 });

package/dist/style-entry.d.ts

@@ -46,37 +46,17 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
-    var displayName: string;
-}
-
-
-declare namespace Body {
-    var displayName: string;
-}
-
-
-declare namespace Footer {
-    var displayName: string;
-}
-
-
-declare namespace Row {
-    var displayName: string;
-}
-
-
-declare namespace Head {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Cell {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Caption {
+declare namespace Provider {
     var displayName: string;
 }
 
@@ -91,12 +71,12 @@ declare namespace Header {
 }
 
 
-declare namespace Content {
+declare namespace ClearAll {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Sections {
     var displayName: string;
 }
 
@@ -106,12 +86,12 @@ declare namespace Trigger {
 }
 
 
-declare namespace Close {
+declare namespace Settings {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Root {
     var displayName: string;
 }
 
@@ -121,17 +101,7 @@ declare namespace Header {
 }
 
 
-declare namespace Footer {
-    var displayName: string;
-}
-
-
-declare namespace Title {
-    var displayName: string;
-}
-
-
-declare namespace Description {
+declare namespace Content {
     var displayName: string;
 }
 
@@ -141,122 +111,117 @@ declare namespace Root {
 }
 
 
-declare namespace Legend {
-    var displayName: string;
-}
-
-
-declare namespace ComboboxRoot {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInput {
+declare namespace Body {
     var displayName: string;
 }
 
 
-declare namespace ComboboxTrigger {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace ComboboxInputGroup {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace ComboboxContent {
+declare namespace Head {
     var displayName: string;
 }
 
 
-declare namespace ComboboxList {
+declare namespace Cell {
     var displayName: string;
 }
 
 
-declare namespace ComboboxItem {
+declare namespace Caption {
     var displayName: string;
 }
 
 
-declare namespace ComboboxEmpty {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroup {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace ComboboxGroupLabel {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace ComboboxClear {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChips {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChip {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace ComboboxChipRemove {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace ComboboxValue {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace ComboboxStatus {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace ComboboxCollection {
+declare namespace Label {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Control {
     var displayName: string;
 }
 
 
-declare namespace Label {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Control {
+declare namespace Error {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Validity {
     var displayName: string;
 }
 
 
-declare namespace Error {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Validity {
+declare namespace Legend {
     var displayName: string;
 }
 
@@ -341,57 +306,57 @@ declare namespace Root {
 }
 
 
-declare namespace Row {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace Group {
+declare namespace Close {
     var displayName: string;
 }
 
 
-declare namespace Separator {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Header {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace Footer {
     var displayName: string;
 }
 
 
-declare namespace Close {
+declare namespace Title {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Description {
     var displayName: string;
 }
 
 
-declare namespace Header {
+declare namespace Root {
     var displayName: string;
 }
 
 
-declare namespace Footer {
+declare namespace List {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace Tab {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace Panel {
     var displayName: string;
 }
 
@@ -401,42 +366,57 @@ declare namespace Root {
 }
 
 
-declare namespace List {
+declare namespace Row {
     var displayName: string;
 }
 
 
-declare namespace Tab {
+declare namespace Group {
     var displayName: string;
 }
 
 
-declare namespace Panel {
+declare namespace Separator {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace SelectRoot {
     var displayName: string;
 }
 
 
-declare namespace Title {
+declare namespace SelectTrigger {
     var displayName: string;
 }
 
 
-declare namespace Description {
+declare namespace SelectValue {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace SelectContent {
     var displayName: string;
 }
 
 
-declare namespace Settings {
+declare namespace SelectItem {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+
+declare namespace SelectGroupLabel {
+    var displayName: string;
+}
+
+
+declare namespace SelectSeparator {
     var displayName: string;
 }
 
@@ -451,87 +431,97 @@ declare namespace Root {
 }
 
 
-declare namespace Header {
+declare namespace Trigger {
     var displayName: string;
 }
 
 
-declare namespace ClearAll {
+declare namespace Content {
     var displayName: string;
 }
 
 
-declare namespace Sections {
+declare namespace ComboboxRoot {
     var displayName: string;
 }
 
 
-declare namespace Provider {
+declare namespace ComboboxInput {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace ComboboxTrigger {
     var displayName: string;
 }
 
 
-declare namespace Trigger {
+declare namespace ComboboxInputGroup {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace ComboboxContent {
     var displayName: string;
 }
 
 
-declare namespace SelectRoot {
+declare namespace ComboboxList {
     var displayName: string;
 }
 
 
-declare namespace SelectTrigger {
+declare namespace ComboboxItem {
     var displayName: string;
 }
 
 
-declare namespace SelectValue {
+declare namespace ComboboxEmpty {
     var displayName: string;
 }
 
 
-declare namespace SelectContent {
+declare namespace ComboboxGroup {
     var displayName: string;
 }
 
 
-declare namespace SelectItem {
+declare namespace ComboboxGroupLabel {
     var displayName: string;
 }
 
 
-declare namespace SelectGroup {
+declare namespace ComboboxClear {
     var displayName: string;
 }
 
 
-declare namespace SelectGroupLabel {
+declare namespace ComboboxChips {
     var displayName: string;
 }
 
 
-declare namespace SelectSeparator {
+declare namespace ComboboxChip {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteStandalone {
+declare namespace ComboboxChipRemove {
     var displayName: string;
 }
 
 
-declare namespace AutocompleteAsyncStandalone {
+declare namespace ComboboxValue {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxStatus {
+    var displayName: string;
+}
+
+
+declare namespace ComboboxCollection {
     var displayName: string;
 }
 
@@ -606,6 +596,16 @@ declare namespace AutocompleteStatus {
 }
 
 
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
+    var displayName: string;
+}
+
+
 declare namespace DataTableRoot {
     var displayName: string;
 }