@codenhub/styles 0.8.0 → 0.9.0

package/dist/theme.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
-@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 none);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-neutral-950:oklch(14.5% 0 none);--color-white:#fff;--font-default:"Segoe UI", system-ui, sans-serif;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:var(--_contrast-border,light-dark(var(--color-neutral-400),var(--color-neutral-700)));--color-border-hover:light-dark(var(--color-neutral-600),var(--color-neutral-500));--color-control-border:var(--color-neutral-500);--color-background:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-foreground:light-dark(var(--color-neutral-100),var(--color-neutral-900));--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-secondary:light-dark(var(--color-neutral-700),var(--color-neutral-400));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}.light,.theme-light,[data-theme=light]{color-scheme:light;color:var(--color-text)}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark;color:var(--color-text)}@media print{:root,.dark,.theme-dark,[data-theme=dark]{color-scheme:light}}@media (prefers-contrast:more){:root,:host{--_contrast-border:light-dark(var(--color-neutral-600),var(--color-neutral-400))}}}@layer base;@layer components{:root{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-fill-max:20%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip-bubble,.tooltip-icon,.badge,.kbd,.code,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:where(.data-table){--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}:where(.tooltip-bubble){--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}}@layer utilities{@layer families{.destructive{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}@media (prefers-contrast:more){.destructive{--intent-border:var(--color-destructive-strong)}}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}@media (prefers-contrast:more){.info{--intent-border:var(--color-info-strong)}}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}@media (prefers-contrast:more){.primary{--intent-border:var(--color-primary-strong)}}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}@media (prefers-contrast:more){.secondary{--intent-border:var(--color-accent-strong)}}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}@media (prefers-contrast:more){.success{--intent-border:var(--color-success-strong)}}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}@media (prefers-contrast:more){.warning{--intent-border:var(--color-warning-strong)}}.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.cut-diagonal{--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0}.cut-diagonal-reverse{--ui-corner-tl:0;--ui-corner-tr:1;--ui-corner-br:0;--ui-corner-bl:1}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%;--_own-fill:0%;--_holds-ink:none}.soft{--ui-fill:12%;--ui-fg-on-fill:0%;--_own-fill:12%;--_holds-ink:none}.solid{--ui-fill:100%;--ui-fg-on-fill:100%;--_own-fill:100%;--_holds-ink: }.floating{--elevation-y:1px;--elevation-blur:3px;--ui-elevation:2}.raised{--elevation-y:1px;--elevation-blur:3px;--ui-elevation:1}.edged{--ui-border:100%;--_own-edge:100%}.edgeless{--ui-border:0%;--_own-edge:0%}.flat{--ui-elevation:0}.lg{--_size-lg: }.sm{--_size-sm: }}}@layer utilities.families{:is(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch).neutral{--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:is(.data-table,.data-table tr).neutral{--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}.neutral.tooltip-bubble{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}}@property --_held-ink{syntax:"<color>";inherits:true;initial-value:#0000}@property --_held-on{syntax:"<percentage>";inherits:true;initial-value:0%}@property --_own-hold{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-fill{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-edge{syntax:"<percentage>";inherits:false;initial-value:100%}@property --ui-elevation{syntax:"*";inherits:false}@property --elevation-y{syntax:"*";inherits:false}@property --elevation-blur{syntax:"*";inherits:false}@property --_size-sm{syntax:"*";inherits:false}@property --_size-lg{syntax:"*";inherits:false}@media (forced-colors:active){*{--ui-border-max:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-line-style:solid;--ui-rule-style:solid;--ui-halo-ink:initial;--ui-surface-image:none;--ui-label-shadow:none}}
+@layer theme{:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 none);--color-neutral-100:oklch(97% 0 none);--color-neutral-200:oklch(92.2% 0 none);--color-neutral-300:oklch(87% 0 none);--color-neutral-400:oklch(70.8% 0 none);--color-neutral-500:oklch(55.6% 0 none);--color-neutral-600:oklch(43.9% 0 none);--color-neutral-700:oklch(37.1% 0 none);--color-neutral-800:oklch(26.9% 0 none);--color-neutral-900:oklch(20.5% 0 none);--color-neutral-950:oklch(14.5% 0 none);--color-white:#fff;--font-default:"Segoe UI", system-ui, sans-serif;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:var(--_contrast-border,light-dark(var(--color-neutral-400),var(--color-neutral-700)));--color-border-hover:light-dark(var(--color-neutral-600),var(--color-neutral-500));--color-control-border:var(--color-neutral-500);--color-background:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-foreground:light-dark(var(--color-neutral-100),var(--color-neutral-900));--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-secondary:light-dark(var(--color-neutral-700),var(--color-neutral-400));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}.light,.theme-light,[data-theme=light]{color-scheme:light;color:var(--color-text)}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark;color:var(--color-text)}@media print{:root,.dark,.theme-dark,[data-theme=dark]{color-scheme:light}}@media (prefers-contrast:more){:root,:host{--_contrast-border:light-dark(var(--color-neutral-600),var(--color-neutral-400))}}}@layer base;@layer components{:root{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-fill-max:20%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip-bubble,.tooltip-icon,.badge,.kbd,.code,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:where(.data-table){--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}:where(.tooltip-bubble){--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}}@layer utilities{@layer families{.destructive{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}@media (prefers-contrast:more){.destructive{--intent-border:var(--color-destructive-strong)}}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}@media (prefers-contrast:more){.info{--intent-border:var(--color-info-strong)}}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}@media (prefers-contrast:more){.primary{--intent-border:var(--color-primary-strong)}}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}@media (prefers-contrast:more){.secondary{--intent-border:var(--color-accent-strong)}}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}@media (prefers-contrast:more){.success{--intent-border:var(--color-success-strong)}}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}@media (prefers-contrast:more){.warning{--intent-border:var(--color-warning-strong)}}.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.cut-diagonal{--ui-corner-tl:1;--ui-corner-tr:0;--ui-corner-br:1;--ui-corner-bl:0}.cut-diagonal-reverse{--ui-corner-tl:0;--ui-corner-tr:1;--ui-corner-br:0;--ui-corner-bl:1}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%;--_own-fill:0%;--_holds-ink:none}.soft{--ui-fill:12%;--ui-fg-on-fill:0%;--_own-fill:12%;--_holds-ink:none}.solid{--ui-fill:100%;--ui-fg-on-fill:100%;--_own-fill:100%;--_holds-ink: }.floating{--_elevation-y:1px;--_elevation-blur:3px;--ui-elevation:2}.raised{--_elevation-y:1px;--_elevation-blur:3px;--ui-elevation:1}.edged{--ui-border:100%;--_own-edge:100%}.edgeless{--ui-border:0%;--_own-edge:0%}.flat{--ui-elevation:0}.lg{--_size-lg: }.sm{--_size-sm: }}}@layer utilities.families{:is(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch).neutral{--intent-border:var(--ui-control-ink,var(--ui-ink,var(--color-control-border)))}:is(.data-table,.data-table tr).neutral{--intent-border:var(--ui-rule-ink,var(--ui-ink,var(--color-border)))}.neutral.tooltip-bubble{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}}@property --_held-ink{syntax:"<color>";inherits:true;initial-value:#0000}@property --_held-on{syntax:"<percentage>";inherits:true;initial-value:0%}@property --_own-hold{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-fill{syntax:"<percentage>";inherits:false;initial-value:0%}@property --_own-edge{syntax:"<percentage>";inherits:false;initial-value:100%}@property --ui-elevation{syntax:"*";inherits:false}@property --_elevation-y{syntax:"*";inherits:false}@property --_elevation-blur{syntax:"*";inherits:false}@property --_size-sm{syntax:"*";inherits:false}@property --_size-lg{syntax:"*";inherits:false}@media (forced-colors:active){*{--ui-border-max:initial;--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-line-style:solid;--ui-rule-style:solid;--ui-halo-ink:initial;--ui-surface-image:none;--ui-label-shadow:none}}

package/docs/changelog/0.8.0.md

@@ -1,6 +1,6 @@
 ---
 title: 0.8.0
