@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/styles/components/feedback/edge-activity-indicator/edge-activity-indicator.css

@@ -0,0 +1,127 @@
+/* A fixed, layout-free host at the top edge: it allocates no space and never
+   takes the pointer. Its strip and pill scale in from the edge while busy. */
+.kui-edge-activity-indicator {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-brand-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-brand-on-loud);
+  position: fixed;
+  z-index: var(--kui-edge-activity-indicator-z-index, 2147483000);
+  inset: var(--kui-safe-area-block-start, 0px) 0 auto 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.kui-edge-activity-indicator[data-inset="none"] {
+  inset-block-start: 0;
+}
+
+.kui-edge-activity-indicator[data-tone="neutral"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-neutral-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="pop"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-pop-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-pop-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="success"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-success-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-success-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="warning"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-warning-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-warning-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="danger"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-danger-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-danger-on-loud);
+}
+
+/* 3px bars on a 5px pitch, drawn by one gradient. A repeating wave mask (1px
+   to 4px tall, hanging from the edge) slides across them, so each bar grows
+   and shrinks slightly out of phase with its neighbor. */
+.kui-edge-activity-indicator__strip,
+.kui-edge-activity-indicator__message {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.kui-edge-activity-indicator__strip {
+  height: 0.25rem;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--_kui-edge-activity-indicator-fill) 0 0.1875rem,
+    transparent 0.1875rem 0.3125rem
+  );
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4' viewBox='0 0 100 4'%3E%3Cpath d='M0 0H100L100 1.00 L98 1.01 L96 1.05 L94 1.11 L92 1.19 L90 1.29 L88 1.41 L86 1.54 L84 1.70 L82 1.86 L80 2.04 L78 2.22 L76 2.41 L74 2.59 L72 2.78 L70 2.96 L68 3.14 L66 3.30 L64 3.46 L62 3.59 L60 3.71 L58 3.81 L56 3.89 L54 3.95 L52 3.99 L50 4.00 L48 3.99 L46 3.95 L44 3.89 L42 3.81 L40 3.71 L38 3.59 L36 3.46 L34 3.30 L32 3.14 L30 2.96 L28 2.78 L26 2.59 L24 2.41 L22 2.22 L20 2.04 L18 1.86 L16 1.70 L14 1.54 L12 1.41 L10 1.29 L8 1.19 L6 1.11 L4 1.05 L2 1.01 L0 1.00Z'/%3E%3C/svg%3E")
+    0 0 / 6.25rem 100% repeat-x;
+  animation: kui-edge-activity-indicator-wave 1s linear infinite paused;
+}
+
+.kui-edge-activity-indicator[data-busy="true"]
+  > .kui-edge-activity-indicator__strip {
+  opacity: 1;
+  transform: scaleY(1);
+  animation-play-state: running;
+}
+
+@keyframes kui-edge-activity-indicator-wave {
+  to {
+    mask-position: 6.25rem 0;
+  }
+}
+
+/* The status pill hangs centered from the edge, over the strip. */
+.kui-edge-activity-indicator__message {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  max-width: calc(100vw - 2 * var(--kui-space-m));
+  padding: 0.125rem var(--kui-space-s);
+  overflow: hidden;
+  border-radius: 0 0 0.5rem 0.5rem;
+  color: var(--_kui-edge-activity-indicator-on);
+  background: var(--_kui-edge-activity-indicator-fill);
+  font-size: var(--kui-font-2xs);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateX(-50%) scaleY(0);
+}
+
+.kui-edge-activity-indicator__message[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(-50%) scaleY(1);
+}
+
+:dir(rtl) .kui-edge-activity-indicator__message {
+  transform: translateX(50%) scaleY(0);
+}
+:dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+  transform: translateX(50%) scaleY(1);
+}
+
+/* Reduced motion: no wave and no scale; the strip and pill only fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator__message {
+    transition: opacity 200ms ease;
+  }
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator[data-busy="true"]
+    > .kui-edge-activity-indicator__strip {
+    mask: none;
+    transform: none;
+    animation: none;
+  }
+  .kui-edge-activity-indicator__message,
+  .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(-50%);
+  }
+  :dir(rtl) .kui-edge-activity-indicator__message,
+  :dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(50%);
+  }
+}

package/dist/styles/components/feedback/empty-state/empty-state.css

@@ -0,0 +1,47 @@
+.kui-empty-state {
+  --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-empty-state-title: var(--kui-color-text);
+  display: grid;
+  width: min(
+    calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem))),
+    28rem
+  );
+  min-height: 12rem;
+  margin: auto;
+  padding: var(--kui-space-xl);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-empty-state-border, transparent);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-empty-state-foreground);
+  background: var(--kui-empty-state-background, transparent);
+  place-items: center;
+  place-content: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: center;
+}
+.kui-empty-state__icon {
+  display: grid;
+  min-width: 2rem;
+  min-height: 2rem;
+  margin-block-end: var(--kui-space-xs);
+  color: inherit;
+  place-items: center;
+}
+.kui-empty-state__icon svg {
+  width: 2rem;
+  height: 2rem;
+  stroke-width: 1.5;
+}
+.kui-empty-state strong {
+  color: var(--kui-empty-state-title);
+  font-size: var(--kui-font-l);
+  font-weight: 650;
+}
+.kui-empty-state > span {
+  max-width: 24rem;
+  font-size: var(--kui-font-s);
+  line-height: 1.45;
+}
+.kui-empty-state__action {
+  margin-block-start: var(--kui-space-xs);
+}

package/dist/styles/components/feedback/loading-spinner/loading-spinner.css

@@ -0,0 +1,25 @@
+.kui-loading-spinner {
+  display: block;
+  width: 1em;
+  height: 1em;
+  overflow: visible;
+  fill: currentColor;
+}
+.kui-loading-spinner[data-size] {
+  width: var(--_kui-loading-spinner-size);
+  height: var(--_kui-loading-spinner-size);
+}
+.kui-loading-spinner path {
+  transform-origin: 12px 12px;
+  animation: kui-loading-spinner-rotate 0.85s linear infinite;
+}
+@keyframes kui-loading-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-loading-spinner path {
+    animation: none;
+  }
+}

package/dist/styles/components/feedback/skeleton/skeleton.css

@@ -0,0 +1,92 @@
+.kui-skeleton {
+  --kui-skeleton-radius: var(--kui-radius-s);
+
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 1em;
+  border-radius: var(--kui-skeleton-radius);
+  /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
+     without drawing the eye or implying progress. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's foreground, since a text-color tint vanishes on a
+     saturated fill. */
+  background: var(
+    --_kui-skeleton-fill,
+    color-mix(in srgb, var(--kui-color-text) 12%, transparent)
+  );
+  vertical-align: middle;
+}
+
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
+.kui-skeleton[data-block="true"] {
+  display: block;
+}
+
+.kui-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-skeleton-lines .kui-skeleton {
+  height: 0.8em;
+}
+
+/* Placeholder mode. A component's `placeholder` keeps its controls `disabled` so
+   they stay inert and out of the keyboard order, but a placeholder is loading,
+   not unavailable: it must look exactly like the live component except for its
+   skeleton values. Neutralize generic disabled chrome, including Web Awesome's
+   layered native `button:disabled { opacity: 0.5; cursor: not-allowed }`.
+   Opacity carries zero specificity so a component's own opacity rules (a
+   hover-revealed control that is invisible until interaction) still win;
+   components exclude placeholders from their own disabled tone. The cursor is
+   the non-interactive default, never `not-allowed`.
+
+   A control the author disabled carries `data-kui-disabled="true"` (set from
+   the component's own disabled prop, independent of placeholder). It is
+   unavailable once loaded, so its placeholder keeps the live disabled tone:
+   the reset skips it, and components key their disabled tone on the marker. */
+:where(
+  [data-placeholder="true"]:disabled:not([data-kui-disabled="true"]),
+  [data-placeholder="true"] :disabled:not([data-kui-disabled="true"])
+) {
+  opacity: 1;
+}
+
+[data-placeholder="true"]:disabled,
+[data-placeholder="true"] :disabled {
+  cursor: default;
+}
+
+@media (forced-colors: active) {
+  .kui-skeleton {
+    background: GrayText;
+  }
+}
+
+/* A placeholder StateBanner's badge holds this skeleton instead of text. With
+   no text, the skeleton's baseline would be synthesized from its bottom edge,
+   sitting the badge higher than the live one by a font-dependent amount. A
+   zero-width character gives it a text baseline in the badge's own font and
+   line height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/components/feedback/state-banner/state-banner.css

@@ -0,0 +1,297 @@
+.kui-state-banner {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-neutral-background,
+      var(--kui-color-neutral-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-neutral-border,
+      var(--kui-color-neutral-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(
+      --kui-state-banner-neutral-foreground,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
+  --_kui-state-banner-action-background: var(
+    --kui-state-banner-action-background,
+    color-mix(in srgb, var(--kui-color-surface) 52%, transparent)
+  );
+  --_kui-state-banner-action-hover-background: var(
+    --kui-state-banner-action-hover-background,
+    var(--kui-color-surface)
+  );
+  /* A wrapping flex row, not a three-track grid: a trailing action stays
+     beside the copy only while the copy keeps its minimum readable width,
+     then wraps onto its own trailing row. The decision follows the banner's
+     own width and content, so it holds on a phone, in a narrow rail on a wide
+     screen, and in an intrinsically sized host such as CornerStatus, where a
+     container query's size containment would collapse the banner. A grid
+     gave the action an `auto` track at its full width and squeezed the copy
+     until its words ran under the action. */
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 2.75rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--_kui-state-banner-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--_kui-state-banner-foreground);
+  background: var(--_kui-state-banner-background);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+/* The detail is secondary through its smaller, regular-weight type, not a
+   dimmed color: an opacity cut toned details below WCAG AA over their fills.
+   Only the neutral tone has a quieter text color that still clears AA. */
+.kui-state-banner[data-tone="neutral"] {
+  --_kui-state-banner-detail: var(
+    --kui-state-banner-detail,
+    var(--kui-color-neutral-on-quiet)
+  );
+}
+.kui-state-banner[data-tone="info"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(--kui-state-banner-info-background, var(--kui-color-brand-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-info-border, var(--kui-color-brand-border-quiet))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
+  );
+}
+.kui-state-banner[data-tone="pop"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(--kui-state-banner-pop-background, var(--kui-color-pop-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-pop-border, var(--kui-color-pop-border-normal))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-pop-foreground, var(--kui-color-pop-on-fill))
+  );
+}
+.kui-state-banner[data-tone="success"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-success-background,
+      var(--kui-color-success-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-success-border,
+      var(--kui-color-success-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-success-foreground, var(--kui-color-success-on-fill))
+  );
+}
+.kui-state-banner[data-tone="warning"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-warning-background,
+      var(--kui-color-warning-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(
+      --kui-state-banner-warning-border,
+      var(--kui-color-warning-border-normal)
+    )
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-warning-foreground, var(--kui-color-warning-on-fill))
+  );
+}
+.kui-state-banner[data-tone="danger"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(
+      --kui-state-banner-danger-background,
+      var(--kui-color-danger-fill-quiet)
+    )
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-danger-border, var(--kui-color-danger-border-quiet))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-fill))
+  );
+}
+/* A strip is a full-width band at a layout edge rather than a card beside the
+   work: flush, square, and divided from its neighbor only on the edges it
+   names, in the tone's own border color. Its inline padding lands the copy on
+   the content-text column a card banner's copy uses (8px margin + 1px border
+   + 8px padding), so a strip above a pane lines up with the pane's text. */
+.kui-state-banner[data-presentation="strip"] {
+  margin-inline: 0;
+  padding-block: var(--kui-space-xs);
+  padding-inline: calc(1px + 1rem);
+  border-width: 0;
+  border-radius: 0;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="t"] {
+  border-top-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="r"] {
+  border-right-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="b"] {
+  border-bottom-width: 1px;
+}
+.kui-state-banner[data-presentation="strip"][divider-sides*="l"] {
+  border-left-width: 1px;
+}
+/* Inside a CornerStatus the banner floats over the page at a viewport corner:
+   the corner's gutter replaces the inline margin, elevation separates it from
+   whatever content it covers, and the translucent tone fill composites over
+   the opaque surface so that content never shows through the copy. */
+.kui-corner-status > .kui-state-banner {
+  margin-inline: 0;
+  background:
+    linear-gradient(
+      var(--_kui-state-banner-background),
+      var(--_kui-state-banner-background)
+    ),
+    var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-l);
+}
+.kui-state-banner__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+}
+.kui-state-banner__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+/* The copy is inline flow, not flex: a wrapping title lays out as text, so the
+   badge follows the title's last word instead of the right edge of a
+   flex-shrunk title box, and the detail stays beside them only while it fits
+   whole. Otherwise it moves to its own line and truncates at the full copy
+   width. Flex shrank the title and detail together, which left a gap before
+   the badge and cut the detail early. Each item's trailing margin is the item
+   gap, so no margin lands at the start of a wrapped line. */
+.kui-state-banner__copy {
+  min-width: 0;
+  /* The copy's minimum readable width before a trailing action wraps below
+     it; the copy grows to fill whatever its line leaves. */
+  flex: 1 1 12rem;
+  /* The title's size, so a wrapped title's lines keep the title's own line
+     height instead of the larger inherited strut. */
+  font-size: var(--kui-font-xs);
+}
+.kui-state-banner[data-copy-layout="stacked"] > .kui-state-banner__copy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--kui-state-banner-copy-gap, var(--kui-space-xs));
+  row-gap: var(--kui-state-banner-copy-row-gap, var(--kui-space-2xs));
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > strong {
+  margin-inline-end: 0;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail {
+  flex-basis: 100%;
+  white-space: normal;
+}
+.kui-state-banner[data-copy-layout="stacked"]
+  > .kui-state-banner__copy
+  > .kui-state-banner__detail
+  > span {
+  overflow: visible;
+  text-overflow: clip;
+}
+/* `below` always gives the action its own end-aligned trailing row. */
+.kui-state-banner[data-action-placement="below"] > .kui-state-banner__action {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: flex-end;
+}
+.kui-state-banner__copy strong {
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  font-size: var(--kui-font-xs);
+}
+/* The clip lives on an inner span, not on the detail itself. WebKit still
+   applies the CSS 2.1 rule that an inline-block whose overflow is not
+   `visible` takes its baseline from its bottom margin edge, so a clipped
+   inline-block detail rose off the title's baseline there and pushed the
+   title and badge down. An inline flex container's baseline is its first
+   item's text baseline in every engine, whatever that item's overflow. */
+.kui-state-banner__detail {
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--_kui-state-banner-detail);
+  font-size: var(--kui-font-2xs);
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.kui-state-banner__detail > span {
+  min-width: 0;
+  overflow: clip;
+  text-overflow: ellipsis;
+}
+/* Content-sized and end-aligned on whichever line it lands; on its own line
+   it may shrink to the line so a wrapping action group (a `Row wrap`) wraps
+   its controls instead of overflowing the banner. */
+.kui-state-banner__action {
+  max-width: 100%;
+  margin-inline-start: auto;
+  flex: 0 1 auto;
+}
+.kui-state-banner__action button {
+  min-height: 1.8rem;
+  padding: 0 0.7rem;
+  border: 1px solid currentColor;
+  border-radius: var(--kui-radius-pill);
+  color: inherit;
+  background: var(--_kui-state-banner-action-background);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--kui-font-2xs);
+  font-weight: 650;
+}
+.kui-state-banner__action button:hover {
+  background: var(--_kui-state-banner-action-hover-background);
+}
+.kui-state-banner__action button:focus-visible {
+  outline: 2px solid var(--kui-color-text-link);
+  outline-offset: 2px;
+}
+@media (max-width: 36rem) {
+  /* The detail drops below the title. The title row keeps the wide layout's
+     relationship: a content-sized badge one item gap after the title, on the
+     title's baseline. */
+  .kui-state-banner__detail {
+    display: flex;
+  }
+}