@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/table.css

@@ -3,7 +3,7 @@
   --table-row-box-shadow: inset 0 -1px var(--neutral-a5);
 
   width: 100%;
-  text-align: left;
+  text-align: start;
   vertical-align: top;
   border-collapse: collapse;
   border-radius: calc(var(--table-border-radius) - 1px);
@@ -35,6 +35,10 @@
   /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
   padding: var(--table-cell-py) var(--table-cell-px);
 }
+/* Header cells follow the table's start alignment, not the browser's centred default */
+:where(.kui-TableCell) {
+  text-align: inherit;
+}
 .kui-TableColumnHeaderCell {
   font-weight: 600;
 }

package/src/components/table.props.tsx

@@ -63,7 +63,6 @@ const tableCellPropDefs = {
     type: 'enum',
     className: 'kui-r-ta',
     values: justifyValues,
-    parseValue: parseJustifyValue,
     responsive: true,
   },
   ...widthPropDefs,
@@ -72,12 +71,4 @@ const tableCellPropDefs = {
   justify: PropDef<(typeof justifyValues)[number]>;
 };
 
-function parseJustifyValue(value: string) {
-  return {
-    start: 'left',
-    center: 'center',
-    end: 'right',
-  }[value];
-}
-
 export { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs };

package/src/components/table.tsx

@@ -18,10 +18,16 @@ interface TableRootProps
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
-  const { className, children, layout, ...rootProps } = extractProps(
-    props,
-    rootPropDefs
-  );
+  const {
+    className,
+    children,
+    layout,
+    // The table is what gets named, not the scroll wrapper around it.
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    ...rootProps
+  } = extractProps(props, rootPropDefs);
   const tableLayoutClassNames = getResponsiveClassNames({
     value: layout,
     className: tableRootPropDefs.layout.className,
@@ -29,8 +35,16 @@ const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps,
   });
   return (
     <div ref={forwardedRef} className={classNames('kui-TableRoot', className)} {...rootProps}>
-      <ScrollArea>
-        <table className={classNames('kui-TableRootTable', tableLayoutClassNames)}>{children}</table>
+      {/* An overflowing scroller is a tab stop, so it carries the table's name and reads as a region. */}
+      <ScrollArea aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
+        <table
+          className={classNames('kui-TableRootTable', tableLayoutClassNames)}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+        >
+          {children}
+        </table>
       </ScrollArea>
     </div>
   );

package/src/components/tabs.css

@@ -9,3 +9,37 @@
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
+
+/*
+ * Vertical: the list is a column beside the panels, its hairline on the inline end, and the
+ * active line runs down that edge.
+ */
+.kui-TabsRoot:where([data-orientation='vertical']) {
+  display: flex;
+}
+
+.kui-TabsList:where([data-orientation='vertical']) {
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-shadow: inset calc(-1 * var(--border-width-standard)) 0 0 0 var(--neutral-a5);
+
+  &:where(:dir(rtl)) {
+    box-shadow: inset var(--border-width-standard) 0 0 0 var(--neutral-a5);
+  }
+
+  :where(&) .kui-TabsTrigger {
+    justify-content: flex-start;
+  }
+
+  :where(&) .kui-TabsTrigger:where([data-state='active'])::before {
+    top: 0;
+    bottom: 0;
+    left: auto;
+    right: auto;
+    inset-inline-end: 0;
+    width: var(--focus-ring-width, 2px);
+    height: auto;
+  }
+}

package/src/components/tabs.tsx

@@ -56,6 +56,11 @@ interface TabsTriggerProps
 const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
   (props, forwardedRef) => {
     const { className, children, ...triggerProps } = props;
+    // A hidden bold copy reserves the active width. Only plain text is copied: copying elements
+    // would duplicate their ids and mount them twice.
+    const isText = React.Children.toArray(children).every(
+      (child) => typeof child === 'string' || typeof child === 'number',
+    );
     return (
       <TabsPrimitive.Trigger
         {...triggerProps}
@@ -64,9 +69,11 @@ const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
         className={classNames('kui-reset', 'kui-BaseTabListTrigger', 'kui-TabsTrigger', className)}
       >
         <span className="kui-BaseTabListTriggerInner kui-TabsTriggerInner">{children}</span>
-        <span className="kui-BaseTabListTriggerInnerHidden kui-TabsTriggerInnerHidden">
-          {children}
-        </span>
+        {isText ? (
+          <span className="kui-BaseTabListTriggerInnerHidden kui-TabsTriggerInnerHidden" aria-hidden>
+            {children}
+          </span>
+        ) : null}
       </TabsPrimitive.Trigger>
     );
   },
@@ -86,8 +93,6 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
         {...contentProps}
         ref={forwardedRef}
         className={classNames('kui-TabsContent', className)}
