@logicplanes/kaeso-ui 0.4.4 → 0.4.6

package/dist/kaeso.css

@@ -32,6 +32,7 @@
 @custom-variant focus-within-visible (:root:not([data-k-pointer]) &:has(:focus-visible), &[data-force~="focus"]);
 @custom-variant dragging (&[data-dragging], &[data-force~="dragging"]);
 @custom-variant reduced (@media (prefers-reduced-motion: reduce));
+@custom-variant dialog-narrow (@container (width < 24rem));
 @custom-variant ghost-start {
   @variant @max-settings-row {
     [data-row-control] > &.material-ghost:first-child,
@@ -44,49 +45,89 @@
 
 @utility focus-ring {
   outline: 2px solid transparent;
+  @media (forced-colors: active) {
+    outline-style: none;
+  }
   outline-offset: 2px;
   :root:not([data-k-pointer]) &:focus-visible,
   &[data-force~="focus"] {
     outline-color: var(--k-focus);
+    outline-style: solid;
   }
 }
 @utility focus-ring-inset {
   outline: 2px solid transparent;
+  @media (forced-colors: active) {
+    outline-style: none;
+  }
   outline-offset: -2px;
   :root:not([data-k-pointer]) &:focus-visible,
   &[data-force~="focus"] {
     outline-color: var(--k-focus);
+    outline-style: solid;
   }
 }
 @utility focus-ring-segment {
   outline: 2px solid transparent;
+  @media (forced-colors: active) {
+    outline-style: none;
+  }
   outline-offset: -2px;
   :root:not([data-k-pointer]) &:focus-visible,
   &[data-force~="focus"] {
     outline-color: var(--k-focus);
+    outline-style: solid;
     border-radius: var(--radius-pill);
   }
 }
 @utility focus-ring-card-row {
   outline: 2px solid transparent;
+  @media (forced-colors: active) {
+    outline-style: none;
+  }
   outline-offset: -2px;
   :root:not([data-k-pointer]) &:focus-visible,
   &[data-force~="focus"] {
     outline-color: var(--k-focus);
+    outline-style: solid;
     border-radius: calc(var(--radius-group) - 2px);
   }
 }
 
+@utility focus-ring-card-row-within {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  @media (forced-colors: active) {
+    outline-style: none;
+  }
+  & .choice-mark {
+    outline-style: none;
+  }
+  :root:not([data-k-pointer]) &:has(:focus-visible),
+  &[data-force~="focus"] {
+    outline-color: var(--k-focus);
+    outline-style: solid;
+    border-radius: calc(var(--radius-group) - 2px);
+    @media (forced-colors: active) {
+      outline-color: Highlight;
+    }
+  }
+}
+
 @utility tap-target {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, 32px);
+    height: max(100%, 32px);
+    transform: translate(-50%, -50%);
+  }
   @media (pointer: coarse) {
     &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: max(100%, 32px);
-      height: max(100%, 32px);
-      transform: translate(-50%, -50%);
+      width: max(100%, 44px);
+      height: max(100%, 44px);
     }
   }
 }
@@ -104,15 +145,19 @@
   box-shadow: var(--k-primary-shadow);
   @media (hover: hover) {
     &:hover:not(:disabled, [data-disabled], [aria-disabled="true"]) {
-      filter: brightness(var(--k-hover-brightness));
+      background-color: var(--k-ink-hover);
     }
   }
   &[data-force~="hover"] {
-    filter: brightness(var(--k-hover-brightness));
+    background-color: var(--k-ink-hover);
+  }
+  &[data-popup-open],
+  &[data-force~="open"] {
+    background-color: var(--k-ink-pressed);
   }
   &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
   &[data-force~="pressed"] {
-    filter: brightness(var(--k-pressed-brightness));
+    background-color: var(--k-ink-pressed);
     transform: scale(0.985);
   }
   &:disabled,
@@ -138,6 +183,10 @@
   &[data-force~="hover"] {
     filter: brightness(1.08);
   }
