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

package/dist/styles/components/forms/radio-group/radio-group.css

@@ -0,0 +1,156 @@
+/* RadioGroup: the group label, the choices on the text column (each a drawn
+   circle beside its label, the native radio invisibly over the circle), and
+   hint and error text below. */
+.kui-radio-group {
+  --_kui-radio-group-size: 1.25rem;
+  --_kui-radio-group-gap: 0.5rem;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-radio-group[data-size="compact"] {
+  --_kui-radio-group-size: 1.125rem;
+  --_kui-radio-group-gap: 0.4375rem;
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (TextField's too). */
+.kui-radio-group__label {
+  display: block;
+  float: none;
+  margin-block-end: 0.375rem;
+  padding: 0;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.kui-radio-group__choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+}
+.kui-radio-group[data-orientation="horizontal"] .kui-radio-group__choices {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 1.5rem;
+}
+.kui-radio-group__choice {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.kui-radio-group__row {
+  display: inline-flex;
+  width: fit-content;
+  align-items: flex-start;
+  gap: var(--_kui-radio-group-gap);
+  color: var(--kui-color-text);
+  cursor: pointer;
+}
+.kui-radio-group__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+.kui-radio-group__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+.kui-radio-group__circle {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: var(--_kui-radio-group-size);
+  height: var(--_kui-radio-group-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: 50%;
+  background-color: var(--kui-color-surface);
+}
+.kui-radio-group__input:checked + .kui-radio-group__circle {
+  border-color: var(--kui-color-brand-fill-loud);
+}
+.kui-radio-group__input:checked + .kui-radio-group__circle::after {
+  width: 60%;
+  height: 60%;
+  border-radius: 50%;
+  background-color: var(--kui-color-brand-fill-loud);
+  content: "";
+}
+.kui-radio-group__input:focus-visible + .kui-radio-group__circle {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-radio-group[data-invalid] .kui-radio-group__circle {
+  border-color: var(--kui-color-danger-border-loud);
+}
+.kui-radio-group__choice-label {
+  min-width: 0;
+  padding-block-start: calc((var(--_kui-radio-group-size) - 1lh) / 2);
+  overflow-wrap: anywhere;
+}
+.kui-radio-group__choice:has(.kui-radio-group__input:disabled)
+  .kui-radio-group__row {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.kui-radio-group__choice-hint {
+  padding-inline-start: calc(
+    var(--_kui-radio-group-size) + var(--_kui-radio-group-gap)
+  );
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-radio-group__hint,
+.kui-radio-group__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-radio-group[data-size="compact"]
+  :is(
+    .kui-radio-group__hint,
+    .kui-radio-group__error,
+    .kui-radio-group__choice-hint
+  ) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-radio-group__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-radio-group__hint + .kui-radio-group__error {
+  margin-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-radio-group__circle {
+    border-color: CanvasText;
+  }
+  .kui-radio-group__input:checked + .kui-radio-group__circle {
+    border-color: Highlight;
+  }
+  .kui-radio-group__input:checked + .kui-radio-group__circle::after {
+    background-color: Highlight;
+  }
+}

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

@@ -1,34 +1,33 @@
-.kui-token-search__field {
+.kui-search-field__field {
   display: grid;
   width: 100%;
   min-width: 0;
-  gap: var(--wa-space-2xs, 0.25rem);
+  gap: var(--kui-space-2xs, 0.25rem);
 }
 
-.kui-token-search__field-label {
+.kui-search-field__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));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
   font-weight: 650;
   letter-spacing: 0.04em;
-  line-height: var(--wa-line-height-condensed, 1.2);
+  line-height: 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-search-field__field-required {
+  margin-inline-start: 0.1em;
 }
 
-.kui-token-search__field-hint {
+.kui-search-field__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);
+  line-height: 1.6;
 }
 
-.kui-token-search {
-  --kui-token-search-line-size: 2.125rem;
+.kui-search-field {
+  --kui-search-field-line-size: 2.125rem;
 
   display: grid;
   position: relative;
@@ -38,54 +37,51 @@
   padding: 0.25rem 0.5rem;
   box-sizing: border-box;
   border: 1px solid
-    var(--kui-token-search-border, var(--kui-color-neutral-border-normal));
+    var(--kui-search-field-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));
+  background: var(--kui-search-field-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 {
+.kui-search-field: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-search-field[data-presentation="form-field"] {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
 }
 
-.kui-token-search[data-disabled="true"] {
+.kui-search-field[data-disabled="true"] {
   opacity: 0.55;
 }
 
-.kui-token-search__leading {
+.kui-search-field__leading {
   display: inline-flex;
   grid-column: 1;
   width: 1rem;
   height: 1rem;
   margin-block-start: calc(
-    (var(--kui-token-search-line-size) - 1rem) / 2
+    (var(--kui-search-field-line-size) - 1rem) / 2
   );
   color: var(--kui-color-text-quiet);
 }
 
-.kui-token-search__leading svg {
+.kui-search-field__leading svg {
   width: 100%;
   height: 100%;
 }
 
-.kui-token-search__editor {
+.kui-search-field__editor {
   grid-column: 2;
   grid-row: 1;
-  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;
+  min-width: var(--kui-search-field-editor-min-width, 0px);
+  min-height: var(--kui-search-field-line-size);
+  padding-block: calc((var(--kui-search-field-line-size) - 1.35em) / 2) 0;
   box-sizing: border-box;
   outline: 0;
   caret-color: var(--kui-color-brand-on-quiet);
@@ -100,18 +96,18 @@
    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 {
+  .kui-search-field__editor {
     font-size: max(16px, var(--kui-font-s));
   }
 }
 
-.kui-token-search[data-placeholder-visible="true"]:has(
-    > .kui-token-search__editor
+.kui-search-field[data-placeholder-visible="true"]:has(
+    > .kui-search-field__editor
   )::before {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
-  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
+  padding-block: calc((var(--kui-search-field-line-size) - 1.35em) / 2) 0;
   color: var(--kui-color-text-quiet);
   content: attr(data-placeholder);
   font-size: var(--kui-font-s);
@@ -121,18 +117,18 @@
   white-space: nowrap;
 }
 
-.kui-token-search__token {
+.kui-search-field__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,
+    --kui-search-field-token-foreground,
     var(--kui-color-brand-on-quiet)
   );
   background: var(
-    --kui-token-search-token-background,
+    --kui-search-field-token-background,
     var(--kui-color-brand-fill-normal)
   );
   font-size: var(--kui-font-xs);
@@ -143,9 +139,9 @@
   gap: 0.1rem;
 }
 
-.kui-token-search__token button,
-.kui-token-search__clear,
-.kui-token-search__trailing-action {
+.kui-search-field__token button,
+.kui-search-field__clear,
+.kui-search-field__trailing-action {
   appearance: none;
   display: inline-grid;
   padding: 0;
@@ -157,75 +153,75 @@
   place-items: center;
 }
 
-.kui-token-search__token-edit {
+.kui-search-field__token-edit {
   height: 100%;
 }
 
-.kui-token-search__token-remove {
+.kui-search-field__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,
-.kui-token-search__trailing-action[aria-expanded="true"],
-.kui-token-search__trailing-action[aria-pressed="true"] {
+.kui-search-field__token-remove:hover,
+.kui-search-field__token-remove:focus-visible,
+.kui-search-field__clear:hover,
+.kui-search-field__clear:focus-visible,
+.kui-search-field__trailing-action:hover,
+.kui-search-field__trailing-action:focus-visible,
+.kui-search-field__trailing-action[aria-expanded="true"],
+.kui-search-field__trailing-action[aria-pressed="true"] {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
 /* An open disclosure or an on toggle keeps the hover fill and reads at full
    text strength, so its state stays visible after the pointer leaves. */
-.kui-token-search__trailing-action[aria-expanded="true"],
-.kui-token-search__trailing-action[aria-pressed="true"] {
+.kui-search-field__trailing-action[aria-expanded="true"],
+.kui-search-field__trailing-action[aria-pressed="true"] {
   color: var(--kui-color-text);
 }
 
-.kui-token-search__token button:focus-visible,
-.kui-token-search__clear:focus-visible,
-.kui-token-search__trailing-action:focus-visible {
+.kui-search-field__token button:focus-visible,
+.kui-search-field__clear:focus-visible,
+.kui-search-field__trailing-action:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-token-search button:disabled {
+.kui-search-field button:disabled {
   cursor: default;
 }
 
-.kui-token-search__token svg {
+.kui-search-field__token svg {
   width: 0.7rem;
   height: 0.7rem;
 }
 
-.kui-token-search__clear,
-.kui-token-search__trailing,
-.kui-token-search__trailing-action {
+.kui-search-field__clear,
+.kui-search-field__trailing,
+.kui-search-field__trailing-action {
   display: inline-grid;
   width: 1.5rem;
-  height: var(--kui-token-search-line-size);
+  height: var(--kui-search-field-line-size);
   color: var(--kui-color-text-quiet);
   place-items: center;
 }
 
-.kui-token-search__clear {
+.kui-search-field__clear {
   grid-column: 3;
   border-radius: var(--kui-radius-pill);
 }
 
-.kui-token-search__trailing {
+.kui-search-field__trailing {
   grid-column: 4;
 }
 
-.kui-token-search__trailing-action {
+.kui-search-field__trailing-action {
   grid-column: 4;
   border-radius: var(--kui-radius-pill);
 }
 
-.kui-token-search__suggestions {
+.kui-search-field__suggestions {
   display: grid;
   position: absolute;
   z-index: 20;
@@ -243,11 +239,11 @@
   overflow-y: auto;
 }
 
-.kui-token-search__suggestions:has(> :nth-child(2)) {
+.kui-search-field__suggestions:has(> :nth-child(2)) {
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
 }
 
-.kui-token-search__suggestion {
+.kui-search-field__suggestion {
   width: 100%;
   padding: 0.375rem 0.5rem;
   border: 0;
@@ -260,28 +256,28 @@
   cursor: pointer;
 }
 
-.kui-token-search__suggestion:hover,
-.kui-token-search__suggestion:focus-visible {
+.kui-search-field__suggestion:hover,
+.kui-search-field__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 {
+.kui-search-field[data-has-trailing="false"] .kui-search-field__clear {
   grid-column: 4;
 }
 
-.kui-token-search__clear svg,
-.kui-token-search__trailing svg,
-.kui-token-search__trailing-action svg {
+.kui-search-field__clear svg,
+.kui-search-field__trailing svg,
+.kui-search-field__trailing-action svg {
   width: 0.85rem;
   height: 0.85rem;
 }
 
-.kui-token-search[data-collapsible="true"] {
+.kui-search-field[data-collapsible="true"] {
   width: min(
     var(
       --_kui-toolbar-group-grow-search-width,
-      var(--kui-token-search-expanded-width, 30rem)
+      var(--kui-search-field-expanded-width, 30rem)
     ),
     100%
   );
@@ -306,7 +302,7 @@
 /* While a grow search group is still narrower than its basis, keep the
    basis-wide layout it provides; the group clips the field and reveals the
    query instead of re-wrapping it every frame. Elsewhere this is 0px. */
-.kui-token-search[data-collapsible="true"][data-expanded="true"] {
+.kui-search-field[data-collapsible="true"][data-expanded="true"] {
   min-width: var(--_kui-toolbar-group-grow-search-min-width, 0px);
 }
 
@@ -314,13 +310,13 @@
    reveals it instead of re-wrapping it in the narrow, still-growing field.
    Wrapping returns when the opening ends. The duration is 0s (no effect)
    outside a search group and under reduced motion. */
-.kui-token-search[data-collapsible="true"][data-expanded="true"]
-  > .kui-token-search__editor {
-  animation: kui-token-search-reveal
+.kui-search-field[data-collapsible="true"][data-expanded="true"]
+  > .kui-search-field__editor {
+  animation: kui-search-field-reveal
     var(--_kui-toolbar-group-search-reveal-duration, 0s) linear;
 }
 
-@keyframes kui-token-search-reveal {
+@keyframes kui-search-field-reveal {
   from,
   to {
     overflow-wrap: normal;
@@ -328,18 +324,18 @@
   }
 }
 
-.kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
+.kui-search-field[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
+.kui-search-field[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-search-field__suggestions
   ) {
   overflow: visible;
 }
 
-.kui-token-search[data-collapsible="true"][data-expanded="false"] {
+.kui-search-field[data-collapsible="true"][data-expanded="false"] {
   width: 2.75rem;
   min-width: 2.75rem;
   height: 2.75rem;
@@ -348,7 +344,7 @@
   flex: 0 0 auto;
 }
 
-.kui-token-search__expand {
+.kui-search-field__expand {
   appearance: none;
   display: grid;
   width: 100%;
@@ -362,51 +358,51 @@
   place-items: center;
 }
 
-.kui-token-search__expand:hover {
+.kui-search-field__expand:hover {
   background: var(--kui-color-surface-lowered);
 }
 
-.kui-token-search__expand:focus-visible {
+.kui-search-field__expand:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-token-search__expand svg {
+.kui-search-field__expand svg {
   width: 1rem;
   height: 1rem;
 }
 
-.kui-token-search[data-collapsible="true"][data-expanded="true"]
-  .kui-token-search__leading {
+.kui-search-field[data-collapsible="true"][data-expanded="true"]
+  .kui-search-field__leading {
   margin-inline-start: 0.375rem;
 }
 
-.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"] {
-  --kui-token-search-line-size: 2rem;
+.kui-search-field[data-presentation="toolbar-group"][data-collapsible="true"] {
+  --kui-search-field-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 contract as buttons instead of retaining SearchField'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,
-.kui-token-search[data-presentation="toolbar-group"]
-  .kui-token-search__trailing-action {
+.kui-search-field[data-presentation="toolbar-group"] .kui-search-field__clear,
+.kui-search-field[data-presentation="toolbar-group"]
+  .kui-search-field__trailing-action {
   border-radius: var(--kui-control-highlight-radius);
 }
 
-.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
+.kui-search-field[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));
+  background: var(--kui-search-field-background, var(--kui-color-surface));
 }
 
-.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
+.kui-search-field[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
   width: 2.5rem;
   min-width: 2.5rem;
   height: 2.5rem;
@@ -414,19 +410,32 @@
   padding: 0;
 }
 
-.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
-  .kui-token-search__expand {
+.kui-search-field[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
+  .kui-search-field__expand {
   padding-inline: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kui-token-search[data-collapsible="true"] {
+  .kui-search-field[data-collapsible="true"] {
     transition-duration: 0s;
   }
 }
 
 @media (forced-colors: active) {
-  .kui-token-search__token {
+  .kui-search-field__token {
     border: 1px solid ButtonText;
   }
 }
+
+/* In an invalid TagField the frame and the hint (its error) take the danger
+   color. */
+.kui-tag-field[data-invalid] .kui-search-field {
+  --kui-search-field-border: var(
+    --kui-color-danger-border-loud,
+    var(--kui-color-danger-fill-loud)
+  );
+}
+
+.kui-tag-field[data-invalid] .kui-search-field__field-hint {
+  color: var(--kui-color-danger-on-quiet, var(--kui-color-danger-fill-loud));
+}