@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.112

package/dist/styles/backdrop-image.css

@@ -27,6 +27,11 @@
   isolation: isolate;
 }
 
+.kui-backdrop-image[data-inline-bleed="false"] {
+  --_kui-backdrop-image-inset-start: 0px;
+  --_kui-backdrop-image-inset-end: 0px;
+}
+
 /* `underChrome`: the block runs up beneath the scroller's block-start inset
    (overlay or clear chrome clearance plus the top safe area, as the Pane
    publishes it) and the hero grows by the same amount, so the visible image
@@ -60,6 +65,17 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+/* Dense feeds can skip offscreen image painting without changing the height
+   reserved by the hero's aspect ratio or the containing card body. */
+.kui-backdrop-image[data-defer-offscreen="true"] .kui-backdrop-image__hero {
+  content-visibility: auto;
+}
+
+.kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
+  min-height: 0;
+  aspect-ratio: var(--_kui-backdrop-image-ratio);
+}
+
 .kui-backdrop-image__backdrop {
   position: absolute;
   inset: 0;
@@ -89,6 +105,10 @@
   background-position: var(--_kui-backdrop-image-position);
 }
 
+.kui-backdrop-image__blurred[data-image-error="true"] {
+  display: none;
+}
+
 /* Progressive blur: a copy over the sharp image, blurred once and hidden
    until the scroll timeline fades it in. A filtered copy overhangs the block
    by its radius on every side, so the blur's transparent fringe falls outside
@@ -208,7 +228,10 @@
   animation: none;
 }
 
-@media (update: slow) {
+@media (update: slow),
+  (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (forced-colors: active) {
   .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
   .kui-backdrop-image[data-blur]
     :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -402,7 +402,7 @@
   > .kui-popup-menu {
   margin: -2px;
 }
-.kui-toolbar-control-group:is([data-single="true"], [data-content="mixed"])
+.kui-toolbar-control-group[data-content="mixed"]
   > .kui-popup-menu
   > .kui-popup-menu__trigger {
   min-width: max-content;

package/dist/styles/components/collections/summary-row/summary-row.css

@@ -1,4 +1,4 @@
-/* A selectable summary: a full-width option on the base surface, a container
+/* A summary surface: a full-width option or static group on the base surface, a container
    for its own compaction, with a hairline divider below each list row. */
 .kui-summary-row {
   --_kui-summary-row-rail: transparent;
@@ -18,7 +18,7 @@
   border-radius: 0;
   color: var(--kui-color-text);
   background: var(--kui-color-surface);
-  cursor: pointer;
+  cursor: default;
   outline: none;
   container-type: inline-size;
   user-select: none;
@@ -47,7 +47,11 @@
   contain-intrinsic-size: auto 4.5rem;
 }
 
-.kui-summary-row:hover {
+.kui-summary-row[role="option"] {
+  cursor: pointer;
+}
+
+.kui-summary-row[role="option"]:hover {
   border-color: var(--kui-color-brand-border-normal);
 }
 

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

@@ -0,0 +1,18 @@
+.kui-value-preview {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--_kui-value-preview-min-height, 3rem);
+  max-height: var(--_kui-value-preview-max-height, 6rem);
+  overflow: auto;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-xs);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.kui-value-preview:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}

package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css

@@ -27,6 +27,11 @@
   isolation: isolate;
 }
 
+.kui-backdrop-image[data-inline-bleed="false"] {
+  --_kui-backdrop-image-inset-start: 0px;
+  --_kui-backdrop-image-inset-end: 0px;
+}
+
 /* `underChrome`: the block runs up beneath the scroller's block-start inset
    (overlay or clear chrome clearance plus the top safe area, as the Pane
    publishes it) and the hero grows by the same amount, so the visible image
@@ -60,6 +65,17 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+/* Dense feeds can skip offscreen image painting without changing the height
+   reserved by the hero's aspect ratio or the containing card body. */
+.kui-backdrop-image[data-defer-offscreen="true"] .kui-backdrop-image__hero {
+  content-visibility: auto;
+}
+
+.kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
+  min-height: 0;
+  aspect-ratio: var(--_kui-backdrop-image-ratio);
+}
+
 .kui-backdrop-image__backdrop {
   position: absolute;
   inset: 0;
@@ -89,6 +105,10 @@
   background-position: var(--_kui-backdrop-image-position);
 }
 
