@askrjs/themes 0.0.4 → 0.0.7

package/src/components/container/container.a11y.ts

@@ -3,7 +3,6 @@ export const CONTAINER_A11Y_CONTRACT = {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
     variant: "data-variant" as const,
-    fluid: "data-fluid" as const,
     maxWidth: "data-max-width" as const,
     padding: "data-padding" as const,
     size: "data-size" as const,

package/src/components/container/container.tsx

@@ -15,7 +15,7 @@ import {
 } from "../_internal/layout";
 import type { ContainerAsChildProps, ContainerNativeProps } from "./container.types";
 
-const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl"]);
+const CONTAINER_WIDTH_TOKENS = new Set(["1", "2", "3", "4", "sm", "md", "lg", "xl", "fluid"]);
 
 function isContainerWidthToken(value: unknown): value is string {
   return typeof value === "string" && CONTAINER_WIDTH_TOKENS.has(value.trim());
@@ -45,7 +45,6 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     asChild,
     children,
     variant,
-    fluid = false,
     maxWidth,
     padding,
     size,
@@ -56,11 +55,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   } = props;
 
   const responsiveVariant =
-    fluid || (size === undefined && maxWidth === undefined)
-      ? fluid
-        ? "fluid"
-        : (variant ?? "default")
-      : undefined;
+    size === undefined && maxWidth === undefined ? (variant ?? "default") : undefined;
 
   const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {
@@ -69,7 +64,7 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
   };
   applyBoxLayoutStyles(layoutStyle, boxProps);
 
-  const widthValue = fluid ? undefined : (maxWidth ?? size);
+  const widthValue = maxWidth ?? size;
   const usesInlineMaxWidth =
     boxProps.maxWidth === undefined &&
     widthValue !== undefined &&
@@ -114,20 +109,15 @@ export function Container(props: ContainerNativeProps | ContainerAsChildProps) {
     "data-slot": "container",
     "data-ak-layout": "true",
     "data-variant": responsiveVariant,
-    "data-fluid": fluid ? "true" : undefined,
-    "data-size": fluid
-      ? undefined
-      : isStaticValue(size)
-        ? serializeResponsiveValueIf(size, isContainerWidthToken)
-        : undefined,
+    "data-size": isStaticValue(size)
+      ? serializeResponsiveValueIf(size, isContainerWidthToken)
+      : undefined,
     "data-align": isStaticValue(align)
       ? serializeResponsiveValueIf(align, isContainerAlignToken)
       : undefined,
-    "data-max-width": fluid
-      ? undefined
-      : isStaticValue(maxWidth)
-        ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
-        : undefined,
+    "data-max-width": isStaticValue(maxWidth)
+      ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken)
+      : undefined,
     ...(layoutClass ? { class: layoutClass } : {}),
   });
 

package/src/components/container/container.types.ts

@@ -7,10 +7,8 @@ export type ContainerVariant = "default" | "sm" | "md" | "lg" | "xl" | "xxl" | "
 export type ContainerOwnProps = BoxLayoutOwnProps & {
   /** Bootstrap-like responsive container variant. */
   variant?: ContainerVariant;
-  /** Makes the container span the full available width while preserving gutters. */
-  fluid?: boolean;
   /** Radix-style container size token. */
-  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl">;
+  size?: LayoutResponsive<"1" | "2" | "3" | "4" | "sm" | "md" | "lg" | "xl" | "fluid">;
   /** Horizontal alignment of the constrained container. */
   align?: LayoutResponsive<"left" | "center" | "right">;
   /** Compatibility max-width override. */

package/src/components/theme/theme.tsx

@@ -1,4 +1,5 @@
 import { defineContext, readContext, state } from "@askrjs/askr";
+import type { JSXElement } from "@askrjs/askr/foundations/structures";
 import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
@@ -186,8 +187,9 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     darkIcon,
     systemIcon,
   });
+  const renderedIcon = cloneThemeToggleIcon(themedIcon);
   const content =
-    typeof children === "function" ? children(renderContext) : (children ?? themedIcon);
+    typeof children === "function" ? children(renderContext) : (children ?? renderedIcon);
 
   return (
     <Button
@@ -230,6 +232,25 @@ export function resolveThemeToggleIcon(
   return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);
 }
 
