@juspay/svelte-ui-components 4.27.6 → 4.28.0

package/dist/Button/Button.svelte

@@ -140,19 +140,19 @@
 
   .variant-secondary {
     --_btn-color: transparent;
-    --_btn-text-color: #3a4550;
-    --_btn-border: 1px solid #cbd5e1;
-    --_btn-hover-color: #f1f5f9;
-    --_btn-hover-text-color: #3a4550;
-    --_btn-hover-border: 1px solid #cbd5e1;
+    --_btn-text-color: var(--button-secondary-text-color, #3a4550);
+    --_btn-border: 1px solid var(--button-secondary-border-color, #cbd5e1);
+    --_btn-hover-color: var(--button-secondary-hover-background, #f1f5f9);
+    --_btn-hover-text-color: var(--button-secondary-text-color, #3a4550);
+    --_btn-hover-border: 1px solid var(--button-secondary-border-color, #cbd5e1);
   }
 
   .variant-ghost {
     --_btn-color: transparent;
-    --_btn-text-color: #3a4550;
+    --_btn-text-color: var(--button-ghost-text-color, #3a4550);
     --_btn-border: none;
-    --_btn-hover-color: #f1f5f9;
-    --_btn-hover-text-color: #3a4550;
+    --_btn-hover-color: var(--button-ghost-hover-background, #f1f5f9);
+    --_btn-hover-text-color: var(--button-ghost-text-color, #3a4550);
     --_btn-hover-border: none;
   }
 
@@ -224,7 +224,10 @@
        would reset a consumer's own background-image/position/size layers
        whenever the hook is unset. Gradients go here; solids stay on --button-color. */
     background-image: var(--button-background, none);
-    color: var(--button-text-color, var(--_btn-text-color, white));
+    color: var(
+      --button-text-color,
+      var(--_btn-text-color, var(--button-neutral-text-color, white))
+    );
     height: var(--button-height, fit-content);
     padding: var(--button-padding, var(--_btn-padding, 16px));
     margin: var(--button-margin);
@@ -256,8 +259,8 @@
     cursor: var(--disabled-cursor, not-allowed);
     opacity: var(--disabled-opacity, 0.4);
     color: var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));
-    font-size: var(--disabled-font-size);
-    font-weight: var(--disabled-font-weight);
+    font-size: var(--disabled-font-size, inherit);
+    font-weight: var(--disabled-font-weight, inherit);
     text-decoration: var(--button-disabled-text-decoration, var(--button-text-decoration, none));
     /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */
     border: var(--disabled-border, var(--button-border, var(--_btn-border, none)));
@@ -342,4 +345,46 @@
       width: 100%;
     }
   }
+
+  /* This bar is not indefinite like a spinner -- its width IS the meaning:
+     "how much of `--button-progress-loader-duration` has elapsed", and
+     `showProgressBar` keeps the button disabled for that whole span. A bare
+     `animation: none` would freeze it at the base rule above (`width: 100%`),
+     showing a FULL, "finished" bar for up to 8s while the button is actually
+     still counting down and still disabled -- a frame that means something
+     else is worse than the motion it removed. Freezing at 0% instead would
+     lie the other way once the real duration elapses and the bar should read
+     complete. Neither static width is honest for the whole span, so motion is
+     thinned rather than removed: `steps()` swaps the continuous ease for
+     discrete jumps that hold the PRIOR interval's value until each jump (the
+     `jump-end` default), so the displayed width can only ever under-report
+     elapsed time -- never claim to be further along than it really is -- while
+     still losing the smooth per-frame slide prefers-reduced-motion targets.
+     The step count is a LITERAL, deliberately not a token. `steps()` is invalid
+     for a count below 1, and an invalid value does not fall back to a safer
+     stepped default -- the whole declaration is dropped and the property takes
+     the base rule's `ease`, restoring exactly the continuous slide this block
+     exists to remove. A consumer passing `0` to "just freeze it" would silently
+     switch the guard off for every user who asked for reduced motion. A guard
+     that fails OPEN, quietly, is worse than no guard, and one tunable is not
+     worth that. 
+     This block lives in the component's own <style> because that is the only
+     stylesheet that reaches inside the shadow root a custom-element consumer
+     gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .button-progress-bar {
+      animation-timing-function: steps(5, jump-end);
+    }
+
+    /* The loader is not the only motion here. `--button-transition` defaults to
+       `none`, so this rule does nothing until a consumer opts in -- and the
+       documented way to opt in is exactly a hover/press animation, which is
+       what a user asking for reduced motion is asking not to have. The sweep
+       that covered every transition in ThemeSwitcher stopped at the one
+       animation the brief named in this file. */
+    .button-el,
+    .button-container {
+      transition: none;
+    }
+  }
 </style>

package/dist/Calendar/Calendar.svelte

@@ -148,6 +148,21 @@
     return days;
   });
 
+  // A calendar grid is one tab stop, the same roving-tabindex pattern Tabs uses: the
+  // day being actively navigated while inside the grid, else the selected day, else
+  // today if it's in view and enabled, else the first enabled day -- so a month with
+  // no selection, or whose selection has scrolled out of view, is still reachable by
+  // Tab. A fully disabled month in view resolves to null, and the grid container
+  // becomes the fallback tab stop so the calendar can still be tabbed to.
+  const tabStopDay: number | null = $derived(
+    focusedDay ??
+      calendarDays.find((d) => d.isCurrentMonth && (d.isSelected || d.isRangeStart || d.isRangeEnd))
+        ?.day ??
+      calendarDays.find((d) => d.isCurrentMonth && d.isToday && !d.isDisabled)?.day ??
+      calendarDays.find((d) => d.isCurrentMonth && !d.isDisabled)?.day ??
+      null
+  );
+
   function normalizeDate(d: Date): Date {
     const n = new SvelteDate(d);
     n.setHours(0, 0, 0, 0);
@@ -222,79 +237,79 @@
     }
   }
 
