@khipu/design-system 0.2.0-alpha.138 → 0.2.0-alpha.139

package/dist/beercss/khipu-beercss.css

@@ -13,7 +13,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-07-27T20:34:20.864Z
+ * Generated: 2026-08-03T18:41:00.351Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -827,6 +827,14 @@ body.dark,
     --kds-qr-avatar-radius: 10px;                         /* Avatar border radius */
     --kds-qr-badge-bg: var(--kds-color-primary-main);     /* Badge background */
     --kds-qr-badge-text: #FFFFFF;                         /* Badge text color */
+
+    /* Highlighted Field */
+    --kds-field-highlight-bg: var(--kds-color-info-soft); /* Header band surface */
+    --kds-field-highlight-border: rgba(2, 136, 209, 0.5); /* Dashed accent border (info @ 50%) */
+    --kds-field-highlight-label: var(--kds-color-info-dark);  /* Eyebrow label */
+    /* Doubles as the band's own padding, so its text lines up with the fields */
+    --kds-field-highlight-padding: var(--kds-spacing-2);
+    --kds-field-highlight-radius: var(--kds-radius-card);
 }
 
 /* ========================================
@@ -858,6 +866,12 @@ body.dark,
     --kds-qr-avatar-bg: var(--kds-color-background-elevated);
     --kds-qr-avatar-border: rgba(227, 181, 255, 0.3);
     --kds-qr-badge-text: var(--kds-color-primary-contrast);  /* dark text on the lavender badge */
+
+    /* Highlighted field — info-soft still resolves to a near-white band on
+       dark, so mirror it as translucent info over the dark background. */
+    --kds-field-highlight-bg: rgba(2, 136, 209, 0.12);
+    --kds-field-highlight-border: rgba(125, 211, 252, 0.45);
+    --kds-field-highlight-label: #7DD3FC;                    /* light info, readable on dark */
 }
 
 /* ========================================
@@ -6764,6 +6778,66 @@ button.kds-fab:active:not(:disabled) {
 }
 
 
+/* ========================================
+   17 - HIGHLIGHTED FIELD (.kds-field-highlight)
+   Calls out an optional or conditional block of
+   fields inside a form. The colour lives in a
+   header band, never behind the fields: BeerCSS
+   floats the label ONTO the field outline (it cuts
+   the input with clip-path and redraws that
+   stretch of border in label::after), so anything
+   painted behind a field shows through the notch,
+   right under the label. Keeping the fields on the
+   page surface means they render exactly as they
+   do anywhere else in the form, with no override.
+   ======================================== */
+
+.kds-field-highlight {
+    padding-inline: var(--kds-field-highlight-padding);
+    padding-block-end: var(--kds-field-highlight-padding);
+    border: var(--kds-border-width-sm) dashed var(--kds-field-highlight-border);
+    border-radius: var(--kds-field-highlight-radius);
+}
+
+/* Optional — omit it and the fields sit alone in the box. Breaks out to the box
+   edges so it reads as a header band, then takes the box's own inset back as
+   padding: the eyebrow ends up flush with the fields below, and the band's
+   horizontal padding matches the fields' own. */
+.kds-field-highlight-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kds-spacing-1);
+    margin-inline: calc(-1 * var(--kds-field-highlight-padding));
+    margin-block-end: var(--kds-field-highlight-padding);
+    padding-block: var(--kds-spacing-1-25);
+    padding-inline: var(--kds-field-highlight-padding);
+    background: var(--kds-field-highlight-bg);
+    border-start-start-radius: calc(
+        var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
+    );
+    border-start-end-radius: calc(
+        var(--kds-field-highlight-radius) - var(--kds-border-width-sm)
+    );
+}
+
+.kds-field-highlight-eyebrow {
+    font-family: var(--kds-font-family-primary);
+    font-size: var(--kds-font-size-xs);
+    font-weight: var(--kds-font-weight-semibold);
+    letter-spacing: var(--kds-letter-spacing-widest);
+    line-height: 1.4;
+    text-transform: uppercase;
+    color: var(--kds-field-highlight-label);
+}
+
+/* The header already supplies the gap — the first field must not add its own */
+.kds-field-highlight > .kds-field-highlight-header + .kds-field-group,
+.kds-field-highlight > .kds-field-group:first-child {
+    margin-block-start: 0;
+}
+
+
 /* ========================================
    PAYMENT FLOW — DOMAIN COMPONENTS
    Invoice header, KV grid, dividers,