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

package/dist/styles/list-header.css

@@ -8,9 +8,8 @@
   display: flex;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-width: 0;
-  min-height: 2.75rem;
+  min-height: var(--kui-list-header-min-height, 2.75rem);
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: 0;
   box-sizing: border-box;
   color: var(--kui-list-header-color);
   background: transparent;
@@ -18,10 +17,72 @@
   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: 1px solid transparent;
+  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;
@@ -30,8 +91,12 @@
 .kui-list-header__title {
   display: flex;
   min-width: 0;
-  min-height: 2.75rem;
-  padding: var(--kui-layout-item-padding, 0.5rem);
+  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);
@@ -39,53 +104,6 @@
   text-align: start;
 }
 
-.kui-list-header__label {
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  font-size: var(--kui-font-xs);
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.kui-list-header__badge {
-  display: inline-flex;
-  min-height: 1.5rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  align-items: center;
-  flex: none;
-  font-size: var(--kui-font-xs);
-  line-height: 1;
-}
-
-.kui-list-header__count {
-  display: inline-grid;
-  min-width: 1.35rem;
-  height: 1.35rem;
-  padding-inline: 0.35rem;
-  box-sizing: border-box;
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-color-neutral-on-quiet);
-  background: var(--kui-color-neutral-fill-quiet);
-  place-items: center;
-  flex: none;
-  font-size: var(
-    --kui-list-header-count-font-size,
-    var(--wa-font-size-3xs, 0.625rem)
-  );
-  font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1;
-}
-
 .kui-list-header__action,
 .kui-list-header__action-layer {
   display: grid;
@@ -109,12 +127,58 @@
   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;
@@ -127,8 +191,13 @@
   flex: none;
 }
 
-.kui-list-header__action:hover,
-.kui-list-header__toggle:hover {
+/* 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);
 }
@@ -139,14 +208,21 @@
   outline-offset: 1px;
 }
 
-.kui-list-header__action:disabled {
-  cursor: not-allowed;
+/* 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__action:disabled:hover {
-  border-color: transparent;
-  background: transparent;
+.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,

package/dist/styles/list-inset-control.css

@@ -0,0 +1,30 @@
+.kui-list-inset-control {
+  display: flex;
+  margin: 0;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+
+/* `justify-content: stretch` is a no-op on a flex row, so the documented
+   stretch comes from the children: each grows from its natural width to share
+   the row, and may shrink below its intrinsic minimum instead of overflowing. */
+.kui-list-inset-control > * {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.kui-list-inset-control[data-sides*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list-inset-control[data-sides*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}

package/dist/styles/list-inset-text.css

@@ -0,0 +1,29 @@
+.kui-list-inset-text {
+  margin: 0;
+  border: 0 solid transparent;
+  padding: 0;
+}
+
+.kui-list-inset-text[data-sides*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+  border-top-width: 1px;
+  padding-top: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+  border-right-width: 1px;
+  padding-right: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+  border-bottom-width: 1px;
+  padding-bottom: var(--kui-layout-item-padding, 0.5rem);
+}
+
+.kui-list-inset-text[data-sides*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+  border-left-width: 1px;
+  padding-left: var(--kui-layout-item-padding, 0.5rem);
+}