@womp/kookie-ui 0.31.0 → 0.33.0

package/dist/esm/props/index.js

@@ -1,2 +1,2 @@
-import{a as no}from"../chunk-677CX2QF.js";import{a as lo}from"../chunk-JQVW4WNN.js";import{a as ko}from"../chunk-YLDV2HKZ.js";import{a as io,b as jo}from"../chunk-WRWNN2NW.js";import{a as to}from"../chunk-LUNWI377.js";import{a as xo,b as ao,c as bo}from"../chunk-EXF5SF27.js";import{a as co}from"../chunk-YHQTFDGN.js";import{a as go}from"../chunk-FH6RT6XH.js";import{a as ho}from"../chunk-H3IAGAEL.js";import{a as U}from"../chunk-A252TSYI.js";import{a as V,b as W,c as X}from"../chunk-HCBR74BW.js";import{a as Y}from"../chunk-NR5FQCMU.js";import{a as Z}from"../chunk-3W34KH33.js";import{a as _}from"../chunk-HIEGLLY7.js";import{a as $}from"../chunk-5XA2N2WR.js";import{a as ro,b as eo,c as fo}from"../chunk-XDVTHL3S.js";import{a as oo}from"../chunk-P7VSZYG3.js";import{a as mo,b as po}from"../chunk-TZTUPQYK.js";import{a as O}from"../chunk-RAVZ7F5L.js";import{a as P}from"../chunk-EFXHBH3A.js";import{a as Q}from"../chunk-VW46DG7H.js";import{a as R}from"../chunk-SKOYHBIE.js";import{a as S}from"../chunk-KVOWI6SN.js";import"../chunk-STPMPY3X.js";import{a as T}from"../chunk-UONSKZQT.js";import"../chunk-OA7C34MJ.js";import"../chunk-WOR3JCLX.js";import{a as J}from"../chunk-UMYPLUG3.js";import{a as K}from"../chunk-DFLWZOQO.js";import{a as I}from"../chunk-FJLYSZV3.js";import{a as N}from"../chunk-HSWMHW37.js";import{a as M}from"../chunk-WTCZAUFY.js";import"../chunk-VCV7RACK.js";import{a as L}from"../chunk-KEWNXANF.js";import{a as C}from"../chunk-CT543Q2V.js";import{a as D}from"../chunk-BIITGC3Z.js";import"../chunk-6DWDNKLS.js";import{a as E}from"../chunk-OSSNMF5U.js";import{a as F}from"../chunk-4E5XBM5Q.js";import"../chunk-UICSVJ3B.js";import{a as G}from"../chunk-UUXZ4W6H.js";import{a as H}from"../chunk-PEMFIU3B.js";import{a as w,b as y}from"../chunk-VS2ZWRGO.js";import{a as z}from"../chunk-SBRPXQWH.js";import{a as A}from"../chunk-SJXV4BWZ.js";import{a as B}from"../chunk-N6KH2EOU.js";import{a}from"../chunk-OEPVYHSS.js";import{a as b}from"../chunk-AKXBXLCP.js";import{a as c,b as d,c as g,d as h,e as i,f as j}from"../chunk-AJWCSQIE.js";import{a as k}from"../chunk-BF4WRYUX.js";import{a as l}from"../chunk-ETQNRMHU.js";import{a as u}from"../chunk-DFGY2NZB.js";import{a as s}from"../chunk-FNAE6HUI.js";import{a as q}from"../chunk-NUVUXNHF.js";import{a as n}from"../chunk-EKTVL6SS.js";import{a as v}from"../chunk-NNE3KNH4.js";import{a as t,b as x}from"../chunk-KRJTW535.js";import{a as r,b as e,c as f,d as m,e as p}from"../chunk-CUNKWFKA.js";import{a as o}from"../chunk-NZJGC6ZW.js";export{m as accentColorPropDef,r as accentColors,u as alertDialogContentPropDefs,o as asChildPropDef,v as avatarPropDefs,C as blockquotePropDefs,D as boxPropDefs,jo as breakpointSet,io as breakpoints,a as buttonPropDefs,E as cardPropDefs,F as checkboxGroupRootPropDefs,b as checkboxPropDefs,G as chipPropDefs,H as codePropDefs,f as colorPropDef,i as contextMenuCheckboxItemPropDefs,g as contextMenuContentPropDefs,h as contextMenuItemPropDefs,j as contextMenuRadioItemPropDefs,g as contextMenuSubContentPropDefs,s as dialogContentPropDefs,i as dropdownMenuCheckboxItemPropDefs,d as dropdownMenuContentPropDefs,h as dropdownMenuItemPropDefs,j as dropdownMenuRadioItemPropDefs,g as dropdownMenuSubContentPropDefs,w as emphases,y as emphasisPropDef,J as flexPropDefs,I as gapPropDefs,p as grayAccentColorPropDef,e as grayColors,K as gridPropDefs,N as headingPropDefs,q as heightPropDefs,O as kbdPropDefs,lo as layoutPropDefs,L as leadingTrimPropDef,P as linkPropDefs,ko as marginPropDefs,oo as paddingPropDefs,Q as popoverContentPropDefs,R as progressPropDefs,t as radii,S as radioGroupRootPropDefs,k as radioPropDefs,x as radiusPropDef,T as scrollAreaPropDefs,U as segmentedControlRootPropDefs,X as selectContentPropDefs,V as selectRootPropDefs,W as selectTriggerPropDefs,Y as separatorPropDefs,no as shadowPropDefs,Z as sliderPropDefs,_ as spinnerPropDefs,c as submenuBehaviors,$ as switchPropDefs,fo as tableCellPropDefs,ro as tableRootPropDefs,eo as tableRowPropDefs,po as tabsContentPropDefs,l as tabsListPropDefs,mo as tabsRootPropDefs,M as textAlignPropDef,to as textAreaPropDefs,ao as textFieldGroupPropDefs,xo as textFieldRootPropDefs,bo as textFieldSlotPropDefs,co as textPropDefs,z as textWrapPropDef,go as themePropDefs,ho as tooltipPropDefs,A as truncatePropDef,B as weightPropDef,n as widthPropDefs};
+import{a as no}from"../chunk-677CX2QF.js";import{a as lo}from"../chunk-JQVW4WNN.js";import{a as ko}from"../chunk-YLDV2HKZ.js";import{a as io,b as jo}from"../chunk-WRWNN2NW.js";import{a as to}from"../chunk-LUNWI377.js";import{a as xo,b as ao,c as bo}from"../chunk-EXF5SF27.js";import{a as co}from"../chunk-YHQTFDGN.js";import{a as go}from"../chunk-FH6RT6XH.js";import{a as ho}from"../chunk-H3IAGAEL.js";import{a as U}from"../chunk-A252TSYI.js";import{a as V,b as W,c as X}from"../chunk-HCBR74BW.js";import{a as Y}from"../chunk-NR5FQCMU.js";import{a as Z}from"../chunk-3W34KH33.js";import{a as _}from"../chunk-HIEGLLY7.js";import{a as $}from"../chunk-5XA2N2WR.js";import{a as ro,b as eo,c as fo}from"../chunk-XDVTHL3S.js";import{a as oo}from"../chunk-P7VSZYG3.js";import{a as mo,b as po}from"../chunk-TZTUPQYK.js";import{a as O}from"../chunk-RAVZ7F5L.js";import{a as P}from"../chunk-VKUAP54W.js";import{a as Q}from"../chunk-VW46DG7H.js";import{a as R}from"../chunk-SKOYHBIE.js";import{a as S}from"../chunk-KVOWI6SN.js";import"../chunk-STPMPY3X.js";import{a as T}from"../chunk-UONSKZQT.js";import"../chunk-OA7C34MJ.js";import"../chunk-WOR3JCLX.js";import{a as J}from"../chunk-UMYPLUG3.js";import{a as K}from"../chunk-DFLWZOQO.js";import{a as I}from"../chunk-FJLYSZV3.js";import{a as N}from"../chunk-HSWMHW37.js";import{a as M}from"../chunk-WTCZAUFY.js";import"../chunk-VCV7RACK.js";import{a as L}from"../chunk-KEWNXANF.js";import{a as C}from"../chunk-CT543Q2V.js";import{a as D}from"../chunk-BIITGC3Z.js";import"../chunk-6DWDNKLS.js";import{a as E}from"../chunk-OSSNMF5U.js";import{a as F}from"../chunk-4E5XBM5Q.js";import"../chunk-UICSVJ3B.js";import{a as G}from"../chunk-UUXZ4W6H.js";import{a as H}from"../chunk-PEMFIU3B.js";import{a as w,b as y}from"../chunk-VS2ZWRGO.js";import{a as z}from"../chunk-SBRPXQWH.js";import{a as A}from"../chunk-SJXV4BWZ.js";import{a as B}from"../chunk-N6KH2EOU.js";import{a}from"../chunk-OEPVYHSS.js";import{a as b}from"../chunk-AKXBXLCP.js";import{a as c,b as d,c as g,d as h,e as i,f as j}from"../chunk-AJWCSQIE.js";import{a as k}from"../chunk-BF4WRYUX.js";import{a as l}from"../chunk-ETQNRMHU.js";import{a as u}from"../chunk-DFGY2NZB.js";import{a as s}from"../chunk-FNAE6HUI.js";import{a as q}from"../chunk-NUVUXNHF.js";import{a as n}from"../chunk-EKTVL6SS.js";import{a as v}from"../chunk-NNE3KNH4.js";import{a as t,b as x}from"../chunk-KRJTW535.js";import{a as r,b as e,c as f,d as m,e as p}from"../chunk-CUNKWFKA.js";import{a as o}from"../chunk-NZJGC6ZW.js";export{m as accentColorPropDef,r as accentColors,u as alertDialogContentPropDefs,o as asChildPropDef,v as avatarPropDefs,C as blockquotePropDefs,D as boxPropDefs,jo as breakpointSet,io as breakpoints,a as buttonPropDefs,E as cardPropDefs,F as checkboxGroupRootPropDefs,b as checkboxPropDefs,G as chipPropDefs,H as codePropDefs,f as colorPropDef,i as contextMenuCheckboxItemPropDefs,g as contextMenuContentPropDefs,h as contextMenuItemPropDefs,j as contextMenuRadioItemPropDefs,g as contextMenuSubContentPropDefs,s as dialogContentPropDefs,i as dropdownMenuCheckboxItemPropDefs,d as dropdownMenuContentPropDefs,h as dropdownMenuItemPropDefs,j as dropdownMenuRadioItemPropDefs,g as dropdownMenuSubContentPropDefs,w as emphases,y as emphasisPropDef,J as flexPropDefs,I as gapPropDefs,p as grayAccentColorPropDef,e as grayColors,K as gridPropDefs,N as headingPropDefs,q as heightPropDefs,O as kbdPropDefs,lo as layoutPropDefs,L as leadingTrimPropDef,P as linkPropDefs,ko as marginPropDefs,oo as paddingPropDefs,Q as popoverContentPropDefs,R as progressPropDefs,t as radii,S as radioGroupRootPropDefs,k as radioPropDefs,x as radiusPropDef,T as scrollAreaPropDefs,U as segmentedControlRootPropDefs,X as selectContentPropDefs,V as selectRootPropDefs,W as selectTriggerPropDefs,Y as separatorPropDefs,no as shadowPropDefs,Z as sliderPropDefs,_ as spinnerPropDefs,c as submenuBehaviors,$ as switchPropDefs,fo as tableCellPropDefs,ro as tableRootPropDefs,eo as tableRowPropDefs,po as tabsContentPropDefs,l as tabsListPropDefs,mo as tabsRootPropDefs,M as textAlignPropDef,to as textAreaPropDefs,ao as textFieldGroupPropDefs,xo as textFieldRootPropDefs,bo as textFieldSlotPropDefs,co as textPropDefs,z as textWrapPropDef,go as themePropDefs,ho as tooltipPropDefs,A as truncatePropDef,B as weightPropDef,n as widthPropDefs};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/_internal/shell-bottom.tsx