+  &[data-popup-open],
+  &[data-force~="open"] {
+    filter: brightness(0.94);
+  }
   &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
   &[data-force~="pressed"] {
     filter: brightness(0.94);
@@ -153,6 +202,10 @@
   }
 }
 
+@utility kbd-on-danger {
+  --k-on-ink: var(--k-on-danger);
+}
+
 @utility controls-on-fill {
   --k-fill-control: var(--k-control-on-fill);
   --k-fill-control-hover: var(--k-control-on-fill-hover);
@@ -165,19 +218,20 @@
   box-shadow: var(--k-fill-control-shadow, var(--k-shadow-control));
   @media (hover: hover) {
     &:hover:not(:disabled, [data-disabled], [aria-disabled="true"]) {
-      background-color: var(--k-fill-control-hover, var(--k-fill-1));
+      background-color: var(--k-fill-control-hover, var(--k-raised-hover));
       box-shadow: var(--k-fill-control-shadow, var(--k-shadow-control-hover));
     }
   }
   &[data-force~="hover"],
   &[data-popup-open],
   &[data-force~="open"] {
-    background-color: var(--k-fill-control-hover, var(--k-fill-1));
+    background-color: var(--k-fill-control-hover, var(--k-raised-hover));
     box-shadow: var(--k-fill-control-shadow, var(--k-shadow-control-hover));
   }
   &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
   &[data-force~="pressed"] {
-    background-color: var(--k-fill-2);
+    background-color: var(--k-raised-pressed);
+    transform: scale(0.985);
   }
   &:disabled,
   &[data-disabled],
@@ -206,6 +260,10 @@
   &[data-force~="open"] {
     background-color: var(--k-fill-2);
   }
+  &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
+  &[data-force~="pressed"] {
+    transform: scale(0.985);
+  }
   &:disabled,
   &[data-disabled],
   &[aria-disabled="true"],
@@ -231,6 +289,10 @@
   &[data-force~="open"] {
     background-color: var(--k-fill-3);
   }
+  &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
+  &[data-force~="pressed"] {
+    transform: scale(0.985);
+  }
   &:disabled,
   &[data-disabled],
   &[aria-disabled="true"],
@@ -249,14 +311,16 @@
       box-shadow: var(--k-fill-control-shadow, var(--k-shadow-control-hover));
     }
   }
-  &[data-force~="hover"] {
+  &[data-force~="hover"],
+  &[data-popup-open],
+  &[data-force~="open"] {
     background-color: var(--k-danger-tint);
     box-shadow: var(--k-fill-control-shadow, var(--k-shadow-control-hover));
   }
   &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
   &[data-force~="pressed"] {
-    background-color: var(--k-danger-tint);
-    filter: brightness(0.97);
+    background-color: color-mix(in srgb, var(--k-danger) 12%, var(--k-danger-tint));
+    transform: scale(0.985);
   }
   &:disabled,
   &[data-disabled],
@@ -298,17 +362,23 @@
   }
   &:disabled,
   &[data-disabled],
-  &:has(:disabled),
+  &:has(:is(input, textarea):disabled),
   &[data-force~="disabled"] {
     background-color: var(--k-fill-1);
     color: var(--k-text-disabled);
     box-shadow: none;
+    & :where(*),
+    & ::placeholder,
+    &::placeholder {
+      color: var(--k-text-disabled);
+    }
   }
+  &[readonly],
   &[data-readonly],
   &:has([readonly]),
   &[data-force~="readonly"] {
     background-color: var(--k-fill-1);
-    box-shadow: none;
+    box-shadow: var(--k-shadow-ring);
   }
 }
 
@@ -326,6 +396,11 @@
   &[data-force~="open"] {
     box-shadow: var(--k-shadow-selector-hover);
   }
