@botiverse/raft-ui 0.11.0 → 0.13.0

package/dist/style.css

@@ -1138,6 +1138,14 @@
   overflow: hidden;
 }
 
+.r-combobox-select__option .r-combobox-select__text {
+  -webkit-line-clamp: 2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}
+
 .r-combobox-select__actions {
   flex: none;
   align-items: center;
@@ -1205,7 +1213,7 @@
   width: var(--anchor-width, max-content);
   min-width: 13.75rem;
   max-width: var(--available-width);
-  max-height: min(var(--available-height), 24rem);
+  max-height: min(var(--available-height), max(24rem, var(--combobox-select-list-max-height, 0px)));
   background: var(--layer-popover);
   color: var(--foreground);
   box-shadow: 0 0 0 1px var(--line-seam),
@@ -1217,8 +1225,9 @@
 }
 
 .r-combobox-select__list {
+  box-sizing: border-box;
+  max-height: var(--combobox-select-list-max-height, 16rem);
   overscroll-behavior: contain;
-  max-height: 16rem;
   padding: 6px;
   scroll-padding-block: 6px;
   overflow-y: auto;
@@ -1238,7 +1247,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 0 10px;
+  padding: 6px 10px;
   font-weight: 500;
   transition: background-color .12s, color .12s;
   display: flex;
@@ -1349,134 +1358,12 @@
   color: var(--foreground-disabled);
 }
 
-.r-combobox-select__trigger {
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: inherit;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  cursor: default;
-  -webkit-tap-highlight-color: transparent;
-  background: none;
-  border: 0;
-  outline: 0;
-  flex: 1;
-  align-items: center;
-  padding: 0;
-  display: flex;
-}
-
-.r-combobox-select__trigger:after {
-  content: "";
-  border-radius: inherit;
-  position: absolute;
-  inset: 0;
-}
-
-.r-combobox-select__trigger:disabled {
-  color: inherit;
-}
-
-.r-combobox-select__value {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.r-combobox-select__placeholder {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  color: var(--foreground-hint);
-  overflow: hidden;
-}
-
-.r-combobox-select__trigger .r-combobox-select__chips {
-  margin-inline-start: -6px;
-}
-
-.r-combobox-select__trigger .r-combobox-select__chip {
-  padding-inline-end: 8px;
-}
-
-.r-combobox-select__clear {
-  z-index: 1;
-  position: relative;
-}
-
-.r-combobox-select__arrow {
-  pointer-events: none;
-}
-
-.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
-  transform: rotate(180deg);
-}
-
 .r-combobox-select__popup--anchored .r-combobox-select__list {
-  box-sizing: border-box;
-  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
-}
-
-.r-combobox-select__sheet-popup {
-  height: 82dvh;
-}
-
-.r-combobox-select__sheet {
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.r-combobox-select__sheet-header {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  padding-inline-end: 8px;
-}
-
-.r-combobox-select__sheet-title {
-  flex: 1;
-  min-width: 0;
-}
-
-.r-combobox-select__sheet-search {
-  flex: none;
-  padding: 4px 16px 8px;
-}
-
-.r-combobox-select__search-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--foreground-hint);
-  flex: none;
-}
-
-.r-combobox-select__sheet-body {
-  overscroll-behavior: contain;
-  min-height: 0;
-  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
-  overflow-y: auto;
-}
-
-.r-combobox-select__sheet .r-combobox-select__list {
-  max-height: none;
-  padding: 0;
-  overflow: visible;
-}
-
-.r-combobox-select__sheet .r-combobox-select__option {
-  min-height: 52px;
-  font-size: var(--text-body);
-  line-height: var(--text-body--line-height);
-  padding: 0 12px;
+  max-height: min(var(--combobox-select-list-max-height, 16rem), var(--available-height, 100vh));
 }
 
-.r-combobox-select__sheet .r-combobox-select__group-label {
-  padding: 12px 12px 4px;
+.r-combobox-select__control--phone .r-combobox-select__input {
+  font-size: max(1em, 16px);
 }
 
 @keyframes r-combobox-select-spin {

package/dist/styles.css

@@ -283,6 +283,9 @@
   --color-foreground-on-frame-active: var(--foreground-on-frame-active);
   --color-fill-frame-pressed: var(--fill-frame-pressed);
   --color-fill-pressed: var(--fill-pressed);
+  --color-fill-row-hover: var(--fill-row-hover);
+  --color-fill-message-hover: var(--fill-message-hover);
+  --color-fill-row-open: var(--fill-row-open);
   --color-layer-code: var(--layer-code);
   --color-foreground-link: var(--foreground-link);
   --color-sticker-ink: var(--sticker-ink);
@@ -490,6 +493,18 @@ body {
   background-image: linear-gradient(var(--fill-pressed), var(--fill-pressed));
 }
 
+/* A row laid over a solid surface (a list row on a card, a file row) hovers
+   with the lighter row step, as an overlay too, so press (press-overlay)
+   replaces it instead of stacking on it. */
+@utility row-hover-overlay {
+  background-image: linear-gradient(var(--fill-row-hover), var(--fill-row-hover));
+}
+
+/* The same row with its menu open: fill-row-open, as an overlay. */
+@utility row-open-overlay {
+  background-image: linear-gradient(var(--fill-row-open), var(--fill-row-open));
+}
+
 @utility press-overlay-sticker {
   background-image: linear-gradient(var(--sticker-pressed), var(--sticker-pressed));
 }

package/dist/tokens.json

@@ -1527,6 +1527,63 @@
           }
         }
       }
