@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.71

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

@@ -0,0 +1,258 @@
+.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
+  );
+  display: flex;
+  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
+  min-height: 2.75rem;
+  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"] {
+  min-height: 2.25rem;
+}
+
+.kui-list-action-row[data-density="compact"]
+  :is(.kui-list-action-row__primary, .kui-list-action-row__trailing-action) {
+  min-height: 2.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;
+}
+
+.kui-list-action-row:not([data-placeholder="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;
+}
+
+.kui-list-action-row__primary,
+.kui-list-action-row__trailing-action {
+  height: auto !important;
+  min-height: 2.75rem;
+  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: var(--kui-layout-item-padding, 0.5rem);
+  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  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-layout-item-padding, 0.5rem));
+  display: grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: currentColor;
+  transform: translateY(-50%);
+  place-items: center;
+}
+
+.kui-list-action-row__icon svg {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.kui-list-action-row__label {
+  display: grid;
+  min-width: 0;
+  min-height: calc(
+    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
+  );
+  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(
+    1.5rem + 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-layout-item-padding, 0.5rem) + (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;
+}
+
+@media (forced-colors: active) {
+  .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/list-header.css

@@ -0,0 +1,229 @@
+.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);
+}
+
+.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;
+}

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);
+}