@kerfjs/ui 5.0.0-beta.75 → 5.0.0-beta.76

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

@@ -0,0 +1,381 @@
+.kui-token-search__field {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: var(--wa-space-2xs, 0.25rem);
+}
+
+.kui-token-search__field-label {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+  font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: var(--wa-line-height-condensed, 1.2);
+  text-transform: uppercase;
+}
+
+.kui-token-search__field-required {
+  margin-inline-start: var(--wa-form-control-required-content-offset, 0.1em);
+  color: var(--wa-form-control-required-content-color, inherit);
+}
+
+.kui-token-search__field-hint {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  line-height: var(--wa-line-height-normal, 1.6);
+}
+
+.kui-token-search {
+  --kui-token-search-line-size: 2.125rem;
+
+  display: grid;
+  position: relative;
+  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, var(--kui-color-neutral-border-normal));
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
+  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-presentation="form-field"] {
+  border-radius: var(
+    --wa-form-control-border-radius,
+    var(--wa-border-radius-m)
+  );
+}
+
+.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: var(--kui-token-search-editor-min-width, 0px);
+  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-brand-on-quiet);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+}
+
+/* iOS can magnify a small editor on focus and leave the page magnified after
+   blur. Keep the desktop small-text rhythm, but give touch editors legible text
+   without restricting the user's own page zoom. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-token-search__editor {
+    font-size: max(16px, var(--kui-font-s));
+  }
+}
+
+.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,
+    var(--kui-color-brand-on-quiet)
+  );
+  background: var(
+    --kui-token-search-token-background,
+    var(--kui-color-brand-fill-normal)
+  );
+  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,
+.kui-token-search__trailing-action {
+  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,
+.kui-token-search__trailing-action:hover,
+.kui-token-search__trailing-action:focus-visible {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.kui-token-search__token button:focus-visible,
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action: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,
+.kui-token-search__trailing-action {
+  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;
+  border-radius: var(--kui-radius-pill);
+}
+
+.kui-token-search__trailing {
+  grid-column: 4;
+}
+
+.kui-token-search__trailing-action {
+  grid-column: 4;
+  border-radius: var(--kui-radius-pill);
+}
+
+.kui-token-search__suggestions {
+  display: grid;
+  position: absolute;
+  z-index: 20;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+  width: min(max(100%, 15rem), calc(100vw - 1rem));
+  max-height: 15rem;
+  padding: var(--_kui-popup-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-m);
+  gap: var(--_kui-popup-row-gap);
+  overflow-y: auto;
+}
+
+.kui-token-search__suggestions:has(> :nth-child(2)) {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+}
+
+.kui-token-search__suggestion {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+.kui-token-search__suggestion:hover,
+.kui-token-search__suggestion:focus-visible {
+  background: var(--kui-color-surface-lowered);
+  outline: var(--kui-focus-ring);
+}
+
+.kui-token-search[data-has-trailing="false"] .kui-token-search__clear {
+  grid-column: 4;
+}
+
+.kui-token-search__clear svg,
+.kui-token-search__trailing svg,
+.kui-token-search__trailing-action svg {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.kui-token-search[data-collapsible="true"] {
+  width: min(
+    var(
+      --_kui-toolbar-group-grow-search-width,
+      var(--kui-token-search-expanded-width, 30rem)
+    ),
+    100%
+  );
+  max-width: 100%;
+  overflow: hidden;
+  /* Size the inline axis through `width` only. A `flex-basis` of the expanded
+     width would drive the MAIN axis, which is the field's HEIGHT inside a flex
+     column — stretching the field tall (KF-EPEM88). `flex: 0 1 auto` keeps the
+     no-grow / may-shrink behavior a toolbar row wants without leaking the width
+     into the cross axis. */
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
+
+.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-token-search[data-presentation="toolbar-group"][data-collapsible="true"] {
+  --kui-token-search-line-size: 2rem;
+
+  min-height: 2.5rem;
+  padding: 0.25rem 0.375rem;
+  border: 0;
+  /* This field is the group's inset visual layer. Inherit the same concentric
+     radius contract as buttons instead of retaining TokenSearchField's own pill
+     radius when the group switches to `shape="rounded"`. */
+  border-radius: var(--kui-control-highlight-radius);
+  background: transparent;
+  box-shadow: none;
+}
+
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+  border-radius: var(--kui-control-highlight-radius);
+}
+
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
+  border-color: var(--kui-color-focus);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
+}
+
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0;
+}
+
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
+  .kui-token-search__expand {
+  padding-inline: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-token-search[data-collapsible="true"] {
+    transition-duration: 0s;
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-token-search__token {
+    border: 1px solid ButtonText;
+  }
+}