-        aria-live="polite"
-        aria-atomic="true"
       />
     );
   },

package/src/components/text-area.css

@@ -19,8 +19,6 @@
 .kui-TextAreaRoot {
   display: flex;
   flex-direction: column;
-  /* The root spaces its parts: the gap sits between the text and an error message under it. */
-  gap: var(--space-2);
   box-sizing: border-box;
 
   font-family: var(--default-font-family);
@@ -28,8 +26,9 @@
   font-style: normal;
   text-align: start;
 
-  /* Allows the `resize` property to work on the div */
+  /* Allows the `resize` property to work on the div. Vertical by default, as in v2; the `resize` prop overrides it. */
   overflow: hidden;
+  resize: vertical;
 
   isolation: isolate;
 
@@ -480,7 +479,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* A sibling of the root, below the box: it takes the field's type itself. */
 .kui-TextAreaErrorMessage {
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  padding-top: var(--space-2);
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
@@ -495,3 +498,16 @@
   font-size: var(--font-size-1);
   line-height: 1;
 }
+
+/*
+ * Forced colors drop box-shadows, which draw every variant's boundary, so the box gets a real
+ * border there, as BaseButton does.
+ */
+@media (forced-colors: active) {
+  .kui-TextAreaRoot {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextAreaRoot:where(:has(.kui-TextAreaInput:disabled)) {
+    border-color: GrayText;
+  }
+}

package/src/components/text-area.tsx

@@ -52,34 +52,38 @@ const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, for
   const {
     error,
     errorMessage,
-   
     required,
     'aria-describedby': _ariaDescribedby,
     'aria-labelledby': _ariaLabelledby,
     ...nativeTextAreaProps
   } = textAreaProps;
 
+  // The message is a sibling of the painted root, so it sits below the box rather than inside it.
   return (
-    <div
-      data-accent-color={color}
-      data-radius={radius}
-      className={classNames('kui-TextAreaRoot', className, {
-        'kui-error': isInvalid,
-      })}
-      style={style}
-    >
-      <textarea
-        className="kui-reset kui-TextAreaInput"
-        ref={forwardedRef}
-        {...nativeTextAreaProps}
-        {...ariaProps}
-      />
+    <>
+      <div
+        data-accent-color={color}
+        data-radius={radius}
+        className={classNames('kui-TextAreaRoot', className, {
+          // Not used by the library's CSS (invalid styling keys on aria-invalid); kept as a hook for app styles.
+          'kui-error': isInvalid,
+        })}
+        style={style}
+      >
+        <textarea
+          className="kui-reset kui-TextAreaInput"
+          ref={forwardedRef}
+          {...nativeTextAreaProps}
+          required={required || undefined}
+          {...ariaProps}
+        />
+      </div>
       {textAreaProps.errorMessage && (
         <div id={errorId} className="kui-TextAreaErrorMessage" role="alert">
           {textAreaProps.errorMessage}
         </div>
       )}
-    </div>
+    </>
   );
 });
 

package/src/components/text-field.css

@@ -74,13 +74,13 @@
     width: var(--text-field-native-icon-size);
     height: var(--text-field-native-icon-size);
     padding: var(--space-2);
-    margin-left: 0;
-    margin-right: calc(var(--space-2) * -1);
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--space-2) * -1);
     border-radius: calc(var(--text-field-border-radius) - 2px);
   }
   /* Chrome's calendar icon */
   &:where(:not([type='time']))::-webkit-calendar-picker-indicator {
-    margin-left: var(--space-2);
+    margin-inline-start: var(--space-2);
   }
   @media (hover: hover) {
     &::-webkit-calendar-picker-indicator:where(:hover) {
@@ -133,37 +133,37 @@
   }
 
   /*
-   * A slot that is not a right-side slot goes on the left.
+   * A slot that is not a right-side slot goes on the left (the inline start, so the right in RTL).
    * The outer edge keeps the plain padding (the slot stands between the text and a pill's curve);
    * the inner edge is the gap to the text.
    */
   &:where(:not([data-side='right'])) {
     order: -1;
-    margin-left: calc(var(--text-field-border-width) * -1);
-    margin-right: 0;
-    padding-left: var(--text-field-px);
-    padding-right: var(--text-field-gap);
+    margin-inline-start: calc(var(--text-field-border-width) * -1);
+    margin-inline-end: 0;
+    padding-inline-start: var(--text-field-px);
+    padding-inline-end: var(--text-field-gap);
 
     /* A hosted control sits the slot inset from the edge, the same distance as above and below. */
     &:where(:has(> .kui-BaseButton)) {
-      padding-left: var(--text-field-slot-inset);
+      padding-inline-start: var(--text-field-slot-inset);
     }
   }
 
   &:where([data-side='right']),
   /*
-   * A slot followed by a left-side slot that is not a left-side slot itself goes on the right.
+   * A slot followed by a left-side slot that is not a left-side slot itself goes on the right (the inline end).
    * In simple terms, this makes it so that two slots without an explicit side work automatically.
    */
   :where(&:not([data-side='right'])) ~ &:where(:not([data-side='left'])) {
     order: 0;
-    margin-left: 0;
-    margin-right: calc(var(--text-field-border-width) * -1);
-    padding-left: var(--text-field-gap);
-    padding-right: var(--text-field-px);
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--text-field-border-width) * -1);
+    padding-inline-start: var(--text-field-gap);
+    padding-inline-end: var(--text-field-px);
 
     &:where(:has(> .kui-BaseButton)) {
-      padding-right: var(--text-field-slot-inset);
+      padding-inline-end: var(--text-field-slot-inset);
     }
   }
 }