+  &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
+  &[data-force~="pressed"] {
+    background-color: var(--k-raised-pressed);
+    box-shadow: var(--k-shadow-selector-hover);
+  }
   :root:not([data-k-pointer]) &:focus-visible,
   &[data-force~="focus"] {
     box-shadow:
@@ -353,17 +428,14 @@
   color: var(--k-text);
   box-shadow: var(--k-shadow-field);
   @media (hover: hover) {
-    &:hover:not(:has(textarea:disabled), :has(textarea:focus)) {
+    &:hover:not(:has(textarea:disabled), :has(textarea:focus-visible)) {
       box-shadow: var(--k-shadow-field-hover);
     }
   }
   &[data-force~="hover"] {
     box-shadow: var(--k-shadow-field-hover);
   }
-  &:has(textarea:focus) {
-    box-shadow: var(--k-shadow-field-hover);
-  }
-  :root:not([data-k-pointer]) &:has(textarea:focus-visible),
+  &:has(textarea:focus-visible),
   &[data-force~="focus"] {
     box-shadow:
       inset 0 0 0 1px var(--k-text),
@@ -375,6 +447,126 @@
     color: var(--k-text-disabled);
     box-shadow: none;
   }
+  /* Ghost controls in the button row sit on the raised surface, where fill-1 disappears in dark. */
+  & .material-ghost {
+    @media (hover: hover) {
+      &:hover:not(:disabled, [data-disabled], [aria-disabled="true"]) {
+        background-color: var(--k-raised-hover);
+      }
+    }
+    &[data-force~="hover"] {
+      background-color: var(--k-raised-hover);
+    }
+    &:active:not(:disabled, [data-disabled], [aria-disabled="true"]),
+    &[data-force~="pressed"],
+    &[data-popup-open],
+    &[data-force~="open"] {
+      background-color: var(--k-raised-pressed);
+    }
+  }
+}
+
+@utility reserve-text {
+  &::after {
+    content: attr(data-reserve);
+  }
+}
+
+@utility markdown-text-inset {
+  & > :not(.rounded-well, :has(> table), :has(> button)) {
+    padding-inline: 12px;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(
+    .material-primary,
+    .material-danger,
+    .material-secondary,
+    .material-soft,
+    .material-danger-secondary,
+    .material-field,
+    .material-selector,
+    .material-composer,
+    .shadow-ring,
+    .shadow-frame,
+    .shadow-xs,
+    .shadow-control,
+    .shadow-segment,
+    .shadow-panel,
+    .shadow-raised,
+    .shadow-dialog,
+    .shadow-toast
+  ) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+  :where(.material-field, .material-selector, .material-composer):is(:focus-visible, :has(:focus-visible), [data-focused], [data-force~="focus"]) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  :where(.material-field, .material-selector):is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]), [data-force~="invalid"]) {
+    outline-style: dashed;
+  }
+  :where(.material-field):is(:disabled, [data-disabled], :has(:is(input, textarea):disabled), [data-force~="disabled"]) {
+    outline-color: GrayText;
+    &,
+    & :where(*),
+    & ::placeholder {
+      color: GrayText;
+    }
+  }
+  :root:not([data-k-pointer]) :where(.focus-ring):focus-visible,
+  :where(.focus-ring)[data-force~="focus"] {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+  :root:not([data-k-pointer]) :where(.focus-ring-inset, .focus-ring-segment, .focus-ring-card-row):focus-visible,
+  :where(.focus-ring-inset, .focus-ring-segment, .focus-ring-card-row)[data-force~="focus"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  :where([aria-selected="true"], [aria-current="page"], [aria-current="location"], [aria-pressed="true"], [data-selected]) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  :where([data-highlighted], [data-force~="highlighted"]) {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+  /* forced-color-adjust is inherited, so without this a description or key cap keeps its author colour on Highlight. */
+  :where([data-highlighted], [data-force~="highlighted"]) :where(:not(.data-mark, .data-mark *)) {
+    color: inherit;
+    background-color: transparent;
+  }
+  :where([role^="menuitem"][data-disabled], [role="option"][aria-disabled="true"]) {
+    color: GrayText;
+  }
+  :where(.hairline-b, .hairline-b-strong) {
+    border-bottom: 1px solid CanvasText;
+  }
+  :where(.hairline-t, .hairline-t-strong) {
+    border-top: 1px solid CanvasText;
+  }
+  :where(.hairline-l, .divider-l) {
+    border-inline-start: 1px solid CanvasText;
+  }
+  :where(.hairline-r) {
+    border-inline-end: 1px solid CanvasText;
+  }
+}
+
+@utility data-mark {
+  forced-color-adjust: none;
+}
+
+@utility forced-line {
+  @media (forced-colors: active) {
+    /* The element also carries a bg-* utility, which Tailwind may emit after this one. */
+    background-color: CanvasText !important;
+    forced-color-adjust: none;
+  }
 }
 
 @utility grid-cols-term {
@@ -501,6 +693,16 @@
 }
 @utility animate-indeterminate {
   animation: k-indeterminate var(--k-skeleton-duration) var(--k-ease-pulse) infinite;
+  /* A still third of a line reads as 33% done; with reduced motion the whole line pulses instead. */
+  @media (prefers-reduced-motion: reduce) {
+    width: 100% !important;
+    animation: k-pulse var(--k-skeleton-duration) var(--k-ease-pulse) infinite !important;
+  }
+}
+@utility reduced-pulse {
+  @media (prefers-reduced-motion: reduce) {
+    animation: k-pulse var(--k-skeleton-duration) var(--k-ease-pulse) infinite !important;
+  }
 }
 
 @keyframes k-hidden {
@@ -707,6 +909,18 @@
   padding-bottom: env(safe-area-inset-bottom, 0px);
   padding-left: env(safe-area-inset-left, 0px);
 }
+@utility safe-area-inset {
+  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+}
+@utility bottom-safe-* {
+  bottom: calc(--value(integer) * 1px + env(safe-area-inset-bottom, 0px));
+}
+@utility inset-safe-* {
+  top: calc(--value(integer) * 1px + env(safe-area-inset-top, 0px));
+  right: calc(--value(integer) * 1px + env(safe-area-inset-right, 0px));
+  bottom: calc(--value(integer) * 1px + env(safe-area-inset-bottom, 0px));
+  left: calc(--value(integer) * 1px + env(safe-area-inset-left, 0px));
+}
 
 @utility cell-fit {
   & > * {
@@ -728,12 +942,35 @@
     display: none;
   }
   @media (width >= 48rem) {
-    grid-auto-columns: minmax(240px, 1fr);
+    grid-auto-columns: minmax(320px, 1fr);
     mask-image: linear-gradient(to right, transparent 0, black var(--k-fade-start, 0px), black calc(100% - var(--k-fade-end, 0px)), transparent 100%);
     scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
-    &:hover {
-      scrollbar-color: var(--k-line-strong) transparent;
+    scrollbar-color: var(--k-line-strong) transparent;
+  }
+}
+
+/* The thread scroller is masked by its fade, which would also hide a ring drawn on it. */
+@utility compare-thread {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+  :root:not([data-k-pointer]) &:has(> :focus-visible)::after,
+  &[data-force~="focus"]::after {
+    outline-color: var(--k-focus);
+  }
+  @media (forced-colors: active) {
+    &::after {
+      outline-style: none;
+    }
+    :root:not([data-k-pointer]) &:has(> :focus-visible)::after,
+    &[data-force~="focus"]::after {
+      outline: 2px solid Highlight;
     }
   }
 }
@@ -786,6 +1023,24 @@
     transparent 100%
   );
 }
+@utility scroll-fade-both {
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      black min(16px, var(--scroll-area-overflow-y-start, 0px)),
+      black calc(100% - min(16px, var(--scroll-area-overflow-y-end, 0px))),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      black min(16px, var(--scroll-area-overflow-x-start, 0px)),
+      black calc(100% - min(16px, var(--scroll-area-overflow-x-end, 0px))),
+      transparent 100%
+    );
+  mask-composite: intersect;
+}
 @utility hairline-t {
   box-shadow: inset 0 1px 0 var(--k-line-subtle);
 }