@@ -7,7 +7,7 @@ import { PaneResizeContext } from './shell-resize.js';
 import { BottomHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useInsetRegistration, warnOnce } from './shell-store.js';
+import { useFrameRegistration, warnOnce } from './shell-store.js';
 import { bottomAnchoredGrowth, detailRest, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
@@ -25,8 +25,13 @@ type BottomPublicProps = PaneBaseProps &
     onSizeChange?: (size: number, meta: SizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;
-    /** When true, adds margin and triggers the gray backdrop on the Shell. */
-    inset?: boolean;
+    /**
+     * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
+     * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
+     * card. It then floats over the content if the content is flush, and otherwise sits on the
+     * Shell's background beside a card content.
+     */
+    flush?: boolean;
   };
 
 type BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };
@@ -62,7 +67,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     onSizeChange,
     sizeUpdate,
     sizeUpdateMs = 50,
-    inset,
+    flush = true,
     id,
     ...domProps
   } = props;
@@ -82,7 +87,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
     onCollapse,
     size: expandedSize,
   });
-  useInsetRegistration('bottom', inset);
+  useFrameRegistration('bottom', flush);
 
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
@@ -137,7 +142,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellBottom', className)}
       {...paneAttributes(pane, attributes)}
-      data-inset={inset || undefined}
+      data-flush={flush || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={
         {

package/src/components/_internal/shell-inspector.tsx

@@ -7,7 +7,7 @@ import { PaneResizeContext } from './shell-resize.js';
 import { InspectorHandle, PaneHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useInsetRegistration, warnOnce } from './shell-store.js';
+import { useFrameRegistration, warnOnce } from './shell-store.js';
 import { detailRest, endAnchoredGrowth, toPaneValue, withoutRemovedPaneProps } from './shell-rest.js';
 import { PageScope } from './page-scope.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
@@ -24,8 +24,13 @@ type InspectorPublicProps = PaneBaseProps &
     onSizeChange?: (size: number, meta: SizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;
-    /** When true, adds margin and triggers the gray backdrop on the Shell. */
-    inset?: boolean;
+    /**
+     * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
+     * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
+     * card. It then floats over the content if the content is flush, and otherwise sits on the
+     * Shell's background beside a card content.
+     */
+    flush?: boolean;
   };
 
 type InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };
@@ -64,7 +69,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     sizeUpdateMs = 50,
     size,
     defaultSize,
-    inset,
+    flush = true,
     id,
     ...domProps
   } = props;
@@ -84,7 +89,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
     onCollapse,
     size: expandedSize,
   });