-date: 2026-11-10
+date: 2026-11-12
 description: Every class, modifier, and size is a Tailwind utility on /tw, a build command for projects without a bundler, sizes for text fields, a /tw build that emits only the classes you use, smaller compiled stylesheets, and fixes to applied helpers, input groups, focus rings, nested aesthetics, and forced colors.
 ---
 

package/docs/changelog/0.9.0.md

@@ -0,0 +1,40 @@
+---
+title: 0.9.0
+date: 2026-11-12
+description: The build command is chs and builds without Tailwind, twelve component variables a parent can set, and fixes to printing, bare native controls, disabled solo actions, forced colors, sketch knobs, and the licence notice in compiled CSS.
+---
+
+# 0.9.0
+
+The build command is renamed `chs` and no longer runs Tailwind: it trims a stylesheet the package ships, so the package is the whole install. Twelve component variables, such as `--field-gap` and `--table-cell-padding`, are public and take effect when set on any ancestor. The release also fixes printing, bare native controls, disabled solo actions, forced colors, and sketch knobs, and adds the licence notice of the checkbox marks to every compiled file that carries them.
+
+## Added
+
+- **Twelve component variables.** `--tooltip-gap`, `--field-gap`, `--input-group-padding`, `--switch-height`, `--switch-width`, `--divider-color`, `--divider-width`, `--skeleton-base`, `--skeleton-sheen`, `--quote-width`, `--table-cell-padding`, and `--table-hover` join `--input-group-gap` and `--tooltip-linger` as public variables. Each one works on the component or on any element around it, so `.settings { --field-gap: 0.5rem; }` spaces every field in the region. `--table-hover` also works on a `tbody` or a row, for that part of the table only. See [Customizing → Component variables](../usage/customizing.md#component-variables).
+
+## Changed
+
+- **Breaking: the build command is `chs`.** `codenhub-styles build` is gone, with no alias; run `chs build` from a `package.json` script, or `npx @codenhub/styles build` from a shell. Do not type `npx chs`: an unrelated package on npm has that name, and npx would download and run it. See [Without a bundler → Build only the classes you use](../integrating/without-a-bundler.md#build-only-the-classes-you-use).
+- **Breaking: the command builds without Tailwind.** It reads the classes your files name and keeps their rules from a complete stylesheet the package ships in `dist/purge/`, so it needs Node.js 24 or newer and nothing else installed, and its output no longer changes with your Tailwind version. Three things it did through Tailwind are gone. It emits no Tailwind utilities, so `flex` or `mt-4` in your templates adds nothing. Variants are a fixed set of ten: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`, `hover:`, `focus:`, `focus-visible:`, `active:`, and `dark:`. Variants do not stack, so `md:hover:primary` is not found. A project that needs any of those runs Tailwind and imports `/tw`, which still gives all three. See [Without a bundler → What it does not do](../integrating/without-a-bundler.md#what-it-does-not-do).
+- **Breaking: `@codenhub/styles` no longer has a peer dependency on `@tailwindcss/cli`.** Only the command used it. Remove it from your dependencies if nothing else uses it. `tailwindcss` stays an optional peer for `/tw`.
+- **`--input-group-gap` and `--tooltip-linger` work from a parent.** They took effect only when set on the `.input-group` or the `.tooltip` itself. A value set on an ancestor now reaches them.
+- **Sketch knobs reach every position.** `--sketch-radius`, `--sketch-radius-rounded`, `--sketch-radius-surface`, and `--sketch-radius-surface-rounded` set on a `.sketch` region, or on any element inside it, now shape every control and surface that rotates through the four outlines, such as `.btn`, `.ipt`, and `.card`. They skipped one element in four. A component that does not rotate, such as `.skeleton` or a bare control under `/native`, still takes only a knob set on the region. See [Aesthetics → Sketch](../usage/aesthetics.md#sketch).
+- **Small buttons and fields read the theme's line height.** `.btn.sm` and the small text fields took their leading from a variable private to Tailwind, which can change between Tailwind releases. They now read `--text-sm--line-height`. A `leading-*` utility on them still wins.
+- **Internal variables renamed.** The custom properties that switches, tooltips, quotes, tables, and elevation derive internally now start with `--_`, as the other internal ones do, such as `--_tooltip-top` and `--_table-rule`. They were documented as internal. CSS that set one of the old names, such as `--table-rule`, no longer does anything. Use a public variable or a utility instead.
+- **The homepage is the package's page on codenhub.dev.**
+
+## Fixed
+
+- **A tap leaves no hover tint.** On a touch screen a tapped button, interactive card, table row, checkbox, switch, select, or input group kept its hover color until something else was tapped. Hover now applies only where the pointer can hover, as Tailwind's `hover:` variant does.
+- **A bare `<progress>` takes the color it sits in.** Under `/native`, in a filled container, it drew the page's ink over the container's color.
+- **A bare quiet checkbox or radio keeps its checked plate.** Under `/native`, a checked `.ghost` or `.soft` checkbox or radio showed its resting plate, and a mixed one also kept the neutral 20% cap.
+- **A filled quotation prints with its plate.** A `.quote.solid` printed white text on white paper.
+- **A solid solo element prints with its plate.** The `-solo` classes left their fill off paper, as the quotation did.
+- **A solo action disabled by class or data attribute does not press.** The neobrutalism, chunky tile, and cyber solos guarded their press with `:disabled` and `aria-disabled` only. A link or `role="button"` marked `.disabled` or `data-disabled` still sank when clicked.
+- **`@apply progress` and `@apply select` keep their forced colors.** The applied bar's value was repainted as Canvas, and the applied drop-down drew no arrow.
+- **Compiled CSS carries the licence of the checkbox marks.** The marks come from Lucide (ISC, itself from Feather, MIT). Each compiled file that inlines them now carries their copyright and permission notices in a `/*!` comment after Tailwind's banner, and `chs build` keeps it in its output.
+
+## Documentation
+
+- [Customizing → Generated palette](../usage/customizing.md#generated-palette) says the palette's `-edge` values do not follow `prefers-contrast: more`.
+- [Tailwind CSS v4](../integrating/tailwind.md) warns against clearing the `--text-*`, `--font-*`, and `--spacing` themes, which the package reads.

package/docs/changelog/index.md

@@ -6,6 +6,7 @@ group: Changelog
 
 # Changelog
 
+- [0.9.0](0.9.0.md)
 - [0.8.0](0.8.0.md)
 - [0.7.0](0.7.0.md)
 - [0.6.0](0.6.0.md)

package/docs/es/index.md

@@ -1,7 +1,7 @@
 ---
 title: Introducción
 description: Para qué sirve @codenhub/styles, qué cuesta y en qué orden leer esta documentación.
-source: 5f82b6a4d492bdb5ea73406f256d307f775fa1ea
+source: 4226ac998f12fb17bed33172417919586cb6c930
 ---
 
 # @codenhub/styles
@@ -79,7 +79,7 @@ El paquete está por debajo de 1.0 y sigue la [regla del versionado semántico p
 - Una versión menor, como de 0.7.0 a 0.8.0, puede romper la compatibilidad. Puede renombrar o eliminar una clase o un token, o cambiar un valor por defecto. Cada cambio incompatible aparece en **Changed** o **Removed** en la página del [changelog](../changelog/index.md) de esa versión, con lo que debes usar en su lugar.
 - Una versión de parche, como de 0.7.0 a 0.7.1, nunca rompe la compatibilidad.
 
-El rango por defecto de npm para una nueva dependencia, `^0.7.0`, ya acepta solo parches, porque por debajo de 1.0 un rango con caret no pasa a la siguiente versión menor. Lee el changelog antes de subirlo. Cuando enlaces un archivo desde un CDN, pon la versión exacta en la URL; consulta [Sin bundler](./integrating/without-a-bundler.md).
+El rango por defecto de npm para una nueva dependencia, `^0.9.0`, ya acepta solo parches, porque por debajo de 1.0 un rango con caret no pasa a la siguiente versión menor. Lee el changelog antes de subirlo. Cuando enlaces un archivo desde un CDN, pon la versión exacta en la URL; consulta [Sin bundler](./integrating/without-a-bundler.md).
 
 Los cambios incompatibles no se suavizan con alias porque el modelo todavía se está asentando, y mantener cada nombre antiguo junto a su reemplazo haría crecer la superficie en cada versión. Un cambio de nombre o una eliminación suele costar un buscar y reemplazar al actualizar; un valor por defecto que cambia puede requerir que reajustes tu propio CSS.
 

package/docs/es/integrating/tailwind.md

@@ -2,7 +2,7 @@
 title: Tailwind CSS v4
 description: Usar los puntos de entrada de código fuente /tw en un proyecto con Tailwind CSS v4.
 order: 1
-source: a86fe5fa121db14ab917b10fb69e839111ddbc47
+source: 4866b77d4cfb1655499f633fff8bf61dde2aa4bb
 ---
 
 # Tailwind CSS v4
@@ -110,6 +110,7 @@ El bloque deja fuera `neutral`, `emerald`, `amber`, `rose`, `indigo` y `white` a
 
 - **No borres todo el espacio de nombres.** `--color-*: initial` quita también los colores semánticos del paquete, y el build se detiene con un error como `Cannot apply unknown utility class`.
 - **No borres una escala que lee el tema.** Borrar `--color-emerald-*` compila sin error, pero los colores de éxito construidos con ella se pierden.
+- **No borres los espacios de nombres de tipo, fuente o espaciado.** Los componentes aplican las utilidades `text-*` y `font-*` de Tailwind y su función `--spacing()`, así que `--text-*: initial`, `--font-*: initial`, `--spacing: initial` o `--*: initial` detiene la compilación con `Cannot apply unknown utility class` o `The --spacing(…) function requires that the --spacing theme variable exists`. Sobrescribe valores sueltos, como `--text-sm`. Borrar `--radius-*` es seguro.
 
 ## Solución de problemas
 

package/docs/es/integrating/without-a-bundler.md

@@ -2,7 +2,7 @@
 title: Sin bundler
 description: Enlazar las hojas de estilos compiladas desde HTML simple, Rails, Laravel, Django o cualquier aplicación renderizada en el servidor, y el build por línea de comandos.
 order: 6
-source: 6289ea781c99dcda5c027a72fede9e2f1cab8414
+source: ca6e2fe1c1b8c2404b90d9a1bd77b25b7e124f82
 ---
 
 # Sin bundler
@@ -13,8 +13,8 @@ Lo que necesita una herramienta de build es el _nombre_ del import. `@import "@c
 
 Los puntos de entrada `/tw` son código fuente de Tailwind y necesitan un build de Tailwind. `/tw/aesthetics` es la excepción, CSS simple sin nada que Tailwind tenga que procesar, pero sin bundler enlaza en su lugar los archivos compilados de `dist/aesthetics/`, como se muestra abajo. Esta página es para una página que no tiene un build de CSS con Node.js: HTML simple, Rails, Laravel, Django o cualquier aplicación renderizada en el servidor. Hay dos caminos:
 
-1. **Enlazar la hoja de estilos compilada.** Funciona hoy, solo con archivos estáticos. Envías todas las clases, las usen tus páginas o no.
-2. **Generar una hoja de estilos con el comando `build` del paquete.** Escanea tus plantillas y escribe una hoja de estilos con solo las clases que usan. Consulta [Generar solo las clases que usas](#generar-solo-las-clases-que-usas).
+1. **Enlazar la hoja de estilos compilada.** No necesita más que archivos estáticos. Envías todas las clases, las usen tus páginas o no.
+2. **Generar una hoja de estilos con el comando `chs build` del paquete.** Escanea tus plantillas y escribe una hoja de estilos con solo las clases que usan. Consulta [Generar solo las clases que usas](#generar-solo-las-clases-que-usas).
 
 ## Qué archivo enlazar
 
@@ -38,8 +38,8 @@ jsDelivr y unpkg sirven todos los archivos de cada versión publicada en npm, as
 
 ```html
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.8.0/dist/index.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.8.0/dist/aesthetics/pixel.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/index.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codenhub/styles@0.9.0/dist/aesthetics/pixel.css" />
 </head>
 ```
 
@@ -86,7 +86,7 @@ Después enlázala desde el layout, por su ruta dentro de esa carpeta:
 
 Apunta la ruta a `node_modules/@codenhub` y no directamente a `dist/`. Propshaft sirve los archivos por su ruta dentro de cada carpeta de assets, así que añadir `dist/` directamente publicaría un `index.css` suelto que choca con cualquier `index.css` tuyo.
 
-Los archivos que enlazas están en `dist/`, que contiene solo CSS terminado, más un `index.d.ts` vacío para TypeScript. El código fuente de Tailwind vive en `tw/`, fuera de `dist/`, así que un pipeline estático que sirve `dist/` o le añade huellas no encuentra ningún `@import` que no pueda resolver.
+Los archivos que enlazas están en `dist/`, que contiene CSS terminado sin `@import` que resolver, más un `index.d.ts` vacío para TypeScript y el comando `chs build` con los archivos que lee. El código fuente de Tailwind vive en `tw/`, fuera de `dist/`, así que un pipeline estático que sirve `dist/` o le añade huellas no encuentra ningún `@import` que no pueda resolver.
 
 ### Django
 
@@ -104,7 +104,7 @@ STATICFILES_DIRS = [
 <link rel="stylesheet" href="{% static 'codenhub-styles/index.css' %}" />
 ```
 
-Apunta el prefijo a `dist`, no a la carpeta del paquete. `dist/` contiene solo CSS terminado, más un `index.d.ts` vacío para TypeScript que el almacenamiento copia tal cual, así que `collectstatic` también funciona con `ManifestStaticFilesStorage`, que añade una huella a cada archivo y reescribe las referencias que contiene. La carpeta del paquete también contiene el código fuente de Tailwind en `tw/`, cuyas líneas `@import "tailwindcss/..."` ese almacenamiento no puede resolver.
+Apunta el prefijo a `dist`, no a la carpeta del paquete. `dist/` contiene CSS terminado sin `@import` que resolver, más un `index.d.ts` vacío para TypeScript y el comando `chs build` con los archivos que lee, que el almacenamiento copia tal cual, así que `collectstatic` también funciona con `ManifestStaticFilesStorage`, que añade una huella a cada archivo y reescribe las referencias que contiene. La carpeta del paquete también contiene el código fuente de Tailwind en `tw/`, cuyas líneas `@import "tailwindcss/..."` ese almacenamiento no puede resolver.
 
 ### Laravel
 
@@ -112,34 +112,52 @@ Una aplicación Laravel usa Vite por defecto, así que tiene un bundler: importa
 
 ## Generar solo las clases que usas
 
-El paquete trae un comando, `codenhub-styles`, que lo compila por ti. Lee tus plantillas en busca de nombres de clase y escribe una sola hoja de estilos minificada con solo las clases de StyleKit y las utilidades de Tailwind que usan. Una página que usa un botón recibe una pequeña fracción de la hoja de estilos completa; el tamaño exacto depende de las clases que uses, porque cada componente trae las reglas compartidas de las que depende.
+El paquete trae un comando, `chs`, que lee tus plantillas en busca de nombres de clase y escribe una sola hoja de estilos minificada con solo las clases de StyleKit que usan. Una página que usa un botón recibe alrededor de una octava parte de la hoja de estilos completa; el tamaño exacto depende de las clases que uses, porque cada componente trae las reglas compartidas de las que depende.
 
 El comando también sirve con un bundler. Un proyecto cuyo bundler no ejecuta Tailwind, como un build simple con Vite o webpack, puede escribir la hoja de estilos entre sus fuentes, `--output src/stylekit.css`, e importar ese archivo donde importaría `@codenhub/styles`. Un proyecto que usa Tailwind CSS v4 obtiene la misma reducción con el [punto de entrada de código fuente](./tailwind.md) y no necesita el comando.
 
-Necesita Node.js 24 o posterior en la máquina que genera el CSS, sea tu portátil, un job de CI o un paso del despliegue. Compila con Tailwind CSS, que el paquete no instala por ti, así que un proyecto que solo enlaza la hoja de estilos compilada nunca lo descarga. Instala los tres paquetes como dependencias de desarrollo desde la raíz de tu proyecto; npm crea un `package.json` si no tienes uno, y no necesitas configuración de Tailwind:
+Necesita Node.js 24 o posterior en la máquina que genera el CSS, sea tu portátil, un job de CI o un paso del despliegue, y nada más: el paquete es toda la instalación, sin Tailwind y sin configuración. Instálalo como dependencia de desarrollo desde la raíz de tu proyecto; npm crea un `package.json` si no tienes uno:
 
 ```sh
-npm install --save-dev @codenhub/styles @tailwindcss/cli tailwindcss
+npm install --save-dev @codenhub/styles
 ```
 
-La hoja de estilos que escribe el comando es CSS simple, así que los servidores que sirven tu sitio no necesitan ni Node.js ni ninguno de estos paquetes. Ejecútalo desde la raíz de tu proyecto:
+La hoja de estilos que escribe el comando es CSS simple, así que los servidores que sirven tu sitio no necesitan ni Node.js ni el paquete. Añade el build a los scripts de tu `package.json`, donde el comando instalado está en el path con su nombre:
+
+```json
+{
+  "scripts": {
+    "build:css": "chs build --content \"app/views/**/*.erb\" --output public/stylekit.css"
+  }
+}
+```
+
+Después ejecútalo desde la raíz de tu proyecto:
 
 ```sh
