@kerfjs/ui 4.4.1 → 4.5.0-beta.1

package/dist/styles/resizable-region.css

@@ -0,0 +1,111 @@
+.kui-resizable-region {
+  --kui-resizable-region-separator-color: var(--kui-color-border);
+  --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
+  --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+.kui-resizable-region[data-axis="horizontal"] {
+  width: var(--kui-resizable-region-size);
+  height: 100%;
+  flex: 0 0 var(--kui-resizable-region-size);
+}
+.kui-resizable-region[data-axis="vertical"] {
+  width: 100%;
+  height: var(--kui-resizable-region-size);
+  flex: 0 0 var(--kui-resizable-region-size);
+  flex-direction: column;
+}
+.kui-resizable-region[data-collapsed="true"] {
+  overflow: visible;
+}
+.kui-resizable-region__content {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.kui-resizable-region__handle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  min-width: 20px;
+  min-height: 20px;
+  color: var(--kui-resizable-region-handle-color);
+  place-items: center;
+  touch-action: none;
+}
+.kui-resizable-region__handle::before {
+  position: absolute;
+  background: var(--kui-resizable-region-separator-color);
+  content: "";
+  pointer-events: none;
+}
+.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle {
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  cursor: col-resize;
+}
+.kui-resizable-region[data-axis="horizontal"]
+  .kui-resizable-region__handle::before {
+  top: 0;
+  bottom: 0;
+  width: 1px;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"]
+  .kui-resizable-region__handle {
+  right: -10px;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"]
+  .kui-resizable-region__handle {
+  left: -10px;
+}
+.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle {
+  right: 0;
+  left: 0;
+  height: 20px;
+  cursor: row-resize;
+}
+.kui-resizable-region[data-axis="vertical"]
+  .kui-resizable-region__handle::before {
+  right: 0;
+  left: 0;
+  height: 1px;
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="end"]
+  .kui-resizable-region__handle {
+  bottom: -10px;
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="start"]
+  .kui-resizable-region__handle {
+  top: -10px;
+}
+.kui-resizable-region__handle:hover,
+.kui-resizable-region__handle:focus-visible {
+  color: var(--kui-resizable-region-handle-active-color);
+}
+.kui-resizable-region__handle:focus-visible {
+  border-radius: var(--kui-radius-s);
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-resizable-region__handle-icon {
+  position: relative;
+  display: grid;
+  width: 0.9rem;
+  height: 0.9rem;
+  opacity: 0;
+  pointer-events: none;
+  place-items: center;
+}
+.kui-resizable-region__handle-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-resizable-region__handle:hover .kui-resizable-region__handle-icon,
+.kui-resizable-region__handle:focus-visible .kui-resizable-region__handle-icon {
+  opacity: 1;
+}

package/{src → dist/styles}/segmented-control.css

@@ -1,21 +1,28 @@
 .kui-segmented-control {
   --kui-segmented-background: var(--kui-color-neutral-fill-normal);
-  --kui-segmented-border: var(--kui-color-neutral-border-normal);
+  --kui-segmented-border: transparent;
   --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
   --kui-segmented-hover-background: var(--kui-color-surface);
+  --kui-segmented-hover-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-selected-background: var(--kui-color-surface);
   --kui-segmented-selected-foreground: var(--kui-color-brand-on-quiet);
-  --kui-segmented-selected-border: transparent;
+  --kui-segmented-selected-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-selected-shadow: var(--kui-shadow-s);
-  --kui-segmented-radius: .55rem;
-  --kui-segmented-item-radius: .4rem;
-
+  --kui-segmented-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+  --kui-segmented-item-radius: max(
+    0px,
+    calc(var(--kui-segmented-radius) - 2px)
+  );
   display: inline-flex;
   max-width: 100%;
-  padding: .2rem;
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 1px;
   overflow-x: auto;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 1px solid var(--kui-segmented-border);
   border-radius: var(--kui-segmented-radius);
   color: var(--kui-segmented-foreground);
   background: var(--kui-segmented-background);
@@ -29,25 +36,52 @@
 }
 
 .kui-segmented-control[data-appearance="outlined"] {
+  --kui-segmented-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-background: var(--kui-color-surface);
-  border-color: var(--kui-segmented-border);
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {
   --kui-segmented-background: transparent;
-  --kui-segmented-foreground: var(--kui-toolbar-control-color, var(--kui-color-neutral-on-quiet));
-  --kui-segmented-hover-background: var(--kui-toolbar-control-hover-background, var(--kui-color-surface));
-  --kui-segmented-selected-background: var(--kui-toolbar-control-selected-background, var(--kui-color-surface));
-  --kui-segmented-selected-foreground: var(--kui-toolbar-control-selected-color, var(--kui-color-brand-on-quiet));
-  --kui-segmented-selected-shadow: var(--kui-toolbar-control-selected-shadow, var(--kui-shadow-s));
+  --kui-segmented-foreground: var(
+    --kui-toolbar-control-color,
+    var(--kui-color-neutral-on-quiet)
+  );
+  --kui-segmented-hover-background: var(
+    --kui-toolbar-control-hover-background,
+    var(--kui-color-surface)
+  );
+  --kui-segmented-hover-border: var(
+    --kui-toolbar-control-border,
+    var(--kui-color-neutral-border-normal)
+  );
+  --kui-segmented-selected-background: var(
+    --kui-toolbar-control-selected-background,
+    var(--kui-color-surface)
+  );
+  --kui-segmented-selected-foreground: var(
+    --kui-toolbar-control-selected-color,
+    var(--kui-color-brand-on-quiet)
+  );
+  --kui-segmented-selected-border: var(
+    --kui-toolbar-control-selected-border,
+    var(--kui-color-neutral-border-normal)
+  );
+  --kui-segmented-selected-shadow: var(
+    --kui-toolbar-control-selected-shadow,
+    var(--kui-shadow-s)
+  );
+  min-height: 2.5rem;
   padding: 0;
   overflow: visible;
-  gap: .15rem;
+  border: 0;
+  border-radius: 0;
 }
 
 .kui-segmented-control[data-shape="pill"] {
-  --kui-segmented-radius: var(--kui-radius-pill);
-  --kui-segmented-item-radius: var(--kui-radius-pill);
+  --kui-segmented-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
 }
 
 .kui-segmented-control[data-layout="equal"] {
@@ -58,12 +92,11 @@
 }
 
 .kui-segmented-control__item {
-  -webkit-appearance: none;
   appearance: none;
   display: inline-flex;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
-  padding: .45rem .7rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0.4375rem var(--kui-layout-item-padding, 0.5rem);
   box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: var(--kui-segmented-item-radius);
@@ -71,7 +104,7 @@
   background: transparent;
   align-items: center;
   justify-content: center;
-  gap: .35rem;
+  gap: var(--kui-layout-item-gap, 0.5rem);
   font: inherit;
   font-size: var(--kui-font-xs);
   font-weight: var(--kui-font-weight-semibold);
@@ -81,9 +114,7 @@
 }
 
 .kui-segmented-control[data-size="small"] .kui-segmented-control__item {
-  min-width: 2rem;
-  min-height: 2rem;
-  padding: .35rem;
+  padding-inline: 0.4375rem;
   font-size: var(--kui-font-2xs);
 }
 
@@ -93,6 +124,7 @@
 }
 
 .kui-segmented-control__item:hover:not(:disabled) {
+  border-color: var(--kui-segmented-hover-border);
   background: var(--kui-segmented-hover-background);
 }
 
@@ -110,19 +142,14 @@
 }
 
 .kui-segmented-control__item:disabled {
-  opacity: .45;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
 .kui-segmented-control__item svg {
-  width: .9rem;
-  height: .9rem;
-  flex: 0 0 auto;
-}
-
-.kui-segmented-control[data-size="small"] .kui-segmented-control__item svg {
   width: 1rem;
   height: 1rem;
+  flex: 0 0 auto;
 }
 
 @media (forced-colors: active) {

package/dist/styles/select.css

@@ -0,0 +1,140 @@
+.kui-select::part(combobox) {
+  min-height: 2.75rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  gap: 0;
+}
+.kui-select::part(display-input) {
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kui-select::part(start),
+.kui-select::part(end),
+.kui-select::part(expand-icon) {
+  margin: 0;
+}
+.kui-select::part(expand-icon) {
+  transform: scale(var(--kui-disclosure-icon-scale, 0.5));
+}
+.kui-select::part(listbox) {
+  width: max-content;
+  min-width: 100%;
+  max-width: min(20rem, calc(100vw - 1.25rem));
+}
+.kui-select--fit-menu::part(listbox) {
+  width: 100%;
+}
+.kui-select wa-option::part(base) {
+  align-items: center;
+}
+.kui-select wa-option {
+  --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
+  /* Current option text sits on the activated brand fill; use the darker on-fill
+     accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
+  --current-text-color: var(--kui-color-brand-on-fill);
+}
+.kui-select wa-option::part(start) {
+  align-self: center;
+  margin-top: 0;
+}
+.kui-select wa-option::part(label) {
+  min-width: 0;
+  padding-block: 0.35rem;
+  line-height: 1.25;
+  overflow-wrap: normal;
+  word-break: normal;
+  white-space: normal;
+}
+.kui-select__icon {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.kui-select__icon[slot="start"] {
+  margin-inline-end: 0.5rem !important;
+}
+.kui-select__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.kui-select__custom-selected {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+}
+.kui-select--custom-selected::part(start) {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.kui-select--custom-selected::part(display-input) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.kui-select__group {
+  display: grid;
+  padding: 0.25rem 0;
+}
+.kui-select__group--separated {
+  margin-block-start: 0.25rem;
+  padding-block-start: 0.5rem;
+  border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
+}
+.kui-select__group-title {
+  padding: 0.2rem 0.75rem 0.3rem;
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: 750;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* Loading placeholder: a static box that mirrors the closed combobox (label
+   above, a value skeleton and a dormant chevron inside a 44px control box).
+   Rendered instead of the interactive wa-select, so it needs no registration. */
+.kui-select--placeholder {
+  display: block;
+  width: 100%;
+}
+.kui-select__placeholder-label {
+  display: block;
+  margin-block-end: 0.25rem;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-s);
+  line-height: 1.4;
+}
+.kui-select__placeholder-box {
+  display: flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface);
+}
+.kui-select__placeholder-box .kui-skeleton {
+  max-width: 10rem;
+}
+.kui-select__placeholder-chevron {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+  color: var(--kui-color-text-quiet);
+  transform: scale(var(--kui-disclosure-icon-scale, 0.85));
+}
+.kui-select__placeholder-chevron svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/dist/styles/skeleton.css

@@ -0,0 +1,31 @@
+.kui-skeleton {
+  --kui-skeleton-radius: var(--kui-radius-s);
+
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+  height: 1em;
+  min-width: 1.5rem;
+  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. */
+  background: color-mix(in srgb, var(--kui-color-text) 12%, transparent);
+  vertical-align: middle;
+}
+
+.kui-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-skeleton-lines .kui-skeleton {
+  height: 0.8em;
+}
+
+@media (forced-colors: active) {
+  .kui-skeleton {
+    background: GrayText;
+  }
+}

package/dist/styles/split-view.css

@@ -0,0 +1,35 @@
+.kui-split-view {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+/* The list pane; when not resizable it takes an intrinsic column and the detail
+   grows to fill. A resizable list is sized by ResizableRegion instead. */
+.kui-split-view__list {
+  min-width: 0;
+  min-height: 0;
+  flex: 0 0 auto;
+  width: var(--kui-split-view-list-width, 20rem);
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.kui-split-view > .kui-resizable-region .kui-split-view__list {
+  width: 100%;
+  border-inline-end: 0;
+}
+
+.kui-split-view__detail {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Compact mode is a full-bleed NavStack. */
+.kui-split-view--compact {
+  display: block;
+  height: 100%;
+}

package/dist/styles/state-banner.css

@@ -0,0 +1,198 @@
+.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-badge-background: var(
+    --kui-state-banner-badge-background,
+    var(--_kui-state-banner-foreground)
+  );
+  --_kui-state-banner-badge-foreground: var(
+    --kui-state-banner-badge-foreground,
+    var(--kui-color-surface)
+  );
+  --_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)
+  );
+  display: grid;
+  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);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.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="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-quiet))
+  );
+}
+.kui-state-banner__icon {
+  display: grid;
+  place-items: center;
+}
+.kui-state-banner__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+.kui-state-banner__copy {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-state-banner__copy strong {
+  font-size: var(--kui-font-xs);
+}
+.kui-state-banner__badge {
+  display: inline-grid;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  box-sizing: border-box;
+  border-radius: var(--kui-radius-pill);
+  color: var(--_kui-state-banner-badge-foreground);
+  background: var(--_kui-state-banner-badge-background);
+  place-items: center;
+  flex: none;
+  font-size: var(--kui-font-2xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+}
+.kui-state-banner__detail {
+  overflow: hidden;
+  color: var(--_kui-state-banner-detail);
+  font-size: var(--kui-font-2xs);
+  opacity: 0.78;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kui-state-banner__action {
+  justify-self: end;
+}
+.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) {
+  .kui-state-banner__copy {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.05rem;
+  }
+  .kui-state-banner__badge {
+    justify-self: start;
+  }
+  .kui-state-banner__detail {
+    grid-column: 1 / -1;
+  }
+}

package/dist/styles/styles.css

@@ -0,0 +1,24 @@
+@import "./foundation.css";
+@import "./layout.css";
+@import "./lucide-icon.css";
+@import "./disclosure-arrow.css";
+@import "./toolbar.css";
+@import "./toolbar-control-group.css";
+@import "./toolbar-text.css";
+@import "./list.css";
+@import "./list-action-row.css";
+@import "./list-item.css";
+@import "./list-header.css";
+@import "./resizable-region.css";
+@import "./app-tab.css";
+@import "./catalog.css";
+@import "./tab-bar.css";
+@import "./loading-spinner.css";
+@import "./skeleton.css";
+@import "./select.css";
+@import "./segmented-control.css";
+@import "./token-search-field.css";
+@import "./state-banner.css";
+@import "./empty-state.css";
+@import "./panel-header.css";
+@import "./value-table.css";