@tailor-platform/app-shell 1.17.0 → 1.18.0

package/dist/testing.d.ts

@@ -587,37 +587,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;
 }
 
@@ -632,12 +612,12 @@ declare namespace Header {
 }
 
 
-declare namespace Content {
+declare namespace ClearAll {
     var displayName: string;
 }
 
 
-declare namespace Root {
+declare namespace Sections {
     var displayName: string;
 }
 
@@ -647,12 +627,12 @@ declare namespace Trigger {
 }
 
 
-declare namespace Close {
+declare namespace Settings {
     var displayName: string;
 }
 
 
-declare namespace Content {
+declare namespace Root {
     var displayName: string;
 }
 
@@ -662,17 +642,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;
 }
 
@@ -682,122 +652,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;
 }
 
@@ -882,57 +847,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;
 }
 
@@ -942,42 +907,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;
 }
 
@@ -992,87 +972,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;
 }
 
@@ -1147,6 +1137,16 @@ declare namespace AutocompleteStatus {
 }
 
 
+declare namespace AutocompleteStandalone {
+    var displayName: string;
+}
+
+
+declare namespace AutocompleteAsyncStandalone {
+    var displayName: string;
+}
+
+
 declare namespace DataTableRoot {
     var displayName: string;
 }

package/dist/testing.js

@@ -1,4 +1,4 @@
-import { n as e } from "./appshell-CahhZy7v.js";
+import { n as e } from "./appshell-Y1AYCuVJ.js";
 import { MemoryRouter as t, Route as n, Routes as r } from "react-router";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/testing/test-router.tsx

package/dist/theme-bridge.test.ts

@@ -71,19 +71,25 @@ describe("theme bridge", () => {
 
   describe("typography roles", () => {
     const slots = ["size", "line-height", "weight", "letter-spacing"] as const;
-    /** `--app-shell-type-<role>-<slot>` variables in the default palette, grouped by role. */
+    /** `--type-<role>-<slot>` variables in the default palette, grouped by role. */
     const defined = new Map<string, Map<string, string>>();
     for (const m of defaultTheme.matchAll(
-      /^\s*--app-shell-type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
+      /^\s*--type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
     )) {
       const role = m[1];
       defined.set(role, (defined.get(role) ?? new Map()).set(m[2], m[3].trim()));
     }
-    /** Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-...)`, keyed by property name. */
+    /**
+     * Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-X, var(--type-X))`,
+     * keyed by property name. The value is the `--type-*` name, or a marker when the
+     * entry does not read the same deprecated `--app-shell-type-*` name first.
+     */
     const bridgedText = new Map(
-      [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*var\((--app-shell-type-[a-z-]+)\);/gm)].map(
-        (m) => [m[1], m[2]],
-      ),
+      [
+        ...bridge.matchAll(
+          /^\s*(--text-[a-z-]+):\s*var\(\s*--app-shell-type-([a-z-]+),\s*var\(\s*--type-([a-z-]+)\s*\)\s*\);/gm,
+        ),
+      ].map((m) => [m[1], m[2] === m[3] ? `--type-${m[3]}` : `mismatched old name ${m[2]}`]),
     );
 
     it("pins the role count at 10", () => {
@@ -107,12 +113,22 @@ describe("theme bridge", () => {
       const expected = new Map<string, string>();
       for (const role of defined.keys()) {
         for (const slot of slots) {
-          expected.set(`--text-${role}${suffix[slot]}`, `--app-shell-type-${role}-${slot}`);
+          expected.set(`--text-${role}${suffix[slot]}`, `--type-${role}-${slot}`);
         }
       }
       expect(bridgedText).toEqual(expected);
     });
 
+    it("reads the deprecated --app-shell-type-* name first in every bridge entry", () => {
+      // 1.17.0 shipped the roles under --app-shell-type-*. The bridge resolves the
+      // fallback on the element, so an old-name override keeps working at any scope.
+      const typeEntries = [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*([^;]+);/gm)].filter((m) =>
+        m[2].includes("--type-"),
+      );
+      expect(typeEntries.length).toBe(defined.size * slots.length);
+      expect(typeEntries.filter((m) => !bridgedText.has(m[1])).map((m) => m[1])).toEqual([]);
+    });
+
     it("does not collide with a --color-* token that Tailwind resolves first", () => {
       // `text-<name>` resolves against --color-<name> before --text-<name>.
       const colors = [...bridge.matchAll(/^\s*--color-([a-z0-9-]+):/gm)].map((m) => m[1]);
@@ -156,4 +172,11 @@ describe("theme bridge", () => {
       }
     });
   });
+
+  it("defines --backdrop in the default palette and bridges it as bg-backdrop", () => {
+    // Dialog, Sheet and the CsvImporter drawer use `bg-backdrop`; without both
+    // lines the backdrop compiles to an undefined variable and turns transparent.
+    expect(defaultTheme).toMatch(/^\s*--backdrop:\s*var\(--primitive-black-a7\);/m);
+    expect(bridge).toMatch(/^\s*--color-backdrop:\s*var\(--backdrop\);/m);
+  });
 });