-  useInsetRegistration('inspector', inset);
+  useFrameRegistration('inspector', flush);
 
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
@@ -139,7 +144,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellInspector', className)}
       {...paneAttributes(pane, attributes)}
-      data-inset={inset || undefined}
+      data-flush={flush || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={
         {

package/src/components/_internal/shell-sidebar.tsx

@@ -7,7 +7,7 @@ import { PaneResizeContext } from './shell-resize.js';
 import { PaneHandle, SidebarHandle } from './shell-handles.js';
 import { usePane, paneAttributes, usePresentationTable } from './shell-pane.js';
 import { splitHandles, useInitialPaneSize, useResizablePane, type SizeChangeMeta } from './shell-resizable.js';
-import { useInsetRegistration, warnOnce, type PaneValue } from './shell-store.js';
+import { useFrameRegistration, warnOnce, type PaneValue } from './shell-store.js';
 import { navigationRest, startAnchoredGrowth, withoutRemovedPaneProps } from './shell-rest.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
 import { PaneChromeScope } from './pane-chrome.js';
@@ -23,8 +23,13 @@ type SidebarPublicProps = PaneBaseProps & {
   onSizeChange?: (size: number, meta: SizeChangeMeta) => void;
   sizeUpdate?: 'throttle' | 'debounce';
   sizeUpdateMs?: number;
-  /** When true, adds margin and triggers the gray backdrop on the Shell. */
-  inset?: boolean;
+  /**
+   * Sets whether this pane joins the app frame. The default is `true`: the pane sits against its
+   * neighbours with one hairline between them. Set `flush={false}` to pull it off the frame as a
+   * card. It then floats over the content if the content is flush, and otherwise sits on the
+   * Shell's background beside a card content.
+   */
+  flush?: boolean;
 } & (SidebarControlledProps | SidebarUncontrolledProps);
 
 type SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };
@@ -77,7 +82,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
     onSizeChange,
     sizeUpdate,
     sizeUpdateMs = 50,
-    inset,
+    flush = true,
     id,
     ...domProps
   } = props;
@@ -97,7 +102,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
     onCollapse,
     size: expandedSize,
   });
