@infonomic/uikit 6.7.6 → 6.8.0

package/src/components/button/combo-button.tsx

@@ -1,3 +1,5 @@
+import { useRef } from 'react'
+
 import cx from 'classnames'
 
 import { ChevronDownIcon } from '../../icons/chevron-down-icon'
@@ -5,8 +7,19 @@ import { Dropdown as DropdownComponent } from '../dropdown/dropdown'
 import { Button, type ButtonProps } from './button'
 import styles from './combo-button.module.css'
 
+export interface ComboButtonOption {
+  label: string
+  value: string
+  /**
+   * Optional leading icon for the menu item. Rendered before the label; items
+   * without one still align with their icon-bearing siblings, so a menu may
+   * mix the two.
+   */
+  icon?: React.ReactNode
+}
+
 export type ComboButtonProps = ButtonProps & {
-  options: { label: string; value: string }[]
+  options: ComboButtonOption[]
   onButtonClick?: () => void
   onOptionSelect?: (value: string) => void
   disabled?: boolean
@@ -38,8 +51,20 @@ export const ComboButton = ({
   intent = 'primary',
   ...rest
 }: ComboButtonProps) => {
+  // Reserve the icon column for every item as soon as one option carries an
+  // icon, so labels stay on a common left edge in a mixed menu.
+  const anyOptionHasIcon = options.some((option) => option.icon != null)
+
+  // The menu is positioned against the whole control, not against the dropdown
+  // half that triggers it. Anchoring to the trigger would measure `align`
+  // from the narrow chevron, so an `end`-aligned menu hangs off the right of
+  // the button and a `start`-aligned one starts at the chevron rather than at
+  // the button's left edge.
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
   return (
     <div
+      ref={wrapperRef}
       className={cx('combo-button-wrapper', styles['combo-button-wrapper'], className)}
       style={{ '--ring-color': `var(--ring-${intent})` } as React.CSSProperties}
     >
@@ -65,6 +90,7 @@ export const ComboButton = ({
             <DropdownComponent.Content
               className={cx('combo-button-options', styles['combo-button-options'])}
               align={align}
+              anchor={wrapperRef}
               data-side={dataSide}
               sideOffset={sideOffset}
             >
@@ -76,7 +102,25 @@ export const ComboButton = ({
                   <div
                     className={cx('combo-button-options-item', styles['combo-button-options-item'])}
                   >
-                    {option.label}
+                    {anyOptionHasIcon && (
+                      <span
+                        className={cx(
+                          'combo-button-options-item-icon',
+                          styles['combo-button-options-item-icon']
+                        )}
+                        aria-hidden="true"
+                      >
+                        {option.icon}
+                      </span>
+                    )}
+                    <span
+                      className={cx(
+                        'combo-button-options-item-label',
+                        styles['combo-button-options-item-label']
+                      )}
+                    >
+                      {option.label}
+                    </span>
                   </div>
                 </DropdownComponent.Item>
               ))}

package/src/components/dropdown/dropdown.tsx

@@ -43,6 +43,7 @@ const Content = ({
   align,
   alignOffset,
   collisionPadding,
+  anchor,
   ...rest
 }: {
   ref?: React.RefObject<React.ComponentRef<'div'>>
@@ -53,6 +54,14 @@ const Content = ({
   align?: React.ComponentProps<typeof Menu.Positioner>['align']
   alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
   collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
+  /**
+   * Element the popup is positioned against. Defaults to the trigger, which is
+   * the right answer when the trigger is the whole control. Pass a wider
+   * element when the trigger is only part of it — a combo button's dropdown
+   * half, say — so `align` measures against the control the user sees rather
+   * than against the narrow trigger.
+   */
+  anchor?: React.ComponentProps<typeof Menu.Positioner>['anchor']
 } & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
   return (
     <Menu.Positioner
@@ -61,6 +70,7 @@ const Content = ({
       align={align}
       alignOffset={alignOffset}
       collisionPadding={collisionPadding}
+      anchor={anchor}
     >
       <Menu.Popup
         ref={ref}

package/src/components/inputs/checkbox.module.css

@@ -42,6 +42,14 @@
     outline-color: var(--ring-color);
   }
 
+  /* a11y (WCAG 2.4.7): show a focus ring on keyboard focus regardless of
+     checked state. The intent-level ring color is always defined, whereas
+     --ring-color is only set on [data-checked], so use it directly here. */
+  .checkbox:focus-visible,
+  :global(.infonomic-checkbox):focus-visible {
+    outline-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   .checkbox[data-disabled],
   :global(.infonomic-checkbox)[data-disabled] {
     pointer-events: none;

package/src/components/inputs/label.tsx

@@ -20,7 +20,14 @@ export function Label({ className, id, htmlFor, label, required }: LabelProps):
       className={cx('label', styles.label, className)}
     >
       {label}
-      {required && <span className={styles.required}>&nbsp;*</span>}
+      {/* a11y: the input carries aria-required, so the visual asterisk is
+          decorative — hide it from the accessible name (it would otherwise be
+          read as part of the label via aria-labelledby). */}
+      {required && (
+        <span aria-hidden="true" className={styles.required}>
+          &nbsp;*
+        </span>
+      )}
     </label>
   )
 }

package/src/components/notifications/alert.module.css

@@ -22,7 +22,8 @@
        transparency, without altering the --fill-<intent>-weak color primitives. */
     --alert-background-opacity: 0.5;
     background-color: oklch(
-      from var(--alert-background) l c h / calc(alpha * var(--alert-background-opacity))
+      from var(--alert-background) l c h /
+      calc(alpha * var(--alert-background-opacity))
     );
     color: var(--foreground);
     margin-bottom: 1rem;

package/src/icons/index.ts

@@ -32,6 +32,7 @@ export * from './info-icon.js'
 export * from './infonomic-icon.js'
 export * from './light-icon.js'
 export * from './location-pin-icon.js'
+export * from './markdown-icon.js'
 export * from './moon-icon.js'
 export * from './plus-icon.js'
 export * from './primary-icon.js'

package/src/icons/markdown-icon.tsx

@@ -0,0 +1,42 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+/**
+ * The CommonMark mark — the conventional glyph for "this content is available
+ * as markdown". Used by surfaces that expose a document's `.md` representation.
+ */
+export const MarkdownIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('markdown-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        strokeWidth="0"
+      >
+        <path
+          d="M14.5 3H1.5C0.671573 3 0 3.67157 0 4.5V11.5C0 12.3284 0.671573 13 1.5 13H14.5C15.3284 13 16 12.3284 16 11.5V4.5C16 3.67157 15.3284 3 14.5 3ZM1.5 4H14.5C14.7761 4 15 4.22386 15 4.5V11.5C15 11.7761 14.7761 12 14.5 12H1.5C1.22386 12 1 11.7761 1 11.5V4.5C1 4.22386 1.22386 4 1.5 4Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+        <path d="M2.5 10.5V5.5H4L5.5 7.5L7 5.5H8.5V10.5H7V7.75L5.5 9.75L4 7.75V10.5H2.5Z" />
+        <path d="M11.75 10.5L9.5 8H11V5.5H12.5V8H14L11.75 10.5Z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+MarkdownIcon.displayName = 'MarkdownIcon'

package/src/react.ts

@@ -81,6 +81,7 @@ export * from './icons/info-icon.js'
 export * from './icons/infonomic-icon.js'
 export * from './icons/light-icon.js'
 export * from './icons/location-pin-icon.js'
+export * from './icons/markdown-icon.js'
 export * from './icons/moon-icon.js'
 export * from './icons/plus-icon.js'
 export * from './icons/primary-icon.js'

package/src/styles/functional/colors.css

@@ -210,7 +210,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-200);
+    /* a11y: gray-200 (#C0C0C0) is only 1.8:1 on white; gray-500 (#666666) is
+       5.78:1, clearing the WCAG 1.4.11 / 2.4.7 3:1 non-text contrast minimum. */
+    --ring-noeffect: var(--gray-500);
 
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);
@@ -637,7 +639,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 0.8) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-900);
+    /* a11y: a dark ring (gray-900) is ~1.1:1 on the dark canvas — effectively
+       invisible. A light ring (gray-200) gives 5.5–10:1 on dark surfaces. */
+    --ring-noeffect: var(--gray-200);
 
     --gradient-noeffect-start: var(--gray-700);
     --gradient-noeffect-end: var(--gray-800);
@@ -1051,7 +1055,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-200);
+    /* a11y: gray-200 (#C0C0C0) is only 1.8:1 on white; gray-500 (#666666) is
+       5.78:1, clearing the WCAG 1.4.11 / 2.4.7 3:1 non-text contrast minimum. */
+    --ring-noeffect: var(--gray-500);
 
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);

package/src/styles/local-fonts.css

@@ -74,7 +74,8 @@
 
 @font-face {
   font-family: "Merriweather";
-  src: url("/fonts/Merriweather/Merriweather-Italic-VariableFont_opsz,wdth,wght.woff2") format("woff2");
+  src: url("/fonts/Merriweather/Merriweather-Italic-VariableFont_opsz,wdth,wght.woff2")
+    format("woff2");
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
@@ -94,4 +95,4 @@
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
-}
+}

package/src/widgets/modal/modal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { createContext, useCallback, useState } from 'react'
+import { createContext, useCallback, useRef, useState } from 'react'
 
 import { Dialog } from '@base-ui/react/dialog'
 import cx from 'classnames'
@@ -55,6 +55,33 @@ function Modal({
   closeOnOverlayClick,
   children,
 }: ModalProps): React.JSX.Element {
+  // Overlay dismissal is handled here rather than by Base UI's outside-press
+  // detection. `Dialog.Popup` below is the full-viewport flex box that centres
+  // the dialog, not the dialog box itself, so a click on the empty space around
+  // the dialog still lands *inside* the popup — Base UI sees no outside press
+  // and `disablePointerDismissal` never comes into play. Comparing the event
+  // target against the popup identifies those clicks: they hit the centring box
+  // directly, whereas a click on the dialog hits `Modal.Container` or a
+  // descendant of it.
+  //
+  // The press must both start and end on the popup. Without the pointerdown
+  // check, selecting text in the dialog and releasing outside it emits a click
+  // on their common ancestor — the popup — and would dismiss the dialog
+  // mid-drag.
+  const pressStartedOnOverlay = useRef(false)
+
+  const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
+    pressStartedOnOverlay.current = event.target === event.currentTarget
+  }
+
+  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+    const startedOnOverlay = pressStartedOnOverlay.current
+    pressStartedOnOverlay.current = false
+    if (closeOnOverlayClick !== true) return
+    if (!startedOnOverlay || event.target !== event.currentTarget) return
+    onDismiss?.()
+  }
+
   return (
     <ModalContext.Provider value={{ onDismiss }}>
       <Dialog.Root
@@ -69,7 +96,11 @@ function Modal({
       >
         <Dialog.Portal>
           <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
-          <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
+          <Dialog.Popup
+            className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}
+            onPointerDown={handleOverlayPointerDown}
+            onClick={handleOverlayClick}
+          >
             {children}
           </Dialog.Popup>
         </Dialog.Portal>

package/src/widgets/search/search.tsx

@@ -15,6 +15,7 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
   inputClassName?: ClassName
   intent?: Intent
   className?: ClassName
+  ariaLabel?: string
   ariaLabelForSearch?: string
   ariaLabelForClear?: string
   onClear?: () => void
@@ -52,8 +53,9 @@ export function Search({
   onSearch,
   validatorFn,
   placeHolderText = 'Search',
-  ariaLabelForSearch = 'search',
-  ariaLabelForClear = 'clear',
+  ariaLabel,
+  ariaLabelForSearch = 'Search',
+  ariaLabelForClear = 'Clear search',
   ...rest
 }: SearchProps): React.JSX.Element {
   const [search, setSearch] = useState<null | string>(null)
@@ -144,18 +146,17 @@ export function Search({
         id="search"
         defaultValue={search ?? ''}
         name="search"
+        aria-label={ariaLabel ?? placeHolderText}
         placeHolder={placeHolderText}
         disabled={false}
         error={false}
         startAdornment={
           <InputAdornment position="start">
             <IconButton
-              role="button"
               intent="noeffect"
               variant="text"
-              style={{ outline: 'none' }}
               ripple={false}
-              arial-label={ariaLabelForSearch}
+              aria-label={ariaLabelForSearch}
               size="xs"
               onClick={() => {
                 handleSearch()
@@ -168,12 +169,10 @@ export function Search({
         endAdornment={
           <InputAdornment position="end">
             <IconButton
-              role="button"
               intent="noeffect"
               variant="text"
-              style={{ outline: 'none' }}
               ripple={false}
-              arial-label={ariaLabelForClear}
+              aria-label={ariaLabelForClear}
               size="xs"
               onClick={() => {
                 handleClear()