@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/styles/list.css

@@ -0,0 +1,293 @@
+.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-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
+  --_kui-list-flex: 0 1 auto;
+  --_kui-list-inset-top: 0px;
+  --_kui-list-inset-right: 0px;
+  --_kui-list-inset-bottom: 0px;
+  --_kui-list-inset-left: 0px;
+  --_kui-list-clearance-start: 0px;
+  --_kui-list-clearance-end: 0px;
+  --_kui-list-ring-room: 0px;
+  --_kui-list-max-height: none;
+  --_kui-list-min-height: 0px;
+  --_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: var(--_kui-list-min-height);
+  max-height: var(--_kui-list-max-height);
+  box-sizing: border-box;
+  padding: calc(
+      var(--_kui-list-inset-top, 0px) + var(--_kui-list-clearance-start)
+    )
+    var(--_kui-list-inset-right, 0)
+    calc(var(--_kui-list-inset-bottom, 0px) + var(--_kui-list-clearance-end))
+    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;
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
+  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)
+  );
+}
+
+/* `inset="document"`: a reading inset on all four sides that replaces any
+   side-selected text or control inset. */
+.kui-list[data-inset="document"] {
+  --_kui-list-inset-top: var(--kui-space-l);
+  --_kui-list-inset-right: var(--kui-space-xl);
+  --_kui-list-inset-bottom: var(--kui-space-l);
+  --_kui-list-inset-left: var(--kui-space-xl);
+}
+
+@media (max-width: 36rem) {
+  .kui-list[data-inset="document"] {
+    --_kui-list-inset-right: var(--kui-space-m);
+    --_kui-list-inset-left: var(--kui-space-m);
+  }
+}
+
+/* `frame`: a bordered, rounded stack (a result picker). Its 4px inset on
+   every side replaces any side-selected or document inset, and is exactly
+   the reach of a row's focus ring (3px ring, 1px offset), so the first and
+   last rows' rings stay inside a scrolling frame's clip at the scroll
+   extremes. (The ring-room scroll padding every scrollable List carries
+   handles a row stopped mid-scroll.) */
+.kui-list[data-frame="true"] {
+  --_kui-list-inset-top: var(--kui-space-2xs);
+  --_kui-list-inset-right: var(--kui-space-2xs);
+  --_kui-list-inset-bottom: var(--kui-space-2xs);
+  --_kui-list-inset-left: var(--kui-space-2xs);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+}
+
+/* `contentWidth`: a readable page column. The measure is the content's, so
+   the cap adds the list's own insets; `center` (default) centers the column. */
+.kui-list[data-content-width] {
+  width: 100%;
+  max-width: calc(
+    var(--_kui-list-content-width) + var(--_kui-list-inset-left, 0px) +
+      var(--_kui-list-inset-right, 0px)
+  );
+}
+
+.kui-list[data-content-width="compact"] {
+  --_kui-list-content-width: 27.5rem;
+}
+
+.kui-list[data-content-width="medium"] {
+  --_kui-list-content-width: 40rem;
+}
+
+.kui-list[data-content-width="wide"] {
+  --_kui-list-content-width: 54rem;
+}
+
+.kui-list[data-content-align="center"] {
+  margin-inline: auto;
+}
+
+.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: center;
+}
+
+.kui-list[data-h-align="around"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-list[data-h-align="right"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+/* `middle` gathers the children in the middle, keeping their gap;
+   `space-around` (`around`) spreads them. */
+.kui-list[data-v-align="middle"] {
+  justify-content: center;
+}
+
+.kui-list[data-v-align="around"] {
+  justify-content: space-around;
+}
+
+.kui-list[data-v-align="bottom"] {
+  justify-content: flex-end;
+}
+
+.kui-list[data-v-align="full"] {
+  justify-content: space-between;
+}
+
+/* A scrollable List's scroll padding is a row's focus-ring reach (3px ring,
+   1px offset) plus 2px of slack, so a row focused or scrolled into view stops
+   with its ring inside the clip rather than flush against it: Chromium's
+   focus scroll stops 1px short of the padded target, and a row's fractional
+   position can cost another 0.3px. Scroll padding moves nothing at rest; at
+   the scroll extremes an unframed List's first and last rows still meet the
+   clip, which is what `frame`'s 4px inset is for. */
+.kui-list[data-scrollable="true"] {
+  --_kui-list-ring-room: calc(var(--kui-space-2xs) + 2px);
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+/* `scrollClearance`: chrome lying over the List's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The List adds it to its
+   own block padding and scroll padding, so rows scroll visibly beneath the
+   chrome while the first and last rows, and anything focused or scrolled into
+   view, still come to rest clear of it. */
+.kui-list:is(
+  [data-scroll-clearance="block-start"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-start: var(--kui-scroll-clearance-block-start, 0px);
+}
+
+.kui-list:is(
+  [data-scroll-clearance="block-end"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+.kui-list:is([data-scroll-clearance], [data-scrollable="true"]) {
+  scroll-padding-block: calc(
+      var(--_kui-list-clearance-start) + var(--_kui-list-ring-room)
+    )
+    calc(var(--_kui-list-clearance-end) + var(--_kui-list-ring-room));
+}
+
+/* In a Pane's scrolling content, a List that does not scroll itself keeps
+   its full height rather than shrinking to the content box. A shrunken List
+   lets its rows overflow its own box, and the scroller's block-end padding
+   (a bottom safe area, an overlay NavStack bottom toolbar's clearance)
+   follows the List's box, not those rows, so the last row could never
+   scroll clear of the edge. A `flex` basis still grows the List to fill. */
+.kui-pane > .kui-pane__content > .kui-list:not([data-scrollable="true"]) {
+  flex-shrink: 0;
+}
+
+/* A scrollable List owns the overflow, so its rows keep their natural height
+   and scroll rather than shrink. Items that clip their own overflow (a
+   ListItem) have a zero automatic minimum height, so the default
+   `flex-shrink: 1` compressed multiline rows into one another once the List
+   was bounded by a max-height ancestor. */
+.kui-list[data-scrollable="true"] > * {
+  flex-shrink: 0;
+}
+
+/* A scrollable List is a keyboard-focusable scroller: Chromium focuses it on
+   Tab when it holds no focusable rows, and a dialog may pick it as its first
+   focusable area. Its ring sits inside its box, so a rounded or clipping
+   parent cannot cut it off, and rounds with the standard control radius. */
+.kui-list[data-scrollable="true"]:focus-visible {
+  border-radius: var(--kui-radius-m);
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.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);
+}
+
+/* `surface`: a solid background behind the stack and its insets. */
+.kui-list[data-surface="base"] {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+  background: var(--kui-color-surface);
+}
+
+.kui-list[data-surface="raised"] {
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+  background: var(--kui-color-surface-raised);
+}
+
+/* `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/loading-spinner.css

@@ -5,6 +5,10 @@
   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;

package/dist/styles/lucide-icon.css

@@ -4,3 +4,12 @@
   height: 1em;
   flex: none;
 }
+
+[data-lucide][data-inline="true"] {
+  display: inline-block;
+}
+
+[data-lucide][data-size] {
+  width: var(--_kui-lucide-size);
+  height: var(--_kui-lucide-size);
+}

package/dist/styles/message-composer.css

@@ -0,0 +1,84 @@
+/* A chat or prompt composer: a raised frame (surface-raised, the standard
+   neutral border, large radius, shadow-l) whose border turns brand while
+   focus is within. It holds a borderless message field that sizes to its
+   content between the min and max row counts, above an action row with a
+   quiet hint and trailing actions. The 8px padding puts the field's text on
+   the 17px text column when the composer sits 8px from a container edge. */
+
+.kui-message-composer {
+  --_kui-message-composer-min-rows: 1;
+  --_kui-message-composer-max-rows: 8;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  /* Fill the container's inline size: a content-sized field would otherwise
+     shrink the frame to its text. */
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  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-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* The frame is the field's boundary, so it carries the focus state. */
+.kui-message-composer:focus-within {
+  border-color: var(--kui-color-brand-border-loud);
+}
+
+.kui-message-composer__field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: var(--kui-font-m, inherit);
+  line-height: 1.6;
+  resize: none;
+  field-sizing: content;
+  min-height: calc(var(--_kui-message-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-message-composer-max-rows) * 1lh + 0.5rem);
+  overflow-y: auto;
+}
+
+/* Engines without content sizing keep a three-line field, clamped to the
+   row bounds, that scrolls once the message is longer. */
+@supports not (field-sizing: content) {
+  .kui-message-composer__field {
+    height: calc(
+      clamp(
+          var(--_kui-message-composer-min-rows),
+          3,
+          var(--_kui-message-composer-max-rows)
+        ) *
+        1lh + 0.5rem
+    );
+  }
+}
+
+.kui-message-composer__field::placeholder {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 1;
+}
+
+.kui-message-composer__field:disabled {
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .kui-message-composer:focus-within {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}