@kerfjs/ui 5.0.0-beta.75 → 5.0.0-beta.76

package/dist/styles/components/actions/toolbar-text/toolbar-text.css

@@ -0,0 +1,153 @@
+.kui-toolbar-text {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--kui-color-neutral-on-quiet);
+  font-weight: 650;
+  line-height: 1;
+  align-items: center;
+}
+
+button.kui-toolbar-text {
+  appearance: none;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  font-family: inherit;
+  text-align: start;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+button.kui-toolbar-text:hover {
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+button.kui-toolbar-text:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 0.125rem;
+}
+
+/* In a Toolbar zone, a title fills the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) and centers its first line in
+   it; further lines of a wrapped title continue below the band. These rules
+   precede the size and wrap rules below, which keep their own minimum
+   heights. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text[data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
+/* A filling title grows into its row's free space and truncates there. */
+.kui-toolbar-text[data-fill="true"] {
+  flex: 1 1 auto;
+}
+
+/* The text lives in a block child, not directly in the flex box, so
+   `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
+.kui-toolbar-text__text {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  /* Keep the line box larger than the font's em square. Glyph ink can extend
+     below a 1em line box, so clipping for ellipsis must not also shave off
+     descenders such as g, j, p, q, and y. */
+  line-height: 1.2;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
+  height: auto;
+  min-height: 2.75rem;
+  color: var(--kui-color-text);
+  letter-spacing: -0.025em;
+}
+
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
+.kui-toolbar-text[data-size="large"] {
+  font-size: var(--kui-font-m);
+  letter-spacing: -0.015em;
+}
+
+.kui-toolbar-text[data-size="default"] {
+  font-size: var(--kui-font-s);
+}
+
+/* Every size keeps the inherited UI sans stack: compact identity text is a
+   label, not code. (A monospace role here resolved through Web Awesome's
+   `ui-monospace, monospace` code stack; Chromium does not
+   recognize `ui-monospace`, so small labels fell back to generic monospace.) */
+.kui-toolbar-text[data-size="small"] {
+  font-size: var(--kui-font-xs);
+}
+
+.kui-toolbar-text[data-size="xsmall"] {
+  font-size: var(--kui-font-2xs);
+}
+
+/* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
+.kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
+  text-overflow: clip;
+}
+
+/* Wrap onto multiple lines. The box grows to fit and switches from the centered
+   single-line row to a top-aligned block with readable leading; a min-height keeps
+   a one-line label at the toolbar row height. */
+.kui-toolbar-text[data-wrap="true"] {
+  align-items: flex-start;
+  height: auto;
+  min-height: 2.5rem;
+}
+
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
+  min-height: 2.75rem;
+}
+
+.kui-toolbar-text[data-wrap="true"] .kui-toolbar-text__text {
+  white-space: normal;
+  line-height: 1.25;
+}
+
+/* Wrap capped to N lines with an ellipsis at the cut. `-webkit-line-clamp` needs
+   the box display and emits the … itself; the unprefixed `line-clamp` follows for
+   engines that ship it. */
+.kui-toolbar-text[data-wrap="true"][data-max-lines] .kui-toolbar-text__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--kui-toolbar-text-max-lines);
+  line-clamp: var(--kui-toolbar-text-max-lines);
+  overflow: hidden;
+}
+
+/* Wrap capped to N lines without an ellipsis: clip at a max-height instead of
+   line-clamp (which always ellipsizes). */
+.kui-toolbar-text[data-wrap="true"][data-max-lines][data-ellipsis="false"]
+  .kui-toolbar-text__text {
+  display: block;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
+}

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

@@ -0,0 +1,133 @@
+.kui-list {
+  --kui-list-divider-color: var(--kui-color-neutral-border-normal);
+  --kui-list-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every List so a nested List that
+     omits `gap` or `flex` never inherits its ancestor's; the component's inline
+     style overrides these defaults for the props it does set. */
+  --_kui-list-gap: 0;
+  --_kui-list-flex: 0 1 auto;
+  --_kui-list-inset-top: 0;
+  --_kui-list-inset-right: 0;
+  --_kui-list-inset-bottom: 0;
+  --_kui-list-inset-left: 0;
+  --_kui-list-divider-top: transparent;
+  --_kui-list-divider-right: transparent;
+  --_kui-list-divider-bottom: transparent;
+  --_kui-list-divider-left: transparent;
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: var(--_kui-list-inset-top, 0) var(--_kui-list-inset-right, 0)
+    var(--_kui-list-inset-bottom, 0) var(--_kui-list-inset-left, 0);
+  flex: var(--_kui-list-flex, initial);
+  flex-direction: column;
+  align-items: stretch;
+  align-content: space-between;
+  justify-content: flex-start;
+  gap: var(--_kui-list-gap, 0);
+  box-shadow:
+    inset 0 1px var(--_kui-list-divider-top),
+    inset -1px 0 var(--_kui-list-divider-right),
+    inset 0 -1px var(--_kui-list-divider-bottom),
+    inset 1px 0 var(--_kui-list-divider-left);
+}
+
+.kui-list[data-control-insets*="t"] {
+  --_kui-list-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="r"] {
+  --_kui-list-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="b"] {
+  --_kui-list-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="l"] {
+  --_kui-list-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-text-insets*="t"] {
+  --_kui-list-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="r"] {
+  --_kui-list-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="b"] {
+  --_kui-list-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="l"] {
+  --_kui-list-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-h-align="left"] {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.kui-list[data-h-align="center"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-list[data-h-align="right"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.kui-list[data-v-align="middle"] {
+  justify-content: space-around;
+}
+
+.kui-list[data-v-align="bottom"] {
+  justify-content: flex-end;
+}
+
+.kui-list[data-v-align="full"] {
+  justify-content: space-between;
+}
+
+.kui-list[data-scrollable="true"] {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.kui-list:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
+  --_kui-list-divider-top: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
+  --_kui-list-divider-right: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
+  --_kui-list-divider-bottom: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
+  --_kui-list-divider-left: var(--kui-list-divider-color);
+}
+
+/* `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-list[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/components/collections/list-action-row/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;
+  }
+}