@tenphi/renderer 0.21.1 → 0.21.4

package/dist/overrides/MarkdownContent.astro

@@ -1,10 +1,16 @@
 ---
 import { addHeadingPermalinks } from "../markdown/rendered-content.js";
+import MarkdownStyles from "../components/MarkdownContent.styles.js";
 
 const content = addHeadingPermalinks(await Astro.slots.render("default"));
 ---
 
-<div class="cookbook-markdown-content" set:html={content} />
+<MarkdownStyles />
+<div
+  class="cookbook-markdown-content"
+  data-element="Markdown"
+  set:html={content}
+/>
 
 <script>
   import { initializeHeadingLinks } from "../client/heading-links.js";

package/dist/overrides/MobileMenuFooter.astro

@@ -1,13 +1,10 @@
 ---
 import LanguageSelect from "virtual:cookbook/components/LanguageSelect";
 import SocialIcons from "virtual:cookbook/components/SocialIcons";
-import { MobileMenuFooterRoot } from "../components/LayoutComponents.js";
+import { MobileMenuFooterRoot } from "../components/MobileMenuFooter.styles.js";
 ---
 
-<MobileMenuFooterRoot
-  className="td-mobile-preferences"
-  data-tasty-anatomy="MobileMenuFooter"
->
+<MobileMenuFooterRoot className="td-mobile-preferences">
   <div class="td-mobile-preferences__social">
     <SocialIcons />
   </div>

package/dist/overrides/MobileMenuToggle.astro

@@ -2,6 +2,7 @@
 import { localizedNavigation, localePath } from "../localization.js";
 import { content } from "virtual:cookbook/config";
 import Icon from "../components/Icon.astro";
+import { MobileMenuToggleRoot } from "../components/MobileMenuToggle.styles.js";
 import { layout as configuredLayout } from "virtual:cookbook/layout";
 import { activeNavigationTab, navigationPath } from "../navigation.js";
 const route = Astro.locals.cookbookRoute;