+.kui-backdrop-image__blurred[data-image-error="true"] {
+  display: none;
+}
+
 /* Progressive blur: a copy over the sharp image, blurred once and hidden
    until the scroll timeline fades it in. A filtered copy overhangs the block
    by its radius on every side, so the blur's transparent fringe falls outside
@@ -208,7 +228,10 @@
   animation: none;
 }
 
-@media (update: slow) {
+@media (update: slow),
+  (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (forced-colors: active) {
   .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
   .kui-backdrop-image[data-blur]
     :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {

package/dist/styles/components/surfaces/content-item/content-item.css

@@ -17,6 +17,54 @@
   background: var(--kui-content-item-background, transparent);
 }
 
+/* BackdropImage supplies the image, overlay, fade, and per-card view timeline.
+   ContentItem owns only how that media block meets the card's geometry. */
+.kui-content-item__media {
+  overflow: clip;
+  border-radius: max(0px, calc(var(--kui-content-item-radius, 12px) - 9px));
+}
+
+.kui-content-item[data-media-edge="true"] .kui-content-item__media {
+  margin-inline: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
+  margin-block-start: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
+  border-start-start-radius: max(
+    0px,
+    calc(var(--kui-content-item-radius, 12px) - 1px)
+  );
+  border-start-end-radius: max(
+    0px,
+    calc(var(--kui-content-item-radius, 12px) - 1px)
+  );
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.kui-content-item__body {
+  min-width: 0;
+  margin-block-start: var(--kui-space-xs);
+}
+
+.kui-content-item[data-media-state][data-kui-tint][data-appearance="transparent"] {
+  --kui-content-item-background: var(--kui-color-surface);
+}
+
+.kui-content-item[data-media-state="error"] .kui-content-item__media {
+  display: none;
+}
+
+.kui-content-item[data-media-state="error"] .kui-content-item__body {
+  margin-block-start: 0;
+}
+
+@media (forced-colors: active) {
+  .kui-content-item .kui-content-item__media {
+    display: none;
+  }
+  .kui-content-item__body {
+    margin-block-start: 0;
+  }
+}
+
 .kui-content-item--pill {
   --kui-content-item-radius: var(
     --kui-layout-pill-radius,
@@ -95,6 +143,10 @@
   --kui-content-item-foreground: var(--kui-color-danger-on-fill);
 }
 
+.kui-content-item[data-media-fade="true"]:not([data-media-state="error"]) {
+  --kui-content-item-background: var(--_kui-content-item-media-fade-to);
+}
+
 .kui-content-item[data-interactive="true"] {
   color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
   cursor: pointer;

package/dist/styles/components/surfaces/editor-frame/editor-frame.css

@@ -0,0 +1,121 @@
+.kui-editor-frame {
+  display: flex;
+  width: min(100%, var(--_kui-editor-frame-max-width, 42rem));
+  height: var(--_kui-editor-frame-height, 20rem);
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface);
+  flex-direction: column;
+}
+
+.kui-editor-frame__toolbar {
+  flex: none;
+}
+
+.kui-editor-frame__surface {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: 1rem;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface {
+  overflow: hidden;
+}
+
+.kui-editor-frame[data-mode="preview"] > .kui-editor-frame__surface {
+  overflow: auto;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface > textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: auto;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  background: transparent;
+  flex: 1 1 auto;
+  font: inherit;
+  line-height: 1.6;
+  resize: none;
+}
+
+.kui-editor-frame[data-inset="flush"] > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"]) {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"])
+  > .kui-editor-frame__surface {
+  min-height: 3rem;
+  padding: 0.75rem;
+  overflow: visible;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-inset="flush"]
+  > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"]
+  > .kui-editor-frame__surface
+  > textarea {
+  height: var(--_kui-editor-frame-source-height, auto);
+  min-height: 3rem;
+  padding: 0;
+  overflow: auto;
+  flex: none;
+  resize: vertical;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"][data-source-autosize="true"]
+  > .kui-editor-frame__surface
+  > textarea {
+  field-sizing: content;
+  resize: none;
+}
+
+@supports not (field-sizing: content) {
+  .kui-editor-frame[data-appearance="embedded"]:not(
+      [data-expanded="true"]
+    )[data-mode="source"][data-source-autosize="true"]
+    > .kui-editor-frame__surface
+    > textarea {
+    resize: vertical;
+  }
+}
+
+.kui-editor-frame[data-expanded="true"] {
+  position: fixed;
+  z-index: 40;
+  inset: 2rem;
+  width: auto;
+  height: auto;
+  box-shadow: var(--kui-shadow-l);
+}

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -52,6 +52,22 @@
     light-dark(rgb(29 29 31 / 0.34), rgb(0 0 0 / 0.6))
   );
 }