-npx codenhub-styles build --content "app/views/**/*.erb" --output public/stylekit.css
+npm run build:css
 ```
 
+Para ejecutarlo una sola vez sin un script, llámalo por el nombre del paquete:
+
+```sh
+npx @codenhub/styles build --content "app/views/**/*.erb" --output public/stylekit.css
+```
+
+No escribas `npx chs`. `chs` es el nombre del comando dentro de este paquete, pero npm también tiene un paquete sin relación llamado `chs`, y `npx chs` ejecuta ese en cualquier carpeta donde este paquete no esté instalado.
+
 Si todo va bien, el comando imprime una línea: la ruta absoluta que escribió y el tamaño del archivo en bytes:
 
 ```text
-/home/you/shop/public/stylekit.css 25782 bytes
+/home/you/shop/public/stylekit.css 24497 bytes
 ```
 
 Enlaza ese archivo desde tu layout como cualquier hoja de estilos estática.
 
 ### Vistas de Rails
 
-```sh
-npx codenhub-styles build --content "app/views/**/*.erb" --content "app/helpers/**/*.rb" --output public/stylekit.css
+```json
+"build:css": "chs build --content \"app/views/**/*.erb\" --content \"app/helpers/**/*.rb\" --output public/stylekit.css"
 ```
 
 ```erb
@@ -149,8 +167,8 @@ npx codenhub-styles build --content "app/views/**/*.erb" --content "app/helpers/
 
 ### Vistas Blade de Laravel
 
-```sh
-npx codenhub-styles build --content "resources/views/**/*.blade.php" --output public/css/stylekit.css
+```json
+"build:css": "chs build --content \"resources/views/**/*.blade.php\" --output public/css/stylekit.css"
 ```
 
 ```blade
@@ -162,8 +180,8 @@ npx codenhub-styles build --content "resources/views/**/*.blade.php" --output pu
 
 Un proyecto Django guarda las plantillas en una carpeta `templates/` del proyecto, en la carpeta `templates/` de cada app, o en ambas. Pasa un `--content` por cada lugar donde estén las tuyas, y deja fuera los que no uses, porque un glob que no coincide con nada hace fallar el build:
 
-```sh
-npx codenhub-styles build --content "templates/**/*.html" --content "shop/templates/**/*.html" --output static/stylekit.css
+```json
+"build:css": "chs build --content \"templates/**/*.html\" --content \"shop/templates/**/*.html\" --output static/stylekit.css"
 ```
 
 ```django
@@ -176,41 +194,53 @@ Escribe la salida en una carpeta incluida en `STATICFILES_DIRS`, aquí `static/`
 ### Opciones
 
 - `--content <glob>`, o `-c <glob>`, indica los archivos en los que buscar nombres de clase. Es obligatorio y se puede repetir: pásalo una vez por glob, y el build lee todos los archivos que coincidan con alguno. Un glob relativo se resuelve respecto a la carpeta desde la que ejecutas el comando, así que ejecútalo desde la raíz de tu proyecto; un glob absoluto se usa tal cual. `**` coincide con cualquier número de carpetas, y `{rb,erb}` con cualquiera de las dos extensiones. Sirve cualquier archivo de texto, tenga la extensión que tenga. Cada glob tiene que coincidir con al menos un archivo, o el build falla y lo nombra, así que una errata no puede publicar una hoja de estilos vacía. Los archivos que excluye tu `.gitignore` se leen igualmente cuando un glob coincide con ellos, y no se lee nada fuera de tus globs.
-- Pon cada glob entre comillas. Sin comillas, tu shell puede expandir el glob a una lista de archivos antes de que el comando lo vea, y solo el primer archivo cuenta como valor de `--content`. Cuando eso deja nombres de archivo sobrantes, el build los rechaza en lugar de leer en silencio menos de lo que querías; cuando el glob coincidió con un solo archivo, el build lee solo ese archivo y nada de lo que tus plantillas añadan más adelante.
+- Pon cada glob entre comillas, con `\"` dentro de un script de `package.json`. Sin comillas, tu shell puede expandir el glob a una lista de archivos antes de que el comando lo vea, y solo el primer archivo cuenta como valor de `--content`. Cuando eso deja nombres de archivo sobrantes, el build los rechaza en lugar de leer en silencio menos de lo que querías; cuando el glob coincidió con un solo archivo, el build lee solo ese archivo y nada de lo que tus plantillas añadan más adelante.
 - `--output <file>`, o `-o <file>`, es la hoja de estilos que se escribe. Es obligatorio. Una ruta relativa se resuelve respecto a la carpeta desde la que ejecutas el comando, las carpetas padre que falten se crean, y un archivo existente se reemplaza.