+function isJSXElement(value: unknown): value is JSXElement {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "$$typeof" in value &&
+    "type" in value &&
+    "props" in value
+  );
+}
+
+function cloneThemeToggleIcon(icon: unknown): unknown {
+  if (!isJSXElement(icon)) return icon;
+
+  return {
+    ...icon,
+    props: { ...(icon.props as Record<string, unknown> | undefined) },
+  };
+}
+
 function syncThemeRoot(themeChoice: ThemeName | null | undefined): void {
   if (typeof document === "undefined") {
     return;

package/src/themes/default/index.css

@@ -2,9 +2,9 @@
 @import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
-@import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/base/utilities.css";
 @import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";

package/src/themes/default/styles/base/utilities.css

@@ -147,21 +147,34 @@
   row-gap: var(--ak-space-lg);
 }
 
-:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
+:where(
+  .flex-col,
+  [data-slot="flex"][data-direction="initial:column"],
+  [data-slot="inline"][data-direction="initial:column"]
+) {
   flex-direction: column;
 }
 
-:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
+:where(
+  .flex-row-reverse,
+  [data-slot="flex"][data-direction="initial:row-reverse"],
+  [data-slot="inline"][data-direction="initial:row-reverse"]
+) {
   flex-direction: row-reverse;
 }
 
-:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
+:where(
+  .flex-col-reverse,
+  [data-slot="flex"][data-direction="initial:column-reverse"],
+  [data-slot="inline"][data-direction="initial:column-reverse"]
+) {
   flex-direction: column-reverse;
 }
 
 :where(
   .items-start,
   [data-slot="flex"][data-align="initial:start"],
+  [data-slot="inline"][data-align="initial:start"],
   [data-slot="block"][data-align="initial:start"]
 ) {
   align-items: flex-start;
@@ -170,6 +183,7 @@
 :where(
   .items-end,
   [data-slot="flex"][data-align="initial:end"],
+  [data-slot="inline"][data-align="initial:end"],
   [data-slot="block"][data-align="initial:end"]
 ) {
   align-items: flex-end;
@@ -178,6 +192,7 @@
 :where(
   .items-center,
   [data-slot="flex"][data-align="initial:center"],
+  [data-slot="inline"][data-align="initial:center"],
   [data-slot="block"][data-align="initial:center"]
 ) {
   align-items: center;
@@ -186,6 +201,7 @@
 :where(
   .items-stretch,
   [data-slot="flex"][data-align="initial:stretch"],
+  [data-slot="inline"][data-align="initial:stretch"],
   [data-slot="block"][data-align="initial:stretch"]
 ) {
   align-items: stretch;
@@ -194,6 +210,7 @@
 :where(
   .items-baseline,
   [data-slot="flex"][data-align="initial:baseline"],
+  [data-slot="inline"][data-align="initial:baseline"],
   [data-slot="block"][data-align="initial:baseline"]
 ) {
   align-items: baseline;
@@ -202,6 +219,7 @@
 :where(
   .justify-start,
   [data-slot="flex"][data-justify="initial:start"],
+  [data-slot="inline"][data-justify="initial:start"],
   [data-slot="block"][data-justify="initial:start"]
 ) {
   justify-content: flex-start;
@@ -210,6 +228,7 @@
 :where(
   .justify-end,
   [data-slot="flex"][data-justify="initial:end"],
+  [data-slot="inline"][data-justify="initial:end"],
   [data-slot="block"][data-justify="initial:end"]
 ) {
   justify-content: flex-end;
@@ -218,6 +237,7 @@
 :where(
   .justify-center,
   [data-slot="flex"][data-justify="initial:center"],
+  [data-slot="inline"][data-justify="initial:center"],
   [data-slot="block"][data-justify="initial:center"]
 ) {
   justify-content: center;
@@ -226,15 +246,24 @@
 :where(
   .justify-between,
   [data-slot="flex"][data-justify="initial:between"],
+  [data-slot="inline"][data-justify="initial:between"],
   [data-slot="block"][data-justify="initial:between"]
 ) {
   justify-content: space-between;
 }
 
-:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
+:where(
+  .flex-nowrap,
+  [data-slot="flex"][data-wrap="initial:nowrap"],
+  [data-slot="inline"][data-wrap="initial:nowrap"]
+) {
   flex-wrap: nowrap;
 }
 
-:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
+:where(
+  .flex-wrap-reverse,
+  [data-slot="flex"][data-wrap="initial:wrap-reverse"],
+  [data-slot="inline"][data-wrap="initial:wrap-reverse"]
+) {
   flex-wrap: wrap-reverse;
 }

package/src/themes/default/styles/display/coverage.css

@@ -19,6 +19,97 @@
   gap: var(--ak-space-md);
 }
 
+[data-slot="inline"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:1"],
+[data-slot="inline"][data-gap="initial:1"] {
+  gap: var(--ak-space-1);
+}
+
+[data-slot="flex"][data-gap="initial:2"],
+[data-slot="inline"][data-gap="initial:2"] {
+  gap: var(--ak-space-2);
+}
+
+[data-slot="flex"][data-gap="initial:3"],
+[data-slot="inline"][data-gap="initial:3"] {
+  gap: var(--ak-space-3);
+}
+
+[data-slot="flex"][data-gap="initial:4"],
+[data-slot="inline"][data-gap="initial:4"] {
+  gap: var(--ak-space-4);
+}
+
+[data-slot="flex"][data-gap="initial:xs"],
+[data-slot="inline"][data-gap="initial:xs"] {
+  gap: var(--ak-space-xs);
+}
+
+[data-slot="flex"][data-gap="initial:sm"],
+[data-slot="inline"][data-gap="initial:sm"] {
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap="initial:md"],
+[data-slot="inline"][data-gap="initial:md"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:lg"],
+[data-slot="inline"][data-gap="initial:lg"] {
+  gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap="initial:xl"],
+[data-slot="inline"][data-gap="initial:xl"] {
+  gap: var(--ak-space-xl);
+}
+
+[data-slot="flex"][data-gap-x="initial:sm"],
+[data-slot="inline"][data-gap-x="initial:sm"] {
+  column-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-x="initial:md"],
+[data-slot="inline"][data-gap-x="initial:md"] {
+  column-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-x="initial:lg"],
+[data-slot="inline"][data-gap-x="initial:lg"] {
+  column-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap-y="initial:sm"],
+[data-slot="inline"][data-gap-y="initial:sm"] {
+  row-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-y="initial:md"],
+[data-slot="inline"][data-gap-y="initial:md"] {
+  row-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-y="initial:lg"],
+[data-slot="inline"][data-gap-y="initial:lg"] {
+  row-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-wrap="initial:nowrap"],
+[data-slot="inline"][data-wrap="initial:nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[data-slot="flex"][data-wrap="initial:wrap-reverse"],
+[data-slot="inline"][data-wrap="initial:wrap-reverse"] {
+  flex-wrap: wrap-reverse;
+}
+
 [data-slot="section"] {
   display: block;
 }
@@ -191,7 +282,6 @@
 [data-dialog-overlay],
 [data-dismissable-layer],
 [data-dropdown-label],
-[data-fluid],
 [data-focus-ring],
 [data-focus-scope],
 [data-gap],

package/src/themes/default/styles/layout/layout.css

@@ -64,7 +64,7 @@
   padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
 }
 
-:where([data-slot="container"][data-fluid="true"]) {
+:where([data-slot="container"][data-size="initial:fluid"]) {
   --ak-container-inline-size: 100%;
 }
 

package/src/themes/default/styles/layout/responsive-layout.css

@@ -36,7 +36,9 @@
 :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
   > :where([data-slot="shell-nav"]) {
   display: grid;
-  align-content: start;
+  align-content: stretch;
+  flex: 0 0 100vh;
+  min-block-size: 100vh;
   padding: var(--ak-layout-page-gutter);
   inline-size: 100%;
   max-inline-size: 100%;

package/src/themes/default/styles/shell/sidebar.css

@@ -125,7 +125,7 @@
       .sidebar-group[data-align="center"],
       [data-slot="sidebar-group"][data-align="center"]
     ) {
-    justify-items: stretch;
+    justify-items: center;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
@@ -141,9 +141,27 @@
       .sidebar-group-label,
       [data-slot="sidebar-group-label"]
     ) {
+    inline-size: 100%;
     text-align: center;
   }
 
+  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
+    :where(
+      .navbar-group[data-align="center"],
+      [data-slot="navbar-group"][data-align="center"],
+      .sidebar-group[data-align="center"],
+      [data-slot="sidebar-group"][data-align="center"]
+    )
+    > :where(
+      .navbar-group-body,
+      [data-slot="navbar-group-body"],
+      .sidebar-group-body,
+      [data-slot="sidebar-group-body"]
+    ) {
+    inline-size: 100%;
+    justify-items: center;
+  }
+
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
     :where(
       .navbar-group[data-align="end"],
@@ -207,7 +225,10 @@
       [data-slot="sidebar-group"][data-align="center"]
     )
     :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
+    inline-size: auto;
+    max-inline-size: 100%;
     justify-content: center;
+    justify-self: center;
   }
 
   :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])

package/templates/theme/index.css

@@ -2,9 +2,9 @@
 @import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
-@import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/base/utilities.css";
 @import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";

package/templates/theme/styles/display/coverage.css

@@ -19,6 +19,97 @@
   gap: var(--ak-space-md);
 }
 
+[data-slot="inline"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:1"],
+[data-slot="inline"][data-gap="initial:1"] {
+  gap: var(--ak-space-1);
+}
+
+[data-slot="flex"][data-gap="initial:2"],
+[data-slot="inline"][data-gap="initial:2"] {
+  gap: var(--ak-space-2);
+}
+
+[data-slot="flex"][data-gap="initial:3"],
+[data-slot="inline"][data-gap="initial:3"] {
+  gap: var(--ak-space-3);
+}
+
+[data-slot="flex"][data-gap="initial:4"],
+[data-slot="inline"][data-gap="initial:4"] {
+  gap: var(--ak-space-4);
+}
+
+[data-slot="flex"][data-gap="initial:xs"],
+[data-slot="inline"][data-gap="initial:xs"] {
+  gap: var(--ak-space-xs);
+}
+
+[data-slot="flex"][data-gap="initial:sm"],
+[data-slot="inline"][data-gap="initial:sm"] {
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap="initial:md"],
+[data-slot="inline"][data-gap="initial:md"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap="initial:lg"],
+[data-slot="inline"][data-gap="initial:lg"] {
+  gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap="initial:xl"],
+[data-slot="inline"][data-gap="initial:xl"] {
+  gap: var(--ak-space-xl);
+}
+
+[data-slot="flex"][data-gap-x="initial:sm"],
+[data-slot="inline"][data-gap-x="initial:sm"] {
+  column-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-x="initial:md"],
+[data-slot="inline"][data-gap-x="initial:md"] {
+  column-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-x="initial:lg"],
+[data-slot="inline"][data-gap-x="initial:lg"] {
+  column-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-gap-y="initial:sm"],
+[data-slot="inline"][data-gap-y="initial:sm"] {
+  row-gap: var(--ak-space-sm);
+}
+
+[data-slot="flex"][data-gap-y="initial:md"],
+[data-slot="inline"][data-gap-y="initial:md"] {
+  row-gap: var(--ak-space-md);
+}
+
+[data-slot="flex"][data-gap-y="initial:lg"],
+[data-slot="inline"][data-gap-y="initial:lg"] {
+  row-gap: var(--ak-space-lg);
+}
+
+[data-slot="flex"][data-wrap="initial:nowrap"],
+[data-slot="inline"][data-wrap="initial:nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[data-slot="flex"][data-wrap="initial:wrap-reverse"],
+[data-slot="inline"][data-wrap="initial:wrap-reverse"] {
+  flex-wrap: wrap-reverse;
+}
+
 [data-slot="section"] {
   display: block;
 }
@@ -191,7 +282,6 @@
 [data-dialog-overlay],
 [data-dismissable-layer],
 [data-dropdown-label],
-[data-fluid],
 [data-focus-ring],
 [data-focus-scope],
 [data-gap],

package/templates/theme/styles/layout/responsive-layout.css

@@ -36,7 +36,9 @@
 :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
   > :where([data-slot="shell-nav"]) {
   display: grid;
-  align-content: start;
+  align-content: stretch;
+  flex: 0 0 100vh;
+  min-block-size: 100vh;
   padding: var(--ak-layout-page-gutter);
   inline-size: 100%;
   max-inline-size: 100%;