-  useInsetRegistration('sidebar', inset);
+  useFrameRegistration('sidebar', flush);
 
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
@@ -158,7 +163,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
       ref={composedRef}
       className={classNames('kui-ShellPane', 'kui-ShellSidebar', className)}
       {...paneAttributes(pane, attributes)}
-      data-inset={inset || undefined}
+      data-flush={flush || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
       style={
         {

package/src/components/_internal/shell-store.tsx

@@ -171,25 +171,25 @@ export function usePeeking(store: ShellStore, name: PaneName): boolean {
   );
 }
 
-/* ── Inset ─────────────────────────────────────────────────────────────────── */
+/* ── Off the frame ─────────────────────────────────────────────────────────── */
 
-export type InsetPaneId = 'rail' | 'panel' | 'sidebar' | 'content' | 'inspector' | 'bottom';
+export type FramePaneId = 'rail' | 'panel' | 'sidebar' | 'content' | 'inspector' | 'bottom';
 
-export const ShellInsetContext = React.createContext<{
-  registerInset: (id: InsetPaneId) => void;
-  unregisterInset: (id: InsetPaneId) => void;
+export const ShellFrameContext = React.createContext<{
+  registerOffFrame: (id: FramePaneId) => void;
+  unregisterOffFrame: (id: FramePaneId) => void;
 } | null>(null);
 
-/** Registers a pane's `inset` with the Root, which paints the backdrop while any pane is inset. */
-export function useInsetRegistration(id: InsetPaneId, inset: boolean | undefined) {
-  const ctx = React.useContext(ShellInsetContext);
+/** Tells the Root a pane is off the frame (`flush={false}`); the Rail's card moves a floating Panel over. */
+export function useFrameRegistration(id: FramePaneId, flush: boolean) {
+  const ctx = React.useContext(ShellFrameContext);
   if (!ctx) throw new Error('Shell panes must be used within <Shell.Root>');
-  const { registerInset, unregisterInset } = ctx;
+  const { registerOffFrame, unregisterOffFrame } = ctx;
   useLayoutEffect(() => {
-    if (!inset) return;
-    registerInset(id);
-    return () => unregisterInset(id);
-  }, [id, inset, registerInset, unregisterInset]);
+    if (flush) return;
+    registerOffFrame(id);
+    return () => unregisterOffFrame(id);
+  }, [id, flush, registerOffFrame, unregisterOffFrame]);
 }
 
 /* ── Development warnings ──────────────────────────────────────────────────── */

package/src/components/link.css

@@ -12,9 +12,12 @@
   &:where(:focus-visible) {
     border-radius: calc(0.07em * var(--radius-factor));
     outline-color: var(--focus-8);
-    outline-width: 2px;
+    outline-width: var(--focus-ring-width);
     outline-style: solid;
-    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+    /* A wrapped link rings each line's fragment whole, not with square ends mid-word. */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
   }
 
   :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
@@ -22,23 +25,22 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * UNDERLINE                                                                                       *
- *                                                                                                 *
- ***************************************************************************************************/
-
+/* THE UNDERLINE IS ALWAYS THERE (from v2, 2026-11-03). Colour alone does not tell everyone which
+   words are a link (WCAG 1.4.1), and a hover-only underline cannot be found on a touch screen.
+   It rests as a quiet line in the link's own colour and darkens to the ink under the pointer. */
 .kui-Link {
   &:where(:any-link, button) {
-    text-decoration-line: none;
+    text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: min(2px, max(1px, 0.05em));
-    text-underline-offset: calc(0.025em + 2px);
-    text-decoration-color: var(--accent-a5);
+    /* Relative to the link's own type: a fixed distance crowds a descender large and floats small. */
+    text-underline-offset: 0.2em;
+    text-decoration-color: var(--accent-a6);
 
-    /* Enhancement for bright colors */
-    @supports (color: color-mix(in oklab, white, black)) {
-      text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--neutral-a6));
+    @media (hover: hover) {
+      &:where(:hover) {
+        text-decoration-color: currentcolor;
+      }
     }
 
     @media (pointer: coarse) {
@@ -48,41 +50,9 @@
         outline-offset: -0.6em;
       }
     }
-
-    &:where(.kui-underline-auto) {
-      @media (hover: hover) {
-        &:where(:hover) {
-          text-decoration-line: underline;
-        }
-      }
-
-      :where([data-accent-color]:not(.kui-theme)) &:where([data-accent-color='']) {
-        text-decoration-line: underline;
-        text-decoration-color: var(--accent-a6);
-
-        /* Enhancement for bright colors */
-        @supports (color: color-mix(in oklab, white, black)) {
-          text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--neutral-a6));
-        }
-      }
-    }
-
-    &:where(.kui-underline-hover) {
-      @media (hover: hover) {
-        &:where(:hover) {
-          text-decoration-line: underline;
-        }
-      }
-    }
-
-    &:where(.kui-underline-always) {
-      text-decoration-line: underline;
-    }
   }
 }
 
