@astryxdesign/core 0.6.2 → 0.6.3-canary.0899f21

package/dist/astryx.css

@@ -65,7 +65,7 @@
   @keyframes xv1hr86-B{from{opacity:0;transform:translateY(calc(-1 * var(--spacing-2))) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
   @keyframes x1b6yrix-B{from{opacity:0;transform:translateY(var(--spacing-2));}to{opacity:1;transform:translateY(0);}}
   @keyframes xiylxmw-B{from{opacity:0;transform:translateY(calc(-1 * var(--spacing-2)));}to{opacity:1;transform:translateY(0);}}
-  @keyframes xqng64z-B{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
+  @keyframes x1wbvqyn-B{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:calc(var(--_spinner-ring-diameter) * -3.141592653589793);}}
   @keyframes x1c2q33o-B{0%{transform:translateX(100%);}100%{transform:translateX(-250%);}}
   @keyframes xr3m334-B{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}
   @keyframes x1xhkexc-B{from{width:0;margin-inline-end:0;opacity:0;}to{width:14px;margin-inline-end:var(--spacing-1);opacity:1;}}
@@ -126,6 +126,8 @@
   .xqxtgf4{--_input-clear-hit-content:none}
   .xtoycft{--_input-clear-hit-inset:0px}
   .xqlix59{--_item-description-color:var(--color-error)}
+  .xw1s368{--_item-inset-inline:var(--spacing-2)}
+  .x1ytau7y{--_item-inset-inline:var(--spacing-3)}
   .xufyqxy{--_item-label-color:var(--color-error)}
   .xiki222{--_popover-radius:var(--radius-container)}
   .xdjmrzf{--_reveal-delay-reduced:0s,0s}
@@ -516,7 +518,6 @@
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
   .x1rea2x4:not(#\#):not(#\#){overflow:visible}
   .xish69e:not(#\#):not(#\#){overscroll-behavior:contain}
-  .x8du1vd:not(#\#):not(#\#){overscroll-behavior:none}
   .xt970qd:not(#\#):not(#\#){padding-block:0}
   .x1vn5h1t:not(#\#):not(#\#){padding-block:calc((var(--size-element-lg) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
   .x1ioay2v:not(#\#):not(#\#){padding-block:calc((var(--size-element-md) - var(--spacing-5) - 2 * var(--border-width)) / 2)}
@@ -537,6 +538,7 @@
   .xnjsko4:not(#\#):not(#\#){padding-inline:0}
   .xx2oswg:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) - 1px)}
   .x2hg6jq:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) + var(--border-width))}
+  .xaip428:not(#\#):not(#\#){padding-inline:var(--_item-inset-inline)}
   .x1kpkw9v:not(#\#):not(#\#){padding-inline:var(--_tab-strip-bleed)}
   .x1w6f3ag:not(#\#):not(#\#){padding-inline:var(--_textarea-inline-padding)}
   .xkjnx3w:not(#\#):not(#\#){padding-inline:var(--spacing-0-5)}
@@ -651,10 +653,10 @@
   .x3psbcj:not(#\#):not(#\#):not(#\#){animation-name:x1ahk7ht-B}
   .x1dvww92:not(#\#):not(#\#):not(#\#){animation-name:x1b6yrix-B}
   .x97zbip:not(#\#):not(#\#):not(#\#){animation-name:x1k48ry3-B}
+  .x1nlxm0d:not(#\#):not(#\#):not(#\#){animation-name:x1wbvqyn-B}
   .x1gbn2au:not(#\#):not(#\#):not(#\#){animation-name:x1xhkexc-B}
   .xeuoslp:not(#\#):not(#\#):not(#\#){animation-name:xgnty7z-B}
   .x1srr2gu:not(#\#):not(#\#):not(#\#){animation-name:xiylxmw-B}
-  .x1ka1v4i:not(#\#):not(#\#):not(#\#){animation-name:xqng64z-B}
   .xozk8ic:not(#\#):not(#\#):not(#\#){animation-name:xr3m334-B}
   .x1mta51n:not(#\#):not(#\#):not(#\#){animation-name:xtut5q7-B}
   .xck01x9:not(#\#):not(#\#):not(#\#){animation-name:xu7jd1z-B}
@@ -867,6 +869,7 @@
   .x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
   .xjp7ctv:not(#\#):not(#\#):not(#\#){display:contents}
   .x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
+  .xufnvkl:not(#\#):not(#\#):not(#\#){display:flow-root}
   .xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
   .x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
   .x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
@@ -904,9 +907,7 @@
   .x1k6wstc:not(#\#):not(#\#):not(#\#){font-size:10px}
   .xfifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
   .xif65rj:not(#\#):not(#\#):not(#\#){font-size:14px}
-  .x1j61zf2:not(#\#):not(#\#):not(#\#){font-size:16px}
   .x1jchvi3:not(#\#):not(#\#):not(#\#){font-size:1rem}
-  .xwsyq91:not(#\#):not(#\#):not(#\#){font-size:20px}
   .x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit}
   .xhs0kqb:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xl)}
   .x16a80zy:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xs)}
@@ -969,6 +970,7 @@
   .x1y6fwsi:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr}
   .x1g3yg12:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr auto}
   .x1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
+  .x1rkzygb:not(#\#):not(#\#):not(#\#){grid-template-columns:auto minmax(0,1fr)}
   .x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
   .x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
   .x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@@ -1028,6 +1030,7 @@
   .x3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
   .x14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
   .x11t971q:not(#\#):not(#\#):not(#\#){margin-inline-end:auto}
+  .x1cphv78:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-end,0px)))}
   .x1fcf3bl:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--container-padding-inline-end,0px))}
   .x1kpg4um:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
   .xkd40ry:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-1 * var(--spacing-1))}
@@ -1040,6 +1043,7 @@
   .x1qfufaz:not(#\#):not(#\#):not(#\#){margin-inline-start:-8px}
   .x1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
   .xvc5jky:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}
+  .x1t1czy8:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * min(var(--_item-inset-inline),var(--container-padding-inline-start,0px)))}
   .xd10s4z:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--border-width))}
   .xojxgvx:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--container-padding-inline-start,0px))}
   .x1wim8z0:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--layout-padding-inner-x,var(--spacing-4)))}