@@ -211,33 +211,33 @@
   /* Clip text to the border radius of the Root */
   border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width));
 
-  /* Equivalent to padding-left, but doesn't cut off long values when cursor is at the end. */
+  /* Equivalent to padding-inline-start, but doesn't cut off long values when cursor is at the end. */
   text-indent: calc(var(--text-field-px-bare) - var(--text-field-border-width));
-  padding-right: calc(var(--text-field-px-bare) - var(--text-field-border-width));
+  padding-inline-end: calc(var(--text-field-px-bare) - var(--text-field-border-width));
 
   &:where([type='date'], [type='datetime-local'], [type='time'], [type='week'], [type='month']) {
     /* Safari is buggy with text-indent for these input types */
     text-indent: 0;
-    padding-left: calc(var(--text-field-px-bare) - var(--text-field-border-width));
+    padding-inline-start: calc(var(--text-field-px-bare) - var(--text-field-border-width));
   }
 
-  /* Remove border-radius and text-indent/padding on the left if there's a left-side slot */
+  /* Remove border-radius and text-indent/padding at the inline start if there's a left-side slot */
   &:where(:has(~ .kui-TextFieldSlot:not([data-side='right']))) {
     text-indent: 0;
-    padding-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    padding-inline-start: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 
-  /* Remove border-radius and padding on the right if there's a right-side slot */
+  /* Remove border-radius and padding at the inline end if there's a right-side slot */
   /* prettier-ignore */
   &:where(:has(
     ~ .kui-TextFieldSlot[data-side='right'],
     ~ .kui-TextFieldSlot:not([data-side='right']) ~ .kui-TextFieldSlot:not([data-side='left'])
   )) {
-    padding-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    padding-inline-end: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 }
 
@@ -261,8 +261,8 @@
 
         /* Safari credentials autofill icon */
         &::-webkit-textfield-decoration-container {
-          padding-right: 0px;
-          margin-right: -2px;
+          padding-inline-end: 0px;
+          margin-inline-end: -2px;
         }
       }
     }
@@ -286,8 +286,8 @@
 
         /* Safari credentials autofill icon */
         &::-webkit-textfield-decoration-container {
-          padding-right: 2px;
-          margin-right: 0px;
+          padding-inline-end: 2px;
+          margin-inline-end: 0px;
         }
       }
     }
@@ -310,8 +310,8 @@
 
         /* Safari credentials autofill icon */
         &::-webkit-textfield-decoration-container {
-          padding-right: 5px;
-          margin-right: 0px;
+          padding-inline-end: 5px;
+          margin-inline-end: 0px;
         }
       }
     }
@@ -333,8 +333,8 @@
 
         /* Safari credentials autofill icon */
         &::-webkit-textfield-decoration-container {
-          padding-right: 5px;
-          margin-right: 0px;
+          padding-inline-end: 5px;
+          margin-inline-end: 0px;
         }
       }
     }
@@ -662,11 +662,13 @@
 
 /* Error message styling */
 .kui-TextFieldErrorMessage {
+  /* A sibling of the root, below the field: it takes the field's type itself. */
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  /* The field is a row, so a gap on the root would sit beside the message, not above it. The
-     drop is inside the message's own box, never a margin on it. */
+  /* The drop is inside the message's own box, never a margin on it. */
   padding-top: var(--space-2);
   display: flex;
   align-items: center;
@@ -680,6 +682,19 @@
   line-height: 1;
 }
 
+/*
+ * Forced colors drop box-shadows, which draw every variant's boundary, so the field gets a real
+ * border there, as BaseButton does.
+ */
+@media (forced-colors: active) {
+  .kui-TextFieldRoot {
+    border: 1px solid CanvasText;
+  }
+  .kui-TextFieldRoot:where(:has(.kui-TextFieldInput:disabled)) {
+    border-color: GrayText;
+  }
+}
+
 /***************************************************************************************************
  *                                                                                                 *
  * SCRUBBING                                                                                       *