@kismet-ux/constellation 1.9.0 → 1.11.0

package/dist/ui/Button/button.css

@@ -13,6 +13,18 @@
  * app whose palette encodes meaning (which aisle a thing lands on), that is the
  * difference between using the library and forking it.
  */
+/*
+ * Fills its container and centres its label.
+ *
+ * A block button — the one that commits a form, or the one at the foot of a
+ * card — is otherwise the caller writing `width: 100%` over the top, which is
+ * a rule per app for a shape the library already knows how to draw.
+ */
+.button-module_button--full-width__f1jWC {
+  display: flex;
+  width: 100%;
+}
+
 .button-module_button__ATpxB {
   align-items: center;
   border: none;
@@ -181,7 +193,10 @@
   color: var(--button-color, var(--primary-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--primary__BO20b:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--primary-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--primary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--primary-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--primary__BO20b:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--primary-focus-visible);
@@ -195,7 +210,10 @@
   color: var(--button-color, var(--secondary-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--secondary__EgwQf:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--secondary-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--secondary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--secondary-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--secondary__EgwQf:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--secondary-focus-visible);
@@ -209,7 +227,10 @@
   color: var(--button-color, var(--destructive-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--destructive__PPikG:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--destructive-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--destructive-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--destructive-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--destructive__PPikG:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--destructive-focus-visible);
@@ -223,7 +244,10 @@
   color: var(--button-color, var(--warning-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--warning__8wotP:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--warning-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--warning-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--warning-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--warning__8wotP:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--warning-focus-visible);
@@ -237,7 +261,10 @@
   color: var(--button-color, var(--success-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--success__iPEgl:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--success-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--success-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--success-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--success__iPEgl:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--success-focus-visible);
@@ -251,7 +278,10 @@
   color: var(--button-color, var(--info-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--info__WaPKN:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--info-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--info-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--info-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--info__WaPKN:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--info-focus-visible);
@@ -265,7 +295,10 @@
   color: var(--button-color, var(--slate-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--slate__DRwTq:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--slate-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--slate-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--slate-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--slate__DRwTq:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--slate-focus-visible);
@@ -292,7 +325,10 @@
   color: var(--button-color, var(--primary-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--primary__BO20b:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--primary-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--primary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--primary-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--primary__BO20b:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--primary-focus-visible);
@@ -305,7 +341,10 @@
   color: var(--button-color, var(--secondary-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--secondary__EgwQf:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--secondary-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--secondary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--secondary-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--secondary__EgwQf:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--secondary-focus-visible);
@@ -318,7 +357,10 @@
   color: var(--button-color, var(--destructive-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--destructive__PPikG:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--destructive-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--destructive-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--destructive-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--destructive__PPikG:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--destructive-focus-visible);
@@ -331,7 +373,10 @@
   color: var(--button-color, var(--warning-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--warning__8wotP:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--warning-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--warning-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--warning-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--warning__8wotP:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--warning-focus-visible);
@@ -344,7 +389,10 @@
   color: var(--button-color, var(--success-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--success__iPEgl:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--success-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--success-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--success-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--success__iPEgl:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--success-focus-visible);
@@ -357,7 +405,10 @@
   color: var(--button-color, var(--info-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--info__WaPKN:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--info-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--info-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--info-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--info__WaPKN:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--info-focus-visible);
@@ -370,7 +421,10 @@
   color: var(--button-color, var(--slate-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--slate__DRwTq:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--button-color, var(--slate-hover)) 16%, transparent);
+  /* Mixed on the SOLID, not on `--slate-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--slate-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--slate__DRwTq:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--slate-focus-visible);

package/dist/ui/Button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAmCnD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFAwEX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAmCnD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFA4EX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/ui/Button/button.js

@@ -34,7 +34,7 @@ const normalizePathname = (href, origin) => {
         return null;
     }
 };
-const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', size = 'md', rounded = 'extra', iconOnly, className, asChild = false, onClick, color, onColor, style, ...props }, ref) => {
+const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', size = 'md', rounded = 'extra', iconOnly, fullWidth, className, asChild = false, onClick, color, onColor, style, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     const childHref = asChild ? getChildHref(props.children) : null;
     const isBrowser = typeof window !== 'undefined';
@@ -57,7 +57,7 @@ const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', siz
     // a wrapper element whose own content needs its own a11y decisions.
     const { children: rawChildren, ...restProps } = props;
     const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);
-    return (jsx(Comp, { "data-slot": 'button', "data-active-link": isActiveLink ? 'true' : undefined, "aria-current": isActiveLink && asChild ? 'page' : undefined, className: cn(buttonVariants({ variant, theme, iconOnly, size, rounded }), className), style: color || onColor
+    return (jsx(Comp, { "data-slot": 'button', "data-active-link": isActiveLink ? 'true' : undefined, "aria-current": isActiveLink && asChild ? 'page' : undefined, className: cn(buttonVariants({ variant, theme, iconOnly, fullWidth, size, rounded }), className), style: color || onColor
             ? {
                 ...style,
                 ...(color ? { '--button-color': color } : null),

package/dist/ui/Button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/ui/Button/button.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { createRipple } from '../../internal/create-ripple';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { buttonVariants } from './button-variants';\nimport s from './button.module.scss';\n\nconst getChildHref = (children: React.ReactNode): string | null => {\n  const childArray = React.Children.toArray(children ?? []);\n  if (childArray.length !== 1) {\n    return null;\n  }\n\n  const child = childArray[0];\n  if (!React.isValidElement<{ href?: string; to?: string }>(child)) {\n    return null;\n  }\n\n  if (typeof child.props?.href === 'string') {\n    return child.props.href;\n  }\n\n  if (typeof child.props?.to === 'string') {\n    return child.props.to;\n  }\n\n  return null;\n};\n\nconst normalizePathname = (href: string, origin: string): string | null => {\n  try {\n    const url = new URL(href, origin);\n    const normalizedPath = url.pathname.replace(/\\/+$/, '');\n    return normalizedPath || '/';\n  } catch {\n    return null;\n  }\n};\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** A colour outside the theme scale; overrides the theme's colour roles. */\n  color?: string;\n  /** Ink for `contained` when `color` is set and the default contrast is wrong. */\n  onColor?: string;\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'contained',\n      theme = 'primary',\n      size = 'md',\n      rounded = 'extra',\n      iconOnly,\n      className,\n      asChild = false,\n      onClick,\n      color,\n      onColor,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const childHref = asChild ? getChildHref(props.children) : null;\n    const isBrowser = typeof window !== 'undefined';\n\n    let currentPath: string | null = null;\n    let targetPath: string | null = null;\n\n    if (isBrowser) {\n      const { pathname, origin } = window.location;\n      currentPath = normalizePathname(pathname, origin);\n\n      if (childHref) {\n        targetPath = normalizePathname(childHref, origin);\n      }\n    }\n\n    const isActiveLink = Boolean(\n      asChild && currentPath && targetPath && currentPath === targetPath,\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n      createRipple(event, s['ripple']);\n      onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n    };\n\n    // Treat element children as decorative by default (icons get\n    // aria-hidden automatically). Skip for `asChild` because Slot's child is\n    // a wrapper element whose own content needs its own a11y decisions.\n    const { children: rawChildren, ...restProps } = props;\n    const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);\n\n    return (\n      <Comp\n        data-slot={'button'}\n        data-active-link={isActiveLink ? 'true' : undefined}\n        aria-current={isActiveLink && asChild ? 'page' : undefined}\n        className={cn(buttonVariants({ variant, theme, iconOnly, size, rounded }), className)}\n        style={\n          color || onColor\n            ? ({\n                ...style,\n                ...(color ? { '--button-color': color } : null),\n                ...(onColor ? { '--button-on-color': onColor } : null),\n              } as React.CSSProperties)\n            : style\n        }\n        ref={ref}\n        onClick={handleClick}\n        {...restProps}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/ui/Button/button.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { createRipple } from '../../internal/create-ripple';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { buttonVariants } from './button-variants';\nimport s from './button.module.scss';\n\nconst getChildHref = (children: React.ReactNode): string | null => {\n  const childArray = React.Children.toArray(children ?? []);\n  if (childArray.length !== 1) {\n    return null;\n  }\n\n  const child = childArray[0];\n  if (!React.isValidElement<{ href?: string; to?: string }>(child)) {\n    return null;\n  }\n\n  if (typeof child.props?.href === 'string') {\n    return child.props.href;\n  }\n\n  if (typeof child.props?.to === 'string') {\n    return child.props.to;\n  }\n\n  return null;\n};\n\nconst normalizePathname = (href: string, origin: string): string | null => {\n  try {\n    const url = new URL(href, origin);\n    const normalizedPath = url.pathname.replace(/\\/+$/, '');\n    return normalizedPath || '/';\n  } catch {\n    return null;\n  }\n};\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** A colour outside the theme scale; overrides the theme's colour roles. */\n  color?: string;\n  /** Ink for `contained` when `color` is set and the default contrast is wrong. */\n  onColor?: string;\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'contained',\n      theme = 'primary',\n      size = 'md',\n      rounded = 'extra',\n      iconOnly,\n      fullWidth,\n      className,\n      asChild = false,\n      onClick,\n      color,\n      onColor,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const childHref = asChild ? getChildHref(props.children) : null;\n    const isBrowser = typeof window !== 'undefined';\n\n    let currentPath: string | null = null;\n    let targetPath: string | null = null;\n\n    if (isBrowser) {\n      const { pathname, origin } = window.location;\n      currentPath = normalizePathname(pathname, origin);\n\n      if (childHref) {\n        targetPath = normalizePathname(childHref, origin);\n      }\n    }\n\n    const isActiveLink = Boolean(\n      asChild && currentPath && targetPath && currentPath === targetPath,\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n      createRipple(event, s['ripple']);\n      onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n    };\n\n    // Treat element children as decorative by default (icons get\n    // aria-hidden automatically). Skip for `asChild` because Slot's child is\n    // a wrapper element whose own content needs its own a11y decisions.\n    const { children: rawChildren, ...restProps } = props;\n    const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);\n\n    return (\n      <Comp\n        data-slot={'button'}\n        data-active-link={isActiveLink ? 'true' : undefined}\n        aria-current={isActiveLink && asChild ? 'page' : undefined}\n        className={cn(\n          buttonVariants({ variant, theme, iconOnly, fullWidth, size, rounded }),\n          className,\n        )}\n        style={\n          color || onColor\n            ? ({\n                ...style,\n                ...(color ? { '--button-color': color } : null),\n                ...(onColor ? { '--button-on-color': onColor } : null),\n              } as React.CSSProperties)\n            : style\n        }\n        ref={ref}\n        onClick={handleClick}\n        {...restProps}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"names":["_jsx"],"mappings":"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"}

package/dist/ui/Button/button.module.scss.js

@@ -1,6 +1,6 @@
 import './button.css';
 
-var s = {"button":"button-module_button__ATpxB","ripple":"button-module_ripple__Ny6oE","button--rounded":"button-module_button--rounded__ah_Ei","button--extra-rounded":"button-module_button--extra-rounded__B9xBI","button--contained":"button-module_button--contained__YQQ33","button--primary":"button-module_button--primary__BO20b","button--secondary":"button-module_button--secondary__EgwQf","button--destructive":"button-module_button--destructive__PPikG","button--warning":"button-module_button--warning__8wotP","button--success":"button-module_button--success__iPEgl","button--info":"button-module_button--info__WaPKN","button--slate":"button-module_button--slate__DRwTq","button--inherit":"button-module_button--inherit__KgtNC","button--outlined":"button-module_button--outlined__AxHna","button--ghost":"button-module_button--ghost__m7RzP","button--xs":"button-module_button--xs__eWH8k","button--icon-only":"button-module_button--icon-only__U2BKr","button--sm":"button-module_button--sm__4yeUt","button--md":"button-module_button--md__HpLm1","button--lg":"button-module_button--lg__67gAK"};
+var s = {"button--full-width":"button-module_button--full-width__f1jWC","button":"button-module_button__ATpxB","ripple":"button-module_ripple__Ny6oE","button--rounded":"button-module_button--rounded__ah_Ei","button--extra-rounded":"button-module_button--extra-rounded__B9xBI","button--contained":"button-module_button--contained__YQQ33","button--primary":"button-module_button--primary__BO20b","button--secondary":"button-module_button--secondary__EgwQf","button--destructive":"button-module_button--destructive__PPikG","button--warning":"button-module_button--warning__8wotP","button--success":"button-module_button--success__iPEgl","button--info":"button-module_button--info__WaPKN","button--slate":"button-module_button--slate__DRwTq","button--inherit":"button-module_button--inherit__KgtNC","button--outlined":"button-module_button--outlined__AxHna","button--ghost":"button-module_button--ghost__m7RzP","button--xs":"button-module_button--xs__eWH8k","button--icon-only":"button-module_button--icon-only__U2BKr","button--sm":"button-module_button--sm__4yeUt","button--md":"button-module_button--md__HpLm1","button--lg":"button-module_button--lg__67gAK"};
 
 export { s as default };
 //# sourceMappingURL=button.module.scss.js.map

package/dist/ui/Chip/chip.css

@@ -39,8 +39,8 @@
   border-style: dashed;
 }
 .chip-module_chip--2xs__GJtZF {
-  font-size: 0.56rem;
-  padding: 0 0.25rem;
+  font-size: 0.6rem;
+  padding: 0.05rem 0.25rem;
 }
 .chip-module_chip--2xs__GJtZF > svg {
   height: 0.6rem;
@@ -104,7 +104,7 @@
   --themed-selected: var(--primary-selected);
   --chip-ink: var(--chip-color, var(--primary-outlined-border));
   --chip-fill: var(--chip-color, var(--primary-main));
-  --chip-wash: var(--chip-color, var(--primary-hover));
+  --chip-wash: var(--chip-color, var(--primary-main));
   --chip-on-fill: var(--primary-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--secondary__eyfdz {
@@ -120,7 +120,7 @@
   --themed-selected: var(--secondary-selected);
   --chip-ink: var(--chip-color, var(--secondary-outlined-border));
   --chip-fill: var(--chip-color, var(--secondary-main));
-  --chip-wash: var(--chip-color, var(--secondary-hover));
+  --chip-wash: var(--chip-color, var(--secondary-main));
   --chip-on-fill: var(--secondary-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--destructive__80JrW {
@@ -136,7 +136,7 @@
   --themed-selected: var(--destructive-selected);
   --chip-ink: var(--chip-color, var(--destructive-outlined-border));
   --chip-fill: var(--chip-color, var(--destructive-main));
-  --chip-wash: var(--chip-color, var(--destructive-hover));
+  --chip-wash: var(--chip-color, var(--destructive-main));
   --chip-on-fill: var(--destructive-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--warning__3oxvl {
@@ -152,7 +152,7 @@
   --themed-selected: var(--warning-selected);
   --chip-ink: var(--chip-color, var(--warning-outlined-border));
   --chip-fill: var(--chip-color, var(--warning-main));
-  --chip-wash: var(--chip-color, var(--warning-hover));
+  --chip-wash: var(--chip-color, var(--warning-main));
   --chip-on-fill: var(--warning-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--success__VF1tZ {
@@ -168,7 +168,7 @@
   --themed-selected: var(--success-selected);
   --chip-ink: var(--chip-color, var(--success-outlined-border));
   --chip-fill: var(--chip-color, var(--success-main));
-  --chip-wash: var(--chip-color, var(--success-hover));
+  --chip-wash: var(--chip-color, var(--success-main));
   --chip-on-fill: var(--success-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--info__Jgnsc {
@@ -184,7 +184,7 @@
   --themed-selected: var(--info-selected);
   --chip-ink: var(--chip-color, var(--info-outlined-border));
   --chip-fill: var(--chip-color, var(--info-main));
-  --chip-wash: var(--chip-color, var(--info-hover));
+  --chip-wash: var(--chip-color, var(--info-main));
   --chip-on-fill: var(--info-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--slate__vmQ7R {
@@ -200,7 +200,7 @@
   --themed-selected: var(--slate-selected);
   --chip-ink: var(--chip-color, var(--slate-outlined-border));
   --chip-fill: var(--chip-color, var(--slate-main));
-  --chip-wash: var(--chip-color, var(--slate-hover));
+  --chip-wash: var(--chip-color, var(--slate-main));
   --chip-on-fill: var(--slate-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--inherit__HjU_P {
@@ -209,21 +209,42 @@
   --chip-wash: var(--chip-color, var(--themed-hover, var(--action-hover)));
   --chip-on-fill: var(--themed-contrast, var(--background-default));
 }
+.chip-module_chip__u4PJ9 {
+  /*
+   * Every fill answers a hover.
+   *
+   * `outline` and `solid` had none at all, which is most visible where a chip
+   * IS the control — a filter pill, a size to pick — and the only feedback was
+   * the cursor. `soft` had one, but on a `--chip-wash` that fell back to an
+   * already-alpha `-hover` token, so 20% of 10% was 2% and the hover moved it
+   * to 4%. The wash is a solid now and the percentages mean what they say.
+   */
+}
 .chip-module_chip--soft__zYBtU {
-  background-color: color-mix(in srgb, var(--chip-wash) 20%, transparent);
+  background-color: color-mix(in srgb, var(--chip-wash) 18%, transparent);
   border-color: var(--chip-ink);
   color: var(--chip-ink);
 }
 .chip-module_chip--soft__zYBtU:hover {
-  background-color: color-mix(in srgb, var(--chip-wash) 40%, transparent);
+  background-color: color-mix(in srgb, var(--chip-wash) 34%, transparent);
 }
 .chip-module_chip--outline__TO-HF {
   background-color: transparent;
   border-color: color-mix(in srgb, var(--chip-ink) 55%, transparent);
   color: var(--chip-ink);
 }
+.chip-module_chip--outline__TO-HF:hover {
+  background-color: color-mix(in srgb, var(--chip-wash) 16%, transparent);
+  border-color: var(--chip-ink);
+}
 .chip-module_chip--solid__F89cD {
   background-color: var(--chip-fill);
   border-color: var(--chip-fill);
   color: var(--chip-on-fill);
+  /* Lightened toward the page's own ink-on-accent, the way a contained
+     Button lightens its fill — a solid cannot take a tint on top. */
+}
+.chip-module_chip--solid__F89cD:hover {
+  background-color: color-mix(in srgb, var(--chip-fill) 86%, var(--chip-on-fill));
+  border-color: color-mix(in srgb, var(--chip-fill) 86%, var(--chip-on-fill));
 }

package/dist/ui/Chip/chip.d.ts

@@ -8,6 +8,22 @@ export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, Varian
      * so one value is enough for every `variant`.
      */
     color?: string;
+    /**
+     * Render the caller's own element instead of a `<span>`, keeping the chip's
+     * styling.
+     *
+     * A chip is a status marker by default and a span is right for that. But a
+     * row of chips is often a CHOICE — pick a variant, filter a list — and that
+     * needs real button semantics: focusable, keyboard-operable, `aria-pressed`.
+     * Styling a `<span>` to look tappable does not give any of that.
+     *
+     * ```tsx
+     * <Chip asChild variant={'outline'}>
+     *   <button type={'button'} aria-pressed={on} onClick={pick}>Diced</button>
+     * </Chip>
+     * ```
+     */
+    asChild?: boolean;
 }
 /**
  * A small status marker.

package/dist/ui/Chip/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,mFAkCT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/ui/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,mFAqCT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/ui/Chip/chip.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import cn from 'clsx';
 import * as React from 'react';
+import { Slot } from '../../internal/slot.js';
 import { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children.js';
 import { chipVariants } from './chip-variants.js';
 
@@ -12,8 +13,9 @@ import { chipVariants } from './chip-variants.js';
  * `dashed` marks the value as provisional — a guess rather than a reading —
  * which is a distinction worth drawing without spending a second colour on it.
  */
-const Chip = React.forwardRef(({ className, size, theme, variant, shape, dashed, mono, uppercase, wrap, color, style, children, ...props }, ref) => {
-    return (jsx("span", { "data-slot": 'chip', ref: ref, className: cn(chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }), className), style: color ? { ...style, '--chip-color': color } : style, ...props, children: withAriaHiddenChildren(children) }));
+const Chip = React.forwardRef(({ className, size, theme, variant, shape, dashed, mono, uppercase, wrap, color, asChild, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'span';
+    return (jsx(Comp, { "data-slot": 'chip', ref: ref, className: cn(chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }), className), style: color ? { ...style, '--chip-color': color } : style, ...props, children: withAriaHiddenChildren(children) }));
 });
 Chip.displayName = 'Chip';
 

package/dist/ui/Chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../src/ui/Chip/chip.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { chipVariants } from './chip-variants';\n\nexport interface ChipProps\n  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\n  /**\n   * Any colour outside the theme scale — a category hue, a dietary marker.\n   * Overrides the whole set of colour roles the theme would otherwise supply,\n   * so one value is enough for every `variant`.\n   */\n  color?: string;\n}\n\n/**\n * A small status marker.\n *\n * `variant` chooses how much weight it carries: `soft` (a tinted fill, the\n * default) reads as ambient, `outline` recedes further, and `solid` is a claim.\n * `dashed` marks the value as provisional — a guess rather than a reading —\n * which is a distinction worth drawing without spending a second colour on it.\n */\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      className,\n      size,\n      theme,\n      variant,\n      shape,\n      dashed,\n      mono,\n      uppercase,\n      wrap,\n      color,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <span\n        data-slot={'chip'}\n        ref={ref}\n        className={cn(\n          chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }),\n          className,\n        )}\n        style={color ? ({ ...style, '--chip-color': color } as React.CSSProperties) : style}\n        {...props}\n      >\n        {withAriaHiddenChildren(children)}\n      </span>\n    );\n  },\n);\nChip.displayName = 'Chip';\n\nexport { Chip };\n"],"names":["_jsx"],"mappings":";;;;;;AAgBA;;;;;;;AAOG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EACa,MAAM,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAC5E,SAAS,CACV,EACD,KAAK,EAAE,KAAK,GAAI,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,KAAK,EAA0B,GAAG,KAAK,EAAA,GAC/E,KAAK,EAAA,QAAA,EAER,sBAAsB,CAAC,QAAQ,CAAC,EAAA,CAC5B;AAEX,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}
+{"version":3,"file":"chip.js","sources":["../../../src/ui/Chip/chip.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { chipVariants } from './chip-variants';\n\nexport interface ChipProps\n  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {\n  /**\n   * Any colour outside the theme scale — a category hue, a dietary marker.\n   * Overrides the whole set of colour roles the theme would otherwise supply,\n   * so one value is enough for every `variant`.\n   */\n  color?: string;\n  /**\n   * Render the caller's own element instead of a `<span>`, keeping the chip's\n   * styling.\n   *\n   * A chip is a status marker by default and a span is right for that. But a\n   * row of chips is often a CHOICE — pick a variant, filter a list — and that\n   * needs real button semantics: focusable, keyboard-operable, `aria-pressed`.\n   * Styling a `<span>` to look tappable does not give any of that.\n   *\n   * ```tsx\n   * <Chip asChild variant={'outline'}>\n   *   <button type={'button'} aria-pressed={on} onClick={pick}>Diced</button>\n   * </Chip>\n   * ```\n   */\n  asChild?: boolean;\n}\n\n/**\n * A small status marker.\n *\n * `variant` chooses how much weight it carries: `soft` (a tinted fill, the\n * default) reads as ambient, `outline` recedes further, and `solid` is a claim.\n * `dashed` marks the value as provisional — a guess rather than a reading —\n * which is a distinction worth drawing without spending a second colour on it.\n */\nconst Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  (\n    {\n      className,\n      size,\n      theme,\n      variant,\n      shape,\n      dashed,\n      mono,\n      uppercase,\n      wrap,\n      color,\n      asChild,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'span';\n\n    return (\n      <Comp\n        data-slot={'chip'}\n        ref={ref}\n        className={cn(\n          chipVariants({ size, theme, variant, shape, dashed, mono, uppercase, wrap }),\n          className,\n        )}\n        style={color ? ({ ...style, '--chip-color': color } as React.CSSProperties) : style}\n        {...props}\n      >\n        {withAriaHiddenChildren(children)}\n      </Comp>\n    );\n  },\n);\nChip.displayName = 'Chip';\n\nexport { Chip };\n"],"names":["_jsx"],"mappings":";;;;;;;AAiCA;;;;;;;AAOG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CACE,EACE,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM;AAEpC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,WAAA,EACQ,MAAM,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAC5E,SAAS,CACV,EACD,KAAK,EAAE,KAAK,GAAI,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,KAAK,EAA0B,GAAG,KAAK,EAAA,GAC/E,KAAK,EAAA,QAAA,EAER,sBAAsB,CAAC,QAAQ,CAAC,EAAA,CAC5B;AAEX,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;;"}

package/dist/ui/CodeBlock/code-block.css

@@ -209,9 +209,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .code-block-module_code-block-content--collapsible__EZKCv,
-  .code-block-module_code-block-collapse-fade__Y0TgX,
-  .code-block-module_code-block-toggle-icon__yL-sy {
+  :root:not([data-motion=full]) .code-block-module_code-block-content--collapsible__EZKCv,
+  :root:not([data-motion=full]) .code-block-module_code-block-collapse-fade__Y0TgX,
+  :root:not([data-motion=full]) .code-block-module_code-block-toggle-icon__yL-sy {
     transition: none;
   }
+}
+:root[data-motion=reduced] .code-block-module_code-block-content--collapsible__EZKCv,
+:root[data-motion=reduced] .code-block-module_code-block-collapse-fade__Y0TgX,
+:root[data-motion=reduced] .code-block-module_code-block-toggle-icon__yL-sy {
+  transition: none;
 }

package/dist/ui/Dialog/dialog.css

@@ -1,9 +1,13 @@
+@charset "UTF-8";
 .dialog-module_dialog-overlay__m4sZN {
   background-color: var(--background-modal);
   inset: 0;
   position: fixed;
   z-index: var(--z-modal);
 }
+.dialog-module_dialog-overlay__m4sZN[data-pass-through] {
+  pointer-events: none;
+}
 .dialog-module_dialog-overlay__m4sZN[data-state=open] {
   animation: dialog-module_fadeIn__8JmIQ 200ms;
 }
@@ -35,6 +39,9 @@
 .dialog-module_dialog-content__FgQr2.dialog-module_dialog-width-min__dbFaL {
   width: min-content;
 }
+.dialog-module_dialog-content__FgQr2.dialog-module_dialog-measure__ajXF_ {
+  width: var(--dialog-measure);
+}
 .dialog-module_dialog-content__FgQr2[data-state=open] {
   animation: dialog-module_fadeIn__8JmIQ 200ms, dialog-module_zoomIn__ezGtu 200ms;
 }
@@ -77,6 +84,69 @@
   }
 }
 
+/*
+ * A morphing dialog animates its own transform from the element it came from,
+ * so the stock zoom must not also be running — two animations on one
+ * transform is a judder, not a crossfade.
+ */
+/*
+ * A morphing dialog travels between two explicit geometries; see
+ * `useMorphFrom`. Everything here is keyed off `data-morph-state`, so the
+ * exit is the entrance with the value flipped rather than a second animation.
+ */
+.dialog-module_dialog-content__FgQr2[data-morph] {
+  animation: none;
+  /*
+   * …and the stock EXIT must not hide the panel.
+   *
+   * `[data-state='closed']` pairs its keyframes with a bare `opacity: 0` to
+   * hold the faded-out state after they finish. Cancelling the animation above
+   * leaves that declaration standing on its own, so a morphing panel went
+   * transparent on the first frame of its exit and then travelled home
+   * invisibly. Which looks exactly like having no exit animation at all.
+   */
+  opacity: 1;
+  /*
+   * Both of these belong to a panel whose box is being DRIVEN, and neither to
+   * one at rest — so they hang off the flag `pin()`/`release()` maintain
+   * rather than off `[data-morph]`.
+   *
+   * `overflow: hidden` is right while the box is a measured rectangle
+   * travelling between two sizes: content must not spill out of a panel that
+   * is still smaller than it. It is wrong the moment the panel arrives, where
+   * it overrode the base rule's `overflow-y: auto` and turned a dialog too
+   * tall for the screen into one whose lower half was simply cut off.
+   *
+   * The transition is scoped for the same reason: once the geometry is back
+   * with the stylesheet, `width` is `max-content` and `height` is `auto`, and
+   * animating a panel between two content-derived sizes every time a
+   * disclosure opens is a wobble, not a transition.
+   */
+}
+.dialog-module_dialog-content__FgQr2[data-morph][data-morph-pinned] {
+  overflow: hidden;
+  transition: left 300ms var(--easing-default), top 300ms var(--easing-default), width 300ms var(--easing-default), height 300ms var(--easing-default);
+}
+.dialog-module_dialog-content__FgQr2[data-morph] {
+  /*
+   * What the tile already shows STAYS, and everything else fills in.
+   *
+   * A child marked `data-morph-keep` is the part the panel and the tile have
+   * in common — the name, its marks, the size. It is present from the first
+   * frame, so the panel opens as a bigger version of the tile rather than as
+   * an empty box that fills up. The rest are the fields the tile has no room
+   * for: they arrive as the box grows large enough to hold them, and they
+   * leave before it has finished collapsing.
+   */
+}
+.dialog-module_dialog-content__FgQr2[data-morph] > *:not([data-morph-keep]) {
+  transition: opacity 160ms ease 90ms;
+}
+.dialog-module_dialog-content__FgQr2[data-morph][data-morph-state=from] > *:not([data-morph-keep]) {
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
 @keyframes dialog-module_fadeIn__8JmIQ {
   from {
     opacity: 0;

package/dist/ui/Dialog/dialog.d.ts

@@ -16,11 +16,54 @@ export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
     asChild?: boolean;
 }
 declare function DialogClose({ asChild, onClick, children, ...props }: DialogCloseProps): React.JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DialogOverlay({ className, passThrough, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    passThrough?: boolean;
+}): React.JSX.Element;
 export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> & {
     width?: 'max' | 'min';
+    /**
+     * Give the panel a real width instead of letting its content decide.
+     *
+     * `width` is `max-content`/`min-content`, which is fine for a confirm but
+     * wrong for anything with a form in it: the panel ends up as narrow as the
+     * longest line allows and every row inside is squashed. Takes the same
+     * vocabulary as `Container` — `text`, `content`, `wide`, or a CSS length —
+     * and stays capped by the viewport either way.
+     */
+    measure?: 'text' | 'content' | 'wide' | (string & {});
+    /**
+     * The element the dialog came from, so it grows out of it and shrinks back
+     * into it rather than fading in over the top of the page.
+     *
+     * Pass the tile, row or card that was clicked. Where a modal has an obvious
+     * origin on screen, morphing from it says "this is that thing, larger" — a
+     * dialog that fades in centre-screen makes the reader find their place
+     * again when it closes.
+     *
+     * A `DOMRect` is accepted too, for the case where the origin has since been
+     * unmounted or moved.
+     */
+    origin?: React.RefObject<HTMLElement | null> | DOMRect | null;
+    /**
+     * Whether the scrim takes the pointer.
+     *
+     * `blocking` (the default) is a modal in the usual sense: the page behind is
+     * dimmed and inert, and a click on the scrim dismisses.
+     *
+     * `pass-through` dims the page but leaves it live, for a panel that is a
+     * DETAIL VIEW of something still on screen — a tile in a grid, a row in a
+     * table. Clicking the next tile should show the next thing, not spend one
+     * click closing and a second one opening. The dialog still dismisses on a
+     * click that lands outside it, so a click on the empty background behaves as
+     * it always did; a handler that calls `stopPropagation()` keeps it open,
+     * which is how the tile says "I am taking this click".
+     *
+     * Scroll is not locked in this mode, for the same reason: the thing you want
+     * to look at next may be further down the page.
+     */
+    overlay?: 'blocking' | 'pass-through';
 };
-declare function DialogContent({ className, children, width, ...props }: DialogContentProps): React.ReactPortal | null;
+declare function DialogContent({ className, children, width, origin, measure, overlay, style, ...props }: DialogContentProps): React.ReactPortal | null;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /**

package/dist/ui/Dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/Dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAI1F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,iBAAS,MAAM,CAAC,EACd,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,QAAQ,GACT,EAAE,WAAW,qBAsBb;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAclF;AAID,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAc9E;AAID,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,qBAanF;AAID,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,4BAsE1F;AAID,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAUzE;AAED;;;;;;GAMG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,OAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,qBAuBA;AAED;;;;GAIG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAO,EACP,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,qBAuBA;AAID,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEjE;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/Dialog/dialog.tsx"],"names":[],"mappings":"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"}