@@ -1281,7 +1285,7 @@
   .xnpjden:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color}
   .xsm4mo9:not(#\#):not(#\#):not(#\#){transition-property:opacity,display,overlay}
   .x1n1p2mu:not(#\#):not(#\#):not(#\#){transition-property:opacity,position}
-  .x1apppo2:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width}
+  .xrgg2z9:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width,visibility}
   .x4bbghf:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,overlay,display}
   .x6o7n8i:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform}
   .xxup5nn:not(#\#):not(#\#):not(#\#){transition-property:opacity,visibility,transform}
@@ -1313,7 +1317,6 @@
   .x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
   .x1q1rmc8:not(#\#):not(#\#):not(#\#){will-change:transform,opacity}
-  .x1so62im:not(#\#):not(#\#):not(#\#){will-change:transform}
   .x1yn0g08:not(#\#):not(#\#):not(#\#){word-break:break-all}
   .x13faqbe:not(#\#):not(#\#):not(#\#){word-break:break-word}
   .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
@@ -1331,6 +1334,7 @@
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}
   .x5um2zc.x5um2zc:where(.x1twag4g:first-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
   .x1se5z8o.x1se5z8o:where(.x1twag4g:last-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
+  .x6ipy2d.x6ipy2d:where(.x1u3b27q:active *):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}
   @supports (animation-timeline: view()){.x1iu2jvn.x1iu2jvn:not(#\#):not(#\#):not(#\#){animation-name:x1tut0r7-B}}
   @supports (container-type: scroll-state){.xafyuhj.xafyuhj:not(#\#):not(#\#):not(#\#){container-type:scroll-state}}
   .xfd3fxj:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:x1c2q33o-B}
@@ -1363,6 +1367,8 @@
   .x1e0x2sz:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-error)}
   .xx47ajj:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
+  .x1nw7mhf:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:calc(-1 * var(--focus-outline-width))}
+  .x1l5jwag:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:calc(0px - var(--focus-outline-width))}
   .x13aywxo:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--button-focus-offset)}
   .x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
   .xwz5zln.xwz5zln:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
@@ -1422,6 +1428,7 @@
   .xpilulx:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-3)),var(--spacing-2))}
   .x1wzlfcn:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-4)),var(--spacing-2))}
   .x1dnou9g:nth-child(even):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
