@tenphi/renderer 0.21.1 → 0.21.2

package/dist/overrides/Footer.astro

@@ -5,19 +5,20 @@ import { content } from "virtual:cookbook/config";
 import EditLink from "virtual:cookbook/components/EditLink";
 import LastUpdated from "virtual:cookbook/components/LastUpdated";
 import Pagination from "virtual:cookbook/components/Pagination";
-import { FooterRoot } from "../components/LayoutComponents.js";
+import { FooterRoot } from "../components/Footer.styles.js";
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
-<FooterRoot className="td-footer" data-tasty-anatomy="Footer">
-  <div class="td-footer__meta">
+<FooterRoot className="td-footer">
+  <div data-element="Meta">
     <EditLink />
     <LastUpdated />
   </div>
   <PageActions />
   <Pagination />
-  <p class="td-footer__credit">
+  <p data-element="Credit">
     {ui.generatedWith}{" "}
-    <a href="https://cookbook.tenphi.me/">Cookbook</a>.
+    <a data-element="CreditLink" href="https://cookbook.tenphi.me/">Cookbook</a
+    >.
   </p>
 </FooterRoot>

package/dist/overrides/Header.astro

@@ -15,14 +15,11 @@ import ThemeSelect from "virtual:cookbook/components/ThemeSelect";
 import { content } from "virtual:cookbook/config";
 import { layout as configuredLayout } from "virtual:cookbook/layout";
 import { activeNavigationTab, navigationPath } from "../navigation.js";
-import GlobalStyles from "../components/GlobalStyles.js";
 import Logo from "../components/SiteLogo.astro";
 import PackageVersion from "../components/PackageVersion.astro";
 import VersionSwitcher from "../components/VersionSwitcher.astro";
-import {
-  HeaderRoot,
-  TopNavigationRoot,
-} from "../components/LayoutComponents.js";
+import { HeaderRoot } from "../components/Header.styles.js";
+import { TopNavigationRoot } from "../components/TopNavigation.styles.js";
 
 const shouldRenderSearch = content.search;
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
@@ -52,18 +49,16 @@ function tabHref(link: string): string {
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
-<GlobalStyles />
 <HeaderRoot
   className={`td-header${layout.tabs.length ? " td-header--with-tabs" : ""}`}
-  data-tasty-anatomy="Header"
   data-has-sidebar={Astro.locals.cookbookRoute.hasSidebar ? "" : undefined}
 >
-  <div class="td-header__primary">
-    <div class="td-header__title">
+  <div data-element="Primary">
+    <div data-element="Title">
       {
         content.logo !== false && (
           <a
-            class="td-header__logo-link"
+            data-element="LogoLink"
             href={localeHref(
               content.logo ? (content.logo.href ?? "/") : "/",
               currentPath,
@@ -77,7 +72,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
                 : `${siteTitle}: ${ui.home}`
             }
           >
-            <Logo class="td-header__logo" />
+            <Logo />
           </a>
         )
       }
@@ -98,27 +93,29 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
         />
       )
     }
-    <div class="td-header__search cookbook-print-hidden">
+    <div data-element="Search" class="cookbook-print-hidden">
       {shouldRenderSearch && <Search />}
     </div>
     <HeaderLinks />
     <div
-      class="td-header__mobile-theme md:cookbook-hidden cookbook-print-hidden"
+      data-element="MobileTheme"
+      class="md:cookbook-hidden cookbook-print-hidden"
     >
       <ThemeSelect />
     </div>
     {
       !Astro.locals.cookbookRoute.hasSidebar &&
         Object.keys(content.locales ?? {}).length > 1 && (
-          <div class="td-header__mobile-language cookbook-print-hidden">
+          <div data-element="MobileLanguage" class="cookbook-print-hidden">
             <LanguageSelect compact />
           </div>
         )
     }
     <div
-      class="td-header__tools cookbook-hidden md:cookbook-flex cookbook-print-hidden"
+      data-element="Tools"
+      class="cookbook-hidden md:cookbook-flex cookbook-print-hidden"
     >
-      <div class="td-header__social"><SocialIcons /></div>
+      <div data-element="Social"><SocialIcons /></div>
       <ThemeSelect />
       <LanguageSelect />
     </div>
@@ -128,7 +125,6 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
       <TopNavigationRoot
         className="td-top-tabs cookbook-print-hidden"
         aria-label={ui.primary}
-        data-tasty-anatomy="TopNavigation"
       >
         {layout.tabs.map((tab, index) => (
           <a

package/dist/overrides/Hero.astro

@@ -1,5 +1,6 @@
 ---
 import DraftContentNotice from "virtual:cookbook/components/DraftContentNotice";
+import { HeroRoot } from "../components/Hero.styles.js";
 
 const { data } = Astro.locals.cookbookRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero ?? {};
@@ -25,7 +26,7 @@ if (image) {
 }
 ---
 
-<div class="hero">
+<HeroRoot className="hero">
   {
     darkImage && (
       <img
@@ -70,4 +71,4 @@ if (image) {
       )
     }
   </div>
-</div>
+</HeroRoot>

package/dist/overrides/LanguageSelect.astro

@@ -3,6 +3,7 @@ import { content } from "virtual:cookbook/config";
 import { localeTarget, routeLocale, messages } from "../localization.js";
 import { navigationPath } from "../navigation.js";
 import SelectPopover from "../components/SelectPopover.astro";
+import { LanguageSelectRoot } from "../components/LanguageSelect.styles.js";
 interface Props {
   compact?: boolean;
   sidebar?: boolean;
@@ -34,10 +35,9 @@ const selectedOption = options.find((option) => option.locale === selected);
 
 {
   options.length > 1 && (
-    <cookbook-language-select
+    <LanguageSelectRoot
       data-compact={compact ? "" : undefined}
       data-sidebar={sidebar ? "" : undefined}
-      data-tasty-anatomy="LanguageSelect"
     >
       <SelectPopover
         triggerLabel={`${accessibleLabel}: ${selectedOption?.label ?? ""}`}
@@ -52,6 +52,6 @@ const selectedOption = options.find((option) => option.locale === selected);
           current: option.locale === selected,
         }))}
       />
-    </cookbook-language-select>
+    </LanguageSelectRoot>
   )
 }

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