+.kui-dialog-surface[data-stack-active="false"] {
+  pointer-events: none;
+  transform: translateY(var(--_kui-dialog-surface-stack-offset, 0px));
+}
+.kui-dialog-surface[data-stack-position] {
+  --_kui-dialog-surface-gutter: 1.5rem;
+}
+.kui-dialog-surface[data-stack-active="false"]::backdrop {
+  background: transparent;
+}
+@media screen and (max-width: 48rem) {
+  .kui-dialog-surface[data-stack-position] {
+    --_kui-dialog-surface-gutter: 1rem;
+    transform: none;
+  }
+}
 /* Room for phones whose viewport height ignores the browser chrome. */
 @media screen and (max-width: 26.25rem) {
   .kui-dialog-surface {
@@ -173,15 +189,23 @@ h2.kui-dialog-surface__title {
   background: transparent;
   cursor: pointer;
 }
+.kui-dialog-surface__close[data-emphasis="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
 .kui-dialog-surface__close:hover {
   background-color: var(--kui-color-neutral-fill-normal);
 }
+.kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible) {
+  color: var(--kui-color-neutral-on-quiet);
+}
 .kui-dialog-surface__close:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: var(--kui-focus-ring-offset, 1px);
 }
 @media (forced-colors: active) {
-  .kui-dialog-surface__close {
+  .kui-dialog-surface__close,
+  .kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible),
+  .kui-dialog-surface__close[data-emphasis="quiet"] {
     color: ButtonText;
   }
 }

package/dist/styles/content-item.css

@@ -1,168 +1,3 @@
-/* One self-contained content-item: 8px inline margin, a real 1px border
-   (transparent unless framed), 8px padding, and a rounded or pill radius.
-   Rendered by ContentItem; the classes stay public for other elements. */
-
-.kui-content-item {
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: var(--kui-layout-item-border-width, 1px) solid
-    var(--kui-content-item-border, transparent);
-  border-radius: var(
-    --kui-content-item-radius,
-    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
-  );
-  color: var(--kui-content-item-foreground, inherit);
-  background: var(--kui-content-item-background, transparent);
-}
-
-.kui-content-item--pill {
-  --kui-content-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-}
-
-.kui-content-item--flush {
-  padding-block: 0;
-  border-block-width: 0;
-}
-
-/* A visible frame for a content item that marks a real distinction: the
-   standard neutral border, same geometry (the border is always reserved). */
-.kui-content-item--framed {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-}
-
-.kui-content-item[data-appearance="surface"] {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-surface);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-appearance="neutral"] {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-appearance="info"] {
-  --kui-content-item-border: var(--kui-color-brand-border-quiet);
-  --kui-content-item-background: var(--kui-color-brand-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
-}
-
-.kui-content-item[data-appearance="pop"] {
-  --kui-content-item-border: var(--kui-color-pop-border-normal);
-  --kui-content-item-background: var(--kui-color-pop-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-pop-on-fill);
-}
-
-.kui-content-item[data-appearance="success"] {
-  --kui-content-item-border: var(--kui-color-success-border-normal);
-  --kui-content-item-background: var(--kui-color-success-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-success-on-fill);
-}
-
-.kui-content-item[data-appearance="warning"] {
-  --kui-content-item-border: var(--kui-color-warning-border-normal);
-  --kui-content-item-background: var(--kui-color-warning-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-warning-on-fill);
-}
-
-.kui-content-item[data-appearance="brand-loud"] {
-  --kui-content-item-border: var(--kui-color-brand-border-loud);
-  --kui-content-item-background: var(--kui-color-brand-fill-loud);
-  --kui-content-item-foreground: var(--kui-color-brand-on-loud);
-}
-
-/* Chat bubble: the item shrinks to its content up to 80% of the row and sits
-   at the start or end of the line; long unbroken text wraps inside it. */
-.kui-content-item[data-bubble] {
-  width: fit-content;
-  max-width: 80%;
-  overflow-wrap: anywhere;
-}
-
-.kui-content-item[data-bubble="end"] {
-  margin-inline-start: auto;
-}
-
-.kui-content-item[data-appearance="danger"] {
-  --kui-content-item-border: var(--kui-color-danger-border-quiet);
-  --kui-content-item-background: var(--kui-color-danger-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-danger-on-fill);
-}
-
-.kui-content-item[data-interactive="true"] {
-  color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
-  cursor: pointer;
-}
-
-.kui-content-item[data-interactive="true"]:hover:not(
-    [data-disabled="true"],
-    [data-selected="true"]
-  ),
-.kui-content-item[data-interactive="true"][data-kui-pressed="true"]:not(
-    [data-selected="true"]
-  ) {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
-  --kui-content-item-background: color-mix(
-    in srgb,
-    var(--kui-color-neutral-fill-normal) 75%,
-    var(--kui-color-neutral-fill-loud)
-  );
-}
-
-.kui-content-item[data-interactive="true"][data-selected="true"] {
-  --kui-content-item-border: var(--kui-color-brand-border-quiet);
-  --kui-content-item-background: var(--kui-color-brand-fill-normal);
-  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
-}
-
-/* The surface context follows the fill an item paints: a quiet appearance,
-   a hover, press, or selection. A transparent item keeps its parent's
-   context; a brand-loud fill shares the focus ring's hue, so a control on it
-   keeps the surface line. A surface appearance is opaque, so it resets. */
-.kui-content-item:is(
-  [data-appearance]:not(
-    [data-appearance="transparent"],
-    [data-appearance="brand-loud"]
-  ),
-  [data-interactive="true"]:hover:not([data-disabled="true"]),
-  [data-interactive="true"]:is(
-    [data-kui-pressed="true"],
-    [data-selected="true"]
-  )
-) {
-  --kui-color-surface-current-tint: var(--kui-content-item-background);
-}
-
-.kui-content-item[data-appearance="surface"]:not(
-    [data-interactive="true"]:is(
-      :hover,
-      [data-kui-pressed="true"],
-      [data-selected="true"]
-    )
-  ) {
-  --kui-color-surface-current: var(--kui-color-surface);
-  --kui-color-surface-current-region: transparent;
-  --kui-color-surface-current-tint: transparent;
-}
-
-.kui-content-item:is(:focus-visible, [data-outlined="true"]) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-content-item[data-interactive="true"][data-disabled="true"] {
-  color: var(--kui-color-neutral-on-quiet);
-  opacity: 0.58;
-  cursor: not-allowed;
-}
+/* Public stylesheet entry; implementation is colocated with the component. */
+@import "./backdrop-image.css";
+@import "./components/surfaces/content-item/content-item.css";

package/dist/styles/editor-frame.css

@@ -0,0 +1,121 @@
+.kui-editor-frame {
+  display: flex;
+  width: min(100%, var(--_kui-editor-frame-max-width, 42rem));
+  height: var(--_kui-editor-frame-height, 20rem);
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface);
+  flex-direction: column;
+}
+
+.kui-editor-frame__toolbar {
+  flex: none;
+}
+
+.kui-editor-frame__surface {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: 1rem;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface {
+  overflow: hidden;
+}
+
+.kui-editor-frame[data-mode="preview"] > .kui-editor-frame__surface {
+  overflow: auto;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface > textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: auto;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  background: transparent;
+  flex: 1 1 auto;
+  font: inherit;
+  line-height: 1.6;
+  resize: none;
+}
+
+.kui-editor-frame[data-inset="flush"] > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"]) {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"])
+  > .kui-editor-frame__surface {
+  min-height: 3rem;
+  padding: 0.75rem;
+  overflow: visible;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-inset="flush"]
+  > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"]
+  > .kui-editor-frame__surface
+  > textarea {
+  height: var(--_kui-editor-frame-source-height, auto);
+  min-height: 3rem;
+  padding: 0;
+  overflow: auto;
+  flex: none;
+  resize: vertical;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"][data-source-autosize="true"]
+  > .kui-editor-frame__surface
+  > textarea {
+  field-sizing: content;
+  resize: none;
+}
+
+@supports not (field-sizing: content) {
+  .kui-editor-frame[data-appearance="embedded"]:not(
+      [data-expanded="true"]
+    )[data-mode="source"][data-source-autosize="true"]
+    > .kui-editor-frame__surface
+    > textarea {
+    resize: vertical;
+  }
+}
+
+.kui-editor-frame[data-expanded="true"] {
+  position: fixed;
+  z-index: 40;
+  inset: 2rem;
+  width: auto;
+  height: auto;
+  box-shadow: var(--kui-shadow-l);
+}