@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/styles/components/forms/choice-chips/choice-chips.css

@@ -0,0 +1,154 @@
+/* ChoiceChips: separated pills that wrap with the control gap. Each pill is a
+   <label> around a native radio, so the radio owns focus, arrow keys, and the
+   form value; the pill paints the radio's state through :has(). */
+.kui-choice-chips {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+}
+
+.kui-choice-chips__chip {
+  --_kui-choice-chips-border: var(--kui-color-neutral-border-normal);
+
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2rem;
+  padding-inline: 0.75rem;
+  box-sizing: border-box;
+  border: 1px solid var(--_kui-choice-chips-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--kui-font-s);
+  font-weight: var(--kui-font-weight-semibold, 600);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, border-color, box-shadow;
+  transition-duration: 120ms;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__chip {
+  min-height: 1.5rem;
+  padding-inline: 0.5rem;
+  gap: 0.25rem;
+  font-size: var(--kui-font-xs);
+}
+
+/* The native radio covers the pill so a pointer press lands on it directly,
+   but paints nothing: the pill draws its checked and focus state. */
+.kui-choice-chips__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: inherit;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+
+.kui-choice-chips__chip:hover:not([data-disabled]):not(
+    :has(> .kui-choice-chips__input:checked)
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+  --_kui-choice-chips-border: var(--kui-color-brand-border-loud);
+
+  color: var(--kui-color-brand-on-fill);
+  background: var(--kui-color-brand-fill-normal);
+  /* A second pixel of border marks the selection without relying on hue. */
+  box-shadow: inset 0 0 0 1px var(--_kui-choice-chips-border);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-choice-chips__chip[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.kui-choice-chips__swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--_kui-choice-chips-swatch, transparent);
+  /* An inner edge keeps a pale swatch visible against the pill. */
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--kui-color-text) 20%, transparent);
+  flex: none;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__swatch {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* The no-color swatch: an outlined dot struck through from corner to corner. */
+.kui-choice-chips__swatch[data-swatch="transparent"] {
+  position: relative;
+  box-shadow: inset 0 0 0 1px var(--kui-color-neutral-border-loud);
+}
+
+.kui-choice-chips__swatch[data-swatch="transparent"]::after {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 0.75px);
+  width: 1.5px;
+  height: 100%;
+  border-radius: 1px;
+  background: var(--kui-color-danger-on-quiet);
+  content: "";
+  transform: rotate(45deg);
+}
+
+.kui-choice-chips__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-choice-chips__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (forced-colors: active) {
+  .kui-choice-chips__chip {
+    border-color: ButtonBorder;
+  }
+
+  .kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+
+  .kui-choice-chips__swatch {
+    forced-color-adjust: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-choice-chips__chip {
+    transition: none;
+  }
+}

package/dist/styles/components/forms/combobox/combobox.css

@@ -0,0 +1,113 @@
+/* A field label, the themed input with its listbox, and an optional hint,
+   aligned like a Web Awesome form field: label and hint sit on the value's
+   text column (1px border + 8px padding). */
+.kui-combobox {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-combobox__label,
+.kui-combobox__hint {
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+}
+
+.kui-combobox__label {
+  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-combobox__hint {
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__control {
+  position: relative;
+  min-width: 0;
+}
+
+/* The same chrome as a themed wa-input: 44px, 1px border, 8px inset. */
+.kui-combobox__input {
+  width: 100%;
+  min-width: 0;
+  height: 2.75rem;
+  margin: 0;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  font: inherit;
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__input::placeholder {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-combobox__input:focus-visible {
+  border-color: var(--kui-color-text-link);
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+.kui-combobox[data-disabled="true"] {
+  opacity: 0.55;
+}
+
+/* A touch field below 16px makes iOS magnify the page on focus. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-combobox__input {
+    font-size: max(16px, var(--kui-font-s));
+  }
+}
+
+/* The suggestion list drops below the field over the content that follows. */
+.kui-combobox__listbox {
+  position: absolute;
+  z-index: var(--kui-combobox-z-index, 20);
+  inset: calc(100% + var(--kui-space-2xs)) 0 auto;
+  max-height: 15rem;
+  margin: 0;
+  padding: var(--kui-space-2xs);
+  overflow-y: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  list-style: none;
+}
+
+.kui-combobox__listbox[hidden] {
+  display: none;
+}
+
+.kui-combobox__option {
+  margin: 0;
+  padding: var(--kui-space-xs);
+  border-radius: max(
+    0px,
+    calc(var(--kui-layout-rounded-radius, 0.75rem) - var(--kui-space-2xs))
+  );
+  color: var(--kui-color-text);
+  cursor: pointer;
+  font-size: var(--kui-font-s);
+  overflow-wrap: anywhere;
+}
+
+.kui-combobox__option:hover,
+.kui-combobox__option[aria-selected="true"] {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-combobox__option[data-create] {
+  color: var(--kui-color-text-link);
+}

package/dist/styles/components/forms/composer/composer.css

@@ -0,0 +1,100 @@
+/* A chat or prompt composer: a raised frame (surface-raised, the standard
+   neutral border, large radius, shadow-l) whose border turns brand while
+   focus is within. It holds a borderless message field that sizes to its
+   content between the min and max row counts, above an action row with a
+   quiet hint and trailing actions. The 8px padding puts the field's text on
+   the 17px text column when the composer sits 8px from a container edge. */
+
+.kui-composer {
+  --_kui-composer-min-rows: 1;
+  --_kui-composer-max-rows: 8;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  /* Fill the container's inline size: a content-sized field would otherwise
+     shrink the frame to its text. */
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* The frame is the field's boundary, so it carries the focus state. */
+.kui-composer:focus-within {
+  border-color: var(--kui-color-brand-border-loud);
+}
+
+.kui-composer__field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: var(--kui-font-m, inherit);
+  line-height: var(--wa-line-height-normal, 1.6);
+  resize: none;
+  field-sizing: content;
+  min-height: calc(var(--_kui-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-composer-max-rows) * 1lh + 0.5rem);
+  overflow-y: auto;
+}
+
+/* Engines without content sizing keep a three-line field, clamped to the
+   row bounds, that scrolls once the message is longer. */
+@supports not (field-sizing: content) {
+  .kui-composer__field {
+    height: calc(
+      clamp(var(--_kui-composer-min-rows), 3, var(--_kui-composer-max-rows)) *
+        1lh + 0.5rem
+    );
+  }
+}
+
+.kui-composer__field::placeholder {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 1;
+}
+
+.kui-composer__field:disabled {
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: not-allowed;
+}
+
+.kui-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  min-width: 0;
+}
+
+.kui-composer__hint {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kui-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .kui-composer:focus-within {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}

package/dist/styles/components/forms/file-picker/file-picker.css

@@ -0,0 +1,81 @@
+/* The native file input stays inside each label for activation, keyboard
+   focus, and form submission, visually hidden but accessible. */
+.kui-file-picker__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.kui-file-picker__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+/* A compact, link-toned browse trigger. */
+.kui-file-picker[data-presentation="trigger"] {
+  position: relative;
+  display: inline-flex;
+  min-height: 2rem;
+  padding: 0 var(--kui-space-xs);
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text-link);
+  cursor: pointer;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  font-weight: var(--kui-font-weight-semibold);
+}
+
+.kui-file-picker[data-presentation="trigger"]:hover {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+/* A dashed drop target with content-item margins, highlighted on hover and
+   while files are dragged over it. */
+.kui-file-picker[data-presentation="drop-zone"] {
+  position: relative;
+  display: grid;
+  min-height: 5rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-space-s);
+  box-sizing: border-box;
+  border: 1px dashed var(--kui-color-neutral-border-loud);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: pointer;
+  place-items: center;
+  align-content: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  text-align: center;
+}
+
+.kui-file-picker[data-presentation="drop-zone"]:hover,
+.kui-file-picker[data-presentation="drop-zone"][data-dragging="true"] {
+  border-color: var(--kui-color-text-link);
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-file-picker__title {
+  color: var(--kui-color-text);
+}
+
+.kui-file-picker__detail {
+  font-size: var(--kui-font-2xs);
+}
+
+/* Keyboard focus lands on the hidden input; the visible control shows it. */
+.kui-file-picker:has(> .kui-file-picker__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-file-picker[data-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}

package/dist/styles/components/forms/segmented-control/segmented-control.css

@@ -0,0 +1,196 @@
+.kui-segmented-control {
+  --kui-segmented-background: var(--kui-color-neutral-fill-normal);
+  --kui-segmented-border: transparent;
+  --kui-segmented-foreground: var(--kui-color-neutral-on-normal);
+  --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: var(--kui-color-neutral-border-normal);
+  --kui-segmented-selected-shadow: var(--kui-shadow-s);
+  --kui-segmented-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+  --kui-segmented-item-radius: max(
+    0px,
+    calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
+  );
+  display: inline-flex;
+  max-width: 100%;
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 1px;
+  overflow-x: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-segmented-border);
+  border-radius: var(--kui-segmented-radius);
+  color: var(--kui-segmented-foreground);
+  background: var(--kui-segmented-background);
+  align-items: stretch;
+  gap: 0;
+  scrollbar-width: none;
+}
+
+.kui-segmented-control::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-segmented-control[data-appearance="outlined"] {
+  --kui-segmented-border: var(--kui-color-neutral-border-normal);
+  --kui-segmented-background: var(--kui-color-surface);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
+}
+
+.kui-segmented-control[data-appearance="toolbar"] {
+  --kui-segmented-item-radius: var(
+    --kui-control-highlight-radius,
+    max(
+      0px,
+      calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
+    )
+  );
+  --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-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;
+  border: 0;
+  border-radius: 0;
+}
+
+.kui-segmented-control[data-shape="pill"] {
+  --kui-segmented-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
+.kui-segmented-control[data-layout="equal"] {
+  display: grid;
+  width: 100%;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.kui-segmented-control__item {
+  appearance: none;
+  display: inline-flex;
+  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);
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  font: inherit;
+  font-size: var(--kui-font-xs);
+  font-weight: var(--kui-font-weight-semibold);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  /* Web Awesome's native button transition includes color. During a theme
+     switch that briefly puts the old text tone on the new filled track. */
+  transition-property: background, border, box-shadow;
+}
+
+.kui-segmented-control[data-size="small"] .kui-segmented-control__item {
+  padding-inline: 0.4375rem;
+  font-size: var(--kui-font-2xs);
+}
+
+.kui-segmented-control[data-layout="equal"] .kui-segmented-control__item {
+  width: 100%;
+  min-width: 0;
+}
+
+.kui-segmented-control__item:hover:not(:disabled) {
+  border-color: var(--kui-segmented-hover-border);
+  background: var(--kui-segmented-hover-background);
+}
+
+.kui-segmented-control__item[data-selected="true"],
+.kui-segmented-control__item[data-selected="true"]:hover:not(:disabled) {
+  border-color: var(--kui-segmented-selected-border);
+  color: var(--kui-segmented-selected-foreground);
+  background: var(--kui-segmented-selected-background);
+  box-shadow: var(--kui-segmented-selected-shadow);
+}
+
+.kui-segmented-control__item:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* A placeholder is disabled to stay inert, but it is loading, not unavailable:
+   its choices keep the live tone. SegmentedControl renders no skeleton (its
+   choices are known; only the selection is unknown), so it does not load
+   skeleton.css and neutralizes disabled chrome itself, including Web Awesome's
+   native button:disabled. A choice the author disabled (the data-kui-disabled
+   marker) keeps the live disabled tone; only the `not-allowed` cursor is
+   reserved for the live control. */
+.kui-segmented-control[data-placeholder="true"] .kui-segmented-control__item {
+  cursor: default;
+}
+
+.kui-segmented-control[data-placeholder="true"]
+  .kui-segmented-control__item:not([data-kui-disabled="true"]) {
+  opacity: 1;
+}
+
+.kui-segmented-control__item[data-kui-disabled="true"] {
+  opacity: 0.45;
+}
+
+.kui-segmented-control:not([data-placeholder="true"])
+  .kui-segmented-control__item:disabled {
+  cursor: not-allowed;
+}
+
+.kui-segmented-control__item svg {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
+@media (forced-colors: active) {
+  .kui-segmented-control {
+    border-color: ButtonBorder;
+  }
+
+  .kui-segmented-control__item[data-selected="true"] {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+}