+  .xjl7jj:empty:not(#\#):not(#\#):not(#\#){display:none}
   .x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
   .x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
   .xodanix:focus:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-2)}
@@ -1448,8 +1455,6 @@
   @media (max-width: 480px){.xedohl4.xedohl4:not(#\#):not(#\#):not(#\#){display:flex}}
   @media (pointer: coarse){.xhj50sb.xhj50sb:not(#\#):not(#\#):not(#\#){display:none}}
   @media (max-width: 480px){.x1rpgqan.x1rpgqan:not(#\#):not(#\#):not(#\#){flex-direction:column}}
-  @media (pointer: coarse){.x6pjikd.x6pjikd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}
-  @media (pointer: coarse){.xdk3u5w.xdk3u5w:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}
   @media (pointer: coarse){.x1jymrmb.x1jymrmb:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}}
   @media (forced-colors: active){.x1tbh5bv.x1tbh5bv:not(#\#):not(#\#):not(#\#){opacity:1}}
   @media (pointer: coarse){.xozvky.xozvky:not(#\#):not(#\#):not(#\#){order:1}}
@@ -1478,7 +1483,11 @@
   @media (hover: hover){.x8ydxbz.x8ydxbz.x8ydxbz:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){pointer-events:auto}}
   @media (hover: hover){.x17hxqr7.x17hxqr7.x17hxqr7:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}}
   @media (hover: hover){.xneequu.xneequu.xneequu:where(.x84s7jz:hover *):not(#\#):not(#\#):not(#\#){visibility:visible}}
+  @media (hover: hover){.x74x3iv.x74x3iv.x74x3iv:where(.x1u3b27q:active *):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}}
+  @media (forced-colors: none){.x1xm682w.x1xm682w.x1xm682w:where(.x1iwu4tg:active *):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}}
   @supports (animation-timeline: view()){@media (prefers-reduced-motion: reduce){.xk3h8ob.xk3h8ob.xk3h8ob:not(#\#):not(#\#):not(#\#){animation-name:xuvekqa-B}}}
+  @supports (-webkit-touch-callout: none){@media (pointer: coarse){.xf9zqsd.xf9zqsd.xf9zqsd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}}
+  @supports (-webkit-touch-callout: none){@media (pointer: coarse){.x1w61h2b.x1w61h2b.x1w61h2b:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}}
   @media (hover: hover){.xvxo0qp.xvxo0qp.xvxo0qp:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,var(--color-accent),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x1pfkqlk.x1pfkqlk.x1pfkqlk:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:transparent}}
   @media (hover: hover){.xcu6dpe.xcu6dpe.xcu6dpe:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}}
@@ -1559,7 +1568,6 @@
   .xs02d24:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100% + 1px)}
   .x12qplqi:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100% + var(--container-padding-block-start,0px) + var(--container-padding-block-end,0px))}
   .xpa73km:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100dvh - var(--_app-shell-header-height,0px))}
-  .x1oglpa6:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(max(1rem,var(--text-body-size)) * var(--text-body-leading));height:1lh}
   .x1tpcejd:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + 48px)}
   .x1uiybsj:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 4px)}
   .x102lyln:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 8px)}
@@ -1568,6 +1576,7 @@
   .x1u5rhrp:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) + var(--spacing-1))}
   .xzj98nu:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 4px)}
   .xzydfjl:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 8px)}
+  .x1mutkkf:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--text-body-size) * var(--text-body-leading));height:1lh}
   .x1q370uo:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--text-body-size) * var(--text-body-leading))}
   .x14o5nre:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--text-supporting-size) * var(--text-supporting-leading))}
   .xw1wawg:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(44px - 8px)}
@@ -1651,7 +1660,6 @@
   .x55n99s:not(#\#):not(#\#):not(#\#):not(#\#){max-width:15em}
   .x1ncir08:not(#\#):not(#\#):not(#\#):not(#\#){max-width:200px}
   .xw5ewwj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:300px}
-  .x1x67gh:not(#\#):not(#\#):not(#\#):not(#\#){max-width:32px}
   .xxc7z9f:not(#\#):not(#\#):not(#\#):not(#\#){max-width:360px}
   .x1j9u4d2:not(#\#):not(#\#):not(#\#):not(#\#){max-width:400px}
   .x17fpy1y:not(#\#):not(#\#):not(#\#):not(#\#){max-width:480px}
@@ -1666,6 +1674,7 @@
   .x1m1aaou:not(#\#):not(#\#):not(#\#):not(#\#){max-width:min(960px,calc(100dvw - var(--spacing-4)))}
   .x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
   .xjl2t3p:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--layout-content-width,none)}
+  .x1jys5uj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--size-element-md)}
   .xf68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}
   .x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
   .x1us19tq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:100%}
