@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/dist/styles/components/collections/list-header/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/components/collections/list-inset-control/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/components/collections/list-inset-text/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);
+}

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

@@ -0,0 +1,255 @@
+.kui-list-item {
+  display: grid;
+  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
+  min-height: var(--kui-list-item-min-height, 2.75rem);
+  overflow: hidden;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding-block: var(
+    --kui-list-item-padding-block,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
+  padding-inline: var(
+    --kui-list-item-padding-inline,
+    var(--kui-layout-item-padding, 0.5rem)
+  );
+  box-sizing: border-box;
+  border: var(--kui-list-item-border-width, 1px) solid
+    var(--kui-list-item-border, transparent);
+  border-radius: var(
+    --kui-list-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  color: var(--kui-list-item-color, var(--kui-color-neutral-on-normal));
+  background: var(--kui-list-item-background, transparent);
+  cursor: pointer;
+  grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
+  align-items: var(--kui-list-item-align-items, center);
+  column-gap: var(--kui-list-item-gap, var(--kui-layout-item-gap, 0.5rem));
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+}
+
+.kui-list-item[data-density="compact"] {
+  min-height: var(--kui-list-item-min-height, 2.25rem);
+  padding-block: var(--kui-list-item-padding-block, 0.25rem);
+}
+
+.kui-list-item[data-density="spacious"] {
+  min-height: var(--kui-list-item-min-height, 3.25rem);
+  padding-block: var(--kui-list-item-padding-block, 0.75rem);
+}
+
+.kui-list-item[data-has-description="true"] {
+  min-height: var(--kui-list-item-min-height, 3.25rem);
+}
+
+.kui-list-item[data-density="compact"][data-has-description="true"] {
+  min-height: var(--kui-list-item-min-height, 2.75rem);
+}
+
+.kui-list-item[data-divider="before"],
+.kui-list-item[data-divider="both"] {
+  border-block-start-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-item[data-divider="after"],
+.kui-list-item[data-divider="both"] {
+  border-block-end-color: var(
+    --kui-list-group-divider-color,
+    var(--kui-color-neutral-border-quiet)
+  );
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.kui-list-item[data-has-icon="true"] {
+  grid-template-columns: var(
+    --kui-list-item-columns,
+    var(--kui-list-item-icon-size, 1.125rem) minmax(0, 1fr) auto
+  );
+}
+
+.kui-list-item[data-has-icon="true"] .kui-list-item__icon {
+  grid-column: 1;
+}
+
+.kui-list-item[data-has-icon="true"] .kui-list-item__label {
+  grid-column: 2;
+}
+
+.kui-list-item[data-has-icon="true"] .kui-list-item__trailing {
+  grid-column: 3;
+}
+
+.kui-list-item[data-has-icon="false"] .kui-list-item__label {
+  grid-column: 1;
+}
+
+.kui-list-item[data-has-icon="false"] .kui-list-item__trailing {
+  grid-column: 2;
+}
+
+.kui-list-item:hover:not([data-placeholder="true"]) {
+  border-color: var(
+    --kui-list-item-hover-border,
+    var(--kui-color-neutral-border-normal)
+  );
+  background: var(
+    --kui-list-item-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+
+/* 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` prop (the data-kui-disabled
+   marker), so a disabled row's placeholder is dimmed like the loaded row; only
+   the `not-allowed` cursor is reserved for the live row. */
+.kui-list-item[data-kui-disabled="true"] {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 0.58;
+}
+
+.kui-list-item:is(:disabled, [aria-disabled="true"]):not(
+    [data-placeholder="true"]
+  ) {
+  cursor: not-allowed;
+}
+
+.kui-list-item[aria-current="page"],
+.kui-list-item[aria-pressed="true"] {
+  border-color: var(
+    --kui-list-item-selected-border,
+    var(--kui-color-brand-border-quiet)
+  );
+  color: var(
+    --kui-list-item-selected-color,
+    var(--kui-color-neutral-on-normal)
+  );
+  background: var(
+    --kui-list-item-selected-background,
+    var(--kui-color-brand-fill-normal)
+  );
+  font-weight: 650;
+}
+
+.kui-list-item:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-list-item__icon {
+  display: grid;
+  width: var(--kui-list-item-icon-size, 1.125rem);
+  height: var(--kui-list-item-icon-size, 1.125rem);
+  color: var(--kui-list-item-icon-color, currentColor);
+  place-items: center;
+}
+
+.kui-list-item__icon svg {
+  display: block;
+  width: var(--kui-list-item-icon-size, 1.125rem);
+  height: var(--kui-list-item-icon-size, 1.125rem);
+}
+
+.kui-list-item__label {
+  display: grid;
+  min-width: 0;
+  max-width: var(--kui-list-item-label-max-width, none);
+  overflow: hidden;
+  font-weight: var(--kui-list-item-label-weight, inherit);
+  white-space: nowrap;
+}
+
+/* The label is a grid container, and `text-overflow` never reaches a grid
+   item's text, so each line of the stack clips and ellipsizes itself: a long
+   label ends in "…" before the trailing slot instead of being cut mid-glyph. */
+.kui-list-item__primary-label,
+.kui-list-item__description {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-list-item__description {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.kui-list-item[data-multiline="true"] {
+  height: fit-content;
+  white-space: normal;
+  /* Size the single grid row to its content and center that track in the
+     44px minimum, instead of stretching it. The start-aligned icon then
+     measures its first-line offset from the same edge the centered label
+     starts at; a stretched track left a short label centered 1.4px below
+     the icon's first-line position. */
+  align-content: center;
+}
+
+.kui-list-item[data-multiline="true"] .kui-list-item__label {
+  overflow: visible;
+  white-space: normal;
+}
+
+/* A multiline row shows its whole label, so a single word wider than the
+   column (a long component or file name) breaks onto the next line rather
+   than running under the trailing slot. */
+.kui-list-item[data-multiline="true"]
+  :is(.kui-list-item__primary-label, .kui-list-item__description) {
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+
+.kui-list-item[data-multiline="true"] .kui-list-item__icon {
+  align-self: start;
+  margin-block-start: calc(
+    (1lh - var(--kui-list-item-icon-size, 1.125rem)) / 2
+  );
+}
+
+.kui-list-item[data-multiline="true"][data-icon-align="center"]
+  .kui-list-item__icon {
+  align-self: center;
+  margin-block-start: 0;
+}
+
+.kui-list-item__trailing {
+  display: inline-flex;
+  min-width: 0;
+  color: var(--kui-list-item-trailing-color, inherit);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-list-item[data-state="drag-target"] {
+  outline: var(
+    --kui-list-item-drag-target-outline,
+    2px solid var(--kui-color-brand-border-normal)
+  );
+  outline-offset: var(--kui-list-item-drag-target-outline-offset, -2px);
+  background: var(
+    --kui-list-item-drag-target-background,
+    var(--kui-color-brand-fill-quiet)
+  );
+}
+
+.kui-list-item__status {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 500;
+}
+
+.kui-list-item__trailing > svg {
+  width: 1rem;
+  height: 1rem;
+}

package/dist/styles/components/data-display/value-table/value-table.css

@@ -0,0 +1,107 @@
+.kui-value-table {
+  --kui-value-table-border: var(--kui-color-neutral-border-normal);
+  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
+  display: grid;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow: hidden;
+  border: 1px solid var(--kui-value-table-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(
+    --kui-value-table-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+.kui-value-table__row {
+  --_kui-value-table-inline-padding: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  --_kui-value-table-separator-start: var(--_kui-value-table-inline-padding);
+  position: relative;
+  display: grid;
+  min-height: 2.55rem;
+  padding-block: var(
+    --kui-value-table-row-padding-block,
+    var(--_kui-value-table-density-padding-block, 0.5rem)
+  );
+  padding-inline: var(--_kui-value-table-inline-padding);
+  box-sizing: border-box;
+  /* Two content-sized tracks share the free space equally, and each stops
+     growing once its content fits. A short value keeps its whole width and a
+     long label takes the rest (ending a word that still does not fit in an
+     ellipsis); a short label keeps its width beside a long, wrapping value;
+     when both are long they split the row. A `1fr` value track would get
+     nothing until the label reached its full width, starving the value to 0px
+     beside a long single-word label. */
+  grid-template-columns: var(
+    --kui-value-table-row-columns,
+    minmax(0, auto) minmax(0, auto)
+  );
+  align-items: center;
+  gap: var(
+    --kui-value-table-row-gap,
+    var(--_kui-value-table-density-gap, var(--kui-layout-item-gap, 0.5rem))
+  );
+}
+.kui-value-table[data-density="compact"] .kui-value-table__row {
+  --_kui-value-table-density-padding-block: 0.25rem;
+  --_kui-value-table-density-gap: 0.25rem;
+}
+.kui-value-table__row[data-has-icon="true"] {
+  --_kui-value-table-separator-start: calc(
+    var(--_kui-value-table-inline-padding) + var(--_kui-value-table-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+.kui-value-table__row + .kui-value-table__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-value-table-inline-padding);
+  left: var(--_kui-value-table-separator-start);
+  border-top: 1px solid var(--kui-value-table-border);
+  content: "";
+}
+.kui-value-table__row dt {
+  display: flex;
+  /* The label hugs its content (up to its column) rather than stretching, so
+     its box does not change with the value's width — a placeholder row keeps
+     the live row's label geometry beside its skeleton value. */
+  max-width: 100%;
+  min-width: 0;
+  justify-self: start;
+  color: var(--kui-color-text);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__icon {
+  display: grid;
+  width: var(--_kui-value-table-icon-size);
+  height: var(--_kui-value-table-icon-size);
+  flex: none;
+  place-items: center;
+}
+.kui-value-table__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-value-table__label {
+  min-width: 0;
+  overflow: hidden;
+  /* A multi-word label wraps at spaces; a single word wider than the label
+     column (a long component or file name) ends in an ellipsis instead of
+     running under the value. */
+  text-overflow: ellipsis;
+}
+.kui-value-table__row dd {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kui-color-text);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-space-2xs);
+  font-weight: var(--kui-font-weight-semibold);
+  text-align: end;
+}

package/dist/styles/components/feedback/anchored-surface/anchored-surface.css

@@ -0,0 +1,15 @@
+.kui-anchored-surface {
+  box-sizing: border-box;
+  inset: auto;
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
+  max-height: calc(100dvh - 2 * var(--kui-space-xs, 8px));
+  overflow: auto;
+  padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
+  color: var(--kui-color-text, inherit);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+}