@antadesign/anta 0.3.28 → 0.3.29

package/dist/tokens.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace}:root,.light{color-scheme:light;font-size:15px;font-weight:400;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{color-scheme:dark;font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 60%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 60%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 60%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 60%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 60%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 60%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace}:root,.light{color-scheme:light;font-size:15px;font-weight:400;--anta-seed-neutral: #635b65;--anta-seed-brand: #5f4bc3;--anta-seed-info: #1f6eb2;--anta-seed-success: #2a7e43;--anta-seed-warning: #c37416;--anta-seed-critical: #c9302c;--bg-1: oklch(from var(--anta-seed-neutral) 1 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .985 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .97 .004 h);--bg-4: oklch(from var(--anta-seed-neutral) .954 .004 h);--bg-5: oklch(from var(--anta-seed-neutral) .935 .006 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .99 .004 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .972 .011 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .955 .02 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .935 .03 h);--bg-2-info: oklch(from var(--anta-seed-info) .99 .004 h);--bg-3-info: oklch(from var(--anta-seed-info) .972 .011 h);--bg-4-info: oklch(from var(--anta-seed-info) .955 .02 h);--bg-5-info: oklch(from var(--anta-seed-info) .935 .03 h);--bg-2-success: oklch(from var(--anta-seed-success) .99 .004 h);--bg-3-success: oklch(from var(--anta-seed-success) .972 .011 h);--bg-4-success: oklch(from var(--anta-seed-success) .955 .02 h);--bg-5-success: oklch(from var(--anta-seed-success) .935 .03 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .99 .004 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .972 .011 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .955 .02 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .935 .03 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .99 .004 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .972 .011 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .955 .02 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .935 .03 h);--text-1: oklch(from var(--anta-seed-neutral) .1 .01 h);--text-2: oklch(from var(--anta-seed-neutral) .3 .015 h);--text-3: color-mix(in oklch, var(--text-2) 82%, transparent);--text-4: color-mix(in oklch, var(--text-2) 66%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .38 .11 h);--text-2-brand: oklch(from var(--anta-seed-brand) .43 .15 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 82%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 66%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .38 .11 h);--text-2-info: oklch(from var(--anta-seed-info) .43 .15 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 82%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 66%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .38 .11 h);--text-2-success: oklch(from var(--anta-seed-success) .43 .15 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 82%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 66%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .38 .11 h);--text-2-warning: oklch(from var(--anta-seed-warning) .43 .15 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 82%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 66%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .38 .11 h);--text-2-critical: oklch(from var(--anta-seed-critical) .43 .15 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 82%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 66%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .67 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .8 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .86 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .9 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .935 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .67 .13 h);--border-2-brand: oklch(from var(--anta-seed-brand) .8 .09 h);--border-3-brand: oklch(from var(--anta-seed-brand) .86 .055 h);--border-4-brand: oklch(from var(--anta-seed-brand) .9 .04 h);--border-5-brand: oklch(from var(--anta-seed-brand) .935 .028 h);--border-1-info: oklch(from var(--anta-seed-info) .67 .13 h);--border-2-info: oklch(from var(--anta-seed-info) .8 .09 h);--border-3-info: oklch(from var(--anta-seed-info) .86 .055 h);--border-4-info: oklch(from var(--anta-seed-info) .9 .04 h);--border-5-info: oklch(from var(--anta-seed-info) .935 .028 h);--border-1-success: oklch(from var(--anta-seed-success) .67 .13 h);--border-2-success: oklch(from var(--anta-seed-success) .8 .09 h);--border-3-success: oklch(from var(--anta-seed-success) .86 .055 h);--border-4-success: oklch(from var(--anta-seed-success) .9 .04 h);--border-5-success: oklch(from var(--anta-seed-success) .935 .028 h);--border-1-warning: oklch(from var(--anta-seed-warning) .67 .13 h);--border-2-warning: oklch(from var(--anta-seed-warning) .8 .09 h);--border-3-warning: oklch(from var(--anta-seed-warning) .86 .055 h);--border-4-warning: oklch(from var(--anta-seed-warning) .9 .04 h);--border-5-warning: oklch(from var(--anta-seed-warning) .935 .028 h);--border-1-critical: oklch(from var(--anta-seed-critical) .67 .13 h);--border-2-critical: oklch(from var(--anta-seed-critical) .8 .09 h);--border-3-critical: oklch(from var(--anta-seed-critical) .86 .055 h);--border-4-critical: oklch(from var(--anta-seed-critical) .9 .04 h);--border-5-critical: oklch(from var(--anta-seed-critical) .935 .028 h);--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{color-scheme:dark;font-weight:400;--bg-1: oklch(from var(--anta-seed-neutral) 0 0 h);--bg-2: oklch(from var(--anta-seed-neutral) .16 .002 h);--bg-3: oklch(from var(--anta-seed-neutral) .177 .005 h);--bg-4: oklch(from var(--anta-seed-neutral) .191 .006 h);--bg-5: oklch(from var(--anta-seed-neutral) .2 .009 h);--bg-2-brand: oklch(from var(--anta-seed-brand) .13 .02 h);--bg-3-brand: oklch(from var(--anta-seed-brand) .17 .035 h);--bg-4-brand: oklch(from var(--anta-seed-brand) .185 .05 h);--bg-5-brand: oklch(from var(--anta-seed-brand) .205 .055 h);--bg-2-info: oklch(from var(--anta-seed-info) .13 .02 h);--bg-3-info: oklch(from var(--anta-seed-info) .17 .035 h);--bg-4-info: oklch(from var(--anta-seed-info) .185 .05 h);--bg-5-info: oklch(from var(--anta-seed-info) .205 .055 h);--bg-2-success: oklch(from var(--anta-seed-success) .13 .02 h);--bg-3-success: oklch(from var(--anta-seed-success) .17 .035 h);--bg-4-success: oklch(from var(--anta-seed-success) .185 .05 h);--bg-5-success: oklch(from var(--anta-seed-success) .205 .055 h);--bg-2-warning: oklch(from var(--anta-seed-warning) .13 .02 h);--bg-3-warning: oklch(from var(--anta-seed-warning) .17 .035 h);--bg-4-warning: oklch(from var(--anta-seed-warning) .185 .05 h);--bg-5-warning: oklch(from var(--anta-seed-warning) .205 .055 h);--bg-2-critical: oklch(from var(--anta-seed-critical) .13 .02 h);--bg-3-critical: oklch(from var(--anta-seed-critical) .17 .035 h);--bg-4-critical: oklch(from var(--anta-seed-critical) .185 .05 h);--bg-5-critical: oklch(from var(--anta-seed-critical) .205 .055 h);--text-1: oklch(from var(--anta-seed-neutral) .94 .008 h);--text-2: oklch(from var(--anta-seed-neutral) .8 .015 h);--text-3: color-mix(in oklch, var(--text-2) 80%, transparent);--text-4: color-mix(in oklch, var(--text-2) 62%, transparent);--text-5: color-mix(in oklch, var(--text-2) 40%, transparent);--text-1-brand: oklch(from var(--anta-seed-brand) .85 .1 h);--text-2-brand: oklch(from var(--anta-seed-brand) .77 .11 h);--text-3-brand: color-mix(in oklch, var(--text-2-brand) 80%, transparent);--text-4-brand: color-mix(in oklch, var(--text-2-brand) 62%, transparent);--text-5-brand: color-mix(in oklch, var(--text-2-brand) 40%, transparent);--text-1-info: oklch(from var(--anta-seed-info) .85 .1 h);--text-2-info: oklch(from var(--anta-seed-info) .77 .11 h);--text-3-info: color-mix(in oklch, var(--text-2-info) 80%, transparent);--text-4-info: color-mix(in oklch, var(--text-2-info) 62%, transparent);--text-5-info: color-mix(in oklch, var(--text-2-info) 40%, transparent);--text-1-success: oklch(from var(--anta-seed-success) .85 .1 h);--text-2-success: oklch(from var(--anta-seed-success) .77 .11 h);--text-3-success: color-mix(in oklch, var(--text-2-success) 80%, transparent);--text-4-success: color-mix(in oklch, var(--text-2-success) 62%, transparent);--text-5-success: color-mix(in oklch, var(--text-2-success) 40%, transparent);--text-1-warning: oklch(from var(--anta-seed-warning) .85 .1 h);--text-2-warning: oklch(from var(--anta-seed-warning) .77 .11 h);--text-3-warning: color-mix(in oklch, var(--text-2-warning) 80%, transparent);--text-4-warning: color-mix(in oklch, var(--text-2-warning) 62%, transparent);--text-5-warning: color-mix(in oklch, var(--text-2-warning) 40%, transparent);--text-1-critical: oklch(from var(--anta-seed-critical) .85 .1 h);--text-2-critical: oklch(from var(--anta-seed-critical) .77 .11 h);--text-3-critical: color-mix(in oklch, var(--text-2-critical) 80%, transparent);--text-4-critical: color-mix(in oklch, var(--text-2-critical) 62%, transparent);--text-5-critical: color-mix(in oklch, var(--text-2-critical) 40%, transparent);--border-1: oklch(from var(--anta-seed-neutral) .52 .008 h);--border-2: oklch(from var(--anta-seed-neutral) .41 .008 h);--border-3: oklch(from var(--anta-seed-neutral) .33 .008 h);--border-4: oklch(from var(--anta-seed-neutral) .26 .008 h);--border-5: oklch(from var(--anta-seed-neutral) .21 .008 h);--border-1-brand: oklch(from var(--anta-seed-brand) .52 .15 h);--border-2-brand: oklch(from var(--anta-seed-brand) .41 .12 h);--border-3-brand: oklch(from var(--anta-seed-brand) .33 .09 h);--border-4-brand: oklch(from var(--anta-seed-brand) .26 .06 h);--border-5-brand: oklch(from var(--anta-seed-brand) .21 .045 h);--border-1-info: oklch(from var(--anta-seed-info) .52 .15 h);--border-2-info: oklch(from var(--anta-seed-info) .41 .12 h);--border-3-info: oklch(from var(--anta-seed-info) .33 .09 h);--border-4-info: oklch(from var(--anta-seed-info) .26 .06 h);--border-5-info: oklch(from var(--anta-seed-info) .21 .045 h);--border-1-success: oklch(from var(--anta-seed-success) .52 .15 h);--border-2-success: oklch(from var(--anta-seed-success) .41 .12 h);--border-3-success: oklch(from var(--anta-seed-success) .33 .09 h);--border-4-success: oklch(from var(--anta-seed-success) .26 .06 h);--border-5-success: oklch(from var(--anta-seed-success) .21 .045 h);--border-1-warning: oklch(from var(--anta-seed-warning) .52 .15 h);--border-2-warning: oklch(from var(--anta-seed-warning) .41 .12 h);--border-3-warning: oklch(from var(--anta-seed-warning) .33 .09 h);--border-4-warning: oklch(from var(--anta-seed-warning) .26 .06 h);--border-5-warning: oklch(from var(--anta-seed-warning) .21 .045 h);--border-1-critical: oklch(from var(--anta-seed-critical) .52 .15 h);--border-2-critical: oklch(from var(--anta-seed-critical) .41 .12 h);--border-3-critical: oklch(from var(--anta-seed-critical) .33 .09 h);--border-4-critical: oklch(from var(--anta-seed-critical) .26 .06 h);--border-5-critical: oklch(from var(--anta-seed-critical) .21 .045 h);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}

package/docs/accessibility.md

@@ -4,7 +4,7 @@ A few guidelines for designers and engineers using Anta.
 
 ## Colors
 
-The matrix renders every text level on every background for the selected tone and theme. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. The controls change rendering and pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
+The matrix reads the active theme's `text-*` and `bg-*` tokens and updates when you switch themes. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. Transparent text is composited over each background before measurement. Size and weight change pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
 
 The interactive matrix compares all five text levels with all five background levels for each tone in light and dark mode. It resolves the active CSS palette in the browser, composites transparent text over its background, and reports WCAG 2 contrast and APCA Lc.
 
@@ -43,7 +43,9 @@ The simulator above makes it easy to check a candidate combination across the mo
 
 ## Low-priority text and contrast
 
-The `Text`/`Title` `quaternary` priority (`text-4`) and the `text-5` step (the faintest — used for disabled and hint text across components) sit at intentionally muted contrast, designed for non-essential metadata: timestamps, captions, helper hints, secondary counters. At small sizes (13–15 px) they may not pass WCAG AA against some background levels and tones. Use the matrix above to verify combinations before relying on them for content that has to be readable.
+Neutral `text-4` meets 4.5:1 against `bg-1` in both light and dark modes for Antune and None. This does not extend to every background: Antune's neutral `text-4` is 4.41:1 on light `bg-2` and 4.25:1 on dark `bg-2`.
+
+Named `text-4` tones use `text-2` at 66% opacity in light mode and 62% in dark mode for both themes. They remain fainter than `text-3` and are not tuned to meet 4.5:1. The `text-5` step is also intentionally muted. Check the matrix for each tone and background before choosing a pair for readable content.
 
 `text-1` and `text-2` are the primary-content priorities; reach for them whenever the content matters.
 

package/docs/changelog.md

@@ -3,6 +3,84 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.29 — September 15, 2026
+
+### Added
+
+- SelectFaceted single and multiple facets support `renderOption` for custom
+  option content in facet flyouts and global search results. Render custom
+  option data as key–value Tags while retaining selection handling and indicators.
+- Box supports `padding` and `margin` props and HTML attributes. JSX numbers
+  use pixels; strings accept CSS shorthand values.
+- Panel is a persistent container that can maximize to the browser viewport
+  through a manual popover while keeping its DOM children mounted. Maximized
+  panels contain keyboard focus until restored. Panels fill their parent's
+  width and height and use `overflow: scroll` by default. The maximized surface
+  inherits the Panel's background.
+
+### Changed
+
+- Switch defaults to neutral in both states. Pass `tone="brand"` for brand coloring,
+  and add `toneScope="selected"` to tint only the checked track.
+
+- Select uses Anta Button for its default trigger, preserving popup accessibility,
+  keyboard-only focus rings, and ellipsis for long values. Its accessible description
+  includes the current selection and field hint. Menu button triggers
+  open with ArrowUp and ArrowDown. Select field styling now targets its
+  `a-select-field` wrapper and child `a-button` instead of Input shadow parts.
+
+- Calendar adjacent-month dates are hidden from assistive technology and reach
+  full opacity on hover or focus when enabled.
+- The default Alt/Option-click hint in multi-select option menus appears to the
+  left of its row after 700ms, and moving between rows restarts that delay.
+- Tooltip delay-free handoff now applies only when both the outgoing and incoming
+  tooltips have `follow`. Tooltip supports centered-left placement with
+  `placement="left"` and flips right when space is limited.
+- Input and its composed controls now expose roles, labels, popup relationships,
+  required state, and active options on the controls that receive focus. Direct
+  ARIA element references avoid generated Calendar, popup, and option ID
+  collisions across application roots.
+- Checkbox, Switch, and Radio hints are accessible descriptions. Tabs use a
+  roving tab stop, and `TabPanel` forwards common component props.
+- Every independently loadable stylesheet now reserves Anta's public and
+  internal cascade-layer order. Granular element imports therefore keep
+  component and theme rules above `reset.css` even when a bundler loads their
+  CSS before `tokens.css`.
+- Breadcrumbs no longer scroll horizontally by default, so button focus rings
+  remain visible. To enable scrolling, set `overflow-x: auto` on the trail and
+  `outline-offset: -1px` on its focused controls.
+- **Breaking:** Box measurement events now trigger on border-box width and
+  height changes by default. `observe` accepts `width`, `height`, `size`,
+  `context`, `overflow`, `edges`, `scroll`, or `all`, individually or in a typed
+  array. Plain HTML accepts the same selections separated by spaces.
+  Use `overflow` for content-driven CSS states or `edges` for scroll-edge
+  changes; size observation skips content and scroll observers. `throttle` sets
+  the event interval in milliseconds without delaying CSS fades or on-demand
+  truncation checks.
+- Tags no longer impose `max-width: 100%`. Labels and values still ellipsize
+  when the application constrains the tag’s width.
+
+### Fixed
+
+- Menu Tab navigation follows rendered slot order and reaches controls inside
+  shadow DOM, including individual InputTime segments.
+- Dialog menus preserve menu semantics for body items when no search field is present.
+- Panel preserves maximize and restore focus handling when custom element states
+  are unavailable.
+
+- Neutral `text-4` meets at least 4.5:1 contrast against `bg-1` in both light
+  and dark modes for Antune and None. This guarantee does not extend to named
+  tones or other backgrounds.
+- Clicking inside a parent menu closes nested menus outside the clicked branch.
+  Calendar's month/year picker closes when clicking elsewhere in the calendar,
+  including the month navigation arrows.
+- Nested menus reset when their controlled parent closes. InputDate's month/year
+  picker can reopen after selecting a date while the picker is open.
+- Calendar weekday headers use a higher-contrast text color, including weekends.
+- Slider exposes its `ElementInternals` through the same runtime inspection hook
+  as other stateful controls, allowing accessibility tooling to inspect its live
+  range semantics.
+
 ## 0.3.28 — September 10, 2026
 
 ### Changed
@@ -43,10 +121,10 @@ changes are not listed.
 
 ### Fixed
 
-- Antune and Antithesis pin regular TT Interphases text to `slnt` 0, including
-  form controls that reset font shorthand inheritance. This keeps text upright
-  in Safari despite the font file's non-zero axis default while preserving the
-  `slnt` 11 instance for semantic italics.
+- Antune and Antithesis pin regular TT Interphases text and `dfn` to `slnt` 0,
+  including form controls that reset font shorthand inheritance. This keeps
+  text upright in Safari despite the font file's non-zero axis default while
+  preserving the `slnt` 11 instance for semantic italics.
 - `tokens.css` declares `color-scheme` on `:root`, `.light`, and `.dark`, so
   component colors resolve to the right mode without the optional `reset.css`
   import.

package/docs/colors.md

@@ -59,32 +59,32 @@ Links use `--link-color` at rest and `--link-color-hover` on hover. Both tokens
 | `--text-1` | `oklch(from var(--anta-seed-neutral) 0.1 0.01 h)` | `oklch(from var(--anta-seed-neutral) 0.94 0.008 h)` | `#050306` | `#ece9ec` |
 | `--text-2` | `oklch(from var(--anta-seed-neutral) 0.3 0.015 h)` | `oklch(from var(--anta-seed-neutral) 0.8 0.015 h)` | `#302b31` | `#c1b9c1` |
 | `--text-3` | `color-mix(in oklch, var(--text-2) 82%, transparent)` | `color-mix(in oklch, var(--text-2) 80%, transparent)` | `#635b65` | `#9f99a1` |
-| `--text-4` | `color-mix(in oklch, var(--text-2) 60%, transparent)` | `color-mix(in oklch, var(--text-2) 60%, transparent)` | `#878089` | `#776e77` |
+| `--text-4` | `color-mix(in oklch, var(--text-2) 66%, transparent)` | `color-mix(in oklch, var(--text-2) 62%, transparent)` | `#7a737c` | `#7c737c` |
 | `--text-5` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `#9f99a1` | `#635b65` |
 | `--text-1-brand` | `oklch(from var(--anta-seed-brand) 0.38 0.11 h)` | `oklch(from var(--anta-seed-brand) 0.85 0.1 h)` | `#2e1e7b` | `#c5baff` |
 | `--text-2-brand` | `oklch(from var(--anta-seed-brand) 0.43 0.15 h)` | `oklch(from var(--anta-seed-brand) 0.77 0.11 h)` | `#483493` | `#ada0ee` |
 | `--text-3-brand` | `color-mix(in oklch, var(--text-2-brand) 82%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 80%, transparent)` | `#483493cc` | `#ada0eecc` |
-| `--text-4-brand` | `color-mix(in oklch, var(--text-2-brand) 60%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 60%, transparent)` | `#48349399` | `#ada0ee99` |
+| `--text-4-brand` | `color-mix(in oklch, var(--text-2-brand) 66%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 62%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 66%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 62%, transparent)` |
 | `--text-5-brand` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `#48349366` | `#ada0ee66` |
 | `--text-1-info` | `oklch(from var(--anta-seed-info) 0.38 0.11 h)` | `oklch(from var(--anta-seed-info) 0.85 0.1 h)` | `#003969` | `#9ed2ff` |
 | `--text-2-info` | `oklch(from var(--anta-seed-info) 0.43 0.15 h)` | `oklch(from var(--anta-seed-info) 0.77 0.11 h)` | `#175082` | `#7db6e8` |
 | `--text-3-info` | `color-mix(in oklch, var(--text-2-info) 82%, transparent)` | `color-mix(in oklch, var(--text-2-info) 80%, transparent)` | `#175082cc` | `#7db6e8cc` |
-| `--text-4-info` | `color-mix(in oklch, var(--text-2-info) 60%, transparent)` | `color-mix(in oklch, var(--text-2-info) 60%, transparent)` | `#175082b2` | `#7db6e899` |
+| `--text-4-info` | `color-mix(in oklch, var(--text-2-info) 66%, transparent)` | `color-mix(in oklch, var(--text-2-info) 62%, transparent)` | `color-mix(in oklch, var(--text-2-info) 66%, transparent)` | `color-mix(in oklch, var(--text-2-info) 62%, transparent)` |
 | `--text-5-info` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `#17508280` | `#7db6e866` |
 | `--text-1-success` | `oklch(from var(--anta-seed-success) 0.38 0.11 h)` | `oklch(from var(--anta-seed-success) 0.85 0.1 h)` | `#004618` | `#9ddeb1` |
 | `--text-2-success` | `oklch(from var(--anta-seed-success) 0.43 0.15 h)` | `oklch(from var(--anta-seed-success) 0.77 0.11 h)` | `#1f5c31` | `#74cd8e` |
 | `--text-3-success` | `color-mix(in oklch, var(--text-2-success) 82%, transparent)` | `color-mix(in oklch, var(--text-2-success) 80%, transparent)` | `#1f5c31cc` | `#74cd8ecc` |
-| `--text-4-success` | `color-mix(in oklch, var(--text-2-success) 60%, transparent)` | `color-mix(in oklch, var(--text-2-success) 60%, transparent)` | `#1f5c3199` | `#74cd8e99` |
+| `--text-4-success` | `color-mix(in oklch, var(--text-2-success) 66%, transparent)` | `color-mix(in oklch, var(--text-2-success) 62%, transparent)` | `color-mix(in oklch, var(--text-2-success) 66%, transparent)` | `color-mix(in oklch, var(--text-2-success) 62%, transparent)` |
 | `--text-5-success` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `#1f5c3166` | `#74cd8e66` |
 | `--text-1-warning` | `oklch(from var(--anta-seed-warning) 0.38 0.11 h)` | `oklch(from var(--anta-seed-warning) 0.85 0.1 h)` | `#7f410b` | `#f0bf75` |
 | `--text-2-warning` | `oklch(from var(--anta-seed-warning) 0.43 0.15 h)` | `oklch(from var(--anta-seed-warning) 0.77 0.11 h)` | `#995200` | `#e1a452` |
 | `--text-3-warning` | `color-mix(in oklch, var(--text-2-warning) 82%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 80%, transparent)` | `#995200cc` | `#e1a452cc` |
-| `--text-4-warning` | `color-mix(in oklch, var(--text-2-warning) 60%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 60%, transparent)` | `#99520099` | `#e1a45299` |
+| `--text-4-warning` | `color-mix(in oklch, var(--text-2-warning) 66%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 62%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 66%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 62%, transparent)` |
 | `--text-5-warning` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `#99520066` | `#e1a45266` |
 | `--text-1-critical` | `oklch(from var(--anta-seed-critical) 0.38 0.11 h)` | `oklch(from var(--anta-seed-critical) 0.85 0.1 h)` | `#8f1014` | `#ffabac` |
 | `--text-2-critical` | `oklch(from var(--anta-seed-critical) 0.43 0.15 h)` | `oklch(from var(--anta-seed-critical) 0.77 0.11 h)` | `#a01c1c` | `#e78e90` |
 | `--text-3-critical` | `color-mix(in oklch, var(--text-2-critical) 82%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 80%, transparent)` | `#a01c1ccc` | `#e78e90cc` |
-| `--text-4-critical` | `color-mix(in oklch, var(--text-2-critical) 60%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 60%, transparent)` | `#a01c1c99` | `#e78e9099` |
+| `--text-4-critical` | `color-mix(in oklch, var(--text-2-critical) 66%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 62%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 66%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 62%, transparent)` |
 | `--text-5-critical` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `#a01c1c66` | `#e78e9066` |
 
 ## Border

package/docs/components/box.md

@@ -5,32 +5,34 @@ events. For custom wheel, pointer, and touch handling, use [Capture](./capture.m
 
 ## Display
 
-Use `display`, `gap`, and `round` for layout and corners. Numeric lengths use
-pixels; strings accept CSS lengths. A bare `round` fully rounds the corners.
+Use `display`, `gap`, `padding`, `margin`, and `round` for layout and corners. Numeric lengths use
+pixels; strings accept CSS lengths. `padding` and `margin` also accept CSS
+shorthand, such as `padding="8px 16px"` or `margin="0 auto"`. Omission adds no
+spacing styles. A bare `round` fully rounds the corners.
 
 ```tsx
-<Box round={8}><span /></Box>
-<Box display="flex" round={8} gap={6}><span /></Box>
-<Box display="grid" round={8} gap="0.5rem" style={{ gridTemplateColumns: '1fr 1fr' }}><span /></Box>
+<Box round={8} padding={10}><span /></Box>
+<Box display="flex" round={8} gap={6} padding={10}><span /></Box>
+<Box display="grid" round={8} gap="0.5rem" padding="8px 16px" style={{ gridTemplateColumns: '1fr 1fr' }}><span /></Box>
 ```
 
 ## Overflow
 
 Box reports overflow, clipping, and scrollability as measurements and CSS
-states. Use `observe="size"` to keep CSS states current. `fade` and
-`onMeasureChange` also enable measurement; without these, Box adds no size
-observers.
+states. Use `observe="overflow"` to keep overflow, clipping, and scrollability
+states current as content changes. `observe="edges"` also tracks which
+edges hide content while scrolling. `fade` enables both automatically.
 
 `.edge` is a demo class name. Use your own selector.
 
 ```tsx
-<Box observe="size" round={8} className="edge" style={{ width: 150 }}>Content that fits.</Box>
+<Box observe="overflow" round={8} className="edge" style={{ width: 150 }}>Content that fits.</Box>
 
-<Box observe="size" round={8} className="edge" style={{ width: 150, overflow: 'hidden', whiteSpace: 'nowrap' }}>
+<Box observe="overflow" round={8} className="edge" style={{ width: 150, overflow: 'hidden', whiteSpace: 'nowrap' }}>
   A label too long for this box.
 </Box>
 
-<Box observe="size" round={8} className="edge" style={{ width: 150, height: 56, overflowY: 'auto' }}>
+<Box observe="overflow" round={8} className="edge" style={{ width: 150, height: 56, overflowY: 'auto' }}>
   One. Two. Three. Four. Five. Six. Seven. Eight. Nine. Ten.
 </Box>
 ```
@@ -65,7 +67,7 @@ const TAGS = ['frontend', 'design-system', 'a11y', 'performance']
 The mask clips to the padding box. It preserves the Box border, shadows, and
 focus ring when no edge is hidden.
 
-To style hidden edges without `fade`, use `observe="size"` and the
+To style hidden edges without `fade`, use `observe="edges"` and the
 `hidden-start-x`, `hidden-end-x`, `hidden-start-y`, or `hidden-end-y` CSS states.
 
 ### Tooltip on clipped content
@@ -88,11 +90,63 @@ const TAGS = ['frontend', 'design-system', 'a11y', 'performance']
 
 ## Measurements
 
-`onMeasureChange` reports one frame after observation starts and when the Box or
-its content changes. `changed` contains changed fields; `current` is the full
-snapshot. Reporting pauses off screen and resumes when Box returns.
-
-Resize or scroll the Box to update its measurements.
+By default, `onMeasureChange` reports one frame after observation starts, then when
+the border-box `width` or `height` changes. `changed` contains all fields changed
+since the last event; `current` is the full snapshot. Reporting pauses off screen
+and resumes with a fresh snapshot when Box returns.
+
+`observe` accepts one of the eight selections below, or a typed array combining
+them. `observe={['size', 'edges']}` and `observe={['edges', 'size']}` select the
+same triggers. Repeated selections have no effect. Changing the selected
+measurement fields requests a fresh snapshot. TypeScript checks each value;
+use an array to combine selections in JSX.
+
+The selections below progress from resize and context signals to continuous
+scroll tracking. Intensity describes typical observation work and event frequency,
+not a fixed performance rating. Content churn and the work in your handler also
+affect the cost.
+
+| Selection | Event triggers | Frontend work and intensity |
+| --- | --- | --- |
+| `width` | Border-box `width`. | Low during ordinary use: observes the host; no content or scroll observers. Can report each frame during resizing. |
+| `height` | Border-box `height`. | Same work as `width`, with height as the event trigger. |
+| `size` | Either border-box `width` or `height`. | Same observers as a single dimension; observes the element itself. |
+| `context` | Theme, resolved font, insets, background, focus, and browser/device context through `onContextChange`. | Usually infrequent: shared theme/media listeners and local style/focus reads; no scroll listener. |
+| `overflow` | `clientWidth`, `clientHeight`, `scrollWidth`, `scrollHeight`, `overflowX/Y`, `clippedX/Y`, and `scrollableX/Y`. | Content-dependent: adds content mutations and child resizes; no scroll listener. Does not report individual child dimensions. |
+| `edges` | `hiddenStartX`, `hiddenEndX`, `hiddenStartY`, and `hiddenEndY`. | Measures content/layout changes and scrolling, at most once per frame. Emits only when an edge flag changes, so moving through the middle stays silent. |
+| `scroll` | `scrollLeft` or `scrollTop`. | High during scrolling: measures content/layout and scroll changes and can emit every frame. |
+| `all` | Every measurement field and rendering context. | Enables all observers and can emit every frame. |
+
+Selections are independent. `scroll` selects offset triggers; it does not include
+`size`, `overflow`, `edges`, or `context`. Every measurement event still
+contains fresh values for every measurement field, including client/content
+dimensions and hidden edges. Combine triggers when you also need events caused
+by those other changes. With `observe="size"`, content-only changes cause no
+event; the next size event includes the current content measurements.
+
+For a scroll-edge indicator, use `edges`: it reads during scrolling but
+avoids a callback for each offset change. `scroll` and `all` can cause the most
+frequent application updates, especially when the handler sets state or sends
+each snapshot to a worker. Prefer `fade` when CSS alone needs the edge state.
+
+When no measurement is selected, `onMeasureChange` adds `size`;
+`onContextChange` adds `context`.
+Passing both handlers observes size and context without enabling scroll events.
+Without handlers or `fade`, omitting `observe` keeps Box idle.
+
+Set `throttle` to a minimum interval in milliseconds. The first report has no
+added delay; subsequent reports include a trailing update with the latest values.
+Omit it or pass `0` for frame-based reporting. Negative or non-finite values use
+`0`. The interval applies to `onMeasureChange`; context events are not throttled.
+Throttling limits event delivery; it does not reduce observer reads.
+`edges`, `scroll`, and `fade` continue measuring during scrolling so their
+CSS states remain current.
+
+`Tooltip truncatedOnly` reads Box's clipping on demand. It works without
+`observe` or `onMeasureChange` and does not enable continuous observation.
+
+This readout observes `['size', 'overflow', 'edges', 'scroll']` with `throttle={100}`.
+Resize or scroll the Box to update it.
 
 ```tsx title="measurechange"
 const [measurement, setMeasurement] = useState<BoxMeasurement | null>(null)
@@ -100,6 +154,8 @@ const [measurement, setMeasurement] = useState<BoxMeasurement | null>(null)
 <Box
   round={8}
   className="measure-probe-box"
+  observe={['size', 'overflow', 'edges', 'scroll']}
+  throttle={100}
   onMeasureChange={(_, { current }) => setMeasurement(current)}
 >
   <Text size="small" priority="tertiary">Resize or scroll this Box.</Text>
@@ -224,14 +280,17 @@ const canvasRef = useRef<HTMLCanvasElement>(null)
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `display?` | BoxDisplay | block | Layout model for the host. All other layout, sizing, mask, and shadow properties stay ordinary `className` / `style` CSS on the Box itself. |
+| `display?` | 'block' \| 'inline-block' \| 'flex' \| 'inline-flex' \| 'grid' \| 'inline-grid' | block | Layout model for the host. Sizing, alignment, mask, and shadow properties stay ordinary `className` / `style` CSS on the Box itself. |
 | `fade?` | boolean | — | Fades out every edge that currently hides clipped content, and drops the fade from an edge once the reader scrolls to it. |
 | `fadeSize?` | number \| string | 24 | Depth of the `fade` gradient. A `number` is pixels; a string is any CSS length. |
 | `gap?` | number \| string | — | Gap between children, matching the CSS `gap` property. A `number` is pixels; a string is any CSS length or two-value gap (`'1rem'`, `'8px 16px'`). Applies while the Box is a flex or grid container. |
-| `observe?` | 'size' \| 'context' \| 'all' | — | What the Box watches, when a handler is not what turns it on. `'size'` keeps the overflow CSS states (`:state(clipped-x)`, `:state(scrollable-y)`, …) current — reach for it when your own CSS is the only reader. `'context'` and `'all'` are there for symmetry; passing `onMeasureChange` or `onContextChange` already turns the matching half on. |
+| `margin?` | number \| string | — | Outer spacing, matching CSS `margin`. Numbers are pixels; strings accept CSS shorthand, `auto`, negative lengths, and custom properties. Omission adds no style. |
+| `observe?` | 'width' \| 'height' \| 'size' \| 'context' \| 'overflow' \| 'edges' \| 'scroll' \| 'all' \| readonly BoxObservation[] | — | One selection or an array of selections, in any order. `'size'` watches width and height; `'context'` watches rendering context; `'overflow'` watches content dimensions and clipping. `'edges'` reports which edges hide content; `'scroll'` reports offsets, potentially every frame; `'all'` selects everything. Selections are independent: use `['size', 'edges']` to combine them. A measurement handler implies `'size'` when no measurement is selected; a context handler adds `'context'`. Size skips content and scroll observers; overflow adds content observation; hidden edges and scroll add scroll reads. Without handlers or `fade`, omission stays idle. |
 | `onContextChange?` | (event, detail) => void | — | Fired after Box's browser and local rendering context changes. `detail` contains the changed fields and a full current snapshot. |
-| `onMeasureChange?` | (event, detail) => void | — | Fired after Box geometry or its content-overflow state changes. `detail` contains the changed fields and a full current snapshot. |
+| `onMeasureChange?` | (event, detail) => void | — | Fired when a selected measurement field changes. `detail` contains all fields changed since the last event and a full current snapshot. |
+| `padding?` | number \| string | — | Inner spacing, matching CSS `padding`. Numbers are pixels; strings accept CSS shorthand, percentages, and custom properties. Omission adds no style. |
 | `round?` | boolean \| number \| string | — | Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit for square corners. |
+| `throttle?` | number | 0 | Minimum interval between measurement events, in milliseconds. The first report has no added delay; a trailing report delivers the latest values. Active observers and CSS clipping states are not throttled. |
 
 ### BoxMeasurement
 
@@ -261,21 +320,21 @@ const canvasRef = useRef<HTMLCanvasElement>(null)
 | Field | Type | Default | Description |
 |------|------|---------|-------------|
 | `backgroundColor` | string | — | Resolved `background-color`. Needed when the box's content is drawn somewhere else — an offscreen canvas, a worker, an export — where the box's own background is not behind it. |
-| `browser` | BoxBrowser | — | Browser family. |
+| `browser` | 'chrome' \| 'edge' \| 'firefox' \| 'opera' \| 'safari' \| 'unknown' | — | Browser family. |
 | `browserVersion` | number | — | Browser major version, or `0` when unknown. Minor and patch digits are frozen by every engine, so only the major number is reported. |
 | `devicePixelRatio` | number | — | `window.devicePixelRatio`: CSS pixels per device pixel. `1` on a standard display, `2` on most Retina screens, and a fraction under OS or browser zoom. Live — it re-reports on zoom and when the window moves to a monitor with a different density. |
 | `focusWithin` | boolean | — | Whether focus is on the box or any of its descendants, read from the native `:focus-within`. For CSS, use that pseudo-class directly; this field is for logic that cannot query the DOM. |
 | `font` | BoxFont | — | Resolved text style, ready to hand to a canvas 2D context. |
-| `globalMode` | BoxMode | — | Mode on `<html>`, independent of an enclosing local scope. |
+| `globalMode` | 'light' \| 'dark' | — | Mode on `<html>`, independent of an enclosing local scope. |
 | `hover` | boolean | — | Whether ordinary hover interaction is available. |
 | `inset` | BoxInset | — | Padding and border widths, for placing content inside the border box. |
 | `mobile` | boolean | — | Whether the browser reports a mobile device. |
-| `mode` | BoxMode | — | Closest scoped Anta mode. A local `.light` can override a dark document. |
-| `os` | BoxOS | — | Operating-system family. |
+| `mode` | 'light' \| 'dark' | — | Closest scoped Anta mode. A local `.light` can override a dark document. |
+| `os` | 'android' \| 'ios' \| 'linux' \| 'macos' \| 'windows' \| 'unknown' | — | Operating-system family. |
 | `osVersion` | number | — | Operating-system major version, or `0` when the browser withholds it. Browsers freeze this: every engine reports macOS as `10.15.7` and Windows 11 as `10.0`, so only Android and iOS carry a real number. Treat it as a hint, never as a gate. |
-| `pointer` | BoxPointer | — | Most precise available primary pointer. |
+| `pointer` | 'fine' \| 'coarse' \| 'none' | — | Most precise available primary pointer. |
 | `reducedMotion` | boolean | — | Whether the reader asks for reduced motion. |
-| `systemAppearance` | BoxMode | — | Browser / operating-system color preference, independent of Anta classes. |
+| `systemAppearance` | 'light' \| 'dark' | — | Browser / operating-system color preference, independent of Anta classes. |
 
 ### BoxFont
 
@@ -318,8 +377,11 @@ const canvasRef = useRef<HTMLCanvasElement>(null)
 ## Web component
 
 Use `<a-box>` without JSX. Events are non-bubbling `CustomEvent`s with the same
-`detail`. Set `observe="size"`, `"context"`, or `"all"` explicitly; adding a
-listener does not enable observation. A bare `observe` means `"all"`.
+`detail`. Set `observe` explicitly; adding a listener does not enable
+observation. Combine the eight selections with spaces, such as
+`observe="size edges"` or `observe="size scroll"`, in any order. Repeated tokens
+have no effect; unknown tokens are ignored. A bare `observe` means `"all"`.
+`throttle="100"` limits measurement events to a 100 ms interval.
 
 ```html title="a-box"
 <a-box display="grid" gap="8px" round="12px" observe="all"
@@ -335,20 +397,22 @@ Import `@antadesign/anta/elements/a-box` to register the element. Listen for
 
 ## Styling
 
-Your `className` and `style` override `display`, `gap`, and `round` through the
+Your `className` and `style` override `display`, `gap`, `padding`, `margin`, and
+`round` through the
 `anta.components` CSS layer.
 
-Without typed CSS `attr()` support, raw `gap`, `round`, and `fade-size` length
-attributes need matching custom properties. The JSX wrapper sets these for you:
+Without typed CSS `attr()` support, raw `gap`, `padding`, `margin`, `round`,
+and `fade-size` attributes need matching custom properties. The JSX wrapper
+sets these for you. Raw HTML lengths need units, such as `padding="16px"`:
 
 ```html
-<a-box display="flex" gap round fade class="raw-box"
-       style="--box-gap: 8px; --box-round: 12px; --box-fade-size: 32px">
+<a-box display="flex" gap padding margin round fade class="raw-box"
+       style="--box-gap: 8px; --box-padding: 12px; --box-margin: 0 auto; --box-round: 12px; --box-fade-size: 32px">
   <span>Layout</span><span>Context</span><span>Measurements</span>
 </a-box>
 ```
 
 ```css
-.raw-box { width: 190px; overflow: auto; padding: 12px; border: 1px solid var(--border-4); }
+.raw-box { width: 190px; overflow: auto; border: 1px solid var(--border-4); }
 .raw-box span { flex: 0 0 auto; }
 ```

package/docs/components/breadcrumbs.md

@@ -4,6 +4,9 @@ Hierarchy navigation assembled from Anta Buttons. Breadcrumb entries can be
 links, actions, or copy controls. Set `maxItems` to fold one middle range into a
 More menu without measuring the available width.
 
+Breadcrumbs do not scroll horizontally by default. Use `maxItems` to limit
+visible entries, or enable scrolling with the [scrolling recipe](#horizontal-scrolling).
+
 ## Items
 
 Pass ordered `BreadcrumbItem` objects through `items`. Each item is a link,
@@ -212,3 +215,33 @@ with your own selector.
   color: var(--text-2);
 }
 ```
+
+### Horizontal scrolling
+
+Set `overflow-x: auto` on the trail to scroll when its contents exceed the
+available width. `maxItems` limits the item count; long labels can still overflow.
+
+Horizontal scrolling also makes vertical overflow compute to `auto`, which
+clips the default button focus ring above and below the row. Set
+`outline-offset: -1px` on the trail's focused controls to draw the ring inside
+their bounds. The selector below covers breadcrumb links, action and copy
+buttons, and the More control.
+
+`scrolling-breadcrumbs` is an example class; replace it with your own selector.
+Use Tab to move through the controls and see the focus ring.
+
+```tsx
+<Box style={{ width: 280, maxWidth: '100%' }}>
+  <Breadcrumbs className="scrolling-breadcrumbs" maxItems={3} items={[
+    { label: 'Anta', href: '/' },
+    { label: 'Documentation', href: '/box/' },
+    { label: 'Layout components', href: '/panel/' },
+    { label: 'Breadcrumbs', current: true },
+  ]} />
+</Box>
+```
+
+```css
+.scrolling-breadcrumbs { overflow-x: auto; }
+.scrolling-breadcrumbs > :focus-visible { outline-offset: -1px; }
+```

package/docs/components/button.md

@@ -166,8 +166,8 @@ name "trash". Pass your own `aria-label` to override.
 ### Children
 
 ```tsx
-<Button tone="brand" label="Save" icon="check">
-  <span style={{ opacity: 0.7 }}>⌘S</span>
+<Button tone="brand" label="Save" icon="check" aria-keyshortcuts="Meta+s">
+  <kbd aria-hidden="true" style={{ font: 'inherit', fontVariationSettings: 'inherit', opacity: 0.7 }}>⌘S</kbd>
 </Button>
 ```
 

package/docs/components/capture.md

@@ -214,9 +214,9 @@ native text selection or touch gestures.
 | `onWheelInput?` | (event, detail) => void | — | Accepted wheel input, with a serialized original event, Capture-relative geometry, focus state, and activation reason. Cancellation is already complete. |
 | `pan?` | boolean \| CapturePan | — | Emit custom pan motion. `true` enables touch panning on both axes without momentum. Options select devices, axes, bounds directions, and optional inertia. Captures the pointer internally; `pointerCapture` is not required. Sets CSS touch-action through attributes before the gesture starts. |
 | `pointerCapture?` | boolean \| CapturePointerCapture | — | Emit raw data for a primary pointer until release or cancellation. An options object filters devices/buttons and configures activation. Nested interactive controls are excluded unless explicitly included. A listener alone enables nothing. |
-| `wheelActivation?` | CaptureWheelActivation | settled | Pointer or focus condition required before wheel input can be captured. Focus applies only to input targeted within this Capture. |
+| `wheelActivation?` | 'hover' \| 'settled' \| 'focus' \| 'settled-or-focus' | settled | Pointer or focus condition required before wheel input can be captured. Focus applies only to input targeted within this Capture. |
 | `wheelCapture?` | CaptureInputDirections | — | Capture wheel input in the enabled directions and emit `onWheelInput`. `true` accepts all directions. Omit or pass `false` to leave wheel input alone. Nested native wheel controls and Anta menus are excluded. All-false direction bounds preserve pointer settling while declining input. A listener alone never enables capture. |
-| `wheelModifier?` | CaptureInputModifier | none | Required modifier for wheel capture. `none` preserves browser Ctrl/pinch zoom. |
+| `wheelModifier?` | 'none' \| 'any' \| 'alt' \| 'ctrl' \| 'meta' \| 'shift' | none | Required modifier for wheel capture. `none` preserves browser Ctrl/pinch zoom. |
 | `wheelSettle?` | CaptureWheelSettle | { delay: 150, tolerance: 5, resetOnMove: false } | Dwell delay, movement tolerance, and whether movement resets eligibility. |
 
 ### CaptureWheelSettle
@@ -233,7 +233,7 @@ native text selection or touch gestures.
 |------|------|---------|-------------|
 | `buttons?` | readonly number[] | [0] | Accepted initiating buttons, using PointerEvent.button values. |
 | `includeInteractive?` | boolean | false | Allow capture to start on nested native or ARIA controls, links, or editable regions. |
-| `modifier?` | CaptureInputModifier | any | Modifier required to start a capture session. |
+| `modifier?` | 'none' \| 'any' \| 'alt' \| 'ctrl' \| 'meta' \| 'shift' | any | Modifier required to start a capture session. |
 | `pointerTypes?` | readonly CapturePointerType[] | ['mouse', 'pen', 'touch'] | Accepted pointer devices. One primary pointer is tracked per Capture. |
 | `threshold?` | number | 0 | Movement required before activation, in viewport CSS pixels. |
 
@@ -258,7 +258,7 @@ native text selection or touch gestures.
 
 | Field | Type | Default | Description |
 |------|------|---------|-------------|
-| `activationReason` | CaptureWheelActivationReason | — |  |
+| `activationReason` | 'immediate' \| 'settled' \| 'focus' | — |  |
 | `boxHeight` | number | — |  |
 | `boxWidth` | number | — | Dimensions of the same viewport bounding rectangle, in CSS pixels. |
 | `focusWithin` | boolean | — |  |
@@ -271,7 +271,7 @@ native text selection or touch gestures.
 
 | Field | Type | Default | Description |
 |------|------|---------|-------------|
-| `activationReason` | CapturePointerActivationReason | — |  |
+| `activationReason` | 'pointer-down' \| 'drag-threshold' | — |  |
 | `boxHeight` | number | — |  |
 | `boxWidth` | number | — | Dimensions of the same viewport bounding rectangle, in CSS pixels. |
 | `deltaX` | number | — | Movement since the previous delivered sample, in viewport CSS pixels. |
@@ -285,13 +285,13 @@ native text selection or touch gestures.
 | `phase` | 'start' \| 'move' \| 'end' \| 'cancel' | — |  |
 | `pointerEvent` | SerializedPointerEvent \| null | — | Null when cancellation comes from lifecycle or configuration changes. |
 | `start` | CapturePointerStart | — |  |
-| `cancelReason?` | CaptureInputCancelReason | — |  |
+| `cancelReason?` | 'pointer-cancel' \| 'lost-capture' \| 'disabled' \| 'disconnected' \| 'blur' \| 'interrupted' | — |  |
 
 ### CapturePanInput
 
 | Field | Type | Default | Description |
 |------|------|---------|-------------|
-| `activationReason` | CapturePointerActivationReason | — |  |
+| `activationReason` | 'pointer-down' \| 'drag-threshold' | — |  |
 | `boxHeight` | number | — |  |
 | `boxWidth` | number | — | Dimensions of the same viewport bounding rectangle, in CSS pixels. |
 | `deltaX` | number | — | Incremental scroll motion in viewport CSS pixels. |
@@ -305,7 +305,7 @@ native text selection or touch gestures.
 | `start` | CapturePointerStart | — |  |
 | `velocityX` | number | — | Scroll velocity in viewport CSS pixels/ms. |
 | `velocityY` | number | — |  |
-| `cancelReason?` | CaptureInputCancelReason | — |  |
+| `cancelReason?` | 'pointer-cancel' \| 'lost-capture' \| 'disabled' \| 'disconnected' \| 'blur' \| 'interrupted' | — |  |
 
 ## Web component
 

package/docs/components/checkbox.md

@@ -163,7 +163,11 @@ function ParentChild() {
 
 ## Accessibility
 
-The wrapper sets `role="checkbox"` and `aria-checked` (`"true"` / `"false"` / `"mixed"`), and derives the accessible name from `label` or `children`. For a label-less checkbox, pass `aria-label`.
+The wrapper sets `role="checkbox"`, and the element keeps `aria-checked`
+(`"true"` / `"false"` / `"mixed"`) in sync. Its light-DOM label supplies the
+accessible name and its hint supplies the accessible description through
+`ElementInternals`; no generated IDs are needed. For a label-less checkbox, pass
+`aria-label`.
 
 Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
 
@@ -174,7 +178,7 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
 | `checked?` | CheckboxValue | — | Controlled checked state. When provided the checkbox is controlled — it renders exactly this and never self-applies; `onStateChange` is a *request* the consumer accepts by updating this prop. Use `defaultChecked` for an uncontrolled checkbox. `'indeterminate'` shows the minus glyph and takes visual precedence; clicking it requests `true`. |
 | `defaultChecked?` | CheckboxValue | false | Initial checked state for an uncontrolled checkbox. Read once; later changes are ignored and the element updates its state after interaction. |
 | `disabled?` | boolean | — | Disable the checkbox (no interaction, dropped from the tab order). |
-| `hint?` | ReactNode | — | Secondary text rendered under the label — explanatory copy, like Input's hint. Not part of the accessible name. |
+| `hint?` | ReactNode | — | Secondary text rendered under the label and exposed as the checkbox's accessible description. Not part of the accessible name. |
 | `label?` | string | — | Visible label — the *value* of the checkbox (clicked along with the box). Convenience for the common single-string case; for richer content (markup, a link, an info icon) use `children`. When both are supplied, `label` renders first. Required unless `children` or `aria-label` is provided (a `role="checkbox"` takes its name from the author, not the markup). |
 | `name?` | string | — | Form field name. Inside a `<form>` the checkbox submits under this name, contributing `value` when checked — like a native checkbox. |
 | `onChange?` | (event) => void | — | Fired *after* the checked state changes — a native `change` event (the post-apply counterpart to `onStateChange`). Not cancelable. For a controlled checkbox this fires once you've updated `checked`. |
@@ -183,14 +187,15 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
 | `round?` | boolean \| number \| string | — | Round the checkbox mark to a circle (`border-radius: 999px` on the box). Pass a `number` (px) or a CSS length string for a rounded-square mark instead. |
 | `size?` | 'small' \| 'medium' \| 'large' | 'medium' | Size variant. small=14px, medium=16px, large=18px box. |
 | `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Color of the **mark**. In the default `all` scope this colors the checked-box fill and unselected box border. A named tone or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone. Named tones track light/dark mode automatically; a custom color keeps its hue + chroma and pins lightness to the fill curve. Set `toneScope="selected"` to tone only the checked mark and leave the empty box neutral. The label + hint stay neutral — recolor them in plain CSS via the theme-aware `--text-N-{tone}` tokens. |
-| `toneScope?` | ToneScope | 'all' | Apply `tone` to every state, or only while checked so the empty box stays neutral. `selected` is useful when a tinted resting border would read as a validation state. |
+| `toneScope?` | 'all' \| 'selected' | 'all' | Apply `tone` to every state, or only while checked so the empty box stays neutral. `selected` is useful when a tinted resting border would read as a validation state. |
 | `value?` | string | "on" | Value submitted with the form when checked — like a native checkbox. |
 
 ## Web Component
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
-The focusable host carries the state. Label and hint are light-DOM children.
+The focusable host carries the state. Label and hint are light-DOM children that
+the element exposes as its accessible name and description.
 
 ```html
 <a-checkbox role="checkbox" tabindex="0" name="updates" default-state="checked">