@@ -1676,6 +1685,7 @@
   .xjwf9q1:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}
   .xe0p6wg:not(#\#):not(#\#):not(#\#):not(#\#){min-height:28px}
   .x21xpn4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:32px}
+  .x121v3j4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:min-content}
   .x1xf4nls:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-lg)}
   .x1uogy3y:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-md)}
   .x1gdqauq:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--size-element-sm)}
@@ -1855,6 +1865,7 @@
   .x1g31smg:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:0}
   .xkibk3:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--container-padding-block-start,0px))}
   .x1vjq31q:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
+  .x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
   .xlayyun:last-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
   .xup0pd7:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
   .x15cytp8:focus:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
@@ -1866,6 +1877,7 @@
   @media (pointer: coarse){.xkagaj0.xkagaj0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:24px}}
   @media (pointer: coarse){.x1xrq5m.x1xrq5m:not(#\#):not(#\#):not(#\#):not(#\#){min-width:44px}}
   @media (pointer: coarse){.xngvp7v.xngvp7v:not(#\#):not(#\#):not(#\#):not(#\#){min-width:44px}}
+  @supports (-webkit-touch-callout: none){@media (pointer: coarse){.x9w4715.x9w4715.x9w4715:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(max(1rem,var(--text-body-size)) * var(--text-body-leading));height:1lh}}}
   @starting-style{.x1sopeo2.x1sopeo2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}}
   .x1xsm0q9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:-14px}
   .xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
@@ -1883,6 +1895,8 @@
   @starting-style{.x14gflnl.x14gflnl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}}
   .x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
   .xxyica1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:inherit}
+  .xq94oqs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-full)}
+  .xtb6wbx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-inner)}
   .x17gn2l9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{grid-column:1}
   .xd54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
   .xpsyfx0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-block:0}
@@ -1962,6 +1976,8 @@
   .xa5v58t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition-timing-function:var(--ease-standard)}
   .x1rbqspl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{user-select:none}
   .xy5mcqj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{z-index:-1}
+  .xzywxsk.xzywxsk:where(.x1odsvnm:active *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--color-overlay-pressed)}
+  .x2kv6q6.x2kv6q6:where(.x1odsvnm:active:not(:has(a:active,button:active,[role="button"]:active,[role="link"]:active)) *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--color-overlay-pressed)}
   .xk7vujl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,var(--color-shadow),transparent)}
   .xlptwl5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,var(--color-shadow),transparent)}
   .xdq8fwl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:right center}

package/dist/hooks/scrollKeyboardDelegation.d.ts

@@ -0,0 +1,3 @@
+/** Attach only while automatic ownership has an effective scroll axis. */
+export declare function attachScrollKeyboardDelegation(viewport: HTMLElement, content: HTMLElement): () => void;
+//# sourceMappingURL=scrollKeyboardDelegation.d.ts.map

package/dist/hooks/scrollKeyboardDelegation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollKeyboardDelegation.d.ts","sourceRoot":"","sources":["../../src/hooks/scrollKeyboardDelegation.ts"],"names":[],"mappings":"AAkIA,0EAA0E;AAC1E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,WAAW,GACnB,MAAM,IAAI,CAkGZ"}

package/dist/hooks/scrollKeyboardDelegation.js

