@kerfjs/ui 4.4.1 → 5.0.0-beta.4

package/dist/styles/state-banner.css

@@ -0,0 +1,173 @@
+.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)
+  );
+  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-quiet))
+  );
+}
+.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-quiet)
+    )
+  );
+}
+.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-quiet)
+    )
+  );
+}
+.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__copy span {
+  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;
+    gap: 0.05rem;
+  }
+}

package/dist/styles/styles.css

@@ -0,0 +1,22 @@
+@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 "./menu-action-row.css";
+@import "./menu-item.css";
+@import "./menu-header.css";
+@import "./resizable-region.css";
+@import "./app-tab.css";
+@import "./tab-bar.css";
+@import "./page-header.css";
+@import "./loading-spinner.css";
+@import "./select.css";
+@import "./segmented-control.css";
+@import "./token-search-field.css";
+@import "./state-banner.css";
+@import "./empty-state.css";
+@import "./dialog-header.css";
+@import "./value-table.css";

package/dist/styles/tab-bar.css

@@ -0,0 +1,45 @@
+.kui-tab-bar {
+  --kui-tab-bar-background: transparent;
+  --kui-tab-bar-border: transparent;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  background: transparent;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+.kui-tab-bar__tabs {
+  display: flex;
+  min-width: 0;
+  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 1px;
+  overflow-x: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-tab-bar-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  background: var(--kui-tab-bar-background);
+  scrollbar-width: none;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 0;
+  overscroll-behavior-inline: contain;
+}
+
+.kui-tab-bar__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-tab-bar__leading,
+.kui-tab-bar__trailing {
+  display: flex;
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  align-items: center;
+  flex: none;
+}

package/dist/styles/token-search-field.css

@@ -0,0 +1,281 @@
+.kui-token-search {
+  --kui-token-search-background: var(--kui-color-surface);
+  --kui-token-search-border: var(--kui-color-border);
+  --kui-token-search-token-background: var(--kui-color-accent);
+  --kui-token-search-token-foreground: var(--kui-color-accent-text);
+  --kui-token-search-line-size: 2.125rem;
+
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.5rem;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-token-search-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-token-search-background);
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: start;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-token-search:focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+.kui-token-search[data-disabled="true"] {
+  opacity: 0.55;
+}
+
+.kui-token-search__leading {
+  display: inline-flex;
+  grid-column: 1;
+  width: 1rem;
+  height: 1rem;
+  margin-block-start: calc(
+    (var(--kui-token-search-line-size) - 1rem) / 2
+  );
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-token-search__leading svg {
+  width: 100%;
+  height: 100%;
+}
+
+.kui-token-search__editor {
+  grid-column: 2;
+  min-width: 5rem;
+  min-height: var(--kui-token-search-line-size);
+  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
+  box-sizing: border-box;
+  outline: 0;
+  caret-color: var(--kui-color-accent-text);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+}
+
+.kui-token-search__editor:empty::before {
+  color: var(--kui-color-text-quiet);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.kui-token-search__token {
+  display: inline-flex;
+  height: 1.5em;
+  margin-inline: 0.125rem;
+  padding-inline-start: 0.45rem;
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-token-search-token-foreground);
+  background: var(--kui-token-search-token-background);
+  font-size: var(--kui-font-xs);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.kui-token-search__token button,
+.kui-token-search__clear {
+  appearance: none;
+  display: inline-grid;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-token-search__token-edit {
+  height: 100%;
+}
+
+.kui-token-search__token-remove {
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: var(--kui-radius-pill) !important;
+}
+
+.kui-token-search__token-remove:hover,
+.kui-token-search__token-remove:focus-visible,
+.kui-token-search__clear:hover,
+.kui-token-search__clear:focus-visible {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.kui-token-search__token button:focus-visible,
+.kui-token-search__clear:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-token-search button:disabled {
+  cursor: default;
+}
+
+.kui-token-search__token svg {
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.kui-token-search__clear,
+.kui-token-search__trailing {
+  display: inline-grid;
+  width: 1.5rem;
+  height: var(--kui-token-search-line-size);
+  color: var(--kui-color-text-quiet);
+  place-items: center;
+}
+
+.kui-token-search__clear {
+  grid-column: 3;
+}
+
+.kui-token-search__trailing {
+  grid-column: 4;
+}
+
+.kui-token-search[data-has-trailing="false"] .kui-token-search__clear {
+  grid-column: 4;
+}
+
+.kui-token-search__clear svg,
+.kui-token-search__trailing svg {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.kui-token-search[data-collapsible="true"] {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  overflow: hidden;
+  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="false"] {
+  width: 2.75rem;
+  min-width: 2.75rem;
+  height: 2.75rem;
+  padding: 1px;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 0 0 auto;
+}
+
+.kui-token-search__expand {
+  appearance: none;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-token-search__expand:hover {
+  background: var(--kui-color-surface-lowered);
+}
+
+.kui-token-search__expand:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-token-search__expand svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"]
+  .kui-token-search__leading {
+  margin-inline-start: 0.375rem;
+}
+
+.kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  height: auto;
+  min-width: 0;
+  overflow: hidden;
+  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.kui-toolbar-control-group[data-expanded="false"]:has(
+    > .kui-token-search[data-collapsible="true"]
+  ) {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+
+.kui-toolbar-control-group > .kui-token-search[data-collapsible="true"] {
+  --kui-token-search-line-size: 2rem;
+
+  min-height: 2.5rem;
+  padding: 0.25rem 0.375rem;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"]:focus-within {
+  border-color: var(--kui-color-focus);
+  background: var(--kui-token-search-background);
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"][data-expanded="false"] {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0;
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"][data-expanded="false"]
+  .kui-token-search__expand {
+  padding-inline: 0;
+}
+
+.kui-toolbar-control-group:has(
+    > .kui-token-search[data-collapsible="true"]
+  ):focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-token-search[data-collapsible="true"],
+  .kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+    transition-duration: 0s;
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-token-search__token {
+    border: 1px solid ButtonText;
+  }
+}

package/dist/styles/toolbar-control-group.css

@@ -0,0 +1,161 @@
+.kui-toolbar-control-group {
+  --kui-toolbar-control-background: var(--kui-color-neutral-fill-normal);
+  --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-quiet);
+  --kui-toolbar-control-hover-background: var(--kui-color-surface);
+  --kui-toolbar-control-selected-background: var(--kui-color-surface);
+  --kui-toolbar-control-selected-border: var(--kui-color-neutral-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-quiet);
+  --kui-toolbar-control-selected-shadow: var(--kui-shadow-s);
+  --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
+  --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
+  --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  display: inline-flex;
+  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 1px;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-toolbar-control-border);
+  border-radius: var(
+    --kui-toolbar-group-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  color: var(--kui-toolbar-control-color);
+  background: var(--kui-toolbar-control-background);
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 0;
+}
+
+.kui-toolbar-control-group[data-tone="dark"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 72%,
+    transparent
+  );
+  --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-control-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-surface) 28%,
+    transparent
+  );
+}
+
+.kui-toolbar-control-group[data-appearance="borderless"] {
+  border-color: transparent;
+  background: transparent;
+}
+
+.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+  flex: 0 0 auto;
+}
+
+.kui-toolbar-control-group > button {
+  appearance: none;
+  display: grid;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  place-items: center;
+}
+
+.kui-toolbar-control-group > button:hover {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group > button svg,
+.kui-toolbar-control-group wa-button > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-toolbar-control-group > wa-button,
+.kui-toolbar-control-group > wa-dropdown,
+.kui-toolbar-control-group > wa-dropdown > wa-button,
+.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown,
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown
+  > wa-button::part(base) {
+  width: 3rem;
+}
+
+.kui-toolbar-control-group wa-button {
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+
+.kui-toolbar-control-group wa-button::part(base) {
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+
+.kui-toolbar-control-group wa-button:hover::part(base) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group[data-single="true"]:has(
+    > :is(button, wa-button, wa-dropdown)
+  ):hover {
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group[data-single="true"] > :is(button, wa-button):hover,
+.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+
+.kui-toolbar-control-group[data-single="false"]
+  > :is(button, wa-button)[aria-pressed="true"] {
+  border-color: var(--kui-toolbar-control-selected-border);
+  color: var(--kui-toolbar-control-selected-color);
+  background: var(--kui-toolbar-control-selected-background);
+  box-shadow: var(--kui-toolbar-control-selected-shadow);
+}
+
+.kui-toolbar-control-group > :is(button, wa-button):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
+    > :is(button, wa-button)[aria-pressed="true"]
+  ) {
+  --kui-toolbar-control-color: var(--kui-toolbar-control-pressed-color);
+  border-color: var(--kui-toolbar-control-pressed-border);
+  color: var(--kui-toolbar-control-pressed-color);
+  background: var(--kui-toolbar-control-pressed-background);
+}
+
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]
+  > :is(button, wa-button)[aria-pressed="true"] {
+  color: var(--kui-toolbar-control-pressed-color);
+}

package/dist/styles/toolbar-text.css

@@ -0,0 +1,29 @@
+.kui-toolbar-text {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--kui-color-neutral-on-quiet);
+  font-weight: 650;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.kui-toolbar-text[data-size="large"] {
+  font-size: var(--kui-font-m);
+  letter-spacing: -0.015em;
+}
+
+.kui-toolbar-text[data-size="default"] {
+  font-size: var(--kui-font-s);
+}
+
+.kui-toolbar-text[data-size="small"] {
+  font-family: var(--kui-font-mono);
+  font-size: var(--kui-font-xs);
+}