-- `--aesthetic <name>` añade una de las [estéticas](../usage/aesthetics.md): `neobrutalism`, `glass`, `pixel`, `chunky-tile`, `cyber` o `sketch`. Repítelo para más de una; nombrar una dos veces la incluye una sola vez. Las estéticas se piden explícitamente porque el build no puede saber por tus plantillas cuál quieres, así que cada una se escribe completa cuando la pides, y no se incluye ninguna cuando no lo haces.
+- `--aesthetic <name>` añade una de las [estéticas](../usage/aesthetics.md): `neobrutalism`, `glass`, `pixel`, `chunky-tile`, `cyber` o `sketch`. Repítelo para más de una; nombrar una dos veces la incluye una sola vez. Las estéticas se piden explícitamente porque el build no puede saber por tus plantillas cuál quieres: cada una se añade cuando la pides, sin sus reglas para las clases que tus plantillas no usan, y no se incluye ninguna cuando no lo haces.
 - `--no-minify` escribe en su lugar CSS legible e indentado. Sirve para leer lo que generó el build; en producción sirve el archivo minificado.
 - `--help` imprime el uso, con las estéticas que trae esta versión. `--version` imprime la versión del paquete. Ninguno de los dos genera nada, y ambos terminan con estado 0.
 
-La salida siempre contiene el tema, sus design tokens como propiedades personalizadas de CSS, el reset y las reglas base de las que dependen todos los componentes. Encima van cada clase de StyleKit que usan tus plantillas, con las variantes con las que la combinas, como `primary` o `soft`, y cada utilidad de Tailwind que usan, como `flex` o `mt-4`. La salida se construye a partir de la hoja de estilos completa, no de `/native`, así que no incluye los mapeos sin clases.
+La salida siempre contiene el tema, sus design tokens como propiedades personalizadas de CSS, el reset, las reglas base de las que dependen todos los componentes y las clases que una página recibe en tiempo de ejecución en lugar de desde una plantilla, como `.theme-dark`. Encima va cada clase de StyleKit que usan tus plantillas. La salida se construye a partir de la hoja de estilos completa, no de `/native`, así que no incluye los mapeos sin clases. Un build cuyas plantillas nombran todas las clases escribe la hoja de estilos completa, byte a byte.
 
 ### Cómo se encuentran las clases
 
