@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/chatbar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
-import { IconButton, type IconButtonProps } from './icon-button.js';
+import { Button } from './button.js';
 import { CloseIcon, FileTextIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
@@ -16,7 +16,7 @@ import { VisuallyHidden } from './visually-hidden.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { accentColors } from '../props/color.prop.js';
 import type { radii } from '../props/radius.prop.js';
-import type { ButtonRankProps } from './button.js';
+import type { ButtonProps, ButtonRankProps } from './button.js';
 
 // Avoid SSR warnings by using an isomorphic layout effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -696,7 +696,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
             <div
               {...divProps}
               ref={composedRootRef}
-              className={classNames('rt-ChatbarRoot', `rt-r-size-${size}`, className)}
+              className={classNames('kui-ChatbarRoot', `kui-r-size-${size}`, className)}
               style={{ position: 'relative', width, maxWidth, ...style }}
               data-state={open ? 'open' : 'closed'}
               data-disabled={disabled ? '' : undefined}
@@ -715,23 +715,23 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 onChange={handleFileInputChange}
               />
               {notices ? (
-                <div className="rt-ChatbarNotices">
+                <div className="kui-ChatbarNotices">
                   <NoticeSizeContext.Provider value={size}>{notices}</NoticeSizeContext.Provider>
                 </div>
               ) : null}
               <div {...(dropzone ? getRootProps() : {})} style={{ width: '100%', flex: '1 1 auto', minHeight: 0 }} onPointerDown={handleContainerPointerDown}>
                 <div
-                  className={classNames('rt-ChatbarBox', `rt-variant-${variant ?? 'raised'}`)}
+                  className={classNames('kui-ChatbarBox', `kui-variant-${variant ?? 'raised'}`)}
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}
                 >
