@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/grid.css

@@ -0,0 +1,88 @@
+.kui-grid {
+  --kui-grid-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Grid so a nested Grid never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-column-gap: var(--_kui-grid-gap);
+  --_kui-grid-row-gap: var(--_kui-grid-gap);
+  --_kui-grid-flex: 0 1 auto;
+  --_kui-grid-inset-top: 0;
+  --_kui-grid-inset-right: 0;
+  --_kui-grid-inset-bottom: 0;
+  --_kui-grid-inset-left: 0;
+
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: var(--_kui-grid-inset-top, 0) var(--_kui-grid-inset-right, 0)
+    var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
+  flex: var(--_kui-grid-flex, initial);
+  grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
+  column-gap: var(--_kui-grid-column-gap);
+  row-gap: var(--_kui-grid-row-gap);
+}
+
+.kui-grid[data-control-insets*="t"] {
+  --_kui-grid-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="r"] {
+  --_kui-grid-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="b"] {
+  --_kui-grid-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-control-insets*="l"] {
+  --_kui-grid-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-grid[data-text-insets*="t"] {
+  --_kui-grid-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="r"] {
+  --_kui-grid-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="b"] {
+  --_kui-grid-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-text-insets*="l"] {
+  --_kui-grid-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-grid[data-min-column-width="true"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
+.kui-grid[data-auto-fill="true"] {
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
+/* `fill`: the layout root of a definite-height parent (an app root or a
+   fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
+.kui-grid[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/icon-button.css

@@ -0,0 +1,22 @@
+/* Web Awesome's own icon-button geometry, for a lone LucideIcon: a square one
+   form control height on each side with the glyph centered. Web Awesome
+   applies it only to a lone wa-icon. */
+.kui-icon-button::part(base) {
+  width: var(--wa-form-control-height);
+  min-width: var(--wa-form-control-height);
+  padding: 0;
+  aspect-ratio: 1;
+  justify-content: center;
+}
+
+.kui-icon-button::part(label) {
+  display: flex;
+  justify-content: center;
+}
+
+/* Beside a field in a ListInsetControl, the square keeps its size instead of
+   growing to share the row, and lines up with the field below its label. */
+.kui-list-inset-control > .kui-icon-button {
+  flex: none;
+  align-self: flex-end;
+}

package/dist/styles/icon-toggle-button.css

@@ -0,0 +1,83 @@
+/* The single contained ToolbarControlGroup's geometry, standalone: a 44px
+   filled, bordered control whose 2px-inset face lifts to the raised surface
+   on hover and stays raised, in the brand foreground, while pressed. */
+.kui-icon-toggle-button {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --_kui-icon-toggle-button-inset: var(
+    --kui-layout-highlight-inset,
+    0.125rem
+  );
+  /* One full-size track for the face. The button sets its own track and
+     alignment because native or document button styles center content,
+     which would shrink the face to the icon. */
+  display: inline-grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  place-content: stretch;
+  place-items: stretch;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin: 0;
+  padding: var(--_kui-icon-toggle-button-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--_kui-icon-toggle-button-radius);
+  color: var(--kui-color-neutral-on-quiet);
+  background: var(--kui-color-neutral-fill-normal);
+  cursor: pointer;
+  flex: none;
+  font: inherit;
+}
+
+.kui-icon-toggle-button[data-shape="rounded"] {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
+.kui-icon-toggle-button__face {
+  display: grid;
+  border-radius: max(
+    0px,
+    calc(
+      var(--_kui-icon-toggle-button-radius) -
+        var(--_kui-icon-toggle-button-inset) - 1px
+    )
+  );
+  place-items: center;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.kui-icon-toggle-button:hover:not(:disabled) > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] {
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-icon-toggle-button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-icon-toggle-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-icon-toggle-button__face {
+    transition: none;
+  }
+}

package/dist/styles/layout.css

@@ -1,4 +1,5 @@
 @import "./pane.css";
+@import "./content-item.css";
 
 /* Shared application content geometry for Pane children and standalone stacks. */
 
@@ -10,27 +11,6 @@
   gap: var(--kui-layout-content-gap, 1.5rem);
 }
 
-.kui-content-item {
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: var(--kui-layout-item-border-width, 1px) solid
-    var(--kui-content-item-border, transparent);
-  border-radius: var(
-    --kui-content-item-radius,
-    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
-  );
-  background: var(--kui-content-item-background, transparent);
-}
-
-.kui-content-item--pill {
-  --kui-content-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-}
-
 .kui-control-cluster {
   display: flex;
   min-width: 0;

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

@@ -10,9 +10,30 @@
   --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: 2.75rem;
+  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);
@@ -21,7 +42,47 @@
   align-items: stretch;
 }
 
-.kui-list-action-row:has(.kui-list-action-row__primary:hover) {
+.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);
 }
@@ -41,10 +102,44 @@
   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: 2.75rem;
+  min-height: var(--_kui-list-action-row-min-height);
   padding: 0;
   border: 0;
   appearance: none;
@@ -59,8 +154,9 @@
   display: block;
   flex: 1 1 auto;
   min-width: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  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;
 }
 
@@ -68,19 +164,34 @@
   outline: none;
 }
 
-.kui-list-action-row__primary:disabled,
-.kui-list-action-row__trailing-action:disabled {
-  cursor: not-allowed;
+/* 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-layout-item-padding, 0.5rem));
+  inset-inline-start: calc(1px + var(--_kui-list-action-row-padding-inline));
   display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--_kui-list-action-row-icon-size);
+  height: var(--_kui-list-action-row-icon-size);
   color: currentColor;
   transform: translateY(-50%);
   place-items: center;
@@ -88,25 +199,57 @@
 
 .kui-list-action-row__icon svg {
   display: block;
-  width: 1.5rem;
-  height: 1.5rem;
+  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(
-    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
+    var(--_kui-list-action-row-min-height) -
+      (2 * var(--_kui-list-action-row-padding-block))
   );
   overflow: hidden;
-  text-overflow: ellipsis;
   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(
-    1.5rem + var(--kui-layout-item-gap, 0.5rem)
+    var(--_kui-list-action-row-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
   );
 }
 
@@ -117,9 +260,14 @@
   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-layout-item-padding, 0.5rem) + (1lh / 2)
+    var(--_kui-list-action-row-padding-block) + (1lh / 2)
   );
 }
 
@@ -131,6 +279,27 @@
   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);
 }
@@ -145,7 +314,144 @@
   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;