-El build no ejecuta tus plantillas. Lee como texto simple cada archivo que coincide con tus globs de `--content`, recoge cada palabra que podría ser un nombre de clase y escribe las reglas de las palabras que son clases de StyleKit o utilidades de Tailwind. Tailwind CSS también lee el contenido así.
+El build no ejecuta tus plantillas. Lee como texto simple cada archivo que coincide con tus globs de `--content`, recoge cada palabra que podría ser un nombre de clase y escribe las reglas de las palabras que son clases de StyleKit. Tailwind CSS también lee el contenido así.
 
-Una clase tiene que aparecer en un archivo como una palabra completa. `class="btn primary"`, `class: "btn primary"` y `classes = ["btn", "primary"]` funcionan. Una palabra que solo parece una clase también cuenta: un comentario que dice "card" añade todas las reglas de la tarjeta a la hoja de estilos, lo que agranda el archivo y no cambia nada en la página.
+Una clase tiene que aparecer en un archivo como una palabra completa. `class="btn primary"`, `class: "btn primary"` y `classes = ["btn", "primary"]` funcionan, y también una clase escrita antes o después de dos puntos, como en `class:primary={isPrimary}` de Svelte o en `btn: true` de un hash de Ruby. Una palabra que solo parece una clase también cuenta: un comentario que dice "card" añade todas las reglas de la tarjeta a la hoja de estilos, lo que agranda el archivo y no cambia nada en la página.
 
 Un nombre de clase que tu código arma al renderizar nunca aparece completo en ningún archivo, así que el build no puede encontrarlo. En `class="btn <%= @order.priority %>"`, `btn` se encuentra, pero la intención es lo que contenga `priority` al renderizar; si es `destructive`, el botón se renderiza sin su rojo. Hay dos salidas:
 
 - **Escribe los nombres de clase completos.** Asigna cada valor a un nombre de clase completo en un archivo que el build lea, como `{ "urgent" => "destructive", "normal" => "neutral" }.fetch(@order.priority)` en un helper.
 - **Enuméralos en un archivo de safelist.** Un archivo de texto simple con un nombre de clase por línea, añadido con su propio `--content`, como `--content config/stylekit-classes.txt`. Guárdalo junto al código que arma los nombres de clase, para que quien cambie uno vea el otro.
 