-  function daysInMonth(year: number, month: number): number {
-    return new SvelteDate(year, month + 1, 0).getDate();
+  function dateAtDay(year: number, month: number, day: number): Date {
+    const date = new SvelteDate(year, month, day);
+    date.setHours(0, 0, 0, 0);
+    return date;
+  }
+
+  // disabledDates can be a predicate that disables every day it's asked about, so the
+  // walk is capped rather than open-ended -- ~10 years of daily steps is far past any
+  // realistic disabled range but still guarantees the keyboard handler terminates
+  // instead of hanging when a whole month (or more) is disabled.
+  const MAX_DAY_SKIP = 3660;
+
+  function findEnabledDate(from: Date, stepDays: number): Date | null {
+    const candidate = new SvelteDate(from);
+    for (let i = 0; i < MAX_DAY_SKIP; i++) {
+      candidate.setDate(candidate.getDate() + stepDays);
+      candidate.setHours(0, 0, 0, 0);
+      if (!isDateDisabled(candidate)) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+
+  // Moves the roving tab stop to `date`, crossing into a different displayed month
+  // (by any number of months, since findEnabledDate can skip past several) when the
+  // target lands outside the currently visible one.
+  function moveFocusTo(date: Date): void {
+    const changesMonth =
+      date.getFullYear() !== displayDate.getFullYear() ||
+      date.getMonth() !== displayDate.getMonth();
+    if (changesMonth) {
+      displayDate.setFullYear(date.getFullYear(), date.getMonth(), 1);
+      onmonthchange?.({ year: displayDate.getFullYear(), month: displayDate.getMonth() });
+    }
+    focusedDay = date.getDate();
+    focusDayCell();
   }
 
   function handleKeyDown(event: KeyboardEvent): void {
     const year = displayDate.getFullYear();
     const month = displayDate.getMonth();
-    const totalDays = daysInMonth(year, month);
-
-    if (focusedDay === null) {
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-        event.preventDefault();
-        focusedDay = 1;
-        focusDayCell();
-        return;
-      }
-    }
 
     switch (event.key) {
       case 'ArrowRight':
-        event.preventDefault();
-        if (focusedDay !== null && focusedDay < totalDays) {
-          focusedDay++;
-        } else if (focusedDay === totalDays) {
-          navigateMonth(1);
-          focusedDay = 1;
-        }
-        focusDayCell();
-        break;
       case 'ArrowLeft':
-        event.preventDefault();
-        if (focusedDay !== null && focusedDay > 1) {
-          focusedDay--;
-        } else if (focusedDay === 1) {
-          navigateMonth(-1);
-          focusedDay = daysInMonth(displayDate.getFullYear(), displayDate.getMonth());
-        }
-        focusDayCell();
-        break;
       case 'ArrowDown':
+      case 'ArrowUp': {
         event.preventDefault();
-        if (focusedDay !== null) {
-          if (focusedDay + 7 <= totalDays) {
-            focusedDay += 7;
-          } else {
-            const overflow = focusedDay + 7 - totalDays;
-            navigateMonth(1);
-            focusedDay = overflow;
-          }
+        // Nothing is focusable in the grid (a fully disabled month with no
+        // selection or today in view) -- there's nowhere to move from.
+        if (tabStopDay === null) {
+          break;
         }
-        focusDayCell();
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        if (focusedDay !== null) {
-          if (focusedDay - 7 >= 1) {
-            focusedDay -= 7;
-          } else {
-            const currentDay = focusedDay;
-            const prevTotal = daysInMonth(year, month - 1);
-            navigateMonth(-1);
-            focusedDay = prevTotal + (currentDay - 7);
-          }
+        const stepDays =
+          event.key === 'ArrowRight'
+            ? 1
+            : event.key === 'ArrowLeft'
+              ? -1
+              : event.key === 'ArrowDown'
+                ? 7
+                : -7;
+        const target = findEnabledDate(dateAtDay(year, month, tabStopDay), stepDays);
+        if (target !== null) {
+          moveFocusTo(target);
         }
-        focusDayCell();
         break;
+      }
       case 'Enter':
       case ' ':
         event.preventDefault();
-        if (focusedDay !== null) {
-          const date = new SvelteDate(year, month, focusedDay);
-          date.setHours(0, 0, 0, 0);
-          selectDate(date);
+        if (tabStopDay !== null) {
+          selectDate(dateAtDay(year, month, tabStopDay));
         }
         break;
     }
@@ -338,7 +353,13 @@
     {/each}
   </div>
 
-  <div class="grid" bind:this={gridRef} tabindex="0" role="grid" onkeydown={handleKeyDown}>
+  <div
+    class="grid"
+    bind:this={gridRef}
+    tabindex={tabStopDay === null ? 0 : -1}
+    role="grid"
+    onkeydown={handleKeyDown}
+  >
     {#each calendarDays as dayInfo (dayInfo.date.getTime())}
       {#if dayInfo.isCurrentMonth}
         <button
@@ -352,7 +373,7 @@
           class:disabled={dayInfo.isDisabled}
           data-day={dayInfo.day}
           disabled={dayInfo.isDisabled}
-          tabindex={focusedDay === dayInfo.day ? 0 : -1}
+          tabindex={tabStopDay === dayInfo.day ? 0 : -1}
           aria-label={dayInfo.date.toLocaleDateString(locale)}
           onclick={() => selectDate(dayInfo.date)}
         >
@@ -422,7 +443,7 @@
   .day-name {
     font-size: var(--calendar-day-name-font-size, 12px);
     font-weight: var(--calendar-day-name-font-weight, 600);
-    color: var(--calendar-day-name-color, #999999);
+    color: var(--calendar-day-name-color, #595959);
     padding: var(--calendar-day-name-padding, 4px 0);
   }
 
@@ -490,13 +511,19 @@
     border-radius: 0;
   }
 
+  /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --
+     disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own
+     disabledDates run (10th-15th) is information the user must be able to read,
+     not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere
+     for "must stay perceivable" content, while staying well short of the 4.5:1
+     enabled-text weight so disabled still reads as visually recessive. */
   .disabled {
-    color: var(--calendar-disabled-color, #cccccc);
+    color: var(--calendar-disabled-color, #949494);
     cursor: var(--calendar-disabled-cursor, not-allowed);
   }
 
   .outside-month {
-    color: var(--calendar-outside-month-color, #cccccc);
+    color: var(--calendar-outside-month-color, #6b7280);
     cursor: default;
   }
 </style>

package/dist/Card/Card.svelte

@@ -231,7 +231,7 @@
   .card-description {
     font-size: var(--card-description-font-size, 14px);
     color: var(--card-description-color, inherit);
-    opacity: var(--card-description-opacity, 0.6);
+    opacity: var(--card-description-opacity, 0.8);
     margin-top: var(--card-description-margin-top, 4px);
   }
 

package/dist/Carousel/Carousel.svelte

@@ -230,7 +230,8 @@
   .slidesDiv {
     display: flex;
     transform: translateX(0);
-    transition: transform 0.5s ease-in-out;
+    transition: transform var(--carousel-track-transition-duration, var(--motion-duration, 0.5s))
+      var(--carousel-track-transition-easing, var(--motion-easing, ease-in-out));
   }
   .dots-wrapper {
     gap: var(--dot-gap, 10px);
@@ -244,7 +245,8 @@
     border-radius: 50%;
     background: var(--carousel-dot-color, #c4c4c4);
     cursor: pointer;
-    transition: 0.3s ease;
+    transition: all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
+      var(--carousel-dot-transition-easing, var(--motion-easing, ease));
   }
 
   .active-dot {
@@ -253,7 +255,8 @@
     border-radius: 50%;
     cursor: pointer;
     background: var(--carousel-dot-active-color, #000000);
-    transition: 0.3s ease;
+    transition: all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))
+      var(--carousel-dot-transition-easing, var(--motion-easing, ease));
   }
 
   .dot:focus-visible,

package/dist/ChatComposer/ChatComposer.svelte

@@ -10,6 +10,7 @@
   import type { ChatComposerProperties } from './properties';
   import { resolveControlDisabled } from './controlDisabled';
   import { shouldApplyClear } from './submitResult';
+  import { normalizeDictationState } from './dictationState';
 
   let {
     value = $bindable(''),
@@ -51,12 +52,15 @@
     actionIcon,
     actionLabel = 'Voice conversation',
     leading,
+    statusText,
+    statusTestId,
     onsubmit,
     oninput,
     onkeydown,
     onpaste,
     onstop,
     onvoice,
+    oncanceldictation,
     onattach,
     onattachclick,
     onaction,
@@ -84,7 +88,14 @@
   // unset, so a caller who never passes the new props keeps the original
   // single-`disabled`-gates-everything behaviour exactly.
   let resolvedTextDisabled = $derived(resolveControlDisabled(textDisabled, disabled));
-  let resolvedVoiceDisabled = $derived(resolveControlDisabled(voiceDisabled, disabled));
+  // 'busy' (transcribing) is not cosmetic -- the control must not accept
+  // a new press, so busy forces the voice button off regardless of what the
+  // caller passed for `voiceDisabled`/`disabled`, the same way `disabled`
+  // itself is not something a specific flag can override back on.
+  let dictationState = $derived(normalizeDictationState(recording));
+  let resolvedVoiceDisabled = $derived(
+    resolveControlDisabled(voiceDisabled, disabled) || dictationState === 'busy'
+  );
   let resolvedSendDisabled = $derived(resolveControlDisabled(sendDisabled, disabled));
 
   let canSend = $derived(
@@ -131,6 +142,13 @@
       event.preventDefault();
       submit();
     }
+    // Escape cancels dictation when recording, and only then -- not
+    // while idle (nothing to cancel) and not while busy (transcribing is
+    // already past the point Escape can interrupt).
+    if (event.key === 'Escape' && dictationState === 'recording') {
+      event.preventDefault();
+      oncanceldictation?.();
+    }
     onkeydown?.(event);
   }
 
@@ -167,6 +185,13 @@
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
+  {#if typeof statusText === 'string'}
+    <!-- Generic region, role and politeness only -- the sentence is
+         whatever the caller passed in `statusText`, never hardcoded here. -->
+    <div class="sr-only" role="status" aria-live="polite" data-pw={statusTestId ?? null}>
+      {statusText}
+    </div>
+  {/if}
   {#if typeof attachmentsPreview === 'function'}
     {@render attachmentsPreview()}
   {:else if hasRichAttachments}
@@ -250,7 +275,11 @@
     ></textarea>
 
     {#if showVoice}
-      <div class="control voice" class:recording>
+      <div
+        class="control voice"
+        class:recording={dictationState === 'recording'}
+        class:busy={dictationState === 'busy'}
+      >
         <Button
           onclick={() => onvoice?.()}
           disabled={resolvedVoiceDisabled}
@@ -278,7 +307,7 @@
           {/if}
         </Button>
       </div>
-    {:else if typeof onaction === 'function' && !canSend && !recording}
+    {:else if typeof onaction === 'function' && !canSend && dictationState === 'idle'}
       <div class="control send action" data-pw={sendSlotTestId ?? null}>
         <Button
           onclick={() => onaction()}
@@ -368,7 +397,7 @@
   }
 
   .input::placeholder {
-    color: var(--chat-composer-placeholder-color, #a1a1aa);
+    color: var(--chat-composer-placeholder-color, #52525b);
   }
 
   .control {
@@ -398,6 +427,13 @@
     --button-text-color: var(--chat-composer-voice-recording-color, #dc2626);
   }
 
+  /* No dedicated busy palette: the disabled `Button` already dims itself
+     (`--disabled-opacity`), which is enough to distinguish "busy" from the
+     active "recording" red without inventing new color tokens that would
+     need a matching dark-theme entry outside this component's scope. The
+     `.busy` class is still applied to the wrapper (see markup) so a caller
+     can target it with their own CSS if they want a distinct look. */
+
   .send {
     --button-width: var(--chat-composer-send-size, 40px);
     --button-height: var(--chat-composer-send-size, 40px);
@@ -413,4 +449,18 @@
     --button-color: var(--chat-composer-stop-background-color, #18181b);
     --button-text-color: var(--chat-composer-stop-color, #ffffff);
   }
+
+  /* Visually hidden but still read by assistive technology -- same pattern
+     Table's caption and Label's required marker use. */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
 </style>

package/dist/ChatComposer/dictationState.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Loom's composer models dictation as a tri-state
+ * `'idle' | 'recording' | 'busy'` against this library's boolean `recording`.
+ * The third state is not cosmetic -- while transcribing, the control must not
+ * accept a new press, so "recording" and "busy" have to be states a consumer
+ * can actually branch on, not one flag with two meanings.
+ *
+ * `recording` widens to accept the tri-state directly. The boolean is kept
+ * working, unchanged, as an alias for one minor cycle: `true` reads as
+ * 'recording' and `false` (the default) reads as 'idle' -- the only two
+ * states a boolean caller could ever express -- so a caller who never touches
+ * this keeps exactly today's behaviour.
+ */
+export type ChatComposerDictationState = 'idle' | 'recording' | 'busy';
+export declare function normalizeDictationState(recording: boolean | ChatComposerDictationState): ChatComposerDictationState;

package/dist/ChatComposer/dictationState.js

@@ -0,0 +1,9 @@
+export function normalizeDictationState(recording) {
+    if (recording === true) {
+        return 'recording';
+    }
+    if (recording === false) {
+        return 'idle';
+    }
+    return recording;
+}

package/dist/ChatComposer/properties.d.ts

@@ -24,7 +24,16 @@ export type OptionalChatComposerProperties = {
     submitOnEnter?: boolean;
     maxLength?: number;
     streaming?: boolean;
-    recording?: boolean;
+    /**
+     * Voice/dictation state. Accepts the tri-state `'idle' | 'recording' |
+     * 'busy'` -- 'busy' means the control is transcribing: it must not accept a
+     * new press, so the voice button disables itself while busy regardless of
+     * `voiceDisabled`/`disabled`.
+     *
+     * `boolean` is kept working, unchanged, as an alias for one minor cycle:
+     * `true` reads as 'recording', `false` (the default) reads as 'idle'.
+     */
+    recording?: boolean | 'idle' | 'recording' | 'busy';
     attachments?: File[];
     /**
      * Replaces the built-in attachment pill strip above the input row — render a
@@ -72,6 +81,17 @@ export type OptionalChatComposerProperties = {
     actionIcon?: Snippet;
     actionLabel?: string;
     leading?: Snippet;
+    /**
+     * Opt-in sr-only status region (`role="status" aria-live="polite"`) for
+     * narrating composer state changes -- e.g. "Recording. Press Escape to stop
+     * and transcribe." Rendered only when set (an empty string still renders an
+     * emptied region, so a caller can clear it without unmounting). The library
+     * owns only the region, its role and its politeness; the sentences are
+     * product voice and must come from the caller -- never hardcoded here.
+     */
+    statusText?: string;
+    /** Test id on the status region (see `statusText`). */
+    statusTestId?: string;
     testId?: string;
     /** Test id emitted as `data-pw` on the textarea itself (none by default). */
     inputTestId?: string;
@@ -100,6 +120,13 @@ export type ChatComposerEventProperties = {
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;
     onvoice?: () => void;
+    /**
+     * Fires when Escape is pressed while `recording` is 'recording' (or the
+     * legacy `true`), and only then -- Escape has no effect at any other
+     * dictation state. The library owns no microphone or media APIs, so this is
+     * the seam a caller wires to actually stop dictation.
+     */
+    oncanceldictation?: () => void;
     onattach?: (files: File[]) => void;
     /**
      * Intercepts the attach button: when provided, clicking it calls this instead of

package/dist/ChatMessage/ChatMessage.svelte

@@ -455,6 +455,23 @@
     --button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);
   }
 
+  /* The sender bubble is a dark fill in light mode, so the neutral action grey
+     above lands at 1.81:1 on it. Actions inside that bubble take their own ink. */
+  .chat-message.party-sender .actions {
+    --button-text-color: var(--chat-message-sender-action-color, #d4d4d8);
+  }
+
+  /* The sender bubble is a dark fill in light mode and a light one in dark, so
+     anything rendered inside it -- links and inline buttons included -- has to
+     invert with it rather than take one fixed colour. */
+  .chat-message.party-sender .bubble :global(a) {
+    color: var(--chat-message-sender-link-color, light-dark(#a5b4fc, #4338ca));
+  }
+
+  .chat-message.party-sender .bubble :global(.button-text) {
+    color: var(--chat-message-sender-action-color, light-dark(#d4d4d8, #27272a));
+  }
+
   .chat-message:hover .actions,
   .chat-message:focus-within .actions {
     opacity: 1;
@@ -499,7 +516,7 @@
   }
 
   .body :global(a) {
-    color: var(--chat-message-link-color, #6d28d9);
+    color: var(--chat-message-link-color, light-dark(#6d28d9, #a5b4fc));
     text-decoration: underline;
     text-underline-offset: 2px;
   }
@@ -638,4 +655,13 @@
     border-top: 1px solid var(--chat-message-hr-color, rgba(0, 0, 0, 0.12));
     margin: 0.8em 0;
   }
+  /* The actions row is revealed on hover by fading opacity 0 -> 1. Under a
+     reduced-motion preference it appears at once instead: the row is a set of
+     controls the user is reaching for, so arriving instantly is the better
+     outcome, not a degraded one. */
+  @media (prefers-reduced-motion: reduce) {
+    .actions {
+      transition: none;
+    }
+  }
 </style>

package/dist/CheckListItem/CheckListItem.svelte

@@ -58,11 +58,11 @@
 
   .text {
     font-size: var(--check-list-item-text-size, 14px);
-    color: var(--check-list-item-text-color);
+    color: var(--check-list-item-text-color, inherit);
   }
 
   .text.checked {
-    color: var(--check-list-item-checked-text-color);
-    font-weight: var(--check-list-item-checked-font-weight);
+    color: var(--check-list-item-checked-text-color, inherit);
+    font-weight: var(--check-list-item-checked-font-weight, inherit);
   }
 </style>