@@ -804,6 +1059,9 @@
 
 @utility divider-l {
   box-shadow: inset 1px 0 0 var(--k-line);
+  @media (forced-colors: active) {
+    border-inline-start: 1px solid CanvasText;
+  }
 }
 
 @utility grid-cols-label {
@@ -833,40 +1091,271 @@
   --k-ring-over: var(--k-shadow-ring);
 }
 
-@utility ring-thumb {
-  box-shadow:
-    0 0 0 2px var(--k-bg-panel),
-    0 1px 2px rgb(0 0 0 / 0.2);
-}
-
-@keyframes k-draw {
-  from {
-    stroke-dashoffset: 1;
+@utility choice-mark {
+  --choice-off: var(--k-bg-raised);
+  --choice-ring: var(--k-shadow-selector);
+  --choice-ring-hover: var(--k-shadow-selector-hover);
+  --choice-off-pressed: var(--k-raised-pressed);
+  --choice-on: var(--k-ink);
+  --choice-on-hover: var(--k-ink-hover);
+  --choice-on-pressed: var(--k-ink-pressed);
+  --choice-glyph: var(--k-on-ink);
+  --choice-center: var(--k-bg-panel);
+  --choice-off-disabled: var(--k-fill-1);
+  --choice-ring-disabled: inset 0 0 0 1px var(--k-line);
+  --choice-on-disabled: var(--k-text-disabled);
+  --choice-glyph-disabled: var(--k-bg-panel);
+  --choice-invalid: inset 0 0 0 1px var(--k-danger);
+  --choice-invalid-hover: inset 0 0 0 1px var(--k-danger), 0 0 0 3px color-mix(in srgb, var(--k-danger) 16%, transparent);
+  --choice-focus: var(--k-focus);
+  --choice-tone: var(--choice-on);
+  background-color: var(--choice-off);
+  box-shadow: var(--choice-ring);
+  color: var(--choice-glyph);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: background-color, box-shadow, outline-color, color, scale;
+  transition-duration: var(--k-duration-fast);
+  transition-timing-function: var(--k-ease-standard);
+  &[data-shape="dot"] {
+    transition-duration: var(--k-duration-fast), var(--k-duration-radio), var(--k-duration-fast), var(--k-duration-fast), var(--k-duration-fast);
+  }
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    outline-style: none;
+    --choice-off: Canvas;
+    --choice-ring: inset 0 0 0 1px CanvasText;
+    --choice-ring-hover: inset 0 0 0 2px CanvasText;
+    --choice-off-pressed: Canvas;
+    --choice-on: Highlight;
+    --choice-on-hover: Highlight;
+    --choice-on-pressed: Highlight;
+    --choice-glyph: HighlightText;
+    --choice-center: Canvas;
+    --choice-off-disabled: Canvas;
+    --choice-ring-disabled: inset 0 0 0 1px GrayText;
+    --choice-on-disabled: GrayText;
+    --choice-glyph-disabled: Canvas;
+    --choice-invalid: inset 0 0 0 2px CanvasText;
+    --choice-invalid-hover: inset 0 0 0 2px CanvasText;
+    --choice-focus: Highlight;
   }
-  to {
-    stroke-dashoffset: 0;
+  @media (hover: hover) {
+    :where([data-choice]:not([data-disabled], [data-readonly]):hover) > &,
+    :where([data-choice-row]:hover) :where([data-choice]:not([data-disabled], [data-readonly])) > & {
+      box-shadow: var(--choice-ring-hover);
+      --choice-tone: var(--choice-on-hover);
+    }
+  }
+  :where([data-choice][data-force~="hover"]) > & {
+    box-shadow: var(--choice-ring-hover);
+    --choice-tone: var(--choice-on-hover);
+  }
+  :where([data-choice]:not([data-disabled], [data-readonly]):active) > &,
+  :where([data-choice-row]:active) :where([data-choice]:not([data-disabled], [data-readonly])) > &,
+  :where([data-choice][data-force~="pressed"]) > & {
+    background-color: var(--choice-off-pressed);
+    box-shadow: var(--choice-ring-hover);
+    --choice-tone: var(--choice-on-pressed);
+    @media (prefers-reduced-motion: no-preference) {
+      scale: 0.9;
+    }
+  }
+  :where([data-choice][aria-invalid="true"]) > & {
+    box-shadow: var(--choice-invalid);
+  }
+  @media (hover: hover) {
+    :where([data-choice][aria-invalid="true"]:not([data-disabled], [data-readonly]):hover) > &,
+    :where([data-choice-row]:hover) :where([data-choice][aria-invalid="true"]:not([data-disabled], [data-readonly])) > & {
+      box-shadow: var(--choice-invalid-hover);
+    }
+  }
+  :where([data-choice][aria-invalid="true"]:is([data-force~="hover"], [data-force~="pressed"])) > & {
+    box-shadow: var(--choice-invalid-hover);
+  }
+  :where([data-choice]:is([data-disabled], [data-force~="disabled"])) > & {
+    background-color: var(--choice-off-disabled);
+    box-shadow: var(--choice-ring-disabled);
+    color: var(--choice-glyph-disabled);
+    --choice-tone: var(--choice-on-disabled);
+  }
+  :where([data-choice]:is([data-checked], [data-indeterminate], [data-force~="checked"])) > & {
+    background-color: var(--choice-tone);
+    box-shadow: none;
+  }
+  :where([data-choice]:is([data-checked], [data-force~="checked"])) > &[data-shape="dot"] {
+    background-color: var(--choice-center);
+    box-shadow: inset 0 0 0 5px var(--choice-tone);
+  }
+  :where(:root:not([data-k-pointer]) [data-choice]:focus-visible, [data-choice][data-force~="focus"]) > & {
+    outline-style: solid;
+    outline-color: var(--choice-focus);
   }
 }
+
 @utility check-draw {
   stroke-dasharray: 1;
-  stroke-dashoffset: 0;
-  animation: k-draw var(--k-duration-check) var(--k-ease-overlay);
+  stroke-dashoffset: 1;
+  opacity: 0;
+  :where([data-checked]) & {
+    stroke-dashoffset: 0;
+    opacity: 1;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--k-duration-check);
+    transition-timing-function: var(--k-ease-overlay);
+  }
 }
 
-@utility radio-donut {
-  transition-property: box-shadow, background-color;
-  transition-duration: var(--k-duration-radio);
-  transition-timing-function: var(--k-ease-overlay);
-  &[data-checked],
-  &[data-force~="checked"] {
-    background-color: var(--k-bg-panel);
-    box-shadow: inset 0 0 0 5px var(--k-ink);
+@utility choice-track {
+  --track-off: var(--k-fill-3);
+  --track-ring: var(--k-shadow-selector);
+  --track-ring-hover: var(--k-shadow-selector-hover);
+  --track-on: var(--k-ink);
+  --track-on-hover: var(--k-ink-hover);
+  --track-on-pressed: var(--k-ink-pressed);
+  --thumb-off: var(--k-switch-thumb);
+  --thumb-on: var(--k-on-ink);
+  --thumb-shadow: var(--k-shadow-thumb);
+  background-color: var(--track-off);
+  box-shadow: var(--track-ring);
+  transition-property: background-color, box-shadow, outline-color, opacity;
+  transition-duration: var(--k-duration-fast);
+  transition-timing-function: var(--k-ease-standard);
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    --track-off: Canvas;
+    --track-ring: inset 0 0 0 1px CanvasText;
+    --track-ring-hover: inset 0 0 0 2px CanvasText;
+    --track-on: Highlight;
+    --track-on-hover: Highlight;
+    --track-on-pressed: Highlight;
+    --thumb-off: CanvasText;
+    --thumb-on: HighlightText;
+    --thumb-shadow: none;
+    &:is([data-disabled], [aria-disabled="true"], [data-force~="disabled"]) {
+      --track-ring: inset 0 0 0 1px GrayText;
+      --track-on: GrayText;
+      --thumb-off: GrayText;
+      --thumb-on: Canvas;
+    }
+  }
+  @media (hover: hover) {
+    &:not([data-disabled], [data-readonly]):hover,
+    :where([data-choice-row]:hover) &:not([data-disabled], [data-readonly]) {
+      box-shadow: var(--track-ring-hover);
+      --track-on: var(--track-on-hover);
+    }
+  }
+  &[data-force~="hover"] {
+    box-shadow: var(--track-ring-hover);
+    --track-on: var(--track-on-hover);
+  }
+  &:not([data-disabled], [data-readonly]):active,
+  :where([data-choice-row]:active) &:not([data-disabled], [data-readonly]),
+  &[data-force~="pressed"] {
+    box-shadow: var(--track-ring-hover);
+    --track-on: var(--track-on-pressed);
+  }
+  &:is([data-checked], [data-force~="checked"]) {
+    background-color: var(--track-on);
+    box-shadow: none;
+  }
+}
+
+@utility choice-thumb {
+  background-color: var(--thumb-off);
+  box-shadow: var(--thumb-shadow);
+  transition-property: translate, transform, scale;
+  transition-duration: var(--k-duration-indicator), var(--k-duration-indicator), var(--k-duration-fast);
+  transition-timing-function: var(--k-ease-overlay), var(--k-ease-overlay), var(--k-ease-standard);
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-choice]:not([data-disabled], [data-readonly]):active) > &,
+    :where([data-choice-row]:active) :where([data-choice]:not([data-disabled], [data-readonly])) > &,
+    :where([data-choice][data-force~="pressed"]) > & {
+      scale: 0.85;
+    }
+  }
+  :where([data-checked], [data-force~="checked"]) > & {
+    background-color: var(--thumb-on);
+    box-shadow: none;
   }
