@makinbakin/sdk 0.0.1-rc.35 → 0.0.1-rc.37

package/_internal/ui/primitives/input.d.ts

@@ -1,5 +1,10 @@
 import { Input as InputPrimitive } from '@base-ui/react/input';
-export type InputProps = InputPrimitive.Props;
+import { type ControlSize, type ControlVariant } from './control-styles';
+export type InputProps = Omit<InputPrimitive.Props, 'size'> & {
+    size?: ControlSize;
+    variant?: ControlVariant;
+    htmlSize?: number;
+};
 /** Shared internally by FieldControl when it renders its default input. */
 export declare const inputClasses: string;
-export declare function Input({ className, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ className, type, size, variant, htmlSize, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;

package/_internal/ui/primitives/select.d.ts

@@ -1,25 +1,35 @@
 import * as React from 'react';
 import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { type ControlSize, type ControlVariant } from './control-styles';
 export type SelectProps<Value, Multiple extends boolean | undefined = false> = SelectPrimitive.Root.Props<Value, Multiple>;
 export type SelectGroupProps = SelectPrimitive.Group.Props;
 export type SelectValueProps = SelectPrimitive.Value.Props;
-export type SelectTriggerSize = 'sm' | 'default';
+export type SelectTriggerSize = ControlSize;
 export type SelectTriggerProps = SelectPrimitive.Trigger.Props & {
     size?: SelectTriggerSize;
+    variant?: ControlVariant;
+    width?: 'full' | 'auto';
 };
 export type SelectContentProps = SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>;
 export type SelectLabelProps = SelectPrimitive.GroupLabel.Props;
-export type SelectItemProps = SelectPrimitive.Item.Props;
+export type SelectItemProps = SelectPrimitive.Item.Props & {
+    /**
+     * Secondary text under the item's label — the reason a disabled option
+     * cannot be chosen. Exposed as the option's accessible DESCRIPTION
+     * (`aria-describedby`), never as part of its name.
+     */
+    description?: React.ReactNode;
+};
 export type SelectSeparatorProps = SelectPrimitive.Separator.Props;
 export type SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
 export type SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
 export declare const Select: typeof SelectPrimitive.Root;
 export declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectValue({ className, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
-export declare function SelectTrigger({ className, size, children, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectTrigger({ className, size, variant, width, children, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
-export declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectItem({ className, children, description, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectScrollUpButton({ className, ...props }: SelectScrollUpButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectScrollDownButton({ className, ...props }: SelectScrollDownButtonProps): import("react/jsx-runtime").JSX.Element;

package/_internal/ui/primitives/textarea.d.ts

@@ -1,3 +1,19 @@
-import type { ComponentProps } from 'react';
-export type TextareaProps = ComponentProps<'textarea'>;
-export declare function Textarea({ className, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+import { type ControlSize, type ControlVariant } from './control-styles';
+type TextareaHeight = {
+    autoSize?: false;
+    rows?: number;
+    minRows?: never;
+    maxRows?: never;
+} | {
+    autoSize: true;
+    rows?: never;
+    minRows?: number;
+    maxRows?: number;
+};
+export type TextareaProps = Omit<ComponentProps<'textarea'>, 'rows'> & TextareaHeight & {
+    size?: ControlSize;
+    variant?: ControlVariant;
+};
+export declare function Textarea({ className, size, variant, autoSize, rows, minRows, maxRows, ref, onInput, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/_internal/ui/primitives/use-textarea-autosize.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+/** Browser-measured rows; Firefox does not yet implement CSS field-sizing. */
+export declare function useTextareaAutosize(ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, minRows: number, maxRows: number): () => void;

package/bin/bakin-plugin-test-ui.js

@@ -6436,13 +6436,14 @@ async function inspectBrowserPage(page) {
       "input",
       "select",
       "textarea",
+      "details > summary:first-of-type",
       '[contenteditable="true"]',
       "[tabindex]"
     ].join(",");
     const visible = (element) => {
       const style = getComputedStyle(element);
       const rect = element.getBoundingClientRect();
-      return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
+      return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0 && !element.closest("details:not([open]) > :not(summary:first-of-type)");
     };
     const label = (element) => {
       const id = element.id ? `#${element.id}` : "";
@@ -6477,15 +6478,25 @@ async function inspectBrowserPage(page) {
 }
 async function keyboardFocusFindings(page, viewport) {
   const targets = await page.evaluate(() => {
+    const hiddenInClosedDetails = (element) => {
+      for (let node = element;node; node = node.parentElement) {
+        const parent = node.parentElement;
+        if (!parent || parent.tagName !== "DETAILS" || parent.hasAttribute("open"))
+          continue;
+        if (node.tagName !== "SUMMARY")
+          return true;
+      }
+      return false;
+    };
     if (document.activeElement instanceof HTMLElement)
       document.activeElement.blur();
     document.body.tabIndex = -1;
     document.body.focus();
-    const selector = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+    const selector = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), details > summary:first-of-type, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
     const visibleElements = [...document.querySelectorAll(selector)].filter((element) => {
       const style = getComputedStyle(element);
       const rect = element.getBoundingClientRect();
-      return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0 && !element.matches(":disabled") && element.tabIndex >= 0 && !element.closest('[inert], [aria-hidden="true"]');
+      return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0 && !element.closest("details:not([open]) > :not(summary:first-of-type)") && !element.matches(":disabled") && element.tabIndex >= 0 && !element.closest('[inert], [aria-hidden="true"]') && !hiddenInClosedDetails(element);
     });
     const radioGroups = new Map;
     for (const element of visibleElements) {
@@ -6540,7 +6551,7 @@ ${element.name}`) ?? [element];
     const focus = await page.evaluate(async (restingById) => {
       await new Promise((resolveFrame) => requestAnimationFrame(() => resolveFrame()));
       const element = document.activeElement;
-      if (!(element instanceof HTMLElement) || element === document.body) {
+      if (!(element instanceof HTMLElement || element instanceof SVGElement) || element === document.body) {
         return { reached: false, visible: false, id: "", label: "document body", diagnostic: "" };
       }
       const id = element.getAttribute("data-bakin-ui-test-focus-id") ?? "";
@@ -6569,6 +6580,7 @@ ${element.name}`) ?? [element];
         "transform"
       ].some((property) => focused[property] !== resting[property]);
       const focusVisible = element.matches(":focus-visible");
+      const chartPointDescribed = element instanceof SVGElement && element.getAttribute("role") === "img" && Boolean(element.getAttribute("aria-describedby"));
       const group = element.matches('[data-slot="input-group-control"]') ? element.closest('[data-slot="input-group"]') : null;
       const groupStyle = group ? getComputedStyle(group) : null;
       const groupResting = resting?.groupOutline;
@@ -6576,20 +6588,29 @@ ${element.name}`) ?? [element];
       const label = element.getAttribute("aria-label") || element.textContent?.trim() || element.tagName.toLowerCase();
       return {
         reached: Boolean(id),
-        visible: focusVisible && (visibleOutline && outlineChanged || shadowChanged || surfaceChanged || groupRingChanged),
+        visible: focusVisible && (visibleOutline && outlineChanged || shadowChanged || surfaceChanged || groupRingChanged || chartPointDescribed),
         id,
         label: label.slice(0, 80),
         diagnostic: `focus-visible=${focusVisible}; outline=${style.outlineStyle} ${style.outlineWidth}; shadow=${style.boxShadow}`
       };
     }, Object.fromEntries(targets.map((target) => [target.id, target.resting])));
     if (!focus.reached) {
-      const missing = targets.filter((target) => !reached.has(target.id)).map((target) => target.label).join(", ");
+      const missingTargets = targets.filter((target) => !reached.has(target.id));
+      const why = await page.evaluate((ids) => ids.map((id) => {
+        const element = document.querySelector(`[data-bakin-ui-test-focus-id="${id}"]`);
+        if (!element)
+          return "gone";
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        return `display=${style.display} size=${Math.round(rect.width)}x${Math.round(rect.height)} tabindex=${element.tabIndex}${element.closest("details:not([open])") ? " inside-closed-details" : ""}`;
+      }), missingTargets.map((target) => target.id));
+      const missing = missingTargets.map((target, index2) => `${target.label} [${why[index2]}]`).join(", ");
       findings.push({
         rule: "keyboard-focus",
         enforcement: "conformance",
         fixture: FIXTURE_NAME,
         viewport,
-        message: `Tab left the visible fixture controls after reaching ${reached.size} of ${targets.length}. Missing: ${missing}.`,
+        message: `Tab left the visible fixture controls after reaching ${reached.size} of ${targets.length} (focus landed on ${focus.label}). Missing: ${missing}.`,
         repair: "Use native interactive elements or a documented SDK control and preserve its complete tab order."
       });
       break;