@tenphi/starlight 0.9.6 → 0.10.2

package/dist/components/LayoutComponents.js

@@ -6,7 +6,6 @@ configureCookbookStates();
 
 export const LogoRoot = customizeComponent(
   "Logo",
-  { as: "span" },
   tasty({
     as: "span",
     styles: {
@@ -33,7 +32,6 @@ export const LogoRoot = customizeComponent(
 
 export const PackageVersionRoot = customizeComponent(
   "PackageVersion",
-  { as: "span" },
   tasty({
     as: "span",
     styles: {
@@ -55,7 +53,6 @@ export const PackageVersionRoot = customizeComponent(
 
 export const TopNavigationRoot = customizeComponent(
   "TopNavigation",
-  { as: "nav" },
   tasty({
     as: "nav",
     styles: {
@@ -101,7 +98,6 @@ export const TopNavigationRoot = customizeComponent(
 
 export const StarlightHeaderRoot = customizeComponent(
   "StarlightHeader",
-  { as: "div" },
   tasty({
     as: "div",
     styles: {
@@ -345,7 +341,6 @@ const appearanceSelectStyles = {
 
 export const ThemeSelectRoot = customizeComponent(
   "ThemeSelect",
-  { as: "starlight-theme-select" },
   tasty({
     as: "starlight-theme-select",
     styles: appearanceSelectStyles,
@@ -354,7 +349,6 @@ export const ThemeSelectRoot = customizeComponent(
 
 export const ContrastSelectRoot = customizeComponent(
   "ContrastSelect",
-  { as: "cookbook-contrast-select" },
   tasty({
     as: "cookbook-contrast-select",
     styles: appearanceSelectStyles,
@@ -363,7 +357,6 @@ export const ContrastSelectRoot = customizeComponent(
 
 export const MobileNavigationTabsRoot = customizeComponent(
   "MobileNavigationTabs",
-  { as: "nav" },
   tasty({
     as: "nav",
     styles: {
@@ -416,7 +409,6 @@ export const MobileNavigationTabsRoot = customizeComponent(
 
 export const MobileMenuFooterRoot = customizeComponent(
   "MobileMenuFooter",
-  { as: "div" },
   tasty({
     as: "div",
     styles: {
@@ -442,7 +434,6 @@ export const MobileMenuFooterRoot = customizeComponent(
 
 export const FooterRoot = customizeComponent(
   "Footer",
-  { as: "footer" },
   tasty({
     as: "footer",
     styles: {

package/dist/components/TastyComponents.js

@@ -6,7 +6,6 @@ configureCookbookStates();
 
 export const CardRoot = customizeComponent(
   "Card",
-  { as: "article" },
   tasty({
     as: "article",
     styles: {
@@ -68,7 +67,6 @@ const previewElements = {
 
 export const PreviewRoot = customizeComponent(
   "Preview",
-  { as: "figure", elements: previewElements },
   tasty({
     as: "figure",
     styles: {
@@ -116,7 +114,6 @@ export const PreviewRoot = customizeComponent(
 
 export const StepsRoot = customizeComponent(
   "Steps",
-  { as: "ol" },
   tasty({
     as: "ol",
     styles: {
@@ -132,7 +129,7 @@ export const StepsRoot = customizeComponent(
       Marker: {
         $: "> li::marker",
         color: "#accent-text",
-        preset: "bold",
+        preset: "strong",
       },
     },
   }),
@@ -140,7 +137,6 @@ export const StepsRoot = customizeComponent(
 
 export const TabsRoot = customizeComponent(
   "Tabs",
-  { as: "div" },
   tasty({
     as: "div",
     styles: {

package/dist/components/component-styles.test.ts

@@ -27,45 +27,22 @@ describe("component style configuration", () => {
     });
   });
 
-  it("supports explicit extension and complete replacement", () => {
-    configureComponentStyles({
-      Card: { mode: "extend", styles: { radius: "1cr" } },
-    });
-    expect(resolveComponentStyles("Card", defaults)).toMatchObject({
-      color: "#text",
-      radius: "1cr",
-    });
-
-    configureComponentStyles({
-      Card: { mode: "replace", styles: { display: "grid" } },
-    });
-    expect(resolveComponentStyles("Card", defaults)).toEqual({
-      display: "grid",
-    });
-  });
-
-  it("normalizes configured component overrides for Tasty composition", () => {
+  it("returns the user override for Tasty component composition", () => {
     expect(resolveComponentStyleOverride("Card")).toBeUndefined();
 
     configureComponentStyles({ Card: { padding: "3x" } });
     expect(resolveComponentStyleOverride("Card")).toEqual({
-      mode: "extend",
-      styles: { padding: "3x" },
-    });
-
-    configureComponentStyles({
-      Card: { mode: "replace", styles: { display: "grid" } },
-    });
-    expect(resolveComponentStyleOverride("Card")).toEqual({
-      mode: "replace",
-      styles: { display: "grid" },
+      padding: "3x",
     });
   });
 
-  it("exposes bridged Markdown components through the same style registry", () => {
+  it("merges configuration into bridged component style trees", () => {
     configureComponentStyles({
       MarkdownTable: { Table: { radius: "0" } },
       Mermaid: { Diagram: { maxInlineSize: "90%" } },
+      MobileTableOfContents: { LinkLabel: { whiteSpace: "normal" } },
+      Sidebar: { Link: { padding: "1x" } },
+      TableOfContents: { Link: { color: "#text" } },
     });
 
     expect(
@@ -84,6 +61,39 @@ describe("component style configuration", () => {
     ).toEqual({
       Diagram: { display: "block", maxInlineSize: "90%" },
     });
+    expect(
+      resolveComponentStyles("Sidebar", {
+        display: "block",
+        Content: { gap: "3x" },
+        Link: { color: "#text-soft", padding: "2x" },
+      }),
+    ).toEqual({
+      display: "block",
+      Content: { gap: "3x" },
+      Link: { color: "#text-soft", padding: "1x" },
+    });
+    expect(
+      resolveComponentStyles("TableOfContents", {
+        paddingBlockStart: "5x",
+        Heading: { color: "#text" },
+        Link: { color: "#text-muted", preset: "small" },
+      }),
+    ).toEqual({
+      paddingBlockStart: "5x",
+      Heading: { color: "#text" },
+      Link: { color: "#text", preset: "small" },
+    });
+    expect(
+      resolveComponentStyles("MobileTableOfContents", {
+        display: "grid",
+        Item: { minInlineSize: "0" },
+        LinkLabel: { overflow: "hidden", whiteSpace: "nowrap" },
+      }),
+    ).toEqual({
+      display: "grid",
+      Item: { minInlineSize: "0" },
+      LinkLabel: { overflow: "hidden", whiteSpace: "normal" },
+    });
   });
 
   it("keeps custom anatomy styles on the compatibility bridge", () => {

package/dist/components/component-styles.ts

@@ -21,32 +21,21 @@ export function configureComponentStyles(
 
 export function resolveComponentStyles(
   name: CookbookComponentName,
-  defaults: Styles,
+  baseStyles: Styles,
 ): Styles {
-  const configured = sharedConfiguration.__tenphiCookbookComponentStyles?.[
-    name
-  ] as ComponentStyleConfig | undefined;
-  if (!configured) return defaults;
-  if (isModeConfig(configured)) {
-    const styles = configured.styles as Styles;
-    return configured.mode === "replace"
-      ? styles
-      : mergeStyles(defaults, styles);
-  }
-  return mergeStyles(defaults, configured as Styles);
+  const configuredStyles = sharedConfiguration
+    .__tenphiCookbookComponentStyles?.[name] as
+    ComponentStyleConfig | undefined;
+  return configuredStyles
+    ? mergeStyles(baseStyles, configuredStyles as Styles)
+    : baseStyles;
 }
 
 export function resolveComponentStyleOverride(
   name: CookbookComponentName,
-): { mode: "extend" | "replace"; styles: Styles } | undefined {
-  const configured = sharedConfiguration.__tenphiCookbookComponentStyles?.[
-    name
-  ] as ComponentStyleConfig | undefined;
-  if (!configured) return undefined;
-  if (isModeConfig(configured)) {
-    return { mode: configured.mode, styles: configured.styles as Styles };
-  }
-  return { mode: "extend", styles: configured as Styles };
+): Styles | undefined {
+  return sharedConfiguration.__tenphiCookbookComponentStyles?.[name] as
+    Styles | undefined;
 }
 
 /** Preserve custom anatomy names from the pre-component style API. */
@@ -59,21 +48,8 @@ export function resolveLegacyAnatomyStyles(
       (entry): entry is [string, ComponentStyleConfig] =>
         !cookbookComponentNames.has(entry[0]) && entry[1] !== undefined,
     )
-    .map(([name, value]) => [
-      `[data-tasty-anatomy="${name}"]`,
-      isModeConfig(value) ? value.styles : value,
-    ]);
+    .map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, value]);
   return entries.length
     ? (Object.fromEntries(entries) as Record<string, Styles>)
     : undefined;
 }
-
-function isModeConfig(
-  value: ComponentStyleConfig,
-): value is Extract<ComponentStyleConfig, { mode: string }> {
-  return (
-    "mode" in value &&
-    (value.mode === "extend" || value.mode === "replace") &&
-    "styles" in value
-  );
-}

package/dist/components/customize-component.js

@@ -1,10 +1,8 @@
 import { tasty } from "@tenphi/tasty";
 import { resolveComponentStyleOverride } from "./component-styles.js";
 
-export function customizeComponent(name, options, base) {
+export function customizeComponent(name, base) {
   const override = resolveComponentStyleOverride(name);
   if (!override) return base;
-  return override.mode === "replace"
-    ? tasty({ ...options, styles: override.styles })
-    : tasty(base, { styles: override.styles });
+  return tasty(base, { styles: override });
 }

package/dist/index.js

@@ -163,7 +163,7 @@ const DEFAULT_TYPOGRAPHY_PRESETS = {
 		fontFamily: BODY_FONT,
 		fontSize: "1rem",
 		lineHeight: 1.65,
-		letterSpacing: "-0.006em",
+		letterSpacing: "0",
 		fontWeight: 420,
 		boldFontWeight: 640
 	},
@@ -171,16 +171,16 @@ const DEFAULT_TYPOGRAPHY_PRESETS = {
 		fontFamily: BODY_FONT,
 		fontSize: "1rem",
 		lineHeight: 1.15,
-		letterSpacing: "-0.025em",
+		letterSpacing: "-0.01em",
 		fontWeight: 640,
 		boldFontWeight: 720
 	},
-	h1: heading("clamp(2.5rem, 5vw, 3.25rem)", 1.05, "-0.045em"),
-	h2: heading("clamp(1.75rem, 3vw, 2.125rem)", 1.1, "-0.035em"),
-	h3: heading("1.5rem", 1.15, "-0.025em"),
-	h4: heading("1.25rem", 1.2, "-0.018em"),
-	h5: heading("1.125rem", 1.25, "-0.012em"),
-	h6: heading("1rem", 1.3, "-0.006em"),
+	h1: heading("clamp(2.5rem, 5vw, 3.25rem)", 1.05, "-0.025em"),
+	h2: heading("clamp(1.75rem, 3vw, 2.125rem)", 1.1, "-0.018em"),
+	h3: heading("1.5rem", 1.15, "-0.012em"),
+	h4: heading("1.25rem", 1.2, "-0.008em"),
+	h5: heading("1.125rem", 1.25, "-0.004em"),
+	h6: heading("1rem", 1.3, "0"),
 	navigation: {
 		fontFamily: "var(--body-font-family)",
 		fontSize: "0.9375rem",
@@ -851,12 +851,9 @@ function configureComponentStyles(styles) {
 /** Preserve custom anatomy names from the pre-component style API. */
 function resolveLegacyAnatomyStyles(styles) {
 	if (!styles) return void 0;
-	const entries = Object.entries(styles).filter((entry) => !cookbookComponentNames.has(entry[0]) && entry[1] !== void 0).map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, isModeConfig(value) ? value.styles : value]);
+	const entries = Object.entries(styles).filter((entry) => !cookbookComponentNames.has(entry[0]) && entry[1] !== void 0).map(([name, value]) => [`[data-tasty-anatomy="${name}"]`, value]);
 	return entries.length ? Object.fromEntries(entries) : void 0;
 }
-function isModeConfig(value) {
-	return "mode" in value && (value.mode === "extend" || value.mode === "replace") && "styles" in value;
-}
 //#endregion
 //#region src/component-overrides.ts
 function resolveComponentOverrides(defaults, overrides, disabledFooterPath) {