@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/styles/components/collections/list-action-row/list-action-row.css

@@ -0,0 +1,466 @@
+.kui-list-action-row {
+  --kui-list-action-row-color: var(--kui-color-neutral-on-normal);
+  --kui-list-action-row-border: transparent;
+  --kui-list-action-row-background: transparent;
+  --kui-list-action-row-hover-border: var(--kui-color-neutral-border-normal);
+  --kui-list-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
+  --kui-list-action-row-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-list-action-row-selected-border: var(--kui-color-brand-border-quiet);
+  --kui-list-action-row-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-list-action-row-trailing-hover-background: var(
+    --kui-color-neutral-fill-normal
+  );
+  /* The leading (and trailing) content inset. An inherited
+     `--kui-list-row-padding-inline` on the containing List sets it for every
+     ListItem and ListActionRow at once; the +1px wherever it is used stands in
+     for the 1px border ListItem draws and this row paints as a box-shadow, so
+     both row kinds start their leading icons on one edge. */
+  --_kui-list-action-row-padding-inline: var(
+    --kui-list-row-padding-inline,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
+  /* The leading icon size, shared with ListItem through an inherited
+     `--kui-list-row-icon-size` on the containing List, so a mixed list keeps
+     its labels on one edge. It defaults to ListItem's 18px row icon. */
+  --_kui-list-action-row-icon-size: var(--kui-list-row-icon-size, 1.125rem);
+  /* The row's minimum height and the primary button's block padding follow
+     density together, so a single-line label never holds a compact row
+     taller than its minimum (the label's own minimum is the difference). */
+  --_kui-list-action-row-min-height: 2.75rem;
+  --_kui-list-action-row-padding-block: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  display: flex;
+  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
+  min-height: var(--_kui-list-action-row-min-height);
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-list-action-row-color);
+  background: var(--kui-list-action-row-background);
+  box-shadow: inset 0 0 0 1px var(--kui-list-action-row-border);
+  align-items: stretch;
+}
+
+.kui-list-action-row[data-density="compact"] {
+  --_kui-list-action-row-min-height: 2.25rem;
+  --_kui-list-action-row-padding-block: 0.25rem;
+}
+
+.kui-list-action-row[data-divider="before"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-start: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row[data-divider="after"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-end: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* In a divided list, a corner is flat wherever its edge carries a divider
+   line, whichever row draws it (see ListItem). */
+:is([data-divider="after"], [data-divider="both"]) + .kui-list-action-row {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row:has(
+  + :is([data-divider="before"], [data-divider="both"])
+) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* A selected or pressed row keeps its selected tint while hovered. */
+.kui-list-action-row:not(
+    [data-placeholder="true"],
+    [data-selected="true"],
+    [data-pressed="true"]
+  ):has(.kui-list-action-row__primary:hover) {
+  --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
+  --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
+}
+
+.kui-list-action-row[data-selected="true"],
+.kui-list-action-row[data-pressed="true"] {
+  --kui-list-action-row-border: var(--kui-list-action-row-selected-border);
+  --kui-list-action-row-background: var(
+    --kui-list-action-row-selected-background
+  );
+  color: var(--kui-list-action-row-selected-color);
+  font-weight: 650;
+}
+
+.kui-list-action-row:has(.kui-list-action-row__primary:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* Reorder presentation. A dragged row dims; the row under the pointer draws
+   a brand insertion line along the block edge the dragged rows would land
+   beside, inset to the row's content padding so it ends clear of the
+   rounded corners. */
+.kui-list-action-row[data-dragging="true"] {
+  opacity: var(--kui-list-action-row-dragging-opacity, 0.55);
+}
+
+.kui-list-action-row[data-drop-position] {
+  position: relative;
+}
+
+.kui-list-action-row[data-drop-position]::after {
+  position: absolute;
+  z-index: 1;
+  inset-inline: var(--_kui-list-action-row-padding-inline);
+  height: var(--kui-list-action-row-drop-indicator-width, 2px);
+  border-radius: var(--kui-radius-pill);
+  background: var(
+    --kui-list-action-row-drop-indicator,
+    var(--kui-color-brand-border-loud)
+  );
+  content: "";
+  pointer-events: none;
+}
+
+.kui-list-action-row[data-drop-position="before"]::after {
+  inset-block-start: 0;
+}
+
+.kui-list-action-row[data-drop-position="after"]::after {
+  inset-block-end: 0;
+}
+
+.kui-list-action-row__primary,
+.kui-list-action-row__trailing-action {
+  height: auto !important;
+  min-height: var(--_kui-list-action-row-min-height);
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.kui-list-action-row__primary {
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  min-width: 2.75rem;
+  padding-block: var(--_kui-list-action-row-padding-block);
+  padding-inline: calc(1px + var(--_kui-list-action-row-padding-inline))
+    var(--_kui-list-action-row-padding-inline);
+  text-align: start;
+}
+
+.kui-list-action-row__primary:focus-visible {
+  outline: none;
+}
+
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live row's tone (see the placeholder rule in skeleton.css). The
+   disabled tone follows the author's disabled props (the data-kui-disabled
+   marker), so a disabled button's placeholder is dimmed like the loaded one;
+   only the `not-allowed` cursor is reserved for the live row. */
+.kui-list-action-row
+  :is(
+    .kui-list-action-row__primary,
+    .kui-list-action-row__trailing-action
+  )[data-kui-disabled="true"] {
+  opacity: 0.58;
+}
+
+.kui-list-action-row:not([data-placeholder="true"])
+  :is(
+    .kui-list-action-row__primary:disabled,
+    .kui-list-action-row__trailing-action:disabled
+  ) {
+  cursor: not-allowed;
+}
+
+.kui-list-action-row__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: calc(1px + var(--_kui-list-action-row-padding-inline));
+  display: grid;
+  width: var(--_kui-list-action-row-icon-size);
+  height: var(--_kui-list-action-row-icon-size);
+  color: currentColor;
+  transform: translateY(-50%);
+  place-items: center;
+}
+
+.kui-list-action-row__icon svg {
+  display: block;
+  width: var(--_kui-list-action-row-icon-size);
+  height: var(--_kui-list-action-row-icon-size);
+}
+
+.kui-list-action-row__label {
+  display: grid;
+  min-width: 0;
+  min-height: calc(
+    var(--_kui-list-action-row-min-height) -
+      (2 * var(--_kui-list-action-row-padding-block))
+  );
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.kui-list-action-row__primary-label,
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  min-width: 0;
+}
+
+/* The label is a grid container, and `text-overflow` never reaches a grid
+   item's text, so each text line of the stack ellipsizes itself. */
+.kui-list-action-row__primary-label,
+.kui-list-action-row__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.kui-list-action-row__status {
+  display: inline-flex;
+  /* A full line even when it holds only a placeholder skeleton, which is
+     shorter than the text line it stands in for. */
+  min-block-size: 1lh;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kui-list-action-row[data-has-icon="true"] .kui-list-action-row__label {
+  margin-inline-start: calc(
+    var(--_kui-list-action-row-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+
+.kui-list-action-row[data-multiline="true"] .kui-list-action-row__label {
+  display: block;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.kui-list-action-row[data-multiline="true"]
+  :is(.kui-list-action-row__primary-label, .kui-list-action-row__description) {
+  overflow: visible;
+}
+
+.kui-list-action-row[data-multiline="true"] .kui-list-action-row__icon {
+  inset-block-start: calc(
+    var(--_kui-list-action-row-padding-block) + (1lh / 2)
+  );
+}
+
+.kui-list-action-row__trailing-action {
+  display: grid;
+  width: 2.75rem;
+  min-width: 2.75rem;
+  border-radius: var(--kui-radius-pill);
+  place-items: center;
+}
+
+.kui-list-action-row[data-trailing-visibility="interaction"]
+  .kui-list-action-row__trailing-action {
+  opacity: 0;
+}
+
+/* A placeholder is inert, so hovering it reveals nothing: the trailing action
+   keeps the live resting state (hidden until interaction). */
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
+  .kui-list-action-row__trailing-action {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .kui-list-action-row[data-trailing-visibility="interaction"]
+    .kui-list-action-row__trailing-action {
+    opacity: 1;
+  }
+}
+
+.kui-list-action-row__trailing-action:hover:not(:disabled) {
+  background: var(--kui-list-action-row-trailing-hover-background);
+}
+
+.kui-list-action-row__trailing-action:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-list-action-row__trailing-action > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* A filled icon tile (`iconTile`): the leading icon sits in a 32px rounded
+   tile with an 18px glyph, 6px clear of a standard 44px row's edges (a
+   compact row is at least 42px tall) like a ListItem tile. The 6px radius
+   is concentric with the row's 12px corner at that clearance. */
+.kui-list-action-row[data-icon-tile] {
+  --_kui-list-action-row-icon-tile-size: 2rem;
+}
+
+.kui-list-action-row[data-icon-tile][data-density="compact"] {
+  --_kui-list-action-row-min-height: 2.625rem;
+}
+
+.kui-list-action-row[data-icon-tile] .kui-list-action-row__icon {
+  width: var(--_kui-list-action-row-icon-tile-size);
+  height: var(--_kui-list-action-row-icon-tile-size);
+  border-radius: var(--kui-radius-m, 0.375rem);
+  color: var(--_kui-list-action-row-icon-tile-foreground, currentColor);
+  background: var(--_kui-list-action-row-icon-tile-fill, transparent);
+  box-shadow: inset 0 0 0 1px
+    var(--_kui-list-action-row-icon-tile-border, transparent);
+}
+
+.kui-list-action-row[data-icon-tile] .kui-list-action-row__icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.kui-list-action-row[data-has-icon="true"][data-icon-tile]
+  .kui-list-action-row__label {
+  margin-inline-start: calc(
+    var(--_kui-list-action-row-icon-tile-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+
+/* An application fill defaults its glyph to black or white, whichever
+   contrasts with the fill's lightness. */
+.kui-list-action-row[data-icon-tile="color"] .kui-list-action-row__icon {
+  color: var(--_kui-list-action-row-icon-tile-foreground, #fff);
+}
+
+@supports (color: oklch(from red l c h)) {
+  .kui-list-action-row[data-icon-tile="color"] .kui-list-action-row__icon {
+    color: var(
+      --_kui-list-action-row-icon-tile-foreground,
+      oklch(
+        from var(--_kui-list-action-row-icon-tile-fill)
+          clamp(0, (0.68 - l) * 1000, 1) 0 0
+      )
+    );
+  }
+}
+
+.kui-list-action-row[data-icon-tile-tone="neutral"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-neutral-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-neutral-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-neutral-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="brand"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-brand-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(--kui-color-brand-border-quiet);
+  --_kui-list-action-row-icon-tile-foreground: var(--kui-color-brand-on-quiet);
+}
+
+.kui-list-action-row[data-icon-tile-tone="success"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-success-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-success-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-success-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="warning"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-warning-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(
+    --kui-color-warning-border-quiet
+  );
+  --_kui-list-action-row-icon-tile-foreground: var(
+    --kui-color-warning-on-quiet
+  );
+}
+
+.kui-list-action-row[data-icon-tile-tone="danger"] .kui-list-action-row__icon {
+  --_kui-list-action-row-icon-tile-fill: var(--kui-color-danger-fill-quiet);
+  --_kui-list-action-row-icon-tile-border: var(--kui-color-danger-border-quiet);
+  --_kui-list-action-row-icon-tile-foreground: var(--kui-color-danger-on-quiet);
+}
+
+/* A loading row shows a tile-sized skeleton in place of the fill. */
+.kui-list-action-row[data-icon-tile][data-placeholder="true"]
+  .kui-list-action-row__icon {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* A wrapped label keeps its first line centered on the tile: the tile sits
+   6px below the row's top like a single-line row's, and the label starts
+   half the difference between the tile and its line box lower. */
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__primary {
+  padding-block: 0.375rem;
+}
+
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__icon {
+  inset-block-start: calc(
+    0.375rem + (var(--_kui-list-action-row-icon-tile-size) / 2)
+  );
+}
+
+.kui-list-action-row[data-icon-tile][data-multiline="true"]
+  .kui-list-action-row__label {
+  box-sizing: border-box;
+  min-height: var(--_kui-list-action-row-icon-tile-size);
+  padding-block-start: max(
+    0px,
+    (var(--_kui-list-action-row-icon-tile-size) - 1lh) / 2
+  );
+}
+
+@media (forced-colors: active) {
+  .kui-list-action-row[data-icon-tile] .kui-list-action-row__icon {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  .kui-list-action-row[data-drop-position]::after {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .kui-list-action-row {
+    --kui-list-action-row-border: ButtonText;
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  .kui-list-action-row[data-selected="true"],
+  .kui-list-action-row[data-pressed="true"] {
+    --kui-list-action-row-selected-color: HighlightText;
+    --kui-list-action-row-selected-background: Highlight;
+  }
+}

package/dist/styles/components/collections/list-header/list-header.css

@@ -0,0 +1,236 @@
+.kui-list-header {
+  --kui-list-header-color: var(--kui-color-neutral-on-quiet);
+  --kui-list-header-hover-background: var(--kui-color-neutral-border-quiet);
+  --_kui-list-header-action-icon-size: var(
+    --kui-list-header-action-icon-size,
+    1.125rem
+  );
+  display: flex;
+  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
+  min-width: 0;
+  min-height: var(--kui-list-header-min-height, 2.75rem);
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  box-sizing: border-box;
+  color: var(--kui-list-header-color);
+  background: transparent;
+  align-items: stretch;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-list-header[data-density="compact"] {
+  min-height: var(--kui-list-header-min-height, 2.25rem);
+}
+
+.kui-list-header[data-density="compact"] .kui-list-header__title {
+  min-height: var(
+    --kui-list-header-title-min-height,
+    var(--kui-list-header-min-height, 2.25rem)
+  );
+  padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
+}
+
+/* Wrapped label lines keep the compact header's 4px block inset off the
+   header edges; a one-line label still centers in the unchanged minimum
+   height. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title {
+  padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
+}
+
+.kui-list-header[data-divider="before"],
+.kui-list-header[data-divider="both"] {
+  border-block-start: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
+}
+
+.kui-list-header[data-divider="after"],
+.kui-list-header[data-divider="both"] {
+  border-block-end: 1px solid
+    var(--kui-list-group-divider-color, var(--kui-color-neutral-border-quiet));
+}
+
+.kui-list-header[data-inline="true"] {
+  display: inline-flex;
+  width: auto;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  vertical-align: middle;
+}
+
+.kui-list-header[data-width="content"]:not([data-inline="true"]) {
+  width: auto;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__title,
+.kui-list-header[data-inline="true"] > .kui-list-header__action {
+  vertical-align: middle;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__title {
+  display: inline-flex;
+  width: auto;
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__action {
+  margin-inline-start: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-list-header[data-inline="true"] > .kui-list-header__toggle {
+  width: auto;
+}
+
+.kui-list-header__title,
+.kui-list-header__action {
+  box-sizing: border-box;
+  border: var(--kui-list-header-border-width, 1px) solid transparent;
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: inherit;
+  background: transparent;
+}
+
+.kui-list-header__title {
+  display: flex;
+  min-width: 0;
+  min-height: var(
+    --kui-list-header-title-min-height,
+    var(--kui-list-header-min-height, 2.75rem)
+  );
+  padding-block: var(--kui-list-header-title-padding-block, 0px);
+  padding-inline: var(--kui-list-header-title-padding-inline, 0px);
+  align-items: center;
+  flex: 1 1 auto;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  font: inherit;
+  text-align: start;
+}
+
+.kui-list-header__action,
+.kui-list-header__action-layer {
+  display: grid;
+  place-items: center;
+}
+
+.kui-list-header__action {
+  /* A fitted square: the icon size plus its padding and 1px border, instead of a
+     forced 44px box that left an oversized halo around the ~18px icon and, via the
+     parent's align-items: stretch, a vertically stretched oval. `align-self:
+     center` keeps it centered in the header's 44px row without stretching. Sizing
+     off the icon variable keeps it square and correct at any icon size. */
+  --_kui-list-header-action-size: calc(
+    var(--_kui-list-header-action-icon-size) +
+      (2 * var(--kui-layout-item-padding, 0.5rem)) + 2px
+  );
+  appearance: none;
+  display: inline-flex;
+  width: var(--_kui-list-header-action-size);
+  height: var(--_kui-list-header-action-size);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  align-self: center;
+  cursor: pointer;
+  flex: none;
+}
+
+/* The fitted square is the visual and hover surface; the pointer target is at
+   least 44px in both dimensions. A transparent, out-of-flow layer extends the
+   button's hit area evenly around the square without moving layout or painting
+   anything, and hovering it lights the unchanged fitted square. Standard headers
+   are 44px tall and reserve the 4px inline slot at the logical end, so the
+   extension stays inside the header; the leading 4px falls in the 8px gap before
+   the dormant title. Offsets are from the padding box, hence the extra 1px for the
+   border. */
+.kui-list-header__action::before {
+  --_kui-list-header-action-hit-outset: min(
+    0px,
+    calc((var(--_kui-list-header-action-size) - 2.75rem) / 2)
+  );
+  content: "";
+  position: absolute;
+  inset: calc(var(--_kui-list-header-action-hit-outset) - 1px);
+}
+
+/* Compact headers are 36px tall like the rest of the compact List family, so the
+   hit area widens to 44px but never reaches past the header into a neighboring
+   row or header. */
+.kui-list-header[data-density="compact"] .kui-list-header__action::before {
+  inset-block: -1px;
+}
+
+/* Trailing icon actions share one axis: a toolbar control centers its glyph in a
+   44px group slot flush with the 8px inline margin, so the fitted action centers
+   itself in a slot of that same size instead of sitting flush at the margin
+   (which put its glyph ~4px outside a Pane header's trailing toolbar glyph). The
+   slot, not the button, grows by the difference, so the fitted hover square and
+   its 18px visual are unchanged. Inline headers carry no outer geometry. */
+.kui-list-header:not([data-inline="true"]) > .kui-list-header__action {
+  margin-inline-end: max(
+    0px,
+    calc(
+      (
+          var(--kui-toolbar-group-size, calc(2px + 2.625rem)) -
+            var(--_kui-list-header-action-size)
+        ) /
+        2
+    )
+  );
+}
+
+.kui-list-header__toggle {
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  appearance: none;
+  width: 100%;
+  cursor: pointer;
+}
+
+.kui-list-header__action-layer {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-inline-start: auto;
+  flex: none;
+}
+
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   it keeps the live tone and gives no hover feedback (see the placeholder rule
+   in skeleton.css). A disabled control gives none either. */
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:hover:not(:disabled),
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:hover:not(:disabled) {
+  border-color: var(--kui-color-neutral-border-normal);
+  background: var(--kui-list-header-hover-background);
+}
+
+.kui-list-header__action:focus-visible,
+.kui-list-header__toggle:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* The disabled tone follows the author's `actionDisabled` (the
+   data-kui-disabled marker), so a disabled action or toggle's placeholder is
+   dimmed like the loaded one; only the `not-allowed` cursor is reserved for
+   the live header. The tone is the component's own, never Web Awesome's
+   native `button:disabled`, so it holds without webawesome.css. */
+.kui-list-header__action[data-kui-disabled="true"],
+.kui-list-header__toggle[data-kui-disabled="true"] {
+  opacity: 0.48;
+}
+
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__action:disabled,
+.kui-list-header:not([data-placeholder="true"])
+  .kui-list-header__toggle:disabled {
+  cursor: not-allowed;
+}
+
+.kui-list-header__action > svg,
+.kui-list-header__action-layer > svg {
+  /* min-block-size: 0 overrides the flex item's automatic minimum, which would
+     otherwise resolve to the icon SVG's intrinsic 24px viewBox height and stretch
+     the button past its used icon size. */
+  width: var(--_kui-list-header-action-icon-size);
+  height: var(--_kui-list-header-action-icon-size);
+  min-block-size: 0;
+}