@@ -0,0 +1,146 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollKeyboardDelegation.ts
+ * @input A named, overflowing viewport and its real content box
+ * @output Focus-time delegation with native forward and reverse Tab traversal
+ * @position Private useScrollableArea keyboard behavior; no DOM observers or scrolling
+ */
+
+import { FOCUSABLE_SELECTOR } from "./focusableSelector.js";
+import { getRegisteredScrollOwnerState } from "./scrollOwnerRegistry.js";
+
+// Structural roles may contain ordinary links/buttons. Unknown or interactive
+// roles are deliberately excluded until their navigation contract is proven.
+const PASSIVE_ROLES = new Set(['article', 'banner', 'complementary', 'contentinfo', 'definition', 'directory', 'document', 'figure', 'form', 'generic', 'group', 'heading', 'list', 'listitem', 'main', 'navigation', 'none', 'note', 'paragraph', 'presentation', 'region', 'section', 'status', 'table', 'term']);
+function isSequential(element) {
+  if (element.tabIndex < 0 || element.matches(':disabled') || element.closest('[inert], [hidden]') != null || element.getClientRects().length === 0) {
+    return false;
+  }
+  const visibility = getComputedStyle(element).visibility;
+  return visibility !== 'hidden' && visibility !== 'collapse';
+}
+function firstDelegationTarget(viewport, content) {
+  const candidates = content.querySelectorAll(FOCUSABLE_SELECTOR);
+  let first = content.matches(FOCUSABLE_SELECTOR) && isSequential(content) ? content : null;
+  for (const candidate of candidates) {
+    // After finding the first target, only positive tabindex can precede it.
+    // Ordinary trailing controls need no visibility or layout reads.
+    if (first != null && candidate.tabIndex <= 0) {
+      continue;
+    }
+    if (!isSequential(candidate)) {
+      continue;
+    }
+    // Positive tabindex participates before the zero-index viewport. Do not
+    // revisit it or skip its ordering by delegating to a later zero-index child.
+    if (candidate.tabIndex > 0) {
+      return null;
+    }
+    first ??= candidate;
+  }
+  if (first == null || first.tabIndex !== 0 || !first.matches('a[href], button') || first.closest('[aria-hidden="true"]') != null || first.matches('[aria-disabled="true"], [aria-haspopup]:not([aria-haspopup="false"])')) {
+    return null;
+  }
+  let ancestor = first;
+  while (ancestor != null && ancestor !== viewport) {
+    const role = ancestor.getAttribute('role')?.trim().toLowerCase();
+    const nativeRole = ancestor === first && (role === 'button' && first.localName === 'button' || role === 'link' && first.localName === 'a');
+    if (role != null && role !== '' && !nativeRole && !PASSIVE_ROLES.has(role) || ancestor === first && role != null && role !== '' && !nativeRole || ancestor.hasAttribute('aria-activedescendant') || ancestor.isContentEditable || ancestor.matches('[contenteditable]:not([contenteditable="false"])') || getRegisteredScrollOwnerState(ancestor) != null) {
+      return null;
+    }
+    // Also respect native scroll owners that have not adopted the shared hook.
+    const style = getComputedStyle(ancestor);
+    if (/^(auto|scroll|overlay)$/.test(style.overflowX) && ancestor.scrollWidth > ancestor.clientWidth + 1 || /^(auto|scroll|overlay)$/.test(style.overflowY) && ancestor.scrollHeight > ancestor.clientHeight + 1) {
+      return null;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return ancestor === viewport ? first : null;
+}
+
+/** Attach only while automatic ownership has an effective scroll axis. */
+export function attachScrollKeyboardDelegation(viewport, content) {
+  const document = viewport.ownerDocument;
+  const window = document.defaultView;
+  if (window == null) {
+    return () => {};
+  }
+  let entry = null;
+  let origin = null;
+  let delegated = null;
+  let timer;
+  let restoreTabStop;
+  const reset = () => {
+    entry = null;
+    origin = null;
+    window.clearTimeout(timer);
+    restoreTabStop?.();
+    restoreTabStop = undefined;
+  };
+  const onKeyDown = event => {
+    reset();
+    if (event.key !== 'Tab' || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    // Keep the actual event: focus() during keydown is programmatic (nonzero
+    // eventPhase), whereas native Tab focus follows completed event dispatch.
+    entry = event;
+    origin = event.target;
+    if (event.shiftKey && delegated != null && document.activeElement === delegated && viewport.contains(delegated)) {
+      const tabIndex = viewport.getAttribute('tabindex');
+      viewport.tabIndex = -1;
+      restoreTabStop = () => {
+        if (viewport.getAttribute('tabindex') === '-1') {
+          if (tabIndex == null) {
+            viewport.removeAttribute('tabindex');
+          } else {
+            viewport.setAttribute('tabindex', tabIndex);
+          }
+        }
+      };
+    }
+    // A canceled Tab, focus leaving the document, or a held key must not leave
+    // stale keyboard intent for a later pointer/programmatic focus operation.
+    timer = window.setTimeout(reset, 0);
+  };
+  const onFocusIn = event => {
+    const keyboardEntry = entry;
+    const previous = origin;
+    reset();
+    if (event.target !== viewport) {
+      if (!viewport.contains(event.target)) {
+        delegated = null;
+      }
+      return;
+    }
+    delegated = null;
+    if (keyboardEntry == null || keyboardEntry.shiftKey || keyboardEntry.defaultPrevented || keyboardEntry.eventPhase !== 0 || event.relatedTarget != null && event.relatedTarget !== previous) {
+      return;
+    }
+    const target = firstDelegationTarget(viewport, content);
+    if (target == null) {
+      return;
+    }
+    delegated = target;
+    // Let native focus reveal the action. Arrow/Page scrolling remains entirely
+    // browser-owned, including scroll chaining and the full viewport range.
+    target.focus();
+    if (document.activeElement !== target) {
+      delegated = null;
+    }
+  };
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('keyup', reset, true);
+  document.addEventListener('pointerdown', reset, true);
+  document.addEventListener('focusin', onFocusIn, true);
+  window.addEventListener('blur', reset);
+  return () => {
+    reset();
+    document.removeEventListener('keydown', onKeyDown, true);
+    document.removeEventListener('keyup', reset, true);
+    document.removeEventListener('pointerdown', reset, true);
+    document.removeEventListener('focusin', onFocusIn, true);
+    window.removeEventListener('blur', reset);
+  };
+}

package/dist/hooks/useClickableContainer.d.ts

@@ -7,6 +7,11 @@
  * Solves the "nested interactive elements" problem: when a card is clickable
  * but contains buttons/links, clicking those should NOT trigger the card's action.
  *
+ * Every navigation exit here (window.open, location.href, and the delegated
+ * click on the interactive ref) runs after the shared navigation-destination
+ * rule in utils/safeUrl.ts; a blocked href does not navigate by any
+ * activation method.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts (export)
  */
@@ -30,7 +35,11 @@ export interface UseClickableContainerOptions {
     interactiveRef?: RefObject<HTMLElement | null>;
     /** Click handler */
     onClick?: (event: MouseEvent<HTMLElement>) => void;
-    /** Navigation URL — when provided, clicking the container navigates */
+    /**
+     * Navigation URL — when provided, clicking the container navigates. Checked
+     * with the shared navigation rule (utils/safeUrl.ts) before any activation
+     * method (plain, new-tab, Cmd/Ctrl-click, middle-click, delegated click).
+     */
     href?: string;
     /** Link target */
     target?: string;

package/dist/hooks/useClickableContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickableContainer.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickableContainer.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,QAmBvB,CAAC;AAmCZ,MAAM,WAAW,4BAA4B;IAC3C,yCAAyC;IACzC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mEAAmE;IACnE,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,cAAc,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,MAAM,EACN,QAAgB,GACjB,EAAE,4BAA4B,GAAG,wBAAwB,CA6GzD"}
+{"version":3,"file":"useClickableContainer.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickableContainer.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAG9E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,qBAAqB,QAmBvB,CAAC;AAmCZ,MAAM,WAAW,4BAA4B;IAC3C,yCAAyC;IACzC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,mEAAmE;IACnE,cAAc,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,cAAc,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EACJ,MAAM,EACN,QAAgB,GACjB,EAAE,4BAA4B,GAAG,wBAAwB,CAmHzD"}

package/dist/hooks/useClickableContainer.js

@@ -11,10 +11,16 @@
  * Solves the "nested interactive elements" problem: when a card is clickable
  * but contains buttons/links, clicking those should NOT trigger the card's action.
  *
+ * Every navigation exit here (window.open, location.href, and the delegated
+ * click on the interactive ref) runs after the shared navigation-destination
+ * rule in utils/safeUrl.ts; a blocked href does not navigate by any
+ * activation method.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts (export)
  */
 import { useCallback, useEffect } from 'react';
+import { isSafeUrl } from "../utils/safeUrl.js";
 
 /**
  * Canonical list of interactive element selectors — native controls plus
@@ -128,8 +134,12 @@ export function useClickableContainer({
       return;
     }
 
-    // Navigate if href is provided
-    if (href != null) {
+    // Navigate if href is provided. React DOM vets the hrefs it writes as
+    // attributes; nothing below passes through React, so the shared
+    // navigation rule decides once, before target, modifier key, or the
+    // delegated anchor can select a sink. A blocked href simply does not
+    // navigate — the click handler above still ran.
+    if (href != null && isSafeUrl(href)) {
       const shouldOpenNewTab = target === '_blank' || event.ctrlKey || event.metaKey;
       if (shouldOpenNewTab) {
         window.open(href, '_blank', 'noopener');
@@ -171,9 +181,10 @@ export function useClickableContainer({
       return;
     }
 
-    // Middle-click on href opens in new tab
+    // Middle-click on href opens in new tab (same scheme rule as onClick —
+    // this navigation never passes through React either).
     const isMiddleClick = event.button === 1;
-    if (isMiddleClick && href != null && (eventTarget === event.currentTarget || !hasInteractiveAncestor(eventTarget, containerEl))) {
+    if (isMiddleClick && href != null && isSafeUrl(href) && (eventTarget === event.currentTarget || !hasInteractiveAncestor(eventTarget, containerEl))) {
       window.open(href, '_blank', 'noopener');
     }
   }, [containerRef, href, disabled]);

package/dist/hooks/useScrollableArea.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -20,6 +20,10 @@ export type ScrollKeyboardAccess = {
     owner: 'viewport';
     label: string;
     role?: 'group' | 'region';
+} | {
+    owner: 'contentOrViewport';
+    label: string;
+    role?: 'group' | 'region';
 };
 export interface ScrollAxisState {
     isScrollable: boolean;

package/dist/hooks/useScrollableArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CAwRpD"}
+{"version":3,"file":"useScrollableArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollableArea.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAOL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AACnD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,oBAAoB,GAC5B;IAAC,KAAK,EAAE,SAAS,CAAA;CAAC,GAClB;IAAC,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAAC,GAC7D;IACE,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B,CAAC;AAEN,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,cAAc,EAAE,oBAAoB,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACtE,aAAa,CAAC,CAAC,CAAC,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,gBAAgB,CAAC,CAAC,SAAS,WAAW,EACpC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,CAAC,SAAS,WAAW,EACnC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAChC,sBAAsB,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,mBAAmB,CAAC;CAC5B;AAiGD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,cAAc,EACd,UAAoB,EACpB,iBAAoC,GACrC,EAAE,wBAAwB,GAAG,uBAAuB,CA0SpD"}

package/dist/hooks/useScrollableArea.js

@@ -4,8 +4,8 @@
 
 /**
  * @file useScrollableArea.ts
- * @input Logical scroll intent, keyboard ownership, caller-owned viewport/content props
- * @output Safe prop getters and stable per-axis effective scroll state
+ * @input Logical scroll intent, focus-time keyboard delegation, caller-owned viewport/content props
+ * @output Safe prop getters, native keyboard entry, and stable per-axis effective scroll state
  * @position Canonical behavior core for ScrollableArea and structure-owning adopters
  *
  * SYNC: When modified, update:
@@ -15,6 +15,7 @@
  */
 import { useCallback, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { attachScrollKeyboardDelegation } from "./scrollKeyboardDelegation.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { mergeRefs } from "../utils/mergeRefs.js";
@@ -172,6 +173,9 @@ export function useScrollableArea({
     viewport.addEventListener('animationend', scheduleMeasure);
     content.addEventListener('transitionend', scheduleMeasure);
     content.addEventListener('animationend', scheduleMeasure);
+
+    // Geometry invalidation is independent of keyboard eligibility. The latter
+    // is inspected only on native keyboard entry, never by these observers.
     const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleMeasure);
     mutationObserver?.observe(viewport, {
       attributes: true,
@@ -219,6 +223,13 @@ export function useScrollableArea({
     inline: axisIsRequested(axis, 'inline') ? measured.inline : INACTIVE_AXIS_STATE,
     block: axisIsRequested(axis, 'block') ? measured.block : INACTIVE_AXIS_STATE
   }), [axis, measured]);
+  const hasEffectiveAxis = state.inline.isScrollable || state.block.isScrollable;
+  useIsomorphicLayoutEffect(() => {
+    if (keyboardAccess.owner !== 'contentOrViewport' || !hasEffectiveAxis || viewport == null || content == null) {
+      return;
+    }
+    return attachScrollKeyboardDelegation(viewport, content);
+  }, [content, hasEffectiveAxis, keyboardAccess.owner, viewport]);
   const getViewportProps = useCallback((props = {}) => {
     const hasEffectiveAxis = state.inline.isScrollable || state.block.isScrollable;
     const requestedX = axisIsRequested(axis, 'inline') && mapping.inline === 'x' || axisIsRequested(axis, 'block') && mapping.block === 'x';
@@ -237,7 +248,8 @@ export function useScrollableArea({
       style: withoutOwnedOverflow(domProps.style)
     };
     const styledProps = mergeProps(callerProps, stylex.props(xstyle, styles.overflow(containsSticky ? scrollsOnX ? 'auto' : 'hidden' : 'clip', containsSticky ? scrollsOnY ? 'auto' : 'hidden' : 'clip')));
-    const keepsProgrammaticFocus = !hasEffectiveAxis && viewport != null && typeof document !== 'undefined' && document.activeElement === viewport;
+    const viewportIsKeyboardOwner = keyboardAccess.owner !== 'content';
+    const keepsProgrammaticFocus = (!viewportIsKeyboardOwner || !hasEffectiveAxis) && viewport != null && typeof document !== 'undefined' && document.activeElement === viewport;
     const behaviorStyle = {
       ...styledProps.style
     };
@@ -251,10 +263,10 @@ export function useScrollableArea({
     if (axisIsRequested(axis, 'block')) {
       behaviorStyle[blockPhysical === 'x' ? 'overscrollBehaviorX' : 'overscrollBehaviorY'] = containBlock ? 'contain' : 'auto';
     }
-    const keyboardProps = keyboardAccess.owner === 'viewport' ? {
+    const keyboardProps = keyboardAccess.owner !== 'content' ? {
       role: keyboardAccess.role ?? 'group',
       'aria-label': keyboardAccess.label,
-      tabIndex: hasEffectiveAxis ? 0 : keepsProgrammaticFocus ? -1 : undefined
+      tabIndex: viewportIsKeyboardOwner && hasEffectiveAxis ? 0 : keepsProgrammaticFocus ? -1 : undefined
     } : {};
     const result = {
       ...styledProps,

package/dist/index.d.ts

@@ -107,6 +107,7 @@ export * from './Skeleton';
 export * from './StatusDot';
 export * from './Spinner';
 export * from './Timestamp';
+export * from './Timer';
 export * from './Overlay';
 export * from './Outline';
 export * from './OverflowList';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -133,6 +133,9 @@ export * from "./Spinner/index.js";
 // Timestamp display
 export * from "./Timestamp/index.js";
 
+// Elapsed timer display
+export * from "./Timer/index.js";
+
 // Overlay
 export * from "./Overlay/index.js";
 export * from "./Outline/index.js";

package/dist/theme/declarationBoundary.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Why `value` cannot be emitted as the value of one declaration, or `null`
+ * when it can. Valid CSS a browser keeps inside one declaration always
+ * returns `null`; see the file header for the exact rules.
+ */
+export declare function checkDeclarationValue(input: string): string | null;
+/**
+ * Why `name` cannot be emitted as a declaration's property name, or `null`
+ * when it can. A property name is one CSS ident sequence: a standard
+ * property (`color`), a vendor-prefixed one (`-webkit-line-clamp`), or a
+ * custom property (`--brand-accent`, `--_internal`). Escapes are allowed
+ * because an ident allows them. Whether the name means anything to the
+ * browser is not this check's concern; only that it cannot end the
+ * declaration or leak a second one.
+ */
+export declare function checkDeclarationName(input: string): string | null;
+//# sourceMappingURL=declarationBoundary.d.ts.map

package/dist/theme/declarationBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"declarationBoundary.d.ts","sourceRoot":"","sources":["../../src/theme/declarationBoundary.ts"],"names":[],"mappings":"AAgOA;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAgGlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAUjE"}