@askrjs/themes 0.0.9 → 0.0.11

package/README.md

@@ -1,11 +1,10 @@
 # @askrjs/themes
 
-CSS tokens, shell chrome, and styled composition helpers for Askr apps.
+CSS tokens and a shadcn-style styled component catalog for Askr apps.
 
 `@askrjs/themes` is the visual companion to `@askrjs/ui` and
-`@askrjs/charts`. It owns the default theme, shared layout wrappers, and
-theme-aware component styling while behavior and data contracts stay in the
-other packages.
+`@askrjs/charts`. It owns the default theme and styled component catalog while
+behavior stays in `@askrjs/ui` and chart components stay in `@askrjs/charts`.
 
 ## Install
 
@@ -33,11 +32,11 @@ Then set `data-theme` to `tabby`, `ginger`, `tuxedo`, `calico`, or `torty`.
 For picker/toggle composition, import `CAT_THEME_OPTIONS` and `CAT_THEME_NAMES`
 from `@askrjs/themes/theme`.
 
-Then use the theme helpers and curated component surfaces:
+Then use the theme helpers and component catalog:
 
 ```tsx
 import { ThemeProvider, ThemeToggle } from "@askrjs/themes/theme";
-import { Button, ButtonGroup, Field, InputGroup } from "@askrjs/themes/controls";
+import { Button, ButtonGroup, Field, Input, InputGroup, Label } from "@askrjs/themes/components";
 
 export function AppShell() {
   return (
@@ -48,8 +47,9 @@ export function AppShell() {
       </ButtonGroup>
 
       <Field>
+        <Label for="workspace">Workspace</Label>
         <InputGroup>
-          <input />
+          <Input id="workspace" name="workspace" />
         </InputGroup>
       </Field>
     </ThemeProvider>
@@ -59,13 +59,14 @@ export function AppShell() {
 
 ## What To Import
 
+- `@askrjs/themes/components` for the styled component catalog.
+- `@askrjs/themes/<component>` for package subpaths such as
+  `@askrjs/themes/button`, `@askrjs/themes/card`, and
+  `@askrjs/themes/dialog`.
 - `@askrjs/themes/theme` for `ThemeProvider`, `ThemePicker`, `ThemeToggle`,
-  and `useTheme`
-- `@askrjs/themes/controls` for theme-styled controls such as `Button`,
-  `ButtonGroup`, `Close`, `Field`, and `InputGroup`
-- `@askrjs/themes/layouts`, `@askrjs/themes/shells`, `@askrjs/themes/navs`,
-  `@askrjs/themes/surfaces`, `@askrjs/themes/feedback`, and
-  `@askrjs/themes/overlays` for the curated visual composition surfaces
+  and `useTheme`.
+- `@askrjs/charts` for charts; chart components are intentionally not exported
+  from `@askrjs/themes`.
 
 ## Theme Contract
 
@@ -74,5 +75,10 @@ export function AppShell() {
 - Keep selectors low specificity so downstream apps can customize them cleanly.
 - Use [THEMING.md](./THEMING.md) and [docs/architecture.md](./docs/architecture.md)
   for the full contract and package boundaries.
+- Use [docs/component-anatomy.md](./docs/component-anatomy.md) for stable slot
+  hooks and [docs/customization.md](./docs/customization.md) for the KISS
+  customization path.
+- Use [docs/recipes.md](./docs/recipes.md) for copyable login, admin shell,
+  settings form, table, dropdown, and detail-page patterns.
 
 - Use `visual-check.html` for manual QA across light and dark modes.

package/THEMING.md

@@ -1,8 +1,8 @@
 # Theming
 
-`@askrjs/themes` is the shell, token, and component styling companion to
-`@askrjs/charts`. It owns the app frame and shared visual language, while chart
-rendering stays in the chart package.
+`@askrjs/themes` is the token, structural preset, and component styling
+companion to `@askrjs/charts`. It owns the shared visual language while
+product-specific app layouts stay in userland recipes.
 
 See [docs/architecture.md](./docs/architecture.md) for the package boundary
 between `@askrjs/askr`, `@askrjs/ui`, and `@askrjs/themes`.
@@ -106,14 +106,14 @@ Package boundaries:
 
 - `@askrjs/askr` owns what exists and when.
 - `@askrjs/ui` owns behavior, state, focus, and ARIA coordination.
-- `@askrjs/themes` owns visual-only components, layout composition, and
-  default styling.
+- `@askrjs/themes` owns visual-only components, Block-first structural
+  presets, and default styling.
 
 Use the curated theme entrypoints such as `@askrjs/themes/controls`,
-`@askrjs/themes/surfaces`, `@askrjs/themes/navs`, and `@askrjs/themes/shells`
-for styled components such as Button, ButtonGroup, Close, InputGroup, Alert,
-Badge, Box, Block, ListGroup, Pagination, Skeleton, Separator/Divider, Shell,
-ShellNav, ShellMain, and EmptyState.
+`@askrjs/themes/core`, `@askrjs/themes/surfaces`, and `@askrjs/themes/navs`
+for styled components such as Button, ButtonGroup, Close, InputGroup, Block,
+Container, Header, Main, Sidebar, Navbar, NavBrand, NavDropdown, Alert, Badge,
+Tabs, Tab, Pills, Pill, Skeleton, Separator, and EmptyState.
 
 Theme state helpers also live there: `ThemeProvider`, `ThemePicker`,
 `ThemeToggle`, and `useTheme`. `ThemeToggle` intentionally has no built-in
@@ -123,23 +123,27 @@ be styled consistently across themes. If you use icon children, the direct child
 icon is sized from `var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em))`,
 so apps can override `--ak-theme-toggle-icon-size` to fit custom icon dimensions.
 The common wrapper components also emit familiar alias classes such as
-`alert`, `btn-group`, `btn-close`, `input-group`, `list-group`, and
-`pagination` so app-level CSS can stay close to the Bootstrap mental model
-without giving up the canonical `data-slot` contract.
+`alert`, `btn-group`, `btn-close`, `input-group`, `tabs`, and `pills` so
+app-level CSS can stay close to familiar HTML authoring without
+giving up the canonical `data-slot` contract.
 
 Responsive rules:
 
 - Build mobile first. Base selectors must work on narrow screens; larger layouts are additive via `min-width` media queries.
-- The default theme uses semantic breakpoints `sm`, `md`, `lg`, and `xl` for `data-collapse-below`.
+- `Block` is the only layout engine. Responsive layout props use `base`, `sm`, `md`, `lg`, and `xl`.
+- The default theme uses semantic breakpoints `sm`, `md`, `lg`, and `xl` for layout variables.
 - Keep breakpoint values centralized in theme tokens so the default theme and generated themes stay aligned.
-- Responsive behavior must target only public hooks such as `data-collapse-below`, `data-columns`, `data-min-item-width`, `data-gap`, `data-size`, and `data-variant`.
+- Responsive behavior must target only public hooks and Block-owned CSS variables.
+- Navbar collapse is a semantic preset: put `NavBrand` first, use `collapseAt`
+  for the single responsive pattern, and use `NavDropdown` for simple
+  single-level menus.
 - Prefer token overrides first. Reach for component CSS overrides only when tokens are insufficient.
 - Keep selectors low-specificity so a custom theme can override a rule with one equally specific selector. `:where(...)` is preferred for the default theme baseline.
-- Broad layout slots like `main`, `sidebar`, and `navbar` must always be anchored to a public layout root such as `shell`.
-- Named layout hooks such as `data-size`, `data-max-width`, `data-padding`, and `data-gap` are part of the public theme contract and should resolve through theme tokens rather than hard-coded values.
+- Broad layout slots like `main`, `sidebar`, and `navbar` are semantic Block presets, not independent layout engines.
+- Block-owned layout variables are part of the public theme contract and should resolve through theme tokens rather than hard-coded values.
 - Icons are part of the public theme contract. `@askrjs/ui` owns the canonical icon hooks, and official icon wrappers should implement that contract by emitting `data-slot="icon"`, `data-icon`, semantic `data-size`, and `data-decorative` so themes can style them uniformly across icon sets.
 - Icon size and stroke defaults should resolve through the shared icon tokens: `--ak-icon-size-sm|md|lg|xl` and `--ak-icon-stroke-width-sm|md|lg|xl`.
-- Product SaaS scaffolds should compose broad visual primitives first. Keep first-class pattern exports general; put narrow dashboard, auth, or table-page recipes in docs/examples unless they prove reusable across apps. Recipe shells such as product-style or marketing-style page wrappers belong in userland composition, not the shipped theme package.
+- Product SaaS scaffolds should compose broad visual primitives first. Keep first-class pattern exports general; put narrow dashboard, auth, or table-page recipes in docs/examples unless they prove reusable across apps. Product-style or marketing-style page layouts belong in userland composition, not the shipped theme package.
 - Comfortable density is tokenized through `--ak-density-control-height-*` and `--ak-density-control-padding-x-*`; apps should tune those before overriding component CSS.
 - Future class aliases must be added selectively with contract tests; do not mirror every internal slot as a class by default.
 
@@ -152,7 +156,7 @@ This document defines the default theme token contract for `askr-themes`.
 The purpose of this token set is to provide a stable, reusable semantic theming layer for:
 
 - `askr-ui` headless components
-- application shell layouts
+- application layouts
 - docs layouts
 - admin dashboards
 - forms
@@ -326,6 +330,7 @@ These are required for the default theme and any future theme reintroduced to th
 Required:
 
 - `--ak-font-family-body`
+- `--ak-font-family-display`
 - `--ak-font-family-mono`
 - `--ak-font-size-xs`
 - `--ak-font-size-sm`
@@ -662,6 +667,7 @@ These are recommended implementation defaults for component authors:
 :root {
   /* typography */
   --ak-font-family-body: system-ui, sans-serif;
+  --ak-font-family-display: system-ui, sans-serif;
   --ak-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 
   --ak-font-size-xs: 0.75rem;

package/dist/components/_internal/block-layout.d.ts

@@ -0,0 +1,49 @@
+//#region src/components/_internal/block-layout.d.ts
+type LayoutBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;
+type BlockSpace = "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "page";
+type BlockMargin = BlockSpace | "auto";
+type BlockSize = "auto" | "full" | "screen" | "content" | "sidebar" | "page" | "sm" | "md" | "lg" | "xl";
+type BlockDirection = "row" | "column" | "row-reverse" | "column-reverse";
+type BlockRowFrom = Exclude<LayoutBreakpoint, "base">;
+type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+type BlockJustify = "start" | "end" | "center" | "between";
+type BlockBackground = "surface" | "muted" | "selected" | "canvas" | "raised" | "overlay" | "transparent";
+type BlockRadius = true | "sm" | "md" | "lg" | "xl" | "round";
+type BlockShadow = true | "sm" | "md" | "lg";
+type BlockZIndex = "header" | "sticky" | "fixed" | "dropdown" | "modal" | "popover" | "toast" | "tooltip";
+type BlockLayoutProps = {
+  padding?: ResponsiveValue<BlockSpace>;
+  paddingX?: ResponsiveValue<BlockSpace>;
+  paddingY?: ResponsiveValue<BlockSpace>;
+  margin?: ResponsiveValue<BlockMargin>;
+  marginX?: ResponsiveValue<BlockMargin>;
+  marginY?: ResponsiveValue<BlockMargin>;
+  width?: ResponsiveValue<BlockSize>;
+  minWidth?: ResponsiveValue<BlockSize>;
+  maxWidth?: ResponsiveValue<BlockSize>;
+  height?: ResponsiveValue<BlockSize>;
+  minHeight?: ResponsiveValue<BlockSize>;
+  maxHeight?: ResponsiveValue<BlockSize>;
+  rowFrom?: BlockRowFrom;
+  direction?: ResponsiveValue<BlockDirection>;
+  align?: ResponsiveValue<BlockAlign>;
+  justify?: ResponsiveValue<BlockJustify>;
+  gap?: ResponsiveValue<BlockSpace>;
+  grow?: ResponsiveValue<boolean | number>;
+  shrink?: ResponsiveValue<boolean | number>;
+  center?: ResponsiveValue<boolean>;
+  sticky?: boolean;
+  top?: ResponsiveValue<BlockSpace>;
+  zIndex?: ResponsiveValue<BlockZIndex>;
+  background?: ResponsiveValue<BlockBackground>;
+  border?: ResponsiveValue<boolean>;
+  borderBottom?: ResponsiveValue<boolean>;
+  borderRight?: ResponsiveValue<boolean>;
+  radius?: ResponsiveValue<BlockRadius>;
+  shadow?: ResponsiveValue<BlockShadow>;
+  hide?: ResponsiveValue<boolean>;
+};
+//#endregion
+export { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockLayoutProps, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue };
+//# sourceMappingURL=block-layout.d.ts.map

package/dist/components/_internal/block-layout.js

@@ -0,0 +1,210 @@
+import { serializeCssDeclarations } from "./style.js";
+//#region src/components/_internal/block-layout.ts
+const BREAKPOINTS = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+const SPACE_TOKEN_MAP = {
+	"0": "0",
+	xs: "var(--ak-space-xs)",
+	sm: "var(--ak-space-sm)",
+	md: "var(--ak-space-md)",
+	lg: "var(--ak-space-lg)",
+	xl: "var(--ak-space-xl)",
+	"2xl": "var(--ak-space-2xl)",
+	"3xl": "var(--ak-space-3xl)",
+	page: "var(--ak-layout-page-gutter)"
+};
+const SIZE_TOKEN_MAP = {
+	auto: "auto",
+	full: "100%",
+	screen: "100dvh",
+	content: "min(60vh, 36rem)",
+	sidebar: "var(--ak-layout-sidebar-width)",
+	page: "var(--ak-layout-content-max-width)",
+	sm: "var(--ak-container-1)",
+	md: "var(--ak-container-2)",
+	lg: "var(--ak-container-3)",
+	xl: "var(--ak-container-4)"
+};
+const BACKGROUND_TOKEN_MAP = {
+	canvas: "var(--ak-color-bg)",
+	surface: "var(--ak-color-surface)",
+	muted: "var(--ak-color-surface-muted)",
+	raised: "var(--ak-color-surface-raised)",
+	overlay: "var(--ak-color-surface-overlay)",
+	selected: "var(--ak-color-selected)",
+	transparent: "transparent"
+};
+const RADIUS_TOKEN_MAP = {
+	sm: "var(--ak-radius-sm)",
+	md: "var(--ak-radius-md)",
+	lg: "var(--ak-radius-lg)",
+	xl: "var(--ak-radius-xl)",
+	round: "var(--ak-radius-round)"
+};
+const SHADOW_TOKEN_MAP = {
+	sm: "var(--ak-shadow-sm)",
+	md: "var(--ak-shadow-md)",
+	lg: "var(--ak-shadow-lg)"
+};
+const Z_INDEX_TOKEN_MAP = {
+	header: "var(--ak-z-sticky)",
+	sticky: "var(--ak-z-sticky)",
+	fixed: "var(--ak-z-fixed)",
+	dropdown: "var(--ak-z-dropdown)",
+	modal: "var(--ak-z-modal)",
+	popover: "var(--ak-z-popover)",
+	toast: "var(--ak-z-toast)",
+	tooltip: "var(--ak-z-tooltip)"
+};
+const BORDER_VALUE = "1px solid var(--ak-color-border-subtle)";
+const BLOCK_LAYOUT_KEYS = new Set([
+	"padding",
+	"paddingX",
+	"paddingY",
+	"margin",
+	"marginX",
+	"marginY",
+	"width",
+	"minWidth",
+	"maxWidth",
+	"height",
+	"minHeight",
+	"maxHeight",
+	"rowFrom",
+	"direction",
+	"align",
+	"justify",
+	"gap",
+	"grow",
+	"shrink",
+	"center",
+	"sticky",
+	"top",
+	"zIndex",
+	"background",
+	"border",
+	"borderBottom",
+	"borderRight",
+	"radius",
+	"shadow",
+	"hide"
+]);
+function isResponsiveValue(value) {
+	return Boolean(value && typeof value === "object" && !Array.isArray(value) && BREAKPOINTS.some((breakpoint) => breakpoint in value));
+}
+function normalizeResponsiveValue(value) {
+	if (value === void 0) return void 0;
+	if (isResponsiveValue(value)) return value;
+	return { base: value };
+}
+function resolveTokenValue(value, tokens) {
+	if (typeof value === "number") return value;
+	const trimmed = value.trim();
+	return tokens[trimmed] ?? trimmed;
+}
+function resolveSpaceValue(value) {
+	return resolveTokenValue(value, SPACE_TOKEN_MAP);
+}
+function resolveSizeValue(value) {
+	return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
+}
+function resolveAlignValue(value) {
+	if (value === "start") return "flex-start";
+	if (value === "end") return "flex-end";
+	return value;
+}
+function resolveJustifyValue(value) {
+	if (value === "start") return "flex-start";
+	if (value === "end") return "flex-end";
+	if (value === "between") return "space-between";
+	return value;
+}
+function resolveFlexFlag(value) {
+	if (value === true) return 1;
+	if (value === false) return 0;
+	return value;
+}
+function resolveBorderValue(value) {
+	if (value === false) return "0";
+	return BORDER_VALUE;
+}
+function resolveRadiusValue(value) {
+	if (value === true) return RADIUS_TOKEN_MAP.md;
+	return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));
+}
+function resolveShadowValue(value) {
+	if (value === true) return SHADOW_TOKEN_MAP.sm;
+	return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));
+}
+function setResponsiveVar(styles, property, value, resolve) {
+	const normalized = normalizeResponsiveValue(value);
+	if (!normalized) return;
+	for (const breakpoint of BREAKPOINTS) {
+		const breakpointValue = normalized[breakpoint];
+		if (breakpointValue === void 0) continue;
+		const resolved = resolve(breakpointValue);
+		if (resolved === void 0 || resolved === "") continue;
+		styles[`--ak-${property}-${breakpoint}`] = resolved;
+	}
+}
+function splitBlockLayoutProps(props) {
+	const blockProps = {};
+	const rest = {};
+	for (const [key, value] of Object.entries(props)) if (BLOCK_LAYOUT_KEYS.has(key)) blockProps[key] = value;
+	else rest[key] = value;
+	return {
+		blockProps,
+		rest
+	};
+}
+function applyBlockLayoutStyles(styles, props) {
+	setResponsiveVar(styles, "p", props.padding, resolveSpaceValue);
+	setResponsiveVar(styles, "px", props.paddingX, resolveSpaceValue);
+	setResponsiveVar(styles, "py", props.paddingY, resolveSpaceValue);
+	setResponsiveVar(styles, "m", props.margin, resolveSpaceValue);
+	setResponsiveVar(styles, "mx", props.marginX, resolveSpaceValue);
+	setResponsiveVar(styles, "my", props.marginY, resolveSpaceValue);
+	setResponsiveVar(styles, "width", props.width, resolveSizeValue);
+	setResponsiveVar(styles, "min-width", props.minWidth, resolveSizeValue);
+	setResponsiveVar(styles, "max-width", props.maxWidth, resolveSizeValue);
+	setResponsiveVar(styles, "height", props.height, resolveSizeValue);
+	setResponsiveVar(styles, "min-height", props.minHeight, resolveSizeValue);
+	setResponsiveVar(styles, "max-height", props.maxHeight, resolveSizeValue);
+	if (props.rowFrom !== void 0) styles[`--ak-flex-direction-${props.rowFrom}`] = "row";
+	setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
+	setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
+	setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
+	setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
+	setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
+	setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
+	if (props.center !== void 0) {
+		setResponsiveVar(styles, "align-items", props.center, (value) => value ? "center" : void 0);
+		setResponsiveVar(styles, "justify-content", props.center, (value) => value ? "center" : void 0);
+	}
+	if (props.sticky) styles["--ak-position-base"] = "sticky";
+	setResponsiveVar(styles, "top", props.top, resolveSpaceValue);
+	setResponsiveVar(styles, "z-index", props.zIndex, (value) => String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)));
+	setResponsiveVar(styles, "background", props.background, (value) => String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)));
+	setResponsiveVar(styles, "border", props.border, resolveBorderValue);
+	setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
+	setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
+	setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);
+	setResponsiveVar(styles, "box-shadow", props.shadow, resolveShadowValue);
+	setResponsiveVar(styles, "display", props.hide, (value) => value ? "none" : "flex");
+}
+function mergeLayoutStyles(layout, user) {
+	const merged = { ...layout };
+	if (user !== null && user !== void 0 && typeof user === "object") Object.assign(merged, user);
+	const mergedString = serializeCssDeclarations(merged);
+	if (typeof user === "string" && user.trim()) return mergedString ? `${mergedString};${user.trim()}` : user.trim();
+	return mergedString || void 0;
+}
+//#endregion
+export { applyBlockLayoutStyles, mergeLayoutStyles, splitBlockLayoutProps };
+
+//# sourceMappingURL=block-layout.js.map

package/dist/components/_internal/block-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n  | \"auto\"\n  | \"full\"\n  | \"screen\"\n  | \"content\"\n  | \"sidebar\"\n  | \"page\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n  | \"surface\"\n  | \"muted\"\n  | \"selected\"\n  | \"canvas\"\n  | \"raised\"\n  | \"overlay\"\n  | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n  | \"header\"\n  | \"sticky\"\n  | \"fixed\"\n  | \"dropdown\"\n  | \"modal\"\n  | \"popover\"\n  | \"toast\"\n  | \"tooltip\";\n\nexport type BlockLayoutProps = {\n  padding?: ResponsiveValue<BlockSpace>;\n  paddingX?: ResponsiveValue<BlockSpace>;\n  paddingY?: ResponsiveValue<BlockSpace>;\n  margin?: ResponsiveValue<BlockMargin>;\n  marginX?: ResponsiveValue<BlockMargin>;\n  marginY?: ResponsiveValue<BlockMargin>;\n  width?: ResponsiveValue<BlockSize>;\n  minWidth?: ResponsiveValue<BlockSize>;\n  maxWidth?: ResponsiveValue<BlockSize>;\n  height?: ResponsiveValue<BlockSize>;\n  minHeight?: ResponsiveValue<BlockSize>;\n  maxHeight?: ResponsiveValue<BlockSize>;\n  rowFrom?: BlockRowFrom;\n  direction?: ResponsiveValue<BlockDirection>;\n  align?: ResponsiveValue<BlockAlign>;\n  justify?: ResponsiveValue<BlockJustify>;\n  gap?: ResponsiveValue<BlockSpace>;\n  grow?: ResponsiveValue<boolean | number>;\n  shrink?: ResponsiveValue<boolean | number>;\n  center?: ResponsiveValue<boolean>;\n  sticky?: boolean;\n  top?: ResponsiveValue<BlockSpace>;\n  zIndex?: ResponsiveValue<BlockZIndex>;\n  background?: ResponsiveValue<BlockBackground>;\n  border?: ResponsiveValue<boolean>;\n  borderBottom?: ResponsiveValue<boolean>;\n  borderRight?: ResponsiveValue<boolean>;\n  radius?: ResponsiveValue<BlockRadius>;\n  shadow?: ResponsiveValue<BlockShadow>;\n  hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n  \"0\": \"0\",\n  xs: \"var(--ak-space-xs)\",\n  sm: \"var(--ak-space-sm)\",\n  md: \"var(--ak-space-md)\",\n  lg: \"var(--ak-space-lg)\",\n  xl: \"var(--ak-space-xl)\",\n  \"2xl\": \"var(--ak-space-2xl)\",\n  \"3xl\": \"var(--ak-space-3xl)\",\n  page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n  auto: \"auto\",\n  full: \"100%\",\n  screen: \"100dvh\",\n  content: \"min(60vh, 36rem)\",\n  sidebar: \"var(--ak-layout-sidebar-width)\",\n  page: \"var(--ak-layout-content-max-width)\",\n  sm: \"var(--ak-container-1)\",\n  md: \"var(--ak-container-2)\",\n  lg: \"var(--ak-container-3)\",\n  xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n  canvas: \"var(--ak-color-bg)\",\n  surface: \"var(--ak-color-surface)\",\n  muted: \"var(--ak-color-surface-muted)\",\n  raised: \"var(--ak-color-surface-raised)\",\n  overlay: \"var(--ak-color-surface-overlay)\",\n  selected: \"var(--ak-color-selected)\",\n  transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n  sm: \"var(--ak-radius-sm)\",\n  md: \"var(--ak-radius-md)\",\n  lg: \"var(--ak-radius-lg)\",\n  xl: \"var(--ak-radius-xl)\",\n  round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n  sm: \"var(--ak-shadow-sm)\",\n  md: \"var(--ak-shadow-md)\",\n  lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n  header: \"var(--ak-z-sticky)\",\n  sticky: \"var(--ak-z-sticky)\",\n  fixed: \"var(--ak-z-fixed)\",\n  dropdown: \"var(--ak-z-dropdown)\",\n  modal: \"var(--ak-z-modal)\",\n  popover: \"var(--ak-z-popover)\",\n  toast: \"var(--ak-z-toast)\",\n  tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n  \"padding\",\n  \"paddingX\",\n  \"paddingY\",\n  \"margin\",\n  \"marginX\",\n  \"marginY\",\n  \"width\",\n  \"minWidth\",\n  \"maxWidth\",\n  \"height\",\n  \"minHeight\",\n  \"maxHeight\",\n  \"rowFrom\",\n  \"direction\",\n  \"align\",\n  \"justify\",\n  \"gap\",\n  \"grow\",\n  \"shrink\",\n  \"center\",\n  \"sticky\",\n  \"top\",\n  \"zIndex\",\n  \"background\",\n  \"border\",\n  \"borderBottom\",\n  \"borderRight\",\n  \"radius\",\n  \"shadow\",\n  \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n  return Boolean(\n    value &&\n    typeof value === \"object\" &&\n    !Array.isArray(value) &&\n    BREAKPOINTS.some((breakpoint) => breakpoint in value),\n  );\n}\n\nfunction normalizeResponsiveValue<T>(\n  value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n  if (value === undefined) return undefined;\n  if (isResponsiveValue(value)) return value;\n  return { base: value };\n}\n\nfunction resolveTokenValue(\n  value: string | number,\n  tokens: Record<string, string>,\n): string | number {\n  if (typeof value === \"number\") return value;\n  const trimmed = value.trim();\n  return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n  return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string): string {\n  return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n  if (value === \"start\") return \"flex-start\";\n  if (value === \"end\") return \"flex-end\";\n  return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n  if (value === \"start\") return \"flex-start\";\n  if (value === \"end\") return \"flex-end\";\n  if (value === \"between\") return \"space-between\";\n  return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n  if (value === true) return 1;\n  if (value === false) return 0;\n  return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n  if (value === false) return \"0\";\n  return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n  if (value === true) return RADIUS_TOKEN_MAP.md;\n  return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n  if (value === true) return SHADOW_TOKEN_MAP.sm;\n  return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n  styles: Record<string, string | number>,\n  property: string,\n  value: ResponsiveValue<T> | undefined,\n  resolve: (value: T) => string | number | undefined,\n) {\n  const normalized = normalizeResponsiveValue(value);\n  if (!normalized) return;\n\n  for (const breakpoint of BREAKPOINTS) {\n    const breakpointValue = normalized[breakpoint];\n    if (breakpointValue === undefined) continue;\n    const resolved = resolve(breakpointValue);\n    if (resolved === undefined || resolved === \"\") continue;\n    styles[`--ak-${property}-${breakpoint}`] = resolved;\n  }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n  props: T,\n): {\n  blockProps: Partial<BlockLayoutProps>;\n  rest: Omit<T, keyof BlockLayoutProps>;\n} {\n  const blockProps: Partial<BlockLayoutProps> = {};\n  const rest: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n      (blockProps as Record<string, unknown>)[key] = value;\n    } else {\n      rest[key] = value;\n    }\n  }\n\n  return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n  styles: Record<string, string | number>,\n  props: Partial<BlockLayoutProps>,\n) {\n  setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n  setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n  setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n  setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n  setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n  setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n  setResponsiveVar(styles, \"width\", props.width, resolveSizeValue);\n  setResponsiveVar(styles, \"min-width\", props.minWidth, resolveSizeValue);\n  setResponsiveVar(styles, \"max-width\", props.maxWidth, resolveSizeValue);\n  setResponsiveVar(styles, \"height\", props.height, resolveSizeValue);\n  setResponsiveVar(styles, \"min-height\", props.minHeight, resolveSizeValue);\n  setResponsiveVar(styles, \"max-height\", props.maxHeight, resolveSizeValue);\n\n  if (props.rowFrom !== undefined) {\n    styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n  }\n  setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n  setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n  setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n  setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n  setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n  setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n  if (props.center !== undefined) {\n    setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n      value ? \"center\" : undefined,\n    );\n    setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n      value ? \"center\" : undefined,\n    );\n  }\n\n  if (props.sticky) {\n    styles[\"--ak-position-base\"] = \"sticky\";\n  }\n  setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n  setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n    String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n  );\n\n  setResponsiveVar(styles, \"background\", props.background, (value) =>\n    String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n  );\n  setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n  setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n  setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n  setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n  setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n  setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n  layout: Record<string, string | number>,\n  user: unknown,\n): string | undefined {\n  const merged: Record<string, unknown> = { ...layout };\n\n  if (user !== null && user !== undefined && typeof user === \"object\") {\n    Object.assign(merged, user as Record<string, unknown>);\n  }\n\n  const mergedString = serializeCssDeclarations(merged);\n\n  if (typeof user === \"string\" && user.trim()) {\n    return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n  }\n\n  return mergedString || undefined;\n}\n"],"mappings":";;AA2EA,MAAM,cAA2C;CAAC;CAAQ;CAAM;CAAM;CAAM;AAAI;AAEhF,MAAM,kBAA0C;CAC9C,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAEA,MAAM,iBAAyC;CAC7C,MAAM;CACN,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,uBAA+C;CACnD,QAAQ;CACR,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;CACT,UAAU;CACV,aAAa;AACf;AAEA,MAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,mBAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,oBAA4C;CAChD,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,UAAU;CACV,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;AACX;AAEA,MAAM,eAAe;AAErB,MAAM,oBAAoB,IAAI,IAA4B;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,SAAS,kBACP,OAC+C;CAC/C,OAAO,QACL,SACA,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,KAAK,KACpB,YAAY,MAAM,eAAe,cAAc,KAAK,CACtD;AACF;AAEA,SAAS,yBACP,OACkD;CAClD,IAAI,UAAU,KAAA,GAAW,OAAO,KAAA;CAChC,IAAI,kBAAkB,KAAK,GAAG,OAAO;CACrC,OAAO,EAAE,MAAM,MAAM;AACvB;AAEA,SAAS,kBACP,OACA,QACiB;CACjB,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,UAAU,MAAM,KAAK;CAC3B,OAAO,OAAO,YAAY;AAC5B;AAEA,SAAS,kBAAkB,OAAyC;CAClE,OAAO,kBAAkB,OAAO,eAAe;AACjD;AAEA,SAAS,iBAAiB,OAAuB;CAC/C,OAAO,OAAO,kBAAkB,OAAO,cAAc,CAAC;AACxD;AAEA,SAAS,kBAAkB,OAA2B;CACpD,IAAI,UAAU,SAAS,OAAO;CAC9B,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,oBAAoB,OAA6B;CACxD,IAAI,UAAU,SAAS,OAAO;CAC9B,IAAI,UAAU,OAAO,OAAO;CAC5B,IAAI,UAAU,WAAW,OAAO;CAChC,OAAO;AACT;AAEA,SAAS,gBAAgB,OAA0C;CACjE,IAAI,UAAU,MAAM,OAAO;CAC3B,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAoC;CAC9D,IAAI,UAAU,OAAO,OAAO;CAC5B,OAAO;AACT;AAEA,SAAS,mBAAmB,OAAwC;CAClE,IAAI,UAAU,MAAM,OAAO,iBAAiB;CAC5C,OAAO,OAAO,kBAAkB,OAAO,gBAAgB,CAAC;AAC1D;AAEA,SAAS,mBAAmB,OAAwC;CAClE,IAAI,UAAU,MAAM,OAAO,iBAAiB;CAC5C,OAAO,OAAO,kBAAkB,OAAO,gBAAgB,CAAC;AAC1D;AAEA,SAAS,iBACP,QACA,UACA,OACA,SACA;CACA,MAAM,aAAa,yBAAyB,KAAK;CACjD,IAAI,CAAC,YAAY;CAEjB,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,kBAAkB,WAAW;EACnC,IAAI,oBAAoB,KAAA,GAAW;EACnC,MAAM,WAAW,QAAQ,eAAe;EACxC,IAAI,aAAa,KAAA,KAAa,aAAa,IAAI;EAC/C,OAAO,QAAQ,SAAS,GAAG,gBAAgB;CAC7C;AACF;AAEA,SAAgB,sBACd,OAIA;CACA,MAAM,aAAwC,CAAC;CAC/C,MAAM,OAAgC,CAAC;CAEvC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,kBAAkB,IAAI,GAA6B,GACrD,WAAwC,OAAO;MAE/C,KAAK,OAAO;CAIhB,OAAO;EAAE;EAAkB;CAAwC;AACrE;AAEA,SAAgB,uBACd,QACA,OACA;CACA,iBAAiB,QAAQ,KAAK,MAAM,SAAS,iBAAiB;CAC9D,iBAAiB,QAAQ,MAAM,MAAM,UAAU,iBAAiB;CAChE,iBAAiB,QAAQ,MAAM,MAAM,UAAU,iBAAiB;CAChE,iBAAiB,QAAQ,KAAK,MAAM,QAAQ,iBAAiB;CAC7D,iBAAiB,QAAQ,MAAM,MAAM,SAAS,iBAAiB;CAC/D,iBAAiB,QAAQ,MAAM,MAAM,SAAS,iBAAiB;CAE/D,iBAAiB,QAAQ,SAAS,MAAM,OAAO,gBAAgB;CAC/D,iBAAiB,QAAQ,aAAa,MAAM,UAAU,gBAAgB;CACtE,iBAAiB,QAAQ,aAAa,MAAM,UAAU,gBAAgB;CACtE,iBAAiB,QAAQ,UAAU,MAAM,QAAQ,gBAAgB;CACjE,iBAAiB,QAAQ,cAAc,MAAM,WAAW,gBAAgB;CACxE,iBAAiB,QAAQ,cAAc,MAAM,WAAW,gBAAgB;CAExE,IAAI,MAAM,YAAY,KAAA,GACpB,OAAO,uBAAuB,MAAM,aAAa;CAEnD,iBAAiB,QAAQ,kBAAkB,MAAM,YAAY,UAAU,KAAK;CAC5E,iBAAiB,QAAQ,eAAe,MAAM,OAAO,iBAAiB;CACtE,iBAAiB,QAAQ,mBAAmB,MAAM,SAAS,mBAAmB;CAC9E,iBAAiB,QAAQ,OAAO,MAAM,KAAK,iBAAiB;CAC5D,iBAAiB,QAAQ,aAAa,MAAM,MAAM,eAAe;CACjE,iBAAiB,QAAQ,eAAe,MAAM,QAAQ,eAAe;CAErE,IAAI,MAAM,WAAW,KAAA,GAAW;EAC9B,iBAAiB,QAAQ,eAAe,MAAM,SAAS,UACrD,QAAQ,WAAW,KAAA,CACrB;EACA,iBAAiB,QAAQ,mBAAmB,MAAM,SAAS,UACzD,QAAQ,WAAW,KAAA,CACrB;CACF;CAEA,IAAI,MAAM,QACR,OAAO,wBAAwB;CAEjC,iBAAiB,QAAQ,OAAO,MAAM,KAAK,iBAAiB;CAC5D,iBAAiB,QAAQ,WAAW,MAAM,SAAS,UACjD,OAAO,kBAAkB,OAAO,iBAAiB,CAAC,CACpD;CAEA,iBAAiB,QAAQ,cAAc,MAAM,aAAa,UACxD,OAAO,kBAAkB,OAAO,oBAAoB,CAAC,CACvD;CACA,iBAAiB,QAAQ,UAAU,MAAM,QAAQ,kBAAkB;CACnE,iBAAiB,QAAQ,iBAAiB,MAAM,cAAc,kBAAkB;CAChF,iBAAiB,QAAQ,gBAAgB,MAAM,aAAa,kBAAkB;CAC9E,iBAAiB,QAAQ,iBAAiB,MAAM,QAAQ,kBAAkB;CAC1E,iBAAiB,QAAQ,cAAc,MAAM,QAAQ,kBAAkB;CACvE,iBAAiB,QAAQ,WAAW,MAAM,OAAO,UAAW,QAAQ,SAAS,MAAO;AACtF;AAEA,SAAgB,kBACd,QACA,MACoB;CACpB,MAAM,SAAkC,EAAE,GAAG,OAAO;CAEpD,IAAI,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,UACzD,OAAO,OAAO,QAAQ,IAA+B;CAGvD,MAAM,eAAe,yBAAyB,MAAM;CAEpD,IAAI,OAAO,SAAS,YAAY,KAAK,KAAK,GACxC,OAAO,eAAe,GAAG,aAAa,GAAG,KAAK,KAAK,MAAM,KAAK,KAAK;CAGrE,OAAO,gBAAgB,KAAA;AACzB"}

package/dist/components/alert/alert.js

@@ -7,8 +7,8 @@ function resolveAlertRole(variant) {
 	return "status";
 }
 function Alert(props) {
-	const { actions, children, class: className, description, dismissLabel = "Dismiss alert", dismissible = false, icon, onDismiss, ref, title, titleAs: TitleTag = "h3", variant = "default", role, ...rest } = props;
-	const shouldRenderDismiss = dismissible && onDismiss !== void 0;
+	const { actions, children, class: className, description, dismissLabel = "Dismiss alert", icon, onDismiss, ref, title, titleAs: TitleTag = "h3", variant = "default", role, ...rest } = props;
+	const shouldRenderDismiss = onDismiss !== void 0;
 	const resolvedRole = role ?? resolveAlertRole(variant);
 	const hasVariant = variant !== "default";
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n  if (variant === \"danger\" || variant === \"warning\") {\n    return \"alert\";\n  }\n\n  return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n  const {\n    actions,\n    children,\n    class: className,\n    description,\n    dismissLabel = \"Dismiss alert\",\n    dismissible = false,\n    icon,\n    onDismiss,\n    ref,\n    title,\n    titleAs: TitleTag = \"h3\",\n    variant = \"default\",\n    role,\n    ...rest\n  } = props;\n  const shouldRenderDismiss = dismissible && onDismiss !== undefined;\n  const resolvedRole = role ?? resolveAlertRole(variant);\n  const hasVariant = variant !== \"default\";\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      class={classes(\n        \"alert\",\n        hasVariant ? `alert-${variant}` : undefined,\n        shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n        className,\n      )}\n      data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n      data-slot=\"alert\"\n      data-variant={hasVariant ? variant : undefined}\n      role={resolvedRole}\n    >\n      {icon !== undefined ? (\n        <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n          {icon}\n        </div>\n      ) : null}\n\n      <div class=\"alert-content\" data-slot=\"alert-content\">\n        {title !== undefined ? (\n          <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n            {title}\n          </TitleTag>\n        ) : null}\n\n        {description !== undefined ? (\n          <p class=\"alert-description\" data-slot=\"alert-description\">\n            {description}\n          </p>\n        ) : null}\n\n        {children}\n\n        {actions !== undefined ? (\n          <div class=\"alert-actions\" data-slot=\"alert-actions\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {shouldRenderDismiss ? (\n        <div class=\"alert-close\" data-slot=\"alert-close\">\n          <Close label={dismissLabel} onPress={onDismiss} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,cAAc,OACd,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,eAAe,cAAc,KAAA;CACzD,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n  if (variant === \"danger\" || variant === \"warning\") {\n    return \"alert\";\n  }\n\n  return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n  const {\n    actions,\n    children,\n    class: className,\n    description,\n    dismissLabel = \"Dismiss alert\",\n    icon,\n    onDismiss,\n    ref,\n    title,\n    titleAs: TitleTag = \"h3\",\n    variant = \"default\",\n    role,\n    ...rest\n  } = props;\n  const shouldRenderDismiss = onDismiss !== undefined;\n  const resolvedRole = role ?? resolveAlertRole(variant);\n  const hasVariant = variant !== \"default\";\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      class={classes(\n        \"alert\",\n        hasVariant ? `alert-${variant}` : undefined,\n        shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n        className,\n      )}\n      data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n      data-slot=\"alert\"\n      data-variant={hasVariant ? variant : undefined}\n      role={resolvedRole}\n    >\n      {icon !== undefined ? (\n        <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n          {icon}\n        </div>\n      ) : null}\n\n      <div class=\"alert-content\" data-slot=\"alert-content\">\n        {title !== undefined ? (\n          <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n            {title}\n          </TitleTag>\n        ) : null}\n\n        {description !== undefined ? (\n          <p class=\"alert-description\" data-slot=\"alert-description\">\n            {description}\n          </p>\n        ) : null}\n\n        {children}\n\n        {actions !== undefined ? (\n          <div class=\"alert-actions\" data-slot=\"alert-actions\">\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {shouldRenderDismiss ? (\n        <div class=\"alert-close\" data-slot=\"alert-close\">\n          <Close label={dismissLabel} onPress={onDismiss} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}

package/dist/components/alert/alert.types.d.ts

@@ -9,7 +9,6 @@ type AlertProps = DivProps & {
   children?: unknown;
   description?: unknown;
   dismissLabel?: string;
-  dismissible?: boolean;
   icon?: unknown;
   onDismiss?: () => void;
   title?: unknown;

package/dist/components/aside/aside.d.ts

@@ -0,0 +1,7 @@
+import { AsideProps } from "./aside.types.js";
+
+//#region src/components/aside/aside.d.ts
+declare function Aside(props: AsideProps): JSX.Element;
+//#endregion
+export { Aside };
+//# sourceMappingURL=aside.d.ts.map

package/dist/components/aside/aside.js

@@ -0,0 +1,16 @@
+import { Block } from "../block/block.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+//#region src/components/aside/aside.tsx
+function Aside(props) {
+	const { children, ...rest } = props;
+	return /* @__PURE__ */ jsx(Block, {
+		as: "aside",
+		...rest,
+		"data-slot": "aside",
+		children
+	});
+}
+//#endregion
+export { Aside };
+
+//# sourceMappingURL=aside.js.map

package/dist/components/aside/aside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aside.js","names":[],"sources":["../../../src/components/aside/aside.tsx"],"sourcesContent":["import { Block } from \"../block\";\nimport type { AsideProps } from \"./aside.types\";\n\nexport function Aside(props: AsideProps): JSX.Element {\n  const { children, ...rest } = props;\n\n  return (\n    <Block as=\"aside\" {...rest} data-slot=\"aside\">\n      {children}\n    </Block>\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,OACE,oBAAC,OAAD;EAAO,IAAG;EAAQ,GAAI;EAAM,aAAU;EACnC;CACI,CAAA;AAEX"}

package/dist/components/aside/aside.types.d.ts

@@ -0,0 +1,6 @@
+import { BlockElementProps } from "../block/block.types.js";
+//#region src/components/aside/aside.types.d.ts
+type AsideProps = Omit<BlockElementProps<"aside">, "as">;
+//#endregion
+export { AsideProps };
+//# sourceMappingURL=aside.types.d.ts.map

package/dist/components/aside/index.d.ts

@@ -0,0 +1,2 @@
+import { AsideProps } from "./aside.types.js";
+import { Aside } from "./aside.js";

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -1,6 +1,6 @@
 import { mergeProps } from "../_internal/merge-props.js";
 import { styleDeclarationsToClass } from "../_internal/style.js";
-import { mergeLayoutStyles } from "../_internal/layout.js";
+import { mergeLayoutStyles } from "../_internal/block-layout.js";
 import { jsx } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 //#region src/components/aspect-ratio/aspect-ratio.tsx

package/dist/components/aspect-ratio/aspect-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { mergeLayoutStyles } from \"../_internal/layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { AspectRatioAsChildProps, AspectRatioProps } from \"./aspect-ratio.types\";\n\nexport function AspectRatio(props: AspectRatioProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {\n  const { asChild, children, ratio = 1, ref, style, ...rest } = props;\n  const layoutClass = styleDeclarationsToClass(\n    mergeLayoutStyles(\n      {\n        display: \"block\",\n        width: \"100%\",\n        aspectRatio: String(ratio),\n        overflow: \"hidden\",\n      },\n      style,\n    ),\n  );\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"aspect-ratio\",\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,YAAY,OAAmD;CAC7E,MAAM,EAAE,SAAS,UAAU,QAAQ,GAAG,KAAK,OAAO,GAAG,SAAS;CAC9D,MAAM,cAAc,yBAClB,kBACE;EACE,SAAS;EACT,OAAO;EACP,aAAa,OAAO,KAAK;EACzB,UAAU;CACZ,GACA,KACF,CACF;CAEA,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,YAAY,IAAI,CAAC;CAC9C,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C"}
+{"version":3,"file":"aspect-ratio.js","names":[],"sources":["../../../src/components/aspect-ratio/aspect-ratio.tsx"],"sourcesContent":["import { Slot } from \"@askrjs/askr/foundations\";\nimport { mergeProps } from \"../_internal/merge-props\";\nimport { mergeLayoutStyles } from \"../_internal/block-layout\";\nimport { styleDeclarationsToClass } from \"../_internal/style\";\nimport type { AspectRatioAsChildProps, AspectRatioProps } from \"./aspect-ratio.types\";\n\nexport function AspectRatio(props: AspectRatioProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioAsChildProps): JSX.Element;\nexport function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {\n  const { asChild, children, ratio = 1, ref, style, ...rest } = props;\n  const layoutClass = styleDeclarationsToClass(\n    mergeLayoutStyles(\n      {\n        display: \"block\",\n        width: \"100%\",\n        aspectRatio: String(ratio),\n        overflow: \"hidden\",\n      },\n      style,\n    ),\n  );\n\n  const finalProps = mergeProps(rest, {\n    ref,\n    \"data-slot\": \"aspect-ratio\",\n    ...(layoutClass ? { class: layoutClass } : {}),\n  });\n\n  if (asChild) {\n    return <Slot asChild {...finalProps} children={children} />;\n  }\n\n  return <div {...finalProps}>{children}</div>;\n}\n"],"mappings":";;;;;;AAQA,SAAgB,YAAY,OAAmD;CAC7E,MAAM,EAAE,SAAS,UAAU,QAAQ,GAAG,KAAK,OAAO,GAAG,SAAS;CAC9D,MAAM,cAAc,yBAClB,kBACE;EACE,SAAS;EACT,OAAO;EACP,aAAa,OAAO,KAAK;EACzB,UAAU;CACZ,GACA,KACF,CACF;CAEA,MAAM,aAAa,WAAW,MAAM;EAClC;EACA,aAAa;EACb,GAAI,cAAc,EAAE,OAAO,YAAY,IAAI,CAAC;CAC9C,CAAC;CAED,IAAI,SACF,OAAO,oBAAC,MAAD;EAAM,SAAA;EAAQ,GAAI;EAAsB;CAAW,CAAA;CAG5D,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAa;CAAc,CAAA;AAC7C"}

package/dist/components/badge/index.d.ts

@@ -1,3 +1,2 @@
 import { BadgeAsChildProps, BadgeOwnProps, BadgeProps } from "./badge.types.js";
-import { Badge } from "./badge.js";
-import { BADGE_A11Y_CONTRACT, BadgeA11yContract } from "./badge.a11y.js";
+import { Badge } from "./badge.js";

package/dist/components/block/block.d.ts

@@ -1,8 +1,7 @@
-import { BlockAsChildProps, BlockDivProps, BlockSpanProps } from "./block.types.js";
+import { BlockAsChildProps, BlockNativeProps } from "./block.types.js";
 
 //#region src/components/block/block.d.ts
-declare function Block(props: BlockDivProps): JSX.Element;
-declare function Block(props: BlockSpanProps): JSX.Element;
+declare function Block(props: BlockNativeProps): JSX.Element;
 declare function Block(props: BlockAsChildProps): JSX.Element;
 //#endregion
 export { Block };