+### Variantes
+
+Una clase de intención, presentación o modificador puede llevar uno de diez prefijos, escritos como en Tailwind: `sm:`, `md:`, `lg:`, `xl:` y `2xl:` la aplican a partir de ese breakpoint, `hover:`, `focus:`, `focus-visible:` y `active:` mientras el elemento está en ese estado, y `dark:` allí donde se aplica el tema oscuro, como describe [Temas → La variante dark:](../usage/theming.md#la-variante-dark). `md:lg` hace grande un botón a partir del breakpoint `md`, y `hover:primary` le da la intención primary al pasar el cursor:
+
+```html
+<button class="btn sm md:lg ghost hover:soft">Save</button>
+```
+
+Eso abarca las intenciones como `primary` y `destructive`, las clases de relleno y de borde como `soft` y `edged`, y los modificadores como `sm`, `lg`, `raised`, `pill`, `tight` y `ruled`. `disabled` no lleva ninguno: es un estado en el que está el elemento, así que escríbelo como atributo o como clase. Las clases de componente como `btn` y `card`, y los helpers de texto y de layout, no llevan prefijo.
+
+Cada prefijo es una copia fija de esas clases, incluida en el paquete, así que la lista recoge los más comunes y no todos los de Tailwind. El comando no apila prefijos, como en `md:hover:primary`, ni ofrece otros, como `print:` o `group-hover:`. Una clase así no recibe estilo, y el elemento se renderiza sin ella.
+
 ### Lo que no hace
 
+- **No incluye utilidades de Tailwind.** `flex`, `mt-4`, `text-red-500` y el resto de Tailwind no son clases de StyleKit, así que el build las deja fuera. Para el layout, los propios [helpers de layout](../usage/content-and-layout.md) de StyleKit están en el build como cualquier otra clase. Un proyecto que quiere las utilidades de Tailwind, sus demás variantes o prefijos apilados ejecuta Tailwind por su cuenta e importa el [punto de entrada de código fuente](./tailwind.md), que da las tres cosas.
 - **No tiene modo watch.** Genera una vez y termina. Vuelve a ejecutarlo después de cambiar una plantilla, desde un script o desde un observador de archivos que ya tengan tu framework o tu editor. Una clase que la hoja de estilos todavía no tiene deja su elemento sin estilo hasta el siguiente build.
-- **No tiene archivo de configuración ni CSS propio.** No puedes añadir tus propios valores de `@theme`, definiciones de `@utility` ni plugins. Para cambiar el aspecto, sobrescribe las propiedades personalizadas en una hoja de estilos tuya cargada después de esta, como describe [Personalización](../usage/customizing.md). Cuando necesites la configuración propia de Tailwind, instala Tailwind CSS e importa el punto de entrada de código fuente desde tu propia entrada de Tailwind, como muestra [Tailwind CSS v4](./tailwind.md).
+- **No tiene archivo de configuración ni CSS propio.** No puedes añadir tus propios valores de `@theme`, definiciones de `@utility` ni plugins. Para cambiar el aspecto, sobrescribe las propiedades personalizadas en una hoja de estilos tuya cargada después de esta, como describe [Personalización](../usage/customizing.md).
 - **No tiene otros comandos.** `build` es el único; `--help` y `--version` son los únicos flags que funcionan sin él.
-- **No trae una versión de Tailwind propia.** Cada build usa los `@tailwindcss/cli` y `tailwindcss` instalados en tu proyecto, dentro del rango `>=4.3.2 <5` que StyleKit admite, así que tu lockfile los fija.
 
 ### En un despliegue
 
 Genera la hoja de estilos antes del paso que recoge o añade huella a tus assets, como `rails assets:precompile`, `php artisan optimize` o `python manage.py collectstatic`. Puedes hacer commit de la salida, de modo que los servidores no necesitan Node.js en absoluto, a cambio de un archivo generado que alguien tiene que acordarse de regenerar; o generarla en el despliegue, de modo que la máquina de build necesita Node.js 24 o posterior.
 
-Fija la versión. Por debajo de 1.0 una versión menor puede renombrar o eliminar una clase, así que el mismo comando puede escribir otra hoja de estilos con una versión más nueva. Haz commit de `package.json` y del lockfile que escribe npm, e instala con `npm ci` en la máquina de build, para que cada build use las versiones que probaste.
+Fija la versión. Por debajo de 1.0 una versión menor puede renombrar o eliminar una clase, así que el mismo comando puede escribir otra hoja de estilos con una versión más nueva. La salida no depende de nada más que de la versión del paquete y de tus plantillas, así que haz commit de `package.json` y del lockfile que escribe npm, e instala con `npm ci` en la máquina de build, para que cada build use la versión que probaste.
 
 ### Cuando el build falla
 
-Cada fallo imprime una línea que empieza por `codenhub-styles:` en la salida de error estándar y termina con estado 1, sin escribir el archivo de salida, así que un script de despliegue se detiene en lugar de publicar una hoja de estilos desactualizada o vacía. La línea dice qué salió mal y qué hacer:
+Cada fallo imprime una línea que empieza por `chs:` en la salida de error estándar y termina con estado 1, sin escribir el archivo de salida, así que un script de despliegue se detiene en lugar de publicar una hoja de estilos desactualizada o vacía. La línea dice qué salió mal y qué hacer:
 
 - **`missing --content` o `missing --output`.** Añade la que nombra. Un `--output` vacío o con solo espacios cuenta como ausente.
 - **`--content "<glob>" matches no file in <folder>`.** Suele ser una errata en la ruta, un comando ejecutado desde una carpeta distinta de la raíz de tu proyecto, o un glob de un lugar que tu proyecto no usa. Generar a partir de nada escribiría una hoja de estilos sin clases de componente, y el sitio perdería sus estilos sin avisar.
@@ -218,10 +248,9 @@ Cada fallo imprime una línea que empieza por `codenhub-styles:` en la salida de
 - **`unknown option "<flag>"`.** Una errata, o una opción de otra herramienta, como `--watch` o `--config`. `--help` enumera las opciones.
 - **`option "<flag>" is missing its value or does not take one`.** Un flag que lleva valor fue lo último de la línea, o se le dio un valor a `--no-minify`, como en `--no-minify=true`.
 - **`unknown aesthetic "<name>"; choose from ...`.** Elige uno de los nombres de la lista. Van en minúsculas y con guion, como `chunky-tile`.
-- **`missing command` o `unknown command "<name>"`.** La primera palabra después de `codenhub-styles` tiene que ser `build`.
-- **`this command needs @tailwindcss/cli and tailwindcss, which are not installed`.** La línea nombra el que falte de los dos y termina con el comando que lo instala. Ejecútalo desde la raíz de tu proyecto.
+- **`missing command` o `unknown command "<name>"`.** La primera palabra después de `chs` tiene que ser `build`.
 - **`this command needs Node.js 24 or newer`.** Actualiza Node.js en la máquina que genera el CSS.
-- **`Tailwind failed to build the stylesheet: <reason>`.** `<reason>` es el propio mensaje de Tailwind. `EISDIR` significa que `--output` nombra una carpeta existente, así que nombra un archivo dentro de ella; `EACCES` o `EPERM` significa que no puedes escribir ahí. Ante cualquier otro motivo, ejecuta el mismo comando con `--no-minify` para descartar el minificador, e informa del mensaje junto con la versión que imprime `--version`.
+- **`cannot write the stylesheet: <reason>`.** `<reason>` es el propio mensaje de Node.js. `EISDIR` significa que `--output` nombra una carpeta existente, así que nombra un archivo dentro de ella; `EACCES` o `EPERM` significa que no puedes escribir ahí.
 
 ## Comprobar que funciona
 

package/docs/es/setup.md

@@ -2,7 +2,7 @@
 title: Configuración inicial
 description: Instala el paquete, elige entre CSS compilado o código fuente de Tailwind y renderiza la estructura base de la página de ajustes.
 order: 1
-source: 23de7d85d2257d30e13330c7a2e185ca0c642010
+source: 01adaabea85fb4d04139c86d9ad693e23c321d04
 ---
 
 # Configuración inicial
@@ -48,7 +48,7 @@ Elige uno:
 - **Código fuente de Tailwind CSS v4** (`@codenhub/styles/tw`). Úsalo cuando tu proyecto ya usa Tailwind v4. Tu build compila el paquete junto con tus propias utilidades, así que obtienes una sola hoja de estilos y la variante `dark:` de Tailwind coincide con el tema del paquete. Necesita Tailwind 4.3.2 o posterior, por debajo de 5.
 - **Sin bundler.** Enlaza el archivo compilado desde `node_modules` o desde un CDN con una etiqueta `<link>`; consulta [Sin bundler](./integrating/without-a-bundler.md).
 
-Para incluir solo las clases que usan tus páginas en un proyecto que no usa Tailwind, con bundler o sin él, el comando `build` del paquete lee tus archivos y escribe una hoja de estilos con solo esas clases, que importas o enlazas en lugar de la compilada; consulta [Generar solo las clases que usas](./integrating/without-a-bundler.md#generar-solo-las-clases-que-usas).
+Para incluir solo las clases que usan tus páginas en un proyecto que no usa Tailwind, con bundler o sin él, el comando `chs build` del paquete lee tus archivos y escribe una hoja de estilos con solo esas clases, que importas o enlazas en lugar de la compilada; consulta [Generar solo las clases que usas](./integrating/without-a-bundler.md#generar-solo-las-clases-que-usas).
 
 Tu framework puede necesitar su propia configuración, como dónde va la hoja de estilos global en Next.js o en Astro. Cada una de estas guías cubre una configuración y después te devuelve aquí:
 
@@ -74,7 +74,8 @@ El orden de los dos imports no importa, porque cada punto de entrada declara las
 
 - **Navegadores:** Chrome 123, Safari 17.5 o Firefox 128 y posteriores. Los colores usan `light-dark()` y `color-scheme` (Firefox 120). `.input-group` lee el estado inválido y deshabilitado de un control anidado con `:has()` (Firefox 121). Las clases de elevación registran una propiedad que no se hereda con `@property` (Firefox 128); sin ella, una clase de elevación también llegaría a los elementos sin clase que contiene.
 - **Herramientas:** un `@import` con un nombre de paquete necesita una herramienta que resuelva imports de CSS desde paquetes a través de su mapa `exports`. Si no tienes una, enlaza el archivo compilado por su ruta o desde un CDN; consulta [Sin bundler](./integrating/without-a-bundler.md). Dos herramientas habituales necesitan un pequeño ajuste, descrito en [Integración → Bundlers que necesitan un empujón](./integrating/index.md#bundlers-que-necesitan-un-empujón): Parcel, y PostCSS con `postcss-import`.
-- **Tailwind:** 4.3.2 o posterior, por debajo de 5, solo para los puntos de entrada de código fuente `/tw` y el comando `build`, que además necesita `@tailwindcss/cli`. Ambos son peer dependencies opcionales, así que los puntos de entrada compilados no los instalan.
+- **Tailwind:** 4.3.2 o posterior, por debajo de 5, solo para los puntos de entrada de código fuente `/tw`. Es una peer dependency opcional, así que ni los puntos de entrada compilados ni el comando `chs build` la instalan.
+- **Node.js:** 24 o posterior en la máquina que ejecuta el comando `chs build`. Las hojas de estilos no lo necesitan, pero el paquete lo declara como su engine, así que Yarn 1, y npm con `engine-strict`, rechazan la instalación en un Node.js anterior.
 - **Tu aplicación:** el paquete no tiene JavaScript. El HTML semántico, ARIA, el comportamiento de teclado, la gestión del foco, la validación y los anuncios son cosa tuya; consulta [Accesibilidad](./accessibility.md).
 
 ## Cuando nada tiene estilo

package/docs/es/usage/aesthetics.md

@@ -2,7 +2,7 @@
 title: Estéticas
 description: Los seis aspectos opcionales, lo que cada uno cambia en un componente, sus controles y sus límites.
 order: 6
-source: adc344b555d4477cdc37adb6abb4cc07620c6486
+source: 52678f7a4588460f836ce64909526d77e73aa4c6
 ---
 
 # Estéticas
@@ -242,7 +242,7 @@ Contornos dibujados a mano: los controles toman esquinas elípticas largas e irr
 
 La línea de tinta de 1px es continua; los checkboxes, los divisores y las líneas divisorias de las tablas son discontinuos. `--ui-line-style: dashed` hace discontinuo cualquier otro componente, y `--ui-rule-style: solid` devuelve un divisor o una tabla a continuo. La sombra dura de 2px es una pequeña señal neutra de profundidad.
 
-`--sketch-radius`, `--sketch-radius-surface` y `--sketch-radius-pill` reemplazan los contornos de control, de superficie y de botón pill. Define uno y todas las posiciones toman ese único contorno. Para dar forma a un solo componente, define en él `--ui-radius` (`--ui-radius-surface` en una superficie).
+`--sketch-radius`, `--sketch-radius-surface` y `--sketch-radius-pill` reemplazan los contornos de control, de superficie y de botón pill. Define uno en la región o en cualquier elemento dentro de ella, y todas las posiciones por debajo toman ese único contorno, en los componentes que rotan: `.btn`, `.ipt`, `.textarea`, `.select`, `.input-group`, `.pre` y `.tooltip-bubble` para el contorno de control, y `.card`, `.panel`, `.alert` y `.data-table` para el de superficie. Cualquier otro elemento que toma un contorno de control o de superficie, como un `.skeleton` o un control sin clase bajo `/native`, toma el contorno que resolvió la propia región, así que un control definido entre la región y ese elemento no lo alcanza; defínelo en la región. Los chips, como `.badge` y `.checkbox`, toman contornos pequeños propios que ningún control cambia. Para dar forma a un solo componente, define en él `--ui-radius` (`--ui-radius-surface` en una superficie).
 
 ```html
 <section class="sketch" style='--font-sketch: "Comic Sans MS", cursive'>

package/docs/es/usage/content-and-layout.md

@@ -2,7 +2,7 @@
 title: Contenido y layout
 description: Consulta de cada helper de layout con su espaciado, la escala tipográfica con sus tamaños, las tarjetas y los paneles con su relleno interior, las tablas, las citas, el código y las teclas.
 order: 10
-source: 19c4b12f34054533e56cbc1edbefff908c48a1e7
+source: 160ae54be3321154eca2f1ce22b843aa6b87314c
 ---
 
 # Contenido y layout
@@ -164,6 +164,8 @@ Una tabla dibuja líneas debajo de su encabezado y encima de su pie. `.ruled` y
 
 `--ui-rule` es el token detrás de las dos clases, así que un contenedor puede poner líneas en todas las tablas que contiene: `style="--ui-rule: 100%"` actúa como `.ruled`, y `0%` como `.ruleless`.
 
+Dos variables y un token ajustan el resto, en la tabla o en cualquier elemento que la rodee. `--table-cell-padding` define el padding de cada celda, así que `--table-cell-padding: 0.375rem 0.75rem` hace una tabla densa. `--table-hover` define el color de una fila del cuerpo bajo el puntero, y `transparent` desactiva el hover. `--ui-rule-ink` define el color de las líneas de una tabla neutra; una tabla con intención las dibuja en el color de la intención. Consulta [Personalización → Variables de componente](./customizing.md#variables-de-componente) para las dos variables y [Tokens de material](./customizing.md#tokens-de-material) para `--ui-rule-ink`.
+
 El marco alrededor de la tabla es aparte: una tabla no tiene borde por defecto, y `.edged` le añade uno. Las tres elecciones no se afectan entre sí, así que `.data-table.ruleless.edged` es una tabla con marco y sin líneas dentro, y `.data-table.ruled` tiene todas las filas separadas y ningún marco.
 
 ### Presentación en las tablas

package/docs/es/usage/customizing.md

@@ -1,8 +1,8 @@
 ---
 title: Personalización
-description: Consulta de los tokens de presentación y de material, los controles de las estéticas, las seis variables públicas de componente, la paleta generada y los helpers para construir tus propios componentes.
+description: Consulta de los tokens de presentación y de material, los controles de las estéticas, las variables públicas de componente, la paleta generada y los helpers para construir tus propios componentes.
 order: 9
-source: 790dec3b1fcf41af4b38aca7c5b8a93135827c1e
+source: bbbce0739bf5070955b0e2a96bdda84090c37195
 ---
 
 # Personalización
@@ -12,7 +12,7 @@ Esta es una página de consulta para cambiar el paquete más allá de sus clases
 - [Tokens de presentación](#tokens-de-presentación): cuánto de una intención muestra un componente.
 - [Tokens de material](#tokens-de-material): de qué está hecho un componente.
 - [Tokens de estética](#tokens-de-estética): los controles que expone cada estética.
-- [Variables de componente](#variables-de-componente): las seis variables que lee un único componente.
+- [Variables de componente](#variables-de-componente): las variables públicas que lee un único componente.
 - [Paleta generada](#paleta-generada): valores de color fijos para el código que no puede cargar el paquete.
 - [Helpers de composición](#helpers-de-composición): las clases con las que construir un componente propio.
 
@@ -196,7 +196,7 @@ Los controles de todas las estéticas llegan de la misma forma: cada control se
 </html>
 ```
 
-Los controles y los tokens de material llegan en direcciones opuestas. Un control se lee una vez, en el elemento con la clase de estética, y el resultado se hereda. Así que define un control en ese elemento o en uno por encima; definido en un elemento dentro de la estética, no cambia nada, porque el valor ya se ha leído.
+Los controles y los tokens de material llegan en direcciones opuestas. Un control se lee una vez, en el elemento con la clase de estética, y el resultado se hereda. Así que define un control en ese elemento o en uno por encima; definido en un elemento dentro de la estética, no cambia nada, porque el valor ya se ha leído. Los contornos de sketch son la excepción: `--sketch-radius` y sus hermanos se leen de nuevo en cada posición, así que funcionan también en cualquier elemento dentro de la región, como describe [Estéticas → Sketch](./aesthetics.md#sketch).
 
 Cada componente lee `--ui-radius`, `--ui-radius-surface` y los demás tokens de material al dibujarse. Funcionan en el elemento en el que se definen y en todo lo que contiene, que es como redondeas una tarjeta de forma distinta a sus vecinas sin tocar el control. Fíjate en cuál lee cada componente: una superficie (`.card`, `.panel`, `.alert`) toma `--ui-radius-surface`, y un control como `.btn` o `.ipt` toma `--ui-radius`. `style="--ui-radius-surface: 0"` deja cuadrada una tarjeta; `--ui-radius` en esa tarjeta deja cuadrados los botones que contiene y la tarjeta sigue redondeada.
 
@@ -229,9 +229,9 @@ Nombres: `--palette-<intent>-<presentation>-<slot>`, donde `<intent>` es una de
 - Un calificador de fondo, `page` o `subtle`, antes del hueco. Solo aparece en el `bg` y el `edge` de `.soft` y `.ghost`, porque un relleno `.solid` cubre su fondo y el color del texto nunca depende de él.
   - Sin calificador es lo que dibujan `.badge` y `.btn`, sobre un fondo transparente: `--palette-success-soft-bg`.
   - `page` es lo que dibuja `.alert`, sobre la página: `--palette-success-soft-page-bg`.
-  - `subtle` es lo que dibujan `.kbd`, `.code` y `.pre`, sobre el propio tono sutil de la intención: `--palette-success-soft-subtle-bg`.
+  - `subtle` es lo que dibujan `.kbd`, `.code`, `.pre` y `.tooltip-icon`, sobre el propio tono sutil de la intención: `--palette-success-soft-subtle-bg`.
 
-  Cada valor se lee del propio componente, así que incluye lo que el componente hace por su cuenta. Un `.alert`, `.kbd`, `.code` o `.pre` neutral conserva un relleno más discreto que un `.badge` neutral, y sus valores `neutral-soft-page` y `neutral-soft-subtle` lo reflejan. `.tooltip-bubble` no coincide con ninguno de los tres: sin intención se rellena con su propio tono de tooltip, y su borde es sólido en vez de atenuado.
+  Cada valor se lee del propio componente, así que incluye lo que el componente hace por su cuenta. Un `.alert`, `.kbd`, `.code` o `.pre` neutral conserva un relleno más discreto que un `.badge` neutral, y sus valores `neutral-soft-page` y `neutral-soft-subtle` lo reflejan. Un `.tooltip-icon.soft` neutral conserva el relleno del badge, así que su placa se aleja más de la página de lo que indica `neutral-soft-subtle`. `.tooltip-bubble` no coincide con ninguno de los tres: sin intención se rellena con su propio tono de tooltip, y su borde es sólido en vez de atenuado.
 
 - Un sufijo `-hover`, solo en `bg` y `edge`, porque el color del texto no cambia con hover: `--palette-success-soft-page-bg-hover`. `.alert`, `.kbd`, `.code` y `.pre` no tienen hover propio, así que sus valores de hover son lo que dibuja el componente cuando le añades `box-hover`.
 
@@ -239,20 +239,34 @@ Los valores claros se definen en `:root`. Los oscuros se aplican bajo `.dark`, `
 
 El archivo no sigue `prefers-color-scheme`. El código que usa la paleta por sí sola ya cambia de tema por su cuenta, así que define una de esas clases o atributos.
 
+Tampoco sigue `prefers-contrast: more`. Con esa preferencia, el paquete dibuja el borde de cada intención en su tono fuerte, así que un valor `-edge` es más tenue que el borde que dibuja el componente. El código que tiene que respetar la preferencia elige un color más fuerte por su cuenta.
+
 Otros tres tokens no tienen intención, presentación, fondo ni hover: `--palette-border`, `--palette-surface` y `--palette-text`, valores fijos de `--color-border`, `--color-surface` y `--color-text`. Son para lo que no tiene color de intención, como el borde de un contenedor, el fondo de un diálogo y su texto.
 
 ## Variables de componente
 
-Seis variables las lee un único componente y son entradas soportadas. Cualquier otra variable que declare un componente, como `--surface-padding`, `--field-gap`, `--switch-*`, `--table-*` o `--quote-*`, es interna y puede cambiar en cualquier versión.
-
-| Variable             | Elemento       | Valor                           | Valor por defecto                                                                      | Efecto                                                                                           | Dónde definirla                                                                                              |
-| -------------------- | -------------- | ------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `--progress-value`   | `.progress`    | Un porcentaje, de `0%` a `100%` | `0%`                                                                                   | Ancho de la parte rellena. No se limita; un valor sin `%` no es válido y se muestra vacío.       | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-color`   | `.progress`    | Un color                        | El color de la intención                                                               | Color de la parte rellena y del brillo de `.active`.                                             | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-surface` | `.progress`    | Un color                        | El color de la intención con el relleno de la presentación: 12% por defecto            | Color del carril.                                                                                | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--progress-edge`    | `.progress`    | Un color                        | El color de borde de la intención con el borde de la presentación: ninguno por defecto | Color del borde del carril. Solo se ve donde el carril tiene grosor de borde, como con `.edged`. | En la barra o en cualquier elemento que la rodee.                                                            |
-| `--input-group-gap`  | `.input-group` | Una longitud                    | `0.5rem`                                                                               | Espacio entre el control y su icono o texto.                                                     | En el propio `.input-group`. El grupo declara el valor por defecto, así que un valor en un padre se ignora.  |
-| `--tooltip-linger`   | `.tooltip`     | Un tiempo                       | `300ms`                                                                                | Cuánto tiempo se queda la burbuja después de que el puntero sale del disparador.                 | En el propio `.tooltip`. El contenedor declara el valor por defecto, así que un valor en un padre se ignora. |
+Dieciocho variables las lee un único componente y son entradas soportadas. Un componente lee cada una donde se dibuja, así que un valor definido en el componente o en cualquier elemento que lo rodee le llega, y gana el valor más cercano: define `--switch-width` en un formulario y todos los switches que contiene lo toman. Cualquier otra variable que declare un componente, como `--surface-padding` o cualquier nombre que empiece por `--_`, es interna y puede cambiar en cualquier versión.
+
+| Variable                | Elemento                      | Valor                           | Valor por defecto                                                                      | Efecto                                                                                                                              |
+| ----------------------- | ----------------------------- | ------------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `--progress-value`      | `.progress`                   | Un porcentaje, de `0%` a `100%` | `0%`                                                                                   | Ancho de la parte rellena. No se limita; un valor sin `%` no es válido y se muestra vacío.                                          |
+| `--progress-color`      | `.progress`                   | Un color                        | El color de la intención                                                               | Color de la parte rellena y del brillo de `.active`.                                                                                |
+| `--progress-surface`    | `.progress`                   | Un color                        | El color de la intención con el relleno de la presentación: 12% por defecto            | Color del carril.                                                                                                                   |
+| `--progress-edge`       | `.progress`                   | Un color                        | El color de borde de la intención con el borde de la presentación: ninguno por defecto | Color del borde del carril. Solo se ve donde el carril tiene grosor de borde, como con `.edged`.                                    |
+| `--input-group-gap`     | `.input-group`                | Una longitud                    | `0.5rem`                                                                               | Espacio entre el control y su icono o texto.                                                                                        |
+| `--input-group-padding` | `.input-group`                | Una longitud                    | `0.75rem`; `0.625rem` con `.sm` y `1rem` con `.lg`                                     | Espacio entre el borde del grupo y su contenido, a ambos lados. Un valor que definas reemplaza también los pasos de `.sm` y `.lg`.  |
+| `--field-gap`           | `.field`                      | Una longitud                    | `0.35rem`                                                                              | Espacio entre la etiqueta, el control y la pista de un campo.                                                                       |
+| `--switch-width`        | `.switch`                     | Una longitud                    | `2.5rem`                                                                               | Ancho del carril. La perilla conserva su tamaño y recorre más distancia.                                                            |
+| `--switch-height`       | `.switch`                     | Una longitud                    | `1.25rem`                                                                              | Alto del carril. La perilla crece con él.                                                                                           |
+| `--tooltip-gap`         | `.tooltip`                    | Una longitud                    | `0.5rem`                                                                               | Espacio entre el disparador y la burbuja.                                                                                           |
+| `--tooltip-linger`      | `.tooltip`, `.tooltip-bubble` | Un tiempo                       | `300ms`                                                                                | Cuánto tiempo se queda la burbuja después de que el puntero sale del disparador.                                                    |
+| `--divider-color`       | `.divider`                    | Un color                        | El color de la intención                                                               | Color de la línea. Gana sobre una clase de intención en el divisor.                                                                 |
+| `--divider-width`       | `.divider`                    | Una longitud                    | El grosor de borde: `1px` por defecto                                                  | Grosor de la línea.                                                                                                                 |
+| `--skeleton-base`       | `.skeleton`                   | Un color                        | Un tinte tenue del color de la intención                                               | Color sobre el que descansa el placeholder.                                                                                         |
+| `--skeleton-sheen`      | `.skeleton`                   | Un color                        | Un tinte más intenso del color de la intención                                         | Color del brillo que lo recorre.                                                                                                    |
+| `--quote-width`         | `.quote`                      | Una longitud                    | El doble del grosor de borde más `1px`: `3px` por defecto                              | Grosor de la barra en el borde inicial de la cita.                                                                                  |
+| `--table-cell-padding`  | `.data-table`                 | Un valor de `padding`           | `0.75rem 1rem`                                                                         | Padding de cada celda de la cabecera, el cuerpo y el pie. Una utilidad de padding en una celda sigue ganando.                       |
+| `--table-hover`         | `.data-table`                 | Un color                        | Un paso del 12% hacia el color de hover de la intención                                | Fondo de una fila del cuerpo bajo el puntero. `transparent` lo desactiva. Definido en un `tbody` o en una fila, se aplica solo ahí. |
 
 ```html
 <div class="progress" role="meter" aria-label="Storage used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" style="--progress-value: 92%; --progress-color: var(--color-warning)"></div>

package/docs/es/usage/forms.md

@@ -2,7 +2,7 @@
 title: Formularios
 description: Campos con etiqueta, pistas y errores, iconos y prefijos fijos, selects y toggles de checkbox, radio y switch.
 order: 2
-source: 00e6a57cfd62f524fde5a550af721786edd7a5dd
+source: 6f92be07a240da16dfa5dc835b36a6981985bea9
 ---
 
 # Formularios
@@ -123,7 +123,7 @@ La dirección del perfil siempre empieza con el mismo host, así que es un prefi
 </div>
 ```
 
-La separación entre el control y su adorno es `--input-group-gap`, 0.5rem por defecto. Eso le va bien a un icono, pero un texto que debe leerse como parte del valor parece roto con un espacio detrás, así que el ejemplo la pone a `0`. Defínela en el propio `.input-group`: el grupo declara su propio valor por defecto, así que un valor definido en un elemento padre no tiene efecto. Es una de las seis [variables públicas de componente](./customizing.md#variables-de-componente).
+La separación entre el control y su adorno es `--input-group-gap`, 0.5rem por defecto. Eso le va bien a un icono, pero un texto que debe leerse como parte del valor parece roto con un espacio detrás, así que el ejemplo la pone a `0`. Defínela en el grupo, o una sola vez en un formulario para todos los grupos que contiene. Es una de las [variables públicas de componente](./customizing.md#variables-de-componente).
 
 Una búsqueda de miembros, con un icono al principio (las clases `ic-lucide-*` necesitan `@codenhub/icons` cargado; consulta [Botones → Cargar los iconos](./buttons.md#cargar-los-iconos)):