-/* Focus keeps the link's own underline setting; the focus outline marks focus. */
-
 /* Enhancement – hide underline for when Link's only child is a Code where underline is hard to see */
 .kui-Link:where(:has(.kui-Code:not(.kui-variant-ghost):only-child)) {
   text-decoration-color: transparent;

package/src/components/link.props.tsx

@@ -8,7 +8,6 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
-const underline = ['auto', 'always', 'hover', 'none'] as const;
 
 const linkPropDefs = {
   ...asChildPropDef,
@@ -22,11 +21,9 @@ const linkPropDefs = {
   ...leadingTrimPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
-  underline: { type: 'enum', className: 'kui-underline', values: underline, default: 'auto' },
   ...accentColorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  underline: PropDef<(typeof underline)[number]>;
 };
 
 export { linkPropDefs };

package/src/components/shell.css

@@ -26,8 +26,8 @@
 /* ── Frame ─────────────────────────────────────────────────────────────────── */
 
 .kui-ShellRoot {
-  /* Read by inset panes. Declared here, so the documented override on the Root works. */
-  --shell-inset-gap: var(--space-3);
+  /* The air around a pane pulled off the frame (`flush={false}`). Declared here, so the documented override on the Root works. */
+  --shell-gap: var(--space-3);
   /* Written inline by the Root while a Rail shows; stated here so a nested Shell never inherits its parent's. */
   --shell-rail-offset: 0px;
   /* How far the stuck header reaches down the screen while the page scrolls. Stated here so a nested Shell never inherits its parent's. */
@@ -938,68 +938,154 @@
   position: fixed;
 }
 
-/* ── Inset ─────────────────────────────────────────────────────────────────── */
+/* ── Flush and off the frame (from v2, 0.33.0) ─────────────────────────────── */
 
 /*
- * The backdrop behind the middle row while any pane is inset. A grid item of
- * its own, so the header and the bottom row keep the page. `:has()` paints it
- * from the server markup, before any script; `data-has-inset` is the Root's
- * own record, which also covers a pane wrapped in another element.
+ * Every pane says one thing about itself: whether it joins the app frame (`flush`, the default)
+ * or is pulled off it as a card (`flush={false}`). Whether a card floats or sits on the Shell's
+ * background is not stated anywhere; it falls out of the content's own answer, here, so it is
+ * right at first paint:
+ *
+ * - A flush pane is level with the page: square, no fill, no shadow, and one hairline in
+ *   `--color-border` on its inner edge. Each seam is drawn by exactly one pane, and the content
+ *   draws none, so two neighbours never double a line.
+ * - With the content flush, a card floats over it: the content's grid area grows underneath.
+ * - With the content off the frame, nothing floats. The Shell paints its background and every
+ *   pane, flush or not, sits on it; the content is a card, and a flush pane draws no hairline
+ *   toward it, because a line beside a card's own edge is a second boundary.
  */
-.kui-ShellRoot:has(> [data-inset])::before,
-.kui-ShellRoot[data-has-inset]::before {
-  content: '';
-  grid-row: 2;
-  grid-column: 1 / -1;
-  background: var(--neutral-2);
+
+.kui-ShellHeader[data-flush],
+.kui-ShellPane[data-flush],
+.kui-ShellContent[data-flush] {
+  border: 0 solid var(--color-border);
+  border-radius: 0;
+}
+
+.kui-ShellHeader[data-flush] {
+  border-block-end-width: 1px;
+}
+
+.kui-ShellRail[data-flush],
+.kui-ShellPanel[data-flush],
+.kui-ShellSidebar[data-flush] {
+  border-inline-end-width: 1px;
+}
+
+.kui-ShellInspector[data-flush] {
+  border-inline-start-width: 1px;
 }
 
-.kui-ShellPane[data-inset],
-.kui-ShellContent[data-inset] {
-  margin: var(--shell-inset-gap);
+.kui-ShellBottom[data-flush] {
+  border-block-start-width: 1px;
+}
+
+/* A seam needs something on the other side. Against a card content there is only the gap. The
+   Panel and the Rail face the content only when no flush pane stands between them. */
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellHeader[data-flush] {
+  border-block-end-width: 0;
+}
+
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellSidebar[data-flush],
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellPanel[data-flush],
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellRail[data-flush] {
+  border-inline-end-width: 0;
+}
+
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellInspector[data-flush] {
+  border-inline-start-width: 0;
+}
+
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellBottom[data-flush] {
+  border-block-start-width: 0;
+}
+
+/* Off the frame: a card, with its own air on every side. */
+.kui-ShellHeader:not([data-flush]),
+.kui-ShellPane:not([data-flush]),
+.kui-ShellContent:not([data-flush]) {
+  margin: var(--shell-gap);
   border-radius: var(--radius-surface-1);
-  background: var(--color-page);
+  background-color: var(--color-page);
   box-shadow: var(--surface-chrome);
 }
 
+/* A header card rests level with the panes below it, so its shadow falls behind them, not on them. */
+.kui-ShellHeader:not([data-flush]) {
+  z-index: 1;
+}
+
+/* With the content off the frame, the Shell paints the background the cards sit on. */
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) {
+  background-color: var(--neutral-2);
+}
+
 /*
- * Two inset panes side by side share one gap rather than doubling it: the
- * later pane in the row drops the margin on the side that meets the earlier
- * one. Only the pane right beside it counts, and only while it is shown in
- * the frame (the JS mirror's data-presentation and data-mode), so a closed,
- * hidden or floating pane never takes the gap away. Before hydration the
- * gap is doubled.
+ * Two cards side by side share one gap rather than doubling it: the later card in the row drops
+ * its margin on the side that meets the earlier one, so card to card and card to edge come out
+ * equal. Only a pane shown in the frame counts.
  */
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellPanel[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellSidebar[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellSidebar[data-inset][data-presentation='fixed'],
-.kui-ShellRoot:has(> .kui-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(
-    :has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))
-  )
-  > .kui-ShellContent[data-inset],
-.kui-ShellRoot:has(> .kui-ShellContent[data-inset]) > .kui-ShellInspector[data-inset][data-presentation='fixed'] {
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellPanel:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'],
+.kui-ShellRoot:has(> .kui-ShellSidebar:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellContent:not([data-flush])) > .kui-ShellInspector:not([data-flush])[data-presentation='fixed'] {
   margin-inline-start: 0;
 }
 
-.kui-ShellRoot:has(
-    > .kui-ShellRail[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellPanel[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellSidebar[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed']),
-    > .kui-ShellContent[data-inset],
-    > .kui-ShellInspector[data-inset][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])
-  )
-  > .kui-ShellBottom[data-inset] {
+.kui-ShellRoot:has(> .kui-ShellHeader:not([data-flush])) > :is(.kui-ShellPane:not(.kui-ShellBottom), .kui-ShellContent):not([data-flush]),
+.kui-ShellRoot:has(> :is(.kui-ShellRail, .kui-ShellPanel, .kui-ShellSidebar, .kui-ShellInspector):not([data-flush])[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellContent:not([data-flush])) > .kui-ShellBottom:not([data-flush]) {
   margin-block-start: 0;
 }
 
+/* A card content pays no air toward a flush side pane in the frame: the pane's padding is the
+   air. Toward a flush header it keeps its gap, since a header's row has no padding below it. */
+.kui-ShellRoot:has(> .kui-ShellSidebar[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellPanel[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]),
+.kui-ShellRoot:has(> .kui-ShellRail[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])):not(:has(> .kui-ShellPanel[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']), > .kui-ShellSidebar[data-presentation='fixed'][data-mode]:not([data-mode='collapsed']))) > .kui-ShellContent:not([data-flush]) {
+  margin-inline-start: 0;
+}
+
+.kui-ShellRoot:has(> .kui-ShellInspector[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]) {
+  margin-inline-end: 0;
+}
+
+.kui-ShellRoot:has(> .kui-ShellBottom[data-flush][data-presentation='fixed'][data-mode]:not([data-mode='collapsed'])) > .kui-ShellContent:not([data-flush]) {
+  margin-block-end: 0;
+}
+
+/*
+ * Floating: with the content flush, a card is over it, and the content's grid area grows to the
+ * card's own line so the content runs underneath. It grows only on the sides something floats
+ * on. The Rail and the Panel float over the content only when no flush pane stands between.
+ * The panes already sit above the content (`z-index` 1 against the content's isolated layer).
+ */
+.kui-ShellRoot:has(> .kui-ShellSidebar:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: sidebar-start;
+}
+
+.kui-ShellRoot:has(> .kui-ShellPanel:not([data-flush])):not(:has(> .kui-ShellSidebar[data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: panel-start;
+}
+
+.kui-ShellRoot:has(> .kui-ShellRail:not([data-flush])):not(:has(> .kui-ShellPanel[data-flush], > .kui-ShellSidebar[data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-start: rail-start;
+}
+
+.kui-ShellRoot:has(> .kui-ShellInspector:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-column-end: inspector-end;
+}
+
+.kui-ShellRoot:has(> .kui-ShellHeader:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-row-start: header-start;
+}
+
+.kui-ShellRoot:has(> .kui-ShellBottom:not([data-flush])) > .kui-ShellContent[data-flush] {
+  grid-row-end: bottom-end;
+}
+
 /* ── On a phone, the page scrolls (0.27.0) ────────────────────────────────── */
 
 /*