+    },
+    "row-hover": {
+      "$description": "Hover on a whole row (sidebar, list, inbox, search result, table, file row): one perceptible step (OKLab dE about 2.8 in both modes), below every selection tint, so text keeps its contrast.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.04
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.03
+            }
+          }
+        }
+      }
+    },
+    "message-hover": {
+      "$description": "Hover on a message: the lightest perceptible step (OKLab dE about 2.1 in both modes), because a message is a large block someone reads with the pointer resting on it.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.03
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.022
+            }
+          }
+        }
+      }
+    },
+    "row-open": {
+      "$description": "Any row with its menu open (right-click, its menu button, press and hold): one step over a hover (OKLab dE 3.4 to 4.3 on every row surface), because on a phone, which has no hover, it is the only sign of which row the menu acts on. Still under info-soft and brand-soft on every surface.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [0.1813, 0.005, 17.62],
+        "alpha": 0.05
+      },
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.04
+            }
+          }
+        }
+      }
     }
   },
   "line": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { M as StyledProps, O as ButtonProps, T as DialogTrigger, i as DialogClose, j as DataAttributes, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-CAdZkAtE.mjs";
+import { C as MessageQuotedPreviewAuthorDelegatedBy, Hi as DialogTitleProps, Ki as ButtonProps, Si as DialogClose, Ti as DialogContentProps, Ui as DialogTrigger, Xi as StyledProps, Yi as DataAttributes, a as MessageListJumpPillDismissProps, c as MessageListJumpPillProps, cn as MessageItemDelegatedAvatar, dn as MessageItemDelegatedByButton, fn as MessageItemDelegatedByButtonProps, hn as MessageItemDelegatedByProps, i as MessageListJumpPillDismiss, ln as MessageItemDelegatedAvatarProps, mn as MessageItemDelegatedByNameProps, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pn as MessageItemDelegatedByName, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, un as MessageItemDelegatedBy, w as MessageQuotedPreviewAuthorDelegatedByProps, yi as Dialog } from "./index-epyBg4aG.mjs";
 import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
@@ -24,12 +24,6 @@ interface ComboboxSelectMessages {
   chipDescription: string;
   inputDescription: string;
   remove: (label: string) => string;
-  /** The placeholder of the search input at the top of the phone's bottom sheet. */
-  search: string;
-  /** The button that closes the phone's bottom sheet of a multiple select. */
-  done: string;
-  /** The close button of the phone's bottom sheet. */
-  close: string;
 }
 type RootProps = Combobox.Root.Props<unknown, boolean>;
 type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
@@ -75,30 +69,23 @@ type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean
   loadingContent?: ReactNode;
   messages?: Partial<ComboboxSelectMessages>;
   /**
-   * On a phone (a touch screen under 48rem), more selectable options than this open a
-   * bottom sheet instead of the anchored list.
-   * @default 10
+   * The tallest the list gets before it scrolls, its 6px padding above and below
+   * included: a CSS length, or a number of pixels. On a phone the list also gets
+   * shorter to fit the room on its side, and opens above when that side has more
+   * room and below is short of this height.
+   * @default "16rem"
    */
-  sheetThreshold?: number;
-  /**
-   * The title of the phone's bottom sheet. Defaults to the field's name: `aria-label`,
-   * the text of `aria-labelledby`, or the `<label>` whose `for` is the field's `id`.
-   */
-  sheetTitle?: ReactNode;
-  /** The text input: the field on a desktop, the search input of the bottom sheet on a phone. */
+  listMaxHeight?: number | string;
   inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
-  /** The portal of the list, and of the phone's anchored list and bottom sheet. */
   portalProps?: Combobox.Portal.Props;
-  /** The desktop list's positioner. A phone positions its list itself. */
   positionerProps?: Omit<Combobox.Positioner.Props, "children">;
-  /** The desktop list's popup. */
   popupProps?: Omit<Combobox.Popup.Props, "children">;
   className?: string;
   style?: CSSProperties;
 };
 //#endregion
 //#region src/components/combobox-select/combobox-select.d.ts
-export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, sheetThreshold, sheetTitle, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, listMaxHeight, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, onOpenChange, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
 //#endregion
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
@@ -278,4 +265,4 @@ type UseCommentMarginFitsOptions = {
  */
 export declare function useCommentMarginFits(element: Element | null, { minWidth }?: UseCommentMarginFitsOptions): boolean;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, type UseCommentMarginFitsOptions };
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, type UseCommentMarginFitsOptions };