@khipu/design-system 0.3.5-alpha.10 → 0.3.5-alpha.12

package/dist/beercss/khipu-beercss.scoped.css

@@ -15,7 +15,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-08-14T20:37:28.660Z
+ * Generated: 2026-08-17T17:59:36.196Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -3282,12 +3282,32 @@
     cursor: pointer;
 }
 
-/* Checked state */
+/* Checked state.
+   accent-color aplica al input nativo, que BeerCSS deja con opacity 0: no se ve.
+   Se mantiene igual por si algun consumidor no usa el markup de BeerCSS. */
 .kds-theme-root label.checkbox input[type="checkbox"]:checked,
 .kds-theme-root label.radio input[type="radio"]:checked {
     accent-color: var(--kds-color-accent, var(--primary));
 }
 
+/* El control que SI se ve lo dibuja BeerCSS como una ligadura de Material Symbols en
+   `> span::before`, coloreada con var(--primary). Estas dos reglas reproducen sus
+   selectores para que ese pseudo-elemento siga al rol accent.
+
+   Misma especificidad que el original y sin !important: este archivo va ultimo en el
+   bundle, asi que gana por orden. El fallback deja el valor anterior intacto cuando la
+   marca no define accent, que es el caso de todo consumidor actual.
+
+   No se toca `.switch`: es un control de encendido/apagado, no de seleccion, y el
+   contrato de marca no lo incluye. */
+.kds-theme-root :is(.checkbox, .radio) > span::before {
+    color: var(--kds-color-accent, var(--primary));
+}
+
+.kds-theme-root :is(.checkbox, .radio) > input:checked + span::before, .kds-theme-root :is(.checkbox, .radio).icon > input:checked + span > i {
+    color: var(--kds-color-accent, var(--primary));
+}
+
 /* Disabled state */
 .kds-theme-root label.checkbox input[type="checkbox"]:disabled,
 .kds-theme-root label.radio input[type="radio"]:disabled {