-  &[data-checked][data-disabled] {
-    box-shadow: inset 0 0 0 5px var(--k-fill-3);
+}
+
+@utility slider-track {
+  background-color: var(--k-fill-3);
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}
+
+@utility slider-range {
+  background-color: var(--k-ink);
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    [data-disabled] & {
+      background-color: GrayText;
+    }
+  }
+}
+
+@utility slider-thumb {
+  background-color: var(--k-ink);
+  box-shadow:
+    0 0 0 2px var(--k-bg-panel),
+    var(--k-shadow-thumb);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: box-shadow, outline-color, scale;
+  transition-duration: var(--k-duration-fast);
+  transition-timing-function: var(--k-ease-standard);
+  :root:not([data-k-pointer]) &:has(:focus-visible),
+  &[data-force~="focus"] {
+    outline-color: var(--k-focus);
+  }
+  @media (hover: hover) {
+    &:not([data-disabled]):hover {
+      box-shadow:
+        0 0 0 2px var(--k-bg-panel),
+        0 0 0 6px var(--k-fill-2);
+    }
+  }
+  &[data-force~="hover"],
+  &[data-dragging],
+  &[data-force~="dragging"] {
+    box-shadow:
+      0 0 0 2px var(--k-bg-panel),
+      0 0 0 6px var(--k-fill-2);
+  }
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    outline-style: none;
+    background-color: CanvasText;
+    box-shadow: 0 0 0 2px Canvas;
+    &:hover,
+    &[data-force~="hover"],
+    &[data-dragging],
+    &[data-force~="dragging"] {
+      box-shadow:
+        0 0 0 2px Canvas,
+        0 0 0 4px CanvasText;
+    }
+    [data-disabled] & {
+      background-color: GrayText;
+    }
+    :root:not([data-k-pointer]) &:has(:focus-visible),
+    &[data-force~="focus"] {
+      outline: 2px solid Highlight;
+    }
   }
 }
 
