@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/styles/slider.css

@@ -0,0 +1,241 @@
+/* Slider: a label row with an optional readout, a native range input drawn
+   as a track, a brand fill up to the value (--_kui-slider-fill), and a round
+   thumb, then optional tick labels and a hint. The input resets the
+   platform look in every engine so all three draw the same control. */
+.kui-slider {
+  --_kui-slider-track: 0.25rem;
+  --_kui-slider-thumb: 1.25rem;
+  --_kui-slider-fill-color: var(--kui-color-brand-fill-loud);
+
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  align-self: stretch;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+  /* The shared block-content inset, so the label sits on the text column. */
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: var(--kui-layout-item-border-width, 1px) solid transparent;
+  font-size: var(--kui-font-m, 1rem);
+  line-height: 1.4;
+}
+
+.kui-slider[data-size="compact"] {
+  --_kui-slider-track: 0.1875rem;
+  --_kui-slider-thumb: 1rem;
+
+  font-size: var(--kui-font-s, 0.875rem);
+}
+
+.kui-slider__header {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: var(--kui-space-xs);
+}
+
+.kui-slider__label {
+  min-width: 0;
+  flex: 1;
+  color: var(--kui-color-text);
+  overflow-wrap: anywhere;
+}
+
+.kui-slider__value {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--kui-color-text-quiet);
+  font-variant-numeric: tabular-nums;
+}
+
+.kui-slider__input {
+  display: block;
+  /* Logical sizes, so a vertical slider (writing-mode) draws the same way. */
+  inline-size: 100%;
+  block-size: var(--_kui-slider-thumb);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+}
+
+.kui-slider__input:focus-visible {
+  outline: none;
+}
+
+/* The track: the fill up to the value, the neutral rest after it. */
+.kui-slider__input::-webkit-slider-runnable-track {
+  block-size: var(--_kui-slider-track);
+  border-radius: var(--kui-radius-pill);
+  background: linear-gradient(
+    to right,
+    var(--_kui-slider-fill-color) var(--_kui-slider-fill, 0%),
+    var(--kui-color-neutral-fill-normal) var(--_kui-slider-fill, 0%)
+  );
+}
+
+.kui-slider__input:dir(rtl)::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to left,
+    var(--_kui-slider-fill-color) var(--_kui-slider-fill, 0%),
+    var(--kui-color-neutral-fill-normal) var(--_kui-slider-fill, 0%)
+  );
+}
+
+.kui-slider__input::-moz-range-track {
+  block-size: var(--_kui-slider-track);
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+.kui-slider__input::-moz-range-progress {
+  block-size: var(--_kui-slider-track);
+  border-radius: var(--kui-radius-pill);
+  background: var(--_kui-slider-fill-color);
+}
+
+/* The thumb: a raised white disc with the neutral border. */
+.kui-slider__input::-webkit-slider-thumb {
+  width: var(--_kui-slider-thumb);
+  height: var(--_kui-slider-thumb);
+  box-sizing: border-box;
+  margin-block-start: calc(
+    (var(--_kui-slider-track) - var(--_kui-slider-thumb)) / 2
+  );
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: 50%;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-s);
+  appearance: none;
+}
+
+.kui-slider__input::-moz-range-thumb {
+  width: var(--_kui-slider-thumb);
+  height: var(--_kui-slider-thumb);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: 50%;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-slider__input:focus-visible::-webkit-slider-thumb {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-slider__input:focus-visible::-moz-range-thumb {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* Vertical: a native vertical range, its minimum at the bottom, `length`
+   tall; the label row sits above it and the fill runs upward. */
+.kui-slider[data-orientation="vertical"] {
+  width: fit-content;
+  align-self: flex-start;
+  align-items: center;
+}
+
+.kui-slider[data-orientation="vertical"] .kui-slider__input {
+  inline-size: var(--_kui-slider-length, 10rem);
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+
+.kui-slider[data-orientation="vertical"]
+  .kui-slider__input::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to top,
+    var(--_kui-slider-fill-color) var(--_kui-slider-fill, 0%),
+    var(--kui-color-neutral-fill-normal) var(--_kui-slider-fill, 0%)
+  );
+}
+
+/* Firefox sizes a vertical track's length from its content; fill it. */
+.kui-slider[data-orientation="vertical"] .kui-slider__input::-moz-range-track {
+  inline-size: 100%;
+}
+
+.kui-slider__input:disabled {
+  cursor: not-allowed;
+}
+
+.kui-slider:has(.kui-slider__input:disabled) {
+  opacity: 0.5;
+}
+
+/* Tick labels sit under the stops: a stop's center is the thumb's center at
+   that value, half a thumb in from each end. */
+.kui-slider__ticks {
+  position: relative;
+  height: 1lh;
+  margin-inline: calc(var(--_kui-slider-thumb) / 2);
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+}
+
+.kui-slider[data-size="compact"] .kui-slider__ticks {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+
+.kui-slider__tick {
+  position: absolute;
+  inset-inline-start: var(--_kui-slider-tick);
+  translate: -50% 0;
+  white-space: nowrap;
+}
+
+.kui-slider__tick:dir(rtl) {
+  translate: 50% 0;
+}
+
+/* The first and last labels stay inside the slider. */
+.kui-slider__tick:first-child {
+  translate: calc(-1 * var(--_kui-slider-thumb) / 2) 0;
+}
+
+.kui-slider__tick:last-child {
+  translate: calc(-100% + var(--_kui-slider-thumb) / 2) 0;
+}
+
+.kui-slider__hint {
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+
+.kui-slider[data-size="compact"] .kui-slider__hint {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+
+@media (forced-colors: active) {
+  .kui-slider__input::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      to right,
+      Highlight var(--_kui-slider-fill, 0%),
+      GrayText var(--_kui-slider-fill, 0%)
+    );
+  }
+
+  .kui-slider__input::-moz-range-track {
+    background: GrayText;
+  }
+
+  .kui-slider__input::-moz-range-progress {
+    background: Highlight;
+  }
+
+  .kui-slider__input::-webkit-slider-thumb {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+
+  .kui-slider__input::-moz-range-thumb {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+}

package/dist/styles/split-view.css

@@ -67,6 +67,31 @@
   --kui-edge-inset-inline-start: 0px;
 }
 
+/* A column whose only child is a Pane or layout gives that child its whole
+   height in one row, so the child's own footer pins to the column's end
+   instead of the child auto-placing into the column's header row. */
+.kui-split-view__list:has(
+  > :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+),
+.kui-split-view__detail:has(
+  > :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+) {
+  grid-template-areas: none;
+  grid-template-rows: minmax(0, 1fr);
+}
+
 /* Each pane pads for the edges it touches unless its only child is a Pane or
    layout, which then owns the insets. */
 .kui-split-view__list:not(

package/dist/styles/state-banner.css

@@ -181,6 +181,19 @@
     var(--kui-color-surface);
   box-shadow: var(--kui-shadow-l);
 }
+/* As the only content of a kerfjs/overlay toast (styled by
+   @kerfjs/ui/overlay-toast.css) the banner is the toast: no inline margin, and
+   its tone fill composites over the opaque surface; the toast keeps the
+   elevation. */
+.kerf-toast > .kui-state-banner:only-child {
+  margin-inline: 0;
+  background:
+    linear-gradient(
+      var(--_kui-state-banner-background),
+      var(--_kui-state-banner-background)
+    ),
+    var(--kui-color-surface-raised);
+}
 .kui-state-banner__icon {
   display: grid;
   flex: none;
@@ -268,7 +281,9 @@
   margin-inline-start: auto;
   flex: 0 1 auto;
 }
-.kui-state-banner__action button {
+/* A plain action button takes the banner's own pill; a Button keeps its own
+   look. */
+.kui-state-banner__action button:not(.kui-button) {
   min-height: 1.8rem;
   padding: 0 0.7rem;
   border: 1px solid currentColor;
@@ -280,10 +295,10 @@
   font-size: var(--kui-font-2xs);
   font-weight: 650;
 }
-.kui-state-banner__action button:hover {
+.kui-state-banner__action button:not(.kui-button):hover {
   background: var(--_kui-state-banner-action-hover-background);
 }
-.kui-state-banner__action button:focus-visible {
+.kui-state-banner__action button:not(.kui-button):focus-visible {
   outline: 2px solid var(--kui-color-text-link);
   outline-offset: 2px;
 }

package/dist/styles/styles.css

@@ -4,6 +4,7 @@
 @import "./chip.css";
 @import "./lucide-icon.css";
 @import "./disclosure-arrow.css";
+@import "./disclosure.css";
 @import "./toolbar.css";
 @import "./toolbar-control-group.css";
 @import "./surface-scaffold.css";
@@ -17,28 +18,38 @@
 @import "./list-item.css";
 @import "./list-header.css";
 @import "./resizable-region.css";
-@import "./app-tab.css";
+@import "./tab-bar-item.css";
 @import "./catalog.css";
 @import "./tab-bar.css";
 @import "./loading-spinner.css";
+@import "./progress-bar.css";
+@import "./progress-ring.css";
 @import "./skeleton.css";
 @import "./select.css";
 @import "./popup-menu.css";
 @import "./anchored-surface.css";
 @import "./segmented-control.css";
 @import "./choice-chips.css";
-@import "./composer.css";
-@import "./token-search-field.css";
+@import "./color-swatches.css";
+@import "./color-picker.css";
+@import "./color-field.css";
+@import "./message-composer.css";
+@import "./search-field.css";
+@import "./tag-field.css";
 @import "./state-banner.css";
 @import "./corner-status.css";
 @import "./column-track.css";
 @import "./content-swap.css";
 @import "./backdrop-image.css";
 @import "./file-picker.css";
+@import "./text-field.css";
+@import "./checkbox.css";
+@import "./slider.css";
+@import "./radio-group.css";
+@import "./switch.css";
 @import "./combobox.css";
 @import "./edge-activity-indicator.css";
-@import "./icon-button.css";
-@import "./icon-toggle-button.css";
+@import "./button.css";
 @import "./split-button.css";
 @import "./framed-list.css";
 @import "./summary-row.css";