-                  <div className="rt-ChatbarGrid">
+                  <div className="kui-ChatbarGrid">
                     {children}
                   </div>
                   {dragActive && (
-                    <div className="rt-ChatbarDropOverlay" aria-hidden>
-                      <div className="rt-ChatbarDropContent">
+                    <div className="kui-ChatbarDropOverlay" aria-hidden>
+                      <div className="kui-ChatbarDropContent">
                         <Text emphasis="medium" size={size} weight="medium">
                           Drop files here to attach
                         </Text>
@@ -741,7 +741,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                 </div>
               </div>
               {context ? (
-                <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="rt-ChatbarContext">
+                <Text as="div" size={size === '3' ? '2' : '1'} emphasis="medium" className="kui-ChatbarContext">
                   {context}
                 </Text>
               ) : null}
@@ -960,11 +960,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, fo
 
   const Comp = asChild ? Slot : 'textarea';
   return (
-    <div className={classNames('rt-ChatbarField', 'rt-ChatbarTextarea', className)}>
+    <div className={classNames('kui-ChatbarField', 'kui-ChatbarTextarea', className)}>
       <Comp
         {...textareaProps}
         ref={composedRef}
-        className="rt-ChatbarInput"
+        className="kui-ChatbarInput"
         value={value}
         onChange={handleChange}
         onFocus={handleFocus}
@@ -995,7 +995,7 @@ const InlineStart = React.forwardRef<HTMLDivElement, InlineSlotProps>((props, fo
   if (ctx.open) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarInlineStart', className)}>
+    <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarInlineStart', className)}>
       {children}
     </Comp>
   );
@@ -1008,7 +1008,7 @@ const InlineEnd = React.forwardRef<HTMLDivElement, InlineSlotProps>((props, forw
   if (ctx.open) return null;
   const Comp = asChild ? Slot : 'div';
   return (
-    <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarInlineEnd', className)}>
+    <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarInlineEnd', className)}>
       {children}
     </Comp>
   );
@@ -1037,8 +1037,8 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   const Comp = asChild ? Slot : 'div';
   return (
     <div>
-      <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
-        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal">
+      <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
+        <ScrollArea className="kui-ChatbarScrollArea" scrollbars="horizontal">
           <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
@@ -1064,7 +1064,7 @@ function moveFocusOffPill(button: HTMLButtonElement, textareaRef: React.RefObjec
   const pills = pill?.parentElement ? Array.from(pill.parentElement.children) : [];
   const index = pill ? pills.indexOf(pill) : -1;
   const neighbour = pills[index + 1] ?? pills[index - 1];
-  const nextButton = neighbour?.querySelector<HTMLButtonElement>('.rt-ChatbarItemRemove');
+  const nextButton = neighbour?.querySelector<HTMLButtonElement>('.kui-ChatbarItemRemove');
   if (nextButton) nextButton.focus();
   else textareaRef.current?.focus({ preventScroll: true });
 }
@@ -1082,17 +1082,17 @@ const Pill: React.FC<{
   const ctx = useChatbarContext();
   return (
     <>
-      <span className="rt-ChatbarItemLead" data-kind={leadKind} aria-hidden>
+      <span className="kui-ChatbarItemLead" data-kind={leadKind} aria-hidden>
         {lead}
       </span>
-      <Text className="rt-ChatbarItemLabel" size={ctx.size} truncate>
+      <Text className="kui-ChatbarItemLabel" size={ctx.size} truncate>
         {label}
         {detail ? <VisuallyHidden>, {detail}</VisuallyHidden> : null}
       </Text>
       {onRemove && (
-        <IconButton className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
+        <Button iconOnly className="kui-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
           <CloseIcon />
-        </IconButton>
+        </Button>
       )}
     </>
   );
@@ -1124,7 +1124,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
     attachment.status === 'uploading' ? (
       <Spinner />
     ) : isImage ? (
-      <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
+      <img className="kui-ChatbarAttachmentImage" src={attachment.url} alt="" />
     ) : (
       <FileTextIcon />
     );
@@ -1133,7 +1133,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
     <Comp
       {...divProps}
       ref={forwardedRef}
-      className={classNames(children ? 'rt-ChatbarAttachment' : 'rt-ChatbarAttachment rt-ChatbarItem', className)}
+      className={classNames(children ? 'kui-ChatbarAttachment' : 'kui-ChatbarAttachment kui-ChatbarItem', className)}
       role="listitem"
       data-kind={isImage ? 'image' : 'file'}
       data-status={attachment.status}
@@ -1191,13 +1191,13 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
     <div
       {...divProps}
       ref={forwardedRef}
-      className={classNames('rt-ChatbarItem', className)}
+      className={classNames('kui-ChatbarItem', className)}
       role="listitem"
       data-accent-color={image ? undefined : (color ?? 'gray')}
       title={children}
     >
       <Pill
-        lead={image ? <img className="rt-ChatbarAttachmentImage" src={image} alt="" /> : icon}
+        lead={image ? <img className="kui-ChatbarAttachmentImage" src={image} alt="" /> : icon}
         leadKind={image ? 'image' : 'icon'}
         label={children}
         removeLabel={removeLabel ?? `Remove ${children}`}
@@ -1224,7 +1224,7 @@ const AttachTrigger = React.forwardRef<HTMLButtonElement, AttachTriggerProps>((p
     <Comp
       {...buttonProps}
       ref={forwardedRef}
-      className={classNames('rt-ChatbarAttachTrigger', buttonProps.className)}
+      className={classNames('kui-ChatbarAttachTrigger', buttonProps.className)}
       type={buttonProps.type ?? 'button'}
       aria-label={buttonProps['aria-label'] ?? 'Add attachments'}
       disabled={disabled}
@@ -1254,7 +1254,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, forwardedRef) =>
   const Comp = asChild ? Slot : 'div';
   return (
     <div>
-      <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRow', className)}>
+      <Comp {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRow', className)}>
         <Flex align="center" justify="between" width="100%">
           {children}
         </Flex>
@@ -1268,19 +1268,19 @@ type RowSlotProps = React.ComponentPropsWithoutRef<'div'>;
 
 const RowStart = React.forwardRef<HTMLDivElement, RowSlotProps>((props, forwardedRef) => {
   const { className, ...divProps } = props;
-  return <div {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRowStart', className)} />;
+  return <div {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRowStart', className)} />;
 });
 RowStart.displayName = 'Chatbar.RowStart';
 
 const RowEnd = React.forwardRef<HTMLDivElement, RowSlotProps>((props, forwardedRef) => {
   const { className, ...divProps } = props;
-  return <div {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarRowEnd', className)} />;
+  return <div {...divProps} ref={forwardedRef} className={classNames('kui-ChatbarRowEnd', className)} />;
 });
 RowEnd.displayName = 'Chatbar.RowEnd';
 
 type SendStatus = 'ready' | 'submitted' | 'streaming' | 'error';
 
-type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
+type SendProps = Omit<ButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
   /** Optional override for accessible name. Defaults to "Send". */
   'aria-label'?: string;
@@ -1388,13 +1388,14 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     );
 
   return (
-    <IconButton
+    <Button
+      iconOnly
       {...buttonProps}
       ref={forwardedRef}
       size={sizeProp ?? ctx.size}
       {...(emphasis ? { emphasis } : { variant: variantProp ?? (ctx.open || mode !== 'send' ? 'solid' : 'ghost') })}
       disabled={inactive}
-      className={classNames('rt-ChatbarSend', className)}
+      className={classNames('kui-ChatbarSend', className)}
       style={{ opacity: visible ? 1 : 0, pointerEvents: visible ? undefined : 'none', ...style }}
       // Hidden Send must not be reachable by keyboard or announced
       aria-hidden={visible ? undefined : true}
@@ -1406,7 +1407,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       {...labelProps}
     >
       {glyph}
-    </IconButton>
+    </Button>
   );
 });
 Send.displayName = 'Chatbar.Send';

package/src/components/checkbox-group.css

@@ -1,10 +1,10 @@
-.rt-CheckboxGroupRoot {
+.kui-CheckboxGroupRoot {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
 
-.rt-CheckboxGroupItem {
+.kui-CheckboxGroupItem {
   display: flex;
   gap: 0.5em;
 
@@ -13,18 +13,18 @@
 }
 
 /* The disabled cursor lives in the base mark. */
-.rt-CheckboxGroupItemCheckbox {
+.kui-CheckboxGroupItemCheckbox {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:disabled)::before {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
 }
 
-.rt-CheckboxGroupItemInner {
+.kui-CheckboxGroupItemInner {
   /* Make layouts with text truncation possible */
   min-width: 0;
 }

package/src/components/checkbox-group.tsx

@@ -11,10 +11,8 @@ import { ThickCheckIcon } from './icons.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
@@ -37,7 +35,6 @@ interface CheckboxGroupRootProps
       typeof CheckboxGroupPrimitive.Root,
       'asChild' | 'color' | 'defaultChecked'
     >,
-    MarginProps,
     CheckboxGroupRootOwnProps {}
 const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGroupRootProps>(
   (
@@ -50,7 +47,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
     forwardedRef,
   ) => {
     const size = useThemeSize(sizeProp, checkboxGroupRootPropDefs.size);
-    const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const { __scopeCheckboxGroup, className, ...rootProps } = props;
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
     return (
       <CheckboxGroupProvider
@@ -63,7 +60,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
           {...checkboxGroupScope}
           {...rootProps}
           ref={forwardedRef}
-          className={classNames('rt-CheckboxGroupRoot', className)}
+          className={classNames('kui-CheckboxGroupRoot', className)}
         />
       </CheckboxGroupProvider>
     );
@@ -73,8 +70,7 @@ CheckboxGroupRoot.displayName = 'CheckboxGroup.Root';
 
 type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
 interface CheckboxGroupItemProps
-  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
-    MarginProps {}
+  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps> {}
 const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
   (_props: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
     const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
@@ -95,7 +91,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
         <Text
           as="label"
           size={getTextSize(size)}
-          className={classNames('rt-CheckboxGroupItem', className)}
+          className={classNames('kui-CheckboxGroupItem', className)}
           style={style}
         >
           <CheckboxGroupItemCheckbox
@@ -103,7 +99,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
             {...props}
             ref={forwardedRef}
           />
-          {children && <span className="rt-CheckboxGroupItemInner">{children}</span>}
+          {children && <span className="kui-CheckboxGroupItemInner">{children}</span>}
         </Text>
       );
     }
@@ -133,7 +129,6 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
   const { color, className } = extractProps(
     { ...props, ...context },
     checkboxGroupRootPropDefs,
-    marginPropDefs,
   );
   return (
     <CheckboxGroupPrimitive.Item
@@ -142,16 +137,16 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
       {...props}
       ref={forwardedRef}
       className={classNames(
-        'rt-reset',
-        'rt-BaseCheckboxRoot',
-        'rt-CheckboxGroupItemCheckbox',
+        'kui-reset',
+        'kui-BaseCheckboxRoot',
+        'kui-CheckboxGroupItemCheckbox',
         className,
       )}
     >
       <CheckboxGroupPrimitive.Indicator
         {...checkboxGroupScope}
         asChild
-        className="rt-BaseCheckboxIndicator"
+        className="kui-BaseCheckboxIndicator"
       >
         <ThickCheckIcon />
       </CheckboxGroupPrimitive.Indicator>

package/src/components/checkbox.css

@@ -1,13 +1,13 @@
 @import './_internal/base-checkbox.css';
 
 /* The disabled cursor lives in the base mark. */
-.rt-CheckboxRoot {
+.kui-CheckboxRoot {
   &:where(:focus-visible)::before {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:disabled)::before {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
 }

package/src/components/checkbox.tsx

@@ -9,9 +9,7 @@ import { checkboxPropDefs } from './checkbox.props.js';
 import { ThickCheckIcon, ThickDividerHorizontalIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -22,7 +20,6 @@ interface CheckboxProps
       typeof CheckboxPrimitive.Root,
       'asChild' | 'color' | 'defaultValue' | 'children'
     >,
-    MarginProps,
     CheckboxOwnProps {}
 const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);
@@ -33,7 +30,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, for
     defaultChecked: defaultCheckedProp,
     onCheckedChange,
     ...checkboxProps
-  } = extractProps(props, checkboxPropDefs, marginPropDefs);
+  } = extractProps(props, checkboxPropDefs);
 
   const [checked, setChecked] = useControllableState({
     prop: checkedProp,
@@ -50,11 +47,11 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, for
       onCheckedChange={setChecked}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-BaseCheckboxRoot', 'rt-CheckboxRoot', className)}
+      className={classNames('kui-reset', 'kui-BaseCheckboxRoot', 'kui-CheckboxRoot', className)}
     >
       <CheckboxPrimitive.Indicator
         asChild
-        className="rt-BaseCheckboxIndicator rt-CheckboxIndicator"
+        className="kui-BaseCheckboxIndicator kui-CheckboxIndicator"
       >
         {checked === 'indeterminate' ? <ThickDividerHorizontalIcon /> : <ThickCheckIcon />}
       </CheckboxPrimitive.Indicator>

package/src/components/chip.css

@@ -0,0 +1,162 @@
+.kui-Chip {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-medium);
+  font-style: normal;
+  flex-shrink: 0;
+  line-height: 1;
+
+  /* Make sure that the height is not stretched in a Flex/Grid layout */
+  height: fit-content;
+
+  /* Fix Chrome background bleeding on rounded corners */
+  background-clip: padding-box;
+
+  /* Force Chrome to recalculate styles when radius changes */
+  will-change: border-radius;
+
+  isolation: isolate;
+
+  /* Forced colors support */
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+    color: CanvasText;
+    background-color: Canvas;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
+@breakpoints {
+  .kui-Chip {
+    &:where(.kui-r-size-1) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      padding: var(--space-1) var(--space-2);
+      gap: var(--space-2);
+      border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
+    }
+    &:where(.kui-r-size-2) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      padding: var(--space-2) var(--space-3);
+      gap: var(--space-2);
+      border-radius: var(--radius-control-1);
+
+      &:where(.kui-variant-ghost) {
+        padding: var(--space-1) var(--space-2);
+      }
+    }
+    &:where(.kui-r-size-3) {
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      padding: var(--space-2) var(--space-4);
+      gap: var(--space-3);
+      border-radius: var(--radius-control-2);
+
+      &:where(.kui-variant-ghost) {
+        padding: var(--space-1) var(--space-3);
+        gap: var(--space-2);
+      }
+    }
+    &:where(.kui-r-size-4) {
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+      padding: var(--space-2) var(--space-4);
+      gap: var(--space-3);
+      border-radius: var(--radius-control-3);
+
+      &:where(.kui-variant-ghost) {
+        padding: var(--space-2) var(--space-3);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* solid */
+
+.kui-Chip:where(.kui-variant-solid) {
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
+
+  &:where([data-disabled]) {
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
+    outline: none;
+    filter: none;
+    cursor: default;
+  }
+}
+
+/* surface */
+
+.kui-Chip:where(.kui-variant-surface) {
+  background-color: var(--accent-2);
+  box-shadow: inset 0 0 0 1px var(--accent-6);
+  color: var(--accent-ink);
+}
+
+/* soft / ghost */
+
+.kui-Chip:where(.kui-variant-soft, .kui-variant-ghost) {
+  color: var(--accent-ink);
+
+  &:where([data-disabled]) {
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
+    cursor: default;
+  }
+}
+
+.kui-Chip:where(.kui-variant-soft) {
+  background-color: var(--accent-3);
+
+  &:where([data-disabled]) {
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
+    cursor: default;
+  }
+}
+
+/* outline */
+
+.kui-Chip:where(.kui-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-6);
+  color: var(--accent-ink);
+}
+
+/* ghost */
+
+.kui-Chip:where(.kui-variant-ghost) {
+  background-color: transparent;
+  color: var(--accent-ink);
+}
+
+/* raised */
+
+.kui-Chip:where(.kui-variant-raised) {
+  position: relative;
+  top: var(--raised-elevation-offset);
+  color: var(--accent-ink);
+  box-shadow: var(--shadow-2);
+
+  --raised-surface: var(--color-surface);
+  background-color: var(--raised-surface);
+}

package/src/components/chip.props.tsx

@@ -0,0 +1,21 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { grayAccentColorPropDef } from '../props/color.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
+
+const chipPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
+  ...grayAccentColorPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { chipPropDefs };