+@utility segment-indicator-raised {
+  background-color: var(--k-control-on-fill);
+}
+
 @utility collapse-motion {
   height: var(--collapsible-panel-height, var(--accordion-panel-height, auto));
   overflow: clip;
@@ -904,7 +1393,7 @@
     outline-offset: 2px;
   }
   .k-cal td.k-day > button:hover {
-    background: var(--k-fill-1);
+    background: var(--k-item-hover);
   }
   :root:not([data-k-pointer]) .k-cal td.k-day > button:focus-visible {
     outline-color: var(--k-focus);
@@ -957,6 +1446,50 @@
     background: transparent;
     color: var(--k-text);
   }
+  .k-cal td.k-range-start:not(.k-range-end):last-child,
+  .k-cal td.k-range-end:not(.k-range-start):first-child {
+    background: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .forced-checked:is([data-checked], [data-force~="checked"]) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .material-selector:is(:disabled, [data-disabled], [aria-disabled="true"], [data-force~="disabled"]),
+  .material-selector:is(:disabled, [data-disabled], [aria-disabled="true"], [data-force~="disabled"]) * {
+    color: GrayText;
+    outline-color: GrayText;
+  }
+  .k-cal td:is(.k-selected, .k-range-start, .k-range-end) > button {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .k-cal td.k-range-middle,
+  .k-cal td:is(.k-range-start, .k-range-end) {
+    background: none;
+  }
+  .k-cal td.k-range-middle > button,
+  .k-cal td.k-range-middle.k-selected > button {
+    forced-color-adjust: none;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: inset 0 0 0 1px Highlight;
+  }
+  .k-cal td.k-disabled > button {
+    color: GrayText;
+  }
+  .k-cal td.k-day {
+    outline: none;
+  }
+  .k-cal td.k-day > button {
+    outline-style: none;
+  }
+  :root:not([data-k-pointer]) .k-cal td.k-day > button:focus-visible {
+    outline: 2px solid Highlight;
+  }
 }
 
 @keyframes k-layer-in {
@@ -1109,21 +1642,12 @@
 .k-toast-content {
   transition: opacity var(--k-duration-fast) var(--k-ease-standard);
 }
-.k-toast-close {
-  opacity: 0;
-  transform: scale(0.9);
-  transition-property: opacity, transform, background-color, color;
-  transition-duration: var(--k-duration-fast);
-  transition-timing-function: var(--k-ease-standard);
-}
-.k-toast:hover .k-toast-close,
-.k-toast:focus-within .k-toast-close,
-.k-toast-close[data-force~="visible"] {
-  opacity: 1;
-  transform: scale(1);
-}
-.k-toast[data-behind]:not([data-expanded]) .k-toast-close {
-  display: none;
+.k-toast-viewport:focus-visible .k-toast:not([data-behind]) .k-toast-surface {
+  outline: 2px solid var(--k-focus);
+  outline-offset: 2px;
+  @media (forced-colors: active) {
+    outline-color: Highlight;
+  }
 }
 @utility toast-viewport-width {
   max-width: min(560px, calc(100vw - 32px));
@@ -1142,8 +1666,22 @@
 @utility ring-mark {
   box-shadow: inset 0 0 0 1px var(--k-warning);
 }
+@utility cutout {
+  --k-cut-x: var(--k-cut-x-ltr);
+  mask-image: radial-gradient(circle at var(--k-cut-x) var(--k-cut-y, 50%), transparent var(--k-cut-r), black calc(var(--k-cut-r) + 0.5px));
+  &:dir(rtl) {
+    --k-cut-x: var(--k-cut-x-rtl, var(--k-cut-x-ltr));
+  }
+}
+@utility raised-selected-hover {
+  /* A step past raised-pressed toward the text, so a selected row in a card answers the pointer in both themes. */
+  background-color: color-mix(in oklab, var(--k-raised-pressed) 95%, var(--k-text));
+}
+@utility mark-fill {
+  background-color: var(--k-fill-control, var(--k-fill-2));
+}
 @utility grid-cols-kv {
-  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
+  grid-template-columns: fit-content(var(--k-width-field-label)) minmax(0, 1fr);
 }
 
 @utility chart-fill-top {