@@ -21,16 +22,16 @@ const active = activeNavigationTab(
 const section = layout.tabs[active]?.label;
 ---
 
-<button
+<MobileMenuToggleRoot
   type="button"
   popovertarget="cookbook__sidebar"
   aria-controls="cookbook__sidebar"
   aria-expanded="false"
-  class="td-menu-button cookbook-menu-button cookbook-print-hidden"
+  className="td-menu-button cookbook-menu-button cookbook-print-hidden"
 >
   <Icon name="bars" class="open-menu" />
   <span class="sr-only">{Astro.locals.t("menuButton.accessibleLabel")}</span>
   {section && <span class="td-menu-button__section">{section}</span>}
   {section && <Icon name="right-caret" />}
   <span class="td-menu-button__page">{route.entry.data.title}</span>
-</button>
+</MobileMenuToggleRoot>

package/dist/overrides/MobileTableOfContents.astro

@@ -1,7 +1,7 @@
 ---
 import { content } from "virtual:cookbook/config";
 import { navigationPath } from "../navigation.js";
-import { MobileTableOfContentsRoot } from "../components/LayoutComponents.js";
+import { MobileTableOfContentsRoot } from "../components/MobileTableOfContents.styles.js";
 import MobileTocList from "../components/MobileTocList.astro";
 const { toc } = Astro.locals.cookbookRoute;
 const entry = content.entries.find(
@@ -20,7 +20,7 @@ const label = Astro.locals.t("tableOfContents.onThisPage");
     toc.items.some(
       (item) => item.slug !== "_top" || item.children.length > 0,
     ) && (
-      <MobileTableOfContentsRoot data-tasty-anatomy="MobileTableOfContents">
+      <MobileTableOfContentsRoot>
         <details>
           <>
             <summary>{label}</summary>

package/dist/overrides/PageFrame.astro

@@ -1,22 +1,20 @@
 ---
-import { PageFrameRoot } from "../components/LayoutComponents.js";
+import { PageFrameRoot } from "../components/PageFrame.styles.js";
+import { HeaderFrameRoot } from "../components/HeaderFrame.styles.js";
+import { SidebarRoot } from "../components/Sidebar.styles.js";
 const { hasSidebar } = Astro.locals.cookbookRoute;
 ---
 
-<PageFrameRoot
-  className="page"
-  data-tasty-anatomy="PageFrame"
-  data-has-sidebar={hasSidebar ? "" : undefined}
->
-  <header class="header"><slot name="header" /></header>
+<PageFrameRoot className="page" data-has-sidebar={hasSidebar ? "" : undefined}>
+  <HeaderFrameRoot className="header"><slot name="header" /></HeaderFrameRoot>
   {
     hasSidebar && (
-      <cookbook-sidebar-pane
+      <SidebarRoot
         id="cookbook__sidebar"
-        class="sidebar-pane cookbook-print-hidden"
+        className="sidebar-pane cookbook-print-hidden"
         popover="auto"
         aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
-        tabindex="-1"
+        tabIndex={-1}
       >
         <nav
           class="sidebar-content"
@@ -24,7 +22,7 @@ const { hasSidebar } = Astro.locals.cookbookRoute;
         >
           <slot name="sidebar" />
         </nav>
-      </cookbook-sidebar-pane>
+      </SidebarRoot>
     )
   }
   <div class="main-frame"><slot /></div>

package/dist/overrides/Search.astro

@@ -1,6 +1,9 @@
 ---
 import { messages } from "../localization.js";
 import { content } from "virtual:cookbook/config";
+import { SearchRoot } from "../components/Search.styles.js";
+import { SearchButtonRoot } from "../components/SearchButton.styles.js";
+import { SearchResultsRoot } from "../components/SearchResults.styles.js";
 const label = Astro.locals.t("search.label");
 const translations = {
   placeholder: label,
@@ -13,13 +16,13 @@ const translations = {
 };
 ---
 
-<site-search
-  class={Astro.props.class}
+<SearchRoot
+  className={Astro.props.class}
   data-translations={JSON.stringify(translations)}
   data-strip-trailing-slash={import.meta.env.TRAILING_SLASH === "never" ||
     undefined}
 >
-  <button
+  <SearchButtonRoot
     type="button"
     data-open-modal
     disabled
@@ -30,22 +33,23 @@ const translations = {
     <kbd data-pending aria-hidden="true"
       ><kbd>{Astro.locals.t("search.ctrlKey")}</kbd><kbd>K</kbd></kbd
     >
-  </button>
+  </SearchButtonRoot>
   <dialog aria-label={label}>
     <div class="dialog-frame">
       <button
         type="button"
+        data-element="Close"
         data-close-modal
         aria-label={Astro.locals.t("search.cancelLabel")}></button>
       {
         import.meta.env.DEV ? (
-          <p data-search-status dir="ltr">
+          <p data-element="Status" data-search-status dir="ltr">
             {Astro.locals.t("search.devWarning")}
           </p>
         ) : (
           <div class="search-container">
-            <p data-search-status role="status" hidden />
-            <div id="cookbook__search">
+            <p data-element="Status" data-search-status role="status" hidden />
+            <SearchResultsRoot id="cookbook__search">
               <div class="pagefind-ui" role="search" aria-label={label}>
                 <div class="cookbook-search-field">
                   <input
@@ -69,13 +73,13 @@ const translations = {
                 </div>
                 <div data-search-results />
               </div>
-            </div>
+            </SearchResultsRoot>
           </div>
         )
       }
     </div>
   </dialog>
-</site-search>
+</SearchRoot>
 <script>
   import { initializeSearch } from "../client/search.js";
   document.querySelectorAll<HTMLElement>("site-search").forEach((element) => {

package/dist/overrides/Sidebar.astro

@@ -48,6 +48,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 
 <div class="td-sidebar-heading">
   <a
+    data-element="HomeLink"
     class="td-sidebar-heading__home"
     href={localeHref(
       (content.logo && content.logo.href) || "/",
@@ -58,7 +59,9 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
     )}
   >
     <Logo />
-    <span data-site-title>{Astro.locals.cookbookRoute.siteTitle}</span>
+    <span data-element="HomeLabel" data-site-title
+      >{Astro.locals.cookbookRoute.siteTitle}</span
+    >
   </a>
   <button
     type="button"

package/dist/overrides/SocialIcons.astro

@@ -1,7 +1,7 @@
 ---
 import { content } from "virtual:cookbook/config";
 import Icon from "../components/Icon.astro";
-import { SocialIconsRoot } from "../components/LayoutComponents.js";
+import { SocialIconsRoot } from "../components/SocialIcons.styles.js";
 
 const repository = content.site.repository;
 const icon = repository?.includes("github.com")
@@ -16,7 +16,7 @@ const links = repository
 
 {
   links.length > 0 && (
-    <SocialIconsRoot data-tasty-anatomy="SocialIcons">
+    <SocialIconsRoot>
       {links.map(({ label, href, icon }) => (
         <a href={href} rel="me" aria-label={label} title={label}>
           <Icon name={icon} />

package/dist/overrides/ThemeSelect.astro

@@ -4,7 +4,7 @@ import { content } from "virtual:cookbook/config";
 import Icon from "../components/Icon.astro";
 import paletteIcon from "../icons/palette.svg?raw";
 import ContrastIcon from "../components/ContrastIcon.astro";
-import { ThemeSelectRoot } from "../components/LayoutComponents.js";
+import { ThemeSelectRoot } from "../components/ThemeSelect.styles.js";
 
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 const id = `appearance-${crypto.randomUUID()}`;
@@ -20,7 +20,7 @@ const contrasts = [
 ] as const;
 ---
 
-<ThemeSelectRoot data-tasty-anatomy="ThemeSelect">
+<ThemeSelectRoot>
   <button
     type="button"
     popovertarget={id}
@@ -29,7 +29,13 @@ const contrasts = [
   >
     <span aria-hidden="true" set:html={paletteIcon} />
   </button>
-  <div id={id} popover="auto" role="group" aria-label={ui.appearance}>
+  <div
+    data-element="Panel"
+    id={id}
+    popover="auto"
+    role="group"
+    aria-label={ui.appearance}
+  >
     <fieldset>
       <legend>{ui.colorScheme}</legend>
       {

package/dist/routes/Page.astro

@@ -14,6 +14,13 @@ import MarkdownContent from "virtual:cookbook/components/MarkdownContent";
 import MobileTableOfContents from "virtual:cookbook/components/MobileTableOfContents";
 import DraftContentNotice from "virtual:cookbook/components/DraftContentNotice";
 import TableOfContents from "virtual:cookbook/components/TableOfContents";
+import DocumentStyles from "../components/Document.styles.js";
+import { SkipLinkRoot } from "../components/SkipLink.styles.js";
+import { MainPaneRoot } from "../components/MainPane.styles.js";
+import { MainContentRoot } from "../components/MainContent.styles.js";
+import { BannerRoot } from "../components/Banner.styles.js";
+import { TableOfContentsLayoutRoot } from "../components/TableOfContentsLayout.styles.js";
+import { TableOfContentsRoot } from "../components/TableOfContents.styles.js";
 
 interface Props {
   frontmatter: Record<string, any>;
@@ -44,11 +51,12 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <DocumentStyles />
     <Head />
   </head>
   <body>
-    <a class="cookbook-skip-link" href="#main-content"
-      >{Astro.locals.t("page.skipToContent")}</a
+    <SkipLinkRoot className="cookbook-skip-link" href="#main-content"
+      >{Astro.locals.t("page.skipToContent")}</SkipLinkRoot
     >
     <PageFrame>
       <Header slot="header" />
@@ -56,23 +64,23 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
       <div>
         {
           route.toc && (
-            <aside class="right-sidebar-container cookbook-print-hidden">
+            <TableOfContentsLayoutRoot className="right-sidebar-container cookbook-print-hidden">
               <div class="right-sidebar">
                 <MobileTableOfContents />
-                <cookbook-table-of-contents class="right-sidebar-panel">
+                <TableOfContentsRoot className="right-sidebar-panel">
                   <h2>{Astro.locals.t("tableOfContents.onThisPage")}</h2>
                   <nav
                     aria-label={Astro.locals.t("tableOfContents.onThisPage")}
                   >
                     <TableOfContents items={route.toc.items} />
                   </nav>
-                </cookbook-table-of-contents>
+                </TableOfContentsRoot>
               </div>
-            </aside>
+            </TableOfContentsLayoutRoot>
           )
         }
-        <div class="main-pane">
-          <main
+        <MainPaneRoot className="main-pane">
+          <MainContentRoot
             id="main-content"
             data-pagefind-body={indexed ? "" : undefined}
             lang={route.entryMeta.lang}
@@ -80,7 +88,10 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
           >
             {
               data.banner && (
-                <div class="cookbook-banner" set:html={data.banner.content} />
+                <BannerRoot
+                  className="cookbook-banner"
+                  set:html={data.banner.content}
+                />
               )
             }
             {
@@ -113,8 +124,8 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
                 </>
               )
             }
-          </main>
-        </div>
+          </MainContentRoot>
+        </MainPaneRoot>
       </div>
     </PageFrame>
     <script>

package/dist/styling.d.ts

@@ -1,17 +1,12 @@
+import { defineComponent, extendComponent } from "./define-component.js";
 import { Styles as Styles$1 } from "@tenphi/tasty/core";
-import { ElementsDefinition, ModPropsInput, Styles, StylesInterface, SubElementProps, TastyElementOptions, TastyPolymorphicComponent, TokenPropsInput, VariantMap, mergeStyles, tasty, useGlobalStyles } from "@tenphi/tasty";
-import { ElementType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";
-//#region src/define-component.d.ts
-type SubElementTag<Definition extends ElementsDefinition[string]> = Definition extends string ? Definition : Definition extends {
-  as?: infer Tag;
-} ? Tag extends keyof JSX.IntrinsicElements ? Tag : "div" : "div";
-type SubElements<E extends ElementsDefinition> = { [Name in keyof E]: ForwardRefExoticComponent<PropsWithoutRef<SubElementProps<SubElementTag<E[Name]>>> & RefAttributes<SubElementTag<E[Name]> extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[SubElementTag<E[Name]>] : unknown>>; };
-/** Create a named Tasty component with theme.styles[name] merged into its defaults. */
-declare function defineComponent<K extends readonly (keyof StylesInterface)[], V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = "div", M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(name: string, options: TastyElementOptions<K, V, E, AsType, M, TP>): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E>;
+import { Styles, TastyPolymorphicComponent, mergeStyles, tasty, useGlobalStyles } from "@tenphi/tasty";
+//#region src/components/Button.styles.d.ts
+declare const Button: TastyPolymorphicComponent<"button", readonly never[], Record<string, never>, readonly never[], readonly never[]>;
 //#endregion
 //#region src/components/component-styles.d.ts
 /** Merge a partial theme override into a built-in or consumer style tree. */
 declare function resolveComponentStyles(name: string, baseStyles: Styles$1): Styles$1;
 //#endregion
-export { type Styles, defineComponent, mergeStyles, resolveComponentStyles, tasty, useGlobalStyles };
+export { Button, type Styles, defineComponent, extendComponent, mergeStyles, resolveComponentStyles, tasty, useGlobalStyles };
 //# sourceMappingURL=styling.d.ts.map

package/dist/styling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styling.d.ts","names":[],"sources":["../src/define-component.ts","../src/components/component-styles.ts"],"mappings":";;;;KAoBK,cAAc,mBAAmB,8BACpC,4BACI,aACA;EAAqB,WAAW;IAC9B,kBAAkB,IAAI,oBACpB;KAKL,YAAY,UAAU,yBACxB,cAAc,IAAI,0BACjB,gBAAgB,gBAAgB,cAAc,EAAE,WAC9C,cACE,cAAc,EAAE,qBAAqB,wBACjC,sBAAsB,cAAc,EAAE;;iBAOlC,gBACd,0BAA0B,oBAC1B,UAAU,YACV,UAAU,qBAAqB,uBAC/B,eAAe,qBACf,UAAU,kCACV,WAAW,oCAEX,cACA,SAAS,oBAAoB,GAAG,GAAG,GAAG,QAAQ,GAAG,MAChD,0BAA0B,QAAQ,GAAG,GAAG,GAAG,MAAM,YAAY;;;;iBCnChD,uBACd,cACA,YAAY,WACX"}
+{"version":3,"file":"styling.d.ts","names":[],"sources":["../src/components/Button.styles.d.ts","../src/components/component-styles.ts"],"mappings":";;;;cAEa,QAAQ,sDAGnB;;;;iBCYc,uBACd,cACA,YAAY,WACX"}

package/dist/styling.js

@@ -1,17 +1,24 @@
-import { i as resolveComponentStyles, t as configureCookbookStates } from "./tasty-states-rTLFy26t.js";
-import { mergeStyles, tasty, tasty as tasty$1, useGlobalStyles } from "@tenphi/tasty";
-//#region src/define-component.ts
-/** Create a named Tasty component with theme.styles[name] merged into its defaults. */
-function defineComponent(name, options) {
-	return tasty$1({
-		...options,
-		styles: resolveComponentStyles(name, options.styles ?? {})
-	});
-}
+import { n as resolveComponentStyles } from "./component-styles-DstqPFf3.js";
+import { t as configureCookbookStates } from "./tasty-states-_JhxFdK1.js";
+import { n as extendComponent, t as defineComponent } from "./define-component-BP4YwMak.js";
+import { mergeStyles, tasty, useGlobalStyles } from "@tenphi/tasty";
+//#region src/components/Button.styles.js
+/** Shared button foundation; descendants own their layout and interaction anatomy. */
+const Button = defineComponent("Button", {
+	as: "button",
+	styles: {
+		display: "flex",
+		alignItems: "center",
+		gap: "$gap",
+		blockSize: "min 0",
+		color: "#text-soft",
+		cursor: "pointer"
+	}
+});
 //#endregion
 //#region src/styling.ts
 configureCookbookStates();
 //#endregion
-export { defineComponent, mergeStyles, resolveComponentStyles, tasty, useGlobalStyles };
+export { Button, defineComponent, extendComponent, mergeStyles, resolveComponentStyles, tasty, useGlobalStyles };
 
 //# sourceMappingURL=styling.js.map

package/dist/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["tasty"],"sources":["../src/define-component.ts","../src/styling.ts"],"sourcesContent":["import {\n  tasty,\n  type ElementsDefinition,\n  type ModPropsInput,\n  type StylesInterface,\n  type SubElementProps,\n  type TastyElementOptions,\n  type TastyPolymorphicComponent,\n  type TokenPropsInput,\n  type VariantMap,\n} from \"@tenphi/tasty\";\nimport type {\n  ElementType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { resolveComponentStyles } from \"./components/component-styles.js\";\n\ntype SubElementTag<Definition extends ElementsDefinition[string]> =\n  Definition extends string\n    ? Definition\n    : Definition extends { as?: infer Tag }\n      ? Tag extends keyof JSX.IntrinsicElements\n        ? Tag\n        : \"div\"\n      : \"div\";\n\n// Use public Tasty types so declarations do not leak its private sub-element aliases.\ntype SubElements<E extends ElementsDefinition> = {\n  [Name in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<SubElementTag<E[Name]>>> &\n      RefAttributes<\n        SubElementTag<E[Name]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[SubElementTag<E[Name]>]\n          : unknown\n      >\n  >;\n};\n\n/** Create a named Tasty component with theme.styles[name] merged into its defaults. */\nexport function defineComponent<\n  K extends readonly (keyof StylesInterface)[],\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  AsType extends ElementType = \"div\",\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n>(\n  name: string,\n  options: TastyElementOptions<K, V, E, AsType, M, TP>,\n): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E> {\n  return tasty<K, V, E, AsType, M, TP>({\n    ...options,\n    styles: resolveComponentStyles(name, options.styles ?? {}),\n  }) as TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E>;\n}\n","import { configureCookbookStates } from \"./components/tasty-states.js\";\n\n// Consumer components can be evaluated before Cookbook's own components.\nconfigureCookbookStates();\n\nexport { tasty, useGlobalStyles, mergeStyles } from \"@tenphi/tasty\";\nexport type { Styles } from \"@tenphi/tasty\";\nexport { defineComponent } from \"./define-component.js\";\nexport { resolveComponentStyles } from \"./components/component-styles.js\";\n"],"mappings":";;;;AA0CA,SAAgB,gBAQd,MACA,SACiE;CACjE,OAAOA,QAA8B;EACnC,GAAG;EACH,QAAQ,uBAAuB,MAAM,QAAQ,UAAU,CAAC,CAAC;CAC3D,CAAC;AACH;;;ACtDA,wBAAwB"}
+{"version":3,"file":"styling.js","names":[],"sources":["../src/components/Button.styles.js","../src/styling.ts"],"sourcesContent":["import { defineComponent } from \"../define-component.js\";\n\n/** Shared button foundation; descendants own their layout and interaction anatomy. */\nexport const Button = defineComponent(\"Button\", {\n  as: \"button\",\n  styles: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"$gap\",\n    blockSize: \"min 0\",\n    color: \"#text-soft\",\n    cursor: \"pointer\",\n  },\n});\n","import { configureCookbookStates } from \"./components/tasty-states.js\";\n\n// Consumer components can be evaluated before Cookbook's own components.\nconfigureCookbookStates();\n\nexport { tasty, useGlobalStyles, mergeStyles } from \"@tenphi/tasty\";\nexport type { Styles } from \"@tenphi/tasty\";\nexport { defineComponent, extendComponent } from \"./define-component.js\";\nexport { Button } from \"./components/Button.styles.js\";\nexport { resolveComponentStyles } from \"./components/component-styles.js\";\n"],"mappings":";;;;;;AAGA,MAAa,SAAS,gBAAgB,UAAU;CAC9C,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EACL,WAAW;EACX,OAAO;EACP,QAAQ;CACV;AACF,CAAC;;;ACVD,wBAAwB"}

package/dist/tasty-states-_JhxFdK1.js

@@ -0,0 +1,47 @@
+import { resolveTypographyPresets } from "./theme/defaults.js";
+import { TASTY_SPACING_PROPERTIES, TASTY_UNITS } from "./theme/tasty-config.js";
+import { configure, getGlobalPredefinedStates } from "@tenphi/tasty";
+//#region src/components/tasty-states.js
+const systemLight = "@media(prefers-color-scheme: light)";
+const systemDark = "@media(prefers-color-scheme: dark)";
+const cookbookStates = {
+	"@system-light": systemLight,
+	"@system-dark": systemDark,
+	"@light": `@root(theme=light) | (!@root(theme) & ${systemLight})`,
+	"@dark": `@root(theme=dark) | (!@root(theme) & ${systemDark})`,
+	"@mobile": "@media(w < 50rem)",
+	"@desktop": "@media(w >= 50rem)",
+	"@small": "@media(w <= 40rem)",
+	"@compact": "@media(w <= 23rem)",
+	"@shell-mobile": "@media(w <= 48rem)",
+	"@shell-desktop": "@media(w > 48rem)",
+	"@narrow-layout": "@media(w < 72rem)",
+	"@medium-layout": "@media(w >= 50rem) & @media(w < 72rem)",
+	"@reduced-motion": "@media(prefers-reduced-motion: reduce)",
+	"@popover-open": ":is(:popover-open)"
+};
+let configured = false;
+let configuredRuntime;
+/** Configure aliases in the renderer's Tasty module before styles are parsed. */
+function configureCookbookStates() {
+	const runtime = globalThis.__tenphiCookbookTastyRuntime;
+	if (configured && configuredRuntime === runtime) return;
+	configure({
+		presets: resolveTypographyPresets(),
+		properties: TASTY_SPACING_PROPERTIES,
+		...runtime,
+		units: {
+			...TASTY_UNITS,
+			...runtime?.units
+		}
+	});
+	configuredRuntime = runtime;
+	const existingStates = getGlobalPredefinedStates();
+	const missingStates = Object.fromEntries(Object.entries(cookbookStates).filter(([name]) => existingStates[name] === void 0));
+	if (Object.keys(missingStates).length) configure({ states: missingStates });
+	configured = true;
+}
+//#endregion
+export { cookbookStates as n, configureCookbookStates as t };
+
+//# sourceMappingURL=tasty-states-_JhxFdK1.js.map

package/dist/tasty-states-_JhxFdK1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tasty-states-_JhxFdK1.js","names":[],"sources":["../src/components/tasty-states.js"],"sourcesContent":["import { configure, getGlobalPredefinedStates } from \"@tenphi/tasty\";\nimport { resolveTypographyPresets } from \"../theme/defaults.js\";\nimport {\n  TASTY_UNITS,\n  TASTY_SPACING_PROPERTIES,\n} from \"../theme/tasty-config.js\";\n\nconst systemLight = \"@media(prefers-color-scheme: light)\";\nconst systemDark = \"@media(prefers-color-scheme: dark)\";\n\nexport const cookbookStates = {\n  \"@system-light\": systemLight,\n  \"@system-dark\": systemDark,\n  \"@light\": `@root(theme=light) | (!@root(theme) & ${systemLight})`,\n  \"@dark\": `@root(theme=dark) | (!@root(theme) & ${systemDark})`,\n  \"@mobile\": \"@media(w < 50rem)\",\n  \"@desktop\": \"@media(w >= 50rem)\",\n  \"@small\": \"@media(w <= 40rem)\",\n  \"@compact\": \"@media(w <= 23rem)\",\n  \"@shell-mobile\": \"@media(w <= 48rem)\",\n  \"@shell-desktop\": \"@media(w > 48rem)\",\n  \"@narrow-layout\": \"@media(w < 72rem)\",\n  \"@medium-layout\": \"@media(w >= 50rem) & @media(w < 72rem)\",\n  \"@reduced-motion\": \"@media(prefers-reduced-motion: reduce)\",\n  \"@popover-open\": \":is(:popover-open)\",\n};\n\nlet configured = false;\nlet configuredRuntime;\n\n/** Configure aliases in the renderer's Tasty module before styles are parsed. */\nexport function configureCookbookStates() {\n  // Process-local server configuration shared across Astro/Vite module graphs.\n  // The integration prevents this module from entering browser bundles.\n  const runtime = globalThis.__tenphiCookbookTastyRuntime;\n  if (configured && configuredRuntime === runtime) return;\n  configure({\n    presets: resolveTypographyPresets(),\n    properties: TASTY_SPACING_PROPERTIES,\n    ...runtime,\n    units: { ...TASTY_UNITS, ...runtime?.units },\n  });\n  configuredRuntime = runtime;\n  // The integration may have configured this runtime already, including\n  // consumer overrides of built-in breakpoints. Only supply missing aliases.\n  const existingStates = getGlobalPredefinedStates();\n  const missingStates = Object.fromEntries(\n    Object.entries(cookbookStates).filter(\n      ([name]) => existingStates[name] === undefined,\n    ),\n  );\n  if (Object.keys(missingStates).length) configure({ states: missingStates });\n  configured = true;\n}\n"],"mappings":";;;;AAOA,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAa,iBAAiB;CAC5B,iBAAiB;CACjB,gBAAgB;CAChB,UAAU,yCAAyC,YAAY;CAC/D,SAAS,wCAAwC,WAAW;CAC5D,WAAW;CACX,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;AACnB;AAEA,IAAI,aAAa;AACjB,IAAI;;AAGJ,SAAgB,0BAA0B;CAGxC,MAAM,UAAU,WAAW;CAC3B,IAAI,cAAc,sBAAsB,SAAS;CACjD,UAAU;EACR,SAAS,yBAAyB;EAClC,YAAY;EACZ,GAAG;EACH,OAAO;GAAE,GAAG;GAAa,GAAG,SAAS;EAAM;CAC7C,CAAC;CACD,oBAAoB;CAGpB,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,gBAAgB,OAAO,YAC3B,OAAO,QAAQ,cAAc,CAAC,CAAC,QAC5B,CAAC,UAAU,eAAe,UAAU,KAAA,CACvC,CACF;CACA,IAAI,OAAO,KAAK,aAAa,CAAC,CAAC,QAAQ,UAAU,EAAE,QAAQ,cAAc,CAAC;CAC1E,aAAa;AACf"}

package/dist/theme/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","names":[],"sources":["../../src/theme/defaults.ts"],"mappings":";;cAMa;;;;;;;;;;;;;cAmBA,4BAA4B,eAAe;iBAiDxC,mBAAmB,SAAQ,cAAmB;iBAI9C,yBACd,UAAS,mBACT,eAAc,QAAQ,+CACrB,eAAe"}
+{"version":3,"file":"defaults.d.ts","names":[],"sources":["../../src/theme/defaults.ts"],"mappings":";;cAMa;;;;;;;;;;;;;cAmBA,4BAA4B,eAAe;iBA4ExC,mBAAmB,SAAQ,cAAmB;iBAI9C,yBACd,UAAS,mBACT,eAAc,QAAQ,+CACrB,eAAe"}

package/dist/theme/defaults.js

@@ -59,8 +59,29 @@ const DEFAULT_TYPOGRAPHY_PRESETS = {
 		letterSpacing: "0",
 		fontWeight: 400,
 		boldFontWeight: 650
-	}
+	},
+	"hero-title": derivedPreset("h1", { fontSize: "clamp(2.75rem, 7vw, 4.75rem)" }),
+	"hero-tagline": derivedPreset("body", {
+		fontSize: "clamp(1.05rem, 2.5vw, 1.35rem)",
+		lineHeight: 1.55
+	}),
+	prose: derivedPreset("body", { fontSize: "1.025rem" }),
+	"inline-code": derivedPreset("code", { fontSize: "0.875em" })
 };
+/** Keep specialized typography linked to user-configured base presets. */
+function derivedPreset(base, overrides) {
+	return {
+		fontFamily: `var(--${base}-font-family)`,
+		fontSize: `var(--${base}-font-size)`,
+		lineHeight: `var(--${base}-line-height)`,
+		letterSpacing: `var(--${base}-letter-spacing)`,
+		fontWeight: `var(--${base}-font-weight)`,
+		boldFontWeight: `var(--${base}-bold-font-weight)`,
+		fontStyle: `var(--${base}-font-style, var(--default-font-style))`,
+		textTransform: `var(--${base}-text-transform, var(--default-text-transform))`,
+		...overrides
+	};
+}
 function resolveThemeTokens(tokens = {}) {
 	return {
 		...DEFAULT_THEME_TOKENS,

package/dist/theme/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","names":[],"sources":["../../src/theme/defaults.ts"],"sourcesContent":["import type {\n  ThemeTokens,\n  TypographyPreset,\n  TypographyPresets,\n} from \"@tenphi/docs\";\n\nexport const DEFAULT_THEME_TOKENS = {\n  $gap: \"0.5rem\",\n  $radius: \"8px\",\n  \"$header-control-radius\": \"999px\",\n  \"$card-radius\": \"16px\",\n  \"$border-width\": \"1px\",\n  \"$outline-width\": \"2px\",\n  \"$outline-offset\": \"2px\",\n  \"$layout-width\": \"87.5rem\",\n  \"$content-width\": \"58rem\",\n  \"$sidebar-width\": \"17.5rem\",\n  \"$control-height\": \"2.5rem\",\n} satisfies ThemeTokens;\n\nconst BODY_FONT =\n  \"'Onest Variable', Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\nconst MONO_FONT =\n  \"'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\";\n\nexport const DEFAULT_TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  body: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 640,\n  },\n  heading: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.15,\n    letterSpacing: \"-0.006em\",\n    fontWeight: 610,\n    boldFontWeight: 720,\n  },\n  h1: heading(\"clamp(2.5rem, 5vw, 3.25rem)\", 1.05, \"-0.015em\"),\n  h2: heading(\"clamp(1.75rem, 3vw, 2.125rem)\", 1.1, \"-0.01em\"),\n  h3: heading(\"1.5rem\", 1.15, \"-0.006em\"),\n  h4: heading(\"1.25rem\", 1.2, \"-0.003em\"),\n  h5: heading(\"1.125rem\", 1.25, \"0\"),\n  h6: heading(\"1rem\", 1.3, \"0\"),\n  navigation: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.9375rem\",\n    lineHeight: 1.4,\n    letterSpacing: \"0\",\n    fontWeight: 450,\n    boldFontWeight: 580,\n  },\n  small: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.875rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.002em\",\n    fontWeight: 420,\n    boldFontWeight: 600,\n  },\n  code: {\n    fontFamily: MONO_FONT,\n    fontSize: \"0.875rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 650,\n  },\n};\n\nexport function resolveThemeTokens(tokens: ThemeTokens = {}): ThemeTokens {\n  return { ...DEFAULT_THEME_TOKENS, ...tokens };\n}\n\nexport function resolveTypographyPresets(\n  presets: TypographyPresets = {},\n  fontFamilies: Partial<Record<\"body\" | \"heading\" | \"code\", string>> = {},\n): Record<string, TypographyPreset> {\n  const body = DEFAULT_TYPOGRAPHY_PRESETS.body;\n  if (!body) throw new Error(\"The body typography preset is required.\");\n  const names = new Set([\n    ...Object.keys(DEFAULT_TYPOGRAPHY_PRESETS),\n    ...Object.keys(presets),\n  ]);\n  return Object.fromEntries(\n    [...names].map((name) => [\n      name,\n      {\n        ...(DEFAULT_TYPOGRAPHY_PRESETS[name] ?? body),\n        ...(name in fontFamilies\n          ? { fontFamily: fontFamilies[name as keyof typeof fontFamilies] }\n          : {}),\n        ...(presets[name] ?? {}),\n      },\n    ]),\n  );\n}\n\nfunction heading(\n  fontSize: string,\n  lineHeight: number,\n  letterSpacing: string,\n): TypographyPreset {\n  return {\n    fontFamily: \"var(--heading-font-family)\",\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    fontWeight: \"var(--heading-font-weight)\",\n    boldFontWeight: \"var(--heading-bold-font-weight)\",\n  };\n}\n"],"mappings":";AAMA,MAAa,uBAAuB;CAClC,MAAM;CACN,SAAS;CACT,0BAA0B;CAC1B,gBAAgB;CAChB,iBAAiB;CACjB,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,mBAAmB;AACrB;AAEA,MAAM,YACJ;AAIF,MAAa,6BAA+D;CAC1E,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,IAAI,QAAQ,+BAA+B,MAAM,UAAU;CAC3D,IAAI,QAAQ,iCAAiC,KAAK,SAAS;CAC3D,IAAI,QAAQ,UAAU,MAAM,UAAU;CACtC,IAAI,QAAQ,WAAW,KAAK,UAAU;CACtC,IAAI,QAAQ,YAAY,MAAM,GAAG;CACjC,IAAI,QAAQ,QAAQ,KAAK,GAAG;CAC5B,YAAY;EACV,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,OAAO;EACL,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;AACF;AAEA,SAAgB,mBAAmB,SAAsB,CAAC,GAAgB;CACxE,OAAO;EAAE,GAAG;EAAsB,GAAG;CAAO;AAC9C;AAEA,SAAgB,yBACd,UAA6B,CAAC,GAC9B,eAAqE,CAAC,GACpC;CAClC,MAAM,OAAO,2BAA2B;CACxC,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,yCAAyC;CACpE,MAAM,wBAAQ,IAAI,IAAI,CACpB,GAAG,OAAO,KAAK,0BAA0B,GACzC,GAAG,OAAO,KAAK,OAAO,CACxB,CAAC;CACD,OAAO,OAAO,YACZ,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,CACvB,MACA;EACE,GAAI,2BAA2B,SAAS;EACxC,GAAI,QAAQ,eACR,EAAE,YAAY,aAAa,MAAmC,IAC9D,CAAC;EACL,GAAI,QAAQ,SAAS,CAAC;CACxB,CACF,CAAC,CACH;AACF;AAEA,SAAS,QACP,UACA,YACA,eACkB;CAClB,OAAO;EACL,YAAY;EACZ;EACA;EACA;EACA,YAAY;EACZ,gBAAgB;CAClB;AACF"}
+{"version":3,"file":"defaults.js","names":[],"sources":["../../src/theme/defaults.ts"],"sourcesContent":["import type {\n  ThemeTokens,\n  TypographyPreset,\n  TypographyPresets,\n} from \"@tenphi/docs\";\n\nexport const DEFAULT_THEME_TOKENS = {\n  $gap: \"0.5rem\",\n  $radius: \"8px\",\n  \"$header-control-radius\": \"999px\",\n  \"$card-radius\": \"16px\",\n  \"$border-width\": \"1px\",\n  \"$outline-width\": \"2px\",\n  \"$outline-offset\": \"2px\",\n  \"$layout-width\": \"87.5rem\",\n  \"$content-width\": \"58rem\",\n  \"$sidebar-width\": \"17.5rem\",\n  \"$control-height\": \"2.5rem\",\n} satisfies ThemeTokens;\n\nconst BODY_FONT =\n  \"'Onest Variable', Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\nconst MONO_FONT =\n  \"'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\";\n\nexport const DEFAULT_TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  body: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 640,\n  },\n  heading: {\n    fontFamily: BODY_FONT,\n    fontSize: \"1rem\",\n    lineHeight: 1.15,\n    letterSpacing: \"-0.006em\",\n    fontWeight: 610,\n    boldFontWeight: 720,\n  },\n  h1: heading(\"clamp(2.5rem, 5vw, 3.25rem)\", 1.05, \"-0.015em\"),\n  h2: heading(\"clamp(1.75rem, 3vw, 2.125rem)\", 1.1, \"-0.01em\"),\n  h3: heading(\"1.5rem\", 1.15, \"-0.006em\"),\n  h4: heading(\"1.25rem\", 1.2, \"-0.003em\"),\n  h5: heading(\"1.125rem\", 1.25, \"0\"),\n  h6: heading(\"1rem\", 1.3, \"0\"),\n  navigation: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.9375rem\",\n    lineHeight: 1.4,\n    letterSpacing: \"0\",\n    fontWeight: 450,\n    boldFontWeight: 580,\n  },\n  small: {\n    fontFamily: \"var(--body-font-family)\",\n    fontSize: \"0.875rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.002em\",\n    fontWeight: 420,\n    boldFontWeight: 600,\n  },\n  code: {\n    fontFamily: MONO_FONT,\n    fontSize: \"0.875rem\",\n    lineHeight: 1.65,\n    letterSpacing: \"0\",\n    fontWeight: 400,\n    boldFontWeight: 650,\n  },\n  \"hero-title\": derivedPreset(\"h1\", {\n    fontSize: \"clamp(2.75rem, 7vw, 4.75rem)\",\n  }),\n  \"hero-tagline\": derivedPreset(\"body\", {\n    fontSize: \"clamp(1.05rem, 2.5vw, 1.35rem)\",\n    lineHeight: 1.55,\n  }),\n  prose: derivedPreset(\"body\", { fontSize: \"1.025rem\" }),\n  \"inline-code\": derivedPreset(\"code\", { fontSize: \"0.875em\" }),\n};\n\n/** Keep specialized typography linked to user-configured base presets. */\nfunction derivedPreset(\n  base: string,\n  overrides: TypographyPreset,\n): TypographyPreset {\n  return {\n    fontFamily: `var(--${base}-font-family)`,\n    fontSize: `var(--${base}-font-size)`,\n    lineHeight: `var(--${base}-line-height)`,\n    letterSpacing: `var(--${base}-letter-spacing)`,\n    fontWeight: `var(--${base}-font-weight)`,\n    boldFontWeight: `var(--${base}-bold-font-weight)`,\n    fontStyle: `var(--${base}-font-style, var(--default-font-style))`,\n    textTransform: `var(--${base}-text-transform, var(--default-text-transform))`,\n    ...overrides,\n  };\n}\n\nexport function resolveThemeTokens(tokens: ThemeTokens = {}): ThemeTokens {\n  return { ...DEFAULT_THEME_TOKENS, ...tokens };\n}\n\nexport function resolveTypographyPresets(\n  presets: TypographyPresets = {},\n  fontFamilies: Partial<Record<\"body\" | \"heading\" | \"code\", string>> = {},\n): Record<string, TypographyPreset> {\n  const body = DEFAULT_TYPOGRAPHY_PRESETS.body;\n  if (!body) throw new Error(\"The body typography preset is required.\");\n  const names = new Set([\n    ...Object.keys(DEFAULT_TYPOGRAPHY_PRESETS),\n    ...Object.keys(presets),\n  ]);\n  return Object.fromEntries(\n    [...names].map((name) => [\n      name,\n      {\n        ...(DEFAULT_TYPOGRAPHY_PRESETS[name] ?? body),\n        ...(name in fontFamilies\n          ? { fontFamily: fontFamilies[name as keyof typeof fontFamilies] }\n          : {}),\n        ...(presets[name] ?? {}),\n      },\n    ]),\n  );\n}\n\nfunction heading(\n  fontSize: string,\n  lineHeight: number,\n  letterSpacing: string,\n): TypographyPreset {\n  return {\n    fontFamily: \"var(--heading-font-family)\",\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    fontWeight: \"var(--heading-font-weight)\",\n    boldFontWeight: \"var(--heading-bold-font-weight)\",\n  };\n}\n"],"mappings":";AAMA,MAAa,uBAAuB;CAClC,MAAM;CACN,SAAS;CACT,0BAA0B;CAC1B,gBAAgB;CAChB,iBAAiB;CACjB,kBAAkB;CAClB,mBAAmB;CACnB,iBAAiB;CACjB,kBAAkB;CAClB,kBAAkB;CAClB,mBAAmB;AACrB;AAEA,MAAM,YACJ;AAIF,MAAa,6BAA+D;CAC1E,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,SAAS;EACP,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,IAAI,QAAQ,+BAA+B,MAAM,UAAU;CAC3D,IAAI,QAAQ,iCAAiC,KAAK,SAAS;CAC3D,IAAI,QAAQ,UAAU,MAAM,UAAU;CACtC,IAAI,QAAQ,WAAW,KAAK,UAAU;CACtC,IAAI,QAAQ,YAAY,MAAM,GAAG;CACjC,IAAI,QAAQ,QAAQ,KAAK,GAAG;CAC5B,YAAY;EACV,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,OAAO;EACL,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,MAAM;EACJ,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;CAClB;CACA,cAAc,cAAc,MAAM,EAChC,UAAU,+BACZ,CAAC;CACD,gBAAgB,cAAc,QAAQ;EACpC,UAAU;EACV,YAAY;CACd,CAAC;CACD,OAAO,cAAc,QAAQ,EAAE,UAAU,WAAW,CAAC;CACrD,eAAe,cAAc,QAAQ,EAAE,UAAU,UAAU,CAAC;AAC9D;;AAGA,SAAS,cACP,MACA,WACkB;CAClB,OAAO;EACL,YAAY,SAAS,KAAK;EAC1B,UAAU,SAAS,KAAK;EACxB,YAAY,SAAS,KAAK;EAC1B,eAAe,SAAS,KAAK;EAC7B,YAAY,SAAS,KAAK;EAC1B,gBAAgB,SAAS,KAAK;EAC9B,WAAW,SAAS,KAAK;EACzB,eAAe,SAAS,KAAK;EAC7B,GAAG;CACL;AACF;AAEA,SAAgB,mBAAmB,SAAsB,CAAC,GAAgB;CACxE,OAAO;EAAE,GAAG;EAAsB,GAAG;CAAO;AAC9C;AAEA,SAAgB,yBACd,UAA6B,CAAC,GAC9B,eAAqE,CAAC,GACpC;CAClC,MAAM,OAAO,2BAA2B;CACxC,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,yCAAyC;CACpE,MAAM,wBAAQ,IAAI,IAAI,CACpB,GAAG,OAAO,KAAK,0BAA0B,GACzC,GAAG,OAAO,KAAK,OAAO,CACxB,CAAC;CACD,OAAO,OAAO,YACZ,CAAC,GAAG,KAAK,CAAC,CAAC,KAAK,SAAS,CACvB,MACA;EACE,GAAI,2BAA2B,SAAS;EACxC,GAAI,QAAQ,eACR,EAAE,YAAY,aAAa,MAAmC,IAC9D,CAAC;EACL,GAAI,QAAQ,SAAS,CAAC;CACxB,CACF,CAAC,CACH;AACF;AAEA,SAAS,QACP,UACA,YACA,eACkB;CAClB,OAAO;EACL,YAAY;EACZ;EACA;EACA;EACA,YAAY;EACZ,gBAAgB;CAClB;AACF"}

package/dist/theme/tasty-config.d.ts

@@ -1,6 +1,28 @@
 import { t as ResolvedDocsTheme } from "../index-BuX_Sb5c.js";
 import { ConfigTokens } from "@tenphi/tasty/core";
 //#region src/theme/tasty-config.d.ts
+declare const TASTY_SPACING_PROPERTIES: {
+  readonly "$margin-block-start": {
+    readonly syntax: "<length-percentage> | auto";
+    readonly inherits: false;
+    readonly initialValue: "0px";
+  };
+  readonly "$margin-block-end": {
+    readonly syntax: "<length-percentage> | auto";
+    readonly inherits: false;
+    readonly initialValue: "0px";
+  };
+  readonly "$padding-block-start": {
+    readonly syntax: "<length-percentage>";
+    readonly inherits: false;
+    readonly initialValue: "0px";
+  };
+  readonly "$padding-block-end": {
+    readonly syntax: "<length-percentage>";
+    readonly inherits: false;
+    readonly initialValue: "0px";
+  };
+};
 declare const TASTY_UNITS: {
   readonly x: "var(--gap)";
   readonly r: "var(--radius)";
@@ -9,5 +31,5 @@ declare const TASTY_UNITS: {
 };
 declare function tastyTokens(theme: ResolvedDocsTheme): ConfigTokens;
 //#endregion
-export { TASTY_UNITS, tastyTokens };
+export { TASTY_SPACING_PROPERTIES, TASTY_UNITS, tastyTokens };
 //# sourceMappingURL=tasty-config.d.ts.map

package/dist/theme/tasty-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tasty-config.d.ts","names":[],"sources":["../../src/theme/tasty-config.ts"],"mappings":";;;cAGa;WACX;WACA;WACA;WACA;;iBAGc,YAAY,OAAO,oBAAoB"}
+{"version":3,"file":"tasty-config.d.ts","names":[],"sources":["../../src/theme/tasty-config.ts"],"mappings":";;;cAKa;WACX;aACE;aACA;aACA;;WAEF;aACE;aACA;aACA;;WAEF;aACE;aACA;aACA;;WAEF;aACE;aACA;aACA;;;cAIS;WACX;WACA;WACA;WACA;;iBAGc,YAAY,OAAO,oBAAoB"}

package/dist/theme/tasty-config.js

@@ -1,4 +1,26 @@
 //#region src/theme/tasty-config.ts
+const TASTY_SPACING_PROPERTIES = {
+	"$margin-block-start": {
+		syntax: "<length-percentage> | auto",
+		inherits: false,
+		initialValue: "0px"
+	},
+	"$margin-block-end": {
+		syntax: "<length-percentage> | auto",
+		inherits: false,
+		initialValue: "0px"
+	},
+	"$padding-block-start": {
+		syntax: "<length-percentage>",
+		inherits: false,
+		initialValue: "0px"
+	},
+	"$padding-block-end": {
+		syntax: "<length-percentage>",
+		inherits: false,
+		initialValue: "0px"
+	}
+};
 const TASTY_UNITS = {
 	x: "var(--gap)",
 	r: "var(--radius)",
@@ -11,6 +33,6 @@ function tastyTokens(theme) {
 	return tokens;
 }
 //#endregion
-export { TASTY_UNITS, tastyTokens };
+export { TASTY_SPACING_PROPERTIES, TASTY_UNITS, tastyTokens };
 
 //# sourceMappingURL=tasty-config.js.map